/* =========================================================
   Jos.IA · Chatbots
   Solo lo propio de esta página. La base vive en _shared/css/josia.css
   Regla de oro: las animaciones solo mueven transform, translate, scale, rotate y opacity.
   Los valores por defecto son el estado final; con movimiento reducido o sin JS todo se ve terminado.
   ========================================================= */

/* ---------- Tipografía autoalojada (Geist variable + Caveat, subconjunto latino) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../../_shared/fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: "Caveat";
  src: url("../../_shared/fonts/caveat-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}
/* Respaldo con las métricas de Geist (medidas contra Arial): al cambiar de fuente el texto no salta */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 102%;
  ascent-override: 98.5%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}

/* ---------- Tokens de la página ---------- */
:root {
  --font-sans: "Geist", "Geist Fallback", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  /* Cuatro planos de negro: la elevación se lee sin sombras de color */
  --s0: #000000;
  --s1: #07090d;
  --s2: #0d1117;
  --s3: #151a22;
  /* Radios concéntricos: superficie flotante 20, interior 12 */
  --r-surface: 20px;
  --r-inner: 12px;
  /* Luz de borde: degradado de 1 px, más viva arriba-izquierda y abajo-derecha */
  --rim: linear-gradient(160deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.05) 36%, rgba(255, 255, 255, 0.1) 68%, rgba(255, 255, 255, 0.3));
  --section-y: clamp(40px, 5.2vw, 84px);
}

/* ---------- Ritmo vertical y cortina ----------
   Menos aire entre secciones, sin sumar dos rellenos seguidos, y la hoja clara
   que sube sobre el hero con el borde superior redondeado. */
.hero { padding-top: calc(var(--header-h) + clamp(16px, 2.6vw, 44px)); }
.band--flush-top + .band:not(.band--flush-top) { padding-top: 0; }
.band .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.hero--dark { background: var(--s0); padding-bottom: 28px; }
.hero + .band {
  position: relative;
  z-index: 2;
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  background: var(--paper);
}
@media (max-width: 700px) {
  .hero--dark { padding-bottom: 20px; }
  .hero + .band { margin-top: -20px; border-radius: 20px 20px 0 0; }
}

/* Planos oscuros */
.panel { background: var(--s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }

/* =========================================================
   Marca viva: el pulpo es un SVG con dos brazos que giran sobre su pivote.
   Las variables registradas (--wr, --wl, --mkd) cruzan el <use>, así cada instancia se anima sola.
   ========================================================= */
@property --wr { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wl { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mkd { syntax: "<number>"; inherits: true; initial-value: 0; }

.mark { display: block; color: var(--text); fill: currentColor; }
.brand__mark.mark { object-fit: contain; }
.site-header[data-tone="dark"].on-dark .brand__mark.mark { filter: none; }
.m-a--r { transform: rotate(calc(var(--wr) * -11deg)); transform-origin: 362px 275px; }
.m-a--l { transform: rotate(calc(var(--wl) * 11deg)); transform-origin: 150px 275px; }
/* Entrada: el contorno se traza y se rellena (pathLength normalizado a 1) */
.m-b, .m-a use {
  stroke: currentColor;
  stroke-width: 6;
  stroke-opacity: min(1, calc(var(--mkd) * 3));
  stroke-dasharray: 1;
  stroke-dashoffset: var(--mkd);
  fill-opacity: calc(1 - var(--mkd));
}
@keyframes mkdraw { from { --mkd: 1; } }
@keyframes mkwaveR { 0%, 100% { --wr: 0; } 22% { --wr: 1; } 44% { --wr: 0.2; } 66% { --wr: 0.9; } 86% { --wr: 0.1; } }
@keyframes mkwaveBoth { 0%, 100% { --wr: 0; --wl: 0; } 30% { --wr: 0.9; --wl: 0.9; } 62% { --wr: 0.1; --wl: 0.1; } }
.mark--intro { animation: mkdraw 0.9s var(--ease-out) 0.15s both; }
@media (hover: hover) {
  .brand:hover .mark { animation: mkwaveR 1.1s var(--ease) 1; }
}
.brand:focus-visible .mark { animation: mkwaveR 1.1s var(--ease) 1; }

/* ---------- Mensajes (celular y widget) ---------- */
.msg { padding: 0.8em 1.05em; border-radius: 1.25em; line-height: 1.45; }
.msg--bot { justify-self: start; background: rgba(255, 255, 255, 0.09); color: #eceef2; border-bottom-left-radius: 0.35em; max-width: 90%; }
.msg--user { justify-self: end; background: var(--white); color: var(--ink); border-bottom-right-radius: 0.35em; max-width: 80%; }
.msg--opts { position: relative; display: grid; gap: 0.5em; width: 90%; padding: 0.7em; }
.opt { padding: 0.6em 1em; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; line-height: 1.2; }
.msg--typing { display: flex; align-items: center; gap: 0.38em; width: fit-content; padding: 0.85em 1.05em; }
.msg--typing i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--d-text-2); animation: blink 1.3s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: 0.18s; }
.msg--typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 70%, 100% { opacity: 0.3; } 35% { opacity: 1; } }

.avatar-bot { display: grid; place-items: center; flex: none; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
.avatar-bot .mark { width: 62%; height: 62%; color: var(--white); }
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
/* Anillo de pulso: transform + opacity sobre un pseudo-elemento */
.live-dot::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: inherit; opacity: 0; pointer-events: none; }

/* =========================================================
   Hero
   ========================================================= */
/* Fondo: negro con luz, viñeta y grano fino estático (evita las bandas de los degradados oscuros) */
.hero--dark .hero__bg {
  background:
    radial-gradient(44% 72% at 76% 36%, rgba(118, 124, 138, 0.2), transparent 72%),
    radial-gradient(28% 46% at 95% 8%, rgba(255, 255, 255, 0.07), transparent 70%),
    url("../../_shared/img/waves.svg") 60% 70% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.hero--dark .hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(0, 0, 0, 0.6));
}
.hero--dark .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.hero--dark .hero__grid { padding-block: clamp(8px, 2vw, 32px) 0; }
.hero--dark .strip { margin-top: clamp(20px, 3vw, 44px); }

/* Titular: entra línea a línea con máscara (el JS parte las palabras y numera las líneas) */
.hero .display { font-weight: 600; letter-spacing: -0.034em; color: rgba(255, 255, 255, 0.74); }
.hero .display .hl { color: var(--white); }
.hero .display .w { display: inline-block; overflow: clip; vertical-align: bottom; padding-block: 0.06em 0.16em; margin-block: -0.06em -0.16em; }
.hero .display .w__i { display: inline-block; animation: wordIn 0.95s var(--ease-out) calc(0.12s + var(--l, 0) * 0.09s) both; }
@keyframes wordIn { from { transform: translateY(108%); } }
@media (prefers-reduced-motion: no-preference) {
  /* Oculto hasta que el JS lo parte; si el JS falla, aparece solo a los 1,6 s */
  .js .hero .display[data-split]:not(.is-split) { opacity: 0; animation: h1safe 0.01s 1.6s forwards; }
}
@keyframes h1safe { to { opacity: 1; } }
/* El párrafo de apoyo es el texto más grande del primer pantallazo: se mueve pero nunca se oculta (LCP temprano) */
.hero__copy .lede { animation: ledeIn 0.9s var(--ease-out) 0.35s both; }
@keyframes ledeIn { from { transform: translateY(16px); } }

/* ---------- Escenario: celular + burbujas ---------- */
.hero__stage {
  --pw: clamp(214px, 40cqw, 300px);
  --shift: 10cqw;
  --t0: 0.3s;
  container-type: inline-size;
  position: relative;
  min-height: clamp(500px, 42vw, 650px);
  touch-action: pan-y;
  view-timeline: --stg block;
}
.hero__stage::before {
  content: "";
  position: absolute;
  left: calc(50% - var(--shift));
  top: calc(2cqw + var(--pw) * 1.04);
  width: calc(var(--pw) * 2.4);
  height: calc(var(--pw) * 2.4);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), transparent 72%);
  pointer-events: none;
}

/* Aros que insinúan "siempre encendido" */
.halo { position: absolute; left: calc(50% - var(--shift)); top: calc(2cqw + var(--pw) * 1.04); width: 0; height: 0; pointer-events: none; }
.halo i {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--pw) * var(--k));
  height: calc(var(--pw) * var(--k));
  translate: -50% -50%;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 50%;
  animation: ring 1.6s var(--ease-out) calc(var(--t0) + var(--n) * 0.25s) both;
}
.halo i:nth-child(1) { --k: 1.55; --n: 0; }
.halo i:nth-child(2) { --k: 2.2; --n: 1; }
.halo i:nth-child(3) { --k: 2.6; --n: 2; }
@keyframes ring { from { opacity: 0; scale: 0.55; } }

/* Suelo: resplandor elíptico bajo el equipo (estático) */
.stage__floor {
  position: absolute;
  left: calc(50% - var(--shift) - var(--pw) * 0.12);
  top: calc(2cqw + var(--pw) * 2.0);
  width: calc(var(--pw) * 1.7);
  height: calc(var(--pw) * 0.3);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045) 55%, transparent);
  pointer-events: none;
  animation: fadeIn 1.2s ease calc(var(--t0) + 0.6s) both;
}

.phone {
  position: absolute;
  left: 50%;
  top: 2cqw;
  width: var(--pw);
  margin-left: calc(var(--pw) / -2 - var(--shift));
  font-size: calc(var(--pw) / 24);
  color: var(--white);
  rotate: -9deg;
  transform-origin: 50% 40%;
  animation: phoneIn 1.1s var(--ease-out) var(--t0) both;
}
@keyframes phoneIn { from { opacity: 0; translate: 0 4em; rotate: -16deg; scale: 0.95; } }

/* Se inclina hacia el puntero, el dedo o el giroscopio (el JS interpola y escribe el transform) */
.phone__tilt { will-change: transform; }

/* Marco con bisel de titanio y luz de borde */
.phone__frame {
  position: relative;
  aspect-ratio: 24 / 50;
  padding: 0.9em;
  border-radius: 3.9em;
  background: linear-gradient(150deg, #8b919c 0%, #2b3038 13%, #0c0e12 44%, #1b1f26 68%, #7c828d 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0.7em rgba(255, 255, 255, 0.06);
}
.phone__frame::before, .phone__frame::after { content: ""; position: absolute; width: 0.2em; border-radius: 0.1em; background: #2a2e36; }
.phone__frame::before { left: -0.15em; top: 9em; height: 2.2em; box-shadow: 0 3.2em 0 #2a2e36; }
.phone__frame::after { right: -0.15em; top: 12em; height: 4.4em; }
.phone__rim, .float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 3.1em; background: linear-gradient(180deg, #181c23 0%, #0b0e13 100%); box-shadow: 0 0 0 0.45em #040506; }
.phone__island { position: absolute; top: 0.85em; left: 50%; z-index: 2; width: 7.2em; height: 2em; border-radius: 1em; background: #000; transform: translateX(-50%); }
.phone__status { display: flex; align-items: center; justify-content: space-between; padding: 1.1em 2.3em 0 2.4em; font-size: 0.95em; font-weight: 600; }
.phone__sys { display: flex; align-items: center; gap: 0.4em; }
.phone__sys svg { height: 0.78em; width: auto; }
.phone__head { display: flex; align-items: center; gap: 0.75em; padding: 1.5em 1.3em 0.9em; }
.phone__head > .icon { width: 1.5em; height: 1.5em; color: var(--d-text-2); }
.avatar-bot--phone { width: 2.8em; height: 2.8em; }
.phone__who { display: grid; line-height: 1.25; }
.phone__who strong { font-size: 1.05em; font-weight: 600; letter-spacing: -0.01em; }
.phone__who small { display: flex; align-items: center; gap: 0.5em; font-size: 0.78em; color: var(--d-text-3); }
.phone .live-dot { width: 0.55em; height: 0.55em; box-shadow: 0 0 0 0.22em rgba(255, 255, 255, 0.22); }
.phone__chat { display: grid; gap: 0.6em; padding: 0.3em 1.15em 1.2em; }
.phone .msg { font-size: 0.86em; }

/* Turnos del bot: la firma del pulpo "escribe" en el lugar del mensaje antes de que aparezca */
.turn { position: relative; display: grid; }
.turn > .msg--typing { position: absolute; top: 0; left: 0; opacity: 0; padding: 0.4em 0.85em; }
.mark--typing { width: 2.1em; height: 2.1em; color: var(--d-text-2); }

/* Productos que recomienda el bot */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6em; font-size: 0.8em; }
.pcard { display: grid; gap: 0.2em; padding: 0.7em; border-radius: 1.1em; background: rgba(255, 255, 255, 0.08); }
.pcard__img { display: grid; place-items: center; height: 3.4em; margin-bottom: 0.35em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.07); }
.pcard__img .icon { width: 1.8em; height: 1.8em; stroke-width: 1.4; color: var(--d-text-2); }
.pcard strong { font-size: 1em; font-weight: 600; letter-spacing: -0.01em; }
.pcard small { font-size: 0.95em; color: var(--d-text-2); }
.pcard__btn { position: relative; display: grid; place-items: center; margin-top: 0.35em; padding: 0.55em 0; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 0.9em; font-weight: 600; line-height: 1.2; }
.pcard__ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4em; }
.pcard__ok .icon { width: 1.1em; height: 1.1em; }
.pcard--1 .pcard__btn { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.pcard--1 .pcard__add { opacity: 0; }

.phone__input {
  position: absolute;
  left: 1.1em;
  right: 1.1em;
  bottom: 2.2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35em 0.35em 0.35em 1.2em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82em;
  color: var(--d-text-3);
}
.phone__input .send { width: 2.3em; height: 2.3em; }
.phone__input .send .icon { width: 1.05em; height: 1.05em; }
.phone__home { position: absolute; left: 50%; bottom: 0.75em; width: 8em; height: 0.3em; margin-left: -4em; border-radius: 1em; background: rgba(255, 255, 255, 0.55); }

/* Destello especular (lo desplaza el puntero, el dedo o el giroscopio) y encendido de pantalla */
.phone__spec {
  position: absolute;
  inset: 0 -60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.085) 48%, rgba(255, 255, 255, 0.03) 54%, transparent 62%);
  will-change: transform;
}
.phone__wake { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; animation: wake 0.8s var(--ease) calc(var(--t0) + 0.35s) both; }
.phone__glare { position: absolute; inset: -20% -50%; z-index: 3; opacity: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.13) 50%, transparent 58%); animation: glare 1.3s var(--ease-out) calc(var(--t0) + 0.9s) both; }
@keyframes wake { from { opacity: 1; } }
@keyframes glare { 0% { opacity: 0; transform: translateX(-45%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(45%); } }

/* Dedo virtual: toca "Ver catálogo" y explica la causa de lo que ocurre después */
.tap {
  position: absolute;
  left: 58%;
  top: 0.95em;
  z-index: 2;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  animation: tapPath 1.5s var(--ease) calc(var(--t0) + 3.0s) both;
}
@keyframes tapPath {
  0% { opacity: 0; transform: translate(2.4em, 4.6em) scale(1); }
  35% { opacity: 1; transform: translate(0, 0) scale(1); }
  55% { opacity: 1; transform: translate(0, 0) scale(0.76); }
  72% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, -0.25em) scale(1.12); }
}

/* La historia: saludo, opciones, elección, catálogo, pedido */
.turn--1 > .msg--typing { animation: typing 0.8s ease calc(var(--t0) + 1.2s) both; }
.turn--1 .mark--typing { animation: mkwaveBoth 0.8s var(--ease) calc(var(--t0) + 1.2s) 1; }
.turn--1 > .msg:not(.msg--typing) { animation: msgIn 0.5s var(--ease-out) calc(var(--t0) + 2.0s) both; }
.msg--opts { animation: msgIn 0.5s var(--ease-out) calc(var(--t0) + 2.5s) both; }
.opt--pick { animation: pick 0.7s var(--ease) calc(var(--t0) + 3.7s) both; }
.msg--user { transform-origin: 100% 100%; animation: userIn 0.5s var(--ease-out) calc(var(--t0) + 4.2s) both; }
.turn--2 > .msg--typing { animation: typing 0.8s ease calc(var(--t0) + 4.8s) both; }
.turn--2 .mark--typing { animation: mkwaveBoth 0.8s var(--ease) calc(var(--t0) + 4.8s) 1; }
.turn--2 > .msg:not(.msg--typing) { animation: msgIn 0.5s var(--ease-out) calc(var(--t0) + 5.6s) both; }
.pcard--1 { animation: msgIn 0.5s var(--ease-out) calc(var(--t0) + 6.0s) both; }
.pcard--2 { animation: msgIn 0.5s var(--ease-out) calc(var(--t0) + 6.15s) both; }
.pcard--1 .pcard__btn { animation: btnTo 0.4s var(--ease) calc(var(--t0) + 7.3s) both; }
.pcard--1 .pcard__add { animation: fadeOut 0.25s ease calc(var(--t0) + 7.3s) both; }
.pcard--1 .pcard__ok { animation: fadeIn 0.3s ease calc(var(--t0) + 7.4s) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(0.8em) scale(0.96); } }
@keyframes userIn { from { opacity: 0; transform: translateX(1.2em) scale(0.96); } }
@keyframes typing { 0% { opacity: 0; transform: translateY(0.5em); } 14%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pick { 40% { background: rgba(255, 255, 255, 0.22); border-color: var(--white); transform: scale(0.97); } }
@keyframes btnTo { from { background: var(--white); color: var(--ink); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { from { opacity: 1; } }

/* Burbujas flotantes (fuera del chat para no taparlo) */
.float {
  position: absolute;
  z-index: 3;
  background: var(--s3);
  color: var(--white);
  border-radius: var(--r-surface);
  padding: 16px 20px;
}
.float__title { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.float__text { margin-top: 4px; font-size: 0.8125rem; line-height: 1.45; color: var(--d-text-2); }
.float__body { display: grid; min-width: 0; }
.float--status { top: 6%; right: 0; width: min(240px, 40cqw); animation: floatIn 0.8s var(--ease-out) calc(var(--t0) + 1.1s) both; }
.float--status .float__title { justify-content: flex-start; }
.float--status .live-dot::after { animation: ring-out 1.6s ease-out calc(var(--t0) + 1.9s) 3; }
.float--sales { top: 40%; right: 0; width: min(250px, 42cqw); animation: floatIn 0.8s var(--ease-out) calc(var(--t0) + 2.6s) both; }
.float--order { left: 0; bottom: 2%; display: flex; align-items: center; gap: 14px; width: min(260px, 46cqw); animation: floatIn 0.8s var(--ease-out) calc(var(--t0) + 7.8s) both; }
.float__ok { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--ink); }
.float__ok .icon { width: 22px; height: 22px; stroke-width: 1.7; }
.spark { flex: none; width: 54px; height: 25px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark path { stroke-dasharray: 90; animation: drawLine 1.2s var(--ease-out) calc(var(--t0) + 3.2s) both; }
.spark circle { fill: var(--white); stroke: none; animation: fadeIn 0.3s ease calc(var(--t0) + 4.2s) both; }
@keyframes floatIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes drawLine { from { stroke-dashoffset: 90; } }
@keyframes ring-out { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }

/* Repetir: aparece al terminar la historia */
.replay {
  position: absolute;
  right: 0;
  bottom: 3%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: var(--s2);
  color: var(--white);
  cursor: pointer;
  animation: fadeIn 0.6s ease both;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.replay[hidden] { display: none; }
.replay .icon { width: 18px; height: 18px; stroke-width: 1.7; transition: rotate var(--t-slow) var(--ease-out); }
@media (hover: hover) {
  .replay:hover { background: var(--s3); border-color: var(--white); }
  .replay:hover .icon { rotate: -90deg; }
}
.replay:active { scale: 0.94; }

@media (max-width: 959px) {
  .hero__stage { --pw: clamp(220px, 58cqw, 280px); --shift: 8cqw; min-height: clamp(480px, 118vw, 600px); }
}
@media (max-width: 560px) {
  .float { padding: 12px 14px; border-radius: 14px; }
  .float--status { top: 2%; width: 50cqw; right: -2%; }
  .float--sales { top: 15%; width: 46cqw; right: -2%; }
  .float--order { bottom: 2%; left: -2%; width: 54cqw; }
  .float__text, .spark { display: none; }
  .float__ok { width: 32px; height: 32px; }
  .float__ok .icon { width: 18px; height: 18px; }
  .replay { bottom: 1%; }
}

/* Con JS, la historia espera a que el escenario sea visible (JS pone .is-live); .is-reset la reinicia */
.js .hero__stage:not(.is-live) * { animation-play-state: paused !important; }
.hero__stage.is-reset *, .hero__stage.is-reset { animation: none !important; }

/* Profundidad con el scroll (solo CSS, en el compositor): el celular y cada burbuja se mueven a su ritmo */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes pxPhone { from { translate: 0 16px; } to { translate: 0 -16px; } }
    @keyframes pxStatus { from { translate: 0 22px; } to { translate: 0 -22px; } }
    @keyframes pxSales { from { translate: 0 32px; } to { translate: 0 -32px; } }
    @keyframes pxOrder { from { translate: 0 -22px; } to { translate: 0 22px; } }
    .phone__tilt { animation: pxPhone linear both; animation-timeline: --stg; animation-range: cover 0% cover 100%; }
    .float--status { animation: floatIn 0.8s var(--ease-out) calc(var(--t0) + 1.1s) both, pxStatus linear both; animation-timeline: auto, --stg; animation-range: normal, cover 0% cover 100%; }
    .float--sales { animation: floatIn 0.8s var(--ease-out) calc(var(--t0) + 2.6s) both, pxSales linear both; animation-timeline: auto, --stg; animation-range: normal, cover 0% cover 100%; }
    .float--order { animation: floatIn 0.8s var(--ease-out) calc(var(--t0) + 7.8s) both, pxOrder linear both; animation-timeline: auto, --stg; animation-range: normal, cover 0% cover 100%; }
    /* Fondo y texto del hero se quedan atrás mientras la hoja clara sube */
    @keyframes bgDrift { to { translate: 0 18px; } }
    .hero--dark .hero__bg { animation: bgDrift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    @keyframes copySlow { to { translate: 0 44px; } }
    .hero__copy { animation: copySlow linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}

/* =========================================================
   Botones: atracción magnética (solo ratón), brillo y foco doble
   ========================================================= */
.btn--primary, .header__cta { position: relative; }
.btn[data-magnetic], .header__cta {
  transition:
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    translate 0.35s var(--ease-out);
}
/* Zona de atracción: el botón "llama" al puntero desde 14 px de distancia */
@media (hover: hover) and (pointer: fine) {
  .btn[data-magnetic]::after, .header__cta::after { content: ""; position: absolute; inset: -14px; border-radius: 999px; }
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  transition: background-position 0.9s var(--ease-out);
}
.is-dark .btn--primary::before, .plan--featured .btn--primary::before { background-image: linear-gradient(105deg, transparent 38%, rgba(10, 12, 16, 0.12) 50%, transparent 62%); }
@media (hover: hover) {
  .btn--primary:hover::before { background-position: -30% 0; }
}
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--focus) 24%, transparent); }

/* =========================================================
   Cabecera: opaca en zona clara, línea de progreso y ocultar al bajar (móvil)
   ========================================================= */
.site-header {
  transition:
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    transform 0.4s var(--ease-out);
}
.site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
.site-header[data-tone="dark"].on-dark.is-scrolled { background: var(--night); }
.hdr-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--text);
  opacity: 0.55;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .hdr-progress { --p: 0; animation: hdrp linear both; animation-timeline: scroll(root); }
  @keyframes hdrp { to { transform: scaleX(1); } }
}
@media (max-width: 1080px) {
  .site-header.is-hidden { transform: translateY(-100%); }
}

/* =========================================================
   Cintillo: los iconos se trazan una vez al entrar
   ========================================================= */
.strip small { text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .js .strip__icon .icon { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1s var(--ease-out) calc(var(--d, 0ms) + 0.25s); }
  .js .strip__item.is-visible .strip__icon .icon { stroke-dashoffset: 0; }
}

/* =========================================================
   Soluciones + demo: un solo panel. Los casos son pestañas
   y la conversación aparece a la derecha; los chips son interactivos.
   ========================================================= */
.sd { display: grid; gap: clamp(22px, 2.8vw, 40px); padding: clamp(22px, 3.4vw, 52px); }
.sd > .sd__head, .sd > .sd__body { position: relative; z-index: 1; }
.sd__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 20px clamp(28px, 5vw, 88px); align-items: end; }
.sd__head .title { max-width: 10em; }
.sd__intro { display: grid; gap: 20px; justify-items: start; }
.sd__intro .lede { max-width: 30em; }
.sd__body { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.sd__stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sd__about { display: none; }

/* Foco de luz que sigue al puntero (una capa que se traslada; no repinta degradados) */
.spot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.075), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  will-change: transform;
}
.spot.is-on { opacity: 1; }
@media (hover: none) { .spot { display: none; } }

/* Lista de casos: un único indicador se desliza entre filas */
.sd__list { position: relative; align-content: start; grid-auto-rows: 1fr; --sel: 0; }
.sd__list .row {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding-block: clamp(14px, 1.4vw, 19px);
  transition: background-color var(--t-base) var(--ease), scale 0.12s var(--ease);
}
.sd__list .row:active { scale: 0.985; }
.sd__list .row__icon, .sd__list .row__txt { transition: translate 0.45s var(--ease-out), background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.sd__list .row__icon { border-radius: 50%; }
.sd__list .row small { color: var(--d-text-3); transition: color var(--t-base) var(--ease); }
.sd__list button.row:hover { padding-inline: 0; background: transparent; }
@media (hover: hover) {
  .sd__list .row:hover .row__icon, .sd__list .row:hover .row__txt { translate: 6px 0; }
}
.sd__list .row[aria-selected="true"] small { color: var(--text-2); }
.sd__list .row[aria-selected="true"] .row__icon { background: var(--white); color: var(--ink); }
.sd__list .row[aria-selected="true"] .row__go { background: var(--white); color: var(--ink); border-color: var(--white); }
.sd__list .row[aria-selected="true"] .row__go .icon { transform: translateX(2px); }
@media (min-width: 901px) {
  .sd__list::before {
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    top: 0;
    height: calc(100% / 5);
    border-radius: var(--r-inner);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(calc(var(--sel) * 100%));
    transition: transform 0.5s var(--ease-out);
    pointer-events: none;
  }
}

/* Conversación */
.sd .widget {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-surface);
  background: var(--s2);
  color: var(--white);
}
.sd .widget::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; background: var(--rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.sd .msg--bot { background: rgba(255, 255, 255, 0.1); }
.widget__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.widget__head .avatar-bot { width: 42px; height: 42px; }
.widget__who { display: grid; line-height: 1.3; transition: opacity 0.14s ease; }
.widget__who.is-swap { opacity: 0; }
.widget__who strong { font-size: 0.96875rem; font-weight: 600; letter-spacing: -0.01em; }
.widget__who small { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--d-text-3); }

/* Todas las conversaciones (y sus dos ramas) ocupan la misma celda: el alto lo marca la más larga y nada salta */
.widget__chat { flex: 1; display: grid; padding: clamp(18px, 2vw, 26px); }
.chat { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; font-size: 0.9375rem; }
.chat[hidden] { display: grid; visibility: hidden; }
.chat .is-hidden { display: none; }
.chat > *, .branch > * { animation: pop 0.5s var(--ease-out) both; }
.chat > .msg--typing { animation: none; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.branches { display: grid; }
.branch { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; visibility: hidden; }
.chat:not([hidden]) .branch.is-on { visibility: visible; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -2px; }
.chip {
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), scale 0.12s var(--ease);
}
@media (hover: hover) { .chip:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); } }
.chip:active { scale: 0.96; }
.chip.is-picked { background: var(--white); color: var(--ink); border-color: var(--white); }
.widget__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px);
  padding: 6px 6px 6px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--d-text-3);
}
.send { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--white); color: var(--ink); }
.send .icon { width: 18px; height: 18px; stroke-width: 1.8; }

@media (max-width: 900px) {
  .sd__head, .sd__body { grid-template-columns: minmax(0, 1fr); }
  .sd__head { align-items: start; }

  /* En pantallas chicas los casos pasan a una tira de píldoras, con borde que se desvanece si hay más */
  .sd__list {
    --fl: 0px;
    --fr: 28px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  }
  .sd__list.has-l { --fl: 28px; }
  .sd__list:not(.has-r) { --fr: 0px; }
  .sd__list::-webkit-scrollbar { display: none; }
  .sd__list .row, .sd__list .row:last-child {
    flex: none;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px 0 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    scroll-snap-align: start;
  }
  .sd__list button.row:hover { padding: 0 18px 0 8px; }
  .sd__list .row small, .sd__list .row__go { display: none; }
  .sd__list .row__icon { width: 30px; height: 30px; }
  .sd__list .row__icon .icon { width: 18px; height: 18px; }
  .sd__list .row strong { font-size: 0.9375rem; white-space: nowrap; }
  .sd__list .row[aria-selected="true"] { background: var(--white); color: var(--ink); border-color: var(--white); padding: 0 18px 0 8px; }
  .sd__list .row[aria-selected="true"] .row__icon { background: var(--ink); color: var(--white); }
  .sd__list .row:active { background: rgba(255, 255, 255, 0.12); }
  .sd__list .row[aria-selected="true"]:active { background: var(--mist); }
  .sd__about { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
}
@media (pointer: coarse) {
  .chip { min-height: 44px; padding: 10px 18px; font-size: 0.875rem; }
}

/* =========================================================
   Así funciona: línea de tiempo ligada al scroll, una escena por paso.
   El riel se llena al desplazarte (el JS fija --sp por paso); cada escena
   se anima una vez cuando el riel llega a su paso.
   ========================================================= */
.how__lede { max-width: 28em; }
.flow { --gap: clamp(16px, 2.2vw, 36px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.flow__step { --sp: 1; --d: 0s; position: relative; display: grid; align-content: start; }
.flow__step > h3 { margin-top: 20px; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.flow__step > p { margin-top: 6px; max-width: 20em; font-size: 0.96875rem; color: var(--text-2); text-wrap: pretty; }

.flow__node {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 1rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), scale 0.5s var(--ease-out);
}
.flow__step.is-pending .flow__node { background: var(--white); color: var(--ink); border-color: var(--line); }
.flow__step.is-active .flow__node { scale: 1.08; }

.flow__rail { position: absolute; top: 22px; left: 56px; right: calc(var(--gap) * -1 + 12px); height: 1px; background: var(--line); container-type: size; }
.flow__rail::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--sp)); transform-origin: left; }
.flow__rail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--ink);
  translate: calc(var(--sp) * 100cqw) 0;
  opacity: min(1, calc(var(--sp) * 25), calc((1 - var(--sp)) * 25));
}

.scene {
  position: relative;
  container-type: inline-size;
  display: grid;
  align-content: center;
  gap: 10px;
  aspect-ratio: 5 / 4;
  margin-top: 22px;
  padding: clamp(32px, 2.8vw, 38px) clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--white);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--text);
  transition: opacity 0.5s var(--ease);
}
/* Marco de ventana: tres puntos */
.scene::before { content: ""; position: absolute; top: 13px; left: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--line); box-shadow: 10px 0 var(--line), 20px 0 var(--line); }
.flow__step.is-pending .scene { opacity: 0.5; }
.scene > :nth-child(2) { --k: 1; }
.scene > :nth-child(3) { --k: 2; }
.scene > :nth-child(4) { --k: 3; }

/* 1. Configuras: lista que se va marcando */
.chk { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.chk__box { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }
.chk__box svg { width: 12px; height: 12px; fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 0; }

/* 2. Personalizamos: el tono cambia y la respuesta con él */
.seg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-weight: 500; text-align: center; }
.seg > span { position: relative; z-index: 1; padding: 6px 0; color: var(--text-3); }
.seg > .seg__b { color: var(--white); }
.seg__thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--ink); transform: translateX(100%); }
@container (max-width: 270px) {
  .seg { font-size: 0.75rem; }
  .seg > span { padding: 6px 0; white-space: nowrap; }
}
.bubble { display: grid; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--paper); font-weight: 450; }
.bubble > span { grid-area: 1 / 1; }
.bubble__a { opacity: 0; }

/* 3. Implementamos: los canales se encienden */
.chan { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.chan .icon { width: 18px; height: 18px; stroke-width: 1.6; }
.chan > span:first-of-type { flex: 1; }
.sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--ink); }
.sw i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); transform: translateX(14px); }

/* 4. Resultados: barras que crecen */
.scene--growth { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.gain { display: flex; align-items: center; gap: 8px; font-weight: 550; }
.gain .icon { width: 18px; height: 18px; }
.bars { display: flex; align-items: flex-end; gap: 8px; min-height: 0; }
.bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: #d9dde4; transform-origin: bottom; }
.bars i:last-child { background: var(--ink); }

/* Coreografía de cada escena: arranca al llegar el riel (JS pone .is-in en el paso) */
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes boxOn { from { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); } }
@keyframes draw { from { stroke-dashoffset: 20; } }
@keyframes thumbTo { from { transform: translateX(0); } }
@keyframes lblOn { from { color: var(--text-3); } }
@keyframes lblOff { from { color: var(--white); } }
@keyframes swTrack { from { background: var(--line); } }
@keyframes swThumb { from { transform: translateX(0); } }
@keyframes grow { from { transform: scaleY(0); } }

.scene > * { --e: calc(var(--d) + 0.1s + var(--k, 0) * 0.28s); }
.chk { animation: rowIn 0.5s var(--ease-out) var(--e) both; }
.chk__box { animation: boxOn 0.3s var(--ease) calc(var(--e) + 0.15s) both; }
.chk__box svg path { stroke-dasharray: 20; animation: draw 0.4s var(--ease-out) calc(var(--e) + 0.25s) both; }
.seg__thumb { animation: thumbTo 0.6s var(--ease-out) calc(var(--d) + 0.4s) both; }
.seg > .seg__a { animation: lblOff 0.4s var(--ease) calc(var(--d) + 0.4s) both; }
.seg > .seg__b { animation: lblOn 0.4s var(--ease) calc(var(--d) + 0.45s) both; }
.bubble__a { animation: fadeOut 0.4s var(--ease) calc(var(--d) + 0.6s) both; }
.bubble__b { animation: fadeIn 0.4s var(--ease) calc(var(--d) + 0.7s) both; }
.chan { animation: rowIn 0.5s var(--ease-out) var(--e) both; }
.sw { animation: swTrack 0.3s var(--ease) calc(var(--e) + 0.2s) both; }
.sw i { animation: swThumb 0.4s var(--ease-out) calc(var(--e) + 0.2s) both; }
.gain { animation: rowIn 0.5s var(--ease-out) var(--e) both; }
.bars i { animation: grow 0.7s var(--ease-out) calc(var(--d) + 0.35s + var(--b, 0) * 0.08s) both; }
.bars i:nth-child(2) { --b: 1; }
.bars i:nth-child(3) { --b: 2; }
.bars i:nth-child(4) { --b: 3; }
.bars i:nth-child(5) { --b: 4; }

/* Pausadas hasta que el riel llega al paso (solo con JS) */
.js .flow__step:not(.is-in) { --play: paused; }
.flow__step :is(.chk, .chk__box, .chk__box svg path, .seg__thumb, .seg > span, .bubble > span, .chan, .sw, .sw i, .gain, .bars i) { animation-play-state: var(--play, running); }

@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-bottom: 40px; }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__node { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .flow__step > .scene, .flow__step > h3, .flow__step > p { grid-column: 2; }
  .scene { aspect-ratio: auto; min-height: 150px; max-width: 380px; margin-top: 0; }
  .flow__step > h3 { margin-top: 18px; }
  .flow__rail { top: 52px; bottom: -6px; left: 21.5px; right: auto; width: 1px; height: auto; }
  .flow__rail::before { transform: scaleY(var(--sp)); transform-origin: top; }
  .flow__rail::after { left: 50%; top: 0; margin: -3.5px 0 0 -3.5px; translate: 0 calc(var(--sp) * 100cqh); }
}

/* =========================================================
   Resultados: franja delgada. Cifras que ruedan, medidor con marcas y testimonio.
   ========================================================= */
.rs { display: grid; gap: clamp(20px, 2.4vw, 30px); padding-block: clamp(26px, 3.2vw, 44px); }
.rs__top { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px clamp(28px, 4vw, 72px); align-items: end; }
.rs .title { max-width: 9em; font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.2rem); }
.rs .stats { grid-column: auto; margin: 0; border-top: 0; }
.rs .stat { padding: 0 clamp(16px, 2vw, 32px); }
.rs .stat:first-child { padding-left: 0; }
.rs .stat strong { font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem); }
.rs .stat > span { font-size: 0.875rem; max-width: 15em; }

/* Los span internos de la cifra heredan el tamaño y el color de la cifra (no el estilo de la etiqueta de .stat) */
.stat .r span { font-size: inherit; color: inherit; max-width: none; }
/* Dígitos que ruedan: cada cifra es una columna 0-9 que se desplaza hasta su valor */
.r { display: inline-flex; align-items: baseline; }
.r__d { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; padding-block: 0.06em; margin-block: -0.06em; }
.r__c { display: flex; flex-direction: column; line-height: 1; transform: translateY(calc(var(--n) * -1em)); }
.js .r:not(.is-rolled) .r__c { transform: translateY(0); }
.js .r.is-rolling .r__c { transition: transform 1.7s var(--ease-out) calc(var(--k, 0) * 0.14s); }

/* Medidor con marcas cada 10 %: se llena al entrar, a la par de las cifras */
.meter { position: relative; display: block; height: 2px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.meter::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.55) calc(10% - 1px) 10%); }
.meter::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(var(--m, 1)); transform-origin: left; transition: transform 1.5s var(--ease-out) calc(var(--d, 0ms) + 0.2s); }
.js .stat:not(.is-visible) .meter::after { transform: scaleX(0); }

.rs .quote { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(24px, 4vw, 64px); padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--line); }
.rs .quote blockquote p { max-width: 48em; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem); font-weight: 450; line-height: 1.5; }
.rs .fine { margin-top: -6px; }
/* Retrato opcional (JSON "photo"): monocromo, sin salirse de la paleta */
.avatar--photo { overflow: hidden; padding: 0; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }

@media (max-width: 900px) {
  .rs__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .rs .quote { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rs .stat { padding: 12px 0; }
  .rs .stat strong { font-size: 1.75rem; }
  .rs .stat .meter { grid-column: 1 / -1; margin-top: 2px; }
}

/* =========================================================
   Precios: precio como etiqueta de producto y plan destacado con luz de borde
   ========================================================= */
.plan__price .cur { position: relative; top: 0.28em; margin-right: 0.1em; font-size: 0.5em; font-weight: 500; letter-spacing: 0; vertical-align: top; }
.plan__price span:last-child { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.plan--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.plan--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.11) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
}
.plan--featured.is-sheen::after { animation: sheen 1.6s var(--ease-out) 0.2s both; }
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.plan__badge { display: inline-flex; align-items: center; gap: 7px; }
.plan__badge::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.plan--featured.is-sheen .plan__badge::before { animation: ring-out 1.4s ease-out 0.6s 2; }

/* Elevación de los planes: solo transform (la sombra no se anima) */
.plan { transition: transform var(--t-slow) var(--ease-out), border-color var(--t-base) var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan:hover, .plan--featured:hover { box-shadow: none; }
}

/* =========================================================
   Preguntas y formulario: micro-interacciones de conversión
   ========================================================= */
.faq__icon { transition: transform 0.18s var(--ease-out); }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); }

/* Línea de foco que se abre desde el centro */
.field input, .field textarea {
  background-image: linear-gradient(var(--white), var(--white));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0 2px;
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-size 0.4s var(--ease-out);
}
.field input:focus-visible, .field textarea:focus-visible { background-size: 100% 2px; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c6cbd4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(var(--white), var(--white));
  background-repeat: no-repeat, no-repeat;
  background-position: right 16px center, center bottom;
  background-size: 16px 16px, 0 2px;
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-size 0.4s var(--ease-out);
}
.field select:focus-visible { background-size: 16px 16px, 100% 2px; }

/* Enviar: anillo de progreso mientras se envía y check que se dibuja al terminar */
@keyframes spin { to { rotate: 360deg; } }
.form__foot .btn[disabled] { opacity: 0.85; }
.form__foot .btn[disabled] .icon { display: none; }
.form__foot .btn[disabled]::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes checkDraw { from { stroke-dashoffset: 80; } }
.form.is-sent .form__ok .icon { stroke-dasharray: 80; animation: checkDraw 0.9s var(--ease-out) 0.1s both; }

/* =========================================================
   Pie: sello de marca recortado y "Volver arriba"
   ========================================================= */
.site-footer { position: relative; overflow: clip; }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer::before {
  content: "";
  position: absolute;
  right: -9%;
  bottom: -34%;
  width: min(54vw, 540px);
  aspect-ratio: 1;
  background: url("../assets/img/mark.svg") center / contain no-repeat;
  opacity: 0.042;
  pointer-events: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes footMark { from { translate: 0 44px; } to { translate: 0 -8px; } }
    .site-footer::before { animation: footMark linear both; animation-timeline: view(); animation-range: entry 0% cover 70%; }
  }
}
.to-top {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), scale 0.12s var(--ease);
}
.to-top .icon { width: 18px; height: 18px; rotate: -90deg; transition: translate var(--t-slow) var(--ease-out); }
@media (hover: hover) {
  .to-top:hover { background: var(--text); color: var(--paper); border-color: var(--text); }
  .to-top:hover .icon { translate: 0 -2px; }
}
.to-top:active { scale: 0.94; }

/* =========================================================
   Dock móvil: acciones fijas al alcance del pulgar (aparece al salir del hero)
   ========================================================= */
.dock { display: none; }
@media (max-width: 900px) {
  .js .dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--s1);
    border-top: 1px solid var(--d-line);
    transform: translateY(105%);
    transition: transform 0.45s var(--ease-out);
  }
  .js .dock.is-on { transform: none; }
  .dock .btn { flex: 1 1 0; min-height: 48px; padding-inline: 1em; }
}

/* =========================================================
   Rendimiento de carga: las dos últimas secciones no se maquetan hasta acercarse.
   Solo ellas: nada por encima depende de su altura, así ningún anclaje se desplaza.
   El tamaño estimado es el medido menos el relleno propio (contain-intrinsic-size cuenta solo el contenido).
   ========================================================= */
#contacto { content-visibility: auto; contain-intrinsic-size: auto calc(580px - var(--section-y) / 2); }
.site-footer { content-visibility: auto; contain-intrinsic-size: auto calc(410px - clamp(48px, 5vw, 80px)); }
@media (max-width: 960px) {
  #contacto { contain-intrinsic-size: auto calc(1102px - var(--section-y) / 2); }
  .site-footer { contain-intrinsic-size: auto calc(800px - clamp(48px, 5vw, 80px)); }
}

/* =========================================================
   Sin JavaScript y movimiento reducido: estado final, sin animación ni inclinación
   ========================================================= */
html:not(.js) .flow__step *, html:not(.js) .flow__step *::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .phone, .phone *, .halo i, .stage__floor, .float, .float *, .spark *, .live-dot::after, .tap, .hero .display .w__i,
  .mark, .mark--typing, .m-a, .hero__copy .lede, .chat > *, .branch > *, .flow__step *, .flow__step *::before, .plan--featured::after, .plan--featured .plan__badge::before,
  .form.is-sent .form__ok .icon, .replay { animation: none !important; }
  .msg--typing i { animation: none; opacity: 0.7; }
  .phone__tilt { transform: none !important; }
  .phone__spec { display: none; }
  .meter::after, .sd__list::before, .r__c, .strip__icon .icon { transition: none !important; }
  .site-header { transition-property: background-color, border-color, box-shadow; }
  .site-header.is-hidden { transform: none; }
  .btn[data-magnetic], .header__cta { translate: none !important; }
}