/* ═══ P-026 · La hoja de la web publica de permea.ai ═══════════════════════════════════════════
 *
 * ⛔ SIN PASO DE CONSTRUCCION (FR-018, N-8): esto se escribe y se sirve. Ningun `npm`, ningun
 *    `@vite`, ningun empaquetador. `backend/package.json` es residuo de P-025 (N-6) y sigue sin
 *    ejecutarse.
 * ⛔ SIN UN SOLO RECURSO REMOTO: ningun `@import`, ninguna `url(http...)`. La landing AFIRMA «Sin
 *    cookies, sin analitica y sin fuentes de terceros», y esta hoja es la mitad que lo hace verdad
 *    —la otra es que el apex no lleva sesion (FR-008)—.
 * ⚠️ Y por eso SC-005 la mira A ELLA, no solo al HTML (E-7 (2)): un `@import` de Google Fonts
 *    aqui dentro habria pasado en verde con el sujeto heredado de P-008, donde el CSS iba
 *    incrustado.
 *
 * Tokens: los de `design/README.md` §Logo y `frontend/src/theme/tokens.ts`. El teal `#0E8F9E` es
 * el mismo en los dos sitios, y ese es el color de Permea.
 */

/* ─── Geist, AUTO-ALOJADA (D-8, R-1) ─────────────────────────────────────────────────────────
 *
 * Los dos ficheros son VARIABLES: un solo `.woff2` cubre todo el rango de grosor, asi que los
 * «seis cortes» del plan (Geist 400/500/600/700 y Mono 400/500) salen de DOS descargas, no de
 * seis. 141 020 bytes en total, muy por debajo del presupuesto de ~150 KB que R-1 fijaba.
 * Licencia SIL OFL 1.1 (`/fonts/LICENSE.txt`), y por eso se puede servir desde aqui.
 * `swap`: la pagina se lee con la reserva mientras la tipografia llega. ⛔ Y si no llegara, la
 * MARCA sigue bien: el wordmark va en SVG incrustado (E-1), no compuesto con la fuente.
 */
@font-face {
    font-family: 'Geist';
    src: url('/fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --teal: #0E8F9E;
    --teal-hover: #007AB7;
    --teal-hondo: #0B7A87;
    --teal-claro: #2FB8C6;
    --navy: #14243D;
    --texto: #1F1F1F;
    --texto-medio: #3A3F47;
    --texto-tenue: #5B626B;
    --lienzo: #EDEEF0;
    --borde: #E3E5E8;
    /* P-026 B5-bis · el rojo de los errores del formulario. No existia ningun token de error en la
     * casa (`tokens.ts` no lo tiene: el SPA usa los de Ant Design), asi que nace aqui. */
    --error: #C0392B;
    --blanco: #FFFFFF;
    --ancho: 1280px;
    --margen: 80px;
}

/* ─── Base ──────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--texto);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-hover); }
h1, h2, h3 { margin: 0; color: var(--navy); letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.tenue { color: #9AA3AE; }

.eyebrow, .eyebrow-claro, .eyebrow-navy {
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.eyebrow { color: var(--teal-hondo); }
.eyebrow-claro { color: var(--teal-claro); font-size: 12px; }
.eyebrow-navy { color: var(--navy); font-size: 12px; }

.boton {
    display: inline-block; padding: 14px 24px; background: var(--teal); color: var(--blanco);
    border: 0; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.boton:hover { background: var(--teal-hondo); color: var(--blanco); }
.boton-borde {
    padding: 10px 18px; border: 1px solid var(--navy); border-radius: 8px;
    color: var(--navy); font-weight: 600;
}
.enlace-suave { font-size: 15px; font-weight: 500; color: var(--navy); }

/* ─── Cabecera ──────────────────────────────────────────────────────────────────────────────── */
/* P-026 B3-bis (D-h) · LA CABECERA SE QUEDA ARRIBA AL DESPLAZARSE.
 *
 * ⛔ SOLO CSS, y no es una preferencia: FR-018 (a) admite EXACTAMENTE UN `<script>` en la landing
 *    —el de Turnstile— y la vara de SC-005 lo cuenta. Un JS de scroll rompería el criterio.
 *
 * ⚠️ LA BARRA PASA A SANGRE COMPLETA, y el contenido se sigue alineando a la rejilla de 1280.
 *    Con `max-width` sobre la propia barra, al desplazarse por `.frontera`, `.promesa` o
 *    `.contacto` —que SI van a sangre completa— sus fondos asomarían POR LOS LADOS de la
 *    cabecera. El `max()` deja el margen normal por debajo de 1280 y lo aumenta por encima,
 *    así que el contenido cae donde caía. ⭐ Sin tocar una sola línea de Blade.
 *
 * Sin sombra y sin transición: la maqueta no las dibuja, y una barra que cambia al desplazarse
 * es una decisión de diseño que nadie ha tomado.
 */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 72px;
    padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
    display: flex; align-items: center;
    justify-content: space-between;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
}

/* Las anclas del menu se paran POR DEBAJO de la barra: 72 px de cabecera + 8 de aire.
 * ⛔ Sin esto, `#frontera`, `#como` y `#contacto` quedan TAPADOS por la propia cabecera fija —el
 *    navegador desplaza hasta el borde del elemento, que ahora vive debajo de la barra—. */
#frontera, #como, #contacto { scroll-margin-top: 80px; }
.marca-enlace { display: inline-flex; align-items: center; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { color: var(--navy); font-size: 15px; font-weight: 500; }
.nav .boton-borde { font-size: 15px; }
.idiomas { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.idioma-activo {
    padding: 4px 8px; border-radius: 6px; background: var(--navy);
    color: var(--blanco); font-weight: 600;
}
.idiomas a { padding: 4px 8px; font-weight: 500; }

/* ─── Secciones ─────────────────────────────────────────────────────────────────────────────── */
main > section { max-width: var(--ancho); margin: 0 auto; padding: 88px var(--margen); }
main > section.frontera, main > section.contacto { background: var(--lienzo); max-width: none; }
main > section.frontera > *, main > section.contacto > * { max-width: var(--ancho); margin-inline: auto; }
main > section.promesa { background: var(--navy); max-width: none; }

.seccion-cabeza { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-bottom: 40px; }
.seccion-cabeza h2 { font-size: 36px; line-height: 1.15; font-weight: 700; }
.seccion-cabeza p { font-size: 17px; line-height: 1.6; color: var(--texto-medio); }

.heroe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.heroe-texto { display: flex; flex-direction: column; gap: 24px; }
.heroe h1 { font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }
.entradilla { font-size: 19px; line-height: 1.55; color: var(--texto-medio); max-width: 520px; }
.acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.heroe-evento { display: flex; flex-direction: column; gap: 12px; }
.tarjeta-evento {
    background: var(--navy); border-radius: 14px; padding: 24px 28px; color: var(--blanco);
    display: flex; flex-direction: column; gap: 14px;
}
.tarjeta-evento-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.volcado { margin: 0; font-size: 13.5px; line-height: 1.7; color: #E6EAEE; overflow-x: auto; }
.tarjeta-nunca {
    background: var(--lienzo); border-radius: 14px; padding: 18px 28px;
    display: flex; flex-direction: column; gap: 8px;
}
.tachados { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--texto-tenue); }
.tachados span { text-decoration: line-through; }

.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tres-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.tarjeta {
    background: var(--blanco); border-radius: 14px; padding: 28px 32px;
    display: flex; flex-direction: column; gap: 16px;
}
.tarjeta-cruza { border-top: 4px solid var(--teal); }
.tarjeta-nocruza { border-top: 4px solid var(--navy); }
.tarjeta h3 { font-size: 18px; font-weight: 700; }
.tarjeta li { font-size: 15px; line-height: 1.5; color: var(--texto-medio); padding-block: 5px; }

.paso { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--borde); border-radius: 14px; }
.paso-num { font-size: 13px; font-weight: 500; color: var(--teal); }
.paso h3 { font-size: 20px; font-weight: 700; }
.paso p, .dato p { font-size: 15px; line-height: 1.55; color: var(--texto-medio); }
.dato { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-top: 2px solid var(--teal); }
.dato h3 { font-size: 17px; font-weight: 700; }

.promesa {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center;
    padding-block: 64px;
}
.promesa h2 { font-size: 40px; line-height: 1.1; font-weight: 700; color: var(--blanco); }
.promesa-realce { color: var(--teal-claro); }
.promesa p { font-size: 17px; line-height: 1.6; color: #D7DCE2; }

.contacto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.contacto-texto { display: flex; flex-direction: column; gap: 16px; }
.contacto-texto h2 { font-size: 36px; line-height: 1.15; font-weight: 700; }
.contacto-texto p { font-size: 17px; line-height: 1.6; color: var(--texto-medio); max-width: 480px; }
.contacto-texto .nota { font-size: 14px; line-height: 1.55; color: var(--texto-tenue); }

/* ─── Formulario ────────────────────────────────────────────────────────────────────────────── */
.formulario {
    background: var(--blanco); border-radius: 14px; padding: 32px;
    display: flex; flex-direction: column; gap: 18px;
}
.campos-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 13px; font-weight: 600; color: var(--navy); }
input, textarea {
    font: inherit; font-size: 15px; color: var(--texto); background: var(--blanco);
    border: 1px solid #C9CDD2; border-radius: 8px; padding: 12px 14px; width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.cf-turnstile { display: block; min-height: 66px; }

/* ─── B5-bis · El error, JUNTO A SU CAMPO ────────────────────────────────────────────────────
 *
 * Basilio lo pidio al probar en dev: una lista sobre el formulario obliga a leer el mensaje arriba
 * y buscar el campo abajo. ⛔ Sin una linea de JavaScript (FR-018 a admite UN solo `<script>`, el
 * de Turnstile): la validacion nativa del navegador evita el viaje, y el 422 —que sigue siendo del
 * servidor— pinta el mensaje donde esta el control.
 */
.errores {
    margin: 0; padding: 12px 16px; border-left: 4px solid var(--error); border-radius: 0 8px 8px 0;
    background: #FDEDEC; color: var(--error); font-size: 15px; font-weight: 600;
}

.campo-error { font-size: 13px; line-height: 1.45; color: var(--error); }

/* El borde tambien: quien no distinga el rojo tiene la etiqueta `aria-describedby` y el mensaje
 * debajo; quien lo distinga, ademas, encuentra el campo de un vistazo. */
[aria-invalid="true"] { border-color: var(--error); }
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { outline-color: var(--error); }

/* ─── Pie ───────────────────────────────────────────────────────────────────────────────────── */
.pie {
    background: var(--navy); color: var(--blanco); padding: 40px var(--margen);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    font-size: 14px; flex-wrap: wrap;
}
.pie-marca { display: inline-flex; align-items: center; }
.pie-legal { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pie-legal a { color: var(--blanco); opacity: .85; }
.pie-legal a:hover { opacity: 1; color: var(--teal-claro); }
.pie-copyright { opacity: .7; }

/* ─── Legales ───────────────────────────────────────────────────────────────────────────────
 *
 * La forma de `design/landing/Legal.dc.html`: indice a la izquierda (260 px) y cuerpo a la
 * derecha, con la marca de borrador arriba. ⛔ NO nace una segunda hoja: SC-005 mide DOS sujetos
 * —el HTML y ESTA hoja— y siguen siendo dos.
 */
.legal {
    max-width: var(--ancho); margin: 0 auto; padding: 64px var(--margen) 80px;
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px;
}
.legal-indice { display: flex; flex-direction: column; gap: 10px; align-self: start; }
.legal-indice a { color: var(--texto-medio); font-size: 14px; }
.legal-indice a:hover { color: var(--teal); }
.legal-indice .eyebrow { margin-bottom: 6px; }

.legal-cuerpo { display: flex; flex-direction: column; gap: 32px; max-width: 760px; }
.legal-cuerpo h1 { font-size: 40px; line-height: 1.1; font-weight: 700; }
.legal-cuerpo h2 { font-size: 24px; font-weight: 700; }
.legal-cuerpo section { display: flex; flex-direction: column; gap: 10px; }
.legal-cuerpo p { font-size: 16px; line-height: 1.65; color: var(--texto-medio); }
.legal-cuerpo .entradilla { font-size: 17px; max-width: none; }
.legal-fecha { font-size: 15px; color: var(--texto-tenue); }

/* La marca de borrador (D-4). Se quita de UNA LINEA del catalogo cuando el dueno la retire. */
.marca-borrador {
    display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--lienzo);
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--navy);
}

.legal-destacado {
    padding: 16px 20px; background: var(--lienzo); border-left: 4px solid var(--teal);
    border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.6; color: var(--navy);
}

/* El aviso de `/en/`: ambar, como el de la maqueta, y a sangre completa sobre el cuerpo. */
.aviso-en {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px var(--margen); background: #FFF4D6; border-bottom: 1px solid #F0D48A;
    font-size: 14px; color: #5A4300;
}

/* Las anclas del indice se paran POR DEBAJO de la cabecera fija, igual que en B3-bis. */
.legal-cuerpo section { scroll-margin-top: 80px; }

/* ─── Movil (referencia: design/landing/Movil.dc.html, 390 px) ──────────────────────────────── */
@media (max-width: 768px) {
    :root { --margen: 20px; }

    .cabecera { height: auto; padding-block: 14px; flex-wrap: wrap; gap: 12px; }

    /* ⚠️ Aqui la cabecera es de ALTO AUTOMATICO y el menu se envuelve, asi que el valor no se
     *    deduce de una sola propiedad: 14+14 de padding + 30 de la marca + 12 de hueco + ~40 de
     *    la linea del menu ≈ 110. Se deja en 118 porque pasarse solo cuesta aire, y quedarse
     *    corto TAPA el titulo de la seccion, que es el fallo que esto existe para evitar. */
    #frontera, #como, #contacto { scroll-margin-top: 118px; }

    /* Legales: una sola columna, el indice arriba, y el ancla con el valor de movil. */
    .legal { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
    .legal-cuerpo h1 { font-size: 30px; }
    .legal-cuerpo h2 { font-size: 21px; }
    .legal-cuerpo section { scroll-margin-top: 118px; }
    .nav { gap: 16px; flex-wrap: wrap; font-size: 14px; }

    main > section { padding-block: 48px; }

    /* Una sola columna en todas las rejillas: es lo que hace la maqueta movil. */
    .heroe, .dos-columnas, .tres-columnas, .promesa, .contacto, .campos-par {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .heroe h1 { font-size: 34px; }
    .seccion-cabeza h2, .contacto-texto h2 { font-size: 27px; }
    .promesa h2 { font-size: 30px; }
    .entradilla { font-size: 17px; }

    /* Los botones, a ancho completo: un objetivo tactil que no se falla. */
    .acciones { flex-direction: column; align-items: stretch; }
    .acciones .boton, .formulario .boton { display: block; width: 100%; text-align: center; }

    /* El volcado NO se parte: se desplaza. Partirlo destruiria la alineacion en columnas. */
    .volcado { font-size: 12px; }

    .formulario { padding: 20px; }
    .pie { flex-direction: column; align-items: flex-start; gap: 16px; }
}