/*============================== REMINDER - SISTEMA VISUAL========== */
:root {
    --beige: #F5F5F3;
    --negro: #0A0A0A;
    --linea: rgba(10, 10, 10, 0.1);
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--beige);
    color: var(--negro);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/*================== HEADER======================= */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 8%;
    border-bottom: 1px solid var(--linea);
}

.logo {
    font-weight: 900;
    letter-spacing: 0.5em;
    font-size: 0.7rem;
    text-transform: uppercase;
}

nav a {
    text-decoration: none;
    color: var(--negro);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-left: 30px;
    font-weight: 700;
}

.nav-talk {
    border: 1px solid var(--negro);
    padding: 10px 15px;
}

/* ============================ HERO (ESPACIADO CORREGIDO) =============================== */
.hero {
    display: grid;
    grid-template-columns: 8% 1fr;
    min-height: 85vh;
}

.hero-line {
    border-right: 1px solid var(--linea);
}

.hero-content {
    /* Aumentamos el padding top y bottom significativamente */
    padding: 100px 8% 120px 8% !important; 
}

/* Usamos especificidad para el h1 del hero para no dañar otros títulos */
.hero-content h1 {
    font-size: clamp(4rem, 15vw, 12rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: 0;
}

.subline {
    font-size: 1.2rem;
    max-width: 400px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.8;
    padding-left: 25px;
    border-left: 3px solid var(--negro);
}

.cta {
    font-weight: 900;
    text-decoration: none;
    color: var(--negro);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--negro);
    padding-bottom: 5px;
    transition: opacity 0.3s ease;
}

.cta:hover {
    opacity: 0.6;
}

/* Ajuste Responsivo para que el padding no sea excesivo en móviles */
@media (max-width: 768px) {
    .hero-content {
        padding: 120px 6% 80px 6% !important;
    }
}

/* PRINCIPLES */
.principles {
    display: grid;
    grid-template-columns: 8% 1fr;
    border-top: 1px solid var(--linea);
}

.principles-header {
    grid-column: 2;
    padding: 100px 8% 60px 8%;
}

.label {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 20px;
    opacity: 0.6;
}

.section-title {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.principles-grid {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--linea);
}

.principle-item {
    padding: 60px 8%;
    border-right: 1px solid var(--linea);
}

.principle-item:last-child {
    border-right: none;
}

.principle-num {
    display: block;
    font-size: 0.8rem;
    font-weight: 900;
    margin-bottom: 30px;
}

.principle-item h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    font-weight: 800;
}

.principle-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.7;
}

/* ======================= VERSIÓN MOBILE CORREGIDA ======================== */
@media (max-width: 768px) {
    /* --- 1. ARREGLO DEL HEADER (Todo en una línea) --- */
    header {
        padding: 0 4%; /* Reducimos el margen lateral al mínimo */
        display: flex;
        flex-direction: row; /* Forzamos fila */
        justify-content: space-between; /* Logo a la izquierda, Nav a la derecha */
        align-items: center;
        height: 70px; /* Altura fija para control */
    }

    header .logo {
        font-size: 0.9rem; /* Logo un poco más pequeño para dejar espacio */
        flex-shrink: 0; /* Que el logo no se aplaste */
    }

    header nav {
        display: flex;
        flex-direction: row; /* Forzamos links en fila */
        flex-wrap: nowrap; /* PROHIBIDO saltar de línea */
        gap: 8px; /* Espacio estrecho entre botones */
        align-items: center;
    }

    header nav a {
        font-size: 10px; /* Letra pequeña estratégica para que quepan los 4 */
        text-transform: uppercase;
        white-space: nowrap; /* Evita que "News room" se ponga en dos renglones */
        letter-spacing: 0.02em;
    }

    /* Ajuste del botón Talk para que sea compacto */
    header nav a.nav-talk {
        padding: 5px 8px;
        border: 1px solid var(--negro);
        font-weight: 900;
    }

    /* --- 2. LO QUE YA TE FUNCIONABA (Sin cambios) --- */
    .hero, .principles { 
        grid-template-columns: 1fr; 
    }
    
    .hero-line { 
        display: none; 
    }
    
    .principles-grid { 
        grid-template-columns: 1fr; 
    }
    
    .principle-item { 
        border-right: none; 
        border-bottom: 1px solid var(--linea); 
    }
    
    h1 { 
        font-size: 4rem; 
        line-height: 0.9;
    }
    
    .section-title { 
        font-size: 2rem; 
    }

    /* --- 3. SEGURO CONTRA SCROLL LATERAL --- */
    body {
        overflow-x: hidden;
        width: 100%;
    }
}

/* SECTION SERVICES - FIXED BLACK THEME */
.services {
    display: grid;
    grid-template-columns: 8% 1fr;
    border-bottom: 1px solid var(--linea);
    background-color: #050505 !important; /* Fondo negro puro */
    color: #f5f5f3 !important;           /* Texto beige */
}

.services-header {
    grid-column: 2;
    padding: 120px 8% 80px 8%;
    background-color: #050505;
}

.services-list {
    grid-column: 2;
    border-top: 1px solid var(--linea);
    background-color: #050505;
}

.service-row {
    display: grid;
    grid-template-columns: 10% 1fr;
    padding: 60px 8%;
    border-bottom: 1px solid var(--linea);
    transition: background-color 0.4s ease;
    background-color: #050505;
}

/* Efecto sutil al pasar el mouse - Ahora visible en fondo negro */
.service-row:hover {
    background-color: rgba(245, 245, 243, 0.05) !important;
}

.service-row:last-child {
    border-bottom: none;
}

.service-cat {
    font-size: 0.8rem;
    font-weight: 900;
    opacity: 0.4;
    color: #f5f5f3;
}

.service-info h3 {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 15px;
    color: #FFFFFF !important; /* Títulos en blanco puro */
}

.service-info p {
    font-size: 1.1rem;
    max-width: 500px;
    opacity: 0.7;
    line-height: 1.6;
    color: #f5f5f3;
}

/* Mobile Services */
@media (max-width: 768px) {
    .services { grid-template-columns: 1fr !important; }
    .service-row { grid-template-columns: 1fr !important; padding: 40px 8% !important; }
    .service-cat { margin-bottom: 10px; }
    .service-info h3 { font-size: 1.5rem; }
}

/*================0 SECTION OTHERS SERVICES============================ */
.others-services {
    display: grid;
    grid-template-columns: 8% 1fr;
    border-bottom: 1px solid var(--linea);
    padding-bottom: 80px;
}

.others-header {
    grid-column: 2;
    padding: 60px 8% 20px 8%;
}

.others-container {
    grid-column: 2;
    padding: 0 8%;
}

.other-service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid var(--linea);
    transition: all 0.3s ease;
}

.other-service-row:hover {
    padding-left: 10px;
}

.other-name {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-request {
    text-decoration: none;
    color: var(--negro);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid var(--negro);
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.btn-request:hover {
    background-color: var(--negro);
    color: var(--beige);
}

/* Responsivo para Otros Servicios */
@media (max-width: 768px) {
    .others-services {
        grid-template-columns: 1fr;
    }
    .other-name {
        font-size: 0.9rem;
        max-width: 60%;
    }
    .btn-request {
        padding: 8px 12px;
        font-size: 0.65rem;
    }
}

/* SECTION HOW WE WORK */
.how-work {
    display: grid;
    grid-template-columns: 8% 1fr;
    background-color: var(--negro); /* Cambio de impacto: Fondo negro */
    color: var(--beige);
}

.work-header {
    grid-column: 2;
    padding: 120px 8% 60px 8%;
}

.work-header .label {
    color: var(--beige);
    opacity: 0.5;
}

.work-steps {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(245, 245, 243, 0.1);
}

.step {
    padding: 80px 8%;
    border-right: 1px solid rgba(245, 245, 243, 0.1);
}

.step:last-child {
    border-right: none;
}

.step-top {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.step-num {
    font-size: 0.8rem;
    font-weight: 900;
    opacity: 0.4;
    margin-bottom: 10px;
}

.step-tag {
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.7;
    font-weight: 400;
}

/* Mobile Methodology */
@media (max-width: 768px) {
    .how-work { grid-template-columns: 1fr; }
    .work-steps { grid-template-columns: 1fr; }
    .step { border-right: none; border-bottom: 1px solid rgba(245, 245, 243, 0.1); }
}

/*======================== SECTION FILTER - INVERTIDO (OSCURO) ================================== */
.filter {
    padding: 140px 8%;
    background-color: #050505 !important; /* Fondo oscuro */
    color: #f5f5f3 !important;           /* Texto claro */
    border-top: 1px solid rgba(245, 245, 243, 0.1);
}

.filter-container {
    max-width: 1000px;
    margin: 0 auto;
}

.filter-title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.9;
    margin-bottom: 60px;
    color: #FFFFFF !important; /* Blanco puro para el título */
}

.filter-main-text {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 80px;
    font-weight: 400;
    max-width: 800px;
    color: #f5f5f3;
    opacity: 0.9;
}

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    border-top: 1px solid rgba(245, 245, 243, 0.1); /* Línea sutil clara */
    padding-top: 60px;
}

.filter-box h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 30px;
    font-weight: 800;
    color: #f5f5f3;
}

.filter-box ul {
    list-style: none;
}

.filter-box ul li {
    font-size: 1rem;
    margin-bottom: 15px;
    opacity: 0.8;
    position: relative;
    padding-left: 20px;
    color: #f5f5f3;
}

.filter-box ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    opacity: 0.5;
    color: #f5f5f3;
}

/* Ajuste para móvil */
@media (max-width: 768px) {
    .filter-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/*========================= FINAL CTA (RECUPERADO) =========================*/
.final-cta {
    padding: 160px 8%;
    text-align: center;
    border-top: 1px solid var(--linea);
    background-color: var(--negro); /* Mantiene el fondo negro para el cierre de impacto */
    color: var(--beige);
    display: block !important; /* Asegura que no se comporte como el footer */
}

.cta-wrap h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    color: var(--beige);
}

.btn-large {
    display: inline-block;
    margin-top: 40px;
    padding: 20px 40px;
    background-color: var(--beige);
    color: var(--negro);
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    transition: 0.3s;
    border: 1px solid var(--beige);
}

.btn-large:hover {
    background-color: transparent;
    color: var(--beige);
}

/*========================= FOOTER CLARO (LIMPIO) =========================*/
footer {
    padding: 60px 8%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--beige) !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Usamos un selector más específico para que no afecte a otros 'footer-bottom' si existen */
footer .footer-bottom {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 100% !important;
    margin: 0 auto;
}

footer .footer-info span {
    color: var(--negro);
    opacity: 0.6;
    font-size: 0.7rem;
    text-transform: uppercase;
}

footer .footer-socials {
    display: flex;
    gap: 20px;
}

footer .footer-socials a {
    color: var(--negro) !important;
    font-size: 1.1rem;
    opacity: 0.7;
    transition: 0.3s;
}

footer .footer-socials a:hover {
    opacity: 1;
}

footer .footer-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

footer .footer-links a {
    color: var(--negro) !important;
    text-decoration: none;
    font-size: 0.7rem;
    opacity: 0.6;
    text-transform: uppercase;
}

/* Link especial oferta */
footer .footer-links a.special-link {
    opacity: 1;
    font-weight: 900;
    border: 1px solid var(--negro);
    padding: 6px 14px;
    margin-left: 0; /* Evita desajustes */
}

/*========================= MOBILE FIX =========================*/
@media (max-width: 768px) {
    .final-cta {
        padding: 100px 6%;
    }
    
    footer .footer-bottom { 
        flex-direction: column !important; 
        gap: 30px !important; 
        text-align: center; 
    }
    
    footer .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
}
/* ================= SECCIÓN TALK - SOLUCIÓN DEFINITIVA CORTE DERECHO ================= */
/* ================= SECCIÓN TALK - SOLUCIÓN RADICAL CORTE DERECHO ================= */

.hero-talk {
    display: flex !important;
    min-height: 100vh;
    width: 100% !important;
    overflow: hidden !important; /* Blindaje contra desborde lateral */
}

/* Línea lateral del 8% */
.hero-talk::before {
    content: "";
    width: 8%;
    border-right: 1px solid var(--linea);
    flex-shrink: 0;
}

.hero-talk .hero-content {
    flex-grow: 1;
    padding: 100px 8% 100px 5% !important;
    max-width: 92%; /* Garantiza que el contenido no pueda medir más que el resto del espacio */
    box-sizing: border-box !important;
}

.hero-talk .hero-content h1 {
    /* Usamos VW para que el tamaño sea 100% relativo a lo que el ojo ve */
    font-size: clamp(2.5rem, 8.2vw, 7rem) !important; 
    line-height: 0.9 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 40px 0 !important;
    
    /* BLOQUEO DE DESBORDE */
    display: block !important;
    width: 100% !important;
    word-break: normal !important; 
    overflow-wrap: break-word !important; /* Si la palabra no cabe, baja COMPLETA */
    text-align: left !important;
    hyphens: none !important;
}

/* FORMULARIO - PROTEGIDO */
.hero-talk .filter-form {
    margin-top: 60px;
    max-width: 600px;
}

.hero-talk .form-row-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; 
}

.hero-talk .form-group {
    margin-bottom: 40px;
}

.hero-talk .form-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    opacity: 0.6;
}

.hero-talk .form-group input, 
.hero-talk .form-group textarea {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--linea) !important;
    padding: 15px 0 !important;
    font-family: inherit;
    font-size: 1.1rem;
    color: inherit; 
    outline: none;
    border-radius: 0;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .hero-talk {
        flex-direction: column !important;
    }
    .hero-talk::before {
        display: none !important;
    }
    .hero-talk .hero-content {
        max-width: 100% !important;
        padding: 60px 6% !important;
    }
    .hero-talk .hero-content h1 {
        font-size: 3.2rem !important;
        line-height: 1 !important;
        width: 100% !important;
    }
    .hero-talk .form-row-contact {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

/* =================== ESTILO REDES SOCIALES FOOTER ==================*/
/* ESTILO REDES SOCIALES - CORREGIDO */
.footer-socials {
    display: flex;
    gap: 30px;
    align-items: center;
}

.footer-socials a {
    color: var(--negro); /* Negro sólido */
    font-size: 1.5rem;   /* Más grandes y legibles */
    transition: transform 0.3s ease, color 0.3s ease;
    text-decoration: none;
    opacity: 1;          /* Sin transparencia para que se vean fuertes */
}

.footer-socials a:hover {
    transform: translateY(-5px);
    color: #555; /* Un gris oscuro al pasar el mouse para feedback */
}

/* En el modo oscuro de Community, los iconos deben ser beige */
body.modo-oscuro .footer-socials a {
    color: var(--beige);
}

/*============================= SECTION FEES========================= */
.fees-hero {
    display: grid;
    grid-template-columns: 8% 1fr;
    padding-bottom: 60px;
}

.pricing-table {
    border-top: 1px solid var(--linea);
}

.price-row {
    display: grid;
    grid-template-columns: 8% 30% 1fr;
    border-bottom: 1px solid var(--linea);
    padding: 80px 0;
}

.price-main {
    grid-column: 2;
    padding-right: 40px;
}

.service-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 800;
    opacity: 0.5;
    display: block;
    margin-bottom: 15px;
}

.price-main h3 {
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 20px;
}

.price-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--negro);
}

.price-details {
    grid-column: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-right: 8%;
}

.detail-col h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    opacity: 0.4;
}

.detail-col ul {
    list-style: none;
}

.detail-col li {
    font-size: 0.95rem;
    margin-bottom: 10px;
    opacity: 0.8;
    line-height: 1.4;
    position: relative;
    padding-left: 15px;
}

.detail-col li::before {
    content: "—";
    position: absolute;
    left: 0;
    opacity: 0.5;
}

/* IMPORTANT NOTES */
.important-notes {
    padding: 100px 8% 140px 16%; /* Alineado con el contenido */
}

.important-notes h3 {
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}

.notes-grid {
    margin-bottom: 60px;
}

.notes-grid p {
    font-size: 1rem;
    opacity: 0.6;
    margin-bottom: 10px;
}

/* Responsive Fees */
@media (max-width: 992px) {
    .price-row { grid-template-columns: 8% 1fr; }
    .price-main { grid-column: 2; margin-bottom: 40px; }
    .price-details { grid-column: 2; grid-template-columns: 1fr; }
    .important-notes { padding-left: 8%; }
}

/* ================= NEWSROOM COMPLETO - CORREGIDO ================= */

/* 1. LIMPIEZA DE RAYA EN EL HEADER */
header, .header, nav {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. NEWS HERO - MÁS PADDING Y SIN RAYAS */
.news-hero {
    padding-top: 40px !important;    /* Más aire arriba */
    padding-bottom: 20px !important; /* Más aire abajo */
    display: grid;
    grid-template-columns: 8% 1fr;
    background-color: var(--beige);
    border-bottom: 1px solid var(--linea);
}

.news-hero-content {
    grid-column: 2;
    padding: 0 8%;
}

.news-hero-content h1 {
    font-size: clamp(3rem, 10vw, 8.5rem);
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    font-weight: 900;
    margin: 0;
    color: var(--negro);
}

/* 3. NEWS LIST & ITEMS - INTERACCIÓN INVERSA */
.news-list {
    background-color: var(--beige); 
    padding-bottom: 100px;
}

.news-grid {
    border-top: 1px solid var(--linea);
}

.news-item {
    display: grid;
    grid-template-columns: 8% 15% 1fr;
    padding: 100px 0;
    border-bottom: 1px solid var(--linea);
    text-decoration: none;
    background-color: transparent;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    color: var(--negro);
}

/* Hover: De Beige a Negro */
.news-item:hover {
    background-color: #050505 !important;
    color: #f5f5f3 !important;
    padding-left: 20px;
}

.news-date {
    grid-column: 2;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: inherit;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.news-item:hover .news-date {
    opacity: 0.8;
}

.news-text {
    grid-column: 3;
    padding-right: 15%;
}

.news-cat {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 25px;
    border: 1px solid currentColor;
    padding: 5px 12px;
    transition: all 0.3s ease;
}

.news-text h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin-bottom: 25px;
    color: inherit;
}

.news-text h2 a {
    text-decoration: none;
    color: inherit;
}

.news-text p {
    font-size: 1.15rem;
    line-height: 1.5;
    color: inherit;
    opacity: 0.7;
    max-width: 700px;
}

/* Responsivo */
@media (max-width: 992px) {
    .news-hero {
        padding-top: 140px !important;
        padding-bottom: 80px !important;
        grid-template-columns: 1fr;
    }
    .news-hero-content {
        grid-column: 1;
    }
    .news-item {
        grid-template-columns: 8% 1fr;
        padding: 60px 0;
    }
    .news-item:hover {
        padding-left: 10px;
    }
    .news-date {
        grid-column: 2;
        margin-bottom: 20px;
    }
    .news-text {
        grid-column: 2;
        padding-right: 8%;
    }
}

/* ======================= DISEÑO DE ARTÍCULO INDIVIDUAL ================ */
/* RESET TOTAL PARA EL LOGO */
header .logo, 
header .logo a, 
header a .logo {
    color: #000000 !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

/* Esto quita el azul y el subrayado incluso si ya hiciste clic */
header .logo a:visited, 
header .logo a:hover, 
header .logo a:active {
    color: #000000 !important;
    text-decoration: none !important;
}

.article-container {
    padding-top: 140px;
    max-width: 1200px;
    margin: 0 auto;
}

.article-header {
    padding: 0 8%;
    margin-bottom: 60px; /* Espacio antes del cuerpo del texto */
    text-align: left;
    gap: 40px; /* Espacio entre el cajón negro y el título */
}

/* AJUSTE ESPECÍFICO PARA LA CATEGORÍA EN EL ARTÍCULO */
.article-header .news-cat {
    display: inline-block; /* Permite aplicar márgenes correctamente */
    margin-bottom: 20px;   /* Esto empuja el H1 hacia abajo desde la categoría */
    background: var(--beige);
    color: var(--negro);
    padding: 5px 12px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.article-header h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1; /* Más aire entre líneas para títulos largos */
    text-transform: uppercase;
    font-weight: 900;
    margin: 40px 0; /* Despega el título de la categoría y de la fecha */
    letter-spacing: -0.04em;
    margin-top: 10px;
}

.article-meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
    margin-top: 20px;
}

.article-content {
    max-width: 800px; /* Ancho óptimo para legibilidad editorial */
    margin: 0 auto;
    padding: 0 8% 100px 8%;
}

.article-content .lead {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 60px; /* Espacio extra para separar del cabezal */
    margin-bottom: 50px;
    color: var(--negro);
}

.article-content p {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 30px;
    color: rgba(0,0,0,0.8);
}

.article-content blockquote {
    font-size: 2.2rem;
    font-weight: 900;
    font-style: italic;
    border-left: 8px solid var(--negro); /* Línea más gruesa y potente */
    padding-left: 40px;
    margin: 80px 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.article-footer {
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px solid var(--linea);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-link {
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--negro);
    transition: opacity 0.3s ease;
}

.back-link:hover {
    opacity: 0.6;
}

.share-box {
    display: flex;
    gap: 25px; /* Más espacio entre los iconos de compartir */
    align-items: center;
}

.share-box span {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.4;
}

.share-box a {
    color: var(--negro);
    font-size: 1.3rem;
    opacity: 1; /* Los dejamos en negro sólido como pediste en los otros iconos */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.share-box a:hover {
    transform: translateY(-3px);
    opacity: 0.6;
}

/* ============================================================
   AJUSTES EXCLUSIVOS PARA MOBILE (POST-01.HTML Y HEADER)
   ============================================================ */

@media (max-width: 768px) {
    
    /* 1. EL MENÚ DE ARRIBA (Global) */
    /* Forzamos que Home, About, Newsroom y Talk estén siempre en fila */
    header {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important;
        padding: 0 4% !important;
        height: 70px !important;
        align-items: center !important;
    }

    header nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* No permite que Talk se baje */
        gap: 6px !important;
    }

    header nav a {
        font-size: 10px !important;
        white-space: nowrap !important; /* No permite que las palabras se corten */
    }

    /* 2. EL CUERPO DEL POST (Específico de post-01.html) */
    /* Aquí es donde evitamos que la página se mueva hacia los lados */
 /* 2. EL CUERPO DEL POST (Específico de post-01.html) */
    .article-container {
        padding-top: 120px !important; /* Más espacio arriba para que el menú no tape el título */
        width: 100vw !important;
        overflow-x: hidden !important;
        display: block !important; /* Asegura flujo normal */
    }

    .article-header {
        display: flex !important;
        flex-direction: column !important; 
        padding: 0 6% !important;
        height: auto !important; /* ¡ESTO ES CLAVE! Quita cualquier altura fija */
        margin-bottom: 20px !important; /* Espacio antes de la meta data */
    }

    .article-header h1 {
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
        width: 100% !important;
        margin: 15px 0 !important; /* Empuja el texto de abajo hacia afuera */
        position: relative !important; /* Asegura que respete su lugar */
    }

    .article-meta {
        margin-bottom: 30px !important; /* Espacio extra entre la fecha y el párrafo "lead" */
        font-size: 0.9rem;
        color: #666;
    }

    .article-content {
        padding: 0 6% 60px 6% !important;
        width: 100% !important;
        margin-top: 20px !important; /* Separación extra para que no se pegue al h1 */
    }

    /* 3. BLOQUEO DEFINITIVO DE MOVIMIENTO LATERAL */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/*===================logo===========*/
/* RESET GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* FONDO DE LA PÁGINA (Gris oscuro para que resalte el canvas beige) */
.body-logo-preview {
    background-color: #1a1a1a; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Inter', sans-serif;
}

/* EL CANVAS DE 500x500 CON EL COLOR BEIGE DE TU HOME */
.canvas-500 {
    width: 500px;
    height: 500px;
    background-color: #f5f5f0; /* El beige característico del Home de Reminder */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); /* Solo para previsualización */
}

.branding-container {
    text-align: center;
}

/* REMINDER: Negro, Peso 800 y Caracteres Separados */
.reminder-main {
    color: #000000;
    font-size: 60px;
    font-weight: 800;
    text-transform: uppercase;
    /* COHERENCIA: Aquí aplicamos la separación de caracteres del Home */
    letter-spacing: 8px; 
    line-height: 1;
    margin: 0;
    text-indent: 15px; /* Compensa el espacio al final para centrar perfecto */
}

/* EL ICONO ®: Sutil y en negro */
.reg-icon {
    font-size: 16px;
    font-weight: 400;
    vertical-align: super;
    margin-left: 0px; /* Ajuste por el letter-spacing del texto principal */
}

/* ETIQUETA MEDIA & PRESS: Letra pequeña y aún más separada */
.sub-label {
    color: #000000;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 5px; /* Espaciado extra-elegante */
    margin-top: 10px;
    text-indent: 20px;
    opacity: 0.8;
}

/*================ LANDING PACK REMINDER =========== */

.checkout-section {
    background-color: var(--negro);
    padding: 120px 8%;
    text-align: center;
    color: var(--beige);
    border-top: 1px solid var(--linea);
}

.checkout-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* Resaltado del Precio */
.filter-title {
    font-size: clamp(4rem, 10vw, 8rem) !important;
    margin-bottom: 20px;
    color: var(--beige);
    font-weight: 900;
}

.filter-main-text {
    color: var(--beige);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Acciones */
.checkout-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.btn-pay {
    background-color: var(--beige) !important;
    color: var(--negro) !important;
    width: 100%;
    max-width: 400px;
}

.btn-secondary-wa {
    color: var(--beige);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    transition: 0.3s;
}

.btn-secondary-wa:hover {
    opacity: 1;
}

/* Badges de Confianza */
.trust-badges {
    margin-top: 60px;
}

.badge-icons {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
    color: var(--beige);
    opacity: 0.5;
}

.trust-badges span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.4;
}

/* Mobile Fixes */
@media (max-width: 768px) {
    .checkout-section {
        padding: 80px 6%;
    }
}

/* ============================================================
   PAIN SECTION - EL COSTO DE LA INVISIBILIDAD
   ============================================================ */
.pain-grid-only {
    background-color: var(--negro);
    color: var(--beige);
    display: block;
}

.pain-grid-only .work-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(245, 245, 243, 0.1);
}

/* Re-usamos la clase .step que ya tienes pero ajustamos el texto */
.pain-grid-only .step {
    border-right: 1px solid rgba(245, 245, 243, 0.1);
    padding: 60px 40px;
}

.pain-text {
    font-size: 1.15rem;
    line-height: 1.6;
    opacity: 0.8;
}

.pain-text strong {
    display: block;
    font-size: 1.3rem; 
    color: #fff;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ============================================================
   ROADMAP - EL PROCESO DE 15 DÍAS
   ============================================================ */
.roadmap {
    background-color: var(--beige);
    border-top: 1px solid var(--negro);
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--negro);
    border-bottom: 1px solid var(--negro);
}

.road-step {
    padding: 60px 40px;
    border-right: 1px solid rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.road-step.highlighting {
    background-color: var(--negro);
    color: var(--beige);
    border-right: none;
}

.road-time {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 25px;
    opacity: 0.6;
    font-weight: 700;
}

.road-step h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 800;
}

.road-step p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
}

/* ============================================================
   COMPARISON - ANCLAJE DE VALOR
   ============================================================ */
.comparison { 
    padding: 100px 8%; 
    background: #fdfdfd; 
}

.comparison-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 0; 
    border: 1px solid var(--negro);
}

.comp-box { 
    padding: 60px; 
}

.comp-box.premium { 
    background: var(--negro); 
    color: var(--beige); 
    border: none; 
}

.comp-box h3 { 
    margin: 25px 0; 
    font-size: 1.6rem; 
    text-transform: uppercase;
    font-weight: 800;
}

.comp-box ul { 
    list-style: none; 
    padding: 0; 
}

.comp-box ul li { 
    margin-bottom: 15px; 
    font-size: 1rem; 
    opacity: 0.8; 
    position: relative; 
    padding-left: 25px; 
}

.comp-box ul li::before { 
    content: "—"; 
    position: absolute; 
    left: 0; 
}

/* ============================================================
   FAQ - RESOLUCIÓN DE DUDAS
   ============================================================ */
.faq { 
    padding: 100px 16%; 
    background-color: var(--beige);
}

.faq-list { 
    border-top: 1px solid var(--negro); 
}

.faq-item { 
    padding: 40px 0; 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
}

.faq-item h4 { 
    font-size: 1.2rem; 
    margin-bottom: 15px; 
    text-transform: uppercase; 
    font-weight: 700;
}

.faq-item p { 
    font-size: 1.05rem; 
    opacity: 0.7; 
    line-height: 1.6; 
}

/* ============================================================
   RESPONSIVE (MOBILE)
   ============================================================ */
@media (max-width: 900px) {
    .pain-grid-only .work-steps,
    .roadmap-grid, 
    .comparison-container { 
        grid-template-columns: 1fr; 
    }

    .road-step, .comp-box, .pain-grid-only .step {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding: 50px 8%;
    }

    .faq {
        padding: 80px 8%;
    }
}

/* ============================================================
   PAYMENT METHODS
   ============================================================ */
.payment-methods {
    padding: 80px 8%;
    background-color: #fff;
    text-align: center;
    border-top: 1px solid #eee;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 40px 0;
}

.method i {
    font-size: 2rem;
    color: var(--negro);
    margin-bottom: 20px;
    display: block;
}

.method p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
}

.payment-note {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .payment-grid { grid-template-columns: 1fr; gap: 40px; }
}


/*===================== pay===============================*/

/* Corrección Total de la Sección de Pago - FONDO NEGRO */
.checkout-section {
    padding: 120px 8%;
    background-color: var(--negro) !important; /* Forzamos el negro */
    border-top: 1px solid var(--linea);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.checkout-wrapper {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;   
}

.checkout-wrapper .filter-title {
    font-size: clamp(3rem, 10vw, 5rem);
    margin: 20px 0;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--beige) !important; /* Texto en beige */
}

.checkout-wrapper .filter-main-text {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 40px;
    color: var(--beige); /* Texto en beige */
}

.checkout-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.btn-pay {
    /* Invertimos: Botón Beige con letras Negras para que resalte sobre el fondo negro */
    background-color: var(--beige) !important; 
    color: var(--negro) !important; 
    padding: 22px 40px !important;
    font-size: 1rem !important;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    width: auto;
    min-width: 300px;
    transition: transform 0.2s ease;
}

.btn-pay:hover {
    transform: scale(1.02);
    background-color: #ffffff !important; /* Un poco más de brillo al pasar el mouse */
}

.btn-secondary-wa {
    font-size: 0.85rem;
    color: var(--beige); /* Antes estaba en negro, ahora beige para que se vea */
    text-decoration: underline;
    opacity: 0.6;
    margin-top: 5px;
}

.trust-badges {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.badge-icons {
    display: flex;
    gap: 20px;
    font-size: 1.8rem;
    color: var(--beige); /* Iconos en beige */
    opacity: 0.3;
}

.trust-badges span {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    opacity: 0.5;
    color: var(--beige); /* Texto en beige */
}

@media (max-width: 768px) {
    .checkout-section { padding: 80px 5%; }
    .btn-pay { width: 100%; min-width: unset; }
}

/* ============================================================
   VALIDATOR VIDEO SECTION
   ============================================================ */
.validator-video {
    width: 100%;
    height: 80vh; /* Altura de gran impacto */
    position: relative;
    overflow: hidden;
    background-color: var(--negro);
}

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que el video cubra todo el espacio sin deformarse */
}

/* Capa oscura para legibilidad del texto */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
    display: flex;
    align-items: flex-end; /* Texto abajo */
    padding: 80px 8%;
}

.validator-info {
    color: #fff;
    max-width: 800px;
}

.validator-name {
    font-size: clamp(3rem, 8vw, 6rem); /* Letra gigante */
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    margin: 20px 0 10px 0;
    letter-spacing: -0.04em;
}

.validator-meta {
    font-size: 1.2rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.play-indicator i { font-size: 3rem; margin-bottom: 10px; display: block; }
.play-indicator span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; }

.play-indicator:hover { opacity: 1; }

@media (max-width: 768px) {
    .validator-video { height: 60vh; }
    .video-overlay { padding: 40px 8%; }
}

/* RESET PARA VSL PAGE */
.vsl-page {
    background-color: #050505 !important;
    color: #f5f5f3 !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* HEADER */
.vsl-header {
    display: flex;
    justify-content: space-between;
    padding: 30px 8%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* HERO ESTRUCTURA */
.vsl-hero {
    display: flex !important;
    width: 100%;
    min-height: 80vh;
}

.hero-line {
    width: 80px;
    border-right: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.hero-content {
    padding: 80px 8% 80px 5% !important;
}

/* TITULO REMINDER */
.vsl-main-title {
    font-size: clamp(3rem, 10vw, 8rem) !important;
    line-height: 0.85 !important;
    font-weight: 900;
    margin: 20px 0 40px 0 !important;
    text-transform: uppercase;
    color: #ffffff;
}

.subline {
    font-size: 1.2rem;
    max-width: 650px;
    opacity: 0.7;
    margin-bottom: 40px;
}

/* VIDEO BOX */
.vsl-video-container {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WRAPPER PARA EL RESTO DEL CONTENIDO */
.vsl-content-wrapper {
    padding-left: 80px; /* Alineado con la linea del hero */
    max-width: 1400px;
}

.vsl-section, .vsl-details {
    padding: 100px 8%;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.vsl-grid-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* TICKER */
.vsl-platforms-ticker {
    background: #000;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.ticker-track {
    display: flex;
    gap: 50px;
    animation: scroll 20s linear infinite;
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* MOBILE */
@media (max-width: 768px) {
    .hero-line { display: none; }
    .vsl-content-wrapper { padding-left: 0; }
    .vsl-grid-info { grid-template-columns: 1fr; }
    .vsl-main-title { font-size: 3.5rem !important; }
}