/* ══════════════════════════════════════════════════════════════════════
   EL SISTEMA DE LAS LANDINGS · fuente única
   ----------------------------------------------------------------------
   Los tokens, la tipografía, el ritmo de secciones y las piezas que
   comparten /towercos, /isps y /contractors. Cada página se queda sólo con
   lo suyo: sus secciones, sus ilustraciones, sus animaciones.

   Se carga ANTES del <style> de la página, así lo propio puede pisar lo
   común sin pelear especificidad.

   El header va aparte, en site-header.css.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Los tokens del design system de Sytex ────────────────────────────
     Copiados del bloque que el propio producto trae (Tailwind v4 theme,
     espejo de src/styles/tailwind.css). Ningún color se elige acá: si un
     tono no está en esta lista, no se usa. */
  --syt-accent-500:#606ff7; --syt-accent-400:#8891fa; --syt-accent-300:#b0b5fc;
  --syt-accent-200:#cacdfe; --syt-accent-100:#e2e4fe; --syt-accent-50:#f1f2fe;
  --syt-primary-500:#00bcd4; --syt-primary-300:#4dd0e1;
  --syt-primary-100:#b2ebf2; --syt-primary-50:#e0f7fa;
  --syt-neutral-500:#2d3c3e; --syt-neutral-400:#5a7077; --syt-neutral-300:#8ea4aa;
  --syt-neutral-200:#d2d2d2; --syt-neutral-100:#e9edf0;
  --syt-neutral-50:#f3f6f7; --syt-neutral-25:#f8fafa;
  --syt-warning-500:#ffa825; --syt-warning-300:#ffde98; --syt-warning-200:#ffeecb;
  --syt-alert-500:#f44336;
  --syt-border-color:#d6e2e4; --syt-canvas-bg-color:#f5f5f5;
  --syt-font-color:#2d3c3e; --syt-button-font-color:#5c7279;

  /* ── Los roles de la página, siempre apuntando a un token ──────────── */
  --ink:var(--syt-neutral-500); --ink-2:var(--syt-font-color);
  --paper:var(--syt-neutral-25); --paper-2:var(--syt-neutral-50);
  --line:var(--syt-border-color);
  --muted:var(--syt-neutral-400); --muted-2:var(--syt-neutral-300);
  --accent:var(--syt-accent-500);
  /* El indigo 500 sobre blanco da 4.11:1 y no llega al 4.5 de WCAG AA.
     --accent-ink es la versión para texto y para el fondo del CTA: 5.34:1. */
  --accent-ink:#5059e8;
  --indigo-ink:#3a44c0; --indigo-bd:var(--syt-accent-200); --indigo-bg:var(--syt-accent-50);
  --signal:var(--syt-primary-500);
  --teal-bg:var(--syt-primary-50); --teal-bd:var(--syt-primary-100);
  --amber-bg:var(--syt-warning-200); --amber-bd:var(--syt-warning-300);
  /* Los dos tonos que se usan como TEXTO sobre blanco no son el 500 de su
     rampa: el teal y el ámbar del producto no llegan a 4.5:1 en 14-17px.
     Estos sí (5.1:1 y 4.9:1) y son los que hay que usar para escribir. */
  --signal-ink:#0a7d8a; --amber-ink:#9c6209;
  --onDark:var(--syt-neutral-200); --onDark-2:var(--syt-neutral-300);
  --white:#fff;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-sans:var(--font);
  --maxw:1180px;   /* la misma caja que el header */
  --air:clamp(4.5rem,10vw,9rem);
  --shadow-soft:0 40px 80px -40px rgba(45,60,62,.32), 0 8px 24px -16px rgba(45,60,62,.18);
}

/* ── la base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--font);font-size:17px;line-height:1.6;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;
}
/* El envoltorio que traen todas: nada se sale por el costado. */
.page{overflow-x:clip}
img{max-width:100%}

/* ── la tipografía ─────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:clamp(3rem,7vw,5.6rem);line-height:.96;letter-spacing:-.035em}
h2{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.02;letter-spacing:-.028em}
h3{font-size:1.06rem;font-weight:800;letter-spacing:-.012em;line-height:1.3}
p{margin:0}
a{color:var(--accent-ink)}
.eyebrow{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);
}
.lede{font-size:clamp(1.12rem,1.8vw,1.38rem);line-height:1.58;color:var(--muted);font-weight:400}

/* ── el ritmo: una idea por pantalla, y el fondo alterna ───────────── */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.narrow{max-width:46rem;margin-inline:auto}
section{padding-block:clamp(5rem,11vw,9.5rem)}
section[id]{scroll-margin-top:84px}
/* .band y .alt son el mismo fondo alterno con dos nombres: .band en
   /towercos, .alt en /isps y /contractors. */
section.band,section.alt{background:var(--paper);border-block:1px solid var(--line)}
section.dark{background:var(--ink);color:#fff}
section.dark .lede{color:var(--onDark-2)}
section.dark .eyebrow{color:var(--syt-accent-300)}
/* El titular y la bajada van a una línea, al ancho de la caja. El texto
   está medido para eso: si se reescribe más largo, parte en dos y hay que
   volver a medirlo o acortarlo. El hero es la excepción — su bajada va a
   dos líneas a propósito. */
.wrap>h2{max-width:none}
.wrap>.lede{margin-top:1.4rem;max-width:none}

/* ── los botones ───────────────────────────────────────────────────── */
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{
  font-family:inherit;font-size:1rem;font-weight:600;padding:1rem 1.9rem;
  border-radius:999px;text-decoration:none;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
/* El fantasma tiene dos vidas: sobre claro es un borde fino; sobre un fondo
   oscuro (un hero o una sección .dark) es vidrio. */
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
section.dark .btn-ghost,.on-dark .btn-ghost{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
section.dark .btn-ghost:hover,.on-dark .btn-ghost:hover{border-color:#fff;color:#fff}

/* ── las cifras: lo único que puede pesar, porque son datos ────────── */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:2.6rem 2.2rem;margin-top:clamp(3rem,6vw,4.5rem);
}
.stat{padding-left:1.4rem;border-left:2px solid var(--line)}
section.dark .stat{border-left-color:rgba(255,255,255,.22)}
.stat .n{
  display:block;font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.stat .n s{font-size:.42em;font-weight:600;color:var(--muted-2);text-decoration-thickness:1px;letter-spacing:-.01em}
section.dark .stat .n s{color:var(--onDark-2)}
.stat .l{display:block;margin-top:.9rem;font-weight:700;font-size:.98rem}
.stat .s{display:block;margin-top:.35rem;font-size:.88rem;line-height:1.5;color:var(--muted)}
section.dark .stat .s{color:var(--onDark-2)}

/* ── la captura del producto: una sola, grande, sin marco ──────────── */
.shot{margin-top:clamp(3rem,6vw,4.5rem)}
.shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.shot figcaption{margin-top:.9rem;font-size:.86rem;line-height:1.5;color:var(--muted);max-width:44rem}

/* ══════════════════════════════════════════════════════════════════════
   EL MOVIMIENTO
   Lo enciende landing.js poniendo .sx-anim en el <html>, y sólo si la
   página lo pide con <body data-motion> y el sistema operativo no pidió
   menos movimiento. Sin JS, o con prefers-reduced-motion, todo queda
   visible y quieto: nada depende de la animación para leerse.
   ══════════════════════════════════════════════════════════════════════ */
html.sx-anim [data-anim]{
  opacity:0;transform:translateY(16px);
  transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform;
}
html.sx-anim [data-anim].in{opacity:1;transform:none}
/* Las etapas entran desde la izquierda, que es como se lee un proceso. */
html.sx-anim .steps li[data-anim]{transform:translateX(-14px)}
html.sx-anim .steps li[data-anim].in{transform:none}
/* Las cifras no se mueven: cuentan. El salto lo hace el script. */
html.sx-anim .stat[data-anim]{transform:none}

/* ── lo que responde al mouse ──────────────────────────────────────── */
.types article{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.types article:hover{transform:translateY(-3px);border-color:var(--indigo-bd);box-shadow:0 16px 34px -22px rgba(45,60,62,.5)}
.steps li{transition:border-color .22s ease}
.steps li:hover{border-top-color:var(--indigo-bd)}
.steps li::before{transition:color .22s ease,transform .22s ease}
.steps li:hover::before{color:var(--accent);transform:translateX(2px)}
.shot img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.shot:hover img{transform:scale(1.012)}
.stat{transition:border-left-color .22s ease}
.stat:hover{border-left-color:var(--accent)}
.more a{transition:color .18s ease,border-color .18s ease}
.more a:hover{color:var(--accent)}

/* ── el hueco de una imagen que todavía no existe ──────────────────────
   No es un gris mudo: dice qué imagen va ahí, qué tiene que mostrar y en
   qué medida, para que se pueda pedir o buscar sin abrir el código. Es
   temporal — cuando la imagen exista, se reemplaza el .ph por el <img> y
   el pie de foto se queda como está. */
.ph{
  display:grid;place-items:center;text-align:center;gap:0;
  border:1px dashed var(--muted-2);border-radius:14px;color:var(--muted);
  padding:clamp(1.6rem,4vw,2.6rem);aspect-ratio:16/10;
  background:repeating-linear-gradient(45deg,var(--paper) 0 12px,var(--paper-2) 12px 24px);
}
.ph.banner{aspect-ratio:21/9}
.ph .k{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.ph .t{margin-top:.7rem;font-size:clamp(1.02rem,1.6vw,1.22rem);font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--ink);max-width:34ch}
.ph .d{margin-top:.6rem;font-size:.9rem;line-height:1.55;max-width:56ch}
.ph .m{margin-top:1rem;font-size:.74rem;letter-spacing:.06em;color:var(--muted-2)}
section.dark .ph{
  border-color:rgba(255,255,255,.28);color:var(--onDark-2);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 12px,rgba(255,255,255,.06) 12px 24px);
}
section.dark .ph .t{color:#fff}

/* ── la frase que remata una sección ───────────────────────────────── */
.pull{
  margin-top:clamp(2.6rem,5vw,3.6rem);max-width:40rem;
  font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.45;color:var(--muted);
}
.pull b{color:var(--ink);font-weight:700}

/* ── un proceso: etapas numeradas, no tarjetas ─────────────────────── */
.steps{list-style:none;margin:clamp(3rem,6vw,4.5rem) 0 0;padding:0;counter-reset:st}
.steps li{
  display:grid;grid-template-columns:3.4rem 1fr;gap:0 1.6rem;
  padding-block:clamp(1.7rem,3.4vw,2.4rem);border-top:1px solid var(--line);
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{
  counter-increment:st;content:"0" counter(st);
  font-size:.95rem;font-weight:800;letter-spacing:.06em;color:var(--accent-ink);padding-top:.45rem;
}
.steps h3{margin:0;font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.15;letter-spacing:-.025em}
.steps p{margin:.7rem 0 0;max-width:42rem;line-height:1.62;color:var(--muted)}

/* ── las variantes de algo: tarjetas chicas, en fila ───────────────── */
.types{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1.1rem;margin-top:clamp(3rem,6vw,4.5rem);
}
.types article{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.4rem}
.types .tk{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-ink);
}
.types h3{margin:.65rem 0 0;font-size:1.1rem;letter-spacing:-.015em}
.types p{margin:.6rem 0 0;font-size:.94rem;line-height:1.55;color:var(--muted)}

/* ── dos bloques enfrentados, numerados ────────────────────────────── */
.pair-blocks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));
  gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(3rem,6vw,4.5rem);
}
.pair-blocks article{padding-top:1.6rem}
.pair-blocks .num{font-size:.8rem;font-weight:800;letter-spacing:.12em;color:var(--muted-2)}
.pair-blocks h3{margin:.9rem 0 0;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.18;letter-spacing:-.02em}
.pair-blocks p{margin:1rem 0 0;line-height:1.62;color:var(--muted);max-width:34rem}
.pair-blocks p.strong{color:var(--ink);font-weight:700}

/* ── tres columnas cortas, con la regla a la izquierda ─────────────── */
.three{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:2.2rem;margin-top:clamp(3rem,6vw,4rem);
}
.three .col{padding-left:1.4rem;border-left:2px solid var(--line)}
.three .col.ours{border-left-color:var(--accent-ink)}
.three .k{display:block;font-weight:700;font-size:.98rem}
.three p{margin:.45rem 0 0;font-size:.92rem;line-height:1.55;color:var(--muted)}

/* ── el link que sigue leyendo, y la nota al pie de una sección ────── */
.more{margin-top:2.6rem}
.more a{color:var(--accent-ink);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.foot{margin-top:clamp(2.6rem,5vw,3.4rem);font-size:.82rem;line-height:1.55;color:var(--onDark-2);max-width:48rem}

/* ── la franja del evento · temporal, se borra el 9 de octubre ─────── */
.evtbar{background:var(--ink);color:var(--onDark);font-size:.86rem}
.evtbar .wrap{padding-block:.62rem;display:flex;align-items:center;justify-content:center;gap:.5rem 1rem;flex-wrap:wrap;text-align:center}
.evtbar .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.evtbar b{color:#fff;font-weight:800}
.evtbar a{color:#fff;text-decoration:none;font-weight:700;border-bottom:1px solid var(--onDark-2)}
.evtbar a:hover{border-bottom-color:var(--signal)}

/* ── el footer ─────────────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:var(--onDark-2)}
.site-footer .wrap{padding-block:clamp(2.8rem,6vw,4rem) 2rem}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.foot-brand .flogo img{height:32px;display:block}
.foot-brand .ftag{color:var(--onDark-2);font-size:.92rem;line-height:1.5;margin:1.1rem 0 1.4rem;max-width:20rem}
.fsocial{display:flex;gap:.7rem}
.fsocial a{width:34px;height:34px;border:1px solid var(--syt-neutral-400);border-radius:8px;display:grid;place-items:center;color:var(--onDark)}
.fsocial a:hover{border-color:var(--signal);color:#fff}
.fsocial svg{width:16px;height:16px;fill:currentColor}
.foot-brand .fsoc{display:block;margin-top:1.6rem;width:62px;height:62px}
.fcol h4{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--onDark-2);margin:.3rem 0 1rem;font-weight:700}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.fcol a{color:var(--onDark);text-decoration:none;font-size:.9rem}
.fcol a:hover{color:#fff}
.foot-bottom{border-top:1px solid var(--syt-neutral-400);margin-top:2.6rem;padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap}
.foot-bottom .cr{font-size:.82rem;font-weight:600;color:var(--onDark-2)}
.foot-bottom .cr a{color:var(--onDark)}
.foot-bottom .cr a:hover{color:#fff}
.fyc{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--onDark-2)}
.fyc svg{width:15px;height:15px;flex:none}
.foot-badges{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.badge{font-size:.66rem;letter-spacing:.05em;color:var(--onDark);border:1px solid var(--syt-neutral-400);border-radius:20px;padding:.32rem .75rem;display:inline-flex;align-items:center;gap:.4rem}
.badge .yc-mark{color:var(--syt-warning-500);font-weight:700}
.badge .soc-dot{width:7px;height:7px;border-radius:50%;background:var(--signal)}

@media (max-width:980px){
  .steps li{grid-template-columns:1fr;gap:.45rem}
  .three{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ── el dolor del ICP, en el hero ────────────────────────────────────
   Una o dos líneas con el dolor con el que entra el perfil, en las
   palabras del ICP (KB 673). Van entre la bajada y los botones: la
   promesa, lo que pasa hoy, y recién ahí la acción.
   Sin ilustración a propósito — la pantalla del dolor con piezas
   sueltas alrededor de un hueco ya se probó y no se entendía. */
.pains{
  list-style:none;margin:0 0 clamp(1.4rem,2.6vw,2rem);padding:0;
  display:grid;gap:.5rem;max-width:60ch;
}
.pains li{
  position:relative;padding-left:1.1rem;
  font-size:.95rem;line-height:1.5;color:#5a7077;
}
.pains li::before{
  content:"";position:absolute;left:0;top:.68em;
  width:.45rem;height:1.5px;background:currentColor;opacity:.65;
}
.on-dark .pains li{color:#9fb4b3}
@media (max-width:640px){.pains li{font-size:.9rem}}

/* ── los logos del hero ──────────────────────────────────────────────
   Eran los nombres escritos. Ahora van los logos de verdad, donde
   tenemos el archivo, en monocromo claro sobre el fondo oscuro
   (brightness(0) invert(1) aplana cualquier logo, venga como venga).
   El que todavía no tiene archivo sigue como palabra, a la misma
   altura, para que la fila se lea pareja. El alt lleva el nombre: la
   lista de clientes sigue siendo texto para los crawlers. */
.hero .logos{align-items:center}
.hero .logos img{
  height:26px;width:auto;max-width:118px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.6;transition:opacity .2s ease;
}
.hero .logos img:hover{opacity:.9}
.hero .logos > span{display:inline-flex;align-items:center;height:26px}
@media (max-width:640px){
  .hero .logos img{height:21px;max-width:92px}
  .hero .logos > span{height:21px}
}

/* ── el teléfono, sobre la esquina de la pantalla del producto ───────
   El mismo trabajo visto en campo: el formulario que se llena en el
   teléfono, recreado con el kit (nada de capturas). Se monta sobre la
   esquina inferior derecha del mockup de escritorio; por debajo de
   1180px deja de superponerse y baja, centrado. */
#s-ui .wrap{position:relative}
.uiphone{
  position:absolute;right:-18px;bottom:0;z-index:2;
  transform:scale(.72) translateY(11%);transform-origin:bottom right;
  filter:drop-shadow(0 30px 50px rgba(11,18,32,.28));
}
@media (max-width:1180px){
  .uiphone{
    position:static;transform:none;filter:none;
    margin:clamp(2rem,4vh,3rem) auto 0;display:flex;justify-content:center;
  }
}
/* dentro del teléfono los campos van más compactos */
.uiphone .sy-field{gap:2px}
.uiphone .sy-field label{font-size:11px}
.uiphone .sy-input{padding:7px 9px;font-size:12.5px}

/* ── el proceso se dibuja ────────────────────────────────────────────
   La pantalla de agentes entra columna por columna y las líneas que las
   unen se estiran. Mínimo a propósito: es un diagrama, no un show. Todo
   cuelga de html.sx-anim, que landing.js sólo enciende si el sistema no
   pidió menos movimiento. */
html.sx-anim .wf-col[data-anim]{opacity:0;transform:translateY(10px)}
html.sx-anim .wf-col[data-anim].in{opacity:1;transform:none}
html.sx-anim .wf-col[data-anim]::before{
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
html.sx-anim .wf-col[data-anim].in::before{transform:scaleX(1)}
html.sx-anim .wf-col[data-anim]::after{opacity:0;transition:opacity .28s ease calc(var(--d,0ms) + 280ms)}
html.sx-anim .wf-col[data-anim].in::after{opacity:1}

/* la tarea que tiene el agente respira, y nada más */
html.sx-anim .wf-node.is-on{animation:sx-agente 3.2s ease-in-out infinite}
@keyframes sx-agente{
  0%,100%{box-shadow:0 0 0 3px rgba(0,188,212,.14)}
  50%    {box-shadow:0 0 0 9px rgba(0,188,212,.04)}
}

/* ── las barras de avance se llenan al entrar ── */
html.sx-anim [data-anim] .sy-prog-track > span{
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.22,1,.36,1) .25s;
}
html.sx-anim [data-anim].in .sy-prog-track > span{transform:scaleX(1)}

/* ── el teléfono: el veredicto y las fotos llegan un poco después ── */
html.sx-anim .uiphone[data-anim] .sy-verdict,
html.sx-anim .uiphone[data-anim] .sy-shots figure{
  opacity:0;transform:translateY(7px);
  transition:opacity .42s ease,transform .42s ease;
}
html.sx-anim .uiphone[data-anim].in .sy-verdict{opacity:1;transform:none;transition-delay:.38s}
html.sx-anim .uiphone[data-anim].in .sy-shots figure{opacity:1;transform:none;transition-delay:.42s}
html.sx-anim .uiphone[data-anim].in .sy-shots figure:nth-child(2){transition-delay:.54s}
html.sx-anim .uiphone[data-anim].in .sy-shots figure:nth-child(3){transition-delay:.66s}

/* ── el FAQ ──────────────────────────────────────────────────────────
   No es una pantalla: es un bloque compacto antes del cierre. Existe
   por dos motivos, y los dos importan — contesta lo que el lector se
   pregunta, y es el texto plano que los motores de IA sí leen (el
   FAQPage del <head> sale de este mismo HTML). */
.faq{padding:clamp(3.5rem,8vh,5.5rem) 0;background:#fff;border-top:1px solid #edf1f2}
.faq .wrap{max-width:var(--w,1100px);margin:0 auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.faq h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 clamp(1.6rem,3vh,2.2rem)}
.faq-list{display:grid;gap:.6rem}
@media (min-width:900px){.faq-list{grid-template-columns:1fr 1fr;gap:.6rem 2.5rem}}
.faq details{border-bottom:1px solid #edf1f2;padding:.2rem 0}
.faq summary{
  list-style:none;cursor:pointer;padding:.95rem 1.8rem .95rem 0;position:relative;
  font-size:1rem;font-weight:600;color:var(--ink,#2d3c3e);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.25rem;top:1.35rem;width:.5rem;height:.5rem;
  border-right:1.8px solid #8ea4aa;border-bottom:1.8px solid #8ea4aa;
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:#606ff7}
.faq details p{margin:0 0 1.1rem;padding-right:1.8rem;font-size:.95rem;line-height:1.6;color:#5a7077}

/* ── las pantallas recreadas tienen vida propia ──────────────────────
   No sólo entran: adentro pasa algo. Un barrido recorre las filas, el
   punto de la barra late, y las barras de avance se llenan (más arriba).
   Todo en loop lento y todo bajo html.sx-anim, o sea que con
   prefers-reduced-motion la pantalla se queda quieta. */
@keyframes sx-sweep{
  0%,12%  {background:rgba(96,111,247,.10)}
  26%,100%{background:transparent}
}
html.sx-anim .hero-screen .sy-rows .sy-row,
html.sx-anim .uiframe .sy-rows .sy-row{animation:sx-sweep 9s linear infinite}
html.sx-anim .sy-rows .sy-row:nth-child(2){animation-delay:1.1s}
html.sx-anim .sy-rows .sy-row:nth-child(3){animation-delay:2.2s}
html.sx-anim .sy-rows .sy-row:nth-child(4){animation-delay:3.3s}
html.sx-anim .sy-rows .sy-row:nth-child(5){animation-delay:4.4s}

}

/* las píldoras de estado laten una vez al entrar, para que se note que
   el estado es un dato vivo y no una etiqueta pintada */
@keyframes sx-pill{0%{transform:scale(.88);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
html.sx-anim [data-anim].in .sy-pill{animation:sx-pill .5s cubic-bezier(.22,1,.36,1) both}
html.sx-anim [data-anim].in .sy-pill:nth-of-type(2){animation-delay:.12s}

/* ── quién mueve el trabajo en cada momento ──────────────────────────
   La cadena mostraba cinco frases con un número: se leía como una lista
   de tareas sin nadie adentro. Lo que hace que el home parezca real son
   las personas y el agente, así que cada momento lleva ahora su actor —
   el equipo, el contratista, el técnico, la IA, el cliente — con la
   misma familia de color que el tablero del home. */
.beat-who{display:flex;align-items:center;gap:.55rem;margin:.1rem 0 .7rem}
.beat-who .av{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;background:#eef1f3;color:#5a7077;
}
.beat-who .av svg{width:15px;height:15px;display:block}
/* .nm se fue de la cadena: ahí queda el TIPO de actor, no un nombre
   propio inventado. La regla se deja porque isps-c.html todavía lo usa. */
.beat-who .nm{font-size:.9rem;font-weight:700;color:#253031;white-space:nowrap}
.beat-who .rl{
  font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;background:#eef1f3;color:#5a7077;white-space:nowrap;
}
.beat-who[data-k="team"] .av,.beat-who[data-k="team"] .rl{background:#e4e7fb;color:#4c5bd4}
.beat-who[data-k="con"]  .av,.beat-who[data-k="con"]  .rl{background:#fdf0dc;color:#a3690f}
.beat-who[data-k="tech"] .av,.beat-who[data-k="tech"] .rl{background:#e7f6e8;color:#2e7d32}
.beat-who[data-k="ai"]   .av,.beat-who[data-k="ai"]   .rl{background:#d9f6f9;color:#0a7d8a}
.beat-who[data-k="cli"]  .av,.beat-who[data-k="cli"]  .rl{background:#f1f2f4;color:#5a7077}
@media (max-width:520px){.beat-who{flex-wrap:wrap;gap:.4rem}.beat-who .nm{font-size:.85rem}}

/* ── el hero en el telefono ──────────────────────────────────────────
   La ventana del hero es la app entera: barra lateral + contenido. Esa
   lateral tiene ancho propio y empujaba el .wrap a 516-570 px dentro de
   una pantalla de 390, asi que el titular, la bajada y los botones salian
   cortados por la derecha. No se ve como scroll horizontal porque algo mas
   arriba tiene overflow-x oculto: se ve como texto cortado, que es peor,
   porque no hay forma de llegar a lo que falta.
   En el telefono la lateral no va: la app de campo tampoco la tiene. Con
   eso solo el wrap vuelve a 390 y no queda nada desbordando. */
@media (max-width:700px){
  .hero-screen .sy-rail{display:none}
  .hero-screen .sy-shell{grid-template-columns:minmax(0,1fr)}
  .hero-screen .sy-shell>*{min-width:0}

  /* Las herramientas de la barra (buscar, notificaciones) se pasaban ~26 px
     del borde. En el telefono no aportan nada. */
  .hero-screen .sy-tools{display:none}

  /* El tablero y la tabla son anchos por naturaleza: tres columnas de 280 px
     y una tabla de cinco columnas no entran en 390. En el producto scrollean
     dentro de su ventana, no estiran la pagina: eso mismo aca. Sin esto, el
     .wrap crecia a 647-1018 px y CORTABA todo lo demas de la seccion. */
  .sy-win .sy-board{overflow-x:auto}
  .sy-board .sy-col{flex:0 0 min(78vw,280px)}
  .sy-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sy-table{min-width:520px}

  /* La causa de fondo: cada .scr es un grid y su .wrap es un item de grid, o
     sea que arranca con min-width:auto y se NIEGA a bajar del ancho de su
     contenido. Con el tablero adentro eso son 1018 px en una pantalla de 390,
     y todo lo demas de la seccion —titular, bajada, botones— sale cortado.
     Con min-width:0 el item puede encogerse; despues la ventana se ata al
     ancho disponible y el tablero scrollea adentro, como en el producto. */
  .scr > .wrap{min-width:0}
  .scr .uiframe .sy-win,.scr .uiframe:has(.sy-board) .sy-win{max-width:100%;width:100%}
  .scr .uiframe .sy-board{overflow-x:auto}
}