/* ==========================================================
   LANDING.CSS - El Manifiesto y Acceso (Proporción Áurea)
========================================================== */

/* ==========================================================
   1. VARIABLES GLOBALES Y PROPORCIÓN ÁUREA
========================================================== */
:root { --bg-hielo: #f8f9fa; --blanco-puro: #ffffff; --cian-clinico: #0891b2; --cian-oscuro: #0e7490; --texto-principal: #1e293b; --texto-secundario: #475569; --phi: 1.618; --espacio-base: 2rem; --espacio-md: calc(var(--espacio-base) * var(--phi)); --espacio-lg: calc(var(--espacio-md) * var(--phi)); --espacio-xl: calc(var(--espacio-lg) * var(--phi)); }

/* ==========================================================
   2. TIPOGRAFÍA Y ETIQUETAS BASE
========================================================== */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-hielo); color: var(--texto-principal); margin: 0; padding: 0; line-height: var(--phi); font-size: 1.125rem; font-weight: 300; height: auto !important; overflow: auto !important; }
p { margin-bottom: var(--espacio-base); }
strong { font-weight: 600; }
h1 { font-size: 2rem; font-weight: 800; color: var(--texto-principal); line-height: 1.2; margin-top: 0; margin-bottom: 1.5rem; letter-spacing: -1px; }
blockquote { border-left: 3px solid var(--cian-clinico); margin: var(--espacio-base) 0; padding-left: 1.5rem; font-style: italic; color: var(--texto-secundario); font-size: 1.25rem; }
.texto-principal { display: flex; flex-direction: column; align-self: stretch; }
.texto-principal blockquote { margin-top: auto; margin-bottom: auto; }

/* ==========================================================
   3. ESTRUCTURAS ÁUREAS Y CONTENEDORES
========================================================== */
main { max-width: 1100px; margin: 0 auto; padding: var(--espacio-xl) var(--espacio-base); display: flex; flex-direction: column; gap: var(--espacio-lg); }
.layout-aureo { display: grid; grid-template-columns: 61.8fr 38.2fr; gap: var(--espacio-md); align-items: flex-start; }
.layout-aureo.inverso { grid-template-columns: 38.2fr 61.8fr; }

/* ==========================================================
   4. IMÁGENES Y PAUSAS VISUALES
========================================================== */
main img { width: 100%; height: auto; object-fit: cover; border-radius: 4px; filter: grayscale(100%) sepia(15%) hue-rotate(150deg) contrast(110%) brightness(95%); transition: filter 0.4s ease; }
main img:hover { filter: grayscale(80%) sepia(10%) hue-rotate(150deg) contrast(115%) brightness(100%); }
.pausa-visual { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1); }
.pausa-visual img { width: 100%; height: auto; display: block; object-position: center; }

/* ==========================================================
   5. CALL TO ACTION (CTA) Y BOTONES
========================================================== */
.cta-container { text-align: center; margin-top: var(--espacio-lg); min-height: 550px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: 0 20px 40px -15px rgba(0, 180, 216, 0.3); display: flex; justify-content: center; align-items: center; }
.cta-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/static/img/fondo_nodos.jpg'); background-size: cover; background-position: center 10%; opacity: 1; z-index: 0; }
.cta-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 55%); z-index: 0; pointer-events: none; }
.btn-clinico { position: relative; z-index: 1; display: inline-block; background-color: var(--cian-clinico); color: var(--blanco-puro); text-decoration: none; padding: 1.5rem 4.5rem; font-size: 1.5rem; font-weight: 700; border-radius: 8px; letter-spacing: 0.5px; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 8px 15px -3px rgba(0,180,216,0.3); }
.btn-clinico:hover { background-color: var(--cian-oscuro); transform: translateY(-3px); }

/* ==========================================================
   6. ZONA DE ACCESO (LOGIN/REGISTRO)
========================================================== */
.contenedor-acceso { display: flex; justify-content: center; }
.seccion-auth { width: 100%; max-width: 340px; background: var(--blanco-puro); padding: 1.5rem; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.auth-tabs { display: flex; margin-bottom: 1.25rem; border-bottom: 2px solid #e2e8f0; }
.auth-tab { flex: 1; text-align: center; padding: 0.75rem; cursor: pointer; font-weight: bold; color: var(--texto-secundario); transition: 0.3s; font-size: 0.9rem; }
.auth-tab.activa { color: var(--cian-clinico); border-bottom: 2px solid var(--cian-clinico); margin-bottom: -2px; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.85rem; color: var(--texto-principal); }
.form-group input { width: 100%; padding: 0.6rem; border: 1px solid #e2e8f0; border-radius: 6px; box-sizing: border-box; font-size: 0.95rem; font-family: 'Inter', sans-serif; transition: border-color 0.2s; }
.form-group input:focus { outline: none; border-color: var(--cian-clinico); box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15); }
.btn-principal { width: 100%; padding: 0.7rem; background: var(--cian-clinico); color: white; border: none; border-radius: 6px; font-size: 0.95rem; font-weight: bold; cursor: pointer; font-family: 'Inter', sans-serif; transition: background 0.2s; }
.btn-principal:hover { filter: brightness(1.1); }
#mensaje-auth { margin-top: 0.75rem; text-align: center; font-size: 0.85rem; font-weight: bold; min-height: 20px; }

/* ==========================================================
   7. PIE DE PÁGINA (FOOTER)
========================================================== */
footer { text-align: center; padding: var(--espacio-md); font-size: 0.85rem; color: #94a3b8; border-top: 1px solid #e2e8f0; }

/* ==========================================================
   8. ANIMACIONES Y ADAPTACIÓN MÓVIL (RESPONSIVE)
========================================================== */
@keyframes rebote { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } }
.flecha-animada { animation: rebote 2s infinite; display: inline-block; }

@media (max-width: 1100px) { 
    /* 1. Reestructuración a flexbox de 1 columna para TODO */
    .layout-aureo, .layout-aureo.inverso { 
        display: flex !important;
        flex-direction: column !important; /* Anulamos el reverse, usaremos 'order' puro */
        gap: 2rem !important; 
    } 

    /* 🔥 EL TRUCO DE LA CITA: Rompemos la caja del texto para reordenar piezas individualmente */
    .layout-aureo:not(#zona-acceso) .texto-principal { 
        display: contents !important; 
    }
    /* 1º Va el texto principal o los títulos */
    .layout-aureo:not(#zona-acceso) .texto-principal h1, 
    .layout-aureo:not(#zona-acceso) .texto-principal p { 
        order: 1 !important; 
    }
    /* 2º Va la imagen, quedando siempre en medio */
    .layout-aureo:not(#zona-acceso) .imagen-secundaria { 
        order: 2 !important; 
    }
    /* 3º Va la cita, quedando debajo de la foto como separación antes del siguiente bloque */
    .layout-aureo:not(#zona-acceso) .texto-principal blockquote { 
        order: 3 !important; 
        margin-top: 0.5rem !important;
    }

    /* Restauramos la foto del aula */
    .pausa-visual {
        display: block !important;
        margin: 1rem 0 !important; 
    }
    .pausa-visual img { 
        height: 30vh !important; 
        border-radius: 8px !important;
    }

    /* 2. Logo superior (🔥 Ajuste milimétrico definitivo) */
    a[href="/"] {
        position: relative !important; 
        top: 0 !important;
        left: 0 !important;
        margin-top: 6rem !important;     /* Un dedito más hacia abajo */
        margin-bottom: -2rem !important; /* Aumentamos la succión para pegar más el título */
        width: 100% !important;
        display: flex !important; 
        justify-content: center !important; 
        align-items: center !important;
        transform: none !important;
    }
    
    a[href="/"] img { height: 70px !important; margin: 0 !important; }
    a[href="/"] div { align-items: flex-start !important; }
    a[href="/"] div strong { font-size: 20px !important; }
    a[href="/"] div span { font-size: 11px !important; }

    /* 3. Ajuste del contenedor principal */
    main {
        padding-top: 0 !important; /* El margen ya lo gestiona el logo arriba */
        padding-bottom: 1.5rem !important;
        gap: 3rem !important;
    }

    /* 4. Tipografía y alineación adaptada a móviles */
    h1 { 
        font-size: 1.8rem !important; 
        text-align: center !important;
    } 

    .texto-principal p {
        font-size: 1.05rem !important;
        text-align: center !important;
    }

    blockquote {
        font-size: 1.1rem !important;
        text-align: center !important; /* Centrado en móvil queda mejor como pie de foto */
    }

    /* 5. Formulario de acceso */
    .contenedor-acceso {
        max-width: 100% !important;
    }
    
    .seccion-auth {
        padding: 1.5rem 1.2rem !important;
    }

    /* 6. Bordes redondeados en fotos */
    .imagen-secundaria img {
        border-radius: 8px !important;
    }

    /* 7. Botón CTA final (🔥 Alineación con Flexbox a prueba de fallos) */
    .btn-clinico {
        display: flex !important;
        justify-content: center !important; /* Fuerza el centrado absoluto del texto */
        align-items: center !important;
        width: 100% !important;
        padding: 1.2rem 0 !important; /* Quitamos el padding horizontal que lo empujaba mal */
        font-size: 1.1rem !important; 
        white-space: nowrap !important; /* Evita que el texto se rompa en dos líneas */
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   9. ADAPTACIÓN PARA PORTÁTILES (Laptop Safety-Net)
========================================================== */
@media (max-width: 1400px), (max-height: 850px) {
   /* 1. Reducción de la respiración global (Márgenes y Gaps) */
    main { 
        padding-top: 9rem !important; /* Margen seguro para que el logo respire */
        padding-bottom: 2rem !important;
        gap: 1.5rem !important; /* Acercamos un poco el siguiente bloque */
    }

    /* 🔥 EL TRUCO REAL: Empujamos el texto hacia el medio de su propia caja invisible */
    #zona-acceso .texto-principal {
        justify-content: center !important; 
    }
    
    .layout-aureo {
        gap: 2rem !important;
    }
    
    /* 2. El Logo flotante superior izquierdo (Dieta estricta) */
    a[href="/"] { 
        top: 20px !important; 
        left: 20px !important; 
        gap: 10px !important;
    }
    a[href="/"] img { 
        height: 90px !important; /* De 140px a 90px */
    }
    a[href="/"] div strong { 
        font-size: 26px !important; /* De 36px a 26px */
    }
    a[href="/"] div span { 
        font-size: 14px !important; 
    }
    
    /* 3. Ajuste de Tipografía (Sobreescribe los estilos en línea) */
    h1 { 
        font-size: 1.8rem !important; 
        margin-bottom: 0.8rem !important;
    }
    
    .texto-principal p { 
        font-size: 1rem !important; 
        margin-bottom: 1.2rem !important;
        line-height: 1.5 !important;
    }
    
    blockquote { 
        font-size: 1.15rem !important; 
        padding-left: 1rem !important; 
        line-height: 1.4 !important;
    }
    
    /* Foco en el texto del autor dentro del blockquote */
    blockquote strong {
        font-size: 1rem !important;
    }
    blockquote span {
        font-size: 0.85rem !important;
    }
    
    /* 4. Imágenes secundarias (Pausas visuales más cortas) */
    .pausa-visual img {
        height: 35vh !important;
    }
    
    /* 5. Zona del Call To Action (Botón final) */
    .cta-container {
        min-height: 400px !important;
        margin-top: 1rem !important;
    }
    .btn-clinico {
        padding: 1.2rem 3rem !important;
        font-size: 1.2rem !important;
    }
    
    /* 6. Formulario de Acceso / Registro */
    .contenedor-acceso {
        max-width: 320px !important; /* Estrechamos un poco la caja de login */
    }
    .seccion-auth {
        padding: 1.2rem !important;
    }
}
/* ==========================================================
   10. NUEVA LANDING: PORTADA, PILARES Y SECCIONES
   (añadido; las secciones 1-9 siguen igual)
========================================================== */

/* Selector de idioma (arriba a la derecha) */
.selector-idioma-landing {
    position: absolute; top: 35px; right: 45px; z-index: 9999;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid #cbd5e1; background: var(--blanco-puro); color: var(--texto-principal);
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.5px;
    cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.selector-idioma-landing:hover { border-color: var(--cian-clinico); color: var(--cian-clinico); }

/* Etiqueta "Beta abierta" y datos clave de la portada */
.etiqueta-beta {
    align-self: flex-start; margin-bottom: 1rem; padding: 4px 12px; border-radius: 999px;
    background: rgba(8, 145, 178, 0.1); color: var(--cian-clinico);
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.datos-clave { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.datos-clave li {
    padding: 6px 14px; border-radius: 8px; background: var(--blanco-puro); border: 1px solid #e2e8f0;
    font-size: 0.9rem; font-weight: 600; color: var(--texto-principal);
}
.datos-clave li::before { content: '✓ '; color: var(--cian-clinico); font-weight: 800; }

/* Capturas del producto: SIEMPRE en color (la regla general de "main img" las pasaba a gris) */
.captura { border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.25); border: 1px solid #e2e8f0; background: var(--blanco-puro); }
.captura img, main .captura img { display: block; width: 100%; height: auto; border-radius: 0; filter: none !important; }
.captura-portada { margin-top: var(--espacio-base); }

/* Títulos de sección */
main h2 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; margin: 0 0 1rem 0; color: var(--texto-principal); }
main h3 { font-size: 1.15rem; font-weight: 700; margin: 0.8rem 0 0.4rem 0; color: var(--texto-principal); }

/* 2. El problema */
.seccion-problema { text-align: center; max-width: 760px; margin: 0 auto; }
.problema-frase { font-size: 1.8rem; font-weight: 800; line-height: 1.25; margin: 0 0 0.8rem 0; color: var(--texto-principal); }
.problema-remate { font-size: 1.25rem; color: var(--texto-secundario); margin: 0; }

/* 3. Pilares: texto + captura, alternando lados */
.pilar { display: grid; grid-template-columns: 38.2fr 61.8fr; gap: var(--espacio-md); align-items: center; }
.pilar-inverso { grid-template-columns: 61.8fr 38.2fr; }
.pilar-inverso .pilar-texto { order: 2; }
.pilar-texto p { color: var(--texto-secundario); margin: 0; }

/* 4. Cómo funciona */
.seccion-como { text-align: center; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; }
.paso { background: var(--blanco-puro); border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.8rem 1.4rem; }
.paso p { font-size: 1rem; color: var(--texto-secundario); margin: 0; }
.paso-numero {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--cian-clinico); color: var(--blanco-puro); font-weight: 800; font-size: 1.2rem;
}

/* 5. Y además */
.seccion-ademas { text-align: center; }
.tarjetas-extra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1rem; text-align: left; }
.tarjeta-extra { background: var(--blanco-puro); border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.8rem 0.8rem 1.2rem 0.8rem; display: flex; flex-direction: column; }
.tarjeta-extra .captura { box-shadow: none; aspect-ratio: 16 / 9; }
.tarjeta-extra .captura img { height: 100%; object-fit: cover; object-position: top; }
/* Carrera de tácticas (1ª tarjeta): se alinea a la derecha para dejar fuera el menú lateral */
.tarjeta-extra:nth-child(1) .captura img { object-position: 100% 50%; transform: scale(1.02); transform-origin: right center; }
/* Pausa inteligente (2ª tarjeta): la imagen es vertical, la ajustamos entera (contain) y oscurecemos los laterales */
.tarjeta-extra:nth-child(2) .captura img { 
    object-fit: contain; 
    object-position: center; 
    transform: none; 
    background-color: #171c26; /* Funde los huecos laterales con el color oscuro de la imagen */
}
/* Móvil (4ª tarjeta): el foco baja para que se vea el teléfono completo */
.tarjeta-movil .captura img { object-position: center 85%; }
.tarjeta-extra p { font-size: 0.95rem; color: var(--texto-secundario); margin: 0; line-height: 1.5; }
/* Efecto lupa: solo PC y portátiles con ratón (en móvil, tablet y pantallas táctiles no se aplica) */
@media (hover: hover) and (min-width: 1101px) {
    .tarjeta-extra { position: relative; transform-origin: center 25%; transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .tarjeta-extra:first-child { transform-origin: left 25%; }   /* la primera crece hacia la derecha */
    .tarjeta-extra:last-child { transform-origin: right 25%; }   /* la última crece hacia la izquierda */
    .tarjeta-extra:hover { transform: scale(1.5); z-index: 20; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35); }
}

/* 6. Cierre */
.seccion-cierre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-bottom: var(--espacio-md); }
.seccion-cierre blockquote { border-left: none; padding: 0; margin: 0; font-size: 1.6rem; }
.seccion-cierre blockquote strong { font-style: normal; font-size: 1rem; color: var(--texto-secundario); }
.enlace-filosofia { margin: 0; color: var(--texto-secundario); font-size: 1rem; }
.enlace-filosofia a { color: var(--cian-clinico); font-weight: 700; text-decoration: none; margin-left: 4px; }

/* Móvil y tablet */
@media (max-width: 1100px) {
    .selector-idioma-landing { top: 20px; right: 20px; }
    .etiqueta-beta { align-self: center; }
    .datos-clave { justify-content: center; }
    .pilar, .pilar-inverso { display: flex; flex-direction: column; gap: 1.2rem; }
    .pilar-inverso .pilar-texto { order: 0; }
    .pilar-texto { text-align: center; }
    .pasos { grid-template-columns: 1fr; }
    .tarjetas-extra { grid-template-columns: 1fr 1fr; }
    .problema-frase { font-size: 1.4rem; }
    main h2 { font-size: 1.5rem; text-align: center; }
}
@media (max-width: 600px) {
    .tarjetas-extra { grid-template-columns: 1fr; }
}