/* ─────────────────────────────────────────────────────────────
   PALETA · Blu
   El nombre es el color, así que el azul no vive solo en el
   acento: los neutros también están sesgados a azul frío, para
   que toda la superficie sea Blu sin gritarlo.
   Azul de Prusia, no navy corporativo, la inclinación verdosa
   lo separa del azul marino que usa el resto del rubro.

   Tres capas apiladas:
     1. paleta base, según tema claro u oscuro del lector
     2. tinte horario, que se mezcla encima
     3. tokens finales = base + tinte
   El acento NO se tiñe: la tinta con la que se firma es siempre
   la misma. Lo que cambia es la luz que le llega.
   ───────────────────────────────────────────────────────────── */

/* capa 1 · paleta base */
:root {
  --bg-base:#F4F9FF; --surface-base:#FDFEFF; --surface-2-base:#EAF2FC; --line-base:#D3E2F1;
  --ink:#0F1922; --muted:#4E5E6E; --faint:#5F7488;
  --accent:#0F3D68; --accent-ink:#F1F7FC; --accent-soft-base:#DBE7F2; --accent-line:#A7C3DA;
  --shadow:none; --danger:#BC3A1A;
  --font-display:"Hoefler Text","Baskerville","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --display-weight:600; --display-track:-0.012em;
}
/* El sitio va siempre en la paleta clara. Se evaluó seguir la
   preferencia del equipo del visitante y se descartó: un estudio
   jurídico se presenta igual ante todos, y una sola paleta es una
   sola cosa que revisar y mantener. */

/* capa 2 · tinte horario, todo en azul
   El arco del día se expresa variando claridad y profundidad
   dentro del azul, nunca temperatura: un tinte ámbar sobre
   blanco da crema y un azul muy oscuro y desaturado da gris,
   y las dos cosas pelean con la marca. */
:root                        { --tint:#3E6FA8; --tint-amt:0%; }
:root[data-phase="madrugada"]{ --tint:#0B1B3A; --tint-amt:12%; }
:root[data-phase="amanecer"] { --tint:#7FA9D0; --tint-amt:11%; }
:root[data-phase="manana"]   { --tint:#BEDCF6; --tint-amt:12%; }
:root[data-phase="tarde"]    { --tint:#3E6FA8; --tint-amt:0%; }
:root[data-phase="atardecer"]{ --tint:#3D6493; --tint-amt:11%; }
:root[data-phase="noche"]    { --tint:#16264F; --tint-amt:13%; }

/* capa 3 · tokens finales
   Solo el SUELO recibe la luz, el fondo de página y las bandas
   alternadas. El papel no: tarjetas, campos, filetes y el
   recuadro de acento se mantienen fijos todo el día. Si se
   tiñera todo, nada cambiaría en relación a nada. */
:root {
  --bg:var(--bg-base);
  --surface-2:var(--surface-2-base);
  --surface:var(--surface-base);
  --line:var(--line-base);
  --accent-soft:var(--accent-soft-base);
  --field:var(--surface-2-base);
}
@supports (color: color-mix(in srgb, red 10%, blue)) {
  :root {
    --bg:        color-mix(in srgb, var(--tint) var(--tint-amt), var(--bg-base));
    --surface-2: color-mix(in srgb, var(--tint) var(--tint-amt), var(--surface-2-base));
  }
}

/* ─────────────────────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────────────────────── */
:root {
  --font-body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1.0625rem;
  --t-lg:1.3125rem; --t-xl:1.75rem; --t-2xl:2.375rem;
  /* contraste de escala real: el hero manda y los títulos de
     sección se subordinan. Antes estaban casi al mismo tamaño,
     que es lo que aplana una página. */
  /* compartiendo fila con el formulario, el hero baja de 5.5rem
     a 3.7rem: sigue mandando sobre los títulos de sección */
  --t-hero:clamp(2.4rem,4.9vw,3.7rem);
  --t-sec:clamp(1.55rem,3vw,2.05rem);
  --wrap:1140px; --read:64ch;
  --pad:clamp(1.15rem,4vw,2.5rem);
  /* radios redondeados: contenedores más blandos que los controles,
     manteniendo la diferencia entre superficie y cosa clicable */
  --r:14px; --r-ctl:9px;
  color-scheme:light dark;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* el cambio de luz se cruza suave, no salta */
body, .chrome, .note, .sec--tint, .capture, .cost, .basket, .case,
.prof, .rec, .scn, .lead-card, .seg, table, thead th {
  transition:background-color .9s ease, border-color .9s ease;
}
h1,h2,h3,h4 {
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-track); line-height:1.1;
  text-wrap:balance; margin:0;
}
p { margin:0; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection { background:var(--accent); color:var(--accent-ink); }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.read { max-width:var(--read); }
.eyebrow {
  font-family:var(--font-mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0;
}
.eyebrow--muted { color:var(--faint); }
/* una frase entera no aguanta el tracking de una etiqueta corta */
.eyebrow--long { letter-spacing:.07em; }
.lede { font-size:var(--t-md); color:var(--muted); line-height:1.62; }
.stack { display:flex; flex-direction:column; }
.hr { height:1px; background:var(--line); border:0; margin:0; }

/* ─────────────────────────────────────────────────────────────
   CHROME, barra de control del prototipo
   ───────────────────────────────────────────────────────────── */
.chrome {
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.chrome__in {
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  min-height:58px; padding-block:.55rem;
}
.chrome__id { display:flex; align-items:center; gap:.8rem; margin-right:auto; }

/* lockup de marca: el nombre en serif, el descriptor en mono
   espaciado. Es lo único que se repite en todas las piezas. */
.mark { display:inline-flex; align-items:baseline; gap:.42rem; white-space:nowrap; }
.mark__name {
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:-0.022em; font-size:1.15rem; line-height:1;
}
.mark__kind {
  font-family:var(--font-mono); font-size:.625rem; line-height:1;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.mark--lg .mark__name { font-size:1.75rem; }
/* logotipo real. Las dos superficies donde aparece tienen color
   fijo (la capsula del menu siempre clara, el pie siempre #0E2338),
   asi que cada una lleva su version y no hay que conmutar por tema. */
/* El logotipo se define una sola vez y lo comparten el menú y
   la barra del prototipo. Va como fondo y no como <img> para no
   arrastrar dos copias del archivo dentro del HTML.
   La palabra LEGAL es muy pequeña en proporción: por debajo de
   unos 40px deja de leerse, así que 2.5rem es el mínimo útil. */
:root { --logo-tinta:url("img/logo.png"); }
.mark--nav, .chrome__logo {
  display:block; flex:none;
  background:var(--logo-tinta) left center/contain no-repeat;
  aspect-ratio:480/215; height:2.5rem;
}
.mark--nav { text-decoration:none; }
.mark--pie { display:block; width:auto; height:2.8rem; margin-bottom:.5rem; }
@media (max-width:520px) { .mark--nav, .chrome__logo { height:2.1rem; } }
.mark--lg .mark__kind { font-size:.6875rem; letter-spacing:.28em; }
.chrome__tag {
  font-family:var(--font-mono); font-size:var(--t-xs);
  color:var(--faint); letter-spacing:.04em;
}
.seg {
  display:inline-flex; padding:2px; gap:2px;
  background:var(--field); border:1px solid var(--line); border-radius:999px;
}
/* el conmutador va en píldora: el radio interior compensa el
   padding del contenedor para que las curvas queden concéntricas */
.seg button {
  font:inherit; font-size:var(--t-sm); font-weight:500;
  padding:.34rem .95rem; border:0; border-radius:999px;
  background:transparent; color:var(--muted); cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.seg button:hover { color:var(--ink); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] {
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
}
.seg__label {
  align-self:center; font-family:var(--font-mono); font-size:var(--t-xs);
  color:var(--faint); letter-spacing:.09em; text-transform:uppercase;
}
.ctl { display:flex; align-items:center; gap:.5rem; }

/* control de luz */
.clock { gap:.55rem; }
.clock__auto {
  font:inherit; font-size:var(--t-sm); font-weight:500;
  padding:.3rem .85rem; border:1px solid var(--line); border-radius:999px;
  background:var(--field); color:var(--muted); cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.clock__auto:hover { color:var(--ink); }
.clock__auto[aria-pressed="true"] {
  background:var(--surface); color:var(--accent);
  border-color:var(--accent-line); box-shadow:var(--shadow);
}
.clock__range { width:100px; accent-color:var(--accent); cursor:pointer; }
.clock__out {
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint);
  letter-spacing:.05em; text-transform:uppercase;
  min-width:12ch; font-variant-numeric:tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   AVISO DE PROTOTIPO
   ───────────────────────────────────────────────────────────── */
.note {
  background:var(--accent-soft); border-bottom:1px solid var(--accent-line);
  font-size:var(--t-sm); color:var(--ink);
}
.note__in { padding-block:.7rem; }
.note b { font-weight:600; }

/* ─────────────────────────────────────────────────────────────
   SITIO, hero
   ───────────────────────────────────────────────────────────── */
/* ── navegación del sitio ─────────────────────────────────
   Distinta de la barra gris de arriba, que es control del
   prototipo. Esta es la del sitio real. */
/* cápsula flotante: se despega de los bordes y viaja con el
   scroll por debajo de la barra del prototipo, cuya altura se
   mide en JS porque cambia al envolverse */
.sitenav {
  position:sticky; top:calc(var(--chrome-h, 0px) + .7rem); z-index:40;
  pointer-events:none;
  /* se saca del flujo hacia abajo para que la página empiece
     debajo y la cápsula quede flotando encima del hero */
  margin-bottom:calc(-1 * var(--nav-h, 62px));
}
.page { padding-top:calc(var(--nav-h, 62px) + .9rem); }
/* La cápsula no sigue el tema del lector a propósito: se queda
   en blanco azulado siempre. En modo oscuro seguía a --surface y
   se volvía un bloque negro, y sobre el video del hero una
   cápsula clara se lee bastante más elegante. */
/* la cápsula ya no es el contenedor de ancho: vive dentro de uno,
   para que su borde redondeado se alinee con el contenido de las
   secciones en vez de llegar al borde de la ventana */
.sitenav__wrap { pointer-events:none; }
.sitenav__in {
  pointer-events:auto;
  display:flex; align-items:center; gap:1rem 1.5rem; flex-wrap:wrap;
  padding:.45rem .5rem .45rem 1.35rem;
  background:rgba(240,246,253,.78);
  backdrop-filter:saturate(1.5) blur(20px);
  -webkit-backdrop-filter:saturate(1.5) blur(20px);
  border:1px solid rgba(15,61,104,.13); border-radius:999px;
}
@supports not (backdrop-filter: blur(1px)) {
  .sitenav__in { background:#F2F7FC; }
}
.sitenav .mark { margin-right:auto; }
.sitenav .mark__name { color:#0D2035; }
.sitenav .mark__kind { color:#5A7391; }

/* indicador deslizante: una sola píldora que se mueve entre
   ítems en vez de que cada botón encienda su propio fondo */
.sitenav__links { position:relative; display:flex; flex-wrap:wrap; gap:.15rem; }
.sitenav__pill {
  position:absolute; z-index:0; inset-block:0; left:0; width:0;
  background:#0F3D68; border-radius:999px; opacity:0;
  transition:transform .38s cubic-bezier(.32,.75,.28,1),
             width .38s cubic-bezier(.32,.75,.28,1), opacity .2s ease;
  pointer-events:none;
}
/* en el sitio publicado los ítems son enlaces reales, no botones:
   cada página tiene su propia dirección */
.sitenav__links a {
  position:relative; z-index:1;
  font:inherit; font-size:var(--t-sm); color:#3A5675;
  text-decoration:none;
  background:transparent; border:0; border-radius:999px;
  padding:.44rem .95rem; cursor:pointer; white-space:nowrap;
  transition:color .22s ease, background-color .16s ease;
}
.sitenav__links a:hover { color:#0D2035; }
.sitenav__links a[aria-current="page"] { color:#F1F7FC; }
/* respaldo cuando la píldora no corre: los ítems envueltos o sin JS */
.sitenav__links:not(.has-pill) a[aria-current="page"] { background:#0F3D68; }

@media (max-width:640px) {
  .sitenav__in { padding-left:1rem; border-radius:20px; }
  .sitenav .mark { margin-right:0; }
}
@media (prefers-reduced-motion: reduce) {
  .sitenav__pill { transition:none; }
}

/* ── hero con media de fondo ──────────────────────────────
   Listo para recibir el video. El <video> se incrusta como
   data URI porque el CSP bloquea cualquier host externo.
   Sin archivo, el degradado hace de plano: la composición y
   la legibilidad se pueden juzgar igual. */
.hero--media {
  position:relative; isolation:isolate; overflow:hidden;
  /* el degradado vive en la sección, no en el video: así queda
     como respaldo si el video se oculta o no alcanza a pintar */
  background:linear-gradient(160deg,#0E2036 0%,#16324F 45%,#25506F 100%);
}
.hero--media > .hero__media,
.hero--media > .hero__tone,
.hero--media > .hero__scrim { position:absolute; inset:0; z-index:-1; }

/* duotono: el video se desatura por completo y la capa de tono le
   devuelve solo hue y saturación con mix-blend-mode:color. Así el
   plano entra en la escala de azules en vez de traer sus verdes y
   tierras. El tono y el brillo cambian con la hora, igual que el
   resto de la página. */
.hero__media {
  width:100%; height:100%; object-fit:cover; display:block; border:0;
  filter:grayscale(1) contrast(1.06) brightness(var(--hero-dim,1));
}
.hero__tone { background:var(--hero-tone,#14456F); mix-blend-mode:color; }

.hero--media                          { --hero-tone:#14456F; --hero-dim:1; }
:root[data-phase="madrugada"] .hero--media { --hero-tone:#0D2750; --hero-dim:.42; }
:root[data-phase="amanecer"]  .hero--media { --hero-tone:#2A6493; --hero-dim:.78; }
:root[data-phase="manana"]    .hero--media { --hero-tone:#2C77AC; --hero-dim:.96; }
:root[data-phase="tarde"]     .hero--media { --hero-tone:#14456F; --hero-dim:1; }
:root[data-phase="atardecer"] .hero--media { --hero-tone:#1D4B77; --hero-dim:.76; }
:root[data-phase="noche"]     .hero--media { --hero-tone:#0B1E3D; --hero-dim:.48; }
.hero__scrim {
  background:
    linear-gradient(to right, rgba(9,18,30,.86) 0%, rgba(9,18,30,.62) 46%, rgba(9,18,30,.34) 100%),
    linear-gradient(to top, rgba(9,18,30,.5) 0%, transparent 55%);
}
/* sobre media, la columna de texto se invierte; la tarjeta del
   formulario se queda blanca, que sobre video se lee mejor */
.hero--media .eyebrow { color:#A9C6E4; }
.hero--media h1       { color:#FFFFFF; }
.hero--media .hero__sub { color:rgba(255,255,255,.82); }
@media (prefers-reduced-motion: reduce) {
  .hero__media { display:none; }
}

/* titular y formulario lado a lado */
.hero { padding-block:clamp(2.75rem,7vw,5rem); }
.hero--media { padding-block:clamp(3.5rem,9vw,6.5rem); }
.hero h1 { font-size:var(--t-hero); margin-block:1rem 1.15rem; max-width:13ch; line-height:1.04; }
.hero__grid {
  display:grid; gap:clamp(1.75rem,4vw,4rem); align-items:start;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
@media (max-width:900px) { .hero__grid { grid-template-columns:minmax(0,1fr); } }
.hero__sub { font-size:clamp(1.0625rem,1.9vw,1.3125rem); color:var(--muted); line-height:1.5; max-width:32ch; }

/* tira de indicadores, el reloj corre de verdad */
/* dos columnas: arriba fecha y hora, abajo las dos cifras.
   Quedan alineadas en columna, que es como se comparan */
.ticker {
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; margin:2rem 0 0; padding:0;
  font-family:var(--font-mono); font-size:var(--t-xs);
}
/* fuerza el salto: arriba la fecha y la hora, abajo los tres
   índices. Un corte de ancho completo y alto cero */
.ticker__corte { flex-basis:100%; height:0; margin:0; }
@media (max-width:560px) { .ticker__corte { display:none; } }
.ticker__i { display:flex; align-items:baseline; gap:.5rem; }
.ticker dt { letter-spacing:.11em; text-transform:uppercase; color:var(--faint); }
.ticker dd { margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }
.ticker__live { min-width:8ch; }
.hero--media .ticker dt { color:rgba(255,255,255,.55); }
.hero--media .ticker dd { color:rgba(255,255,255,.92); }

@media (prefers-reduced-motion: reduce) {
  body, .chrome, .note, .sec--tint, .capture, .cost, .basket, .case,
  .prof, .rec, .scn, .lead-card, .seg, table, thead th { transition:none; }
}

/* ─────────────────────────────────────────────────────────────
   CAPTURA DE LEAD
   ───────────────────────────────────────────────────────────── */
.capture {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:clamp(1.4rem,3vw,1.9rem);
}
.capture__h { font-size:var(--t-lg); margin-bottom:.35rem; }
.capture__p { font-size:var(--t-sm); color:var(--muted); margin-bottom:1.2rem; }

/* bifurcación previa: empresa o persona. Filtra en la puerta en
   vez de tratar a todos igual y descubrirlo después */
.gate { display:grid; gap:.7rem; }
.gate__opt {
  font:inherit; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:.3rem;
  padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--field); color:var(--ink);
  transition:border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.gate__opt:hover {
  border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px);
}
.gate__t {
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-track); font-size:var(--t-md);
}
.gate__d { font-size:var(--t-xs); color:var(--muted); }
@media (prefers-reduced-motion: reduce) { .gate__opt:hover { transform:none; } }

/* migaja con la opción elegida y salida para cambiarla */
.capture__crumb {
  display:flex; align-items:baseline; gap:.6rem; margin-bottom:.9rem;
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:.07em; text-transform:uppercase; color:var(--faint);
}
.capture__crumb button {
  font:inherit; letter-spacing:.07em; text-transform:uppercase;
  background:none; border:0; padding:0; cursor:pointer; color:var(--accent);
  text-decoration:underline; text-underline-offset:3px;
}
.field { display:flex; flex-direction:column; gap:.34rem; margin-bottom:.9rem; }
.field > label {
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.field textarea, .field input, .field select {
  font:inherit; font-size:var(--t-base); color:var(--ink);
  /* sobre fondo blanco los campos necesitan relleno propio,
     si no el formulario desaparece dentro de la tarjeta */
  background:var(--field); border:1px solid var(--line); border-radius:var(--r-ctl);
  padding:.58rem .7rem; width:100%; transition:border-color .16s ease;
}
.field textarea { min-height:92px; resize:vertical; line-height:1.55; }
.field textarea:hover, .field input:hover, .field select:hover { border-color:var(--faint); }
.field textarea:focus, .field input:focus, .field select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
/* estado de error, un formulario sin estados se lee como inacabado */
/* Aviso de error de envío. No reemplaza el formulario a
   propósito: lo que la persona escribió tiene que seguir a la
   vista para que pueda reintentar o copiarlo. Perder el texto
   es la forma más rápida de perder el lead. */
.aviso {
  border:1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
  background:color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-radius:var(--r); padding:.9rem 1.05rem; margin-bottom:1.1rem;
}
.aviso__h { font-size:var(--t-sm); font-weight:600; color:var(--danger); margin:0 0 .3rem; }
.aviso__p { font-size:var(--t-sm); color:var(--muted); margin:0; }
.aviso__p + .aviso__p { margin-top:.5rem; }
.aviso a { color:var(--accent); }
/* el botón mientras el envío está en curso */
.btn[aria-busy="true"] { opacity:.72; cursor:progress; }

/* marca de campo opcional, para que no se lea como obligatorio */
.field__opt {
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:.06em; text-transform:none; color:var(--faint);
}
/* marcas de estado dentro del anexo: separa lo que la página ya
   resuelve de lo que todavía es una propuesta */
.hecho, .sugerido {
  display:inline-block; vertical-align:.08em; margin-right:.5rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.09em;
  text-transform:uppercase; padding:.16rem .5rem; border-radius:999px;
}
.hecho    { color:var(--accent-ink); background:var(--accent); }
.sugerido { color:var(--accent); background:transparent; border:1px solid var(--accent-line); }

.field__err {
  display:none; font-size:var(--t-xs); color:var(--danger);
  padding-left:.7rem; border-left:2px solid var(--danger);
}
.field--error .field__err { display:block; }
.field--error > label { color:var(--danger); }
.field--error textarea,
.field--error input { border-color:var(--danger); }
.field--error textarea:focus,
.field--error input:focus {
  border-color:var(--danger);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.field__row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:520px) { .field__row { grid-template-columns:1fr; } }
.btn {
  font:inherit; font-size:var(--t-base); font-weight:600;
  padding:.66rem 1.35rem; border-radius:var(--r-ctl); border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, transform .08s ease;
}
/* hover con color explícito, no un filtro de brillo encima */
.btn:hover {
  background:color-mix(in srgb, var(--accent) 86%, var(--ink));
  border-color:color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.btn:active { transform:translateY(1px); }
.btn--ghost { background:transparent; color:var(--accent); }
.btn--ghost:hover { background:var(--accent-soft); border-color:var(--accent); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* El botón se vuelve flex solo cuando trae ícono. Hacerlo flex siempre
   obligaría a revisar los otros botones del sitio uno por uno; así
   conservan su caja exacta y no hay nada que comprobar. El ícono se
   mide en em para que crezca con la letra del botón. */
.btn:has(.btn__ico) {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
}
.btn__ico { width:1.15em; height:1.15em; flex:none; }
.capture__foot {
  display:flex; flex-direction:column; align-items:stretch;
  gap:.75rem; margin-top:.35rem;
}
.capture__foot .btn { width:100%; }
.capture__hint { font-size:var(--t-xs); color:var(--faint); }
.capture__foot .capture__hint { text-align:center; max-width:38ch; margin-inline:auto; }
/* tres etapas gobernadas por hidden, igual que la canasta */
.done__h { font-size:var(--t-lg); margin-bottom:.5rem; }
.done__p { font-size:var(--t-sm); color:var(--muted); margin-bottom:1.1rem; }
.lead-card {
  background:var(--field); border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:var(--r); padding:.9rem 1rem; font-family:var(--font-mono);
  font-size:var(--t-xs); line-height:1.75; color:var(--muted);
  overflow-x:auto; margin-bottom:1.1rem;
}
.lead-card b { color:var(--ink); font-weight:500; }

/* ─────────────────────────────────────────────────────────────
   SECCIONES
   ───────────────────────────────────────────────────────────── */
/* sin filete arriba: la cápsula flotante ya marca la separación,
   y una línea más solo compite con ella */
.sec { padding-block:clamp(3rem,7vw,5rem); }
.sec__head { max-width:62ch; margin-bottom:clamp(2rem,4vw,3rem); }
/* en el sitio publicado, el encabezado de cada página interior
   es un h1: una dirección, un título principal */
.sec__head h1, .sec__head h2 { font-size:var(--t-sec); margin-block:.7rem .8rem; }
.sec--tint { background:var(--surface-2); }


/* proceso, grilla horizontal. El plazo encabeza cada tarjeta,
   que es lo que la sección está vendiendo. */
.steps {
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
@media (min-width:900px) { .steps { grid-template-columns:repeat(4,1fr); } }
.step {
  background:var(--surface); padding:1.5rem 1.35rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.step__t {
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-track); font-size:var(--t-md);
  line-height:1.2; color:var(--ink);
  padding-bottom:.75rem; border-bottom:1px solid var(--line);
}
/* Realce al pasar por encima. Mezcla hacia el acento en vez de
   usar --accent-soft, porque ese token queda casi igual al fondo
   de la sección y el realce no se notaría. La misma fórmula sirve
   en claro y en oscuro, porque siempre se mueve hacia el acento. */
@media (hover:hover) and (pointer:fine) {
  .step { transition:background-color .18s ease; }
  .step:hover { background:color-mix(in srgb, var(--accent) 20%, var(--surface)); }
  .step:hover .step__t { border-bottom-color:var(--accent); }
}
@media (prefers-reduced-motion:reduce) { .step { transition:none; } }
.step h3 { font-size:var(--t-md); margin-bottom:.4rem; }
.step div p { font-size:var(--t-sm); color:var(--muted); }

/* compromisos, nota al pie del anexo */
.pledges {
  display:grid; gap:1.5rem 2.5rem;
  margin-top:clamp(1.9rem,4vw,2.6rem); padding-top:clamp(1.3rem,3vw,1.7rem);
  border-top:1px solid var(--line);
}
@media (min-width:820px) { .pledges { grid-template-columns:repeat(3,1fr); } }
.pledge { border-left:0; padding-left:0; }
.pledge h3 { font-size:var(--t-base); margin-bottom:.4rem; }
.pledge p { font-size:var(--t-sm); color:var(--muted); }


/* cifras del equipo, colectivas, no individuales */
/* cifras: panel propio en vez de dos filetes, para que la seccion
   arranque con un dato duro antes de las caras. Tres columnas fijas
   (son tres) y no auto-fit, porque con auto-fit el separador de la
   izquierda cae en la columna equivocada al envolverse. */
.figs {
  display:grid; grid-template-columns:1fr; gap:0;
  text-align:center;
  background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:var(--r);
  padding-block:clamp(2rem,4.5vw,3.1rem);
  margin-block:clamp(.5rem,2vw,1.1rem);
}
@media (min-width:640px) { .figs { grid-template-columns:repeat(3,1fr); } }
.fig { padding:0 clamp(1rem,3vw,2rem); }
.fig + .fig { border-top:1px solid var(--accent-line); margin-top:1.5rem; padding-top:1.5rem; }
@media (min-width:640px) {
  .fig + .fig { border-top:0; margin-top:0; padding-top:0; border-left:1px solid var(--accent-line); }
}
.fig__n {
  display:block; font-family:var(--font-display); font-weight:var(--display-weight);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.028em; font-size:clamp(2.9rem,7vw,4.6rem);
  line-height:1; color:var(--accent);
}
.fig__l {
  display:block; margin-top:.7rem; font-family:var(--font-mono);
  font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}

.movh {
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
  margin-top:clamp(2rem,4vw,2.8rem); margin-bottom:1.1rem;
}

/* equipo: acordeon horizontal. Al posarse o tocar un retrato,
   ese panel se ensancha y los demas se comprimen para dejarle
   sitio; la resena aparece dentro del propio panel.
   El encuadre de Branko va horneado en el JPG, no en CSS: la
   caja cambia de forma al abrirse y un ajuste por transform
   solo seria correcto para una de las dos formas. */
.team { display:flex; flex-direction:column; gap:1rem; }

.mem {
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r); background:var(--accent);
}
.mem:nth-child(even) { background:#1B4E7E; }
.mem__ini {
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--accent-ink);
  font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:2.6rem; letter-spacing:.02em; line-height:1;
}
.mem__img {
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 0%;
}

/* el degradado arranca bajo la cara y crece con la resena */
.mem__pie {
  position:absolute; z-index:2; inset:auto 0 0 0;
  padding:3.6rem 1.05rem 1rem;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(7,24,41,.95) 0%, rgba(7,24,41,.88) 44%,
    rgba(7,24,41,.46) 74%, rgba(7,24,41,0) 100%);
}
.mem__nom { font-size:var(--t-md); color:#F2F7FC; margin:0 0 .1rem; }
.mem__role {
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.09em;
  text-transform:uppercase; color:#A9CBE8; margin:0;
}
/* 0fr a 1fr anima la altura sin fijar un maximo a mano */
.mem__bioCaja {
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.mem__bioCaja > * { overflow:hidden; min-height:0; }
.mem__bio { color:#D9E8F6; font-size:var(--t-sm); margin:0 0 .9rem; }
/* La caja de arriba anima con el truco de 0fr a 1fr, que define UNA
   sola fila. Por eso la reseña y los estudios van envueltos en un
   único hijo: con dos, el segundo cae en una fila implícita que nunca
   colapsa y la reseña quedaría siempre a la vista. */
.mem__estudios {
  list-style:none; margin:0 0 .9rem; padding:.7rem 0 0;
  display:grid; gap:.32rem;
  border-top:1px solid rgba(217,232,246,.22);
}
.mem__estudios li { color:#B4CFE7; font-size:var(--t-xs); line-height:1.4; }
.mem.abierta .mem__bioCaja,
.mem:focus-within .mem__bioCaja { grid-template-rows:1fr; opacity:1; }
.mem.abierta .mem__bio { pointer-events:auto; }

/* el boton cubre el panel entero: el objetivo tactil es la foto */
.mem__btn {
  position:absolute; inset:0; z-index:3;
  padding:0; border:0; background:transparent; cursor:pointer;
  border-radius:inherit;
}
.mem__btn:focus-visible { outline:2px solid #A9CBE8; outline-offset:-5px; }

/* en fila solo cuando hay ancho para que el panel abierto respire */
@media (min-width:760px) {
  .team { flex-direction:row; align-items:stretch; gap:.75rem; }
  .mem {
    flex:1 1 0; min-width:0;
    height:clamp(25rem,40vw,31rem);
    transition:flex-grow .45s cubic-bezier(.2,.7,.2,1);
  }
  .mem.abierta, .mem:focus-within { flex-grow:2.5; }
  @media (hover:hover) and (pointer:fine) {
    .mem:hover { flex-grow:2.5; }
    .mem:hover .mem__bioCaja { grid-template-rows:1fr; opacity:1; }
    /* si el raton entra al bloque, manda el panel bajo el cursor
       y el que estaba abierto por clic cede el sitio */
    .team:hover .mem.abierta:not(:hover) { flex-grow:1; }
    .team:hover .mem.abierta:not(:hover) .mem__bioCaja { grid-template-rows:0fr; opacity:0; }
  }
}
/* apilado: aqui la resena no puede ir encima de la foto (una
   biografia larga tapaba el 85% del retrato), asi que el bloque
   de texto pasa a flujo normal y la tarjeta crece hacia abajo */
@media (max-width:759px) {
  .mem__img {
    position:relative; inset:auto; z-index:1;
    width:100%; height:auto; aspect-ratio:24/31;
  }
  /* en el escritorio el bloque se ancla abajo y la resena queda
     sobre el nombre; en flujo normal ese orden se lee al reves */
  .mem__pie {
    position:relative; inset:auto;
    display:flex; flex-direction:column;
    padding:1rem 1.05rem 1.15rem;
    background:#0E2338;
  }
  .mem__nom { order:1; }
  .mem__role { order:2; }
  .mem__bioCaja { order:3; }
  .mem__bio { margin:.85rem 0 0; }
}

@media (prefers-reduced-motion:reduce) {
  .mem, .mem__bioCaja { transition:none; }
}

/* entrada por scroll, escalonada panel a panel */
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    .mem {
      animation:memEntra linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 24%;
    }
    .mem:nth-child(2) { animation-range:entry 4% cover 29%; }
    .mem:nth-child(3) { animation-range:entry 4% cover 34%; }
    .mem:nth-child(4) { animation-range:entry 4% cover 39%; }
    .mem:nth-child(5) { animation-range:entry 4% cover 44%; }
  }
}
@keyframes memEntra {
  from { opacity:0; clip-path:inset(14% 0 0 0); }
  to   { opacity:1; clip-path:inset(0 0 0 0); }
}

/* nómina de clientes en marquesina: los nombres desfilan en
   bucle. La serie va tres veces y se desplaza un tercio, así
   el ciclo cierra sin salto. */
.clientes {
  /* el acordeon del equipo es alto y pesado: necesita mas aire
     antes del desfile de clientes o los dos bloques se pegan */
  margin-top:clamp(3.75rem,8vw,6rem); padding-top:clamp(2.4rem,4.5vw,3.2rem);
  border-top:1px solid var(--line);
}
.clientes__h {
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); margin-bottom:1.15rem;
}
.mq {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.mq__t {
  display:flex; width:max-content;
  animation:mqDesfile 46s linear infinite;
}
.mq:hover .mq__t { animation-play-state:paused; }
.mq__i {
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-track); font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--ink);
}
.mq__p { color:var(--accent); margin:0 1.35rem; font-weight:400; }
@keyframes mqDesfile { to { transform:translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
  .mq__t { animation:none; }
  .mq { -webkit-mask-image:none; mask-image:none; }
}
.sr-only {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* escenarios, grilla horizontal */
.scenarios {
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
@media (min-width:820px) { .scenarios { grid-template-columns:repeat(3,1fr); } }
.scn {
  background:var(--surface); padding:clamp(1.3rem,2.6vw,1.75rem);
  display:flex; flex-direction:column; gap:.75rem;
}
.scn__tag {
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint);
}
.scn__q {
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-track); font-size:var(--t-lg); line-height:1.2;
}
.scn__a { font-size:var(--t-sm); color:var(--muted); margin-top:.6rem; }

/* cómo trabajamos, grilla horizontal */
.pillars { display:grid; gap:clamp(1.6rem,3vw,2.6rem); }
@media (min-width:820px) { .pillars { grid-template-columns:repeat(3,1fr); } }
.pil { display:flex; flex-direction:column; gap:.6rem; }
.pil .pil__n {
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint);
  letter-spacing:.11em; text-transform:uppercase;
  padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.pil h3 { font-size:var(--t-lg); margin-top:.3rem; }
.pil p { font-size:var(--t-sm); color:var(--muted); }

/* afirmación de cierre, sin cifra, así que el peso lo carga
   la tipografía */
.cost {
  margin-top:clamp(1.8rem,3.5vw,2.6rem); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1.6rem,3.2vw,2.4rem);
}
/* peso normal, no bold: es una afirmación larga y en display
   seminegra se leía como un bloque macizo */
.cost__txt {
  font-family:var(--font-display); font-weight:400;
  letter-spacing:0;
  font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.45;
  color:var(--ink); max-width:66ch; text-wrap:pretty;
}

/* ─────────────────────────────────────────────────────────────
   CHECKLIST "ARMA TU ASESORÍA"
   ───────────────────────────────────────────────────────────── */
.picker { display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }
@media (min-width:960px) { .picker { grid-template-columns:minmax(0,1fr) 300px; } }
/* acordeón nativo: 34 servicios abiertos se comían la pantalla */
.groups { display:flex; flex-direction:column; }
.grp { border-bottom:1px solid var(--line); min-inline-size:0; }
.grp:first-child { border-top:1px solid var(--line); }
summary.grp__h {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 0; cursor:pointer; list-style:none;
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
  transition:color .16s ease;
}
summary.grp__h::-webkit-details-marker { display:none; }
summary.grp__h:hover { color:var(--ink); }
.grp__tail { display:flex; align-items:center; gap:.85rem; }
/* en minúscula y sin tracking: el encabezado va en versalitas
   espaciadas, pero una frase entera así se vuelve ilegible */
.grp__n {
  color:var(--accent); font-variant-numeric:tabular-nums;
  text-transform:none; letter-spacing:0;
}
.grp__chev {
  width:8px; height:8px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  border-bottom-right-radius:2px;             /* esquina menos filosa */
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--acc-dur) var(--acc-ease);
}
.grp[open] .grp__chev { transform:translateY(1px) rotate(-135deg); }
.grp__items { padding-bottom:1.15rem; }

/* el panel también se despliega: sin esto el chevrón gira suave
   pero el contenido salta, y el salto es lo que se siente duro.
   interpolate-size permite animar hacia `auto`. */
:root { interpolate-size:allow-keywords; }
.grp { --acc-dur:.4s; --acc-ease:cubic-bezier(.32,.75,.28,1); }
.grp::details-content {
  block-size:0; overflow:clip; opacity:0;
  transition:
    block-size var(--acc-dur) var(--acc-ease),
    content-visibility var(--acc-dur) allow-discrete,
    opacity calc(var(--acc-dur) * .7) ease;
}
.grp[open]::details-content { block-size:auto; opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .grp { --acc-dur:0s; }
  .grp::details-content { transition:none; opacity:1; }
}
.grp__items { display:grid; gap:.5rem; }
@media (min-width:640px) { .grp__items { grid-template-columns:1fr 1fr; } }
.opt {
  display:flex; gap:.6rem; align-items:flex-start; cursor:pointer;
  padding:.5rem .65rem; border:1px solid transparent; border-radius:var(--r-ctl);
  font-size:var(--t-sm); transition:background .14s ease, border-color .14s ease;
}
.opt:hover { background:var(--surface); border-color:var(--line); }
.opt input { margin:.28rem 0 0; accent-color:var(--accent); flex:none; width:14px; height:14px; }
.opt:has(input:checked) { background:var(--accent-soft); border-color:var(--accent-line); }
.opt:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.opt--wide { grid-column:1 / -1; }

/* campo libre: una lista cerrada rechaza al que necesita otra cosa */
.otros { margin-top:.6rem; padding-left:.65rem; }
.otros__lbl {
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.otros input { max-width:34rem; }

.basket {
  position:sticky; top:78px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:1.25rem;
}
.basket__h { font-size:var(--t-md); margin-bottom:.2rem; }
.basket__n {
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem;
}
.basket__list {
  list-style:none; margin:0 0 1.1rem; padding:0;
  display:flex; flex-direction:column; gap:.4rem;
  max-height:230px; overflow-y:auto;
  font-size:var(--t-sm); color:var(--muted);
}
.basket__list li { padding-left:.85rem; position:relative; }
.basket__list li::before { content:"·"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.basket__empty { font-size:var(--t-sm); color:var(--faint); margin-bottom:1.1rem; }
.basket .btn { width:100%; }
.basket__note { font-size:var(--t-xs); color:var(--faint); margin-top:.7rem; }

/* la canasta toma presencia cuando tiene algo dentro, y avisa
   con un destello cada vez que se le agrega un servicio */
.basket { transition:border-color .3s ease; }
.basket.is-active { border-color:var(--accent-line); }
.basket.is-hit { animation:basketHit .55s cubic-bezier(.3,.7,.3,1); }
@keyframes basketHit {
  0%   { box-shadow:0 0 0 0 var(--accent-soft); }
  45%  { box-shadow:0 0 0 7px var(--accent-soft); }
  100% { box-shadow:0 0 0 0 rgba(0,0,0,0); }
}
.basket__n { transition:color .2s ease; }
.basket.is-active .basket__n { color:var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .basket, .basket__n { transition:none; }
  .basket.is-hit { animation:none; }
}

/* formulario y confirmación dentro de la canasta */
.basket__lead { font-size:var(--t-sm); color:var(--muted); margin-bottom:1rem; }
.basket__form .field { margin-bottom:.8rem; }
.basket__back {
  font:inherit; font-size:var(--t-xs); color:var(--muted);
  background:none; border:0; padding:.6rem 0 0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; width:100%;
}
.basket__back:hover { color:var(--ink); }
.basket__tick {
  width:34px; height:34px; display:grid; place-items:center; margin-bottom:.85rem;
  border-radius:50%; background:var(--accent); color:var(--accent-ink);
  font-size:1rem; line-height:1;
}
.basket__doneh { font-size:var(--t-md); margin-bottom:.45rem; }
.basket__donep { font-size:var(--t-sm); color:var(--muted); }

/* casos, grilla horizontal */
.cases { display:grid; gap:1.25rem; }
@media (min-width:820px) { .cases { grid-template-columns:repeat(3,1fr); } }
.case {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.35rem; display:flex; flex-direction:column; gap:.75rem;
}
.case__sector {
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint);
}
.case h3 { font-size:var(--t-md); line-height:1.28; margin-bottom:.45rem; }
.case div p { font-size:var(--t-sm); color:var(--muted); }
.case__out {
  margin-top:auto; padding-top:.85rem; border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--ink); font-weight:600;
}

/* cross-link entre marcas */

/* footer en azul profundo. Ninguna banda clara servía para las
   cuatro páginas: la última sección es tintada en unas y plana
   en otras, así que siempre se fundía con alguna. El oscuro
   contrasta con todas y le da cierre a la página. */
.foot {
  border-top:0;
  background:#0E2338;
  padding-block:clamp(2rem,3.5vw,2.6rem);
}
.foot__grid { display:grid; gap:1.4rem; align-items:center; }
@media (min-width:760px) { .foot__grid { grid-template-columns:1.4fr 1fr; } }
.foot h4 { font-family:var(--font-mono); font-weight:500; font-size:var(--t-xs); letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-bottom:.85rem; }
.foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; font-size:var(--t-sm); color:var(--muted); }
.foot__mark { font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:1.5rem; margin-bottom:.6rem; }
.foot__addr { font-size:var(--t-sm); color:var(--muted); font-style:normal; }

/* Color del pie sobre azul profundo. Va después de las reglas
   base a propósito: si se declara antes, .foot ul y .foot__addr
   lo pisan y el texto queda en 2.4:1, ilegible. */
.foot .foot__addr, .foot ul { color:#EDF3FA; }
.foot h4 { color:rgba(237,243,250,.78); }
.foot .mark__name { color:#FFFFFF; }
.foot .mark__kind { color:rgba(237,243,250,.72); }
.foot a { color:#FFFFFF; text-underline-offset:3px; }

/* ── botón flotante de WhatsApp ───────────────────────────
   En azul de marca, no en el verde de WhatsApp: el glifo ya
   es reconocible por su forma y un verde neón en la esquina
   contradice todo el resto de la página. */
.wa {
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:60; display:inline-flex; align-items:center; gap:.6rem;
  height:54px; padding:0 1.1rem 0 1.05rem;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:999px;
  text-decoration:none; font-size:var(--t-sm); font-weight:600;
  transition:background-color .18s ease, transform .18s ease;
}
.wa:hover {
  background:color-mix(in srgb, var(--accent) 86%, var(--ink));
  transform:translateY(-2px);
}
.wa svg { width:23px; height:23px; flex:none; }
/* la etiqueta se despliega al pasar el cursor; en táctil, siempre */
.wa__txt {
  max-width:0; overflow:hidden; white-space:nowrap;
  opacity:0; transition:max-width .28s ease, opacity .2s ease;
}
.wa:hover .wa__txt, .wa:focus-visible .wa__txt { max-width:11rem; opacity:1; }
@media (hover:none) {
  .wa { width:54px; padding:0; justify-content:center; }
  .wa__txt { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa, .wa__txt { transition:none; }
  .wa:hover { transform:none; }
}

/* ─────────────────────────────────────────────────────────────
   ESTRATEGIA
   ───────────────────────────────────────────────────────────── */
.doc { padding-block:clamp(2.5rem,6vw,4rem); }
.doc__head { max-width:64ch; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.doc__head h1 { font-size:clamp(2rem,4.5vw,3.1rem); margin-block:.8rem 1rem; }
.blk { padding-block:clamp(2.2rem,5vw,3.2rem); border-top:1px solid var(--line); }
.blk__h { display:flex; gap:1rem; align-items:baseline; margin-bottom:1.3rem; }
.blk__h h2 { font-size:var(--t-xl); }
.blk p + p { margin-top:.9rem; }
.blk p { max-width:var(--read); color:var(--muted); }
.blk strong { color:var(--ink); font-weight:600; }
.subh { font-size:var(--t-md); margin-top:1.9rem; margin-bottom:.9rem; }

/* hitos, sí es una secuencia, por eso van numerados */
.hitos { list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-direction:column; }
.hito { display:grid; gap:.3rem 1.5rem; padding-block:1.25rem; border-top:1px solid var(--line); }
@media (min-width:760px) { .hito { grid-template-columns:3.5rem minmax(0,1fr) 10.5rem; } }
.hito__n { font-family:var(--font-mono); font-size:var(--t-sm); color:var(--accent); font-variant-numeric:tabular-nums; }
.hito h3 { font-size:var(--t-md); margin-bottom:.35rem; }
.hito p { font-size:var(--t-sm); max-width:56ch; }
.hito__when { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint); letter-spacing:.05em; text-transform:uppercase; }
/* cuando el estado es una frase y no una etiqueta, la caja alta
   la vuelve ilegible y suena a grito: esa va en caja baja */
.hito__when--nota { text-transform:none; letter-spacing:.01em; line-height:1.45; }

/* perfiles de cliente */
.profiles { display:grid; gap:1.25rem; margin-top:1.5rem; }
@media (min-width:820px) { .profiles { grid-template-columns:repeat(3,1fr); } }
.prof { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.35rem; }
.prof h3 { font-size:var(--t-md); margin-bottom:.5rem; }
.prof p { font-size:var(--t-sm); margin-bottom:.9rem; }
.prof dl { display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; margin:0; font-size:var(--t-xs); }
.prof dt { font-family:var(--font-mono); color:var(--faint); letter-spacing:.05em; text-transform:uppercase; }
.prof dd { margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }

/* comparación de modelos */
.tblwrap { overflow-x:auto; margin-top:1.5rem; border:1px solid var(--line); border-radius:var(--r); }
table { border-collapse:collapse; width:100%; min-width:600px; font-size:var(--t-sm); background:var(--surface); }
th, td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
thead th {
  font-family:var(--font-mono); font-weight:500; font-size:var(--t-xs);
  letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
  background:var(--field);
}
tbody tr:last-child td { border-bottom:0; }
td:first-child { color:var(--ink); font-weight:600; }
td { color:var(--muted); }
.verdict { color:var(--accent); font-weight:600; }

/* recuadro de recomendación */
.rec {
  margin-top:1.6rem; background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:var(--r); padding:1.2rem 1.35rem;
}
.rec__h { font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin-bottom:.55rem; }
.rec p { color:var(--ink); max-width:60ch; }

/* pendientes */
.todo { list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem; max-width:var(--read); }
/* viñeta colgante, no columna. Con display:flex cada <b> y cada
   tramo de texto del ítem se volvía un elemento flexible aparte,
   así que una negrita a media frase partía la línea en columnas. */
.todo li {
  display:block; position:relative; padding-left:1.55rem;
  font-size:var(--t-sm); color:var(--muted);
}
.todo li::before {
  content:""; position:absolute; left:0; top:.44rem;
  width:9px; height:9px;
  border:1.5px solid var(--accent); border-radius:50%;
}
.todo b { color:var(--ink); font-weight:600; }

/* ─────────────────────────────────────────────────────────────
   MOVIMIENTO
   Todo nativo: sin librerías, porque el CSP de Artifacts bloquea
   cualquier host externo. Scroll-driven animations, View
   Transitions y keyframes. Cada capa detrás de @supports y de
   prefers-reduced-motion, así que si algo falta la página
   simplemente queda estática y completa.
   ───────────────────────────────────────────────────────────── */

/* 1 · barra de avance del documento */
.progress {
  position:absolute; inset-inline:0; bottom:-1px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation:progressGrow linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes progressGrow { to { transform:scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {

  /* 2 · entrada del hero, escalonada */
  .hero .eyebrow,
  .hero h1,
  .hero__sub,
  .hero .capture {
    animation:heroRise .7s cubic-bezier(.2,.7,.3,1) both;
  }
  .hero .eyebrow  { animation-delay:.04s; }
  .hero h1        { animation-delay:.12s; }
  .hero__sub      { animation-delay:.22s; }
  .hero .capture  { animation-delay:.30s; }
  @keyframes heroRise {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:none; }
  }

  /* 3 · revelado al entrar en cuadro */
  @supports (animation-timeline: view()) {
    .sec__head, .scn, .pil, .step, .case, .fig,
    .pledge, .cost, .mem, .blk, .hito, .prof {
      animation:revealUp linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
    @keyframes revealUp {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:none; }
    }
  }

  /* 4 · transición entre vistas */
  ::view-transition-old(root) { animation:vtOut .26s ease both; }
  ::view-transition-new(root) { animation:vtIn  .34s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes vtOut { to { opacity:0; transform:translateY(-8px); } }
  @keyframes vtIn  { from { opacity:0; transform:translateY(12px); } }
}

/* 5 · estados de hover en las tarjetas, que no tenían ninguno */
.case, .prof {
  transition:background-color .9s ease, border-color .22s ease, transform .22s ease;
}
.case:hover, .prof:hover {
  border-color:var(--accent-line); transform:translateY(-2px);
}
.scn, .step { transition:background-color .28s ease; }
.scn:hover, .step:hover { background:var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .case:hover, .prof:hover { transform:none; }
}

[hidden] { display:none !important; }
/* Despliegue entre etapas. Va al final de la hoja a proposito:
   otras reglas de las mismas tarjetas declaran su propio
   transition con igual especificidad, y si este bloque va antes
   lo pisan y el alto deja de animarse.
   despliegue entre etapas de los bloques de captura: la caja
   crece o se encoge hasta el alto de la etapa que entra, y el
   contenido nuevo sube al aparecer en vez de estar de golpe */
.desplegando {
  overflow:hidden;
  transition:height .42s cubic-bezier(.2,.7,.2,1);
}
.etapa-entra { animation:etapaEntra .4s .05s cubic-bezier(.2,.7,.2,1) both; }
@keyframes etapaEntra {
  from { opacity:0; transform:translateY(11px); }
  to   { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .desplegando { transition:none; }
  .etapa-entra { animation:none; }
}

/* ── menú compacto ───────────────────────────────────────
   El menú entra en una línea hasta los 620px y ahí se rompe:
   la cápsula pasa de 56px de alto a 138 y, como flota sobre el
   contenido, persigue al visitante toda la página. Por debajo de
   660px (con holgura antes del límite real) los ítems se guardan
   detrás de un botón. */
.sitenav__burger { display:none; }

@media (max-width:660px) {
  .sitenav__burger {
    display:grid; place-items:center; margin-left:auto; flex:none;
    width:2.4rem; height:2.4rem; padding:0;
    background:transparent; border:1px solid rgba(15,61,104,.22);
    border-radius:999px; cursor:pointer;
  }
  .sitenav__lineas,
  .sitenav__lineas::before,
  .sitenav__lineas::after {
    content:""; display:block; width:1.05rem; height:1.5px;
    background:#0F3D68; border-radius:2px;
    transition:transform .24s cubic-bezier(.2,.7,.2,1), opacity .16s ease;
  }
  .sitenav__lineas::before { transform:translateY(-5.5px); }
  .sitenav__lineas::after  { transform:translateY(4px); }
  /* abierto, las tres líneas se vuelven una cruz */
  .sitenav__in.abierto .sitenav__lineas { background:transparent; }
  .sitenav__in.abierto .sitenav__lineas::before { transform:rotate(45deg); }
  .sitenav__in.abierto .sitenav__lineas::after  { transform:rotate(-45deg); }

  .sitenav__links { display:none; }
  .sitenav__in.abierto {
    border-radius:22px;   /* la píldora deja de ser píldora al crecer */
  }
  .sitenav__in.abierto .sitenav__links {
    display:flex; flex-direction:column; flex-basis:100%; gap:.1rem;
    margin-top:.6rem; padding-top:.6rem;
    border-top:1px solid rgba(15,61,104,.13);
  }
  /* 44px de alto es el mínimo cómodo para tocar con el dedo */
  .sitenav__links a { padding:.78rem .95rem; }
  /* el indicador deslizante no aplica en vertical */
  .sitenav__pill { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .sitenav__lineas, .sitenav__lineas::before, .sitenav__lineas::after { transition:none; }
}

/* ── la portada arranca con el video a tope ──────────────
   .page reserva arriba el alto de la cápsula para que el texto
   no quede debajo. En el hero eso no corresponde: la cápsula
   tiene que flotar sobre el video, no dejar una banda de fondo
   encima. Se cancela ese espacio y se compensa por dentro. */
.page > .hero--media:first-child {
  margin-top:calc(-1 * (var(--nav-h, 62px) + .9rem));
  padding-top:calc(var(--nav-h, 62px) + clamp(3.5rem,9vw,6.5rem));
}

/* ── transición entre páginas ────────────────────────────
   Cada página es un documento propio, así que el navegador haría
   un corte seco al cambiar. Esto le pide que funda una con otra,
   que es lo que hacía la versión de una sola página. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation:saleDoc .18s cubic-bezier(.4,0,1,1) both;
  }
  ::view-transition-new(root) {
    animation:entraDoc .3s cubic-bezier(0,0,.2,1) both;
  }
  /* la cápsula y el pie no se funden: quedan fijos mientras el
     contenido cambia detrás, que es lo que los hace sentir parte
     de un mismo sitio y no de cuatro páginas sueltas */
  .sitenav__in { view-transition-name:capsula; }
  .foot        { view-transition-name:pie; }
  .wa          { view-transition-name:wasap; }
}
@keyframes saleDoc  { to   { opacity:0; transform:translateY(-6px); } }
@keyframes entraDoc { from { opacity:0; transform:translateY(8px);  } }