/* Ritmo — misma paleta y tipografía que el spot (video/src/promo/tema.ts) */
:root {
  --azul: #1B3CE8;
  --coral: #FF4438;
  --amarillo: #FFD23F;
  --blanco: #F4F4F2;
  --negro: #08090C;
  --gris: #6F6F6B;

  --pesada: "Archivo Black", "Archivo", system-ui, sans-serif;
  --texto: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --borde: clamp(20px, 5vw, 110px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--pesada); font-weight: 400; letter-spacing: -.02em; line-height: 1.04; margin: 0; }
p { margin: 0; }
img, video { max-width: 100%; display: block; }

.saltar {
  position: absolute; left: -9999px;
  background: var(--coral); color: #fff; padding: 12px 18px; z-index: 10;
}
.saltar:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

/* ---------- rótulos y botones ---------- */
.rotulo {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--coral);
  margin: 0 0 22px;
}
.rotulo--oscuro { color: var(--azul); }

.boton {
  display: inline-block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 26px;
  background: var(--coral);
  color: #fff;
  border: 2px solid var(--coral);
  transition: background .15s ease, color .15s ease;
}
.boton:hover { background: transparent; color: var(--coral); }
.boton--fantasma { background: transparent; color: var(--blanco); border-color: #40403d; }
.boton--fantasma:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.boton--claro { background: var(--blanco); color: var(--coral); border-color: var(--blanco); font-size: 16px; text-transform: none; }
.boton--claro:hover { background: transparent; color: var(--blanco); }
.boton--chico { padding: 10px 18px; font-size: 12px; }

/* ---------- nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px var(--borde);
  position: sticky; top: 0; z-index: 20;
  background: var(--negro);
  border-bottom: 1px solid #1c1d22;
  isolation: isolate;
  /* Capa propia de composición: sin esto algunos webviews dejan
     copias fantasma del contenido al hacer scroll. */
  transform: translateZ(0);
  will-change: transform;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; white-space: nowrap; }
.marca span { font-family: var(--pesada); font-size: 25px; letter-spacing: -.02em; }
.logo { width: 30px; height: 30px; fill: var(--coral); flex: none; }
.nav nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); min-width: 0; flex-wrap: nowrap; }
.nav nav a:not(.boton) {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  color: var(--gris); text-decoration: none; white-space: nowrap;
}
.nav nav a:not(.boton):hover { color: var(--blanco); }

/* ---------- hero ---------- */
.hero { padding: clamp(60px, 11vw, 140px) var(--borde) clamp(50px, 8vw, 100px); }
.hero h1 {
  font-size: clamp(42px, 8.5vw, 108px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-bottom: 34px;
}
.resalte { background: var(--coral); padding: 2px 16px 10px; }
.hero__bajada { max-width: 60ch; font-size: clamp(17px, 2.1vw, 22px); color: #C9C9C4; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.pulso { display: flex; align-items: center; gap: 10px; margin-top: 70px; flex-wrap: wrap; }
.pulso span {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--blanco); flex: none;
  animation: latir 2.6s ease-in-out infinite;
}
.pulso span:nth-child(n+13) { background: var(--amarillo); }
.pulso span:nth-child(n+16) { background: var(--coral); }
.pulso span:nth-child(14) { margin-left: 8px; }
.pulso span:nth-child(15) { margin-left: 16px; }
.pulso span:nth-child(16) { margin-left: 26px; }
.pulso span:nth-child(17) { margin-left: 38px; }
.pulso span:nth-child(18) { margin-left: 52px; opacity: .45; }
.pulso span:nth-child(odd) { animation-delay: .35s; }
@keyframes latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(.72); } }

/* ---------- problema ---------- */
.problema { background: var(--azul); padding: clamp(60px, 9vw, 120px) var(--borde); }
.problema h2 { font-size: clamp(30px, 5vw, 64px); max-width: 18ch; margin-bottom: 26px; }
.problema p { max-width: 54ch; font-size: clamp(17px, 2vw, 21px); color: #D7DCFF; }

/* ---------- cómo ---------- */
.como { background: var(--blanco); color: var(--negro); padding: clamp(60px, 9vw, 120px) var(--borde); }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: paso; }
.pasos li { counter-increment: paso; border-top: 2px solid var(--negro); padding-top: 22px; }
.pasos li::before { content: "0" counter(paso); font-family: var(--mono); font-size: 14px; letter-spacing: .14em; color: var(--azul); display: block; margin-bottom: 14px; }
.pasos h3 { font-size: 23px; margin-bottom: 10px; }
.pasos p { color: #4D4D49; font-size: 16px; }

/* ---------- cierre ---------- */
.cierre { background: var(--coral); padding: clamp(60px, 10vw, 130px) var(--borde); }
.cierre h2 { font-size: clamp(30px, 5.5vw, 68px); max-width: 16ch; margin-bottom: 24px; }
.cierre p { max-width: 52ch; font-size: clamp(17px, 2vw, 21px); margin-bottom: 36px; }

/* ---------- pie ---------- */
.pie {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding: 36px var(--borde); border-top: 1px solid #1c1d22;
}
.marca--pie span { font-size: 20px; }
.marca--pie .logo { width: 24px; height: 24px; }
.pie p { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--gris); }

@media (max-width: 980px) {
  .nav nav a:not(.boton) { display: none; }
}
@media (max-width: 420px) {
  .marca span { font-size: 21px; }
  .logo { width: 25px; height: 25px; }
}

/* ═══════════════ DEMOS INTERACTIVAS ═══════════════ */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding: clamp(60px, 9vw, 120px) var(--borde);
}
.demo--ancha { grid-template-columns: 1fr; align-items: start; }
.demo--clara { background: var(--blanco); color: var(--negro); }
.demo--azul { background: var(--azul); color: var(--blanco); }
.demo--oscura { background: var(--negro); }

.demo__texto h2 { font-size: clamp(30px, 4.6vw, 60px); margin-bottom: 22px; }
.demo__texto > p { max-width: 52ch; font-size: clamp(16px, 1.8vw, 19px); }
.demo--clara .demo__texto > p { color: #4D4D49; }
.demo--azul .demo__texto > p { color: #D7DCFF; }
.demo--oscura .demo__texto > p { color: #C9C9C4; }

.demo__control { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.demo__pista {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: #8D8D88; margin-top: 26px;
}
.demo__control .demo__pista { margin-top: 0; }
.demo__pista--clara { color: rgba(255,255,255,.6); }
.demo__pista::before { content: "↳ "; }

.interruptor {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: inherit; cursor: pointer;
  border: 2px solid currentColor; padding: 11px 18px;
}
.interruptor__luz { width: 9px; height: 9px; border-radius: 50%; background: #B9B9B4; transition: background .2s; }
.interruptor[aria-pressed="true"] .interruptor__luz { background: var(--coral); box-shadow: 0 0 0 4px rgba(255,68,56,.2); }

/* ---- 01 nube ---- */
.demo__lienzo { position: relative; }
.nube {
  position: relative;
  height: clamp(320px, 40vw, 440px);
  border: 1px solid #DBDBD5;
  background: #FBFAF7;
}
.nube--agrupada { border-color: #C9C9C2; }
.punto {
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left .95s cubic-bezier(.22,1,.36,1), top .95s cubic-bezier(.22,1,.36,1),
              background .5s ease, opacity .35s ease, transform .35s ease;
}
.nube__fichas { position: absolute; inset: 0; pointer-events: none; }
.ficha-seg {
  position: absolute; left: var(--cx); top: var(--cy);
  transform: translate(-50%, -138%) translateY(6px);
  background: var(--negro); color: var(--blanco);
  padding: 14px 18px; width: max-content; max-width: 230px;
  border-left: 4px solid var(--tono);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.ficha-seg.visible { opacity: 1; transform: translate(-50%, -138%); }
.ficha-seg b { display: block; font-family: var(--pesada); font-size: 17px; }
.ficha-seg span { display: block; font-size: 14px; color: #B9B9B4; margin: 4px 0 8px; }
.ficha-seg em { font-family: var(--mono); font-style: normal; font-size: 11.5px; letter-spacing: .06em; color: var(--tono); }

/* ---- 02 emparejador ---- */
.emparejador { display: grid; gap: 18px; }
.emparejador__opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opcion {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 18px; cursor: pointer;
  background: transparent; color: rgba(255,255,255,.65);
  border: 2px solid rgba(255,255,255,.25);
  transition: color .18s, border-color .18s, background .18s;
}
.opcion__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--tono); }
.opcion:hover, .opcion.activa { color: #fff; border-color: var(--tono); background: rgba(0,0,0,.18); }

.emparejador__ficha {
  background: var(--negro); border-left: 6px solid var(--tono);
  padding: clamp(24px, 3vw, 38px); min-height: 290px;
}
.ficha__rot { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; color: #8D8D88; }
.ficha__rot b { color: var(--tono); }
.ficha__producto {
  font-family: var(--pesada); font-size: clamp(27px, 3.6vw, 46px);
  margin: 14px 0 16px; color: var(--blanco); letter-spacing: -.02em;
}
.ficha__porque { color: #B9B9B4; max-width: 50ch; font-size: 16px; }
.ficha__datos { display: flex; flex-wrap: wrap; gap: 34px; margin: 26px 0 0; }
.ficha__datos dt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: #8D8D88; }
.ficha__datos dd { margin: 6px 0 0; font-family: var(--pesada); font-size: 17px; color: var(--blanco); }

/* ---- 03 línea de tiempo ---- */
.linea { margin-top: clamp(34px, 5vw, 56px); cursor: crosshair; touch-action: pan-y; }
.linea:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 10px; }

.linea__lectura { display: flex; flex-wrap: wrap; gap: clamp(26px, 5vw, 64px); margin-bottom: 30px; }
.lectura__bloque { min-width: 130px; }
.lectura__rot { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .17em; color: #6F6F6B; margin-bottom: 7px; }
.lectura__bloque strong { font-family: var(--pesada); font-size: clamp(21px, 2.6vw, 30px); font-weight: 400; }
.lectura__estado { color: #6F6F6B; transition: color .2s; }
.es-activo { color: #3DD68C; } .es-vigente { color: #4FB8E8; }
.es-posible { color: var(--amarillo); } .es-fugado { color: var(--coral); }

.linea__pista { position: relative; height: 92px; }
.linea__pista::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: #26272d;
}
/* Una compra en la línea de tiempo. OJO: no usar .marca, que es el logotipo. */
.compra {
  position: absolute; top: 50%; width: 13px; height: 13px;
  margin: 0; border-radius: 50%; background: var(--blanco);
  transform: translate(-50%, -50%); opacity: .8;
  transition: transform .12s ease-out, opacity .12s ease-out;
}
.linea__cursor {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #6F6F6B; transform: translateX(-50%); pointer-events: none;
}
.linea__cursor[data-estado="es-activo"] { background: #3DD68C; }
.linea__cursor[data-estado="es-vigente"] { background: #4FB8E8; }
.linea__cursor[data-estado="es-posible"] { background: var(--amarillo); }
.linea__cursor[data-estado="es-fugado"] { background: var(--coral); }

.linea__hitos { position: relative; height: 20px; }
.linea__hitos span {
  position: absolute; left: var(--x); transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #6F6F6B; white-space: nowrap;
}
.linea__hitos span:first-child { transform: none; left: 0; }
.linea__hitos span:last-child { transform: translateX(-100%); }

@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; }
  .ficha-seg { max-width: 190px; font-size: 14px; }
}

/* ---- 04 ciclo del agente ---- */
.ciclo {
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin-top: clamp(32px, 4vw, 50px);
}
.ciclo__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ciclo__pasos button {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: transparent; cursor: pointer; text-align: left;
  border: 2px solid #DBDBD5; padding: 13px 16px; color: var(--negro);
  font-family: var(--texto); font-size: 16px;
  transition: border-color .18s, background .18s, transform .18s;
}
.ciclo__pasos button:hover, .ciclo__pasos button.activo { background: #fff; transform: translateX(5px); }
.ciclo__pasos button.activo { border-color: var(--negro); }
.ciclo__pasos button[data-quien="ia"].activo { border-color: var(--coral); }
.ciclo__pasos button[data-quien="persona"].activo { border-color: var(--azul); }
.paso__n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: #9A9A95; }
.ciclo__pasos button.activo .paso__n { color: var(--coral); }
.paso__v { font-family: var(--pesada); letter-spacing: -.01em; }
/* la flecha de retorno: el ciclo se cierra */
.ciclo__pasos li:last-child button::after {
  content: "↻"; margin-left: auto; font-size: 19px; color: var(--coral);
}

.ciclo__detalle {
  background: var(--negro); color: var(--blanco);
  padding: clamp(26px, 3.2vw, 42px);
  border-top: 6px solid #4D4D49;
  align-self: start; position: sticky; top: 96px;
}
.ciclo__detalle[data-quien="modelo"] { border-top-color: var(--amarillo); }
.ciclo__detalle[data-quien="ia"] { border-top-color: var(--coral); }
.ciclo__detalle[data-quien="persona"] { border-top-color: var(--azul); }
.detalle__quien { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: #8D8D88; }
.ciclo__detalle[data-quien="modelo"] .detalle__quien { color: var(--amarillo); }
.ciclo__detalle[data-quien="ia"] .detalle__quien { color: var(--coral); }
.ciclo__detalle[data-quien="persona"] .detalle__quien { color: #8FA6FF; }
.ciclo__detalle h3 { font-size: clamp(22px, 2.8vw, 33px); margin: 14px 0 16px; }
.detalle__txt { color: #B9B9B4; font-size: 16.5px; max-width: 48ch; }

/* ---- franja técnica ---- */
.tecnica { background: var(--negro); padding: clamp(50px, 7vw, 86px) var(--borde); }
.chips {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  background: #26272d; border: 1px solid #26272d;
}
.chips li { background: var(--negro); padding: 22px 24px; }
.chips b { display: block; font-family: var(--pesada); font-size: 18px; margin-bottom: 7px; }
.chips span { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; color: #8D8D88; line-height: 1.5; }

@media (max-width: 860px) {
  .ciclo { grid-template-columns: 1fr; }
  .ciclo__detalle { position: static; }
}