/* ==========================================================================
   KEYWARCH · Páginas públicas (portada / y /en/, legales y errores)
   --------------------------------------------------------------------------
   Estilo B «Laboratorio de datos», elegido por Joan el 29-09-2026. Referencia:
   scratchpad/kw-portadas-web/b-laboratorio.html (fuente: Laboratorio.dc.html).
   El diseño llevaba los estilos en línea; aquí van todos en clases.

   Normas fijas: solo tema claro (sin modo oscuro); animaciones ligeras y solo
   con CSS, todas apagadas con prefers-reduced-motion (y la página se ve
   completa sin ellas); en el móvil, menú hamburguesa a pantalla completa;
   avisos toast arriba a la derecha con fondo opaco; ninguna parrilla deja una
   tarjeta sola en la última fila; tipografías alojadas en local.
   ========================================================================== */

/* ── Tipografías locales (OFL, ver public/fonts/LICENCIA-OFL.txt) ─────── */
@font-face {
    font-family: "Space Grotesk";
    src: url("/public/fonts/space-grotesk-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("/public/fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Colores */
    --kw-fondo: #FFFFFF;
    --kw-rejilla: #EEF0F7;
    --kw-texto: #0E1020;
    --kw-texto-suave: #4B5068;
    --kw-texto-tenue: #6B7088;
    --kw-gris: #9AA0B8;
    --kw-borde: #E4E6F0;
    --kw-borde-fuerte: #DADDEA;
    --kw-marca: #7C3AED;
    --kw-marca-oscura: #6D28D9;
    --kw-marca-profunda: #4C1D95;
    --kw-marca-suave: #F2F0FA;
    --kw-marca-clara: #E9DDFE;
    --kw-marca-borde: #D6CCF4;
    --kw-marca-fondo: #FAF7FF;
    --kw-magenta: #C93AF5;
    --kw-rosa: #DB2777;
    --kw-azul: #0284C7;
    --kw-ok: #16A34A;
    --kw-verde: #22C55E;
    --kw-error: #DC2626;
    --kw-error-texto: #B91C1C;
    --kw-noche: #151229;
    --kw-noche-2: #1D1838;
    --kw-noche-borde: #2A2448;
    --kw-noche-borde-2: #3A3358;
    --kw-noche-tenue: #8B84A8;
    --kw-noche-texto: #E7E3F5;

    /* Tipografías */
    --kw-fuente: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --kw-fuente-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Radios */
    --kw-radio-s: 8px;
    --kw-radio-m: 12px;
    --kw-radio-l: 20px;
    --kw-radio-xl: 28px;
    --kw-radio-total: 999px;

    /* Medidas y movimiento */
    --kw-ancho: 1440px;
    --kw-margen: 88px;
    --kw-cabecera: 92px;
    --kw-curva: cubic-bezier(.2, .75, .15, 1);
    --kw-sombra-toast: 0 14px 34px -12px rgba(14, 16, 32, .28);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kw-cabecera) + 16px); overflow-x: hidden; }
body {
    margin: 0;
    font-family: var(--kw-fuente);
    font-size: 16px;
    line-height: 1.6;
    color: var(--kw-texto);
    background-color: var(--kw-fondo);
    background-image: linear-gradient(var(--kw-rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--kw-rejilla) 1px, transparent 1px);
    background-size: 48px 48px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.menu-abierto { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--kw-marca-oscura); }
a:hover { color: var(--kw-marca-profunda); }
code { font-family: var(--kw-fuente-mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--kw-marca); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: 100%; max-width: var(--kw-ancho); margin: 0 auto; padding: 0 var(--kw-margen); }
.icono { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--kw-texto); color: #fff; border-radius: var(--kw-radio-s); }
.saltar:focus { top: 12px; color: #fff; }
.eyebrow { font: 600 13px var(--kw-fuente-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--kw-marca); }

/* ── Entradas y efectos (del diseño) ──────────────────────────────────── */
.rise { animation: rise .9s var(--kw-curva) both; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .28s; }
.d4 { animation-delay: 1.15s; } .d5 { animation-delay: 1.3s; } .d6 { animation-delay: 1.5s; }
.hero__agencia.d4 { animation-delay: 1.22s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Logo «K»: tres piezas que entran al cargar */
.logo path[data-pieza="1"] { fill: var(--kw-magenta); }
.logo path[data-pieza="2"], .logo path[data-pieza="3"] { fill: var(--kw-marca); }
.k1 { animation: k1 1s cubic-bezier(.3, 1.4, .4, 1) both .1s; transform-box: fill-box; transform-origin: center; }
.k2 { animation: k2 1s cubic-bezier(.3, 1.4, .4, 1) both .22s; transform-box: fill-box; transform-origin: center; }
.k3 { animation: k3 1.05s cubic-bezier(.3, 1.3, .4, 1) both .34s; transform-box: fill-box; transform-origin: center; }
@keyframes k1 { from { opacity: 0; transform: translate(-40%, -60%) rotate(-35deg) scale(.6); } }
@keyframes k2 { from { opacity: 0; transform: translate(-40%, 60%) rotate(35deg) scale(.6); } }
@keyframes k3 { from { opacity: 0; transform: translateX(45%) scale(.8); } }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px; padding: 0 24px; border: 0; border-radius: var(--kw-radio-m);
    background: var(--kw-marca); color: #fff; font: 600 16px var(--kw-fuente); cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .2s, background .3s, box-shadow .3s;
}
.btn:hover { background: var(--kw-marca-oscura); color: #fff; box-shadow: 0 12px 30px -10px rgba(124, 58, 237, .7); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .7; cursor: progress; }
.btn .arrow { transition: transform .3s; }
.btn:hover .arrow { transform: translateX(4px); }
.boton-fantasma {
    color: var(--kw-texto); text-decoration: none; font-weight: 500; padding: 10px 16px;
    border: 1px solid var(--kw-borde-fuerte); border-radius: var(--kw-radio-m); background: #fff; transition: border-color .2s;
}
.boton-fantasma:hover { border-color: var(--kw-texto); color: var(--kw-texto); }
.enlace-boton { border: 0; background: none; padding: 0; color: var(--kw-marca-oscura); font: inherit; cursor: pointer; text-decoration: underline; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 100; height: var(--kw-cabecera); background: rgba(255, 255, 255, .85); border-bottom: 1px solid var(--kw-rejilla); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cabecera__fila { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--kw-texto); }
.marca:hover { color: var(--kw-texto); }
.marca__logo { width: 34px; height: 34px; }
.marca__nombre { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.cabecera__nav { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.idiomas { display: flex; gap: 2px; font-family: var(--kw-fuente-mono); font-size: 14px; }
.idiomas a { color: #7A7F96; text-decoration: none; padding: 6px 8px; border-radius: var(--kw-radio-s); transition: color .2s, background .2s; }
.idiomas a:hover { color: var(--kw-texto); background: var(--kw-marca-suave); }
.idiomas a[aria-current="true"] { color: var(--kw-texto); font-weight: 600; }
.cabecera__menu { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--kw-borde-fuerte); border-radius: var(--kw-radio-m); color: var(--kw-texto); cursor: pointer; }
.cabecera__menu .icono { width: 22px; height: 22px; }

/* Menú del móvil: pantalla completa */
.menu-movil { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; padding: 0 16px 32px; background: var(--kw-fondo); animation: aparecer .22s ease both; }
.menu-movil__cabecera { height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--kw-rejilla); }
.menu-movil__cabecera .cabecera__menu { display: inline-flex; }
.menu-movil__nav { display: flex; flex-direction: column; padding: 12px 0; }
.menu-movil__nav a { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--kw-texto); text-decoration: none; border-bottom: 1px solid var(--kw-borde); }
.menu-movil__nav a:hover { color: var(--kw-marca); }
.idiomas--grande { margin-top: auto; }
.idiomas--grande a { padding: 12px 18px; font-size: 16px; border: 1px solid var(--kw-borde); }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ── Hero centrado ────────────────────────────────────────────────────── */
.hero__centro { padding-top: 104px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.pastilla { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--kw-borde-fuerte); border-radius: var(--kw-radio-total); background: #fff; font: 500 13.5px var(--kw-fuente-mono); color: var(--kw-texto-suave); }
.pastilla__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--kw-verde); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.hero__lema { font: 600 15px var(--kw-fuente-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--kw-marca); }
.hero__titular { max-width: 1080px; font-size: clamp(44px, 6.4vw, 92px); font-weight: 700; line-height: .98; letter-spacing: -.045em; color: var(--kw-texto); }
/* En inglés el titular es más largo: algo más pequeño y más ancho para que siga en dos líneas. */
html[lang="en"] .hero__titular { max-width: 1220px; font-size: clamp(44px, 5.5vw, 80px); }
.titular__linea--1::after { content: "\A"; white-space: pre; }
.w { display: inline-block; animation: word .9s var(--kw-curva) both; }
@keyframes word { from { opacity: 0; filter: blur(10px); transform: translateY(26px); } to { opacity: 1; filter: blur(0); transform: none; } }
.titular__linea--1 .w:nth-of-type(1) { animation-delay: .30s; }
.titular__linea--1 .w:nth-of-type(2) { animation-delay: .38s; }
.titular__linea--1 .w:nth-of-type(3) { animation-delay: .46s; }
.titular__linea--1 .w:nth-of-type(4) { animation-delay: .54s; }
.titular__linea--1 .w:nth-of-type(5) { animation-delay: .62s; }
.titular__linea--1 .w:nth-of-type(6) { animation-delay: .70s; }
.titular__linea--2 .w:nth-of-type(1) { animation-delay: .66s; }
.titular__linea--2 .w:nth-of-type(2) { animation-delay: .74s; }
.titular__linea--2 .w:nth-of-type(3) { animation-delay: .82s; }
.titular__linea--2 .w:nth-of-type(4) { animation-delay: .90s; }
.titular__linea--2 .w:nth-of-type(5) { animation-delay: .98s; }
.titular__linea--2 .w:nth-of-type(6) { animation-delay: 1.06s; }
.titular__linea--2 .w:nth-of-type(7) { animation-delay: 1.14s; }
.titular__linea--2 .w:nth-of-type(8) { animation-delay: 1.22s; }
/* Subrayado violeta de la segunda línea, que se pinta de izquierda a derecha */
.hl { background: linear-gradient(transparent 62%, var(--kw-marca-clara) 62%); background-size: 0% 100%; background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: hl 1.1s cubic-bezier(.7, 0, .2, 1) forwards 1.45s; }
@keyframes hl { to { background-size: 100% 100%; } }
.hero__subtitulo { max-width: 700px; font-size: 20px; line-height: 1.6; color: var(--kw-texto-suave); }
.hero__agencia { max-width: 700px; margin-top: -12px; font-size: 17px; font-weight: 600; color: var(--kw-texto); }

/* ── Formulario de aviso: borde de luz giratorio ──────────────────────── */
.aviso { width: 620px; max-width: 100%; margin-top: 10px; }
.aviso__form { display: flex; flex-direction: column; gap: 14px; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ring {
    padding: 2px; border-radius: var(--kw-radio-l);
    background: conic-gradient(from var(--a), var(--kw-borde) 0deg, var(--kw-marca) 60deg, #E046F0 100deg, var(--kw-borde) 160deg, var(--kw-borde) 360deg);
    animation: spinA 4.5s linear infinite;
    box-shadow: 0 20px 50px -30px rgba(14, 16, 32, .35);
    transition: box-shadow .25s;
}
@keyframes spinA { to { --a: 360deg; } }
.ring:focus-within { box-shadow: 0 0 0 6px rgba(124, 58, 237, .12), 0 20px 50px -30px rgba(14, 16, 32, .35); }
.ring.is-valid { background: var(--kw-ok); animation: none; }
.ring.is-error { background: var(--kw-error); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.pillform { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 18px; background: #fff; }
.pillform input { flex-grow: 1; min-width: 0; height: 48px; border: 0; outline: 0; padding: 0 14px; font: 500 17px var(--kw-fuente); color: var(--kw-texto); background: transparent; }
.pillform input::placeholder { color: var(--kw-gris); }
.ok-tick { width: 22px; height: 22px; flex: none; stroke: var(--kw-ok); animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.3); } }
.check { display: flex; gap: 10px; align-items: flex-start; justify-content: center; font-size: 14px; line-height: 1.5; color: var(--kw-texto-suave); text-align: left; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--kw-marca); flex: none; cursor: pointer; }
.err { color: var(--kw-error-texto); font-size: 13.5px; text-align: center; animation: rise .3s both; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso__captcha { display: flex; justify-content: center; }
.enviado { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 24px; border: 1.5px solid var(--kw-marca-borde); border-radius: 18px; background: var(--kw-marca-fondo); text-align: left; animation: rise .5s both; }
.enviado__icono { width: 44px; height: 44px; flex: none; stroke: var(--kw-marca); }
.enviado__titulo { font-size: 18px; font-weight: 600; }
.enviado__texto p + p { font-size: 15px; color: var(--kw-texto-suave); overflow-wrap: anywhere; }
.done-circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .8s ease forwards; }
.done-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s ease forwards .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── Terminal ─────────────────────────────────────────────────────────── */
.demo .contenedor { padding-top: 32px; padding-bottom: 96px; display: flex; justify-content: center; }
.terminal { width: 1040px; max-width: 100%; border-radius: 22px; background: var(--kw-noche); box-shadow: 0 60px 120px -60px rgba(46, 16, 101, .7); overflow: hidden; }
.terminal__barra { height: 48px; padding: 0 20px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--kw-noche-borde); }
.terminal__led { width: 12px; height: 12px; border-radius: 50%; background: var(--kw-noche-borde-2); }
.terminal__titulo { margin-left: 14px; font: 500 13px var(--kw-fuente-mono); color: var(--kw-noche-tenue); }
.term { font-family: var(--kw-fuente-mono); font-size: 15px; line-height: 1.9; }
.terminal__cuerpo { padding: 28px 36px 36px; color: var(--kw-noche-texto); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; text-align: left; }
.terminal__prompt { color: #A78BFA; }
.terminal__eti { color: var(--kw-noche-tenue); }
.terminal__destacado { color: #F0ABFC; }
.terminal__pct { color: #C4B5FD; }
.type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; animation: type 12s steps(28) infinite; }
@keyframes type { 0% { width: 0; } 14% { width: 28ch; } 94% { width: 28ch; } 100% { width: 0; } }
.caret { display: inline-block; width: 9px; height: 19px; background: #C4B5FD; vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.l1 { animation: l1 12s infinite; } .l2 { animation: l2 12s infinite; } .l3 { animation: l3 12s infinite; }
.l4 { animation: l4 12s infinite; } .l5 { animation: l5 12s infinite; } .l6 { animation: l6 12s infinite; }
@keyframes l1 { 0%, 18% { opacity: 0; transform: translateX(-8px); } 21%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes l2 { 0%, 26% { opacity: 0; transform: translateX(-8px); } 29%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes l3 { 0%, 34% { opacity: 0; transform: translateX(-8px); } 37%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes l4 { 0%, 42% { opacity: 0; transform: translateX(-8px); } 45%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes l5 { 0%, 50% { opacity: 0; transform: translateX(-8px); } 53%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes l6 { 0%, 60% { opacity: 0; transform: scale(.96); } 64%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.meter { display: inline-block; width: 160px; height: 8px; border-radius: 9px; background: var(--kw-noche-borde); overflow: hidden; vertical-align: 1px; }
.meter span { display: block; height: 100%; background: #A78BFA; transform-origin: left; animation: meter 12s infinite; }
@keyframes meter { 0%, 30% { transform: scaleX(0); } 40%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.terminal__tarjeta { align-self: center; padding: 22px; border: 1px solid var(--kw-noche-borde-2); border-radius: 16px; background: var(--kw-noche-2); }
.terminal__va { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--kw-noche-tenue); }
.terminal__pagina { margin-top: 8px; font-size: 19px; color: #fff; }
.terminal__detalle { margin-top: 14px; font-size: 13px; color: #A7A0C4; line-height: 1.6; }

/* ── Tres cifras reales que cuentan hacia arriba ──────────────────────── */
.cifras__rejilla { padding-top: 40px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cifra { padding: 36px; border: 1px solid var(--kw-borde); border-radius: 22px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.cifra__num { font-size: 88px; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--kw-texto); }
.cifra__num--marca { color: var(--kw-marca); }
.cifra__txt { font-size: 17px; color: var(--kw-texto-suave); }
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
/* El valor final es el de partida: sin animación (o sin @property) se ve la cifra. */
.count { --n: var(--to); counter-reset: n var(--n); }
.count::after { content: counter(n); }
.c4 { --to: 4; } .c43 { --to: 43; } .c5 { --to: 5; }
@media (prefers-reduced-motion: no-preference) {
    .count { animation: count 2.2s cubic-bezier(.2, .8, .2, 1) both .6s; }
    @keyframes count { from { --n: 0; } }
}

/* ── Qué hace: 4 tarjetas (4 → 2+2 → 1) ────────────────────────────── */
.funciones .contenedor { padding-top: 64px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 44px; }
.seccion__cabecera { display: flex; flex-direction: column; gap: 14px; max-width: 840px; }
.seccion__cabecera h2 { font-size: clamp(34px, 4.2vw, 60px); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.funciones__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.feat {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px;
    border: 1px solid var(--kw-borde); border-radius: var(--kw-radio-l); background: #fff;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s;
}
.feat::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--kw-marca); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.7, 0, .2, 1); border-radius: 3px 3px 0 0; }
.feat:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -34px rgba(14, 16, 32, .45); border-color: var(--kw-marca-borde); }
.feat:hover::before { transform: scaleX(1); }
.feat__num { font: 500 13px var(--kw-fuente-mono); color: var(--kw-gris); }
.ico { width: 36px; height: 36px; color: var(--kw-marca); stroke-width: 1.7; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.feat:hover .ico { transform: rotate(-8deg) scale(1.1); }
.feat__titulo { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.feat__texto { font-size: 16px; line-height: 1.6; color: var(--kw-texto-suave); }

/* ── El proceso: «Cada keyword encuentra su página» ───────────────────── */
.proceso-seccion .contenedor { padding-top: 56px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 48px; }
.proceso__cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.seccion__cabecera--izq { max-width: 860px; }
.proceso__intro { max-width: 340px; font-size: 17px; line-height: 1.6; color: var(--kw-texto-suave); }
.proceso__nota { margin-top: -24px; font-size: 13px; color: var(--kw-gris); }
.proceso { container-type: inline-size; display: flex; flex-direction: column; gap: 28px; }
.proceso__marco { position: relative; border: 1px solid var(--kw-borde); border-radius: var(--kw-radio-xl); background: rgba(255, 255, 255, .72); overflow: hidden; }

/* Lista de pasos (pantallas medianas y móviles) */
.proceso__lista { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.proceso__lista li { display: flex; flex-direction: column; gap: 4px; }
.proceso__lista b, .step b { font: 600 12px var(--kw-fuente-mono); color: var(--kw-marca); letter-spacing: .14em; }
.proceso__lista strong, .step strong { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.proceso__lista span, .step span { font-size: 14.5px; line-height: 1.5; color: var(--kw-texto-suave); }

/* Lienzo ancho: 1264 × 940 (capa de 1228 a 36 px del borde, como el diseño) */
.lienzo { position: absolute; left: 0; top: 0; width: 1264px; height: 940px; transform-origin: 0 0; }
.lienzo__capa { position: absolute; left: 36px; top: 0; width: 1228px; height: 940px; }
.lienzo__pistas { position: absolute; left: 0; top: 0; max-width: none; }
.step { position: absolute; left: 0; width: 260px; display: flex; flex-direction: column; gap: 5px; }
.step--1 { top: 26px; } .step--2 { top: 156px; } .step--3 { top: 292px; }
.step--4 { top: 482px; } .step--5 { top: 618px; } .step--6 { top: 806px; }

.gate { stroke: #C9CDDD; stroke-width: 2; stroke-dasharray: 10 8; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.track-line { stroke: #EEE9FA; stroke-width: 2; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 2.6s cubic-bezier(.6, 0, .2, 1) forwards .2s; }
.track-line--fuera { stroke: #FCA5A5; stroke-dasharray: 5 6; }

.chipk { position: absolute; padding: 7px 12px; border: 1px solid var(--kw-borde); border-radius: var(--kw-radio-total); background: #fff; font: 500 13px var(--kw-fuente-mono); color: var(--kw-texto-suave); white-space: nowrap; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.chipk--fuera { color: var(--kw-gris); }
.chipk--1 { left: 318px; top: 24px; }
.chipk--2 { left: 574px; top: 30px; animation-delay: -1s; }
.chipk--3 { left: 776px; top: 22px; animation-delay: -2s; }
.chipk--4 { left: 986px; top: 32px; animation-delay: -3s; }

.bin { position: absolute; left: 1124px; top: 236px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px dashed #FCA5A5; border-radius: var(--kw-radio-m); background: #FFF5F5; font: 500 12.5px var(--kw-fuente-mono); color: var(--kw-error-texto); animation: binp 1.6s ease-out infinite .4s; }
.bin__icono { width: 14px; height: 14px; }
@keyframes binp { 0% { transform: scale(1.1); } 30%, 100% { transform: none; } }

.lens { position: absolute; left: 330px; top: 300px; width: 820px; height: 60px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1.5px solid var(--kw-marca-borde); border-radius: 16px; background: var(--kw-marca-fondo); overflow: hidden; }
.lens::after { content: ""; position: absolute; top: 0; bottom: 0; width: 140px; left: -140px; background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .2), transparent); animation: scan 3.6s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes scan { to { left: 100%; } }
.lens > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-right: 1px dashed #E4DAFB; font: 600 12.5px var(--kw-fuente-mono); color: var(--kw-marca); }
.lens > div:last-child { border-right: 0; }
.lens > div span { font-weight: 400; color: var(--kw-texto-tenue); font-size: 11.5px; }

.clu { position: absolute; top: 500px; width: 190px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 16px; background: #fff; border: 1.5px solid var(--kw-borde); font: 600 14.5px var(--kw-fuente); animation: glow 3.6s ease-in-out infinite; }
@keyframes glow { 0%, 50%, 86%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); border-color: var(--kw-borde); } 64% { box-shadow: 0 0 0 9px rgba(124, 58, 237, .14); border-color: var(--c); } }
.clu small { font: 500 12px var(--kw-fuente-mono); color: var(--kw-texto-tenue); }
.clu--1 { left: 325px; --c: #7C3AED; animation-delay: -1.51s; }
.clu--2 { left: 545px; --c: #7C3AED; animation-delay: .29s; }
.clu--3 { left: 765px; --c: #DB2777; animation-delay: -.61s; }
.clu--4 { left: 985px; --c: #0284C7; animation-delay: 1.19s; }

.prio { position: absolute; top: 634px; padding: 6px 12px; border-radius: var(--kw-radio-total); font: 600 12.5px var(--kw-fuente-mono); color: #fff; white-space: nowrap; animation: popin 3.6s ease infinite; }
@keyframes popin { 0%, 68% { transform: scale(1); } 74% { transform: scale(1.18); } 80%, 100% { transform: scale(1); } }
.prio--1 { left: 372px; background: #7C3AED; animation-delay: -.7s; }
.prio--2 { left: 592px; background: #7C3AED; animation-delay: -2.5s; }
.prio--3 { left: 800px; background: #DB2777; animation-delay: .2s; }
.prio--4 { left: 1030px; background: #0284C7; animation-delay: -1.6s; }

.page { position: absolute; top: 822px; width: 200px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--kw-borde); font: 600 14px var(--kw-fuente-mono); color: var(--kw-texto); animation: hit 3.6s ease-out infinite; transition: transform .3s, box-shadow .3s, border-color .3s; }
.page:hover { transform: translateY(-4px); border-color: var(--kw-marca); box-shadow: 0 16px 36px -20px rgba(124, 58, 237, .6); }
.page small { display: block; margin-top: 4px; font-weight: 500; font-size: 12px; color: var(--kw-texto-tenue); }
@keyframes hit { 0% { border-color: var(--c); box-shadow: 0 0 0 7px rgba(124, 58, 237, .13); } 30%, 100% { border-color: var(--kw-borde); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); } }
.fillbar { margin-top: 10px; height: 6px; border-radius: 9px; background: #F0EEF6; overflow: hidden; }
.fillbar i { display: block; height: 100%; border-radius: 9px; background: var(--c); transform-origin: left; animation: fill 1.8s cubic-bezier(.2, .8, .2, 1) both 1s; }
@keyframes fill { from { transform: scaleX(0); } }
.page--1 { left: 320px; --c: #7C3AED; }
.page--2 { left: 540px; --c: #7C3AED; animation-delay: 1.8s; }
.page--3 { left: 760px; --c: #DB2777; animation-delay: .9s; }
.page--4 { left: 980px; --c: #0284C7; animation-delay: 2.7s; }
.page--1 .fillbar i, .page--4 .fillbar i { width: 100%; }
.page--2 .fillbar i { width: 80%; }
.page--3 .fillbar i { width: 55%; }

/* Bolitas: siguen su pista (offset-path) con los tiempos del diseño. Los
   retrasos van en .pk.pk--N para ganar a .pk.keep / .pk.drop (en el diseño
   iban en línea). */
.pk { position: absolute; left: 0; top: 0; width: 12px; height: 12px; offset-anchor: 50% 50%; border-radius: 50%; background: var(--kw-gris); box-shadow: 0 0 0 4px rgba(154, 160, 184, .16); offset-rotate: 0deg; opacity: 0; }
.pk.keep { animation: flowK 7.2s linear infinite; }
.pk.drop { animation: flowD 4.8s linear infinite; }
@keyframes flowK { 0% { offset-distance: 0%; opacity: 0; background: #9AA0B8; transform: scale(1); } 6% { opacity: 1; } 35% { background: #9AA0B8; transform: scale(1); } 39% { background: var(--c); transform: scale(1.5); } 45% { transform: scale(1); } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; background: var(--c); } }
@keyframes flowD { 0% { offset-distance: 0%; opacity: 0; background: #9AA0B8; } 8% { opacity: 1; } 12% { background: #9AA0B8; } 18% { background: #F87171; } 88% { opacity: .8; } 100% { offset-distance: 100%; opacity: 0; background: #F87171; } }
.pk.pk--1 { --c: #7C3AED; offset-path: path("M 360 84 L 360 300 L 360 360 C 360 430, 420 430, 420 500 L 420 556 L 420 822"); animation-delay: 0s; }
.pk.pk--2 { --c: #7C3AED; offset-path: path("M 470 84 L 470 300 L 470 360 C 470 430, 420 430, 420 500 L 420 556 L 420 822"); animation-delay: 3.6s; }
.pk.pk--3 { --c: #7C3AED; offset-path: path("M 560 84 L 560 300 L 560 360 C 560 430, 640 430, 640 500 L 640 556 L 640 822"); animation-delay: 1.8s; }
.pk.pk--4 { --c: #7C3AED; offset-path: path("M 690 84 L 690 300 L 690 360 C 690 430, 640 430, 640 500 L 640 556 L 640 822"); animation-delay: 5.4s; }
.pk.pk--5 { --c: #DB2777; offset-path: path("M 780 84 L 780 300 L 780 360 C 780 430, 860 430, 860 500 L 860 556 L 860 822"); animation-delay: .9s; }
.pk.pk--6 { --c: #DB2777; offset-path: path("M 900 84 L 900 300 L 900 360 C 900 430, 860 430, 860 500 L 860 556 L 860 822"); animation-delay: 4.5s; }
.pk.pk--7 { --c: #0284C7; offset-path: path("M 990 84 L 990 300 L 990 360 C 990 430, 1080 430, 1080 500 L 1080 556 L 1080 822"); animation-delay: 2.7s; }
.pk.pk--8 { --c: #0284C7; offset-path: path("M 1100 84 L 1100 300 L 1100 360 C 1100 430, 1080 430, 1080 500 L 1080 556 L 1080 822"); animation-delay: 6.3s; }
.pk.pk--d1 { offset-path: path("M 420 84 L 420 180 C 420 215, 1170 200, 1190 236"); animation-delay: .4s; }
.pk.pk--d2 { offset-path: path("M 740 84 L 740 180 C 740 215, 1170 205, 1190 236"); animation-delay: 2s; }
.pk.pk--d3 { offset-path: path("M 1040 84 L 1040 180 C 1040 215, 1170 210, 1190 236"); animation-delay: 3.6s; }

/* Lienzo del móvil: 360 × 660, dos carriles. Tiempos recalculados para que
   cada bolita encienda su grupo, su prioridad y su página al llegar. */
.lienzo-m { position: absolute; left: 50%; top: 12px; width: 360px; height: 660px; transform-origin: 50% 0; }
.lienzo-m .chipk { padding: 5px 10px; font-size: 11px; }
.chipk-m--1 { left: 0; top: 6px; }
.chipk-m--2 { left: 150px; top: 44px; animation-delay: -2s; }
.chipk-m--3 { right: 0; top: 6px; animation-delay: -3s; }
.bin-m { left: 276px; top: 196px; padding: 6px 9px; gap: 6px; font-size: 11px; }
.lens-m { left: 0; top: 236px; width: 360px; height: 56px; }
.lens-m > div { font-size: 11.5px; }
.lens-m > div span { font-size: 10px; }
.lens-m::after { width: 80px; left: -80px; }
.lienzo-m .clu { top: 372px; width: 170px; height: 52px; font-size: 13.5px; }
.clu-m--1 { left: 0; --c: #7C3AED; animation-delay: -1.16s; }
.clu-m--2 { left: 190px; --c: #0284C7; animation-delay: .64s; }
.lienzo-m .prio { top: 456px; font-size: 12px; translate: -50% 0; }
.prio-m--1 { left: 85px; background: #7C3AED; animation-delay: -.4s; }
.prio-m--2 { left: 275px; background: #0284C7; animation-delay: -2.21s; }
.lienzo-m .page { top: 560px; width: 170px; padding: 12px 14px; font-size: 13px; }
.page-m--1 { left: 0; --c: #7C3AED; }
.page-m--2 { left: 190px; --c: #0284C7; animation-delay: 1.8s; }
.lienzo-m .fillbar i { width: 100%; }
.pk.pk-m--1 { --c: #7C3AED; offset-path: path("M 55 84 L 55 292 C 55 332, 85 332, 85 372 L 85 420 L 85 560"); animation-delay: 0s; }
.pk.pk-m--2 { --c: #7C3AED; offset-path: path("M 115 84 L 115 292 C 115 332, 85 332, 85 372 L 85 420 L 85 560"); animation-delay: 3.6s; }
.pk.pk-m--3 { --c: #0284C7; offset-path: path("M 245 84 L 245 292 C 245 332, 275 332, 275 372 L 275 420 L 275 560"); animation-delay: 1.8s; }
.pk.pk-m--4 { --c: #0284C7; offset-path: path("M 305 84 L 305 292 C 305 332, 275 332, 275 372 L 275 420 L 275 560"); animation-delay: 5.4s; }
.pk.pk-m--d1 { offset-path: path("M 85 84 L 85 150 C 85 178, 300 172, 318 196"); animation-delay: .4s; }
.pk.pk-m--d2 { offset-path: path("M 180 84 L 180 150 C 180 178, 300 176, 318 196"); animation-delay: 2s; }
.pk.pk-m--d3 { offset-path: path("M 275 84 L 275 150 C 275 178, 305 180, 318 196"); animation-delay: 3.6s; }

/* Tres tamaños, según el ancho del propio bloque (container queries):
   - 1100 px o más: el diagrama del diseño, con sus pasos, escalado si hace falta;
   - 720-1099 px: pasos en lista y diagrama de cuatro carriles sin la columna
     de texto, ajustado al ancho;
   - menos de 720 px: pasos en lista y diagrama de dos carriles.
   La escala (--k) es ancho disponible / ancho del diseño; tan(atan2(a, b))
   devuelve a / b como número. Sin esa función, se ve a tamaño fijo. */
.proceso__marco--ancho { --k: 1; height: calc(940px * var(--k)); }
.proceso__marco--ancho .lienzo { transform: scale(var(--k)); }
.proceso__marco--movil { --k: 1; display: none; height: calc(660px * var(--k) + 24px); }
.proceso__marco--movil .lienzo-m { transform: translateX(-50%) scale(var(--k)); }
@supports (width: calc(1px * tan(atan2(1px, 2px)))) {
    .proceso__marco--ancho { --k: min(1, tan(atan2(calc(100cqw - 2px), 1264px))); }
}
@container (max-width: 1099px) {
    .proceso__lista { display: grid; }
    .proceso__marco--ancho { --k: .8; overflow-x: auto; }
    .proceso__marco--ancho .step { display: none; }
    .proceso__marco--ancho .lienzo { transform: scale(var(--k)) translateX(-336px); }
    @supports (width: calc(1px * tan(atan2(1px, 2px)))) {
        .proceso__marco--ancho { --k: min(1.15, tan(atan2(calc(100cqw - 2px), 928px))); overflow-x: hidden; }
    }
}
@container (max-width: 719px) {
    .proceso__lista { grid-template-columns: 1fr; gap: 14px; }
    .proceso__lista li { display: grid; grid-template-columns: 36px 1fr; column-gap: 8px; }
    .proceso__lista b { grid-row: span 2; padding-top: 5px; }
    .proceso__lista strong { font-size: 18px; }
    .proceso__marco--ancho { display: none; }
    .proceso__marco--movil { display: block; }
    @supports (width: calc(1px * tan(atan2(1px, 2px)))) {
        .proceso__marco--movil { --k: min(1.5, tan(atan2(calc(100cqw - 26px), 360px))); }
    }
}

/* ── Cierre violeta ───────────────────────────────────────────────────── */
.cierre .contenedor { padding-left: 48px; padding-right: 48px; }
.cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 88px 96px; background: var(--kw-marca-oscura); color: #fff; border-radius: 32px; }
.cta__fondo { position: absolute; right: 60px; top: -60px; width: 360px; height: 360px; opacity: .12; }
.cta__fondo path { fill: #fff !important; }
.cta__texto { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.cta__texto h2 { max-width: 9.8em; font-size: clamp(36px, 4.2vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #fff; } /* 9.8em: corta «La frontera todavía / está cerrada.» como lo escribió Joan */
.cta__texto p { font-size: 19px; line-height: 1.6; color: #EDE4FE; }
.cta__boton { position: relative; flex: none; height: 58px; padding: 0 28px; background: #fff; color: var(--kw-marca-profunda); }
.cta__boton:hover { background: #F3EEFF; color: var(--kw-marca-profunda); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .4); }

/* ── Preguntas frecuentes (siempre visibles: nada de texto oculto) ──── */
.faq .contenedor { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 40px; }
/* 4 preguntas: 2+2 en escritorio, una columna en el móvil. */
.faq__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.faq__item { padding: 28px; border: 1px solid var(--kw-borde); border-radius: var(--kw-radio-l); background: #fff; }
.faq__pregunta { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; margin-bottom: 10px; }
.faq__respuesta { font-size: 16px; line-height: 1.65; color: var(--kw-texto-suave); }

/* ── Legales y errores ────────────────────────────────────────────────── */
.pagina-cabecera .contenedor { padding-top: 72px; padding-bottom: 40px; }
.migas { display: flex; gap: 8px; margin-bottom: 18px; font: 500 13px var(--kw-fuente-mono); color: var(--kw-texto-tenue); }
.migas a { color: var(--kw-texto-tenue); text-decoration: none; }
.migas a:hover { color: var(--kw-texto); }
.pagina-cabecera h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.pagina-cabecera p { margin-top: 12px; font: 500 13px var(--kw-fuente-mono); color: var(--kw-texto-tenue); }
.legal { max-width: 880px; margin: 0 0 104px; padding: 48px 56px; background: #fff; border: 1px solid var(--kw-borde); border-radius: var(--kw-radio-l); }
.legal h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { line-height: 1.75; color: var(--kw-texto-suave); }
.legal p { margin-bottom: 14px; }
.legal strong { color: var(--kw-texto); }
.legal ul { margin: 0 0 16px 22px; padding: 0; list-style: disc; }
.legal ul ul { margin: 6px 0 6px 20px; list-style: circle; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal__pie { margin-top: 40px; }
.legal .boton-fantasma { display: inline-block; text-decoration: none; }
.error .contenedor { padding-top: 120px; padding-bottom: 120px; text-align: center; }
.error__codigo { font-size: 120px; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--kw-marca); }
.error h1 { margin: 16px 0 10px; font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
.error p { color: var(--kw-texto-suave); }
.error__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie { margin-top: 24px; background: #fff; border-top: 1px solid var(--kw-rejilla); }
.pie__fila { padding-top: 56px; padding-bottom: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; font-size: 14px; color: var(--kw-texto-tenue); }
.pie__marca { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pie__logo { width: 22px; height: 22px; }
.pie__firma { display: inline-flex; }
/* La firma de SoftwaLabs es blanca: en el pie claro se pinta oscura. */
.pie__firma img { filter: brightness(0); opacity: .55; transition: opacity .2s; }
.pie__firma:hover img { opacity: .9; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 24px; }
.pie__legal a { color: var(--kw-texto-tenue); text-decoration: none; }
.pie__legal a:hover { color: var(--kw-texto); }

/* ── Toasts (arriba a la derecha, fondo opaco) ────────────────────────── */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 400; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px;
    background: #fff; border: 1px solid var(--kw-borde); border-left: 4px solid var(--kw-marca);
    border-radius: var(--kw-radio-m); box-shadow: var(--kw-sombra-toast); color: var(--kw-texto);
    font-size: 15px; line-height: 1.5; pointer-events: auto; animation: entrar-derecha .25s ease both;
}
.toast p { margin: 0; }
.toast--ok { border-left-color: var(--kw-ok); }
.toast--ok .toast__icono { color: var(--kw-ok); }
.toast--error { border-left-color: var(--kw-error); }
.toast--error .toast__icono { color: var(--kw-error); }
.toast__icono { margin-top: 3px; }
.toast__texto { flex: 1; }
.toast__cerrar { background: none; border: 0; color: var(--kw-texto-tenue); cursor: pointer; padding: 2px; }
.toast__cerrar:hover { color: var(--kw-texto); }
.toast--saliendo { animation: salir .2s ease both; }
@keyframes entrar-derecha { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes salir { to { opacity: 0; transform: translateX(16px); } }

/* ── Adaptación a pantallas ───────────────────────────────────────────── */
@media (max-width: 1200px) {
    :root { --kw-margen: 48px; }
    .funciones__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cta { padding: 64px 56px; }
}
@media (max-width: 900px) {
    :root { --kw-margen: 32px; }
    .proceso__cabecera { flex-direction: column; align-items: flex-start; gap: 16px; }
    .terminal__cuerpo { grid-template-columns: 1fr; gap: 24px; }
    .cta { flex-direction: column; align-items: flex-start; gap: 28px; }
    .cierre .contenedor { padding-left: var(--kw-margen); padding-right: var(--kw-margen); }
}
@media (max-width: 720px) {
    :root { --kw-margen: 16px; --kw-cabecera: 64px; }
    .cabecera__nav { display: none; }
    .cabecera__menu { display: inline-flex; }
    .marca__logo { width: 28px; height: 28px; }
    .marca__nombre { font-size: 21px; }
    .hero__centro { padding-top: 48px; padding-bottom: 48px; gap: 20px; }
    .hero__lema { font-size: 12px; letter-spacing: .18em; }
    .hero__titular { line-height: 1.02; }
    .titular__linea--1::after { content: " "; white-space: normal; }
    .hero__subtitulo { font-size: 17px; }
    .hero__agencia { font-size: 16px; margin-top: -8px; }
    .pillform { flex-wrap: wrap; }
    .pillform input { flex-basis: calc(100% - 40px); }
    .pillform .btn { width: 100%; }
    .check { font-size: 13.5px; }
    .enviado { flex-direction: column; text-align: center; }
    .demo .contenedor { padding-top: 16px; padding-bottom: 56px; }
    .terminal { border-radius: 18px; }
    .terminal__cuerpo { padding: 20px 18px 24px; }
    .term { font-size: 12.5px; line-height: 1.85; }
    .terminal__linea { overflow-wrap: anywhere; }
    .meter { width: 90px; }
    .caret { height: 15px; width: 7px; }
    .cifras__rejilla { padding-top: 8px; padding-bottom: 56px; gap: 10px; }
    .cifra { padding: 18px 14px; border-radius: 16px; gap: 6px; }
    .cifra__num { font-size: 44px; }
    .cifra__txt { font-size: 13px; line-height: 1.35; }
    .funciones .contenedor { padding-top: 32px; padding-bottom: 56px; gap: 28px; }
    .funciones__rejilla { grid-template-columns: 1fr; gap: 14px; }
    .feat { padding: 24px 22px; }
    .proceso-seccion .contenedor { padding-top: 32px; padding-bottom: 64px; gap: 32px; }
    .proceso__nota { margin-top: -16px; }
    .proceso__marco { border-radius: 20px; }
    .cta { padding: 44px 24px; border-radius: 24px; }
    .cta__fondo { width: 220px; height: 220px; right: -40px; top: -40px; }
    .cta__texto p { font-size: 17px; }
    .cta__boton { width: 100%; }
    .faq .contenedor { padding-top: 64px; padding-bottom: 64px; gap: 28px; }
    .faq__lista { grid-template-columns: 1fr; gap: 14px; }
    .faq__item { padding: 22px; }
    .faq__pregunta { font-size: 18px; }
    .pagina-cabecera .contenedor { padding-top: 40px; padding-bottom: 24px; }
    .legal { padding: 28px 20px; margin-bottom: 56px; }
    .pie__fila { flex-direction: column; align-items: center; text-align: center; padding-top: 36px; padding-bottom: 36px; }
    .pie__marca { justify-content: center; }
    .pie__legal { justify-content: center; }
    .toasts { top: 12px; right: 12px; left: 12px; width: auto; }
}

/* ── Sin animaciones si la persona lo pide: todo se ve completo y quieto ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .type { width: 28ch; }
    .track-line { stroke-dashoffset: 0; }
    .hl { background-size: 100% 100%; }
    .ring { background: linear-gradient(90deg, var(--kw-marca), #E046F0); }
    .ring.is-valid { background: var(--kw-ok); }
    .ring.is-error { background: var(--kw-error); }
    .done-circle, .done-check { stroke-dashoffset: 0; }
}