/* ══════════════════════════════════════════════════════════════════
   Vesta · v4 — una sola página, scroll vertical
   Cambios respecto de v3: entran las correcciones de Marcos, una pasada
   de lenguaje humano (nada de «IA», «3D» ni «KPI»), y las dos secciones
   que faltaban para que la página sirva de pieza comercial: quiénes
   somos y contacto. Se fueron las píldoras de estado y el flujo de
   cuatro pasos. Tipografía del sistema. Sólo cuatro pesos: 400/500/600/700.
   ══════════════════════════════════════════════════════════════════ */

@property --tx { syntax:'<length>'; inherits:false; initial-value:0px }
@property --ty { syntax:'<length>'; inherits:false; initial-value:0px }
@property --tw { syntax:'<length>'; inherits:false; initial-value:0px }
@property --th { syntax:'<length>'; inherits:false; initial-value:0px }

:root{
  --bg:#f3f4f8;
  --surface:#ffffff;
  --veil:rgba(255,255,255,.72);
  --ink:#0f1115;
  --ink-2:#3c4250;
  --muted:#636a7c;
  --line:#e2e5ee;
  --brand:#2c5de2;
  --brand-soft:#e9eefc;
  --brand-edge:rgba(44,93,226,.18);
  --line-hi:#ccd2e2;
  /* El borde de un campo es un CONTROL, no un adorno: WCAG 1.4.11 pide 3:1
     contra el fondo y --line, que es un token de hairline, da 1,26:1 en claro
     y 1,21:1 en oscuro (ahí el campo es invisible hasta que lo enfocás).
     Se mide contra el RELLENO del campo (--well), que es lo que tiene al lado:
     #858b9a da 3,19:1. El #8b91a0 anterior daba 2,95:1; se había medido
     contra #fff. El de tema oscuro mide 3,35:1. */
  --campo-line:#858b9a;
  --danger:#c0362c;
  /* El verde de marca de WhatsApp, #25D366, mide 1,80:1 contra --bg: como tinta
     no llega ni al 3:1 que pide un ícono, mucho menos al 4,5:1 de un texto. En
     claro va el mismo #0c7c59 que ya usa el botón «Responder por WhatsApp» del
     mail en api/contacto.mjs — un solo verde en todo el repo. Mide 4,68:1 sobre
     --wa-soft y 4,73:1 contra el fondo: la misma familia que el par
     --brand/--brand-soft de la etiqueta del encabezado (4,80:1), que es de quien
     copia la forma.
     En oscuro el de la marca entra tal cual y sobra. */
  --wa:#0c7c59;
  --wa-soft:#eaf6f0;
  /* Elevación en dos pisos: reposo y puntero. El primer anillo es el borde
     de siempre, así el bloque se recorta también donde la sombra no llega. */
  --elev:0 0 0 1px var(--line), 0 1px 2px rgba(9,12,22,.04), 0 8px 20px -10px rgba(9,12,22,.10);
  --elev-hi:0 0 0 1px var(--line-hi), 0 2px 5px rgba(9,12,22,.06), 0 16px 34px -14px rgba(9,12,22,.18);
  --btn-ink:#ffffff;
  --glow:rgba(44,93,226,.13);
  --thumb:#ffffff;
  --thumb-shadow:0 1px 2px rgba(9,12,22,.10), 0 4px 10px -3px rgba(9,12,22,.10);
  --track:rgba(120,120,128,.12);
  --well:#f6f7fb;

  --measure:68rem;
  --gutter:clamp(1.25rem,4vw,2rem);
  --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:2.75rem; --s8:4rem; --s9:5.5rem; --s10:7.5rem;
  --r:14px; --r-sm:9px;
  --chrome:4.25rem;

  color-scheme:light dark;

  --out:cubic-bezier(.23,1,.32,1);
  --move:cubic-bezier(.32,.72,0,1);
}

/* ── TEMA OSCURO ───────────────────────────────────────────────────
   Dos disparadores, misma lista de colores, repetida a propósito: CSS
   no permite reusar un bloque entre un media query y un selector de
   atributo sin preprocesador, y light-dark() deja la página sin colores
   en un navegador viejo. SI TOCÁS UNO, TOCÁ EL OTRO. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0d12;
    --surface:#14171f;
    --veil:rgba(20,23,31,.66);
    --ink:#f2f4f8;
    --ink-2:#c3c9d6;
    --muted:#8d95a6;
    --line:#242935;
    --brand:#6f96ff;
    --brand-soft:#16203a;
    --brand-edge:rgba(111,150,255,.26);
    --line-hi:#39404f;
    --campo-line:#636b7c;
    --danger:#ff9a90;
    --wa:#25d366;
    --wa-soft:#122a20;
    /* En oscuro una sombra negra no se ve: el peso lo lleva el borde. */
    --elev:0 0 0 1px var(--line), 0 10px 26px -14px rgba(0,0,0,.66);
    --elev-hi:0 0 0 1px var(--line-hi), 0 18px 40px -16px rgba(0,0,0,.8);
    /* El azul del tema oscuro es claro: texto blanco encima no llega al
       contraste mínimo. La tinta del botón se invierte con la paleta. */
    --btn-ink:#0b0d12;
    --glow:rgba(70,110,235,.20);
    --thumb:rgba(255,255,255,.11);
    --thumb-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
    --track:rgba(120,120,128,.20);
    --well:rgba(255,255,255,.035);
  }
  :root:not([data-theme="light"]) body{-webkit-font-smoothing:antialiased}
}
:root[data-theme="dark"]{
  --bg:#0b0d12;
  --surface:#14171f;
  --veil:rgba(20,23,31,.66);
  --ink:#f2f4f8;
  --ink-2:#c3c9d6;
  --muted:#8d95a6;
  --line:#242935;
  --brand:#6f96ff;
  --brand-soft:#16203a;
  --brand-edge:rgba(111,150,255,.26);
  --line-hi:#39404f;
  --campo-line:#636b7c;
  --danger:#ff9a90;
  --wa:#25d366;
  --wa-soft:#122a20;
  --elev:0 0 0 1px var(--line), 0 10px 26px -14px rgba(0,0,0,.66);
  --elev-hi:0 0 0 1px var(--line-hi), 0 18px 40px -16px rgba(0,0,0,.8);
  --btn-ink:#0b0d12;
  --glow:rgba(70,110,235,.20);
  --thumb:rgba(255,255,255,.11);
  --thumb-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  --track:rgba(120,120,128,.20);
  --well:rgba(255,255,255,.035);
}
:root[data-theme="dark"] body{-webkit-font-smoothing:antialiased}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;
  overflow-x:clip;
  /* Ahora sí corresponde: en una página de scroll, saltar a una sección
     con un corte seco desorienta. Se apaga con movimiento reducido. */
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-optical-sizing:auto;
  font-size:100%;
  line-height:1.6;
}
.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}

#sentinel{position:absolute;top:0;left:0;width:1px;height:1px}
/* Un solo degradado, y vive detrás del cromo para que la barra
   translúcida tenga algo real que muestrear. */
#glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(760px 420px at 78% -8%, var(--glow), transparent 70%);
}
/* Selectores explícitos, no un blanket `body > :not(#glow)`: ese :not()
   heredaba la especificidad del #id que lleva adentro (1,0,1) y le ganaba
   al `nav{position:sticky}` (0,0,1), dejando el encabezado sin fijar. */
body > header, body > .seccion, body > .pie{position:relative;z-index:1}

/* ── CROMO ─────────────────────────────────────────────────────────
   La única superficie translúcida de la página. Nunca se apila otra. */
nav{
  position:sticky;top:0;z-index:30;
  background:var(--veil);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 transparent;
  transition:box-shadow 200ms ease;
}
nav[data-scrolled]{box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--s5);
  padding-block:.7rem;flex-wrap:wrap;row-gap:.6rem}

.brand{display:flex;align-items:center;gap:.6rem;flex:none;
  color:inherit;text-decoration:none}
.brand .tile{
  width:30px;height:30px;border-radius:8px;flex:none;
  display:grid;place-items:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}
/* El SVG mide 7283×7283 de intrínseco: sin width/height explícitos
   revienta el contenedor en el primer paint. */
.brand img{width:22px;height:22px;display:block;border-radius:5px}
.brand span{font-weight:600;font-size:1.1875rem;letter-spacing:-.018em}

/* ── INDICADOR DE SECCIÓN ──────────────────────────────────────────
   Mismo control segmentado que la v2, pero ya no cambia de pestaña:
   son anclas, y la pastilla sigue a dónde estás en el scroll. */
.seg{
  /* Las dos auto se reparten el hueco libre en partes iguales, así el control
     queda centrado entre la marca y el botón de tema. Antes el único auto era
     el margin-left del .tema, que se comía todo el hueco de un lado y dejaba
     las píldoras pegadas al logo. */
  position:relative;display:flex;flex:none;margin-inline:auto;
  background:var(--track);border-radius:11px;padding:3px;max-width:100%;
}
.seg .thumb{
  --tx:0px; --ty:0px; --tw:0px; --th:0px;
  position:absolute;top:0;left:0;
  width:var(--tw);height:var(--th);
  transform:translate(var(--tx),var(--ty));
  background:var(--thumb);border-radius:8px;
  box-shadow:var(--thumb-shadow);
  transition:transform 340ms var(--move), width 340ms var(--move), height 340ms var(--move);
}
.seg a{
  position:relative;z-index:1;flex:none;
  font:inherit;font-size:.9375rem;
  /* El peso NO cambia entre estados: un salto 500→600 reflowea la
     etiqueta e invalida la geometría medida de la pastilla. */
  font-weight:500;letter-spacing:-.004em;line-height:1;
  color:var(--muted);text-decoration:none;
  padding:.5rem .85rem;border-radius:8px;white-space:nowrap;
  transition:color 120ms ease, transform 140ms var(--out);
}
.seg a[aria-current="true"]{color:var(--ink)}
.seg a:active{transform:scale(.97)}
.seg a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .seg a:not([aria-current="true"]):hover{color:var(--ink-2)}
}
/* Los divisores se desvanecen junto al segmento activo. Detalle de AppKit. */
.seg a + a::before{
  content:"";position:absolute;left:-1px;top:22%;bottom:22%;width:1px;
  background:var(--line);transition:opacity 120ms linear;
}
.seg a[aria-current="true"]::before,
.seg a[aria-current="true"] + a::before{opacity:0}

/* ── HAMBURGUESA (sólo celular) ────────────────────────────────── */
.menu{display:none;appearance:none;border:0;cursor:pointer;flex:none;
  width:32px;height:32px;border-radius:9px;place-items:center;
  background:var(--track);color:var(--ink-2);
  transition:color 120ms ease, transform 140ms var(--out)}
.menu:active{transform:scale(.94)}
.menu:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.menu svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round}
.menu .cerrar{display:none}
nav[data-abierto] .menu .abrir{display:none}
nav[data-abierto] .menu .cerrar{display:block}

/* ── SELECTOR DE IDIOMA ────────────────────────────────────────────
   Texto plano, no un segundo control segmentado: dos pastillas deslizantes
   en el mismo encabezado compiten por la atención y ninguna gana. Son tres
   links a tres archivos reales, así que la URL que se comparte abre en el
   idioma correcto. */
.idioma{display:flex;align-items:center;gap:2px;flex:none}
.idioma a{
  font:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  color:var(--muted);text-decoration:none;
  padding:.3rem .4rem;border-radius:7px;
  transition:color 120ms ease, background 120ms ease;
}
.idioma a[aria-current="true"]{color:var(--ink);background:var(--track)}
.idioma a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .idioma a:hover{color:var(--ink)} }

/* ── BOTÓN DE TEMA ─────────────────────────────────────────────── */
.tema{
  appearance:none;border:0;cursor:pointer;flex:none;
  width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--track);color:var(--ink-2);
  transition:color 120ms ease, transform 140ms var(--out);
}
.tema:active{transform:scale(.94)}
.tema:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .tema:hover{color:var(--ink)} }
.tema svg{width:17px;height:17px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
/* Se muestra el tema al que vas, no el que estás viendo. Misma lógica
   que la paleta, para que no se desfasen. */
.tema .sol{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema .sol{display:block}
  :root:not([data-theme="light"]) .tema .luna{display:none}
}
:root[data-theme="dark"] .tema .sol{display:block}
:root[data-theme="dark"] .tema .luna{display:none}

/* ── SECCIONES ─────────────────────────────────────────────────────
   scroll-margin-top para que el ancla no deje el título debajo del
   cromo pegajoso. La hairline separa sin encerrar. */
.seccion{padding:var(--s9) 0;scroll-margin-top:var(--chrome);position:relative}
.seccion + .seccion::before{
  content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
}

/* ── HERO ──────────────────────────────────────────────────────── */
header{padding:var(--s10) 0 var(--s9)}
.eyebrow{
  display:inline-block;
  font-size:.78125rem;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);
  border:1px solid var(--brand-edge);
  padding:.35rem .75rem;border-radius:999px;
}
h1{
  /* Más chico y más ancho que en la v3: el titular pasó de dos palabras
     a seis, y con el clamp anterior entraba en tres renglones altísimos. */
  font-size:clamp(2.15rem,1rem + 3.9vw,3.6rem);
  font-weight:700;line-height:1.06;letter-spacing:-.030em;
  margin:var(--s5) 0 var(--s4);max-width:23ch;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--brand)}
.sub{
  font-size:clamp(1.0625rem,.95rem + .55vw,1.3125rem);
  font-weight:400;line-height:1.5;letter-spacing:-.011em;
  color:var(--muted);max-width:56ch;margin:0;text-wrap:pretty;
}
.sub strong{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s6)}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.84375rem;font-weight:500;letter-spacing:.004em;color:var(--ink-2);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  padding:.4rem .8rem .4rem .65rem;border-radius:999px;
}
.chip .ic{width:16px;height:16px;color:var(--brand)}

/* ── LLAMADO A LA ACCIÓN ───────────────────────────────────────────
   El único elemento relleno de la página. Es a propósito: si hubiera
   dos, ninguno sería el llamado. */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:1rem;font-weight:600;letter-spacing:-.008em;line-height:1;
  color:var(--btn-ink);background:var(--brand);
  padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;
  box-shadow:0 1px 2px rgba(9,12,22,.10), 0 8px 20px -10px var(--brand);
  transition:transform 150ms var(--out), filter 150ms ease, box-shadow 150ms var(--out);
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* Sólo con puntero fino: en pantalla táctil un toque dispara :hover y el
   bloque queda levantado hasta que tocás otra cosa. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.08);transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(9,12,22,.12), 0 14px 28px -10px var(--brand)}
  .card:hover{transform:translateY(-2px);box-shadow:var(--elev-hi)}
  .feat[aria-pressed="false"]:hover{background:var(--well)}
  .pie a:hover{color:var(--brand)}
}
.cta-note{color:var(--muted);font-size:.9375rem;margin:0}

/* ── TIPOGRAFÍA DE SECCIÓN ─────────────────────────────────────── */
.kicker{
  font-size:.78125rem;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--brand);margin:0 0 var(--s3);
}
h2{
  font-size:clamp(1.7rem,1.1rem + 2.1vw,2.5rem);
  font-weight:600;line-height:1.1;letter-spacing:-.026em;
  margin:0 0 var(--s4);max-width:24ch;text-wrap:balance;
}
h2.una-linea{max-width:none}
h2.sin-bajada{margin-bottom:var(--s7)}
.lead{
  font-size:1.0625rem;font-weight:400;line-height:1.58;letter-spacing:-.006em;
  color:var(--muted);max-width:78ch;margin:0 0 var(--s7);text-wrap:pretty;
}
.lead strong{color:var(--ink);font-weight:600}
.lead:last-child{margin-bottom:0}

/* Cada oración arranca en su propio renglón. No es un <br>: el span
   sigue siendo texto que wrapea solo, así en el celular una oración
   larga se parte con naturalidad en vez de cortarse a la fuerza. */
.frase{display:block}

/* ── TARJETAS ──────────────────────────────────────────────────────
   Antes eran celdas pegadas de una rejilla con gap de 1px. Ahora se
   separan y cada una se sostiene sola: es lo que hace que se lean como
   bloques y lo que deja lugar a que el puntero las levante. */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--surface);padding:var(--s5);
  border-radius:var(--r);box-shadow:var(--elev);
  transition:box-shadow 150ms var(--out), transform 150ms var(--out);
}
.card h3{
  font-size:1.1875rem;font-weight:600;line-height:1.28;letter-spacing:-.014em;
  margin:0 0 .55rem;
}
.card p{
  margin:0;color:var(--muted);
  font-size:.96875rem;line-height:1.6;max-width:46ch;
}
/* ── ÍCONOS ──────────────────────────────────────────────────────
   Salen de /iconos.svg, un sprite de Lucide —la misma familia y versión que
   la app— que comparten las tres páginas:
     <svg class="ic" aria-hidden="true"><use href="/iconos.svg#factory"/></svg>
   El trazo toma el color del texto que lo rodea (currentColor), así que un
   ícono no necesita reglas de tema propias.
   Las tarjetas de «Por qué Vesta» llevaban un número 1-2-3. No son una
   secuencia —ninguna va antes que otra—, así que el número no decía nada; el
   ícono dice de qué habla cada una. */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.medalla{display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:12px;
  background:var(--brand-soft);color:var(--brand)}
.medalla .ic{width:22px;height:22px}
.medalla-sm{display:grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:10px;
  background:var(--brand-soft);color:var(--brand)}
.medalla-sm .ic{width:18px;height:18px}
.card > .medalla{margin-bottom:var(--s4)}
/* Ícono y título en la misma fila: en «Qué cubre» el título es una sola
   palabra y apilados dejaban un hueco. */
.card-cab{display:flex;align-items:center;gap:.75rem;margin-bottom:.55rem}
.card-cab h3{margin:0}

/* ── SUBBLOQUE ─────────────────────────────────────────────────── */
.subblock{margin-top:var(--s8)}
.subblock h3{
  font-size:1.375rem;font-weight:600;line-height:1.2;letter-spacing:-.018em;
  margin:0 0 var(--s3);
}
.subblock .lead{margin-bottom:0}

/* ── EL CICLO: TRES PASOS, IZQUIERDA A DERECHA ─────────────────────
   Es un <ol> porque el orden es información: la materia prima entra
   antes de producirse y el despacho sale después. El chevron entre
   pasos es un pseudo-elemento, no un carácter suelto en el marcado. */
.ciclo{
  list-style:none;margin:var(--s7) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);
}
.ciclo li{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;position:relative}
.ciclo li + li::before{
  content:"";position:absolute;top:15px;left:calc(-1 * var(--s6) / 2 - 3px);
  width:7px;height:7px;transform:rotate(45deg);
  border-top:1.5px solid var(--line);border-right:1.5px solid var(--line);
}
.ciclo .ico{
  width:34px;height:34px;display:block;
  fill:none;stroke:var(--brand);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.ciclo h4{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.ciclo p{margin:0;color:var(--muted);font-size:.96875rem;line-height:1.58}

/* ── FUNCIONALIDADES: un escenario y tres grupos ──────────────────
   Arriba, las funcionalidades que tienen video: la lista a la izquierda y UN
   solo video grande que al terminar pasa solo al siguiente (landing.js).
   Antes cada clip vivía en un <details> por fila y casi nadie lo abría: el
   video era lo más convincente de la página y quedaba escondido.
   Abajo, el resto en tres grupos con ícono: se escanean de un vistazo, que es
   lo que hace alguien que está evaluando. */
.escenario{display:grid;grid-template-columns:20rem minmax(0,1fr);gap:var(--s6);align-items:center}
.guia{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.feat{
  appearance:none;border:0;background:none;font:inherit;color:var(--muted);
  width:100%;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:20px 1fr;column-gap:.7rem;align-items:center;
  padding:.7rem .85rem;border-radius:var(--r-sm);
  position:relative;overflow:hidden;
  transition:background-color 150ms ease;
}
.feat b{font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
/* La descripción sólo se ve en el elegido: seis párrafos abiertos a la vez
   serían otra vez la lista de texto que se quiso sacar. */
.feat span{grid-column:2;display:none;margin-top:.2rem;font-size:.90625rem;line-height:1.5;color:var(--muted)}
.feat[aria-pressed="true"]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.feat[aria-pressed="true"] .ic{color:var(--brand)}
.feat[aria-pressed="true"] span{display:block}
/* La barrita de abajo avanza con el clip: --v la escribe landing.js en cada
   timeupdate (de 0 a 1). Así se ve cuánto falta para que pase al siguiente. */
.feat[aria-pressed="true"]::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;
  width:calc(var(--v, 0) * 100%);background:var(--brand);
  transition:width 250ms linear;
}
.feat:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* width/height del <video> le dan el aspect-ratio desde el primer paint, y el
   poster ocupa la caja hasta que el escenario entra en pantalla. */
.pantalla{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;
  background:var(--well);border-radius:var(--r);box-shadow:var(--elev)}
.grupos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s8)}
.grupo h3{
  margin:0;padding-bottom:.6rem;border-bottom:1px solid var(--line);
  font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.filas{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.fila{display:flex;align-items:flex-start;gap:.75rem}
.fila b{display:block;font-size:.96875rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.fila p{margin:.15rem 0 0;color:var(--muted);font-size:.90625rem;line-height:1.5}

/* ── EL VIDEO DE PRESENTACIÓN ──────────────────────────────────────
   16/9 fijo por aspect-ratio: la caja ocupa su lugar desde el primer
   paint, así el clic no empuja la página hacia abajo. */
.video{
  margin:var(--s7) auto 0;
  max-width:75%;
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--elev);background:var(--surface);
  aspect-ratio:16/9;position:relative;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* El facade es un <button> de verdad: entra por Tab y responde a Enter y
   Espacio sin una linea de JS extra. */
.video-play{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:end center;cursor:pointer;
  border:0;padding:0;font:inherit;color:#ffffff;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--brand-soft), transparent 70%),
    var(--surface);
  transition:filter 150ms ease;
}
.video-play:focus-visible{outline:2px solid var(--brand);outline-offset:-4px}
/* La portada: un cuadro del producto en lugar de una caja vacía. Es un <img>
   con loading="lazy" y no un background: así lleva width/height y el navegador
   no la pide hasta que la sección se acerca. El velo de abajo es lo que deja
   leer el texto blanco sobre cualquier cuadro, en los dos temas. */
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-play::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,12,22,.08), rgba(9,12,22,.62))}
.video-msg{position:relative;z-index:1;display:grid;justify-items:center;gap:.5rem;text-align:center;padding:var(--s5) var(--s5) var(--s6)}
.video-msg svg{
  width:56px;height:56px;padding:14px;box-sizing:border-box;
  border-radius:999px;background:var(--brand);fill:var(--btn-ink);
  box-shadow:0 8px 24px -8px var(--brand);
  transition:transform 150ms var(--out);
}
.video-msg b{font-size:1.0625rem;font-weight:600;letter-spacing:-.012em}
.video-msg small{color:rgba(255,255,255,.85);font-size:.9375rem}
@media (hover:hover) and (pointer:fine){
  .video-play:hover .video-msg svg{transform:scale(1.06)}
}

/* ── EL ASISTENTE: una conversación de ejemplo ────────────────────
   Contar lo que hace el asistente no convence tanto como verlo contestar.
   La conversación es un <figure> estático y a propósito no tiene campo de
   texto: uno que no hace nada invita a escribir y frustra. Las respuestas
   describen lo que el asistente hace de verdad; si cambia, cambian acá. */
.asistente{display:grid;grid-template-columns:28rem minmax(0,1fr);gap:var(--s7);align-items:start;margin-top:var(--s6)}
.chat{margin:0;background:var(--surface);border-radius:var(--r);box-shadow:var(--elev);
  padding:var(--s5);display:flex;flex-direction:column;gap:.75rem}
.chat-cab{display:flex;align-items:center;gap:.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--line);
  font-size:.875rem;font-weight:600;color:var(--ink-2)}
.chat-cab img{width:22px;height:22px;display:block}
.msg{margin:0;max-width:88%;padding:.6rem .85rem;border-radius:14px;font-size:.9375rem;line-height:1.45}
.msg.yo{align-self:flex-end;background:var(--brand);color:var(--btn-ink);border-bottom-right-radius:4px}
.msg.vesta{align-self:flex-start;background:var(--well);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);border-bottom-left-radius:4px}
.capacidades{list-style:none;margin:0;padding:0}
.capacidades li{display:flex;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.capacidades li:first-child{padding-top:0}
.capacidades li:last-child{border-bottom:0}
.cap-tit{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.capacidades h3{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.capacidades p{margin:.25rem 0 0;color:var(--muted);font-size:.96875rem;line-height:1.55}
/* El estado va escrito, no sólo en color: «Beta» se lee aunque no se
   distinga el relleno del contorno. */
.estado{display:inline-flex;align-items:center;padding:.12rem .55rem;border-radius:999px;
  border:1px solid var(--brand);color:var(--brand);
  font-size:.71875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}
.estado.hoy{background:var(--brand);color:var(--btn-ink)}

/* ── ACERCA DE ─────────────────────────────────────────────────── */
.acerca{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s7);align-items:center}
.acerca .lead{margin:0}
.creds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.creds li{display:flex;align-items:center;gap:.75rem;font-weight:600;line-height:1.35}

/* ── FORMULARIO DE CONTACTO ────────────────────────────────────────
   Reemplaza al botón de mailto:, que no abre nada si el sistema no tiene un
   cliente de correo registrado. La validación es la del navegador: con
   `required` y `type=email` el evento submit ni se dispara si falta algo, así
   que acá no hay una sola línea de JS validando.
   El ancho se corta en 44rem: con el --measure de 68rem un campo para un
   nombre mediría 500px. */
.form{
  background:var(--surface);padding:var(--s5);
  border-radius:var(--r);box-shadow:var(--elev);
  max-width:44rem;
}
.campos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.campo{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.campo label{font-size:.875rem;font-weight:500;letter-spacing:-.004em;color:var(--ink-2)}
/* Dentro del <label> y no al lado: así el lector de pantalla lo anuncia junto
   al nombre del campo y no como un texto suelto. */
.opt{color:var(--muted);font-weight:400}
.campo input{
  /* 1rem = 16px. Por debajo de eso iOS hace zoom al enfocar el campo y
     descuadra la página entera. */
  font:inherit;font-size:1rem;line-height:1.3;color:var(--ink);
  background:var(--well);
  border:1px solid var(--campo-line);border-radius:var(--r-sm);
  padding:.7rem .85rem;width:100%;min-width:0;
  transition:border-color 120ms ease, background-color 120ms ease;
}
/* Un input matchea :focus-visible siempre que esté enfocado, con mouse o con
   teclado: no hace falta un :focus aparte ni un outline:none. */
.campo input:focus-visible{
  background:var(--surface);border-color:var(--brand);
  outline:2px solid var(--brand);outline-offset:1px;
}
/* :user-invalid y NO :invalid: el segundo pinta de rojo todos los campos
   vacíos apenas carga la página, antes de que nadie escriba nada. */
.campo input:user-invalid{border-color:var(--danger)}
.campo input:user-invalid:focus-visible{border-color:var(--danger);outline-color:var(--danger)}
/* Sin esto Chrome pinta el campo autorrellenado con SU fondo claro y su texto
   oscuro: en tema oscuro queda un bloque blanco en medio de la tarjeta. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--well) inset;
  caret-color:var(--ink);
}

/* Trampa para robots: el que completa todo lo que encuentra llena este campo y
   el mail sale con el asunto marcado — pero SALE. Fuera de pantalla y NO
   display:none, porque muchos bots saltean lo que está oculto por CSS. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* El .btn del archivo está escrito para un <a>. Como <button> le faltan
   exactamente estos tres reseteos. */
button.btn{appearance:none;border:0;cursor:pointer}
.form .btn{width:100%;margin-top:var(--s5)}
/* aria-disabled y no [disabled]: un elemento deshabilitado no puede tener el
   foco, así que `disabled` se lo tira al <body> justo cuando hay algo que
   anunciar. El doble envío lo frena la bandera del JS. */
.btn[aria-disabled="true"],.btn[aria-disabled="true"]:hover{
  cursor:default;opacity:.6;filter:none;transform:none;
  box-shadow:0 1px 2px rgba(9,12,22,.10);
}

.aviso{margin:var(--s4) 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
/* margin:0 y NO display:none: una región viva escondida con display queda
   fuera del árbol de accesibilidad y el anuncio no se dispara. */
.aviso:empty{margin:0}
.aviso[data-error]{color:var(--danger)}
/* Enviado: se van los campos y el botón, queda el acuse. */
.form[data-ok] .campos,
.form[data-ok] .trampa,
.form[data-ok] .btn{display:none}
.form[data-ok] .aviso{margin:0}
/* ── QUÉ PASA DESPUÉS ──────────────────────────────────────────────
   Al lado del formulario, los tres pasos que siguen a la consulta: quien está
   por escribir sabe qué le espera. Es un <ol> porque el orden es información;
   el número lo pone un contador CSS y la línea que une los pasos es el ::after.
   Debajo de los pasos cuelgan los dos escapes, WhatsApp y el correo. */
.contacto{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.despues h3{margin:0 0 var(--s5);font-size:1.1875rem;font-weight:600;line-height:1.28;letter-spacing:-.014em}
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso}
.paso{display:grid;grid-template-columns:28px 44px 1fr;column-gap:var(--s4);align-items:start;
  position:relative;padding-bottom:var(--s5)}
.paso:last-child{padding-bottom:0}
.paso::before{counter-increment:paso;content:counter(paso);
  display:grid;place-items:center;width:28px;height:28px;margin-top:8px;border-radius:999px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-hi);
  font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.paso::after{content:"";position:absolute;left:13.5px;top:42px;bottom:4px;width:1px;background:var(--line)}
.paso:last-child::after{display:none}
.paso b{display:block;font-size:1rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.paso p{margin:.2rem 0 0;color:var(--muted);font-size:.9375rem;line-height:1.5}
.pasos + .wa-cta{margin-top:var(--s6)}
.wa-cta + .cta-note{margin-top:var(--s4)}
.cta-note a{color:var(--brand);text-underline-offset:2px}
.cta-note a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ── EL ATAJO POR WHATSAPP ─────────────────────────────────────────
   Va FUERA del <form>, y no es una decisión de layout: adentro, el
   .form[data-ok] .btn de acá arriba lo escondería justo cuando el que ya envió
   quiere el atajo, y el form.querySelector('.btn') de formulario.js lo tomaría
   por el botón de enviar y le colgaría a él el aria-disabled.
   Es un .btn para que mida EXACTAMENTE lo mismo de alto que el de enviar
   (43,2px) sin repetir el número en otra regla: si alguien toca ese padding,
   los dos se mueven juntos en vez de desalinearse en silencio. De .btn hereda
   además text-decoration:none, el :active, el :focus-visible, el
   prefers-reduced-motion y el borde de forced-colors — todo ya escrito.
   Lo único que cambia es que está VACÍO por dentro: el único elemento relleno
   de la página sigue siendo el de enviar, que es de lo que habla el comentario
   de .cta-row. */
.wa-cta{
  gap:.5rem;                    /* .btn no lo trae; el ícono lo necesita */
  color:var(--wa);background:var(--wa-soft);
  /* Un solo box-shadow dibuja el anillo y de paso mata el resplandor azul que
     .btn hereda de --brand. */
  box-shadow:inset 0 0 0 1px var(--wa);
}
/* El logo de WhatsApp es una silueta de fill, no de stroke como los .ic, y son
   dos subpaths: con el nonzero por defecto el auricular queda calado sólo si
   viene con el sentido de giro contrario. */
/* 16px y no 18: el <svg> es un flex item, y con align-items:center el alto de
   la fila lo fija el más alto. A 18px el botón medía 45,2px contra los 43,2 del
   de enviar, que no tiene ícono. A 16px empata la caja de línea del texto
   (line-height:1 sobre 1rem) y los dos miden exactamente lo mismo. */
.wa-cta svg{width:16px;height:16px;flex:none;fill:currentColor;fill-rule:evenodd}
@media (hover:hover) and (pointer:fine){
  /* El brightness(1.08) de .btn está pensado para un relleno; sobre una
     píldora clara lo lava. Y hay que reponer el anillo, porque .btn:hover pisa
     el box-shadow entero con el resplandor azul. */
  .wa-cta:hover{filter:brightness(.96);box-shadow:inset 0 0 0 1px var(--wa)}
}

/* ── PIE DE PÁGINA ──────────────────────────────────────────────────
   Es un <div> y no un <nav>: la regla nav{} de arriba le daría la posición
   fija del encabezado. Los enlaces a secciones usan los anclas del idioma de
   cada página. */
.pie{background:var(--surface);border-top:1px solid var(--line);padding:var(--s7) 0 var(--s6)}
.pie-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--s6)}
.pie p{margin:.6rem 0 0;color:var(--muted);font-size:.9375rem;line-height:1.5;max-width:34ch}
.pie .pie-h{margin:0 0 .6rem;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.pie a{color:var(--ink-2);text-decoration:none;font-size:.9375rem}
.pie a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.pie-c{display:flex;align-items:center;gap:.5rem}
.pie-c .ic{width:16px;height:16px;color:var(--muted)}
.pie .pie-fin{max-width:none;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-size:.8125rem}

/* ── ACCESIBILIDAD ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .seg .thumb{transition:none}
  .seg a:active,.tema:active,.btn:active{transform:none}
  .card,.btn{transition-property:box-shadow,filter}
  .feat,.feat::after{transition:none}
  .video-msg svg{transition:none}
  .card:hover,.btn:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  #glow{display:none}
}
@media (prefers-contrast:more){
  :root{--line:#9aa2b4;--muted:#4a5162}
  .card,.pantalla,.chat,.chip,.form{box-shadow:0 0 0 1px var(--line)}
  .seg a:focus-visible{outline-width:3px}
}
@media (forced-colors:active){
  .seg .thumb{display:none}
  .seg a[aria-current="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .card,.pantalla,.chat,nav,.form{border:1px solid CanvasText}
  /* `.btn,button.btn` y no `.btn` solo: el reseteo button.btn{border:0} del
     formulario tiene especificidad (0,1,1) y le ganaría, dejando el botón de
     enviar sin borde justo en el modo que existe para que se vea. */
  .btn,button.btn{border:1px solid ButtonText}
  .video-play{forced-color-adjust:none;background:ButtonFace;color:ButtonText;border:1px solid ButtonText}
  .feat[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
/* ── EL ENCABEZADO SE PLIEGA ANTES QUE EL RESTO ────────────────────
   1100px, y no 760px como el resto de la página: el umbral es «dónde deja de
   entrar la fila», y si el control se parte en dos o tres renglones dentro de
   un cromo fijo es caro.
   Era 1000px hasta que entró el selector de idioma, que sumó 95px + un gap.
   Medido a 1280 con Chrome en macOS: marca 88 + control 714 + idioma 95 +
   tema 32 = 929, más 3 gaps de 24 = 1001px, contra una caja útil de
   (ancho - 64) por el --gutter. O sea que la fila necesita 1065px de viewport;
   con el umbral en 1000 quedaba envuelta en dos entre los 1001 y los 1090, que
   es justo el ancho de una laptop chica.
   El margen hasta 1100 es a propósito: en Windows la tipografía del sistema es
   Segoe UI, las píldoras miden distinto, y el equipo trabaja mezclado.
   Si se agrega o se saca cualquier cosa del <nav>, hay que volver a medir. */
@media (max-width:1100px){
  .nav-in{gap:var(--s4)}
  /* El encabezado se resuelve en UNA fila: marca · tema · hamburguesa.
     Antes el control 2x2 se comía una segunda fila del cromo fijo, que
     en un teléfono es caro. Los enlaces son los mismos: el control se
     reubica como panel desplegable, no se duplica el marcado. */
  .menu{display:grid}
  /* El hamburguesa va al borde derecho: es donde llega el pulgar. */
  .brand{order:1} .idioma{order:2;margin-left:auto} .tema{order:3} .menu{order:4}
  .seg{
    position:absolute;top:calc(100% + .4rem);left:var(--gutter);right:var(--gutter);
    flex-direction:column;padding:6px;border-radius:14px;
    /* Sólido, NO otro vidrio: dos superficies translúcidas apiladas
       destruyen la legibilidad. */
    background:var(--surface);
    box-shadow:0 0 0 1px var(--line), 0 12px 32px -8px rgba(9,12,22,.28);
    display:none;
  }
  nav[data-abierto] .seg{display:flex}
  .seg a{text-align:left;padding:.7rem .8rem;white-space:normal}
  .seg a + a::before{display:none}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  /* El flujo se apila y el chevron gira: sigue leyéndose como una secuencia. */
  .ciclo{grid-template-columns:1fr;gap:var(--s5)}
  .ciclo li + li::before{top:calc(-1 * var(--s5) / 2 - 3px);left:13px;transform:rotate(135deg)}
  .escenario,.grupos,.asistente,.acerca,.contacto{grid-template-columns:1fr}
  /* En una columna el video va primero: es lo que se mira. */
  .escenario .pantalla{order:-1}
  .pie-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  header{padding:var(--s8) 0 var(--s7)}
  .seccion{padding:var(--s8) 0}
  h1{max-width:none}
  /* El botón ocupa el ancho: en un teléfono, un botón angosto al lado de
     una línea de texto se lee como parte del párrafo. */
  .cta-row{align-items:stretch;flex-direction:column;gap:var(--s3)}
  .btn{width:100%}
  .video{max-width:100%}
  .campos{grid-template-columns:1fr}
  /* Cinco etiquetas en un teléfono son cinco renglones: quedan las tres primeras. */
  .chip.extra{display:none}
  .pie-grid{grid-template-columns:1fr}
  .form{padding:var(--s4)}
}

/* Un iPhone SE de primera generación son 320px, y ahí la fila del encabezado
   —marca 88 + idioma + tema 32 + hamburguesa 32, más tres gaps— se pasa de los
   280px útiles y envuelve en dos filas. Antes del selector de idioma entraba
   con holgura; ahora hay que apretar acá y sólo acá, para que a 360px y más el
   selector siga con el tamaño cómodo.
   Medido: con esto la fila entra desde 320px, que es el viewport más angosto
   que existe en un teléfono real (iPhone SE de 2016, iPhone 5). Por debajo de
   320 envuelve, y se deja así a propósito: taparlo pedía esconder la palabra
   «Vesta» del logo, y no hay dispositivo tan angosto. */
@media (max-width:380px){
  .nav-in{gap:var(--s3)}
  .idioma{gap:0}
  .idioma a{font-size:.75rem;padding:.25rem .28rem}
}