/* ==========================================================================
   Cach-AI — homepage brutalista.
   Idea: la burocracia chilena como estética. Formularios, timbres, folios,
   boletas y cintas de peligro, en la paleta del logo (azul, lima, amarillo).
   Bordes de 3 px, sombras duras sin desenfoque, cero radios, tipografía a
   gritos. Nada de degradados ni cristal: todo se ve como está construido.

   Regla de este archivo: los nodos de cobro (.btn-buy, .btn-buy-cloud,
   .checkout-email, .ptab, .price-pane) mantienen sus clases originales porque
   main.js las usa. Aquí solo cambia cómo se ven.
   ========================================================================== */

/* ---------- Tipografías propias (SIL OFL 1.1, ver assets/fonts/LICENSE.txt) ----------
   Alojadas en el propio sitio: el navegador no contacta a Google Fonts.
   Los unicode-range son los mismos que entrega Google Fonts (latin-ext primero,
   latin después: donde se solapan gana la última). Los nombres de familia deben
   coincidir con --f-d y --f-m. Archivo es variable: pesos 400-900, anchos 62-125 %. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/plexmono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/plexmono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f3efe4;
  --paper-2: #e8e2d0;
  --ink: #0a0a0a;
  --ink-2: #33332e;
  --navy: #0b2e57;
  --blue: #105090;
  --cyan: #1aa0d8;
  --lime: #a9cc3c;
  --yellow: #e8d83a;
  --wa: #25d366;

  --bd: 3px solid var(--ink);
  --sh-s: 4px 4px 0 var(--ink);
  --sh: 6px 6px 0 var(--ink);
  --sh-l: 10px 10px 0 var(--ink);

  --f-d: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-m: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --nav-h: 68px;
  --gut: 16px;
}

@media (min-width: 900px) {
  :root {
    --gut: 40px;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-d);
  font-stretch: 100%;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  /* Papel cuadriculado: se ve donde una sección no pinta fondo propio. */
  background-image:
    linear-gradient(to right, rgb(10 10 10 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(10 10 10 / 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 8px var(--yellow);
}

::selection {
  background: var(--ink);
  color: var(--lime);
}

.wrap {
  width: min(1240px, 100% - (var(--gut) * 2));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--yellow);
  border: var(--bd);
  font: 700 14px var(--f-m);
  text-transform: uppercase;
}

.skip:focus {
  top: 8px;
}

/* ---------- Tipografía ---------- */
.mega {
  font-family: var(--f-d);
  font-weight: 900;
  font-stretch: 100%;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-size: clamp(1.75rem, 8.6vw, 3.4rem);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.mega--m {
  font-size: clamp(1.4rem, 6.4vw, 2.6rem);
}

@media (max-width: 340px) {
  .mega {
    font-size: 1.5rem;
  }

  .mega--m {
    font-size: 1.35rem;
  }
}

@media (min-width: 700px) {
  .mega {
    font-stretch: 125%;
    font-size: clamp(2.6rem, 6vw, 5rem);
  }

  .mega--m {
    font-size: clamp(2rem, 4.6vw, 3.9rem);
  }
}

mark {
  background: var(--lime);
  color: var(--ink);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lead {
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.5;
  font-weight: 500;
  max-width: 62ch;
}

/* Etiqueta de sección: "01 / El problema". */
.idx {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 6px 12px 6px 6px;
  background: var(--ink);
  color: var(--lime);
  border: var(--bd);
  font: 700 13px var(--f-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.idx b {
  padding: 2px 8px;
  background: var(--lime);
  color: var(--ink);
}

/* Sticker inclinado. "Ejemplo ilustrativo" va en todo lo que no es un cliente real. */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  background: var(--yellow);
  border: var(--bd);
  box-shadow: 3px 3px 0 var(--ink);
  font: 700 12px var(--f-m);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
}

.sticker .dot {
  width: 10px;
  height: 10px;
  background: var(--ink);
}

.sticker--ej {
  background: var(--paper);
  transform: rotate(2deg);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--f-d);
  font-stretch: 110%;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: var(--bd);
  border-radius: 0;
  box-shadow: var(--sh-s);
  cursor: pointer;
  transition:
    transform 110ms ease,
    box-shadow 110ms ease,
    background-color 110ms ease;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

.btn-primary {
  background: var(--lime);
}

.btn-primary:hover {
  background: var(--yellow);
}

.btn-secondary {
  background: #fff;
}

.btn-wa {
  background: var(--wa);
}

.btn-wa:hover {
  background: #1fbd5c;
}

.btn-xl {
  min-height: 58px;
  padding: 0 28px;
  font-size: 16px;
}

/* El icono es la cara de nuestro robot. max-width:none porque la regla global
   de img lo aplastaba dentro de botones con padding (ya pasó una vez). */
.wa-icon {
  width: 28px;
  height: 28px;
  max-width: none;
  flex-shrink: 0;
}

/* ---------- Cintas ---------- */
.tape {
  overflow: hidden;
  background: var(--yellow);
  border-bottom: var(--bd);
  font: 700 13px var(--f-m);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tape-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: cinta 46s linear infinite;
}

/* El espaciado va DENTRO del ítem (no como gap): así la mitad del recorrido cae
   exacto en el punto donde el patrón se repite y no hay salto en la costura. */
.tape-track li {
  flex: none;
  display: flex;
  align-items: center;
  padding: 10px 26px 10px 0;
  white-space: nowrap;
}

.tape-track li::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 26px;
  background: var(--ink);
}

.tape--ink {
  background: var(--ink);
  color: var(--lime);
  border-block: var(--bd);
  font-size: 14px;
}

.tape--ink .tape-track {
  animation-duration: 70s;
}

.tape--ink .tape-track li::after {
  background: var(--lime);
}

@keyframes cinta {
  to {
    transform: translateX(-50%);
  }
}

.hazard {
  height: 24px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 18px, var(--yellow) 18px 36px);
  border-block: var(--bd);
}

/* ---------- Cabecera ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: var(--bd);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* El logo es lo primero que cede ancho en un flex; el <img> del wordmark, con
   altura fija, se recorta en vez de reescalarse. Va protegido en todos los anchos. */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
}

.nav-brand .symbol {
  width: 38px;
  height: 38px;
}

.nav-brand .wordmark {
  height: 28px;
  width: auto;
}

.nav-links {
  display: none;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 700 12.5px var(--f-m);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-links a {
  display: block;
  padding: 11px 10px;
  border: 3px solid transparent;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover {
  background: var(--yellow);
  border-color: var(--ink);
}

.nav .btn {
  min-height: 44px;
  padding-inline: 16px;
  white-space: nowrap;
}

/* Solo el robot, sin texto: la barra ya lleva logo, siete enlaces y el CTA. */
.nav .nav-wa {
  width: 44px;
  padding: 0;
  flex-shrink: 0;
}

.nav .nav-wa .wa-icon {
  width: 32px;
  height: 32px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  background: var(--paper);
  border: var(--bd);
  box-shadow: var(--sh-s);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 3px;
  background: var(--ink);
  transition: transform 160ms ease, background 160ms ease;
}

.nav-toggle span {
  position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before {
  top: -7px;
}

.nav-toggle span::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 1023.98px) {
  .nav-toggle {
    display: inline-flex;
    order: 3;
  }

  /* Orden visual: logo | ... | WhatsApp | Ver precios | menú. El margin-left:auto
     del primero del grupo derecho junta los tres a la derecha. */
  .nav .nav-wa {
    order: 1;
    margin-left: auto;
  }

  .nav .btn-primary {
    order: 2;
  }

  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: var(--bd);
    box-shadow: 0 10px 0 var(--ink);
    font-size: 15px;
  }

  .nav-links:not(.open) {
    display: none;
  }

  .nav-links.open {
    display: flex;
  }

  /* Sin tope de alto, en un telefono girado el panel se pasaba de la pantalla y los ultimos
     enlaces quedaban inalcanzables (la cabecera es sticky, asi que la pagina no se desplaza
     para llegar a ellos). */
  .nav-links {
    max-height: calc(100vh - var(--nav-h) - 44px);
    max-height: calc(100dvh - var(--nav-h) - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-links a {
    padding: 16px var(--gut);
    border: 0;
    border-top: var(--bd);
  }
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
}

/* Entre 1024 y 1280 px la barra lleva logo + 7 enlaces + robot + CTA en ~944 px utiles:
   se aprietan los enlaces (no el logo, que nunca se encoge). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav .wrap {
    gap: 10px;
  }

  .nav-links {
    gap: 0;
    font-size: 12px;
  }

  .nav-links a {
    padding: 11px 6px;
  }
}

@media (max-width: 470px) {
  /* A 360 px no entran logo completo + robot + "Ver precios" + menú: se deja el
     isotipo, que es la pieza reconocible. */
  .nav .wrap {
    gap: 8px;
  }

  .nav-brand .wordmark {
    display: none;
  }

  .nav .btn-primary {
    padding-inline: 12px;
    font-size: 13px;
  }
}

/* ---------- Secciones ---------- */
.sec {
  padding: 64px 0;
  border-bottom: var(--bd);
}

@media (min-width: 900px) {
  .sec {
    padding: 104px 0;
  }
}

.sec--paper2 {
  background: var(--paper-2);
}

.sec--yellow {
  background: var(--yellow);
}

.sec--navy {
  background: var(--navy);
  color: var(--paper);
}

.sec--ink {
  background: var(--ink);
  color: var(--paper);
}

.sec--lime {
  background: var(--lime);
}

.sec--navy .idx,
.sec--ink .idx {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}

.sec--navy .idx b,
.sec--ink .idx b {
  background: var(--ink);
  color: var(--lime);
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.sec-head .idx {
  margin-bottom: 0;
  justify-self: start;
}


.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .split .mega {
    font-stretch: 112%;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
  }
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 380ms ease,
    transform 380ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */
.hero {
  padding: 36px 0 64px;
  border-bottom: var(--bd);
}

@media (min-width: 900px) {
  .hero {
    padding: 56px 0 96px;
  }
}

.hero .sticker {
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(1.9rem, 11vw, 3.6rem);
  line-height: 0.95;
}

@media (min-width: 700px) {
  .hero-title {
    font-size: clamp(3rem, 7.6vw, 7.6rem);
  }
}

.rotor {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.14em;
}

.rotator {
  display: inline-block;
  padding: 0 0.16em;
  background: var(--lime);
  border: var(--bd);
  box-shadow: 0.06em 0.06em 0 var(--ink);
  transform: rotate(-1.4deg);
  transition:
    transform 280ms ease,
    opacity 280ms ease;
}

.rotator::after {
  content: ".";
}

.rotator.swap {
  opacity: 0;
  transform: translateY(0.25em) rotate(-1.4deg);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 32px;
}

@media (min-width: 1180px) {
  .hero-grid {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: start;
  }
}

.hero-lead {
  font-size: clamp(1.1rem, 2.3vw, 1.3rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.hero-actions .btn {
  flex: 1 1 240px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  background: #fff;
  border: var(--bd);
  font: 700 12px/1.25 var(--f-m);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Check compartido por facts, listas de checks y planes. */
.ck {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 3px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  background: var(--lime);
  border: var(--bd);
}

.facts .ck {
  width: 20px;
  height: 20px;
  padding: 2px;
  border-width: 2px;
}

/* ---------- Tablero de misiones ---------- */
.board-wrap {
  position: relative;
  margin-top: 150px;
}

@media (min-width: 1180px) {
  .board-wrap {
    margin-top: 0;
  }
}

.board-wrap .sticker--ej {
  position: absolute;
  left: 14px;
  top: -18px;
  z-index: 4;
}

.board {
  /* overflow:hidden: el sello arranca a escala 2.6 y una caja transformada cuenta para el
     ancho de la pagina aunque este a opacidad 0. Sin esto, durante ~2 s de cada ciclo de 9 s
     la pagina se podia desplazar de lado en el telefono (medido: 468 px en un viewport de 390). */
  overflow: hidden;
  background: var(--paper);
  border: var(--bd);
  box-shadow: var(--sh-l);
}

.board-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-m);
}

.board-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.board-agent img {
  width: 22px;
  height: 22px;
}

.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  text-transform: uppercase;
}

.board-tabs span {
  padding: 3px 8px;
  border: 2px solid transparent;
}

.board-tabs .on {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
}

.board-tabs b {
  margin-left: 4px;
  padding: 0 5px;
  background: var(--ink);
  color: var(--yellow);
}

.board-new {
  padding: 5px 10px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}

.board-cols {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .board-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bcol {
  padding: 14px 12px 16px;
  display: grid;
  gap: 12px;
  align-content: start;
  border-top: var(--bd);
}

.bcol:first-child {
  border-top: 0;
}

@media (min-width: 640px) {
  .bcol {
    border-top: 0;
    border-left: var(--bd);
  }

  .bcol:first-child {
    border-left: 0;
  }
}

.bcol h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 12px var(--f-m);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bcol h4 b {
  padding: 0 6px;
  background: var(--ink);
  color: var(--lime);
}

.bcol.need {
  background: #f6efb2;
}

.bcard {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.bcard .who {
  justify-self: start;
  padding: 0 6px;
  background: var(--lime);
  border: 2px solid var(--ink);
  font: 700 12px/1.5 var(--f-m);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bcard strong {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.22;
}

.bcard .st {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-2);
}

.bcard.done {
  background: #eaf3c4;
}

.progress {
  display: block;
  height: 12px;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--ink);
}

.progress i {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--ink);
  animation: avance 2.8s steps(14) infinite;
}

@keyframes avance {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(260%);
  }
}

.avatars {
  display: flex;
  gap: 4px;
}

.avatars i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--ink);
  color: var(--lime);
  font: 700 12px var(--f-m);
  font-style: normal;
}

/* La misión que necesita tu visto bueno: se estampa "Aprobado" y pasa a "Listo".
   Los tres tiempos (sello, salida, llegada) comparten los mismos 9 s. */
.moving-out {
  animation: sale 9s ease-in-out infinite;
}

.moving-in {
  animation: llega 9s ease-in-out infinite;
}

.sello {
  position: absolute;
  right: 10px;
  top: 34%;
  padding: 4px 10px;
  border: 4px solid var(--blue);
  color: var(--blue);
  background: rgb(255 255 255 / 0.6);
  font: 900 1.05rem/1 var(--f-d);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-12deg);
  animation: sello 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sale {
  0%,
  47% {
    opacity: 1;
    transform: none;
  }
  56%,
  90% {
    opacity: 0;
    transform: translateX(28px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes llega {
  0%,
  52% {
    opacity: 0;
    transform: translateX(-28px);
  }
  62%,
  90% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@keyframes sello {
  0%,
  26% {
    opacity: 0;
    transform: rotate(-12deg) scale(2.6);
  }
  33% {
    opacity: 1;
    transform: rotate(-12deg) scale(1);
  }
  48% {
    opacity: 1;
    transform: rotate(-12deg) scale(1);
  }
  55%,
  100% {
    opacity: 0;
    transform: rotate(-12deg) scale(1);
  }
}

/* ---------- Mascota (rig de capas PNG) ----------
   Geometria MEDIDA en el navegador (no deducida), con W = ancho del host:
     - el rig mide 1.55 x W y se ancla arriba-izquierda;
     - el dibujo del robot ocupa de 0.50 x W a 1.09 x W en horizontal y sus pies quedan
       a 1.41 x W del borde superior del rig.
   De ahi:  top = (cuanto se hunde en el bloque) - 1.41 x W
            right = 0.55 x W - gutter + 12 px  (los 12 dejan sitio a la rotacion de las capas animadas)
   El right cuenta el RIG entero (que se extiende 0.55 x W a la derecha del host), no solo
   el dibujo: la caja del rig es transparente pero igual cuenta para el ancho de la pagina
   y en un telefono la ensanchaba (scrollWidth 408 en un viewport de 390).
   Centrar el DIBUJO (no el host) pide un margin-left de -0.795 x W.
   No se declara position en .mascota-rig: mascota.js la pone inline. */
.mascota-slot {
  --w: 100px;
  position: absolute;
  z-index: 3;
  width: var(--w);
  height: var(--w);
  pointer-events: none;
}

.mascota-rig {
  pointer-events: none;
}

/* Hero: de pie sobre el borde superior del tablero, hundido 10 px. */
.mascota-hero {
  top: calc(10px - var(--w) * 1.41);
  right: calc(var(--w) * 0.55 - var(--gut) + 12px);
}

@media (min-width: 720px) {
  .mascota-hero {
    --w: 150px;
  }
}

@media (min-width: 1180px) {
  .mascota-hero {
    --w: 184px;
  }
}

/* Cierre: de pie sobre la tarjeta negra, con el DIBUJO centrado. */
.mascota-cta {
  --w: 110px;
  top: calc(10px - var(--w) * 1.41);
  left: 50%;
  margin-left: calc(var(--w) * -0.795);
}

@media (min-width: 720px) {
  .mascota-cta {
    --w: 150px;
  }
}

/* ---------- Cinta de agentes ---------- */
.belt-sec {
  background: var(--paper-2);
  border-bottom: var(--bd);
}

.belt-head {
  padding-block: 26px;
}

.belt-title {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 60rem;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.25;
}

.belt-title .big {
  flex: none;
  padding: 0.05em 0.14em 0.1em;
  background: var(--lime);
  border: var(--bd);
  box-shadow: var(--sh);
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(2.8rem, 9vw, 5.4rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.belt {
  overflow: hidden;
  background: var(--paper);
  border-top: var(--bd);
}

.belt-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: cinta 52s linear infinite;
}

/* 24 fichas x 144 px: la mitad (12 fichas) mide 1728 px y cae exacto en la costura. */
.belt-track li {
  flex: none;
  width: 144px;
  padding: 14px 8px 12px;
  text-align: center;
  border-right: var(--bd);
}

.belt-track img {
  width: 84px;
  height: 84px;
  margin: 0 auto 8px;
  object-fit: contain;
}

.belt-track span {
  display: block;
  font: 700 12px var(--f-m);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Credencial ---------- */
.cred {
  background: var(--navy);
  color: var(--paper);
  border-bottom: var(--bd);
}

.cred-in {
  display: grid;
  gap: 14px;
  padding-block: 44px;
}

.cred-kicker {
  color: var(--lime);
  font: 700 13px var(--f-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cred-big {
  max-width: 26ch;
  font-family: var(--f-d);
  font-stretch: 112%;
  font-weight: 900;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.cred-sub {
  max-width: 64ch;
  color: #dbe4f0;
}

/* ---------- Dichos ---------- */
.dichos-label {
  padding: 8px var(--gut);
  background: var(--yellow);
  border-bottom: var(--bd);
  font: 700 12px var(--f-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- 01 · Problema ---------- */
.versus-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

@media (min-width: 1100px) {
  .versus-wrap {
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: start;
  }
}

.versus {
  background: var(--paper);
  border: var(--bd);
  box-shadow: var(--sh-l);
}

.versus-head {
  display: none;
}

@media (min-width: 720px) {
  .versus-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: var(--bd);
    font: 700 13px var(--f-m);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .versus-head span {
    padding: 12px 18px;
  }

  .versus-head .si {
    background: var(--lime);
    border-left: var(--bd);
  }

  .versus-head .no {
    background: var(--paper-2);
  }
}

.versus-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.versus-rows li {
  display: grid;
  border-top: var(--bd);
}

.versus-rows li:first-child {
  border-top: 0;
}

@media (min-width: 720px) {
  .versus-rows li {
    grid-template-columns: 1fr 1fr;
  }
}

.no-cell,
.si-cell {
  padding: 18px;
}

/* En móvil no hay cabecera de columnas: cada celda lleva su propia etiqueta. */
.no-cell::before,
.si-cell::before {
  content: attr(data-l);
  display: block;
  margin-bottom: 6px;
  font: 700 12px var(--f-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 720px) {
  .no-cell::before,
  .si-cell::before {
    display: none;
  }
}

.no-cell {
  background: var(--paper-2);
  color: var(--ink-2);
}

.si-cell {
  background: var(--lime);
  font-weight: 700;
  border-top: var(--bd);
}

@media (min-width: 720px) {
  .si-cell {
    border-top: 0;
    border-left: var(--bd);
  }
}

/* Al entrar en pantalla se tacha lo de la izquierda y aparece la solución. */
.no-cell span {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: transparent;
}

.versus.play .no-cell span {
  animation: tachar 300ms steps(4) forwards;
}

.versus .si-cell {
  opacity: 0.35;
}

.versus.play .si-cell {
  animation: resuelto 320ms ease forwards;
}

@keyframes tachar {
  to {
    text-decoration-color: var(--ink);
  }
}

@keyframes resuelto {
  to {
    opacity: 1;
  }
}

.versus.play li:nth-child(1) .no-cell span { animation-delay: 0.2s; }
.versus.play li:nth-child(1) .si-cell { animation-delay: 0.5s; }
.versus.play li:nth-child(2) .no-cell span { animation-delay: 0.9s; }
.versus.play li:nth-child(2) .si-cell { animation-delay: 1.2s; }
.versus.play li:nth-child(3) .no-cell span { animation-delay: 1.6s; }
.versus.play li:nth-child(3) .si-cell { animation-delay: 1.9s; }
.versus.play li:nth-child(4) .no-cell span { animation-delay: 2.3s; }
.versus.play li:nth-child(4) .si-cell { animation-delay: 2.6s; }
.versus.play li:nth-child(5) .no-cell span { animation-delay: 3s; }
.versus.play li:nth-child(5) .si-cell { animation-delay: 3.3s; }

.versus-note {
  margin-top: 20px;
  font: 500 13px/1.5 var(--f-m);
  color: var(--ink-2);
}

/* Boleta: el registro de lo que hicieron los agentes anoche. */
.boleta {
  position: relative;
  padding: 26px 20px 20px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh-l);
  font-family: var(--f-m);
  font-size: 13.5px;
  line-height: 1.4;
}

@media (min-width: 1100px) {
  .boleta {
    transform: rotate(1.4deg);
  }

  .boleta.reveal.in {
    transform: rotate(1.4deg);
  }
}

.boleta .sticker--ej {
  position: absolute;
  top: -18px;
  right: 12px;
}

.boleta-h {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.boleta-t {
  margin: 4px 0 14px;
  padding-bottom: 12px;
  border-bottom: 3px dashed var(--ink);
  font-family: var(--f-d);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.boleta-l {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.boleta-l li {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 10px;
}

.boleta-l time {
  grid-row: span 2;
  font-weight: 700;
}

.boleta-l b {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.boleta-f {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 3px dashed var(--ink);
  font-weight: 700;
  text-transform: uppercase;
}

.boleta-f b {
  padding: 0 8px;
  background: var(--yellow);
}

.barcode {
  height: 36px;
  margin-top: 16px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px, var(--ink) 5px 6px, transparent 6px 10px, var(--ink) 10px 14px, transparent 14px 16px);
}

/* ---------- 02 · Precios ---------- */
.tiers-strip {
  margin: 0 0 30px;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  border: var(--bd);
  font: 700 clamp(0.85rem, 2.3vw, 1.05rem) var(--f-m);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tiers-strip span {
  padding: 0 6px;
  background: var(--lime);
  color: var(--ink);
}

.price-toggle {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 30px;
  background: var(--paper);
  border: var(--bd);
  box-shadow: var(--sh-s);
}

.ptab {
  min-height: 54px;
  padding: 0 22px;
  font-family: var(--f-d);
  font-stretch: 110%;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  cursor: pointer;
}

.ptab + .ptab {
  border-left: var(--bd);
}

.ptab[aria-selected="true"] {
  background: var(--ink);
  color: var(--lime);
}

@media (max-width: 559.98px) {
  .price-toggle {
    flex-direction: column;
    width: 100%;
  }

  .ptab + .ptab {
    border-left: 0;
    border-top: var(--bd);
  }
}

.price-pane[hidden] {
  display: none;
}

.anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.checks {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh-s);
}

.checks strong {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
}

.checks span {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.hosted-highlights {
  margin-bottom: 40px;
}

@media (min-width: 1100px) {
  .hosted-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hosted-cards,
.pricing-cards {
  display: grid;
  gap: 28px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.hosted-cards,
.pricing-cards {
  max-width: 640px;
}

@media (min-width: 1100px) {
  .hosted-cards,
  .pricing-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
    max-width: none;
  }
}

.hosted-card,
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh);
}

.hosted-card h3,
.pricing-card h3 {
  align-self: flex-start;
  padding: 2px 14px 4px;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transform: rotate(-1.6deg);
}

.hosted-price,
.pricing-price {
  margin-top: 10px;
  font-family: var(--f-d);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .hosted-price,
  .pricing-price {
    font-size: 2.2rem;
  }
}

@media (min-width: 1100px) {
  .hosted-price,
  .pricing-price {
    font-size: clamp(1.6rem, 2.3vw, 2.3rem);
  }
}

.hosted-price span {
  margin-left: 4px;
  font: 700 0.95rem var(--f-m);
  letter-spacing: 0;
}

.hosted-price-alt {
  font: 700 0.95rem var(--f-m);
  color: var(--ink-2);
}

.hosted-price-alt span {
  font-weight: 500;
}

.hosted-tagline,
.pricing-tagline {
  margin-top: 6px;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
}

.hosted-note {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.hosted-card .btn,
.pricing-card .btn {
  width: 100%;
  margin-top: auto;
}

/* El plan del medio va en lima y sube un poco; el de arriba, en azul marino.
   Se sube con `top` (no con transform) para no pelear con el .reveal. */
.hosted-card:nth-child(2),
.pricing-card:nth-child(2) {
  background: var(--lime);
}

@media (min-width: 1100px) {
  .hosted-card:nth-child(2),
  .pricing-card:nth-child(2) {
    top: -16px;
  }
}

.hosted-card--premium,
.pricing-card--premium {
  background: var(--navy);
  color: var(--paper);
}

.hosted-card--premium h3,
.pricing-card--premium h3 {
  background: var(--lime);
  color: var(--ink);
}

.hosted-card--premium .hosted-price,
.pricing-card--premium .pricing-price {
  color: var(--lime);
}

.hosted-card--premium .hosted-price-alt,
.hosted-card--premium .hosted-note {
  color: #dbe4f0;
}

.pricing-includes {
  display: grid;
  gap: 10px;
  margin: 8px 0 18px;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.4;
}

.pricing-includes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pricing-includes .ck {
  width: 24px;
  height: 24px;
  padding: 2px;
  border-width: 2px;
}

.checkout-email {
  display: grid;
  gap: 14px;
  margin: 0 0 32px;
  padding: 22px;
  background: var(--yellow);
  border: var(--bd);
  box-shadow: var(--sh);
}

.checkout-email label {
  font: 700 13px var(--f-m);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.checkout-email input {
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  font: 600 17px var(--f-d);
  color: var(--ink);
  background: #fff;
  border: var(--bd);
  border-radius: 0;
}

.checkout-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkout-hint {
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Avisos legales del cobro: nota del correo, "Al pagar aceptas..." junto a los botones de pago
   y su copia bajo las tarjetas. 14 px y tinta oscura: un aviso legal no puede quedar chico ni
   pálido. Se reutilizan las clases de la rama legal para que el HTML sea el mismo en ambas. */
.checkout-note,
.checkout-legal,
.price-legal {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.checkout-note {
  margin-top: -4px;
}

.price-legal {
  max-width: 640px;
  margin: -8px 0 32px;
}

@media (min-width: 1100px) {
  .price-legal {
    max-width: none;
  }
}

.checkout-note a,
.checkout-legal a,
.price-legal a,
.privacy-more a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Enlace a la política completa, bajo el texto de la sección Privacidad. */
.privacy-more {
  margin: 18px 0 0;
  font: 700 14px/1.4 var(--f-m);
}

@media (max-width: 559.98px) {
  .checkout-providers .btn {
    flex: 1 1 100%;
  }
}

.hosted-compare {
  padding-left: 16px;
  border-left: 8px solid var(--ink);
  font: 500 0.95rem/1.5 var(--f-m);
  max-width: 70ch;
}

.price-whatsapp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 36px;
  padding: 16px 20px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh-s);
  font-weight: 700;
}

.price-whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--wa);
  border: var(--bd);
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.price-whatsapp a:hover {
  background: var(--yellow);
}

.price-whatsapp .wa-icon {
  width: 26px;
  height: 26px;
}

/* ---------- 03 · Cómo funciona ---------- */
.steps {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.step {
  position: relative;
  counter-increment: paso;
  padding: 92px 22px 24px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh);
}

.step::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 8px;
  left: 18px;
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 4.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
}

.step h3 {
  font-family: var(--f-d);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.step p {
  margin-top: 10px;
}

.step q {
  display: block;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--yellow);
  border: var(--bd);
  font: 500 0.9rem/1.45 var(--f-m);
}

.providers {
  display: grid;
  gap: 28px;
  margin-top: 40px;
}

@media (min-width: 800px) {
  .providers {
    grid-template-columns: 1fr 1fr;
  }
}

.providers > div {
  padding: 22px;
  background: var(--paper-2);
  border: var(--bd);
  border-left-width: 12px;
}

.providers h3 {
  font-family: var(--f-d);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.providers p {
  margin-top: 8px;
}

/* ---------- 04 · Equipo (chat) ---------- */
.scenes {
  position: relative;
  margin-top: 8px;
}

.scenes .sticker--ej {
  margin-bottom: 14px;
}

@media (min-width: 720px) {
  .scenes .sticker--ej {
    position: absolute;
    top: -8px;
    right: 8px;
    z-index: 3;
    margin-bottom: 0;
  }
}

.scene-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: -3px;
}

.scene-tabs button {
  min-height: 48px;
  padding: 0 10px;
  font: 800 12px var(--f-d);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: var(--bd);
  border-bottom: 0;
  cursor: pointer;
}

.scene-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--lime);
}

@media (min-width: 480px) {
  .scene-tabs button {
    padding: 0 18px;
    font-size: 14px;
  }
}

.chat {
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh-l);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font: 500 13px var(--f-m);
}

.chat-head img {
  width: 20px;
  height: 20px;
}

.chat-head strong {
  color: var(--lime);
  text-transform: uppercase;
}

.chat-head span {
  margin-left: auto;
  text-align: right;
  opacity: 0.85;
}

.chat-body {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 360px;
  padding: 18px 16px;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.msg .av {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  background: var(--paper-2);
  border: var(--bd);
  font: 700 12px var(--f-m);
  font-style: normal;
}

.msg .av.ag {
  background: var(--lime);
}

.msg .av img {
  width: 20px;
  height: 20px;
}

.msg b {
  font: 700 12px var(--f-m);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.msg p {
  margin-top: 3px;
  padding: 10px 12px;
  background: #fff;
  border: var(--bd);
  font-size: 0.98rem;
  line-height: 1.45;
}

.msg.agent p {
  background: var(--lime);
}

.mention {
  padding: 0 4px;
  background: var(--yellow);
  font-weight: 800;
}

.chat-input {
  padding: 13px 16px;
  background: var(--paper-2);
  border-top: var(--bd);
  font: 500 13px var(--f-m);
  color: var(--ink-2);
}

/* Cada mensaje entra a su hora; la burbuja "escribiendo" cede su lugar a la respuesta. */
.play-on-view .msg,
.play-on-view .learn li {
  opacity: 0;
  transform: translateY(10px);
}

.play-on-view.play .msg,
.play-on-view.play .learn li {
  animation: pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards;
}

.play-on-view.play .msg:nth-child(1) { animation-delay: 0.2s; }
.play-on-view.play .msg:nth-child(2) { animation-delay: 1s; }
.play-on-view.play .msg:nth-child(3) { animation-delay: 1.9s; }
.play-on-view.play .msg:nth-child(4) { animation-delay: 2.7s; }
.play-on-view.play .msg:nth-child(5) { animation-delay: 4.3s; }

.play-on-view.play .learn li:nth-child(1) { animation-delay: 0.1s; }
.play-on-view.play .learn li:nth-child(2) { animation-delay: 0.25s; }
.play-on-view.play .learn li:nth-child(3) { animation-delay: 0.4s; }
.play-on-view.play .learn li:nth-child(4) { animation-delay: 0.55s; }
.play-on-view.play .learn li:nth-child(5) { animation-delay: 0.7s; }

@keyframes pop {
  to {
    opacity: 1;
    transform: none;
  }
}

.play-on-view.play .msg.typing {
  animation:
    pop 300ms ease forwards,
    vanish 300ms ease forwards;
  animation-delay: 2.7s, 4.1s;
}

@keyframes vanish {
  to {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
  }
}

.dots {
  display: inline-flex;
  gap: 6px;
  padding: 12px 14px;
}

.dots span {
  width: 8px;
  height: 8px;
  background: var(--ink);
  animation: parpadeo 1.2s steps(2) infinite;
}

.dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes parpadeo {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}

@media (min-width: 1100px) {
  .team-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 48px;
    align-items: start;
  }
}

.trio {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 800px) and (max-width: 1099.98px) {
  .trio {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trio li {
  padding: 20px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh-s);
}

.trio strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-d);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.trio span {
  display: block;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ---------- 05 · Agentes ---------- */
.bullets {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullets li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 700;
}

.bullets li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.4em;
  background: var(--lime);
  border: 2px solid var(--paper);
}

.agents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: 0;
  padding: 3px;
  list-style: none;
  background: var(--paper);
  border: var(--bd);
  box-shadow: 10px 10px 0 var(--lime);
}

@media (min-width: 900px) {
  .agents-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.agents-grid li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 132px;
  padding: 16px 12px;
  background: var(--navy);
  color: var(--paper);
}

.agents-grid .mark {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  background: var(--c);
  border: 3px solid var(--paper);
}

.agents-grid strong {
  font-family: var(--f-d);
  font-stretch: 100%;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  text-transform: uppercase;
}

.agents-grid li > span:last-child {
  font-size: 0.92rem;
  line-height: 1.4;
  color: #dbe4f0;
}

@media (min-width: 600px) {
  .agents-grid li {
    min-height: 170px;
    padding: 20px 16px;
  }

  .agents-grid strong {
    font-stretch: 118%;
    font-size: 1.4rem;
  }
}

.agents-grid .plus {
  background: var(--lime);
  color: var(--ink);
}

.agents-grid .plus > span:last-child {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- 06 · Memoria ---------- */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.pills li {
  padding: 6px 14px;
  background: var(--yellow);
  border: var(--bd);
  box-shadow: 3px 3px 0 var(--ink);
  font: 700 13px var(--f-m);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.learn-wrap {
  position: relative;
}

.learn-wrap .sticker--ej {
  position: absolute;
  top: -18px;
  right: 12px;
  z-index: 2;
}

.learn {
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh-l);
}

.learn-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
}

.learn-head img {
  width: 24px;
  height: 24px;
}

.learn-head strong {
  display: block;
  color: var(--lime);
  font: 700 14px var(--f-m);
  text-transform: uppercase;
}

.learn-head span {
  font: 500 12px var(--f-m);
  opacity: 0.85;
}

.learn ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-top: var(--bd);
  font-size: 0.96rem;
  line-height: 1.4;
}

.learn li:first-child {
  border-top: 0;
}

.learn time {
  flex: none;
  padding: 0 6px;
  align-self: flex-start;
  background: var(--paper-2);
  font: 500 12px/1.7 var(--f-m);
  white-space: nowrap;
}

/* ---------- 07 · Áreas ---------- */
.areas-grid {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: area;
}

@media (min-width: 700px) {
  .areas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .areas-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.areas-grid li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-increment: area;
  padding: 22px 20px 20px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh);
}

.areas-grid li::after {
  content: counter(area, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 16px;
  font: 700 13px var(--f-m);
  color: var(--ink-2);
}

.areas-grid .mark {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  background: var(--c);
  border: var(--bd);
}

.areas-grid strong {
  font-family: var(--f-d);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.areas-grid li > span:not(.mark) {
  font-size: 0.97rem;
  line-height: 1.45;
}

.areas-grid q {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font: 500 0.88rem/1.45 var(--f-m);
}

.areas-grid q::first-line {
  background: var(--yellow);
}

/* ---------- 08 · Contabilidad Chile ---------- */
.areas-lead {
  max-width: 62ch;
  margin-top: 22px;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.5;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 7px 14px;
  border: 3px solid var(--paper);
  font: 700 13px var(--f-m);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chile-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .chile-facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .chile-facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.chile-facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: rgb(255 255 255 / 0.06);
  border: 3px solid var(--lime);
  box-shadow: 8px 8px 0 var(--lime);
}

.chile-facts strong {
  color: var(--lime);
  font-family: var(--f-d);
  font-stretch: 118%;
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
}

.chile-facts span {
  font: 500 0.92rem/1.4 var(--f-m);
  color: #e7ecf3;
}

/* ---------- 09 · Privacidad ---------- */
.privacidad .checks li {
  box-shadow: var(--sh-s);
}

/* ---------- 10 · Preguntas ---------- */
.faq {
  max-width: 900px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh-l);
}

.faq details {
  border-top: var(--bd);
}

.faq details:first-child {
  border-top: 0;
}

.faq summary {
  position: relative;
  min-height: 60px;
  padding: 18px 68px 18px 18px;
  font: 800 1.08rem/1.25 var(--f-d);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  background: var(--ink);
  color: var(--lime);
  font: 700 24px var(--f-m);
}

.faq summary:hover {
  background: var(--yellow);
}

.faq details[open] summary {
  background: var(--lime);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  padding: 18px 18px 24px;
  background: var(--paper);
  border-top: var(--bd);
  max-width: 68ch;
}

.faq details a {
  font-weight: 800;
}

/* ---------- 11 · Cierre ---------- */
.sec--cta {
  padding-top: 150px;
}

.cta {
  position: relative;
  padding: 72px 22px 40px;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  border: var(--bd);
  box-shadow: 10px 10px 0 var(--paper);
}

@media (min-width: 720px) {
  .cta {
    padding: 96px 56px 56px;
  }
}

.cta h2 {
  color: var(--lime);
}

.cta > p:not(.cta-mail) {
  max-width: 52ch;
  margin: 22px auto 0;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
}

.cta a {
  font-weight: 800;
}

.cta .btn {
  font-weight: 800;
}

.cta-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.cta-mail {
  margin-top: 26px;
  font: 500 14px var(--f-m);
}

.cta-mail a {
  color: var(--lime);
}

/* ---------- Pie ---------- */
.footer {
  padding: 40px 0 48px;
  background: var(--ink);
  color: var(--paper);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: var(--paper);
  border: 3px solid var(--lime);
}

.footer-brand .symbol {
  width: 28px;
  height: 28px;
}

.footer-brand .wordmark {
  height: 22px;
  width: auto;
}

.footer .made {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 13px/1.4 var(--f-m);
}

.footer a {
  color: var(--lime);
  font: 700 14px var(--f-m);
}

/* En pantallas angostas los enlaces legales caen en las últimas líneas del pie, justo donde
   queda el botón flotante de WhatsApp (58 px de alto + 14 px de margen): sin este colchón el
   último enlace ("Preferencias de cookies") queda tapado y no se puede tocar. */
.footer {
  padding-bottom: 104px;
}

.star {
  width: 16px;
  height: 16px;
  fill: var(--lime);
  flex: none;
}

/* ---------- Botón flotante de WhatsApp ----------
   Sobre los precios se encoge, pero no desaparece: se lee como un chat perdido. */
.wa-flotante {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 20px 0 12px;
  color: var(--ink);
  background: var(--wa);
  border: var(--bd);
  box-shadow: var(--sh);
  font: 800 14px var(--f-d);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  animation: wa-entrada 400ms ease-out 700ms both;
  transition:
    width 240ms ease,
    min-height 240ms ease,
    padding 240ms ease,
    transform 110ms ease,
    box-shadow 110ms ease;
}

.wa-flotante:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}

.wa-flotante .wa-icon {
  width: 38px;
  height: 38px;
  animation: wa-saluda 7s ease-in-out 1.4s infinite;
}

/* Anillo que sale del botón y se apaga: en negro para que se lea sobre cualquier fondo. */
.wa-flotante::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border: 3px solid var(--ink);
  animation: wa-late 5s ease-out 1.8s infinite;
}

.wa-flotante.wa-compacto {
  width: 46px;
  min-height: 46px;
  padding: 0;
  gap: 0;
}

.wa-flotante.wa-compacto .wa-texto {
  display: none;
}

.wa-flotante.wa-compacto .wa-icon {
  width: 32px;
  height: 32px;
}

.wa-flotante.wa-compacto::before {
  animation: none;
  opacity: 0;
}

@media (max-width: 640px) {
  .wa-flotante {
    width: 58px;
    padding: 0;
    gap: 0;
  }

  .wa-flotante .wa-texto {
    display: none;
  }
}

@keyframes wa-entrada {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wa-late {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  28% {
    transform: scale(1.45);
    opacity: 0;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

@keyframes wa-saluda {
  0%,
  86%,
  100% {
    transform: rotate(0);
  }
  90% {
    transform: rotate(-13deg);
  }
  94% {
    transform: rotate(11deg);
  }
}

/* ---------- Pantallas bajas (telefono girado) ---------- */
@media (max-height: 500px) {
  :root {
    --nav-h: 56px;
  }

  .wa-flotante {
    width: 46px;
    min-height: 46px;
    padding: 0;
    gap: 0;
  }

  .wa-flotante .wa-texto {
    display: none;
  }

  .wa-flotante .wa-icon {
    width: 32px;
    height: 32px;
  }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .tape-track,
  .belt-track,
  .progress i,
  .moving-out,
  .moving-in,
  .sello,
  .dots span,
  .wa-flotante,
  .wa-flotante .wa-icon,
  .wa-flotante::before {
    animation: none;
  }

  .wa-flotante::before {
    opacity: 0;
  }

  .moving-in {
    display: none;
  }

  .msg.typing {
    display: none;
  }

  .tape-track,
  .belt-track {
    flex-wrap: wrap;
    width: auto;
  }

  .tape-track li:nth-child(n + 7),
  .belt-track li:nth-child(n + 13) {
    display: none;
  }

  .reveal,
  .play-on-view .msg,
  .play-on-view .learn li,
  .versus .si-cell {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .no-cell span {
    text-decoration-color: var(--ink);
  }

  .rotator,
  .btn,
  .wa-flotante {
    transition: none;
  }
}

/* ---------- Gracias (página de después de pagar) ---------- */
.gracias {
  padding: 56px 0 72px;
  background: var(--lime);
  border-bottom: var(--bd);
}

@media (min-width: 900px) {
  .gracias {
    padding: 96px 0 112px;
  }
}

.gracias-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 1100px) {
  .gracias-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 56px;
    align-items: center;
  }
}

.gracias .sticker {
  margin-bottom: 26px;
  background: var(--paper);
}

.gracias-title {
  font-size: clamp(2.3rem, 11vw, 4rem);
  line-height: 0.92;
}

@media (min-width: 700px) {
  .gracias-title {
    font-size: clamp(3rem, 7.4vw, 6.6rem);
  }
}

.gracias .lead {
  max-width: 58ch;
  margin-top: 28px;
  font-weight: 600;
}

/* El sello grande solo cabe al lado del titular en pantallas anchas; en el resto
   queda el sticker "Pago registrado" de arriba. */
.gracias-sello {
  display: none;
}

@media (min-width: 1100px) {
  .gracias-sello {
    display: block;
    justify-self: stretch;
    padding: 0.25em 0.3em;
    border: 8px solid var(--blue);
    color: var(--blue);
    background: rgb(255 255 255 / 0.35);
    font: 900 clamp(1.6rem, 2.4vw, 2.3rem) / 1.05 var(--f-d);
    font-stretch: 112%;
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-8deg);
    animation: sello-golpe 700ms cubic-bezier(0.2, 0.9, 0.3, 1.3) 350ms both;
  }
}

@keyframes sello-golpe {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(2.6);
  }
  to {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
  }
}

.gracias-steps {
  margin-top: 56px;
}

.gracias-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.gracias-actions .btn {
  flex: 1 1 260px;
}

@media (prefers-reduced-motion: reduce) {
  .gracias-sello {
    animation: none;
  }
}

/* ---------- Confirmación de lo que se compra (auditoría 2026-09-30) ----------
   main.js escribe en .checkout-summary el nivel, la versión y el precio de la tarjeta elegida, y
   marca esa tarjeta con aria-current="true". Sin plan elegido el resumen queda oculto. */
.checkout-summary {
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  border: var(--bd);
  font: 800 15px/1.3 var(--f-d);
}

.checkout-summary:empty {
  display: none;
}

.hosted-card[aria-current="true"],
.pricing-card[aria-current="true"] {
  outline: 5px solid var(--ink);
  outline-offset: 5px;
}

/* Los rótulos de pago ahora dicen si se renueva: a 320-340 px ocupan 3 líneas y necesitan aire vertical. */
.checkout-providers .btn {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.25;
}

@media (max-width: 359.98px) {
  .checkout-providers .btn {
    font-size: 14px;
    letter-spacing: 0;
  }
}


/* ---------- Cinta de videos de YouTube ----------
   15 fichas x 200 px: la mitad de la pista (las 15 primeras) mide 3000 px y cae exacto en la costura
   de la animación `cinta`. Las 15 copias van con aria-hidden y sin foco de teclado. Las miniaturas son
   propias (assets/yt/): la página no le pide nada a YouTube hasta que alguien hace clic en una ficha. */
.yt-sec .sticker {
  margin-bottom: 26px;
}

.yt-sec .lead {
  margin-top: 22px;
  color: var(--paper);
}

.yt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.yt-sec .btn {
  box-shadow: 4px 4px 0 var(--lime);
}

.yt-sec .btn:hover {
  box-shadow: 6px 6px 0 var(--lime);
}

.yt-sec .btn:active {
  box-shadow: 0 0 0 var(--lime);
}

/* position: relative hace que la cinta sea el bloque contenedor de los textos .sr-only (posición absoluta)
   de las fichas; sin eso, con movimiento reducido (sin transform en la pista) se escapan y ensanchan la página. */
.yt-belt {
  position: relative;
  margin-top: 44px;
  padding: 22px 0 30px;
  overflow: hidden;
  border-block: 3px solid var(--lime);
}

.yt-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: cinta 100s linear infinite;
}

.yt-belt:hover .yt-track,
.yt-belt:focus-within .yt-track,
.yt-track.yt-pausada {
  animation-play-state: paused;
}

.yt-track li {
  flex: none;
  width: 200px;
  padding: 0 12px;
}

.yt-card {
  display: block;
  color: var(--paper);
  text-decoration: none;
}

.yt-thumb {
  position: relative;
  display: block;
}

.yt-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--navy);
  border: 3px solid var(--paper);
  box-shadow: 6px 6px 0 var(--lime);
  transition: transform 110ms ease;
}

.yt-thumb::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  background: var(--lime);
  border: 3px solid var(--ink);
  border-radius: 50%;
}

.yt-thumb::before {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 25px;
  z-index: 1;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--ink);
}

.yt-card:hover .yt-thumb img {
  transform: translate(-3px, -3px);
}

.yt-card:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 8px;
}

.yt-title {
  display: block;
  margin-top: 16px;
  font: 700 14px/1.3 var(--f-d);
}

.footer-social {
  font: 500 14px/1.4 var(--f-m);
}

@media (prefers-reduced-motion: reduce) {
  .yt-track {
    animation: none;
  }

  .yt-belt {
    overflow-x: auto;
  }

  .yt-track li[aria-hidden="true"],
  .yt-pausa {
    display: none;
  }
}

/* === a11y (backlog) ===
   Accesibilidad de teclado (B33), movimiento y altura estable de las escenas (B32). Va al final a
   propósito: así gana por orden sobre reglas anteriores de igual especificidad sin tocarlas. */

/* ---------- Foco ----------
   El anillo global (borde de tinta + halo amarillo, ver :focus-visible arriba) se ve sobre fondos
   claros y oscuros, pero la sombra dura de .btn, .nav-toggle y .wa-flotante pisaba el halo: sobre
   los fondos de tinta (cierre, cinta de videos) quedaba solo el borde de tinta, invisible. Mientras
   tienen el foco, esos controles muestran el halo en lugar de la sombra dura. */
.btn:focus-visible,
.yt-sec .btn:focus-visible,
.nav-toggle:focus-visible,
.wa-flotante:focus-visible,
.motion-toggle:focus-visible {
  box-shadow: 0 0 0 7px var(--yellow);
}

/* <main> recibe el foco desde "Saltar al contenido" solo para que el Tab siguiente arranque ahí:
   no es un control, así que no lleva anillo (un anillo del alto de toda la página no ayuda). */
main:focus,
main:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* ---------- Pausar animaciones (WCAG 2.2.2) ----------
   Botón fijo abajo a la izquierda (el de WhatsApp va a la derecha). main.js lo muestra solo si el
   sistema no pidió movimiento reducido y pone html.motion-off al pulsarlo. */
.motion-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 41;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  color: var(--ink);
  background: var(--paper);
  border: var(--bd);
  box-shadow: var(--sh-s);
  font: 700 12px/1.2 var(--f-m);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.motion-toggle:hover {
  background: var(--yellow);
}

/* Dos barras = pausa; con las animaciones detenidas pasa a un triángulo = reanudar. */
.motion-toggle::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-inline: 4px solid var(--ink);
}

html.motion-off .motion-toggle::before {
  width: 0;
  height: 0;
  border-inline: 0;
  border-block: 8px solid transparent;
  border-left: 13px solid var(--ink);
}

/* Con el aviso de cookies abierto, el botón sube sobre él (mismo criterio que el de WhatsApp). */
@media (max-width: 1270px) {
  .motion-toggle {
    margin-bottom: var(--ck-h, 0px);
  }
}

/* En pantallas angostas solo se ve el verbo ("Pausar" / "Reanudar"), para no tapar el texto de la
   página junto al botón de WhatsApp; el nombre accesible sigue siendo "Pausar animaciones". */
@media (max-width: 640px) {
  .motion-toggle .mt-resto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-height: 500px) {
  .motion-toggle {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce), print {
  .motion-toggle {
    display: none;
  }
}

/* Animaciones detenidas: las cintas se congelan donde están (la de videos la maneja main.js con
   .yt-pausada, para que su propio botón siga mandando sobre ella); lo demás vuelve a su estado fijo,
   el mismo que da prefers-reduced-motion. Va con !important porque debe ganar a reglas de animación
   más específicas (.play-on-view.play .msg:nth-child(n), .versus.play ...). */
html.motion-off {
  scroll-behavior: auto !important;
}

html.motion-off .tape-track,
html.motion-off .belt-track {
  animation-play-state: paused !important;
}

html.motion-off .progress i,
html.motion-off .moving-out,
html.motion-off .moving-in,
html.motion-off .sello,
html.motion-off .dots span,
html.motion-off .wa-flotante,
html.motion-off .wa-flotante .wa-icon,
html.motion-off .wa-flotante::before {
  animation: none !important;
}

html.motion-off .wa-flotante::before {
  opacity: 0 !important;
}

html.motion-off .moving-in,
html.motion-off .msg.typing {
  display: none !important;
}

html.motion-off .reveal,
html.motion-off .play-on-view .msg,
html.motion-off .play-on-view .learn li,
html.motion-off .versus .si-cell {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

html.motion-off .reveal:not(.boleta),
html.motion-off .play-on-view .msg,
html.motion-off .play-on-view .learn li {
  transform: none !important;
}

html.motion-off .no-cell span {
  animation: none !important;
  text-decoration-color: var(--ink) !important;
}

html.motion-off .rotator,
html.motion-off .btn,
html.motion-off .wa-flotante {
  transition: none !important;
}

/* ---------- Escenas de chat: altura estable ----------
   Las tres conversaciones comparten la misma celda: la caja mide siempre lo que la más alta y
   cambiar de pestaña (o el turno automático) no empuja el resto de la página. Las que no se ven
   quedan con visibility:hidden (fuera del árbol de accesibilidad y del orden de Tab). */
.scenes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.scenes > .sticker--ej {
  justify-self: start;
}

.scenes > .scene-tabs {
  grid-column: 1;
  grid-row: 2;
}

.scenes > .chat {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
}

.scenes > .chat[hidden] {
  display: flex !important;
  visibility: hidden;
}

.scenes > .chat .chat-body {
  flex: 1;
}

/* La burbuja "escribiendo" y la respuesta comparten fila: al desaparecer una y aparecer la otra,
   la conversación no cambia de alto. Antes "vanish" colapsaba el alto del globo (unos 54 px). */
.chat-body > .msg:nth-child(4),
.chat-body > .msg:nth-child(5) {
  grid-column: 1;
  grid-row: 4;
}

@keyframes vanish {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ---------- Respaldo tipografico (B31) ----------
   Archivo se carga con font-display: swap: el texto se pinta primero con la fuente de respaldo y se reacomoda
   al llegar Archivo (salto de layout de la primera visita). La pila anterior ponia "Arial Black" antes que Arial
   y pintaba TODO el texto, cuerpo incluido, un 24 % mas ancho que Archivo. Estas caras usan fuentes que ya estan
   en el sistema (cero bytes) y las escalan con size-adjust para igualar el ancho de Archivo en cada peso y ancho
   (font-stretch); los valores salen de medir el mismo texto en Archivo y en cada fuente local (Chromium,
   Windows): cuerpo 500, Arial 99,7 %; 700, Arial Bold 98,1 %; 800 y 900, Arial Black 95,85 % al 100 % de ancho,
   102,7 % al 110, 106,35 % al 112 y 117,9 % al 125. Donde no existe la fuente local (Android) la cara no se carga
   y la pila sigue con Helvetica Neue y Arial, igual que antes. Con Archivo ya cargado estas caras no se usan. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  font-weight: 100 699;
  size-adjust: 99.7%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold");
  font-weight: 700 799;
  size-adjust: 98.1%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Black");
  font-weight: 800 900;
  font-stretch: 100%;
  size-adjust: 95.85%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Black");
  font-weight: 800 900;
  font-stretch: 110%;
  size-adjust: 102.7%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Black");
  font-weight: 800 900;
  font-stretch: 112%;
  size-adjust: 106.35%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Black");
  font-weight: 800 900;
  font-stretch: 125%;
  size-adjust: 117.9%;
}

/* Sustituye a --f-d de :root (mismo selector, esta regla va despues). */
:root {
  --f-d: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
}
/* === fin a11y === */

/* === contenido (backlog) === */
/* B26: definicion de Cach-AI en el hero. En el HTML va bajo el titular (lo primero que lee un
   lector de pantalla o un buscador), pero en pantalla queda bajo los botones: con el aviso de
   cookies cerrado a 375x812 el boton de WhatsApp del hero no puede salirse del primer pantallazo.
   Como p { margin: 0 } y los margenes de los botones y de los chips son explicitos, pasar
   .hero-copy a columna con "order" no mueve el parrafo ni los botones. */
.hero-copy {
  display: flex;
  flex-direction: column;
}

.def-hero {
  order: 1;
  max-width: 62ch;
  margin: 28px 0 0;
  padding-left: 16px;
  border-left: 8px solid var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}

.def-hero strong {
  font-weight: 800;
}

.hero-copy > .facts {
  order: 2;
}

/* B07: requisito del instalador de Escritorio, antes de las tarjetas. */
.req-escritorio {
  max-width: 640px;
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--yellow);
  border: var(--bd);
  box-shadow: var(--sh-s);
  font: 700 0.95rem/1.4 var(--f-d);
}

/* B27: tabla de precios visible, fuera de los paneles de pestanas. */
.tabla-precios {
  margin-top: 48px;
}

.tabla-precios-titulo {
  margin-bottom: 14px;
  font-family: var(--f-d);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(1.25rem, 4.4vw, 1.8rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.tabla-precios-tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh);
  font-size: 0.95rem;
  line-height: 1.45;
}

.tabla-precios-tabla caption {
  padding: 0 0 12px;
  text-align: left;
}

.tabla-precios-tabla caption strong {
  display: block;
  font: 800 1.05rem/1.3 var(--f-d);
}

.tabla-precios-tabla caption span {
  display: block;
  font: 500 0.85rem/1.4 var(--f-m);
  color: var(--ink-2);
}

.tabla-precios-tabla thead th {
  padding: 12px 14px;
  background: var(--ink);
  color: var(--lime);
  font: 700 12px/1.3 var(--f-m);
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.tabla-precios-tabla tbody th,
.tabla-precios-tabla tbody td {
  padding: 14px;
  border-top: 3px solid var(--ink);
  text-align: left;
  vertical-align: top;
}

@media (min-width: 900px) {
  .tabla-precios-tabla tbody:first-of-type tr:first-child > * {
    border-top: 0;
  }

  .tabla-precios-tabla tbody + tbody tr:first-child > * {
    border-top-width: 6px;
  }
}

.tabla-precios-tabla tbody th {
  font-family: var(--f-d);
  font-stretch: 112%;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.15;
}

.tabla-precios-precio {
  display: block;
  font: 900 1.15rem/1.15 var(--f-d);
  white-space: nowrap;
}

.tabla-precios-usd {
  display: block;
  margin-top: 4px;
  font: 500 0.85rem/1.3 var(--f-m);
  color: var(--ink-2);
}

.tabla-precios-nota {
  max-width: 70ch;
  margin-top: 18px;
  font: 500 0.95rem/1.5 var(--f-m);
}

.tabla-precios-nota a {
  font-weight: 700;
  text-underline-offset: 3px;
}

/* En pantallas angostas cada fila pasa a ser una tarjeta con su etiqueta sobre cada dato (sin
   scroll horizontal). Al cambiar el display, algunos navegadores pierden la semantica de tabla;
   por eso el HTML lleva los roles de ARIA explicitos. Los encabezados de columna siguen en el
   arbol de accesibilidad, solo ocultos a la vista. */
@media (max-width: 899.98px) {
  .tabla-precios-tabla,
  .tabla-precios-tabla tbody,
  .tabla-precios-tabla tr,
  .tabla-precios-tabla tbody th,
  .tabla-precios-tabla tbody td {
    display: block;
  }

  .tabla-precios-tabla {
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .tabla-precios-tabla caption {
    display: block;
  }

  .tabla-precios-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tabla-precios-tabla tbody tr {
    margin-bottom: 22px;
    background: #fff;
    border: var(--bd);
    box-shadow: var(--sh-s);
  }

  .tabla-precios-tabla tbody th {
    padding: 10px 14px;
    background: var(--ink);
    color: var(--lime);
    border-top: 0;
  }

  .tabla-precios-tabla tbody td {
    padding: 10px 14px;
    border-top: 2px solid var(--ink);
  }

  .tabla-precios-tabla tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font: 700 11px/1.4 var(--f-m);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
}

/* B04: identificacion del vendedor en el pie (misma frase que Terminos y Privacidad). */
.pie-vendedor {
  flex: 1 1 100%;
  max-width: 90ch;
  font: 500 13px/1.5 var(--f-m);
}

/* B39: avisos de la pagina de gracias. */
.gracias-notas {
  display: grid;
  gap: 16px;
  max-width: 70ch;
  margin-top: 40px;
}

.gracias-nota {
  padding: 14px 16px;
  background: #fff;
  border: var(--bd);
  box-shadow: var(--sh-s);
  font-size: 1rem;
  line-height: 1.5;
}

.gracias-nota a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* === fin contenido === */

/* === revision (backlog) ===
   Ajustes tras la revision independiente de la rama combinada. */

/* Tabla de precios apilada (movil): la etiqueta de cada dato se dibuja con ::before; el texto
   alternativo vacio la saca del nombre accesible (el encabezado de columna ya la aporta). La primera
   declaracion es el respaldo de los navegadores que no entienden la segunda. */
@media (max-width: 899.98px) {
  .tabla-precios-tabla tbody td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
  }
}

/* "Pausar animaciones" vive en la barra superior, sobre la cinta amarilla: arriba de la pagina, primero
   en el orden de Tab y sin quedar fijo encima del contenido (como boton flotante tapaba el borde de los
   botones del hero en celulares, sobre todo con el aviso de cookies abierto, y en algunas pantallas de
   escritorio). El contenedor .tape-bar fija el alto: el boton ocupa lo mismo que la cinta. */
.tape-bar {
  position: relative;
}

.motion-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 2;
  min-height: 0;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-left: var(--bd);
  border-bottom: var(--bd);
  box-shadow: none;
}

.motion-toggle:hover {
  background: var(--lime);
}

/* Anillo de foco por dentro: sobre la cinta amarilla y el fondo claro de abajo se ve igual. */
.motion-toggle:focus-visible {
  box-shadow: none;
  outline: 3px solid var(--ink);
  outline-offset: -7px;
}

/* El rotulo "En el canal de YouTube" heredaba texto claro sobre el amarillo del sticker (1,27:1). */
.yt-sec .sticker {
  color: var(--ink);
}

/* gracias.html: es una pagina de paso; el pulso y el saludo infinitos del boton de WhatsApp no llevan
   control de pausa ahi, asi que se quitan (WCAG 2.2.2). */
.pagina-gracias .wa-flotante .wa-icon,
.pagina-gracias .wa-flotante::before {
  animation: none;
}

/* El boton principal de gracias (instalador) con padding vertical: si el nombre se parte en dos
   lineas no queda pegado al borde. */
.gracias-actions .btn {
  padding-block: 10px;
}
/* === fin revision === */