/* OpenWAF — sitio público (openwaf.dev). Sistema de la web de OpenMasu (web/landing/css/home.css, inner.css y
   legal.css del repo de OpenMasu, medidos en openmasu.com el 2026-10-24) con la paleta de OpenWAF: cobalto #2456e8 como
   único color de marca, papel frío #f5f6f8, tinta #1a2030 y fondos de tarjeta noche, brasa, petróleo, niebla y glaciar.
   Alturas a 1440 px como en OpenMasu: cabecera 67 · banda 56 · carrusel 712 (seis diapositivas) · bloques de 96 px.
   Tipografía: Inter variable (OFL; subconjunto latino) con los pesos 420 / 460 / 500 / 600 / 700, JetBrains Mono en el
   código. Sin estilos en línea (CSP `style-src 'self'`): las escenas y posiciones van por clase y build.py cambia las
   rutas de /fonts/ e /img/ por las versiones con huella. */

@font-face { font-family: "Inter"; src: url(/fonts/inter-variable-ea94f85fc14285de.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono-400-14425ba9c695763c.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono-500-cb182feeed4d798f.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #1a2030;
  --text: #333a4a;
  --muted: rgb(16 22 36 / .64);
  --page: #f5f6f8;
  --line: rgb(96 106 128 / .2);
  --tint: #e4ecff;
  --tint-btn: #c9d9ff;
  --tint-hover: #b6caff;
  --brand: #2456e8;
  --brand-hover: #1b45c4;
  --navy: #0c1733;
  --ember: #3b1a1c;
  --petrol: #0b3540;
  --fog: #dde2ea;
  --dark: #0f121a;
  --night: #10141f;
  --card: #eceef2;
  --ok: #1f7a4a;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --codigo: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sombra-s: 0 1px 3px rgb(10 20 40 / .08), 0 0 0 1px rgb(96 106 128 / .12);
  --sombra-m: 0 8px 24px -8px rgb(10 20 40 / .14), 0 0 0 1px rgb(96 106 128 / .14);
  --sombra-l: 0 24px 48px -16px rgb(10 20 40 / .18), 0 0 0 1px rgb(96 106 128 / .12);
  --sombra-v: 0 30px 60px -12px rgb(8 16 40 / .38), 0 12px 24px -8px rgb(8 16 40 / .2), 0 0 0 1px rgb(255 255 255 / .45);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--ink); font: 460 16px/19.2px var(--fuente); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
h1, h2, h3, p, ul, ol, dl, figure, address { margin: 0; }
h1, h2, h3, .tx { text-wrap: balance; }
p, li, figcaption, dd { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code, kbd { font-family: var(--codigo); font-size: .88em; }
::selection { background: var(--tint-btn); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.car :focus-visible, .emp :focus-visible, .cierre :focus-visible, .pie :focus-visible, .aside.oscura :focus-visible, .mc.oscura :focus-visible { outline-color: #fff; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; background: #fff; border-radius: 8px; box-shadow: var(--sombra-m); }
.saltar:focus { top: 12px; }
.cw { max-width: 1440px; margin: 0 auto; padding: 0 80px; }
.chev { width: 16px; height: 16px; flex: none; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.soon { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--tint); color: var(--brand); font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }

/* ── Marca ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Marca: hexágono de tres capas (build.py → mark()). Las caras van del color del texto; la derecha, al 72 %. */
.marca { flex: none; }
.mk-l, .mk-r { fill: currentColor; }
.mk-r { fill-opacity: .72; }
.logo { display: inline-flex; align-items: center; gap: 8px; height: 26px; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: .14em; white-space: nowrap; }
.logo .marca { width: 26px; height: 26px; color: var(--brand); }
.logo.claro, .logo.claro .marca { color: #fff; }

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 30; height: 67px; background: #fff; border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; height: 66px; }
.hdr .logo { width: 167px; }
.hdr-nav { margin-left: 32px; }
.hdr-nav ul { display: flex; gap: 8px; }
.hdr-nav a { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 8px; border-radius: 8px; font-size: 16px; line-height: 24px; }
.hdr-nav a:hover, .hdr-nav a[aria-current="page"] { background: rgb(127 127 127 / .1); }
.hdr-r { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hdr-txt { font-size: 16px; line-height: 19.2px; }
.hdr-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 6px 16px; border-radius: 8px; font-size: 14px; line-height: 18px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.hdr-btn:hover { background: rgb(127 127 127 / .08); }
.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.burger span { width: 22px; height: 2px; background: var(--ink); transition: transform .25s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-enlace { display: none; height: 40px; align-items: center; font-size: 16px; font-weight: 600; }
.menu-movil { display: none; }

.ban { background: var(--tint); min-height: 56px; }
.ban a { min-height: 56px; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: 16px; line-height: 19.2px; text-align: center; }
.ban u { text-underline-offset: 3px; margin-left: 2px; white-space: nowrap; }
@media (max-width: 640px) { .ban a { font-size: 14px; line-height: 18px; } }
.ban .chev { margin-left: 2px; }

/* ── Botones ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.b-claro { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 8px; background: var(--tint-btn); color: var(--ink); font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.b-claro:hover { background: var(--tint-hover); }
.b-claro.g { height: 52px; padding: 0 20px; border-radius: 12px; font-size: 16px; line-height: 16px; }
.b-texto { display: inline-flex; align-items: center; gap: 4px; height: 36px; color: var(--tint-btn); font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.b-texto:hover { text-decoration: underline; text-underline-offset: 4px; }
.b-prim { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 16px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.b-prim:hover { background: var(--brand-hover); }
.b-tinte { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: 12px; background: var(--tint); color: var(--ink); font-size: 16px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.b-tinte:hover { background: var(--tint-btn); }
.b-sec { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px; border-radius: 8px; color: var(--brand); font-size: 16px; line-height: 16px; font-weight: 600; }
.b-sec:hover { text-decoration: underline; text-underline-offset: 4px; }
.b-borde { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 20px; border-radius: 12px; color: var(--tint-btn); font-size: 16px; line-height: 16px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--tint-btn); white-space: nowrap; }
.b-borde:hover { background: rgb(255 255 255 / .08); }
.b-prim .ico, .b-tinte .ico { width: 18px; height: 18px; }

/* ── Hero: carrusel ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Seis diapositivas (OpenMasu tiene tres) bajo un titular fijo con subtítulo: 760 px de alto y filas de 48 px para que
   el texto (hasta cuatro líneas de subtítulo en español) no toque la lista. */
.car { --c: #1c54a0; height: 760px; position: relative; color: #fff; background: linear-gradient(to right, var(--dark) 50%, var(--c) 50%); transition: background .6s; }
.car-caja { position: relative; height: 100%; }
.car-textos { position: absolute; left: 80px; top: 40px; width: min(624px, calc(50% - 96px)); }
/* Titular fijo (OpenMasu cambia el titular con cada diapositiva; aquí solo cambian el vídeo y la fila). */
.car-t { font-size: 52px; line-height: 60px; font-weight: 420; letter-spacing: -1.5px; color: #fff; }
.car-sub { margin-top: 20px; max-width: 580px; font-size: 18px; line-height: 27px; font-weight: 460; letter-spacing: -.135px; color: rgb(255 255 255 / .72); }
@media (min-width: 1181px) and (max-width: 1359px) { .car-t { font-size: 44px; line-height: 52px; letter-spacing: -1.2px; } .car-sub { font-size: 17px; line-height: 25px; } }
.car-btns { margin-top: 24px; display: flex; align-items: center; gap: 16px; }
.car-nota { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(255 255 255 / .64); }
.car-nota .ico { width: 16px; height: 16px; color: var(--tint-btn); stroke-width: 2.4; }
.car-lista { position: absolute; left: 80px; bottom: 0; width: min(640px, calc(50% - 80px)); }
.car-et { margin-bottom: 24px; font-size: 14px; line-height: 16.8px; font-weight: 500; color: rgb(255 255 255 / .8); }
.car-fila { display: flex; align-items: center; width: 100%; height: 48px; padding: 0 32px; border-top: 1px solid rgb(255 255 255 / .2); text-align: left; font-size: 14px; line-height: 16.8px; font-weight: 500; color: rgb(255 255 255 / .8); transition: color .3s, background .3s; }
.car-fila:hover, .car-fila[aria-selected="true"] { color: #fff; }
.car-fila[aria-selected="true"] { background: rgb(255 255 255 / .07); }
.car-fila[aria-selected="false"] .car-ico { background: rgb(255 255 255 / .55); }
.car-fila b { width: 84px; margin-left: 12px; font-weight: 500; flex: none; }
.car-fila span:last-child { margin-left: 12px; }
.car-ico { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: #fff; color: var(--dark); transition: background .3s; }
.car-ico .ico { width: 16px; height: 16px; stroke-width: 2; }
.car-panel { position: absolute; left: 50%; top: 0; width: min(640px, calc(50% - 80px)); height: 760px; overflow: hidden; }
.car-medio { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.car-medio[aria-hidden="false"] { opacity: 1; visibility: visible; }
.car-medio video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left top; }
/* Fondo de cada diapositiva mientras carga su vídeo: el color medio de arriba y de abajo de su fluido (promo/). */
.v-dns { background: linear-gradient(#43a0c2, #1b3e75); }
.v-waf { background: linear-gradient(#752839, #4547ad); }
.v-gate { background: linear-gradient(#062e33, #2456e8); }
.v-ctl { background: linear-gradient(#183d95, #296eea); }
.v-revert { background: linear-gradient(#623e77, #7058c3); }
.v-tls { background: linear-gradient(#0f3d62, #2070c0); }
.v-reglas { background: linear-gradient(#3b384d, #6f4b5a); }
.v-nodos { background: linear-gradient(#3775da, #2d71be); }
.v-firma { background: linear-gradient(#6379cd, #6172ac); }

/* ── Pilas (equivale a la rejilla de logos) ───────────────────────────────────────────────────────────────────── */
.pilas { background: var(--page); padding: 96px 0; }
.pilas p { text-align: center; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -.12px; color: var(--muted); }
.rejilla { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rejilla li { height: 81px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 18px; line-height: 21.6px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-align: center; }
.rejilla svg { width: 24px; height: 24px; flex: none; }
.rejilla .logo-marca { fill: currentColor; stroke: none; }

/* ── Bloques de producto ──────────────────────────────────────────────────────────────────────────────────────── */
.grupo { background: var(--page); padding: 96px 0; }
.enc { text-align: center; }
.lockup { display: inline-flex; align-items: center; gap: 10px; height: 36px; white-space: nowrap; }
.lockup-i { width: 36px; height: 36px; border-radius: 9px; background: var(--tint); display: grid; place-items: center; }
.lockup-i .marca { width: 26px; height: 26px; color: var(--brand); }
.lockup-m { font-size: 20px; line-height: 36px; font-weight: 700; letter-spacing: .14em; color: var(--navy); }
.lockup-p { font-size: 24px; line-height: 36px; font-weight: 420; color: var(--navy); }
.t49 { margin: 24px auto 0; max-width: 900px; font-size: 49px; line-height: 58.8px; font-weight: 420; letter-spacing: -1.3475px; color: var(--ink); }
.t49 span { color: var(--muted); }
@media (min-width: 641px) { .t49 span { display: inline-block; } }
.sub { margin: 24px auto 0; max-width: 900px; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -.135px; color: var(--muted); }
.sub b { color: var(--ink); font-weight: 600; }
.btns-c { margin-top: 48px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.bloques { margin-top: 96px; }
.par { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

.aside { position: relative; display: grid; border-radius: 12px; overflow: hidden; color: #fff; }
.aside.g { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); height: 329px; }
.aside.m { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 260px; }
.c-cobalto { background: var(--brand); }
.c-noche { background: var(--navy); }
.c-brasa { background: var(--ember); }
.c-petroleo { background: var(--petrol); }
.c-niebla { background: var(--fog); color: var(--ink); }
.c-glaciar { background: var(--tint); color: var(--ink); }
.a-txt { align-self: end; padding: 0 32px 32px; }
.et { font-size: 14px; line-height: 16.8px; font-weight: 500; color: rgb(255 255 255 / .8); }
.c-niebla .et, .c-glaciar .et { color: var(--muted); }
.a-txt .tx { margin-top: 12px; font-size: 25px; line-height: 30px; font-weight: 420; letter-spacing: -.6875px; }
.a-pic { position: relative; overflow: hidden; }
/* Escena de tarjeta: fondo pictórico del color de la tarjeta (tools/gen_texturas.py) + ventana flotante con el vídeo. */
.escena { position: absolute; inset: 0; overflow: hidden; background: center / cover no-repeat; }
.f-cobalto { background-image: url(/img/escena-cobalto-9a94b39d68eec20c.webp); }
.f-noche { background-image: url(/img/escena-noche-d95b1be49ea4f942.webp); }
.f-brasa { background-image: url(/img/escena-brasa-343235ea3213940e.webp); }
.f-petroleo { background-image: url(/img/escena-petroleo-88c644fd94290806.webp); }
.f-niebla { background-image: url(/img/escena-niebla-a3b3bbc21c3c1c1d.webp); }
.f-glaciar { background-image: url(/img/escena-glaciar-50344efa2e5c6105.webp); }
.ventana { position: absolute; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: var(--sombra-v); }
.ventana.osc { background: #0f1420; }
.ventana video { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
/* Posición de la ventana según el hueco (izquierda, arriba, ancho, alto), como FORMAS en la home de OpenMasu: a sangre
   por la derecha y por abajo en las tarjetas («g», «m»), centrada y entera en las de la cuadrícula («v», «o»). */
.forma-g { left: 7%; top: 13%; width: 86%; height: 100%; }
.forma-m { left: 12%; top: 14%; width: 100%; height: 100%; }
.forma-v { left: 8%; top: 9%; width: 84%; height: 82%; }
.forma-o { left: 8%; top: 8%; width: 84%; height: 44%; }
.forma-h { left: 7%; top: 14%; width: 100%; height: 100%; }
/* Encuadre de cada clip en su ventana (como ENCUADRE en la home de OpenMasu): ancho del vídeo respecto a la ventana y
   desplazamiento (en % del propio vídeo) para traer a la vista lo que cuenta la tarjeta. Medido mirando cada tarjeta. */
.z-bento-gate video { width: 160%; transform: translateX(-22%); }
.z-bento-reglas video, .z-bento-nodos video { width: 200%; }
.z-bento-certs video { width: 150%; transform: translateY(-14%); }
.z-bento-propagacion video { width: 150%; }
.z-bento-revert video { width: 130%; }

.tabs { position: relative; margin-top: 32px; display: flex; height: 60px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 36px; height: 59px; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -.135px; color: var(--muted); border-bottom: 2px solid transparent; flex: 1 1 auto; white-space: nowrap; transition: color .25s ease; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab:hover { color: var(--ink); }
.tabs.con-raya .tab[aria-selected="true"] { border-bottom-color: transparent; }
.tabs-raya { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink); border-radius: 2px; pointer-events: none; transition: transform .45s var(--ease), width .45s var(--ease); }
@keyframes tarj-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tarjs.entra .tarj { animation: tarj-entra .5s var(--ease) both; }
.tarjs.entra .tarj:nth-child(2) { animation-delay: .06s; }
.tarjs.entra .tarj:nth-child(3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .tabs-raya { transition: none; } .tarjs.entra .tarj { animation: none; } }
.tab-i { width: 20px; height: 20px; margin-right: 4px; }
.tarjs { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.tarjs[hidden] { display: none; }
.tarj { position: relative; min-height: 290px; padding: 32px; border-radius: 12px; background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 0 0 1px rgb(96 106 128 / .12); }
.tarj-i { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 18px; box-shadow: 0 0 0 1px rgb(255 255 255 / .7) inset; }
.tarj-i .ico { width: 30px; height: 30px; stroke-width: 1.7; }
.tarj-i.g1 { color: var(--brand); background: linear-gradient(135deg, #eef3ff, #c9d9ff); }
.tarj-i.g2 { color: var(--petrol); background: linear-gradient(135deg, #e2f1f1, #b3d8d8); }
.tarj-i.g3 { color: var(--ember); background: linear-gradient(135deg, #f7ebe8, #e7c7c0); }
.tarj h3 { margin-top: 16px; font-size: 25px; line-height: 30px; font-weight: 420; letter-spacing: -.6875px; }
.tarj h3 b { font-weight: 700; }
.tarj p { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -.12px; color: var(--muted); }
.tarj code { font-size: 14px; }

/* ── Declaración (equivale al testimonio) ─────────────────────────────────────────────────────────────────────── */
.cita { background: var(--tint); padding: 96px 0; text-align: center; }
.cita h2 { max-width: 920px; margin: 0 auto; font-size: 39px; line-height: 46.8px; font-weight: 420; letter-spacing: -1.0725px; }
.cita h2 b { font-weight: 700; }
.cita-n { margin-top: 27px; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -.135px; }
.cita-r { font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -.135px; color: var(--muted); }
.cita .b-sec { margin-top: 21px; }

/* ── Cuadrícula de tres tarjetas (equivale a «Bases») ─────────────────────────────────────────────────────────── */
.mg { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 230px 397px; gap: 32px; }
.mc { position: relative; overflow: hidden; border-radius: 12px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.mc.alta { grid-row: 1 / span 2; }
.mc-pic { position: relative; overflow: hidden; }
.mc.alta .mc-pic { height: 486px; }
.mc.sup .mc-pic { position: absolute; inset: 0; }
.mc.inf .mc-pic { height: 234px; }
.mc.sup .mc-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(12 23 51 / .96) 0%, rgb(12 23 51 / .6) 55%, transparent 100%); }
.mc-txt { position: relative; padding: 0 32px 32px; margin-top: auto; }
.mc-txt h3 { margin-top: 8px; font-size: 25px; line-height: 30px; font-weight: 420; letter-spacing: -.6875px; }
.mc.c-niebla, .mc.c-glaciar { color: var(--ink); }

/* ── Agencias (equivale a «equipos») ──────────────────────────────────────────────────────────────────────────── */
.emp { background: var(--navy); color: #fff; padding: 96px 0; }
.emp-in { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 672px); justify-content: space-between; gap: 32px; align-items: center; min-height: 378px; }
.emp-et { font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -.15px; color: rgb(255 255 255 / .8); }
.emp h2 { margin-top: 24px; font-size: 49px; line-height: 58.8px; font-weight: 420; letter-spacing: -1.3475px; }
.emp-p { margin-top: 24px; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -.135px; color: rgb(255 255 255 / .8); }
.emp-lista { margin-top: 28px; display: grid; gap: 12px; }
.emp-lista li { display: flex; gap: 10px; font-size: 16px; line-height: 24px; font-weight: 500; color: rgb(255 255 255 / .86); }
.emp-lista .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--tint-btn); stroke-width: 2.2; }
.emp-lista code { color: #fff; }
.btns-l { margin-top: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.emp-pic { position: relative; height: 378px; border-radius: 12px; overflow: hidden; background: #0a1430; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 30px 60px -20px rgb(0 0 0 / .5); }
.emp-pic video { width: 100%; height: 100%; object-fit: cover; }
.emp-pronto { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgb(255 255 255 / .16); display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; }
.emp-pronto h3 { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .64); }
.emp-pronto ul { display: flex; flex-wrap: wrap; gap: 10px; }
/* Bloque en línea (no flex): con flex se perdía el espacio entre el texto y el <code> («Web dashboard atapp…»). */
.emp-pronto li { display: inline-block; height: 34px; padding: 0 14px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); font-size: 14px; line-height: 34px; font-weight: 500; color: rgb(255 255 255 / .86); white-space: nowrap; }
.emp-pronto code { color: #fff; font-size: 13px; }

/* ── Preguntas ────────────────────────────────────────────────────────────────────────────────────────────────── */
.faq-s { background: var(--page); padding: 96px 0; }
.faq-s.blanco { background: #fff; }
.faq-s .t49 { margin-top: 16px; }
.etq { font-size: 14px; line-height: 16.8px; font-weight: 500; color: var(--muted); }
.enc .etq { text-align: center; }
.preguntas { max-width: 820px; margin: 48px auto 0; text-align: left; }
.preguntas details { border-bottom: 1px solid var(--line); }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4px; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -.135px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); font: 400 18px/1 var(--fuente); transition: transform .3s var(--ease), background .2s, color .2s, border-color .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); background: var(--brand); border-color: var(--brand); color: #fff; }
.preguntas .resp { padding: 0 4px 22px; max-width: 720px; }
.preguntas .resp p { color: var(--muted); font-size: 16px; line-height: 1.7; font-weight: 460; }
.preguntas .resp p + p { margin-top: 10px; }
.preguntas a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ── Cierre ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.cierre { height: 251px; color: #fff; background: #0e1e48 url(/img/cierre-fluido-6225c5c1428da43b.webp) 30% 45% / 125% auto no-repeat; animation: deriva 48s ease-in-out infinite alternate; }
@keyframes deriva { from { background-position: 30% 45%; } to { background-position: 75% 60%; } }
@media (prefers-reduced-motion: reduce) { .cierre { animation: none; } }
.cierre-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cierre-t { display: flex; align-items: center; gap: 24px; }
.cierre h2 { font-size: 49px; line-height: 58.8px; font-weight: 420; letter-spacing: -1.3475px; }
/* Revelado animado de la marca (SVG con SMIL en <img>): site.js lo arranca al entrar en pantalla; con movimiento
   reducido, ahorro de datos o sin JavaScript se queda la marca fija. */
.revelado { width: 88px; height: 88px; flex: none; transition: opacity .3s; }
.revelado.espera { opacity: 0; }
/* Cierre grande de las páginas interiores: centrado, con subtítulo y dos botones. */
.cierre.grande { height: auto; padding: 96px 0; text-align: center; }
.cierre.grande .cw { display: block; }
.cierre.grande h2 { max-width: 900px; margin: 0 auto; }
.cierre.grande h2 span { color: rgb(255 255 255 / .65); }
.cierre.grande p { margin: 24px auto 40px; max-width: 720px; font-size: 18px; line-height: 27px; font-weight: 500; color: rgb(255 255 255 / .8); }
.cierre-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cierre .b-claro.g:hover { background: #fff; }
/* La textura cubre la banda de 251 px a lo ancho; en pantallas estrechas la banda es más alta y se escala por la altura. */
@media (max-width: 1180px) { .cierre, .cierre.grande { background-size: auto 150%; } }

/* ── Pie ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pie { position: relative; background: var(--night); color: #fff; padding: 64px 0 48px; }
.pie-sup { display: flex; gap: 32px; min-height: 520px; }
.pie-marca { flex: 1 1 300px; min-width: 0; }
.pie-marca h2 { margin-top: 24px; max-width: 380px; font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -.63px; }
.pie-marca p { margin-top: 20px; max-width: 360px; font-size: 14px; line-height: 21px; color: rgb(255 255 255 / .6); }
.pie-nav { flex: 0 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 0 clamp(32px, 4vw, 64px); }
.pie-nav h3 { font-size: 18.72px; line-height: 28px; font-weight: 700; }
.pie-nav ul { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.pie-nav a, .pie-nav li { font-size: 16px; line-height: 24px; font-weight: 420; color: rgb(255 255 255 / .8); }
.pie-nav a:hover, .pie-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pie-nav a { overflow-wrap: anywhere; }
.pie-nav li.muted { color: rgb(255 255 255 / .5); }
/* La marca de fondo, en el hueco bajo la marca del pie: mismo blanco al 5 % que la palabra gigante. */
.pie-simbolo { position: absolute; left: 80px; top: 250px; width: 300px; height: 300px; color: rgb(255 255 255 / .05); pointer-events: none; user-select: none; }
.pie-simbolo .mk-r { fill-opacity: .6; }
@media (max-width: 1180px) { .pie-simbolo { display: none; } }
.pie-gigante { margin-top: 32px; width: 100%; height: 123px; overflow: visible; color: rgb(255 255 255 / .05); user-select: none; }
.pie-gigante text { fill: currentColor; font-family: var(--fuente); font-weight: 700; }
.pie-marcas { position: absolute; left: 0; right: 0; bottom: 14px; padding: 0 80px; font-size: 11px; line-height: 14px; color: rgb(255 255 255 / .4); }

/* ── Páginas interiores ───────────────────────────────────────────────────────────────────────────────────────── */
.interior main { background: var(--page); }
.in-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-top: 80px; padding-bottom: 72px; }
.in-hero h1, .p-hero h1 { margin: 0 0 24px; font-size: 49px; line-height: 58.8px; font-weight: 460; letter-spacing: -1.3475px; color: var(--ink); text-wrap: balance; }
.in-hero h1 span, .p-hero h1 span { color: var(--muted); }
.in-hero .etq, .p-hero .etq { margin-bottom: 16px; }
.in-hero .sub { margin: 0 0 32px; }
.in-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.vinetas { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); }
.vinetas li { display: inline-flex; align-items: center; gap: 8px; }
.vinetas .ico { width: 16px; height: 16px; color: var(--brand); stroke-width: 2.4; }
.hero-loop { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 1216 / 960; box-shadow: 0 24px 60px -24px rgb(12 23 51 / .45); }
.hero-loop video { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-hero { padding: 80px 0 56px; text-align: center; }
.p-hero h1 { max-width: 900px; margin-left: auto; margin-right: auto; }
.p-hero .sub { margin-top: 0; max-width: 760px; }

.indice { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; }
.indice a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; background: #fff; box-shadow: var(--sombra-s); font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text); }
.indice a:hover { color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.seccion { padding: 72px 0; }
.seccion + .seccion { padding-top: 24px; }
.seccion.blanco { background: #fff; }
.seccion.blanco + .seccion { padding-top: 72px; }
.s-enc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: end; margin-bottom: 40px; }
.s-enc.centro { display: block; text-align: center; }
.s-enc.centro .sub { margin-left: auto; margin-right: auto; }
.s-tit { display: flex; align-items: center; gap: 14px; }
.s-ico { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; color: var(--brand); background: linear-gradient(135deg, #eef3ff, #c9d9ff); box-shadow: 0 0 0 1px rgb(255 255 255 / .7) inset; }
.s-ico .ico { width: 24px; height: 24px; }
.s-enc h2 { font-size: 39px; line-height: 46.8px; font-weight: 460; letter-spacing: -1.0725px; color: var(--ink); }
.s-enc .sub { margin: 0; max-width: 680px; }
.s-enc.centro h2 { max-width: 900px; margin: 0 auto; }
.s-enc.centro .sub { margin-top: 20px; }
.cartas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cartas.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartas.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carta { padding: 32px; border-radius: 12px; background: #fff; box-shadow: var(--sombra-s); }
.carta h3 { font-size: 22px; line-height: 28px; font-weight: 460; letter-spacing: -.55px; color: var(--ink); }
.carta p { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 460; letter-spacing: -.12px; color: var(--muted); }
.carta p + p { margin-top: 8px; }
.carta a:not([class]) { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.carta .tarj-i { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 20px; }
.carta .tarj-i .ico { width: 24px; height: 24px; }
.carta.tinte { background: var(--tint); box-shadow: none; }
.lista-c { margin-top: 16px; display: grid; gap: 10px; }
.lista-c li { display: flex; gap: 10px; font-size: 16px; line-height: 24px; font-weight: 460; color: var(--text); }
.lista-c .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--brand); stroke-width: 2.2; }
.lista-c a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.nota-s { margin-top: 32px; max-width: 820px; font-size: 15px; line-height: 23px; color: var(--muted); }
.nota-s a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.acc { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; }

/* Revelado al entrar en pantalla (solo con JavaScript y sin movimiento reducido). */
.js .revela { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .revela.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revela { opacity: 1; transform: none; transition: none; } }

/* Diagrama de «Cómo funciona» (SVG en línea con clases) */
.diagrama { padding: 40px; border-radius: 12px; background: #fff; box-shadow: var(--sombra-l); }
.diagrama figcaption { margin-top: 20px; text-align: center; font-size: 15px; line-height: 22px; color: var(--muted); }
.dg-v { display: none; margin: 0 auto; max-width: 420px; width: 100%; }
.dg-h { width: 100%; height: auto; }
.dg-box { fill: var(--page); stroke: var(--line); }
.dg-box-acc { fill: #eef3ff; stroke: #b6caff; }
.dg-ico, .dg-ico-n { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg-ico { stroke: var(--brand); }
.dg-ico-n { stroke: #5a6378; }
.dg-t { font: 600 16px var(--fuente); fill: var(--ink); }
.dg-sm { font-size: 14px; }
.dg-s { font: 460 13px var(--fuente); fill: #5a6378; }
.dg-m { font: 500 13px var(--codigo); fill: var(--brand); }
.dg-l { font: 600 12px var(--fuente); fill: #5a6378; }
.dg-line { fill: none; stroke: #9aa3b5; stroke-width: 1.6; }
.dg-head { fill: #9aa3b5; }
.dg-line-acc { fill: none; stroke: var(--brand); stroke-width: 2; }
.dg-head-acc { fill: var(--brand); }
.dg-line-dash { fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-dasharray: 5 5; }

/* Precios */
.planes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.plan { position: relative; padding: 40px; border-radius: 12px; background: #fff; box-shadow: var(--sombra-s); }
.plan.dest { box-shadow: 0 0 0 2px var(--brand), var(--sombra-l); }
.plan-badge { position: absolute; top: -12px; left: 40px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.plan h2 { font-size: 25px; line-height: 30px; font-weight: 460; letter-spacing: -.6875px; }
.plan-d { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--muted); }
.plan-precio { margin-top: 28px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-precio strong { font-size: 49px; line-height: 1; font-weight: 460; letter-spacing: -1.3475px; }
.plan-precio span { font-size: 15px; color: var(--muted); }
.plan .b-prim { width: 100%; margin-top: 28px; }
.plan-contacto { margin-top: 12px; text-align: center; font-size: 14px; line-height: 20px; color: var(--muted); }
.plan-contacto a { color: var(--brand); font-weight: 500; }
.plan hr { margin: 32px 0 0; border: 0; border-top: 1px solid var(--line); }
.plan .lista-c b { font-weight: 600; color: var(--ink); }
.plan .lista-c span { color: var(--muted); }
.caja-tinte { margin-top: 32px; padding: 32px 40px; border-radius: 12px; background: var(--tint); }
.caja-tinte h2, .caja-tinte h3 { font-size: 25px; line-height: 30px; font-weight: 460; letter-spacing: -.6875px; }
.caja-tinte p { margin-top: 12px; max-width: 880px; font-size: 16px; line-height: 25px; color: rgb(16 22 36 / .72); }
.caja-tinte a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* Contacto */
.c-mail { margin-top: 16px; font: 500 15px/22px var(--codigo); color: var(--brand); overflow-wrap: anywhere; }
.c-mail a:hover { text-decoration: underline; }
.carta .b-prim, .carta .b-tinte { margin-top: 24px; }
.carta .b-sec { margin-top: 20px; padding: 0; }
.direccion { font-size: 17px; line-height: 28px; color: var(--text); }
.direccion strong { color: var(--ink); font-weight: 600; }
.direccion a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ── Legal ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.legal-barra { background: #fff; border-bottom: 1px solid var(--line); }
.legal-barra .cw { display: flex; align-items: center; gap: 4px; height: 52px; overflow-x: auto; scrollbar-width: none; }
.legal-barra .cw::-webkit-scrollbar { display: none; }
.legal-barra a { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; font-size: 14px; line-height: 18px; font-weight: 540; color: var(--muted); }
.legal-barra a:hover { color: var(--ink); background: rgb(127 127 127 / .08); }
.legal-barra a[aria-current="page"] { color: var(--ink); background: var(--tint); }
.legal main { background: var(--page); }
.prosa { max-width: 880px; margin: 0 auto; padding: 80px 80px 96px; color: var(--text); font-size: 17px; line-height: 1.65; }
.prosa h1 { margin: 0 0 16px; font: 460 49px/58.8px var(--fuente); letter-spacing: -1.3475px; color: var(--ink); }
.prosa h2 { margin: 48px 0 12px; font: 540 25px/30px var(--fuente); letter-spacing: -.5px; color: var(--ink); }
.prosa h3 { margin: 28px 0 8px; font: 600 18px/26px var(--fuente); letter-spacing: -.135px; color: var(--ink); }
.prosa :is(p, ul, ol, dl) { margin: 0 0 14px; }
.prosa :is(ul, ol) { padding-left: 22px; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li { margin: 6px 0; }
.prosa li::marker { color: var(--muted); }
.prosa strong { font-weight: 600; color: var(--ink); }
.prosa a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prosa code { padding: 1px 5px; font-size: 14px; background: var(--tint); border-radius: 4px; overflow-wrap: anywhere; }
.prosa dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; }
.prosa dt { font-weight: 600; color: var(--ink); }
.prosa dd { margin: 0; overflow-wrap: anywhere; }
.prosa .fecha { margin: 0 0 40px; font: 540 14px/20px var(--fuente); color: var(--muted); }
.prosa .nota-t { margin: -24px 0 40px; font-size: 15px; line-height: 23px; color: var(--muted); }
.prosa .summary { margin: 0 0 16px; padding: 24px 28px; border-radius: 12px; background: var(--tint); }
.prosa .summary > :last-child { margin-bottom: 0; }
.prosa .summary ul { margin: 0; }
.prosa .note { font-size: 15px; color: var(--muted); }
.prosa .table-wrap { margin: 0 0 20px; overflow-x: auto; border-radius: 12px; background: #fff; box-shadow: var(--sombra-s); }
.prosa table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prosa th, .prosa td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prosa th { font: 600 13px/18px var(--fuente); color: var(--ink); background: #f1f3f7; white-space: nowrap; }
.prosa tr:last-child td { border-bottom: 0; }

/* ── 404 ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.nf { padding: 120px 0 160px; text-align: center; }
.nf-c { font: 500 15px/20px var(--codigo); color: var(--brand); }
.nf h1 { margin: 16px auto 0; max-width: 800px; font-size: 49px; line-height: 58.8px; font-weight: 460; letter-spacing: -1.3475px; }
.nf .sub { margin-top: 20px; }
.nf .btns-c { margin-top: 40px; }
.nf-otro { margin-top: 40px; font-size: 15px; color: var(--muted); }
.nf-otro a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ── Menú grande «Product» (escritorio) ───────────────────────────────────────────────────────────────────────── */
.mg-gatillo[aria-expanded="true"] { background: rgb(127 127 127 / .1); }
.mg-gatillo .chev { transition: transform .2s ease; }
.mg-gatillo[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mg-velo { position: fixed; inset: 0; z-index: 29; background: rgb(10 16 30 / .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.mg-velo.visible { opacity: 1; pointer-events: auto; }
html.mg-bloqueo { overflow: hidden; padding-right: var(--mg-barra, 0); }
.mg-panel { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -12px rgb(0 0 0 / .14); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.mg-panel.abierto { opacity: 1; transform: none; pointer-events: auto; }
.mg-panel[hidden] { display: none; }
.mg-rej { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr; gap: 32px; padding-top: 32px; padding-bottom: 32px; }
.mg-titulo { margin: 0 0 14px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mg-grupo ul, .mg-destacado ul { display: grid; gap: 2px; }
.mg-item { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--ink); transition: background .15s ease, color .15s ease; }
.mg-item:hover, .mg-item:focus-visible { background: #f2f4f8; }
.mg-item:hover b, .mg-item:focus-visible b { color: var(--brand); }
.mg-ico { margin-top: 2px; color: var(--muted); }
.mg-item:hover .mg-ico, .mg-item:focus-visible .mg-ico { color: var(--brand); }
.mg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-txt b { font-size: 13.5px; line-height: 17.5px; font-weight: 600; color: var(--ink); }
.mg-txt small { font-size: 12px; line-height: 16.2px; font-weight: 420; color: var(--muted); }
.mg-destacado { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mg-destacado ul { gap: 8px; }
.mg-tarjeta { padding: 12px; border: 1px solid rgb(1 20 53 / .12); background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.mg-tarjeta:hover, .mg-tarjeta:focus-visible { background: #fff; border-color: var(--brand); }
.mg-nota { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 16.7px; color: var(--muted); }
@media (max-width: 1180px) { .mg-panel, .mg-velo { display: none !important; } }

/* Menú móvil: acordeón «Product» */
.mm-acc { border-bottom: 1px solid var(--line); }
.menu-movil .mm-acc-b { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; font-size: 20px; line-height: 28px; text-align: left; }
.mm-acc-b .chev { width: 20px; height: 20px; transition: transform .2s ease; }
.mm-acc-b[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mm-acc-p { padding: 0 0 16px; }
.mm-acc-p[hidden] { display: none; }
.mm-grupo { margin: 12px 0 6px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mm-acc-p ul { display: grid; gap: 2px; }
.menu-movil .mm-acc-p a.mm-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-bottom: 0; border-radius: 8px; font-size: 14px; line-height: 18px; }
.mm-item .ico { color: var(--muted); }
.mm-item b { display: block; font-weight: 600; }
.mm-item small { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }

/* ── Responsive ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cw { padding: 0 32px; }
  .hdr-nav, .hdr-txt, .hdr-btn { display: none; }
  .menu-enlace { display: inline-flex; }
  .js .menu-enlace { display: none; }
  .js .burger { display: flex; }
  .menu-movil { position: fixed; inset: 67px 0 0; z-index: 29; display: none; flex-direction: column; padding: 16px 32px 32px; background: #fff; overflow: auto; overscroll-behavior: contain; }
  .menu-movil.abierto { display: flex; }
  .menu-movil > a { padding: 14px 0; font-size: 20px; line-height: 28px; border-bottom: 1px solid var(--line); }
  .menu-movil > a[aria-current="page"] { color: var(--brand); }
  .menu-movil > a.mm-cta { margin-top: 24px; justify-content: center; border-bottom: 0; color: #fff; }
  .car { height: auto; background: var(--dark); }
  .car-caja { display: flex; flex-direction: column; height: auto; padding-top: 48px; }
  .car-textos { position: static; width: auto; }
  .car-t { font-size: 44px; line-height: 50px; letter-spacing: -1.2px; }
  .car-panel { position: relative; left: auto; top: auto; width: calc(100% + 64px); margin: 24px -32px 0; height: 420px; order: 2; }
  .car-lista { position: static; width: auto; margin-top: 24px; order: 3; padding-bottom: 32px; }
  .aside.g, .aside.m { grid-template-columns: 1fr; height: auto; }
  .a-txt { padding: 32px; }
  .a-pic { height: 280px; }
  .par { grid-template-columns: 1fr; gap: 32px; }
  .rejilla { grid-template-columns: repeat(6, 1fr); }
  .rejilla li { grid-column: span 2; }
  .rejilla li:nth-child(n+4) { grid-column: span 3; }
  .tab { padding: 0 24px; }
  .tarjs { grid-template-columns: 1fr; }
  .tarj { min-height: 0; }
  .mg { grid-template-columns: 1fr; grid-template-rows: auto; }
  .mc.alta { grid-row: auto; }
  .mc.sup, .mc.inf { min-height: 300px; }
  .emp-in { grid-template-columns: 1fr; gap: 40px; }
  .emp-pronto { grid-template-columns: 1fr; gap: 16px; }
  .cierre { height: auto; padding: 64px 0; }
  .cierre-in { flex-direction: column; align-items: flex-start; }
  .pie-sup { flex-direction: column; min-height: 0; }
  .pie-marca { flex: none; }
  .pie-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .pie-gigante { height: auto; }
  .pie-marcas { position: static; padding: 24px 0 0; }
  .in-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
  .s-enc { grid-template-columns: 1fr; gap: 16px; }
  .cartas, .cartas.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planes { grid-template-columns: 1fr; }
  .diagrama { padding: 24px; }
  .prosa { padding: 64px 32px 80px; }
}
@media (max-width: 720px) {
  .dg-h { display: none; }
  .dg-v { display: block; }
}
@media (max-width: 640px) {
  .cw { padding: 0 16px; }
  .menu-movil { padding: 8px 16px 24px; }
  .t49, .cierre h2, .emp h2, .in-hero h1, .p-hero h1, .nf h1, .prosa h1 { font-size: 34px; line-height: 40px; letter-spacing: -.8px; }
  .s-enc h2 { font-size: 28px; line-height: 34px; letter-spacing: -.7px; }
  .sub { font-size: 16.5px; line-height: 25px; }
  .car-t { font-size: 36px; line-height: 42px; letter-spacing: -1px; }
  .car-sub { font-size: 16.5px; line-height: 25px; }
  .car-panel { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; height: 320px; }
  .car-caja { padding-top: 32px; }
  .car-fila { padding: 0 16px; }
  .car-fila span:last-child { display: none; }
  .car-btns, .btns-c, .btns-l, .in-cta { flex-wrap: wrap; gap: 12px 16px; }
  .pilas, .grupo, .cita, .emp, .faq-s { padding: 64px 0; }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .rejilla li, .rejilla li:nth-child(n+4) { grid-column: auto; height: 72px; font-size: 16px; line-height: 20px; }
  .rejilla li:last-child { grid-column: 1 / -1; }
  .cita h2 { font-size: 28px; line-height: 36px; }
  .a-txt .tx, .tarj h3, .mc-txt h3 { font-size: 22px; line-height: 27px; }
  .a-txt { padding: 24px; }
  .tarj, .carta, .plan { padding: 24px; }
  .plan-badge { left: 24px; }
  .caja-tinte { padding: 24px; }
  .mc-txt { padding: 0 24px 24px; }
  .pie-nav { gap: 32px 24px; }
  .cartas, .cartas.dos, .cartas.cuatro { grid-template-columns: 1fr; }
  .seccion { padding: 56px 0; }
  .in-hero { padding-top: 40px; padding-bottom: 48px; }
  .p-hero { padding: 56px 0 40px; }
  .cierre.grande { padding: 64px 0; }
  .cierre-t { flex-direction: column; align-items: flex-start; gap: 16px; }
  .revelado { width: 64px; height: 64px; }
  .cierre-acc a { width: 100%; }
  .preguntas summary { font-size: 16.5px; line-height: 24px; }
  .prosa { padding: 48px 16px 64px; font-size: 16px; }
  .prosa h2 { font-size: 22px; line-height: 28px; }
  .prosa dl { grid-template-columns: 1fr; gap: 0; }
  .prosa dd { margin-bottom: 12px; }
  .nf { padding: 64px 0 96px; }
}

/* Lenis (desplazamiento suave, /js/lenis.min.js, MIT): reglas que pide la librería. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }