/* Vaucai — shared styles (landing + legal pages).
   HTML/CSS/JS vanilla servido por nginx, sin build step (ADR-008: la web es
   el funnel a Telegram, NO una PWA/Next.js). Los tokens de diseño viven en
   :root (ADR-007) = fuente única de color, superficie, tipografía y motion. */

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

/* WEB-02 (Bloque G) — foco visible accesible (WCAG 2.4.7 / EAA).
   Patrón moderno: se quita el outline por defecto (de bajo contraste sobre el
   tema oscuro) y se da un anillo CLARO solo en navegación por TECLADO
   (`:focus-visible`). El ratón no muestra nada (no cambia para quien hace
   click); quien tabula ve SIEMPRE dónde está — botones, enlaces, inputs. */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent-hover, #1F5FE0);
    outline-offset: 2px;
    border-radius: 4px;
}

/* iOS Safari rubber-band overscroll expone el fondo del <html> por
   debajo y por encima del body. background var(--bg) elimina el flash
   blanco bajo el footer negro. overscroll-behavior: none mata la
   animacion de rebote en si misma (Safari iOS 16+, no-op en anteriores).
   color-scheme asegura que scrollbar nativa y form controls hereden
   tema claro sin parpadeo. */
html {
    background: var(--bg);
    color-scheme: light;
    overscroll-behavior: none;
    /* La web se adapta SIEMPRE al ancho del móvil: nada de scroll/arrastre
       horizontal. `clip` (preferido) no crea contexto de scroll —preserva
       position:sticky—; `hidden` queda de fallback para navegadores viejos. */
    overflow-x: hidden;
    overflow-x: clip;
}

:root {
    --bg: #ffffff;
    --bg-deep: #f5f5f7;
    --surface: #f4f4f5;
    --surface-elevated: #ffffff;
    --surface-soft: #f7f7f8;
    --border: #e4e4e7;
    --border-soft: #ececef;
    --border-light: #d4d4d8;
    --fg: #0a0a0a;
    --fg-soft: #27272a;
    --muted: #52525b;
    --muted-soft: #71717a;
    --accent: #2E72FC;
    --accent-hover: #1F5FE0;
    --error: #dc2626;

    /* Aliases + new tokens introducidos en el brief de la landing narrativa.
       Las páginas legales siguen usando los nombres originales. */
    --void: var(--bg);
    --void-raised: #f7f7f8;
    --void-elevated: #f0f0f2;
    --text: var(--fg);
    --text-soft: var(--muted);
    --text-faint: var(--muted-soft);
    --text-whisper: #a1a1aa;
    --vaucai-blue: var(--accent);
    --vaucai-blue-hover: #1F5FE0;
    --line: var(--border);
    --line-soft: var(--border-soft);
    --line-bright: var(--border-light);
    --post-it: #FCE88C;

    /* Motion tokens (Bloque B) — fuente única de curvas y duraciones.
       --ease-cinematic ya existía (reveals). Añadimos la familia para que
       todo el motion del funnel (Lenis, GSAP, transiciones CSS) hable el
       mismo idioma en vez de hardcodear curvas sueltas por sitio. */
    --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.4s;
    --dur-slow: 0.9s;
}


/* Lenis smooth scroll (Bloque B · B-02) — helpers requeridos por la lib.
   Solo aplican cuando motion.js añade la clase `.lenis` al <html> (es decir,
   cuando el scroll suave está activo y NO hay prefers-reduced-motion). */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    /* bg en html (línea 14). body queda transparent para que el
       body::before del hero (backdrop cinemático) sea visible. */
    background: transparent;
    color: var(--fg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Reveal animations */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: riseIn 0.6s ease-out forwards; }
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.15s; }
.reveal-3 { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; animation: none; }
}

/* Nav */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    /* Posicionado para pintar:
         - por encima del .contact-menu cuando está abierto en full-
           screen (z=60). z-index: 200 garantiza que el logo + hamburger
           sigan visibles cuando el menú Poke-style cubre el viewport. */
    position: relative;
    z-index: 200;
}
/* `<body class="nav-fija">`: en el ordenador la nav (logo + hamburguesa) se
   queda FIJA arriba mientras la página se mueve (Documentación y Preguntas
   frecuentes). Sale del flujo, así que el body le guarda su hueco:
   --nav-fija-alto es lo que mide (1.5rem de padding arriba y abajo + el logo
   de 44 px). Su fondo es un ::before a sangre (la nav mide 1200 px como
   mucho) para que el texto no se vea pasar por debajo. Sin clip-path ni
   overflow: el menú de la hamburguesa es un `fixed` a pantalla completa
   DENTRO de la nav. El scroll-padding-top dice que la nav tapa lo de arriba:
   lo respetan los saltos a un #apartado (los del navegador y los de Lenis,
   que lo lee) y quien sube a mano lo descuenta (integraciones-filters.js). */
@media (min-width: 1000px) {
    :root { --nav-fija-alto: 92px; }
    html:has(> body.nav-fija) { scroll-padding-top: var(--nav-fija-alto); }
    body.nav-fija { padding-top: var(--nav-fija-alto); }
    body.nav-fija > nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    body.nav-fija > nav::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(50% - 50vw);
        right: calc(50% - 50vw);
        background: var(--bg);
        z-index: -1;
    }
    /* Arriba del todo no pasa nada por debajo de la nav, así que su fondo no
       pinta: lo que asoma tras ella (el halo de Precios) se ve como sin la
       nav fija. Se funde en los primeros 24 px de scroll, atado al scroll y
       sin JS: lo más cercano a la nav en cualquier página está a 28 px o
       más, así que nada llega a pasar por debajo con el fondo a medias. Sin
       animation-timeline, el fondo se queda opaco siempre. */
    @supports (animation-timeline: scroll()) {
        body.nav-fija > nav::before {
            animation: nav-fija-fondo linear both;
            animation-timeline: scroll(root);
            animation-range: 0 24px;
        }
    }
}
@keyframes nav-fija-fondo { from { opacity: 0; } to { opacity: 1; } }
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Stacking: el .contact-menu es descendiente del <nav>, por lo
       que vive dentro del stacking context del nav (z-index: 200).
       Para que el logo siga visible cuando el menú overlay se abre
       (z-index: 60 dentro del nav), el logo necesita position +
       z-index propio mayor que 60. Sin esto, el menú cubre el logo
       a pesar del z-index del nav. */
    position: relative;
    z-index: 70;
}
.logo a { color: inherit; text-decoration: none; }
.logo img { height: 44px; width: auto; display: block; }

/* ----- Contact menu — Poke-style full-screen overlay -----
   El menú deja de ser un dropdown pequeño y pasa a cubrir el viewport
   entero. La nav (logo Vaucai + hamburger) queda flotando encima
   gracias al z-index. Backdrop oscuro con blur sutil. */
.contact-cta-wrap {
    position: relative;
    display: inline-flex;
}
.contact-menu {
    /* Fixed full-viewport. Antes era absolute dropdown 200px de ancho;
       ahora ocupa todo: top 0 / inset 0. */
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;  /* dynamic viewport en mobile (excluye barras de browser) */

    /* ----- El menú CABE SIEMPRE, en cualquier móvil, sin scroll -----
       El tamaño de los enlaces no dependía de la altura de la pantalla:
       `clamp(30px, 5vw, 48px)` daba 30px FIJOS en todos los móviles reales
       (el 5vw sólo alcanza los 30px a partir de 600px de ancho). La lista
       ocupaba siempre lo mismo y la pantalla no, así que en un teléfono
       bajito la lista invadía la franja donde el menú eleva el botón
       "Probar gratis" del hero — y se comía "Email", que además se quedaba
       con el toque del dedo (elementFromPoint devolvía A.cta-button ahí).

       El botón NO se mueve: sigue exactamente donde lo pone site.js. Lo que
       se ajusta es la fila, y sólo lo justo. `--menu-cta-top` es la posición
       que site.js publica al abrir el menú; es el techo real de la lista.

       El divisor sale de la propia hoja: 6 enlaces a 2,25 alturas de letra
       (1,05 de interlínea + 1,2 de padding) más los 2 del submenú a 1,97 =
       17,44. Los 42px son los huecos (24 + 2 + 4) más 12 de aire. Con el
       tope en 30px, en un móvil donde ya cabía NO cambia ni un píxel. */
    --menu-arriba: clamp(80px, 14vh, 140px);
    --menu-tam: clamp(
        16px,
        calc((var(--menu-cta-top, calc(100dvh - 56px)) - var(--menu-arriba) - 42px) / 17.44),
        30px
    );

    padding: var(--menu-arriba) clamp(28px, 6vw, 64px) 56px;
    /* Fijo y sin scroll, por construcción: con el cálculo de arriba nunca
       hay contenido de sobra, y si algún día lo hubiera no se convierte en
       una barra de scroll dentro del overlay. */
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.24s ease,
        transform 0.30s cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 0s linear 0.24s;
    z-index: 60;
}
.contact-cta-wrap[data-open="true"] .contact-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.24s ease,
        transform 0.30s cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 0s linear 0s;
}
/* Compat: el viejo .header-cta-btn (si una página aún lo usa) sigue
   teniendo highlight al abrir. */
.contact-cta-wrap[data-open="true"] > .header-cta-btn {
    background: rgba(32, 106, 244, 0.10);
}

/* Body-lock cuando el menú está abierto: bloquea scroll de la página
   detrás. La clase la setea site.js. */
body.menu-open { overflow: hidden; }

/* ----- CTA del hero visible sobre el menú abierto -----
   Al abrir el menú elevamos el MISMO botón "Crear mi Vaucai" del
   hero (no se duplica). Para que pueda pintar por encima del overlay
   (z=60 dentro del nav z=200) liberamos los contextos de apilamiento de
   main y .hero, y fijamos el botón en su posición medida por site.js
   (vars --menu-cta-*). `.menu-cta-on` sólo se activa si existe el botón
   (no en /integraciones).

   SOLO móvil/táctil, que es donde el menú ES un overlay a pantalla
   completa y el CTA quedaría enterrado debajo. En ORDENADOR el menú es
   un dropdown pequeño anclado a la esquina: no tapa nada, así que no
   hay que elevar nada. Antes esto se aplicaba siempre y se "revertía"
   a mano en el media query de ordenador con valores hardcodeados —
   y esa reversión ponía `overflow: hidden` en el hero asumiendo que
   ese era su valor base. En la landing NO lo es: en ordenador el hero
   es `overflow: visible` (index.html) por el fluido full-bleed. Al ganar por especificidad (0,3,1 vs 0,2,0), pulsar el
   hamburguesa recortaba el hero a sus 1200px y cortaba en seco el
   fluido full-bleed del cursor (100vw) y el backdrop cinemático: un
   canto rectangular duro que aparecía y desaparecía con el menú.
   Gateado aquí, en ordenador el hero no cambia NI UNA propiedad al
   abrir el menú, así que no hay valor base que adivinar. */
@media not all and (hover: hover) and (pointer: fine) {
    body.menu-open.menu-cta-on main { z-index: auto; }
    body.menu-open.menu-cta-on .hero { isolation: auto; overflow: visible; }
    body.menu-open.menu-cta-on .hero .cta-button {
        position: fixed;
        top: var(--menu-cta-top);
        left: var(--menu-cta-left);
        width: var(--menu-cta-width);
        margin: 0;
        z-index: 250;
    }
}

/* ----- Hamburger menu button — 3 líneas blancas iguales (estilo
   Poke). Sin caja contenedora, sin borde: sólo el icono trazado en
   blanco translúcido. Dimensiones del touch-target 44×44px (match
   exacto con la altura del logo Vaucai en el header → alineación
   perfecta vertical vía align-items:center del nav). Las líneas
   se transforman en X cuando data-open="true". */
.menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    /* El azul eléctrico del logo, abierto y cerrado. */
    color: var(--accent);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition:
        color 0.18s ease,
        transform 0.12s ease;
    /* Mismo motivo que .logo: el botón debe quedar por encima del
       .contact-menu (z=60) para que la "X" sea visible y clicable
       cuando el menú está abierto. */
    position: relative;
    z-index: 70;
}
.menu-btn:hover { color: var(--accent-hover); }
.menu-btn:active { transform: scale(0.94); }
.menu-btn svg { display: block; }
.contact-cta-wrap[data-open="true"] > .menu-btn { color: var(--accent); }
@media (max-width: 600px) {
    .menu-btn { width: 40px; height: 40px; }
}

/* ----- Submenu anidado dentro del .contact-menu: "Contacto"
   funciona como un toggle que despliega Información + Soporte. */
.contact-menu-toggle {
    width: 100%;
    border: none;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    justify-content: space-between;
}
.contact-menu-toggle > span { flex: 1; }
.contact-menu-chevron {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    color: var(--text-soft);
    transition: transform 0.22s ease, color 0.15s ease;
}
.contact-menu-toggle[aria-expanded="true"] .contact-menu-chevron {
    transform: rotate(180deg);
}
.contact-menu-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, margin-top 0.22s ease;
}
.contact-menu-toggle[aria-expanded="true"] + .contact-menu-sub {
    max-height: 140px;
    margin-top: 2px;
}
.contact-menu-sub-item { padding-left: 22px; }
.contact-menu-item {
    display: flex;
    align-items: center;
    /* Todo lo de la fila va en proporción a --menu-tam: al encoger la letra
       en un móvil bajo, la fila entera encoge igual y el conjunto se ve
       idéntico, sólo que más pequeño. Los factores son los de hoy medidos
       contra 30px: 16/30, 18/30, 26/30. */
    gap: calc(var(--menu-tam) * 0.5333);
    padding: calc(var(--menu-tam) * 0.6) 8px;
    border-radius: 0;
    color: rgba(10, 10, 10, 0.92);
    text-decoration: none;
    /* Misma tipografía que el h1 del hero: Inter ExtraBold con tracking
       ajustado. Escala Poke (clamp grande). */
    font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: var(--menu-tam);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    white-space: nowrap;
    transition: color 0.18s ease;
}
.contact-menu-item:hover,
.contact-menu-item:focus-visible {
    background: transparent;
    color: var(--fg);
    outline: none;
}
.contact-menu-item svg {
    width: calc(var(--menu-tam) * 0.8667);
    height: calc(var(--menu-tam) * 0.8667);
    flex: 0 0 calc(var(--menu-tam) * 0.8667);
    color: var(--text-soft);
    transition: color 0.18s ease;
}
.contact-menu-item:hover svg,
.contact-menu-item:focus-visible svg {
    color: rgba(10, 10, 10, 0.92);
}
.contact-menu-sub-item {
    /* 28/30 y 22/30: la misma proporción de hoy contra el enlace grande. */
    padding-left: calc(var(--menu-tam) * 0.9333);
    font-size: calc(var(--menu-tam) * 0.7333);
    font-weight: 500;
    color: rgba(10, 10, 10, 0.72);
    /* Permitir wrap en móvil para que "Telegram"/"Email" no se corten */
    white-space: normal;
}
.contact-menu-sub-item svg {
    width: calc(var(--menu-tam) * 0.7333);
    height: calc(var(--menu-tam) * 0.7333);
    flex: 0 0 calc(var(--menu-tam) * 0.7333);
}
.contact-menu-chevron {
    width: calc(var(--menu-tam) * 0.6);
    height: calc(var(--menu-tam) * 0.6);
    flex: 0 0 calc(var(--menu-tam) * 0.6);
}

/* Móviles muy estrechos (< 360px): reducir padding-left de sub-items
   para dar más espacio al texto "Telegram"/"Email" y evitar overflow */
@media (max-width: 359px) {
    .contact-menu-sub-item {
        padding-left: 20px;
    }
}

.contact-menu-toggle[aria-expanded="true"] + .contact-menu-sub {
    /* Más altura que el dropdown original (140px) — ahora los items
       son grandes (~80px de alto cada uno). Aumentado a 320px para
       garantizar que ambos items (Información + Soporte) quepan en móviles
       con barras de navegación del browser (100dvh). */
    max-height: 320px;
    margin-top: 4px;
}

/* ============================================================
   ORDENADOR (puntero fino + hover, i.e. ratón/trackpad): el menú
   deja de ser overlay a pantalla completa y pasa a ser un
   desplegable compacto anclado al borde DERECHO, justo bajo el
   botón hamburguesa. En móvil/táctil sigue siendo el overlay
   fullscreen de links grandes.
   Usamos (hover:hover) and (pointer:fine) en vez de min-width
   porque el founder veía el overlay en su ordenador: con zoom de
   navegador o escalado del SO el viewport CSS cae por debajo de
   768px y un breakpoint por ancho fallaba. El tipo de puntero
   distingue "ordenador vs móvil" sin depender del ancho.
   .contact-cta-wrap es position:relative → el absolute se ancla a
   él; right:0 alinea el menú a la derecha.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .contact-menu {
        position: absolute;
        inset: auto;
        top: calc(100% + 12px);
        right: 0;
        left: auto;
        width: max-content;
        min-width: 240px;
        max-width: 320px;
        height: auto;
        padding: 8px;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 16px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
        gap: 2px;
    }
    /* Items en escala de dropdown (no los links gigantes del overlay).
       Subido un escalón (2026-09-04): a 15px el desplegable se veía
       pequeño al lado del resto de la cabecera. */
    .contact-menu-item {
        font-size: 16.5px;
        font-weight: 600;
        padding: 12px 15px;
        border-radius: 10px;
        gap: 13px;
    }
    .contact-menu-item:hover,
    .contact-menu-item:focus-visible {
        background: rgba(0, 0, 0, 0.04);
    }
    .contact-menu-item svg { width: 19px; height: 19px; flex: 0 0 19px; }
    .contact-menu-toggle { font-size: 16.5px; }
    .contact-menu-sub-item {
        font-size: 15px;
        font-weight: 500;
        padding-left: 32px;
    }
    .contact-menu-sub-item svg { width: 17px; height: 17px; flex: 0 0 17px; }
    .contact-menu-chevron { width: 14px; height: 14px; flex: 0 0 14px; }

    /* El dropdown es pequeño: no bloquea la página, así que el body-lock
       del scroll no aplica. La elevación del CTA del hero ya no hay que
       revertirla: vive gateada en el media query complementario (ver el
       bloque `.menu-cta-on` arriba) y aquí sencillamente no existe. */
    body.menu-open { overflow: visible; }
}

/* Hamburger → X transformation cuando el menú está abierto. Las
   líneas del SVG se animan: top y bottom convergen al centro y rotan,
   la del medio se desvanece (cute touch: slide a la izquierda). */
.menu-btn svg line {
    transition:
        transform 0.30s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.20s ease;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
.contact-cta-wrap[data-open="true"] .menu-btn svg line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}
.contact-cta-wrap[data-open="true"] .menu-btn svg line:nth-child(2) {
    opacity: 0;
    transform: translateX(8px);
}
.contact-cta-wrap[data-open="true"] .menu-btn svg line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

main { flex: 1; width: 100%; position: relative; z-index: 1; }

/* Hero (landing) */
.hero {
    text-align: center;
    padding: 4rem 2rem;
    /* Sesión-16 — max-width 800 → 1200. El ancho amplio permite que el
       titular crezca hasta el máximo tipográfico sin romper la línea. */
    max-width: 1200px;
    width: 100%;
}
.hero h1 {
    /* «Recurre cualquier multa de tráfico», Inter ExtraBold, centrado. En el
       móvil va en DOS líneas («Recurre cualquier» / «multa de tráfico», el
       salto es .hero-titulo-corte) y en el ordenador en UNA; en los dos casos
       `nowrap` impide cualquier otro salto y el tamaño fluido llena el ancho
       útil del hero (viewport menos sus 16px de padding por lado). De dónde
       salen los divisores: MEDIDA DEL TITULAR, más abajo. */
    font-family: 'Inter', 'Inter Fallback Hero', 'Inter Fallback Hero Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: clamp(1px, calc((100vw - 32px) / 8.49), 6.56rem);
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 auto 1.25rem;
    color: var(--fg);
}

@media (min-width: 768px) {
    .hero h1 {
        /* DESKTOP: una línea. 6.06vw crece desde 768px y el techo, 4.58rem
           (~73px), lo deja en ~1150 de los 1168px útiles del hero
           (max-width: 1200px con 16px de padding por lado). */
        font-size: clamp(1.82rem, 6.06vw, 4.58rem);
        letter-spacing: -0.035em;
        line-height: 1.05;
        max-width: none;
    }
    .hero-titulo-corte { display: none; }
}

/* MEDIDA DEL TITULAR — de aquí salen los divisores de arriba. Ancho real del
   texto ÷ su font-size, con Inter ExtraBold y este mismo CSS (Chromium,
   2026-10-25):
     «Recurre cualquier»                   8.32× (móvil, la línea más larga)
     «Recurre cualquier multa de tráfico» 15.69× (escritorio)
   Móvil: (100vw − 32px) / 8.49 lo deja en el 98 % del ancho. Escritorio:
   la escala del titular de Vaucai (10.96×) por 10.96 / 15.69. Si cambia el
   texto, se vuelve a medir y se escalan igual. */

.hero p {
    /* Subtítulo (~125 chars). BASE = mobile: fuente más pequeña que el título
       (15px vs ~25px) pero ancho ATADO al del título para que los márgenes
       laterales de ambos coincidan → se leen como un bloque centrado. El
       título mide ~0.879·(100vw−36px); reproducimos ese ancho con un pelín
       menos (subtítulo un punto más estrecho, queda subordinado). */
    font-size: clamp(11px, calc((100vw - 48px) / 22.5), 14px);
    line-height: 1.5;
    color: var(--muted);
    max-width: none;
    margin: 0 auto 2.5rem;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .hero p {
        /* DESKTOP: el subtítulo va SIEMPRE en una sola línea (Juan) → quitamos
           el tope de ancho y forzamos nowrap; se centra solo (margin:0 auto). */
        font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
        line-height: 1.55;
        max-width: none;
        white-space: nowrap;
    }
    /* El salto manual del subtítulo es solo-móvil: en desktop va en 1 línea. */
    .hero-sub-break { display: none; }
}


/* Legal pages */
.legal-page {
    padding: 80px 40px;
    max-width: 720px;
    margin: 0 auto;
}
.legal-content h1 {
    font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: clamp(30px, 4.2vw, 44px);
    font-weight: 800;
    color: var(--fg);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.legal-content > p:first-of-type {
    margin-bottom: 48px;
}
.legal-content > p:first-of-type em {
    font-size: 14px;
    color: var(--muted-soft);
    font-style: normal;
}
.legal-content em { font-style: normal; }
.legal-content h2 {
    font-size: 22px;
    font-weight: 500;
    color: var(--fg);
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1.3;
}
.legal-content h3 {
    font-size: 18px;
    font-weight: 500;
    color: var(--fg);
    margin-top: 32px;
    margin-bottom: 12px;
    line-height: 1.35;
}
.legal-content p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--fg-soft);
    margin-bottom: 16px;
}
.legal-content ul,
.legal-content ol {
    margin: 0 0 16px;
    padding-left: 24px;
    line-height: 1.65;
    color: var(--fg-soft);
    font-size: 16px;
}
.legal-content li { margin-bottom: 6px; }
.legal-content li > strong { color: var(--fg); }
.legal-content a {
    color: var(--accent);
    text-decoration: none;
}
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--fg); font-weight: 600; }
.legal-content code {
    background: var(--surface-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--fg);
}
.legal-content table.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 14px;
    color: var(--fg-soft);
}
.legal-content table.legal-table th {
    text-align: left;
    padding: 10px;
    background: var(--surface-soft);
    color: var(--fg);
    font-weight: 600;
    border-bottom: 1px solid var(--border-soft);
}
.legal-content table.legal-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}

/* ---- Los cuatro textos legales: <main class="legal-page legal-doc"> ----
   Aviso legal, Privacidad, Términos y Cookies (Dominios usa .legal-page sin
   .legal-doc y siguen con lo de arriba). Sólo CSS: el
   texto y su marcado no se tocan (el §10.2 de Privacidad lleva huella).
   En el ordenador, la composición de Documentación: el texto alineado con
   «← Volver al inicio» (el gutter de un contenedor de 1120 px) y el esquema
   «En esta página» FIJO a la derecha (legal.js + en-esta-pagina.js). El pie
   va dentro de la columna del texto, así el esquema nunca le pasa por
   encima; en el móvil sale a sangre. La columna: 720 px a 17 px, unos 85
   caracteres por línea con la fuente del sistema (lo mismo que
   Documentación); más ancha se cansa la vista en un texto largo. */
.legal-doc.legal-page {
    max-width: 1120px;
    padding: 48px 24px 0;
}
.legal-doc .legal-content { max-width: 720px; }
.legal-doc > .site-footer { margin: 112px -24px 0; }

.legal-doc .legal-content h1 {
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -0.035em;
    line-height: 1.06;
    margin-bottom: 14px;
}
.legal-doc .legal-content > p:first-of-type { margin-bottom: 44px; }
.legal-doc .legal-content p,
.legal-doc .legal-content ul,
.legal-doc .legal-content ol {
    font-size: 17px;
    line-height: 1.75;
}
.legal-doc .legal-content p { margin-bottom: 18px; }
.legal-doc .legal-content ul,
.legal-doc .legal-content ol { margin-bottom: 22px; padding-left: 22px; }
.legal-doc .legal-content li { margin-bottom: 10px; padding-left: 4px; }
.legal-doc .legal-content li::marker { color: var(--muted-soft); }
.legal-doc .legal-content a:hover { text-underline-offset: 3px; }
/* Cada apartado se separa del anterior con una línea finísima, en un
   ::before por encima del título: así el salto desde el esquema deja el
   TÍTULO donde aterriza (scroll-margin-top) y la línea queda tras la nav. */
.legal-doc .legal-content h2 {
    position: relative;
    font-size: clamp(21px, 2.3vw, 25px);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.28;
    margin: 80px 0 20px;
    scroll-margin-top: 24px;
}
.legal-doc .legal-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    height: 1px;
    background: var(--border);
}
.legal-doc .legal-content h3 {
    font-size: 18.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 40px 0 12px;
    scroll-margin-top: 24px;
}
/* Las tablas de Cookies traen su estilo escrito en el propio HTML legal
   (border-collapse, letra y rellenos en línea) y ese marcado no se toca: de
   ahí los !important, sólo aquí. Van en su propia caja: si la columna no da
   para los nombres de cookie (no se parten), la tabla se desplaza dentro de
   su marco y nunca se sale de la columna ni se mete bajo el esquema. */
.legal-doc .legal-content table.legal-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 20px 0 28px !important;
    font-size: 14px !important;
    line-height: 1.55;
}
.legal-doc .legal-content table.legal-table th {
    font-size: 13px;
    border-bottom: 1px solid var(--border) !important;
}
.legal-doc .legal-content table.legal-table th,
.legal-doc .legal-content table.legal-table td { padding: 12px 10px !important; }
.legal-doc .legal-content table.legal-table tr:last-child td { border-bottom: 0 !important; }
/* Los nombres de cookie no se parten: a 12 px, la primera tabla de Cookies
   (la más ancha, unos 710 px de mínimo) cabe en los 720 px de la columna. */
.legal-doc .legal-content table.legal-table code { font-size: 12px; padding: 2px 4px; }

/* El esquema: en el móvil no está (va el «Índice» plegado). */
.legal-toc { display: none; }
/* «Índice» plegado tras la fecha (legal.js); sólo en el móvil. */
.legal-indice {
    margin: -8px 0 44px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
}
.legal-indice summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    user-select: none;
}
.legal-indice summary::-webkit-details-marker { display: none; }
.legal-indice-chevron {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--fg-soft);
    transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), background .2s ease, color .2s ease;
}
.legal-indice[open] .legal-indice-chevron {
    transform: rotate(180deg);
    background: var(--accent);
    color: var(--fg);
}
.legal-indice-lista {
    border-top: 1px solid var(--border-soft);
    padding: 6px 0 10px;
}
.legal-doc .legal-content .legal-indice-lista a {
    display: block;
    padding: 10px 20px;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--fg-soft);
    text-decoration: none;
}
.legal-doc .legal-content .legal-indice-lista a:active { color: var(--accent-hover); }

@media (max-width: 768px) {
    .legal-doc.legal-page { padding-top: 36px; }
    .legal-doc .legal-content h1 { font-size: 34px; }
    .legal-doc .legal-content h2 { margin-top: 64px; }
    .legal-doc .legal-content h2::before { top: -32px; }
    .legal-doc > .site-footer { margin-top: 88px; }
    .legal-doc .legal-content table.legal-table { font-size: 13.5px !important; }
    .legal-doc .legal-content table.legal-table th,
    .legal-doc .legal-content table.legal-table td { padding: 10px !important; }
}

@media (min-width: 1000px) {
    /* --legal-toc-top: la fila de «← Volver al inicio» (su margen de
       arriba es el mismo clamp), así el esquema arranca a su altura y no
       se mueve nunca. El texto deja sitio al esquema (260 px y 56 de aire)
       cuando la pantalla no da para los 720 px. */
    :root { --legal-toc-top: calc(var(--nav-fija-alto) + clamp(2rem, 5vh, 3.25rem)); }
    .legal-doc .legal-content,
    .legal-doc > .site-footer { max-width: min(720px, calc(100% - 316px)); }
    .legal-doc > .site-footer { margin-inline: 0; }
    .legal-doc .legal-content h2,
    .legal-doc .legal-content h3 { scroll-margin-top: 28px; }
    .legal-indice { display: none; }
    .legal-toc {
        display: block;
        position: fixed;
        top: var(--legal-toc-top);
        right: max(24px, calc(50% - 536px));
        width: 260px;
        max-height: calc(100vh - var(--legal-toc-top) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding-bottom: 16px;
    }
    .en-esta-pagina.legal-toc a { font-size: 14px; line-height: 1.38; padding-block: 7px; }
}

/* Site footer (compartido landing + legal pages).
   La landing duplica estos estilos inline en index.html (legacy del
   refactor narrativo); aqui viven los autoritativos para que las
   legal pages no queden sin layout. */
.site-footer {
    background: var(--bg);
    /* El padding-bottom era 28px, y lo era porque debajo de los iconos de
       redes venía el sello de seguridad, que aportaba su propio aire. Al
       retirarlo (f877238e) los iconos quedaron al ras del borde inferior.
       56px devolvía el respiro, pero en ordenador empujaba el CTA de cierre
       fuera de pantalla al llegar al final: 24px lo recorta sin dejar los
       iconos al ras. El móvil lleva el suyo en el @media de abajo. */
    padding: 40px 32px 24px;
    color: var(--fg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}
.site-footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.site-footer-logo {
    display: block;
    line-height: 0;
    margin: 0;
    padding: 0;
}
/* El logo del footer es el mismo de la nav (partial `logo-am.html`), más grande. */
.site-footer-logo .am-logo {
    display: block;
    height: 56px;
    width: auto;
}
.site-footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 56px;
    row-gap: 12px;
}
.site-footer-legal li { line-height: 1; }
.site-footer-legal a {
    display: block;
    color: rgba(10, 10, 10, 0.6);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.2s;
}
.site-footer-legal a:hover { color: var(--fg); }
@media (max-width: 900px) {
    /* Audit 2026-05-06: keep 2×2 grid on mobile (the majority of
       traffic comes from phones; collapsing to a single column
       breaks the symmetry the founder asked for). Tighter
       column-gap so the four labels fit comfortably even on
       narrow viewports (~340-360px). */
    .site-footer-legal {
        column-gap: 32px;
        justify-content: center;
    }
}
.site-footer-social-col {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: center;
}
.site-footer-social-col a {
    display: inline-flex;
    color: rgba(10, 10, 10, 0.6);
    transition: color 0.2s, transform 0.2s;
}
.site-footer-social-col a:hover {
    color: var(--accent);
    transform: scale(1.1);
}
.site-footer-social-col svg { width: 20px; height: 20px; display: block; }
@media (max-width: 900px) {
    .site-footer { padding: 24px 24px 40px; }
    .site-footer-logo .am-logo { height: 44px; }
}

/* Back link para legal pages — siempre visible en mobile (la nav-links
   se oculta en <600px y el wordmark no parece "back" para el visitante
   medio). Se renderiza dentro del article, encima del h1. */
.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Azul vaucai (--accent) — color de marca, consistente entre
       /crear/, páginas legales y por-que-vaucai. Audit 2026-05-06:
       antes era var(--muted) (gris) — el fundador pidió que los
       enlaces de "volver" usen el color de la marca para no romper
       estética entre páginas. */
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 32px;
    transition: color 0.2s;
}
.legal-back:hover { color: var(--accent-hover); }
.legal-back-arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.legal-back:hover .legal-back-arrow { transform: translateX(-3px); }

/* Botón "Volver al inicio" — POSICIÓN FIJA e idéntica en TODAS las páginas
   (referencia: la de /integraciones). Va como hijo directo tras el <nav>
   (partial /partials/back-link.html), no dentro de cada <main>, así su
   posición NO depende del layout de cada página. Alineado al gutter de un
   contenedor centrado de 1120px (igual que el contenido de Funcionalidades)
   con el mismo hueco bajo el menú. inline-flex = área de clic pequeña. */
.legal-back--page {
    /* 50 %, no 50vw: el % se mide sin la barra de scroll, como el centrado
       de los contenedores (con 50vw se iba media barra a la derecha en
       Windows y no cuadraba con el texto de debajo). */
    margin: clamp(2rem, 5vh, 3.25rem) 0 0 max(24px, calc(50% - 536px));
}

/* Inline "Configurar cookies" affordance on /cookies/ page (audit
   2026-05-06: footer link removed, accessibility kept here per GDPR).
   Lives inside .cookie-prefs-box, a sticky-but-subtle banner placed
   right after the page title so the user sees it immediately on
   landing — no need to scroll into section 4. */
.cookie-prefs-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin: 24px 0 32px;
    background: var(--surface-soft);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
.cookie-prefs-box-text {
    font-size: 14px;
    color: var(--fg);
    line-height: 1.5;
    flex: 1 1 240px;
}
.cookie-prefs-box-text strong { font-weight: 600; }
.cookie-prefs-btn {
    padding: 10px 22px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    background: var(--fg);
    color: var(--bg);
    border: 1px solid var(--fg);
    transition: opacity 0.2s, transform 0.1s;
    white-space: nowrap;
}
.cookie-prefs-btn:hover { opacity: 0.85; }
.cookie-prefs-btn:active { transform: scale(0.98); }
@media (max-width: 600px) {
    .cookie-prefs-box {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
    }
    /* En columna, el `flex: 1 1 240px` del texto convertía ese 240px en ALTO →
       card gigante con un hueco enorme. En móvil el texto va a su contenido. */
    .cookie-prefs-box-text { flex: 0 1 auto; }
    .cookie-prefs-btn { width: 100%; }
}

/* Responsive */
@media (max-width: 768px) {
    .legal-page { padding: 64px 24px; }
    .legal-content h1 { font-size: 32px; }
    /* Móvil: las tablas anchas (cookies, etc.) desbordaban la PÁGINA → scroll
       horizontal de toda la web y el modal/overlay fijo se descuadraba. Se
       contienen en su propia caja (scroll dentro de la tabla, no de la página). */
    .legal-content table.legal-table { font-size: 13px; display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .legal-content table.legal-table th,
    .legal-content table.legal-table td { padding: 8px; }
}