/* Okeybot · oferta «100 gratis» (versión 3.1, oferta.okeybot.com). Solo para body.of; se carga después de sitio.css.
   Póster tipográfico con objetos: la imagen es el número. Fuente: diseno/ofertas/oferta-100-gratis/BRIEF-v3.md.

   LA REGLA (igual que la portada): sin /js/oferta.js, sin el motor o con movimiento reducido, todo se ve completo y
   quieto en su composición final. Los estados «de antes» valen solo con html.of-vivo, que pone el script.
   Movimiento: solo transform, translate, opacity, clip-path y stroke-dashoffset. Los bucles se pausan fuera de pantalla.

     .of-inicio      1 · tres planos: .of-cien (el 100 gigante), .of-globos (consultas que flotan) y .of-inicio-c (título)
     .of-dolores     2 · fijado: .of-cel (celular que se llena de notificaciones) y .of-dolor-lista (los cinco dolores)
     .of-giro        3 · dos frases cinéticas
     .of-contador    4 · el pico: .of-numero (anillo, número, «Gratis» / «1 dólar») y .of-cola (consultas que entran)
     .of-sol-s       5 · .of-sols: cada dolor se tacha y aparece su solución
     .of-plat-s      6 · .of-plat (canales → bandeja con IA) y .of-alcance (alcance técnico)
     .of-cuenta      7 · .of-calc, el control de personas por mes; WhatsApp con asterisco
     .of-pasos-s     8 · .of-pasos, unidos por líneas que se dibujan
     .of-cierre      10 · lámina negra con luz y botón magnético */

.of{--verde:#0f7a52;--verde-suave:rgba(15,122,82,.10);--rojo:#c0261b;--ease:cubic-bezier(.23,1,.32,1)}
html:not(.sc-ready) .of [data-sc-cue]{opacity:1;transform:none}

/* ---------- Títulos: una sola escala para toda la página ---------- */
.of-h2{margin:0 auto 22px;max-width:20ch;font-family:var(--f-titulo);font-weight:800;font-size:clamp(30px,7.4vw,58px);
  line-height:1.02;letter-spacing:-.042em;color:var(--tinta);text-align:center;text-wrap:balance}
.of-h2.of-izq{margin-left:0;text-align:left}
.of-h2 .linea{display:block}

/* ---------- Íconos de canal: un círculo de color con su dibujo en blanco ---------- */
.of-canal{display:inline-block;flex:none;width:20px;height:20px;border-radius:50%;background:var(--tinta) center/62% no-repeat}
.of-canal.wa{background-color:#25d366;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-3.9A8 8 0 1 1 8 18.7z'/%3E%3C/svg%3E")}
.of-canal.ig{background-color:#d6249f;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2'%3E%3Crect x='4' y='4' width='16' height='16' rx='5'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3C/svg%3E")}
.of-canal.fb{background-color:#1877f2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M14.5 7.5h-1.6c-1.3 0-1.9.7-1.9 2V20M8.5 12.5h6'/%3E%3C/svg%3E")}
.of-canal.tt{background-color:#111;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M13 4v10.5a3.5 3.5 0 1 1-3-3.4M13 4c.4 2.4 2 4 4.5 4.2'/%3E%3C/svg%3E")}
.of-canal.web{background-color:var(--azul);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c2.4 2.4 2.4 13.6 0 16M12 4c-2.4 2.4-2.4 13.6 0 16'/%3E%3C/svg%3E")}

/* ---------- 1 · Inicio ---------- */
.of-inicio{position:relative;overflow:clip;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 110px);padding:120px 0 64px}
.of-cien{position:absolute;left:50%;top:52%;margin:0;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--f-titulo);font-weight:800;font-size:clamp(200px,60vw,700px);line-height:.8;letter-spacing:-.07em;
  color:var(--papel);white-space:nowrap;
  transform:translate3d(-50%,calc(-50% + var(--of-sube,0) * .42px),0)}
.of-globos{position:absolute;inset:0;z-index:1;pointer-events:none}
.of-globo{position:absolute;display:flex;flex-direction:column;gap:4px;margin:0;padding:10px 14px 9px;border-radius:18px 18px 18px 5px;
  background:#fff;box-shadow:var(--sombra-flotante);font-size:13.5px;font-weight:600;color:var(--texto);line-height:1.2;white-space:nowrap}
.of-globo-c{display:block}
.of-ok{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--verde)}
.of-ok::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.2l2 2 4-4.4'/%3E%3C/svg%3E") center/100% no-repeat}
.of-globo.g1{left:5%;top:22px;transform:translate3d(calc(var(--of-sube,0) * -.10px),calc(var(--of-sube,0) * .18px),0) rotate(-3deg)}
.of-globo.g2{right:5%;top:66px;transform:translate3d(calc(var(--of-sube,0) * .10px),calc(var(--of-sube,0) * .26px),0) rotate(2.5deg)}
.of-globo.g3{display:none}
.of-inicio-c{position:relative;z-index:2;transform:translate3d(0,calc(var(--of-sube,0) * -.06px),0)}
.of-titulo{font-size:clamp(30px,8vw,68px);line-height:1.02;letter-spacing:-.045em;max-width:15em;margin:0 auto;text-wrap:balance}
.of-titulo .linea{display:block}
.of-titulo-2{color:var(--azul-texto);margin-top:.1em}
.of-regla{max-width:27rem;margin:18px auto 0;text-align:center;font-size:15px;font-weight:500;color:#3f3f46;text-wrap:balance}
.of-acciones{max-width:24rem;margin:24px auto 0}
/* Las consultas flotan apenas (translate, aparte del transform del scroll) y se contestan de a una al llegar. */
html.of-vivo .of-globo{animation:of-flota 5.5s ease-in-out infinite;animation-delay:calc(var(--d,0) * -1.6s)}
.of-globo.g2{--d:1}.of-globo.g3{--d:2}
@keyframes of-flota{0%,100%{translate:0 0}50%{translate:0 -7px}}
html.of-vivo .of-globo .of-ok{animation:of-contesta .45s var(--ease) both;animation-delay:calc(.7s + var(--d,0) * .55s)}
@keyframes of-contesta{from{opacity:0;transform:translate3d(0,4px,0) scale(.94)}to{opacity:1;transform:none}}

/* ---------- 2 · Los dolores ---------- */
.of-dolores-escena{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:20px var(--pad) 96px;background:var(--fondo)}
.of-dolores-escena:not(.sc-stage){position:relative;padding-top:var(--aire-seccion)}
.of-dolores-t{margin-bottom:6px;font-size:clamp(26px,6.6vw,52px)}
.of-dolores-cuerpo{display:grid;gap:18px;justify-items:center;width:100%;max-width:62rem;margin:0 auto}
.of-cel{width:min(250px,64vw);height:min(360px,44svh);padding:8px;border-radius:38px;background:#121214;box-shadow:var(--sombra-flotante)}
.of-cel-pantalla{position:relative;height:100%;overflow:hidden;border-radius:30px;padding:18px 10px 10px;
  background:radial-gradient(120% 70% at 30% 0%,#3a2f5c 0%,#1d1a2b 55%,#141319 100%);color:#fff;text-align:center}
.of-cel-hora{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.03em}
.of-cel-cuenta{display:inline-flex;align-items:center;gap:5px;margin:8px 0 12px;padding:4px 10px;border-radius:999px;background:var(--rojo);font-size:11.5px;font-weight:700}
.of-cel-cuenta b{font-variant-numeric:tabular-nums}
.of-notis{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;margin:0;padding:0;list-style:none;text-align:left}
.of-noti{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.9);color:var(--texto);font-size:12px;line-height:1.25;
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
.of-noti .of-canal{grid-row:span 2;width:22px;height:22px}
.of-noti b{font-weight:700}
.of-noti span{color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-noti.mal span{color:var(--rojo);font-weight:600}
/* Las que todavía no llegaron no ocupan lugar: la nueva entra arriba y empuja a las demás (como en un celular de verdad). */
html.of-vivo .of-noti:not(.en){display:none}
html.of-vivo .of-noti.en{animation:of-llega .45s var(--ease) both}
@keyframes of-llega{from{opacity:0;transform:translate3d(0,-14px,0) scale(.96)}to{opacity:1;transform:none}}

.of-dolor-lista{margin:0;padding:0;list-style:none;display:grid;gap:10px;width:100%;max-width:30rem}
.of-dolor{position:relative;padding-left:.85em;font-family:var(--f-titulo);font-weight:800;font-size:clamp(20px,5.2vw,28px);line-height:1.12;letter-spacing:-.03em;color:var(--tinta);text-wrap:balance;
  transition:opacity .4s var(--ease),transform .5s var(--ease),color .4s var(--ease)}
.of-dolor::before{content:"";position:absolute;left:0;top:.36em;width:.42em;height:.42em;border-radius:50%;background:var(--rojo)}
html.of-vivo .of-dolor:not(.en){opacity:0;transform:translate3d(0,12px,0)}
html.of-vivo .of-dolor.en:not(.actual){color:#a1a1aa}
html.of-vivo .of-dolor.en:not(.actual)::before{background:#d4d4d8}
/* En el celular la escena no alcanza para cinco renglones: se ve uno por vez, en el mismo lugar. */
@media (max-width:699px){
  html.of-vivo .of-dolor-lista{position:relative;display:block;height:3.6em;font-size:clamp(20px,5.6vw,26px)}
  html.of-vivo .of-dolor{position:absolute;inset:0 0 auto;padding-left:0;text-align:center}
  html.of-vivo .of-dolor::before{position:static;display:inline-block;margin-right:.35em;vertical-align:.1em}
  html.of-vivo .of-dolor.en:not(.actual){opacity:0;transform:translate3d(0,-12px,0)}
}

/* ---------- 3 · El giro ---------- */
.of-giro{padding:18vh 0 18vh}
.of-giro-c{width:fit-content;max-width:100%;margin:0 auto;padding:0 4px;font-family:var(--f-titulo);font-weight:800;
  font-size:clamp(36px,10.4vw,96px);line-height:1;letter-spacing:-.05em;color:var(--tinta);text-wrap:balance}
.of-giro-l{display:block}
.of-giro-l+.of-giro-l{margin-top:.1em}
.of-giro-l.azul{color:var(--azul-texto)}
.of-giro .sc-split{padding:.14em 0 .18em;margin:-.14em 0 -.18em}

/* ---------- 4 · El contador ---------- */
.of-contador-escena{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px var(--pad) 100px;background:var(--fondo)}
/* Sin «position»: el motor la fija con .sc-stage (sticky), y sticky ya sirve de referencia para la etiqueta «Ejemplo».
   Sin script queda en su lugar, sin fijarse. */
.of-contador-escena:not(.sc-stage){position:relative}
.of-contador-t{margin-bottom:6px;font-size:clamp(26px,6.6vw,52px)}
.of-contador-cuerpo{display:grid;gap:16px;justify-items:center;width:100%;max-width:62rem;margin:0 auto}
.of-numero{position:relative;display:grid;place-items:center;width:min(300px,70vw,40svh);aspect-ratio:1;margin:0}
.of-anillo{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.of-anillo circle{fill:none;stroke-width:9;stroke-linecap:round}
.of-anillo-fondo{stroke:var(--linea)}
.of-anillo-lleno{stroke:var(--azul);stroke-dasharray:100 100;stroke-dashoffset:var(--of-falta,0);transition:stroke .3s ease}
.of-numero.gratis-aun .of-anillo-lleno{stroke:var(--verde)}
.of-numero-c{display:flex;flex-direction:column;align-items:center}
.of-numero-c p{margin:0}
.of-numero-rot{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.of-numero{container-type:inline-size}
.of-numero-n{font-family:var(--f-titulo);font-weight:800;font-size:clamp(64px,18vw,112px);font-size:31cqi;line-height:.9;letter-spacing:-.06em;
  color:var(--tinta);font-variant-numeric:tabular-nums}
.of-numero-p{position:relative;height:1.3em;min-width:6ch;font-family:var(--f-titulo);font-weight:800;font-size:clamp(22px,5.6vw,32px);letter-spacing:-.03em;line-height:1.3;text-align:center}
.of-numero-p span{position:absolute;left:50%;top:0;white-space:nowrap;transform:translateX(-50%);transition:opacity .3s ease,transform .3s ease}
.of-numero-p .gratis{color:var(--verde)}
.of-numero-p .dolar{color:var(--azul-texto)}
/* Sin script queda el final: 101 y «1 dólar». Con el script, la clase .gratis-aun manda. */
.of-numero-p .gratis{opacity:0;transform:translate(-50%,-.4em)}
.of-numero.gratis-aun .of-numero-p .gratis{opacity:1;transform:translate(-50%,0)}
.of-numero.gratis-aun .of-numero-p .dolar{opacity:0;transform:translate(-50%,.4em)}
.of-numero.cambio{animation:of-golpecito .5s var(--ease)}
@keyframes of-golpecito{0%{transform:scale(1)}30%{transform:scale(1.07)}100%{transform:scale(1)}}

.of-cola{display:grid;gap:8px;width:100%;max-width:26rem;margin:0;padding:0;list-style:none}
.of-msj{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;
  box-shadow:var(--sombra-chica);font-size:14px;line-height:1.25;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.of-msj b{font-weight:700}
.of-msj span{color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-msj i{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--verde-suave);color:var(--verde)}
.of-msj.pago i{background:var(--azul-suave);color:var(--azul-texto)}
html.of-vivo .of-msj.fuera{opacity:0;transform:translate3d(0,10px,0)}
@media (max-width:699px){
  /* En el celular entran de a dos: las anteriores se van. */
  html.of-vivo .of-msj.viejo{display:none}
}
.of-etiqueta{position:absolute;right:var(--pad);top:18px;border:1px solid var(--linea);background:#fff;color:var(--suave)}

/* ---------- 5 · Las soluciones ---------- */
.of-sols{margin:0;padding:0;list-style:none}
.of-sol{position:relative;display:grid;gap:4px;padding:16px 0 18px}
.of-sol::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linea-fuerte);transform-origin:left;transition:transform .8s var(--ease)}
.of-sol s{position:relative;justify-self:start;text-decoration:none;font-size:clamp(16px,4.2vw,19px);font-weight:600;color:#52525b}
.of-sol s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;border-radius:2px;background:var(--rojo);transform-origin:left;transition:transform .45s var(--ease) .15s}
.of-sol p{position:relative;margin:0;padding-left:1.2em;font-family:var(--f-titulo);font-weight:800;font-size:clamp(24px,6.2vw,44px);line-height:1.06;letter-spacing:-.035em;color:var(--tinta);text-wrap:balance;
  transition:clip-path .8s var(--ease) .45s}
.of-sol p::before{content:"";position:absolute;left:0;top:.3em;width:.62em;height:.62em;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.2l2 2 4-4.4'/%3E%3C/svg%3E") center/80% no-repeat}
html.of-vivo .of-sol:not(.visto)::before{transform:scaleX(0)}
html.of-vivo .of-sol:not(.visto) s::after{transform:scaleX(0)}
html.of-vivo .of-sol p{clip-path:inset(-.2em 0 -.3em 0)}
html.of-vivo .of-sol:not(.visto) p{clip-path:inset(-.2em 100% -.3em 0)}

/* ---------- 6 · La plataforma ---------- */
.of-plat{position:relative;display:grid;gap:14px;margin:6px 0 30px}
.of-plat-canales{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.of-plat-canales li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;background:#fff;box-shadow:var(--sombra-chica);font-size:13.5px;font-weight:600;
  transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 70ms)}
html.of-vivo .of-plat:not(.visto) .of-plat-canales li{opacity:0;transform:translate3d(-14px,0,0)}
.of-plat-flujo{display:none}
.of-bandeja{padding:14px;border-radius:22px;background:#fff;box-shadow:var(--sombra-flotante)}
.of-bandeja-cab{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;padding:0 4px 10px;border-bottom:1px solid var(--linea);font-size:14px}
.of-ia-on{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--verde)}
.of-ia-on i{width:8px;height:8px;border-radius:50%;background:var(--verde)}
.of-fila{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;margin:0;padding:9px 4px;border-radius:12px;font-size:14px;
  transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.3s + var(--i) * 140ms)}
.of-fila+.of-fila{border-top:1px solid var(--linea)}
.of-fila b{font-weight:700}
.of-fila span{color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-fila em{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.of-fila em.ok{background:var(--verde-suave);color:var(--verde)}
.of-fila em.eq{background:var(--azul-suave);color:var(--azul-texto)}
html.of-vivo .of-plat:not(.visto) .of-fila{opacity:0;transform:translate3d(0,10px,0)}
html.of-vivo .of-plat .of-ia-on i{animation:of-late 1.6s ease-in-out infinite}
html.of-vivo .of-plat.of-pausa .of-ia-on i,html.of-vivo .of-plat.of-pausa .of-plat-flujo i{animation-play-state:paused}
@keyframes of-late{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.45}}

.of-alcance{display:grid;gap:0;margin:0;padding:0;list-style:none}
.of-alcance li{padding:13px 0 14px;border-top:1px solid var(--linea-fuerte);font-size:15px;line-height:1.45;color:var(--suave);text-wrap:pretty}
.of-alcance b{display:block;font-family:var(--f-titulo);font-weight:800;font-size:17px;letter-spacing:-.015em;color:var(--tinta)}

/* ---------- 7 · La cuenta ---------- */
.of-calc{max-width:40rem;margin:0 auto;padding:28px 20px 22px;border-radius:24px;background:#fff;box-shadow:var(--sombra-tarjeta);text-align:center}
.of-calc .of-h2{margin-bottom:22px;font-size:clamp(26px,6.4vw,44px)}
.of-calc-l{display:block;font-size:14px;font-weight:600;color:var(--suave)}
.of-calc-v{margin:2px 0 8px;font-family:var(--f-titulo);font-weight:800;font-size:clamp(60px,17vw,104px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.of-rango{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--lleno:19%}
.of-rango::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,var(--tinta) var(--lleno),var(--linea) var(--lleno))}
.of-rango::-moz-range-track{height:8px;border-radius:999px;background:var(--linea)}
.of-rango::-moz-range-progress{height:8px;border-radius:999px;background:var(--tinta)}
.of-rango::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fff;border:3px solid var(--tinta);box-shadow:var(--sombra-chica);transition:transform .15s var(--ease)}
.of-rango:active::-webkit-slider-thumb{transform:scale(1.12)}
.of-rango::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--tinta)}
.of-rango:focus-visible{outline:2px solid var(--azul);outline-offset:4px;border-radius:12px}
.of-calc-r{margin:14px 0 0;font-size:17px;line-height:1.35;color:var(--texto)}
.of-calc-r b{font-family:var(--f-titulo);font-weight:800;font-size:1.5em;letter-spacing:-.03em;color:var(--tinta)}
.of-calc-r sup{font-size:.75em;color:var(--suave)}
.of-calc-nota{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--verde)}
.of-asterisco{margin:16px 0 0;font-size:11.5px;line-height:1.4;color:var(--tenue)}

/* ---------- 8 · Así arranca ---------- */
.of-pasos{margin:0;padding:0;list-style:none;display:grid;gap:0;counter-reset:of-paso}
.of-pasos li{position:relative;counter-increment:of-paso;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline;padding:16px 0}
.of-pasos li::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tinta);transform-origin:left;
  transition:transform .7s var(--ease);transition-delay:calc(var(--n) * 160ms)}
.of-pasos li:last-child::after{background:var(--azul)}
html.of-vivo .of-pasos:not(.visto) li::after{transform:scaleX(0)}
.of-pasos li::before{content:counter(of-paso);grid-row:span 2;font-family:var(--f-titulo);font-weight:800;font-size:clamp(44px,11vw,68px);line-height:.9;letter-spacing:-.05em;color:var(--tinta);
  transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.15s + var(--n) * 160ms)}
html.of-vivo .of-pasos:not(.visto) li::before{opacity:0;transform:translate3d(0,10px,0)}
.of-pasos h3{margin:0;font-family:var(--f-titulo);font-weight:800;font-size:clamp(21px,5.4vw,28px);letter-spacing:-.03em;line-height:1.1}
.of-pasos p{margin:4px 0 0;color:var(--suave);font-size:15px}
.of-pasos li:last-child::before,.of-pasos li:last-child h3{color:var(--azul-texto)}

/* ---------- 9 · Preguntas: la tarjeta de siempre ---------- */
.of #faq .tarjeta.de-preguntas{max-width:none}

/* ---------- 10 · Cierre: la página se invierte ---------- */
.of-cierre{position:relative;overflow:clip;margin-top:var(--aire-seccion);background:var(--tinta);color:#fff;padding:80px 0 84px;--sc-accent:#5b9bff}
.of-cierre-c{position:relative;z-index:3;text-align:center}
.of-cierre-n{position:absolute;left:50%;top:50%;margin:0;z-index:0;pointer-events:none;transform:translate(-50%,-50%);
  font-family:var(--f-titulo);font-weight:800;font-size:clamp(220px,66vw,600px);line-height:.8;letter-spacing:-.07em;color:#18181b}
.of-cierre-t,.of-cierre-p,.of-cierre-boton,.of-cierre-w{position:relative;z-index:1}
.of-cierre-t{margin:0 auto;max-width:13ch;font-family:var(--f-titulo);font-weight:800;font-size:clamp(36px,10vw,80px);line-height:1;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.of-cierre-p{margin:16px auto 24px;max-width:26rem;color:#d4d4d8;font-size:16px;text-wrap:balance}
.of-cierre-boton{max-width:24rem;margin:0 auto}
.of-cierre .btn{background:#fff;color:var(--tinta)}
@media (hover:hover){.of-cierre .btn:hover{background:#e7e5e4}}
.of-cierre-w{margin:16px 0 0}
.of-cierre-w .enlace{color:#fff}
.of-cierre .btn:focus-visible,.of-cierre-w .enlace:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- Compu ---------- */
@media (min-width:700px){
  .of-inicio{padding:150px 0 140px;min-height:calc(100svh - 120px)}
  .of-globo{font-size:15px;padding:12px 17px 11px}
  .of-globo.g1{left:7%;top:36px}
  .of-globo.g2{right:7%;top:70px}
  .of-globo.g3{display:flex;right:10%;left:auto;bottom:42px;transform:translate3d(calc(var(--of-sube,0) * .06px),calc(var(--of-sube,0) * .32px),0) rotate(-1.5deg)}
  .of-dolores-escena,.of-contador-escena{padding:28px 32px 100px}
  .of-dolores-cuerpo{grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:56px;max-width:58rem}
  .of-cel{width:270px;height:min(460px,58svh)}
  .of-dolor-lista{gap:14px;max-width:none}
  .of-contador-cuerpo{grid-template-columns:auto minmax(0,26rem);align-items:center;justify-content:center;gap:56px}
  .of-numero{width:min(340px,48svh)}
  .of-sol{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:baseline;column-gap:28px;padding:22px 0 24px}
  .of-plat{grid-template-columns:auto 90px minmax(0,1fr);align-items:center;gap:0;margin-bottom:40px}
  .of-plat-canales{flex-direction:column;flex-wrap:nowrap}
  .of-plat-flujo{display:grid;gap:0;height:100%;align-content:center;position:relative}
  .of-plat-flujo i{position:relative;display:block;height:40px}
  .of-plat-flujo i::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--linea-fuerte)}
  .of-plat-flujo i::after{content:"";position:absolute;left:0;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--azul);opacity:0}
  html.of-vivo .of-plat.visto .of-plat-flujo i::after{animation:of-viaja 2.4s var(--ease) infinite;animation-delay:calc(var(--i) * .45s)}
  html.of-vivo .of-plat.of-pausa .of-plat-flujo i::after{animation-play-state:paused}
  .of-alcance{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
  .of-calc{padding:40px 44px 28px}
  .of-pasos{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
  .of-pasos li{grid-template-columns:1fr;padding-top:20px}
  .of-pasos li::before{grid-row:auto;margin-bottom:12px}
  .of-cierre{padding:120px 0}
}
@keyframes of-viaja{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(84px);opacity:0}}
@media (min-width:700px) and (max-width:959px){
  .of-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-alcance{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .of-cien{transform:translate(-50%,-50%) !important}
  .of-globo,.of-inicio-c{transform:none !important;animation:none !important}
  .of-globo.g1{transform:rotate(-3deg) !important}
  .of-globo.g2{transform:rotate(2.5deg) !important}
  .of-globo .of-ok{animation:none !important}
  .of-numero.cambio{animation:none}
}