/* ═══════════════════════════════════════════════════════════════════════════
   poyntia.com · «Poyntia claro» — portada de PRUEBAS (7-oct-2026). No se publica.
   Pablo, 7-oct: «una mezcla entre lo que tenemos y la página de Space»; «poca información y muchas demostraciones de lo que
   podemos hacer»; «casos reales concretos, agentes que ahorran tiempo, se hablan a ritmo frenético y concluyen siempre con su fuente».
   Se copia el SISTEMA de Space —casi blanco y casi negro, un titular enorme a dos tonos, píldoras, una sola acción, polvo como
   único color—, no la obra de nadie. Sin librerías y sin una sola petición a terceros.
   Medido en spacefs.com el 7-oct: fondo #f7f8fa, tinta #0e0f12, gris #686d78, borde #e0e3e8, titular 76 px/400/−0,035 em, píldoras de 9999 px.
   Regla de la casa: un tamaño sólo sube. Nada de aquí es más pequeño que lo que ya hay en la portada publicada; y en pantallas
   grandes TODO crece (--u vale 1 px hasta 1470 px de ancho y llega a 1,74 px en 2560).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:#f7f8fa; --bg-2:#eef0f3; --white:#fff;
  --ink:#0e0f12;
  --ink-2:#686d78;          /* segundo tono de los titulares (texto grande: 4,9:1 sobre --bg) */
  --ink-3:#565b66;          /* gris de texto normal y pequeño (≥ 5,8:1 sobre --bg y sobre --bg-2) */
  --line:#e0e3e8; --line-2:#cfd3da;
  --acento:#2551d6;         /* el azul de la marca: sólo vive en el polvo y en lo que marca el agente dentro de las ventanas */
  --marca:rgba(37,81,214,.15);
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,1,.36,1);                  /* entradas y movimientos grandes (0,7–1,1 s): la salida suave de Space */
  --ease-ui:cubic-bezier(.4,0,.2,1);                 /* micro-interacciones (0,15 s): la de ElevenLabs, Vercel y Linear */
  --u:clamp(1px, .068vw, 1.74px);                   /* la unidad: 1 px hasta 1470 px de ancho, y crece con la pantalla */
  --gut:24px;
  --wrap:clamp(1176px, 62vw, 1560px);
  --fs-h1:clamp(46px, 5.2vw, 120px);
  --fs-h2:clamp(38px, 4.1vw, 96px);
  --fs-lede:clamp(19px, 1.4vw, 28px);
  --fs-s:calc(14 * var(--u)); --fs-m:calc(16 * var(--u)); --fs-b:calc(18 * var(--u)); --fs-l:calc(20 * var(--u));
  --sombra:0 0 0 1px rgba(14,15,18,.05), 0 2px 6px rgba(14,15,18,.04), 0 34px 80px -34px rgba(14,15,18,.26);
  --sombra-s:0 0 0 1px rgba(14,15,18,.06), 0 8px 24px -12px rgba(14,15,18,.22);
}
* { box-sizing:border-box }
[hidden] { display:none !important }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px }
body { margin:0; background:var(--bg); color:var(--ink); font:400 var(--fs-b)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip }
img, video, svg { display:block; max-width:100% }
img { height:auto }
a { color:inherit }
button { font:inherit; color:inherit }
p, h1, h2, h3 { margin:0 }
::selection { background:var(--ink); color:#fff }
.wrap { width:min(100% - 2*var(--gut), var(--wrap)); margin-inline:auto }
.skip { position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px }
.skip:focus { left:12px }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:10px }
.pill:focus-visible, .logo:focus-visible, .mn-bar:focus-visible { border-radius:999px }

/* ── el polvo: dos lienzos fijos detrás de todo (los dibuja assets/particulas-v1.js) ───────────── */
#arte, #arte-v { position:fixed; z-index:0; pointer-events:none; display:none; opacity:var(--arte-o, 1) }
#arte { left:-48px; top:-48px; width:calc(100% + 96px); height:calc(100vh + 96px); height:calc(100lvh + 96px) }      /* la base lleva 48 px de margen para que la deriva no deje bordes */
#arte-v { left:0; top:0; width:100%; height:100vh; height:100lvh }
.arte-lista #arte, .arte-lista #arte-v { display:block; animation:arte-in 1.6s ease backwards }
.arte-lista #arte { animation:arte-in 1.6s ease backwards, deriva 70s ease-in-out infinite }
@keyframes arte-in { from { opacity:0 } }
@keyframes deriva { 0%, 100% { transform:translate3d(0, 0, 0) scale(1) } 50% { transform:translate3d(-26px, -18px, 0) scale(1.012) } }
main, .pie { position:relative; z-index:1 }

/* ── píldoras ────────────────────────────────────────────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:calc(48 * var(--u)); padding:0 calc(26 * var(--u)); border-radius:999px;
  border:1px solid transparent; font:500 var(--fs-m)/1 var(--sans); letter-spacing:-.005em; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .15s var(--ease-ui), border-color .15s var(--ease-ui), color .15s var(--ease-ui), transform .15s var(--ease-ui), box-shadow .15s var(--ease-ui)}
.pill:active { transform:scale(.98) }
.pill-ink { background:var(--ink); color:#f7f8fa; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -14px rgba(14,15,18,.7) }
.pill-ink:hover { background:#272a31 }
.pill-white { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:0 1px 2px rgba(14,15,18,.04) }
.pill-white:hover { border-color:var(--ink) }
.pill-l { height:calc(58 * var(--u)); padding:0 calc(34 * var(--u)); font-size:var(--fs-b) }
.pill svg { width:calc(16 * var(--u)); height:calc(16 * var(--u)); flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.pill[disabled] { opacity:.55; cursor:default }

/* ── cabecera: el círculo de la marca · la píldora de navegación · una sola acción ───────────── */
.top { position:fixed; z-index:50; left:0; right:0; top:14px; padding:0 calc(22 * var(--u)); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; pointer-events:none }
.top > * { pointer-events:auto }
/* EL LOGO (decisión de Pablo, 7-oct noche): el logo de la web en NEGRO (la Y a #171717, las letras igual). El círculo de la cabecera es un fondo blanco con el
   símbolo dentro; todo lo que lo define está en estas variables y en assets/marca/poyntia-simbolo-negro.svg (kit: docs/comercial/outreach-2026-10-07/marca-final/). */
.logo { --logo-w:calc(44 * var(--u)); --logo-h:calc(44 * var(--u)); --logo-y:calc(19 * var(--u)); --logo-pal:calc(47 * var(--u)); --logo-ext:calc(10 * var(--u));
  position:relative; display:block; justify-self:start; width:var(--logo-w); height:var(--logo-h); border-radius:999px }
/* EL LOGO AL PASAR EL CURSOR (9-oct; referencia: «space animacion.mov»): el círculo pasa a PÍLDORA con las letras del logotipo oficial. La píldora crece SOBRE el contenido (el enlace sigue ocupando 44 × 44: no empuja el menú).
   Pablo: «tiene que empezar antes, hay mucho delay, tiene que ser más fluida» → SIN esperas: arranca en el mismo fotograma del cursor; entrada 0,32 s con la píldora, las letras (50 ms de desfase) y el giro a la vez; salida 0,24 s,
   más rápida; si el cursor vuelve a mitad, la transición se invierte desde donde está (no reinicia). Un margen invisible de 7 px alrededor evita el parpadeo al rozar el borde. */
.logo::after { content:""; position:absolute; inset:-7px }
.logo-pil { position:absolute; left:0; top:0; height:100%; width:var(--logo-w); display:flex; align-items:center; overflow:hidden; border-radius:999px; background:var(--logo-bg, #fff); box-shadow:var(--sombra-s);
  contain:layout paint style; transition:width .24s var(--ease) }
.logo-y { flex:none; display:grid; place-items:center; width:var(--logo-w); height:100% }
.logo-y img { width:var(--logo-y); height:auto; transform:rotate(0); transition:transform .24s var(--ease) }
.logo-pal { flex:none; width:var(--logo-pal); height:auto; margin-left:calc(-3 * var(--u)); opacity:0; clip-path:inset(0 100% 0 0); transition:clip-path .2s var(--ease), opacity .14s linear; pointer-events:none }
.logo:focus-visible { outline:none; border-radius:999px } .logo:focus-visible .logo-pil { outline:2px solid #0e0f12; outline-offset:3px }
@media (hover:hover) {
  .logo:hover .logo-pil { width:calc(var(--logo-w) + var(--logo-pal) + var(--logo-ext)); transition-duration:.32s }
  .logo:hover .logo-y img { transform:rotate(360deg); transition-duration:.32s }
  .logo:hover .logo-pal { opacity:1; clip-path:inset(0 0 0 0); transition:clip-path .3s var(--ease) .05s, opacity .2s linear .05s }
}
.logo:focus-visible .logo-pil { width:calc(var(--logo-w) + var(--logo-pal) + var(--logo-ext)); transition-duration:.32s }
.logo:focus-visible .logo-y img { transform:rotate(360deg); transition-duration:.32s }
.logo:focus-visible .logo-pal { opacity:1; clip-path:inset(0 0 0 0); transition:clip-path .3s var(--ease) .05s, opacity .2s linear .05s }
@media (prefers-reduced-motion: reduce) { .logo-pil, .logo-y img, .logo-pal { transition:none !important } .logo:hover .logo-y img, .logo:focus-visible .logo-y img { transform:none } }
.top-r { justify-self:end; display:flex; align-items:center; gap:8px }
.lang-mini { display:grid; place-items:center; width:calc(48 * var(--u)); height:calc(48 * var(--u)); border-radius:50%; border:0; background:rgba(255,255,255,.88); box-shadow:var(--sombra-s); cursor:pointer;
  font-size:calc(15 * var(--u)); font-weight:500; letter-spacing:.02em; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
.lang-mini:hover { background:#fff }
.top .pill-ink { height:calc(48 * var(--u)); padding:0 calc(24 * var(--u)) }

/* ── portada ─────────────────────────────────────────────────────────────────────────────────── */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(124px, 21svh, 250px) var(--gut) clamp(72px, 9svh, 120px) }
.aviso { display:inline-flex; align-items:center; gap:10px; min-height:calc(44 * var(--u)); padding:0 8px 0 calc(20 * var(--u)); border-radius:999px; background:rgba(255,255,255,.82); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(14,15,18,.04); font-size:var(--fs-m); text-decoration:none; color:var(--ink-3); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .15s var(--ease-ui), color .15s var(--ease-ui)}
.aviso b { font-weight:500; color:var(--ink) }
.aviso:hover { border-color:var(--ink); color:var(--ink) }
.aviso .fl { display:grid; place-items:center; width:calc(30 * var(--u)); height:calc(30 * var(--u)); border-radius:50%; background:var(--ink); color:#fff }
.aviso .fl svg { width:calc(14 * var(--u)); height:calc(14 * var(--u)); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
h1 { margin-top:clamp(24px, 3.4svh, 40px); font-weight:500; font-size:var(--fs-h1); line-height:1.02; letter-spacing:-.035em; text-wrap:pretty; text-wrap:balance }
h1 span { display:block }
.t2 { color:var(--ink-2); font-weight:400 }
.lede { margin-top:clamp(22px, 3svh, 36px); max-width:29em; font-size:var(--fs-lede); line-height:1.45; color:var(--ink-2); text-wrap:pretty; text-wrap:balance }
.hero-cta { margin-top:clamp(30px, 4.4svh, 54px) }
.hero-sub { margin-top:22px; font-size:var(--fs-m); color:var(--ink-3) }

/* ── secciones ───────────────────────────────────────────────────────────────────────────────── */
.sec { position:relative; padding-block:clamp(72px, 8.6vw, 160px) }
.h2 { font-weight:500; font-size:var(--fs-h2); line-height:1.04; letter-spacing:-.035em; text-align:center; text-wrap:pretty; text-wrap:balance }
.h2 span { display:block }
.h2 .t2 { font-weight:400 }
.cta-fila { display:flex; justify-content:center; margin-top:clamp(36px, 4vw, 64px) }

/* ═══ CASOS REALES: un escenario fijo que avanza con el scroll ═══════════════════════════════════
   Cada caso es un problema real del sector. Se escribe la tarea, los agentes se reparten los documentos, se hablan
   sin parar y la respuesta sale con cada cita en su fuente. La ejecución es un ejemplo ilustrativo; los textos citados, reales. */
.casos { padding-bottom:0 }
.pista { --n:6; --paso:56vh; --paso:56svh; position:relative; height:calc(100vh + var(--n) * var(--paso)); height:calc(100svh + var(--n) * var(--paso)); margin-top:clamp(20px, 3vw, 48px) }
.fijo { position:sticky; top:0; height:100vh; height:100svh; padding:calc(86 * var(--u)) 0 calc(20 * var(--u)); box-sizing:border-box }
.escena { width:min(100% - 2*var(--gut), var(--wrap)); margin-inline:auto; height:100%; display:flex; flex-direction:column }
.esc-eyebrow { flex:none; margin-bottom:calc(16 * var(--u)); text-align:center; font-size:var(--fs-s); font-weight:500; line-height:1.3; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3) }
.esc-eyebrow span { display:inline } .esc-eyebrow .t2 { color:var(--ink-3); font-weight:500 }
.casos-lista { display:grid; grid-template-columns:minmax(0, 1fr); flex:1; min-height:0 }
/* Con la escena fija (no apilada) los casos son páginas de un carrusel vertical: TODOS ocupan la misma celda, el activo está en su sitio, los anteriores esperan arriba y los siguientes abajo.
   Al activar uno, el que entra sube desde abajo y el que sale se va hacia arriba (y al revés si se vuelve atrás): un solo gesto vertical de ~0,5 s, sin cortes. */
.caso { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr) auto; grid-area:1 / 1; gap:calc(14 * var(--u)); justify-items:center; text-align:center;
  visibility:hidden; opacity:0; pointer-events:none; transform:translate3d(0, 0, 0);
  transition:transform .56s var(--ease), opacity .3s linear, visibility 0s linear .56s }
.caso.antes { transform:translate3d(0, -13%, 0) } .caso.despues { transform:translate3d(0, 13%, 0) }
.caso.activo { visibility:visible; opacity:1; pointer-events:auto; transform:translate3d(0, 0, 0); transition:transform .56s var(--ease), opacity .3s linear, visibility 0s }
@keyframes entra { from { opacity:0; transform:translateY(12px) } }
.esc-h { font-weight:500; font-size:clamp(30px, 3.2vw, 78px); line-height:1.04; letter-spacing:-.034em; text-wrap:pretty; text-wrap:balance }
.esc-h span { display:inline }
.esc-h .t2 { font-weight:400 }
.sala-caja { width:100%; position:relative; min-height:0 }
.esc-pie { display:flex; align-items:center; justify-content:center; gap:calc(28 * var(--u)); flex-wrap:wrap; min-height:calc(58 * var(--u)); margin-top:calc(6 * var(--u)) }
.puntos { display:flex; align-items:center; gap:calc(8 * var(--u)) }
.puntos .gap { width:calc(14 * var(--u)) }
.punto { width:calc(12 * var(--u)); height:calc(12 * var(--u)); padding:0; border:0; border-radius:999px; background:var(--line-2); cursor:pointer; transition:width .3s var(--ease), background-color .3s var(--ease-ui); position:relative }
.punto::after { content:""; position:absolute; inset:calc(-16 * var(--u)) calc(-6 * var(--u)) }   /* zona pulsable de 44 px */
.punto:hover { background:var(--ink-2) }
.punto[aria-current="true"] { width:calc(36 * var(--u)); background:var(--ink) }

/* ── la sala: la ventana donde se ve trabajar a los agentes (todo en em: escala con --tj) ───────── */
.sala { --tj:14.5px; position:relative; width:100%; height:100%; min-height:calc(420 * var(--u)); max-height:calc(720 * var(--u)); display:flex; flex-direction:column; border-radius:calc(28 * var(--u)); background:#fff; box-shadow:var(--sombra);
  overflow:hidden; font-size:var(--tj); line-height:1.35; text-align:left; color:var(--ink) }
.sala-b { flex:none; height:2.7em; display:flex; align-items:center; gap:.45em; padding:0 1.15em; background:#fafbfc; border-bottom:1px solid var(--line) }
.sala-b .pto { flex:none; width:.66em; height:.66em; border-radius:50%; background:#dfe2e8 }
.sala-b b { margin-left:.6em; min-width:0; font-weight:500; font-size:.95em; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sala-ctl { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:.3em }
.sala-ctl + .sala-st { margin-left:.6em }
.sc-b { display:inline-grid; place-items:center; min-width:2.1em; height:1.95em; padding:0 .55em; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink-3); font:500 .9em/1 var(--sans); cursor:pointer; transition:border-color .15s var(--ease-ui), color .15s var(--ease-ui) }
.sc-b:hover { border-color:var(--ink); color:var(--ink) }
.sc-b svg { width:1.05em; height:1.05em }
.sc-vel { min-width:3.1em; font-variant-numeric:tabular-nums }
.sala[data-st="pausa"] .sala-st i { background:#cfd3da; animation:none }
@media (max-width: 640px) { .sc-fin, .sc-re { display:none } }
.sala-st { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:.5em; height:1.95em; padding:0 .95em; border-radius:999px; background:#f1f3f6; font-size:.9em; font-weight:500; color:var(--ink-3) }
.sala-st i { width:.58em; height:.58em; border-radius:50%; background:var(--acento); animation:latir 1s ease-in-out infinite }
.sala[data-st="ok"] .sala-st i { background:var(--ink); animation:none }
.sala[data-st="idle"] .sala-st i { background:#cfd3da; animation:none }
@keyframes latir { 50% { opacity:.35; transform:scale(.7) } }
.sala-q { flex:none; display:flex; align-items:center; gap:.8em; margin:.8em 1.15em .2em; padding:.62em .62em .62em 1.2em; border-radius:999px; border:1px solid var(--line); background:#fff; box-shadow:0 1px 2px rgba(14,15,18,.04) }
.sala-qt { flex:1; min-width:0; font-size:1.32em; font-weight:500; letter-spacing:-.005em; line-height:1.3 }
.caret { display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.18em; background:var(--ink); animation:parpadeo 1s steps(1) infinite }
@keyframes parpadeo { 50% { opacity:0 } }
.sala-qb { flex:none; display:grid; place-items:center; width:2.1em; height:2.1em; border-radius:50%; background:var(--ink); color:#fff }
.sala-qb svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.sala-c { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, .86fr) minmax(0, 1.14fr) }
.sala-izq { display:flex; flex-direction:column; min-height:0; padding:.95em 1.15em 1.05em; border-right:1px solid var(--line) }
.sala-der { display:flex; flex-direction:column; min-height:0; padding:.95em 1.25em 1.05em }
.sala-h { flex:none; display:flex; align-items:center; justify-content:space-between; gap:.6em; margin:0 0 .6em; font-size:.9em; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }
.sala-h em { font-style:normal; letter-spacing:0; text-transform:none; font-weight:500; color:var(--ink) }
/* la red de agentes: los paquetes viajan de un nodo a otro cada vez que un agente habla */
.red { position:relative; flex:1; min-height:9.5em }
.red-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.red-svg line { stroke:var(--line-2); stroke-width:1 }
.nodo { position:absolute; z-index:2; transform:translate(-50%, -50%); display:inline-flex; align-items:center; gap:.5em; height:2.45em; padding:0 1em 0 .85em; border-radius:999px; background:#fff; border:1px solid var(--line-2);
  font-size:1.1em; font-weight:500; white-space:nowrap; box-shadow:0 1px 2px rgba(14,15,18,.05); transition:border-color .2s var(--ease-ui), transform .18s var(--ease), box-shadow .2s var(--ease-ui)}
.nodo i { width:.62em; height:.62em; border-radius:50%; background:#cfd3da; transition:background-color .2s var(--ease-ui)}
.nodo.act { border-color:var(--acento) } .nodo.act i { background:var(--acento) }
.nodo.ok { border-color:var(--ink) } .nodo.ok i { background:var(--ink) }
.nodo.pulso { transform:translate(-50%, -50%) scale(1.09); box-shadow:0 0 0 .35em rgba(37,81,214,.14) }
.pq { position:absolute; z-index:3; left:0; top:0; width:.55em; height:.55em; margin:-.275em 0 0 -.275em; border-radius:50%; background:var(--acento); box-shadow:0 0 0 .24em rgba(37,81,214,.18); pointer-events:none; will-change:transform }
.pq.i { background:var(--ink); box-shadow:0 0 0 .24em rgba(14,15,18,.12) }
.log { flex:none; margin-top:.7em; padding:.65em .85em; border-radius:.95em; background:#f5f6f9; font:500 .98em/1.5 var(--mono); color:var(--ink-3); height:3.7em; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end }
.log p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.log p b { font-weight:500; color:var(--ink) }
.log p:last-child { color:var(--ink) }
.log p:first-child:not(:last-child) { opacity:.5 }
/* la respuesta: cada conclusión llega con su cita y su fuente */
.hall-l { list-style:none; margin:0; padding:0; display:grid; gap:.8em; align-content:start }
.hall { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.9em; padding:.85em 1.05em .8em; border-radius:1.1em; background:#fff; border:1px solid var(--line); opacity:0; transform:translateY(.7em); transition:opacity .45s var(--ease), transform .45s var(--ease)}
.hall.on { opacity:1; transform:none }
.hall-ic { width:2em; height:2em; border-radius:50%; background:var(--ink); display:grid; place-items:center; margin-top:.1em }
.hall-ic svg { width:1.2em; height:1.2em; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.hall-inferencia, .hall-ambigua, .hall-calculo, .hall-contradiccion, .hall-imagen { border-color:rgba(37,81,214,.38); background:rgba(37,81,214,.035) }
.hall-inferencia { border-style:dashed }
.hall-inferencia .hall-ic, .hall-ambigua .hall-ic, .hall-calculo .hall-ic, .hall-contradiccion .hall-ic, .hall-imagen .hall-ic { background:var(--acento) }
.hall-t { font-size:1.36em; font-weight:500; line-height:1.22; letter-spacing:-.012em }
.hall-q { margin-top:.45em; padding-left:.8em; border-left:2px solid var(--line-2); font-size:1.02em; line-height:1.42; color:var(--ink-3) }
.hall-q mark { padding:.05em .25em; margin:0 -.25em; border-radius:.25em; color:inherit; background:linear-gradient(var(--marca), var(--marca)) no-repeat left center / 0 100%; transition:background-size .7s var(--ease) .4s; -webkit-box-decoration-break:clone; box-decoration-break:clone }
.hall.on .hall-q mark { background-size:100% 100%; color:var(--ink) }
.hall-n { font-size:.9em; color:var(--ink-3) }
.hall-f { margin-top:.6em; display:flex; flex-wrap:wrap; align-items:center; gap:.4em .5em }
.chip-f { display:inline-flex; align-items:center; gap:.45em; min-height:2em; padding:.15em .9em; border-radius:999px; background:var(--ink); color:#fff; font-size:.95em; font-weight:500; line-height:1.2; text-decoration:none }
.chip-f svg { flex:none; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
a.chip-f:hover { background:#272a31 }
.tag { display:inline-flex; align-items:center; min-height:1.95em; padding:0 .8em; border-radius:999px; border:1px solid rgba(37,81,214,.45); color:var(--acento); font-size:.92em; font-weight:600 }
/* ── EL REGISTRO VIVO (9-oct): lo que hace cada agente, línea a línea, antes de la respuesta ───────────────────────────────────────────────────────────────────── */
.reg-b, .resp-b { display:flex; flex-direction:column; min-height:0; min-width:0 }
.sala-der[data-vista="reg"] .reg-b { flex:1 1 0 } .sala-der[data-vista="reg"] .resp-b { flex:0 0 auto }
.sala-der[data-vista="resp"] .reg-b { flex:0 0 auto } .sala-der[data-vista="resp"] .resp-b { flex:1 1 0 }
.reg { list-style:none; margin:0; padding:.15em 0; flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:.1em; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  -webkit-mask-image:linear-gradient(transparent, #000 1.1em); mask-image:linear-gradient(transparent, #000 1.1em) }
.sala-der[data-vista="resp"] .reg { display:none }
.sala-der { position:relative }
.sala-der[data-vista="resp"] .reg-b { position:absolute; top:.8em; right:1.25em; z-index:2; margin:0 }
.sala-der[data-vista="resp"] .reg-h { display:none } .sala-der[data-vista="resp"] .reg-t { margin:0 }
.sala-der[data-vista="resp"] .resp-h { justify-content:flex-start; gap:.9em; min-height:2.5em; padding-right:11em }
.resp-b .hall-l.hay-mas { -webkit-mask-image:linear-gradient(#000 calc(100% - 2.6em), transparent); mask-image:linear-gradient(#000 calc(100% - 2.6em), transparent) }
.resp-b .hall-l { overflow-y:auto; min-height:0; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; padding-bottom:.2em }
.reg:empty::before { content:""; display:block; height:5.4em; margin-top:.3em; border-radius:.9em; background:linear-gradient(100deg, #eceef2 30%, #f5f6f8 50%, #eceef2 70%) 0 0 / 220% 100%; animation:cervbarra 1.6s linear infinite }
.reg-l { display:grid; grid-template-columns:1.6em .7em minmax(0, 1fr); gap:.5em; align-items:start; padding:.34em .35em; border-radius:.7em; line-height:1.36; opacity:0; transform:translateY(.55em); transition:opacity .35s var(--ease), transform .35s var(--ease), background-color .3s }
.reg-l.on { opacity:1; transform:none }
.reg-k { font:600 .8em/1.9 var(--mono); font-style:normal; color:var(--ink-3); text-align:right }
.reg-d { width:.66em; height:.66em; margin-top:.5em; border-radius:50%; background:var(--c, var(--ink)) }
.reg-l b { font-weight:600; color:var(--c, var(--ink)) }
.reg-l code { display:inline; font:500 .82em/1.5 var(--mono); color:var(--ink-3); background:#f1f2f5; padding:.08em .5em; border-radius:.45em; margin-left:.2em; word-break:break-word }
.reg-l em { font-style:normal; font-weight:600; color:var(--ink) }
.reg-fl { margin:0 .35em; color:var(--ink-3) }
.reg-pas > div { color:var(--ink-2) }
.reg-l.ult { background:rgba(37, 81, 214, .06) }
.reg-l.res { background:rgba(37, 81, 214, .14); box-shadow:0 0 0 2px rgba(37, 81, 214, .45) }
.reg-t { display:none; flex:none; margin-top:.5em; align-self:flex-start; white-space:nowrap; padding:.5em 1.15em; border-radius:999px; border:1px solid var(--line-2); background:#fff; font:500 .96em var(--sans); color:var(--ink); cursor:pointer }
.reg-t:hover { border-color:var(--ink) } .reg-t:focus-visible { outline:2px solid var(--ink); outline-offset:2px }
.sala[data-st="ok"] .reg-t { display:inline-flex }
.sala-der[data-vista="resp"] .resp-esq, .sala-der[data-vista="reg"][data-fin] .resp-esq { display:none }
.resp-esq { display:flex; flex-direction:column; gap:.6em; padding:.4em 0 }
.resp-esq i { display:block; height:3.4em; border-radius:.9em; background:linear-gradient(100deg, #eceef2 30%, #f5f6f8 50%, #eceef2 70%) 0 0 / 220% 100%; animation:cervbarra 1.6s linear infinite }
.resp-esq i + i { height:2.2em; width:72% }
.resp-esq p { margin:0; font-size:.94em; color:var(--ink-3) }
.sala-der[data-vista="reg"] .hall-l { display:none }
.hall-p { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35em; font-size:.92em; color:var(--ink-3) }
.paso-b { all:unset; box-sizing:border-box; cursor:pointer; min-width:1.9em; height:1.9em; padding:0 .5em; display:inline-grid; place-items:center; border-radius:999px; border:1px solid var(--line-2); background:#fff; font:600 .88em var(--mono); color:var(--ink) }
.paso-b:hover { background:var(--ink); color:#fff; border-color:var(--ink) } .paso-b:focus-visible { outline:2px solid var(--ink); outline-offset:2px }
@media (prefers-reduced-motion: reduce) { .reg-l { transition:none } .reg:empty::before, .resp-esq i { animation:none } }
.hall-m { display:none; margin-top:.5em; padding:.3em .95em; border-radius:999px; border:1px solid var(--line-2); background:#fff; font:500 .9em var(--sans); color:var(--ink); cursor:pointer }
.hall-m:hover { border-color:var(--ink) } .hall-m:focus-visible { outline:2px solid var(--ink); outline-offset:2px }
@media (min-width: 901px) {
  #casos:not(.casos-libre) .hall-m { display:inline-flex }
  #casos:not(.casos-libre) .hall.cierra { cursor:pointer; background:#fff }
  #casos:not(.casos-libre) .hall.cierra .hall-q, #casos:not(.casos-libre) .hall.cierra .hall-f { display:none }
  #casos:not(.casos-libre) .hall:not(.cierra) .hall-m { display:none }
  #casos:not(.casos-libre) .hall.cierra > div { display:flex; align-items:center; gap:.9em } #casos:not(.casos-libre) .hall.cierra .hall-t { flex:1; min-width:0 } #casos:not(.casos-libre) .hall.cierra .hall-m { margin:0; flex:none; white-space:nowrap }
}
/* apilado (móvil, tableta, movimiento reducido): el registro y la respuesta, uno bajo otro, sin conmutar */
.casos-libre .sala-der[data-vista] .reg-b { position:static; margin:0 } .casos-libre .sala-der[data-vista] .reg-h { display:flex } .casos-libre .sala-der[data-vista] .resp-h { padding-right:0 }
.casos-libre .sala-der[data-vista] .reg-b, .casos-libre .sala-der[data-vista] .resp-b { flex:none; flex-direction:column; align-items:stretch; margin-bottom:0 }
.casos-libre .sala-der[data-vista] .reg-h { margin:0 0 .6em } .casos-libre .sala-der[data-vista] .reg-n { display:inline }
.casos-libre .sala-der[data-vista] .reg { display:flex; flex:none; max-height:17em } .casos-libre .sala-der[data-vista] .hall-l { display:grid; overflow:visible } .casos-libre .sala-der[data-vista] .resp-esq, .casos-libre .sala-der[data-vista] .reg-t { display:none !important }
.casos-libre .sala-der[data-vista] .resp-b { margin-top:.9em }
@media (max-width: 900px) {
  .sala-der[data-vista] .reg-b { position:static; margin:0 } .sala-der[data-vista] .reg-h { display:flex } .sala-der[data-vista] .resp-h { padding-right:0 }
  .sala-der[data-vista] .reg-b, .sala-der[data-vista] .resp-b { flex:none; flex-direction:column; align-items:stretch; margin-bottom:0 }
  .sala-der[data-vista] .reg-h { margin:0 0 .6em } .sala-der[data-vista] .reg-n { display:inline }
  .sala-der[data-vista] .reg { display:flex; flex:none; max-height:17em } .sala-der[data-vista] .hall-l { display:grid; overflow:visible } .sala-der[data-vista] .resp-esq, .sala-der[data-vista] .reg-t { display:none !important }
  .sala-der[data-vista] .resp-b { margin-top:.9em }
}
.sala-ok { flex:none; margin-top:auto; padding-top:.6em; display:flex; align-items:center; gap:.55em; font-size:.98em; font-weight:500; color:var(--ink); opacity:0; transition:opacity .4s var(--ease-ui)}
.sala-ok.on { opacity:1 }
.sala-ok svg { width:1.2em; height:1.2em; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

/* ═══ EL HUECO DE LA SALA CON MAPA (Poyntia Grid en vivo) ═══════════════════════════════════════ */
.demo-hueco { position:relative; width:100%; aspect-ratio:16 / 10; margin-top:clamp(40px, 4.4vw, 80px); border-radius:clamp(22px, 2.2vw, 36px); overflow:hidden; background:#e9ebef; box-shadow:var(--sombra) }
.demo-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.demo-etiqueta { position:absolute; left:calc(20 * var(--u)); bottom:calc(20 * var(--u)); z-index:3; display:inline-flex; align-items:center; height:calc(36 * var(--u)); padding:0 calc(16 * var(--u)); border-radius:999px; background:rgba(255,255,255,.94); font-size:var(--fs-s); font-weight:500; color:var(--ink-3); box-shadow:var(--sombra-s) }
.carga-barra { position:absolute; left:0; right:0; bottom:0; height:4px; z-index:4; background:linear-gradient(90deg, transparent, rgba(14,15,18,.5), transparent) 0 0 / 40% 100% no-repeat, rgba(14,15,18,.08); opacity:0; animation:barrido 1.4s ease-in-out infinite }
.demo-hueco[data-estado="cargando"] .carga-barra { opacity:1 }
.demo-hueco[data-estado="listo"] .demo-poster, .demo-hueco[data-estado="listo"] .carga-barra { display:none }
@keyframes barrido { from { background-position:-60% 0, 0 0 } to { background-position:160% 0, 0 0 } }

/* ═══ CÓMO TRABAJAN: tres demos muy cortas ═══════════════════════════════════════════════════════ */
.minis { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.22fr); gap:clamp(14px, 1.6vw, 28px); margin-top:clamp(40px, 4.4vw, 80px) }
.mini { display:flex; flex-direction:column; border-radius:calc(28 * var(--u)); background:#fff; box-shadow:var(--sombra); overflow:hidden }
.mini-v { position:relative; height:calc(300 * var(--u)); background:linear-gradient(#fff, #fafbfc); border-bottom:1px solid var(--line); overflow:hidden; font-size:calc(14.5 * var(--u)) }
.mini-t { padding:calc(24 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u)) }
.mini-t h3 { font-size:calc(24 * var(--u)); font-weight:500; line-height:1.15; letter-spacing:-.02em }
.mini-t h3, .mini-t p { text-wrap:pretty; text-wrap:balance }
.mini-t p { margin-top:8px; font-size:var(--fs-b); line-height:1.45; color:var(--ink-3) }
/* A: la misma lectura, una persona o varios agentes */
.carriles { position:absolute; inset:0; padding:calc(26 * var(--u)) calc(24 * var(--u)); display:flex; flex-direction:column; justify-content:center; gap:calc(34 * var(--u)) }
.carril-t { margin:0 0 .7em; font-size:.92em; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3) }
.segs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.4em }
.seg { position:relative; height:4.4em; border-radius:.75em; background:#eef0f4; overflow:hidden }
.seg b { position:absolute; left:.7em; bottom:.55em; z-index:2; font-size:.92em; font-weight:500; color:var(--ink); white-space:nowrap }
.seg i { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:rgba(37,81,214,.2) }
.segs.un .seg i { background:rgba(14,15,18,.14) }
.seg .ok { position:absolute; right:.5em; top:.5em; width:1.45em; height:1.45em; border-radius:50%; background:var(--ink); display:grid; place-items:center; z-index:2; opacity:0; transform:scale(.4) }
.seg .ok svg { width:.9em; height:.9em; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.en-vista .segs.ag .seg i { animation:llena var(--d, 1.6s) cubic-bezier(.3, .1, .2, 1) var(--r, 0s) infinite both }
.en-vista .segs.ag .seg .ok { animation:listo var(--d, 1.6s) var(--r, 0s) infinite both }
.en-vista .segs.un .p1 i { animation:llena-lento 8.4s linear infinite both }
@keyframes llena { 0% { width:0 } 24% { width:100% } 100% { width:100% } }
@keyframes llena-lento { 0% { width:0 } 100% { width:46% } }
@keyframes listo { 0%, 22% { opacity:0; transform:scale(.4) } 30%, 100% { opacity:1; transform:none } }
.mini-quieto .segs.ag .seg i { width:100% } .mini-quieto .segs.ag .seg .ok { opacity:1; transform:none } .mini-quieto .segs.un .p1 i { width:46% }
/* B: la red en bucle */
.mini-b .red { position:absolute; inset:calc(20 * var(--u)) calc(18 * var(--u)) calc(74 * var(--u)) }
.mini-b .log { position:absolute; left:calc(18 * var(--u)); right:calc(18 * var(--u)); bottom:calc(16 * var(--u)); margin:0; height:calc(52 * var(--u)) }
.mini-b .nodo { font-size:calc(13.5 * var(--u)) }
/* C: la conclusión y el documento donde está la frase */
.mini-c { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr) }
.mini-c .conc { padding:calc(22 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); display:flex; flex-direction:column; justify-content:center; gap:calc(12 * var(--u)) }
.mini-c .conc p { padding:.7em .85em; display:grid; grid-template-columns:auto 1fr; column-gap:.55em; row-gap:.15em; align-items:start; border-radius:.9em; border:1px solid var(--line); background:#fff; font-size:1em; font-weight:500; line-height:1.3; transition:border-color .4s var(--ease-ui), background-color .4s var(--ease-ui)}
.mini-c .conc p span { grid-row:1 / span 2; display:inline-flex; align-items:center; justify-content:center; width:1.7em; height:1.7em; border-radius:999px; background:var(--ink); color:#fff; font-size:.92em; font-weight:600 }
.mini-c .conc p i { font-style:normal }
.mini-c .conc p small { font-size:.92em; font-weight:500; color:var(--ink-3) }
.mini-c .hoja { position:relative; margin:calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) 0; border-radius:.8em; overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--line), 0 14px 30px -20px rgba(14,15,18,.4) }
.mini-c .hoja img { width:100%; height:100%; object-fit:cover; object-position:top; max-width:none }
.mini-c .foco { position:absolute; left:3%; width:94%; border-radius:.35em; box-shadow:0 0 0 3px rgba(37,81,214,.7), 0 0 0 999px rgba(255,255,255,.8); opacity:0 }
.mini-c .foco.f1 { top:20.2%; height:8.3% } .mini-c .foco.f2 { top:89.6%; height:7.2% }
.en-vista.mini-c .foco.f1 { animation:foco1 7s ease-in-out infinite } .en-vista.mini-c .foco.f2 { animation:foco2 7s ease-in-out infinite }
.en-vista.mini-c .conc p:nth-child(1) { animation:conc1 7s ease-in-out infinite } .en-vista.mini-c .conc p:nth-child(2) { animation:conc2 7s ease-in-out infinite }
@keyframes foco1 { 0%, 4% { opacity:0 } 10%, 44% { opacity:1 } 52%, 100% { opacity:0 } }
@keyframes foco2 { 0%, 50% { opacity:0 } 58%, 94% { opacity:1 } 100% { opacity:0 } }
@keyframes conc1 { 0%, 4% { border-color:var(--line); background:#fff } 10%, 44% { border-color:var(--acento); background:rgba(37,81,214,.06) } 52%, 100% { border-color:var(--line); background:#fff } }
@keyframes conc2 { 0%, 50% { border-color:var(--line); background:#fff } 58%, 94% { border-color:var(--acento); background:rgba(37,81,214,.06) } 100% { border-color:var(--line); background:#fff } }
.mini-quieto.mini-c .foco.f1 { opacity:1 } .mini-quieto.mini-c .conc p:nth-child(1) { border-color:var(--acento); background:rgba(37,81,214,.06) }

/* ── cómo trabajamos ─────────────────────────────────────────────────────────────────────────── */
.pasos { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:clamp(44px, 5vw, 88px); border-top:1px solid var(--line); list-style:none; padding:0 }
.paso { padding:clamp(28px, 2.6vw, 44px) clamp(20px, 2vw, 40px) clamp(8px, 1vw, 16px) 0 }
.paso + .paso { padding-left:clamp(20px, 2vw, 40px); border-left:1px solid var(--line) }
.paso .n { display:grid; place-items:center; width:calc(44 * var(--u)); height:calc(44 * var(--u)); border-radius:50%; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:var(--fs-b); font-weight:500 }
.paso h3 { margin-top:clamp(22px, 2vw, 34px); font-size:clamp(22px, 1.7vw, 40px); font-weight:500; line-height:1.15; letter-spacing:-.02em }
.paso p { margin-top:10px; color:var(--ink-3); font-size:var(--fs-b); line-height:1.5 }

/* ── la prueba: una tarea real, grabada ──────────────────────────────────────────────────────── */
.video { position:relative; display:block; width:100%; margin-top:clamp(44px, 5vw, 84px); aspect-ratio:16 / 9; padding:0; border:0; border-radius:clamp(22px, 2.2vw, 36px); overflow:hidden; background:#e9ebef; box-shadow:var(--sombra); cursor:pointer }
.video img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.video:hover img { transform:scale(1.015) }
.video .play { position:absolute; left:50%; top:50%; width:clamp(72px, 6vw, 130px); height:clamp(72px, 6vw, 130px); margin:calc(clamp(72px, 6vw, 130px) / -2) 0 0 calc(clamp(72px, 6vw, 130px) / -2);
  border-radius:50%; background:#fff; box-shadow:0 18px 44px -14px rgba(14,15,18,.5); display:grid; place-items:center; transition:transform .3s var(--ease)}
.video:hover .play { transform:scale(1.07) }
.video .play svg { width:34%; height:34%; margin-left:6%; fill:var(--ink) }
.video-pie { margin:clamp(22px, 2.4vw, 36px) auto 0; max-width:38em; text-align:center; color:var(--ink-3); font-size:var(--fs-l); line-height:1.5; text-wrap:pretty }
.video-acc { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px }

/* ── preguntas ───────────────────────────────────────────────────────────────────────────────── */
.faq { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(40px, 6vw, 120px); align-items:start }
.faq-cab .h2 { text-align:left }
.faq-cab p { margin-top:22px; font-size:var(--fs-l); color:var(--ink-3); max-width:20em }
.faq-lista details { border-bottom:1px solid var(--line) }
.faq-lista details:first-child { border-top:1px solid var(--line) }
.faq-lista summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; list-style:none; cursor:pointer; font-size:clamp(19px, 1.5vw, 34px); font-weight:500; line-height:1.25; letter-spacing:-.012em }
.faq-lista summary::-webkit-details-marker { display:none }
.faq-lista summary:hover .mas { border-color:var(--ink) }
.mas { position:relative; flex:none; width:calc(40 * var(--u)); height:calc(40 * var(--u)); border-radius:50%; background:#fff; border:1px solid var(--line); transition:border-color .2s var(--ease-ui)}
.mas::before, .mas::after { content:""; position:absolute; left:50%; top:50%; width:calc(14 * var(--u)); height:1.8px; border-radius:1px; background:var(--ink); transform:translate(-50%, -50%) }
.mas::after { transform:translate(-50%, -50%) rotate(90deg); transition:transform .3s var(--ease)}
details[open] .mas::after { transform:translate(-50%, -50%) rotate(0) }
.faq-lista details p { padding:0 64px 30px 0; color:var(--ink-3); font-size:var(--fs-l); line-height:1.55; max-width:36em }

/* ── contacto ────────────────────────────────────────────────────────────────────────────────── */
.contacto { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(36px, 6vw, 120px); align-items:start }
.contacto-cab .h2 { text-align:left }
.contacto-cab .lede { margin-top:26px; max-width:24em; text-align:left }
.contacto-cab .mail { margin-top:26px; font-size:calc(17 * var(--u)); color:var(--ink-3) }
.contacto-cab .mail a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2) }
.form { background:#fff; border-radius:calc(28 * var(--u)); padding:clamp(24px, 2.4vw, 56px); box-shadow:var(--sombra) }
.form .fila { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form label { display:block; font-size:calc(15 * var(--u)); font-weight:500; color:var(--ink-3); margin:16px 0 8px }
.form .fila label { margin-top:0 }
.form input, .form textarea { width:100%; font:inherit; font-size:calc(17 * var(--u)); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:14px 16px; transition:border-color .2s var(--ease-ui), box-shadow .2s var(--ease-ui), background-color .2s var(--ease-ui)}
.form input:focus, .form textarea:focus { outline:none; border-color:var(--ink); background:#fff; box-shadow:0 0 0 4px rgba(14,15,18,.07) }
.form textarea { resize:vertical; min-height:120px }
.form-pie { display:flex; justify-content:flex-end; margin-top:22px }
.f-basic { margin-top:18px; font-size:var(--fs-s); line-height:1.55; color:var(--ink-3) }
.f-basic b { font-weight:500; color:var(--ink-3) }
.f-basic a { color:var(--ink-3) }
.form-msg { margin-top:16px; font-size:var(--fs-m); color:var(--ink) }
.trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ── pie ─────────────────────────────────────────────────────────────────────────────────────── */
.pie { border-top:1px solid var(--line); background:rgba(247,248,250,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.pie-fila { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; padding:clamp(44px, 4vw, 90px) 0 36px }
.pie-marca img { height:calc(30 * var(--u)); width:auto }
.pie-marca p { margin-top:16px; font-size:var(--fs-m); color:var(--ink-3); max-width:22em }
.idioma { display:inline-flex; gap:4px; margin-top:20px; padding:4px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line) }
.idioma button { height:calc(38 * var(--u)); padding:0 calc(18 * var(--u)); border:0; border-radius:999px; background:none; font-size:calc(15 * var(--u)); font-weight:500; color:var(--ink-3); cursor:pointer }
.idioma button[aria-pressed="true"] { background:var(--ink); color:#f7f8fa }
.pie h3, .pie h4 { margin:0 0 14px; font-size:calc(15 * var(--u)); font-weight:500; color:var(--ink-3) }
.pie ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:var(--fs-m) }
.pie ul a { text-decoration:none } .pie ul a:hover { text-decoration:underline; text-underline-offset:3px }
.legal { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:22px 0 40px; border-top:1px solid var(--line); font-size:var(--fs-s); color:var(--ink-3) }
.legal-links { display:flex; flex-wrap:wrap; gap:6px 12px }
.legal a { text-decoration:none } .legal a:hover { color:var(--ink) }

/* ── el vídeo en grande ──────────────────────────────────────────────────────────────────────── */
.player { padding:0; border:0; background:transparent; max-width:min(1240px, 94vw); width:100%; overflow:visible }
.player::backdrop { background:rgba(14,15,18,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.player video { width:100%; border-radius:20px; background:#000; aspect-ratio:16 / 9 }
.player-x { position:absolute; top:-54px; right:0; width:44px; height:44px; border-radius:50%; border:0; background:#fff; cursor:pointer; font-size:24px; line-height:1 }

/* ── sin movimiento: nada se anima; el escenario deja de ser fijo y se elige con los puntos ───── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after { animation:none !important; transition:none !important }
}
.casos-libre .pista { height:auto; margin-top:clamp(20px, 3vw, 48px) }
.casos-libre .fijo { position:static; height:auto; padding:0 }
.casos-libre .casos-lista { gap:clamp(64px, 9vw, 130px) }
.casos-libre .caso { display:grid; grid-template-rows:none; grid-area:auto; visibility:visible; opacity:1; pointer-events:auto; transform:none; transition:none; animation:none }
.casos-libre .puntos { display:none }
.casos-libre .escena, .casos-libre .casos-lista { height:auto; flex:none }
.casos-libre .esc-eyebrow { margin-bottom:calc(28 * var(--u)) }
.casos-libre .sala { height:auto; max-height:none }

/* ── tableta ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .minis { grid-template-columns:1fr 1fr } .minis .mini:nth-child(3) { grid-column:1 / -1 }
  .mini-v.mini-c { height:calc(340 * var(--u)) }
  .pasos { grid-template-columns:repeat(2, 1fr) }
  .paso:nth-child(odd) { padding-left:0; border-left:0 }
  .paso:nth-child(n+3) { border-top:1px solid var(--line) }
  .faq, .contacto { grid-template-columns:1fr }
  .faq-cab .h2, .contacto-cab .h2 { text-align:center } .faq-cab p, .contacto-cab .lede { margin-inline:auto; text-align:center } .contacto-cab .mail { text-align:center }
}
@media (max-width: 900px) {
  .esc-h span { display:block }
  .top { padding:0 16px }
  .top-r .lang-mini { display:none }
  .pie-fila { grid-template-columns:1fr 1fr }
  .pie-marca { grid-column:1 / -1 }
  .sala { height:auto; min-height:0; max-height:none }
  .hall-t { font-size:1.24em }
  .sala-qt { font-size:1.2em }
  .sala-b { height:auto; min-height:2.7em; padding-block:.55em }
  .sala-b b { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25 }
  .sala-c { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto }
  .sala-izq { border-right:0; border-bottom:1px solid var(--line) }
  .red { flex:none; height:13em; min-height:0 }      /* cuatro filas de píldoras de ~41 px (orquestador, tres agentes en dos filas, verificador): 11 em no cabían y se tocaban */
  .casos-libre .sala { height:auto }
}
@media (max-width: 460px) { .aviso .cola { display:none } }
/* ── móvil estrecho ── */
@media (max-width: 480px) { .top { gap:6px } .top-r { gap:6px } .top .pill-ink { padding:0 18px } }
/* ── móvil (el tráfico de LinkedIn y del correo entra casi todo por aquí) ────────────────────── */
@media (max-width: 640px) {
  :root { --gut:16px; --fs-h1:44px; --fs-h2:38px; --fs-lede:19px }
  body { font-size:17px }
  .top { top:10px; gap:8px }
  .logo { --logo-w:40px; --logo-h:40px; --logo-y:17px; --logo-pal:43px; --logo-ext:9px }
  .top .pill-ink { height:48px; padding:0 20px }
  .hero { padding-top:112px }
  .hero-sub { font-size:15px; max-width:22em }
  .aviso { font-size:15px; padding-left:16px; max-width:100% }
  .pill-l { height:56px; padding:0 28px }
  .minis { grid-template-columns:1fr } .mini-v { height:300px }
  .mini-v.mini-c { grid-template-columns:1fr; height:auto } .mini-c .hoja { margin:0 16px 16px; height:240px } .mini-c .conc { padding:18px 16px 12px }
  .pasos { grid-template-columns:1fr }
  .paso { padding:26px 0 10px !important; border-left:0 !important }
  .paso + .paso { border-top:1px solid var(--line) }
  .paso h3 { margin-top:16px }
  .video { border-radius:20px }
  .video-pie { font-size:18px }
  .faq-lista summary { padding:22px 0; font-size:19px } .faq-lista details p { padding-right:0; font-size:18px }
  .form { padding:20px; border-radius:24px } .form .fila { grid-template-columns:1fr; gap:0 } .form .fila label { margin-top:16px }
  .form-pie .pill { width:100% }
  .pie-fila { grid-template-columns:1fr; padding-bottom:28px }
  .legal { flex-direction:column }
  .player { max-width:96vw } .player-x { top:-52px }
}


/* ═══ EL MAPA de los casos de subestaciones: ortofoto REAL del IGN (PNOA), pines, distancia, escala y la lista de agentes (8-oct-2026) ═════════════════════════════════
   Todo en em del tamaño de la sala (--tj ≥ 14,5 px): los rótulos del mapa miden ≥ 13 px. La cámara la mueve casos-v1.js sobre el viewBox del SVG. */
.sala-mapa .sala-c { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr) }
.sala-mapa-col { position:relative; padding:0 !important; overflow:hidden; background:#dde1d8 }
.mapa { position:absolute; inset:0; overflow:hidden; background:#dde1d8; font-size:var(--tj) }
.mapa-svg { position:absolute; inset:0; width:100%; height:100%; display:block }
.m-detalle { opacity:0 }
.m-linea { stroke:#fff; stroke-width:3; stroke-dasharray:8 6; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .3s var(--ease-ui); filter:drop-shadow(0 0 3px rgba(0, 0, 0, .55)) }
.m-anillo { fill:rgba(37, 81, 214, .12); stroke:#fff; stroke-width:2.5; stroke-dasharray:6 5; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .5s var(--ease-ui); filter:drop-shadow(0 0 3px rgba(0, 0, 0, .5)) }
.m-linea.on, .m-anillo.on { opacity:1 }
.m-pin, .m-dist, .m-ar, .m-nota { position:absolute; left:0; top:0; pointer-events:none; opacity:0; transition:opacity .35s var(--ease-ui)}
.m-pin.on, .m-dist.on, .m-ar.on, .m-nota.on { opacity:1 }
.m-dot { position:absolute; left:0; top:0; width:1.15em; height:1.15em; margin:-.575em 0 0 -.575em; border-radius:50%; background:#fff; border:.22em solid var(--ink); box-shadow:0 0 0 .3em rgba(255, 255, 255, .5), 0 2px 10px rgba(0, 0, 0, .45) }
.m-pin.acento .m-dot { background:var(--acento); border-color:#fff }
.m-pin.gris .m-dot { background:#8b919d; border-color:#fff }
.m-lab, .m-dist, .m-ar, .m-nota { padding:.28em .8em; border-radius:999px; background:rgba(255, 255, 255, .96); box-shadow:0 2px 10px rgba(0, 0, 0, .28); font-size:.95em; font-weight:500; color:var(--ink); white-space:nowrap; line-height:1.3 }
.m-lab { position:absolute; top:-.95em }
.m-pin[data-lado="d"] .m-lab { left:1.3em } .m-pin[data-lado="i"] .m-lab { right:1.3em }
.m-dist, .m-ar, .m-nota { translate:-50% -50% }
.m-roster { position:absolute; left:.8em; right:.8em; top:.8em; display:flex; flex-wrap:wrap; gap:.4em; z-index:3 }
.m-pill { display:inline-flex; align-items:center; gap:.45em; height:2.1em; padding:0 .9em 0 .7em; border-radius:999px; background:rgba(255, 255, 255, .96); border:1px solid rgba(14, 15, 18, .1); box-shadow:0 2px 8px rgba(0, 0, 0, .22);
  font-size:.98em; font-weight:500; color:var(--ink); transition:border-color .15s var(--ease-ui), box-shadow .2s var(--ease-ui), transform .18s var(--ease)}
.m-pill i { width:.6em; height:.6em; border-radius:50%; background:#cfd3da; transition:background-color .2s var(--ease-ui)}
.m-pill.act { border-color:var(--acento) } .m-pill.act i { background:var(--acento) }
.m-pill.ok { border-color:var(--ink) } .m-pill.ok i { background:var(--ink) }
.m-pill.pulso { transform:scale(1.07); box-shadow:0 0 0 .3em rgba(37, 81, 214, .2), 0 2px 8px rgba(0, 0, 0, .22) }
.m-pie { position:absolute; left:.8em; right:.8em; bottom:.8em; z-index:3; display:flex; flex-direction:column; gap:.4em; pointer-events:none }
.m-base { display:flex; align-items:flex-end; justify-content:space-between; gap:.6em }
.m-tick { box-sizing:border-box; min-height:2.2em; padding:.4em .8em; border-radius:.8em; background:rgba(255, 255, 255, .95); font:500 .9em/1.4 var(--mono); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 2px 8px rgba(0, 0, 0, .2) }
.m-tick:empty { opacity:0 }
.m-tick b { color:var(--ink); font-weight:500 }
.m-escala { flex:none; display:flex; align-items:center; gap:.5em; padding:.2em .7em; border-radius:999px; background:rgba(255, 255, 255, .92); font-size:.88em; font-weight:500; color:var(--ink-3) }
.m-escala i { display:block; height:.45em; border:2px solid var(--ink); border-top:0; box-sizing:content-box }
.m-cred { flex:0 1 auto; min-width:0; padding:.2em .7em; border-radius:.9em; background:rgba(255, 255, 255, .88); font-size:.88em; line-height:1.3; text-align:right; color:var(--ink-3) }
.m-roster .pq { top:0; left:0 }
@media (max-width: 900px) { .sala-mapa-col { aspect-ratio:4 / 3.7 } .sala-mapa .sala-c { grid-template-columns:minmax(0, 1fr) } }
@media (max-width: 640px) { .m-escala { display:none } .m-roster { gap:.3em; left:.6em; right:.6em; top:.6em } .m-pill { height:1.9em; padding:0 .7em 0 .55em; font-size:.9em } .m-pie { left:.6em; right:.6em; bottom:.6em } .m-cred { flex:1; text-align:center } }

/* recinto de la subestación, cables de fibra y proveedores sin conectar (el caso de Sentmenat) */
.m-recinto { fill:rgba(37, 81, 214, .16); stroke:#fff; stroke-width:2.5; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .5s var(--ease-ui); filter:drop-shadow(0 0 3px rgba(0, 0, 0, .5)) }
.m-fibra-c, .m-fibra { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .3s var(--ease-ui)}
.m-fibra-c { stroke:#fff; stroke-width:6.5 } .m-fibra-c.t { stroke-width:4.5 }
.m-fibra { stroke:var(--acento); stroke-width:3 } .m-fibra.f { stroke-width:3.6 }
.m-recinto.on, .m-fibra-c.on, .m-fibra.on { opacity:1 }
.m-pill.off { border-style:dashed; color:var(--ink-3); background:rgba(255, 255, 255, .86); box-shadow:none }
.m-pill.off i { background:transparent; border:1.5px solid #9aa0ab; width:.62em; height:.62em; box-sizing:border-box }

/* ── TRAZABILIDAD (8-oct): la segunda fila de mini-demos (9-oct: sola, sin la de precisión). Los pasos son clases acumulativas (z1…z2) que pone casos-v1.js; aquí sólo hay transiciones. ── */
.minis-2 { grid-template-columns:minmax(0, 1fr); margin-top:clamp(14px, 1.6vw, 28px) }
.minis-2 .mini { width:min(100%, calc(760 * var(--u))); justify-self:center }
.minis-2 .mini-v { height:auto; flex:1; min-height:calc(356 * var(--u)); padding:calc(22 * var(--u)) calc(24 * var(--u)); display:flex; flex-direction:column; justify-content:center; gap:calc(12 * var(--u)) }
.sin-t, .sin-t * { transition:none !important }
.z-doc svg { width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.nb { white-space:nowrap }
.z-fila { display:grid; grid-template-columns:minmax(0, .78fr) 2.6em minmax(0, 2.1fr); align-items:center; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease-ui), transform .45s var(--ease-ui)}
.z1 .z-f1, .z2 .z-f2 { opacity:1; transform:none }
.z-cifra { display:flex; flex-direction:column; gap:.1em; min-width:0 }
.z-cifra b { align-self:flex-start; font-size:2.7em; font-weight:500; letter-spacing:-.04em; line-height:1.02; background:linear-gradient(rgba(37, 81, 214, .26), rgba(37, 81, 214, .26)) 0 92% / 0 .13em no-repeat; transition:background-size .5s var(--ease-ui) .35s}
.z1 .z-f1 .z-cifra b, .z2 .z-f2 .z-cifra b { background-size:100% .13em }
.z-cifra > span { font-weight:500; margin-top:-.2em }
.z-cifra small { font-size:.86em; line-height:1.3; color:var(--ink-3) }
.z-lin { position:relative; display:block; height:2px; margin:0 .3em; background:var(--acento); transform-origin:left; transform:scaleX(0); transition:transform .5s var(--ease-ui) .5s}
.z-lin::after { content:""; position:absolute; right:-1px; top:-4px; width:8px; height:8px; border-top:2px solid var(--acento); border-right:2px solid var(--acento); transform:rotate(45deg) }
.z1 .z-f1 .z-lin, .z2 .z-f2 .z-lin { transform:scaleX(1) }
.z-fuente { min-width:0; padding:.7em .95em .75em; border-radius:.9em; border:1px solid var(--line); background:#fff; opacity:0; transition:opacity .5s var(--ease-ui) 1s}
.z1 .z-f1 .z-fuente, .z2 .z-f2 .z-fuente { opacity:1 }
.z-doc { display:flex; align-items:center; gap:.5em; font-size:.92em; font-weight:500; color:var(--ink) }
.z-donde { margin-top:.45em; font-size:.92em; font-weight:500; color:var(--ink-3) }
.z-frase { margin-top:.45em; line-height:1.4; font-weight:500; color:var(--ink-2) }
.z-frase mark { padding:0 .12em; border-radius:.25em; background:rgba(37, 81, 214, .16); color:var(--ink) }
.z-hoja { display:grid; grid-template-columns:1.8em minmax(0, 9.8em) minmax(0, 1fr); gap:3px; margin-top:.5em; padding:.45em; border-radius:.6em; background:#f6f7f9; font-size:.92em }
.z-hoja > span, .z-hoja > b { min-width:0; padding:.2em .45em; border-radius:.3em; background:#fff; line-height:1.3 }
.z-hoja .z-l { background:transparent; text-align:center; font-weight:500; color:var(--ink-3) }
.z-hoja .z-n { background:transparent; text-align:center; color:var(--ink-3); padding-inline:0 }
.z-hoja .z-vacio { background:transparent }
.z-cab { font:500 calc(12.5 * var(--u))/1.3 var(--mono); color:var(--ink-3); overflow-wrap:anywhere }      /* px, no em: dentro de la hoja (.92em) un .86em bajaría de 12 px */
.z-nom { font-weight:500 }
.z-cel { font-size:1.55em; font-weight:500; line-height:1.1; letter-spacing:-.02em; color:var(--ink); background:rgba(37, 81, 214, .1) !important; box-shadow:0 0 0 2px var(--acento) }
@media (max-width: 900px) { .minis-2 { grid-template-columns:1fr } }
@media (max-width: 640px) {
  .minis-2 .mini-v { padding:18px 16px; min-height:0 }
  .z-fila { grid-template-columns:1fr; row-gap:.55em } .z-lin { display:none }
  .z-hoja { grid-template-columns:1.5em minmax(0, 8.6em) minmax(0, 1fr) }
}

@keyframes cervbarra { to { background-position:-220% 0 } }

.f-tema { margin:0 0 .9em; font-size:var(--fs-s); line-height:1.4; color:var(--ink-2) }
.f-tema[hidden] { display:none }

/* los campos obligatorios, marcados igual (9-oct, Pablo: nombre, correo y mensaje obligatorios); el que falta se ve y se enfoca */
.form label.req::after { content:" *"; color:#b4400a; font-weight:600 }
.form input.falta, .form textarea.falta { border-color:#b4400a; background:#fff7f2; box-shadow:0 0 0 3px rgba(180, 64, 10, .12) }
.form-msg.mal { color:#8f3305; font-weight:500 }