/* AVANTIA DIGITAL — páginas de oferta (/noviembre e /ia)
   Se carga después de site.css y solo añade lo que esas páginas necesitan:
   cabecera con contador, plazas, lista de entregables y formulario. */

[hidden]{display:none!important}

/* ---------- cabecera de oferta ---------- */
.of-cab{padding:calc(64px + clamp(32px,5vw,72px)) 0 clamp(40px,6vw,80px);position:relative;overflow:clip}
.of-cab::before{content:"";position:absolute;right:-20%;top:-10%;width:min(900px,110vw);aspect-ratio:1;
  background:radial-gradient(closest-side,oklch(0.64 0.205 38 / .13),transparent);pointer-events:none}
.of-cab > *{position:relative}
.of-grid{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.of-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.of-evento{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:clamp(20px,3vw,32px)}
.of-cab h1{font-size:clamp(52px,6.4vw,96px);font-stretch:66%;line-height:.86}
/* titular de tres frases (Black November): cada frase en su línea */
.of-cab h1.h-largo{font-size:clamp(40px,5.2vw,80px);line-height:.95}
.h-largo > span,.h-largo > em{display:block}
.black-sello{color:var(--naranja-claro);letter-spacing:.34em}
.incluye .visto{display:block;margin-top:8px;font-family:var(--f-display);font-weight:700;font-stretch:78%;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-2)}
.incluye .visto a{color:var(--hueso);text-decoration:none;box-shadow:inset 0 -1px 0 var(--linea)}
@media (hover:hover){.incluye .visto a:hover{color:var(--naranja-claro)}}

/* urgencia en una línea junto al titular: en móvil el panel queda bajo el pliegue */
.urg-linea{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:18px;font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--naranja-claro)}
.urg-linea span + span::before{content:"·";margin-right:14px;color:var(--gris-2)}
@media (min-width:980px){.urg-linea{display:none}}
.of-cab h1 em{font-style:normal;color:var(--naranja)}
.of-cab .lead{margin-top:clamp(20px,2.6vw,30px)}
.of-cab .hero-ctas{margin-top:28px}

/* ---------- panel de urgencia: plazas + cuenta atrás ---------- */
.urgencia{
  border-radius:var(--radio);background:var(--tinta-2);padding:clamp(20px,2.4vw,28px);
  box-shadow:0 0 0 1px var(--linea),0 30px 60px -30px oklch(0 0 0 / .9);
}
.urgencia .etq{color:var(--gris)}
.plazas-num{display:flex;align-items:baseline;gap:12px;margin:8px 0 14px}
.plazas-num b{font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:clamp(72px,8vw,104px);line-height:.8;color:var(--naranja);font-variant-numeric:tabular-nums}
.plazas-num span{font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:clamp(20px,2vw,26px);text-transform:uppercase;line-height:1}
.plazas-barra{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.plazas-barra i{height:10px;border-radius:2px;background:var(--naranja)}
.plazas-barra i.ocupada{background:var(--tinta-3);box-shadow:inset 0 0 0 1px var(--linea)}
.cuenta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid var(--linea)}
.cuenta div{text-align:center}
.cuenta b{display:block;font-family:var(--f-display);font-weight:900;font-stretch:68%;font-size:clamp(34px,3.6vw,46px);line-height:1;font-variant-numeric:tabular-nums}
.cuenta small{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.urgencia-pie{margin-top:16px;font-size:14px;color:var(--gris)}
.urgencia-pie b{color:var(--hueso);font-weight:500}
.urgencia.cerrada .plazas-num b{color:var(--gris)}

/* ---------- qué incluye ---------- */
.incluye{list-style:none;display:grid;gap:0 clamp(32px,5vw,80px);grid-template-columns:1fr;border-top:1px solid var(--linea);counter-reset:inc}
@media (min-width:760px){.incluye{grid-template-columns:1fr 1fr}}
.incluye li{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;padding:24px 0;border-bottom:1px solid var(--linea);counter-increment:inc}
.incluye li::before{content:counter(inc,decimal-leading-zero);grid-row:span 2;font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:40px;line-height:.85;color:var(--naranja)}
.incluye h3{font-size:clamp(22px,2.2vw,28px)}
.incluye p{color:var(--gris);font-size:16px}
.entregable{margin-top:clamp(32px,4vw,48px);display:grid;gap:14px 48px;padding:clamp(22px,3vw,32px);border-radius:var(--radio);background:var(--naranja-velo);box-shadow:inset 0 0 0 1px oklch(0.64 0.205 38 / .35)}
@media (min-width:980px){.entregable{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center}}
.entregable h3{font-size:clamp(26px,3vw,40px);font-stretch:70%;font-weight:900}
.entregable p{color:var(--gris);font-size:16.5px}
.entregable p b{color:var(--hueso);font-weight:500}

@media (min-width:1100px){.pasos.tres{grid-template-columns:repeat(3,1fr)}}

/* ---------- por qué solo 10 ---------- */
.porque{display:grid;gap:24px 64px}
@media (min-width:980px){.porque{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.porque .texto-caso{font-size:clamp(18px,1.7vw,21px)}

/* ---------- pruebas: trabajos reales en pequeño ---------- */
.pruebas{display:grid;gap:var(--gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.pruebas .pieza .marco-nav .pantalla{aspect-ratio:16/11}
@media (max-width:759px){.pruebas{grid-template-columns:1fr 1fr}.pruebas .pieza:last-child{display:none}}

/* ---------- formulario ---------- */
.of-form-sec{scroll-margin-top:64px}
.of-form-grid{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:980px){.of-form-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.of-form-intro h2{margin-bottom:.35em}
.of-form-intro .lead{max-width:30em}
.of-form-intro ul{list-style:none;margin-top:24px;display:grid;gap:10px}
.of-form-intro li{display:flex;gap:12px;color:var(--gris);font-size:16px}
.of-form-intro li::before{content:"";flex-shrink:0;width:16px;height:2px;background:var(--naranja);margin-top:.8em}
.of-form-intro li b{color:var(--hueso);font-weight:500}

.form{
  display:grid;gap:18px;padding:clamp(20px,3vw,36px);border-radius:var(--radio);
  background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea),0 40px 80px -40px oklch(0 0 0 / .95);
}
.form .doble{display:grid;gap:18px}
@media (min-width:600px){.form .doble{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:8px;min-width:0}
.campo > label,.campo > legend{font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.campo .opc{color:var(--gris-2);letter-spacing:.04em;text-transform:none;font-family:var(--f-texto);font-weight:400}
fieldset.campo{border:0;padding:0;margin:0}
fieldset.campo > legend{margin-bottom:8px}
.form input[type=text],.form input[type=tel],.form input[type=email],.form select,.form textarea{
  width:100%;min-height:52px;padding:14px 16px;border-radius:4px;border:0;
  background:var(--tinta);color:var(--hueso);font:inherit;font-size:16px;line-height:1.4;
  box-shadow:inset 0 0 0 1px var(--linea);transition:box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.form textarea{min-height:104px;resize:vertical}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.form ::placeholder{color:var(--gris-2)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--naranja)}
.form input[aria-invalid=true],.form select[aria-invalid=true],.form textarea[aria-invalid=true]{box-shadow:inset 0 0 0 2px oklch(0.68 0.19 25)}
.form fieldset[aria-invalid=true] .chips span{box-shadow:inset 0 0 0 1px oklch(0.68 0.19 25)}
.error-campo{font-size:13.5px;color:oklch(0.78 0.13 30);min-height:0}
.error-campo:empty{display:none}

/* chips de opción (sector, equipo) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;
  font-family:var(--f-display);font-weight:700;font-stretch:84%;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px var(--linea);color:var(--gris);transition:background-color .2s,color .2s,box-shadow .2s;
  user-select:none;-webkit-user-select:none;
}
.chips input:checked + span{background:var(--hueso);color:var(--tinta);box-shadow:none}
.chips input:focus-visible + span{outline:2px solid var(--naranja);outline-offset:3px}
@media (hover:hover){.chips label:hover span{color:var(--hueso);box-shadow:inset 0 0 0 1px var(--hueso)}.chips input:checked + span{color:var(--tinta)}}

.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14px;color:var(--gris);line-height:1.5}
.consent input{width:22px;height:22px;margin-top:1px;accent-color:var(--naranja)}
.consent a{color:var(--hueso)}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;margin-top:4px;border:0;cursor:pointer;font-size:17px;min-height:58px}
.form .btn[disabled]{opacity:.6;cursor:progress}
.form-nota{font-size:13.5px;color:var(--gris);text-align:center}
.form-error{padding:14px 16px;border-radius:4px;background:oklch(0.68 0.19 25 / .12);box-shadow:inset 0 0 0 1px oklch(0.68 0.19 25 / .45);font-size:15px}
.form-error a{color:var(--hueso);font-weight:500}

/* confirmación */
.gracias{display:none;text-align:left;padding:clamp(24px,3.4vw,40px);border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea)}
.gracias h3{font-size:clamp(34px,4vw,52px);font-stretch:68%;font-weight:900;margin:14px 0 12px}
.gracias p{color:var(--gris);font-size:16.5px;max-width:34em}
.gracias p b{color:var(--hueso);font-weight:500}
.gracias .btn{margin-top:22px}
.enviado .form{display:none}
.enviado .gracias{display:block}
@media (prefers-reduced-motion:no-preference){.enviado .gracias{animation:asomar .6s var(--ease-out) both}}
@keyframes asomar{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- enlace cruzado entre ofertas ---------- */
.cruce{display:grid;gap:10px;text-decoration:none;padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--linea-suave)}
.cruce .titular{font-size:clamp(36px,6vw,84px);transition:color .25s}
.cruce p{color:var(--gris);max-width:36em}
.cruce .tras{display:inline-flex;align-items:center;gap:10px;color:var(--hueso);font-family:var(--f-display);font-weight:700;font-stretch:84%;text-transform:uppercase;letter-spacing:.05em}
.cruce .tras svg{width:28px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .35s var(--ease-out)}
@media (hover:hover){.cruce:hover .titular{color:var(--naranja)}.cruce:hover .tras svg{transform:translateX(6px)}}

/* ---------- /ia: lo que ya funciona vs lo que montamos ---------- */
.sistemas{list-style:none;display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:760px){.sistemas{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.sistemas{grid-template-columns:repeat(3,1fr)}}
.sistemas li{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea)}
.sistemas h3{font-size:clamp(21px,2vw,26px)}
.sistemas p{color:var(--gris);font-size:15.5px}
.sistemas .sello{margin-top:auto;padding-top:6px}
.sistemas a{color:var(--hueso)}

/* barra móvil: en ofertas lleva al formulario, no a WhatsApp */
.barra-cta .btn svg{fill:none;stroke:currentColor;stroke-width:2}

/* =====================================================================
   MOVIMIENTO DE CAMPAÑA — se ve una vez por visita: aquí vive el impacto.
   Solo transform / opacity / clip-path. Con reduced-motion, site.css deja
   todas las animaciones en su estado final al instante.
   ===================================================================== */

/* ---------- intro Black November (una vez por sesión, se salta con un toque) ---------- */
.intro{display:none}
.con-intro body{overflow:hidden}
.con-intro .intro{
  display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2vw,24px);
  position:fixed;inset:0;z-index:2000;padding:0 var(--pad);background:var(--tinta);
  clip-path:inset(0 0 0 0);cursor:pointer;
}
.intro .gigante{font-family:var(--f-display);font-weight:900;font-stretch:62%;text-transform:uppercase;line-height:.82;font-size:clamp(64px,min(21vw,30vh),330px);letter-spacing:-.01em;white-space:nowrap}
.intro .fila{display:block;clip-path:inset(-.1em -.3em 0 -.3em)}
.intro .fila + .fila{color:var(--naranja)}
.intro .letra{display:inline-block;animation:caer .6s var(--ease-out) calc(.05s + var(--n) * 38ms) both}
.intro .raya{height:clamp(4px,.6vw,8px);width:min(100%,1100px);background:var(--naranja);transform-origin:left;animation:trazar .55s var(--ease-out) .6s both}
.intro .bajo{font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(15px,1.6vw,20px);color:var(--gris);animation:asomar .5s var(--ease-out) .75s both}
.intro.fuera{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-in-out)}
@keyframes caer{from{transform:translateY(105%)}to{transform:none}}
@keyframes trazar{from{transform:scaleX(0)}to{transform:none}}

/* ---------- foco que sigue al ratón en la cabecera ---------- */
.of-cab > .foco{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  background:radial-gradient(closest-side,oklch(0.64 0.205 38 / .2),transparent);pointer-events:none;opacity:0;transition:opacity .5s ease;will-change:transform}
.of-cab > .foco.activo{opacity:1}

/* ---------- titular: frases que suben y una que cae como un sello ---------- */
.slam .l{display:block;clip-path:inset(-.3em -.2em -.08em -.2em)}
.slam .impacto{clip-path:none}
.slam .li{display:inline-block}
.slam .impacto .li{transform-origin:0 70%}

@media (prefers-reduced-motion:no-preference){
  .slam .l .li{animation:subir .8s var(--ease-out) calc(.1s + var(--i) * 110ms) both}
  .slam .impacto .li{animation:estampar .62s var(--ease-out) .4s both}
  .of-cab .of-grid{animation:sacudir .42s linear .74s both}
  .of-cab::after{
    content:"";position:absolute;left:-30vw;top:-10%;width:130vw;height:130%;pointer-events:none;
    background:radial-gradient(closest-side,oklch(0.64 0.205 38 / .32),transparent 70%);
    opacity:0;animation:destello 1.1s var(--ease-out) .74s both;
  }
  .of-cab .urg-linea{animation:asomar .6s var(--ease-out) .9s both}
  .of-cab .lead{animation:asomar .7s var(--ease-out) .98s both}
  .of-cab .hero-ctas{animation:asomar .7s var(--ease-out) 1.06s both}
  .of-cab .letra-peq{animation:asomar .7s var(--ease-out) 1.14s both}
  .of-cab .urgencia{animation:entrar-panel .9s var(--ease-out) .95s both}
  .plazas-barra i{animation:encender .45s var(--ease-out) calc(1.3s + var(--n, 0) * 60ms) both;transform-origin:left}
  .plazas-num b{display:inline-block;transform-origin:0 100%;animation:estampar .55s var(--ease-out) 1.95s both}

  /* todo espera a que termine la intro (o a que cargue el script) */
  .espera .slam .li,.espera .of-cab .of-grid,.espera .of-cab::after,.espera .of-cab .urg-linea,.espera .of-cab .lead,
  .espera .of-cab .hero-ctas,.espera .of-cab .letra-peq,.espera .of-cab .urgencia,.espera .plazas-barra i,.espera .plazas-num b{animation-play-state:paused}

  @keyframes estampar{
    0%{opacity:0;transform:scale(1.9) rotate(-5deg)}
    55%{opacity:1;transform:scale(.97) rotate(0)}
    100%{opacity:1;transform:none}
  }
  @keyframes sacudir{
    0%,100%{transform:none}
    14%{transform:translate3d(-8px,5px,0)}
    28%{transform:translate3d(7px,-6px,0)}
    42%{transform:translate3d(-5px,3px,0)}
    58%{transform:translate3d(3px,-2px,0)}
    76%{transform:translate3d(-1px,1px,0)}
  }
  @keyframes destello{0%{opacity:0;transform:scale(.7)}18%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
  @keyframes entrar-panel{from{opacity:0;transform:translate3d(48px,0,0) rotate(2deg)}to{opacity:1;transform:none}}
  @keyframes encender{from{opacity:.15;transform:scaleX(.12)}to{opacity:1;transform:none}}
}

/* ---------- cintas cruzadas ---------- */
.cintas{position:relative;height:clamp(190px,26vw,320px);overflow:clip;pointer-events:none}
.cinta{position:absolute;left:-6%;width:112%;top:50%;padding:clamp(10px,1.3vw,18px) 0;overflow:hidden}
.cinta-a{background:var(--naranja);color:oklch(0.12 0.01 40);transform:translateY(-30%) rotate(-7deg);z-index:1}
.cinta-b{background:var(--hueso);color:var(--tinta);transform:translateY(-70%) rotate(6deg)}
.pista{display:flex;width:max-content}
.pista span{font-family:var(--f-display);font-weight:900;font-stretch:64%;text-transform:uppercase;line-height:1;
  font-size:clamp(30px,4.6vw,68px);white-space:nowrap;padding:0 .35em}
.pista span::after{content:"✦";display:inline-block;margin-left:.7em;font-size:.6em;vertical-align:.2em}
@media (prefers-reduced-motion:no-preference){
  .cinta-a .pista{animation:desfilar 26s linear infinite}
  .cinta-b .pista{animation:desfilar 34s linear infinite reverse}
  @keyframes desfilar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}

/* ---------- titulares que se revelan y listas escalonadas (las clases las pone oferta.js) ---------- */
.js .revela{clip-path:inset(0 0 100% 0);transform:translateY(.3em)}
.js .revela.en-vista{clip-path:inset(-.3em -.3em -.3em -.3em);transform:none;transition:clip-path .9s var(--ease-out),transform .9s var(--ease-out)}
.js .escalona{opacity:0;transform:translateY(28px)}
.js .escalona.en-vista{opacity:1;transform:none;transition:opacity .6s var(--ease-out) calc(var(--n) * 70ms),transform .75s var(--ease-out) calc(var(--n) * 70ms)}

/* ---------- el 10 gigante de "por qué solo 10" ---------- */
.porque-sec{position:relative;overflow:clip}
.porque-sec .envoltorio{position:relative;z-index:1}
.diez-fondo{position:absolute;right:-6vw;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;
  font-family:var(--f-display);font-weight:900;font-stretch:62%;line-height:.8;font-size:clamp(300px,52vw,760px);
  color:transparent;-webkit-text-stroke:2px oklch(0.64 0.205 38 / .4)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .diez-fondo{animation:deriva-diez linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes deriva-diez{from{transform:translateY(-15%) rotate(-8deg)}to{transform:translateY(-85%) rotate(5deg)}}
  }
}

/* ---------- botón principal: brillo que lo cruza ---------- */
.brillo{position:relative;overflow:hidden;isolation:isolate}
.brillo::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,oklch(1 0 0 / .5),transparent);transform:translateX(-150%) skewX(-20deg)}
@media (prefers-reduced-motion:no-preference){
  .brillo::after{animation:barrido 3.8s var(--ease-in-out) 2.2s infinite}
  @keyframes barrido{0%{transform:translateX(-150%) skewX(-20deg)}32%,100%{transform:translateX(360%) skewX(-20deg)}}
}

/* ---------- confirmación: el título cae como sello ---------- */
@media (prefers-reduced-motion:no-preference){
  .enviado .gracias h3{animation:estampar .6s var(--ease-out) .12s both;transform-origin:0 70%}
}
.chispa{position:fixed;z-index:1500;pointer-events:none;border-radius:1px}

/* ---------- /ia: tarjetas que se inclinan hacia el ratón ---------- */
@media (hover:hover) and (pointer:fine){
  .sistemas li{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  .sistemas li:hover{box-shadow:0 0 0 1px oklch(0.64 0.205 38 / .55),0 30px 60px -30px oklch(0 0 0 / .9)}
}
.descifrando{font-variant-numeric:tabular-nums}

/* ---------- táctil: respuesta al toque (casi todo el tráfico llega por QR) ---------- */
@media (hover:none){
  .btn{transition:transform .16s var(--ease-out),background-color .2s,color .2s}
  .btn:active{transform:scale(.97)}
  .chips label:active span{transform:scale(.96);transition:transform .12s var(--ease-out)}
}

/* ---------- /ia: ejemplos con mini demo que se escribe sola al entrar ---------- */
.sistemas.grande li{gap:12px;padding:16px 16px 20px}
.demo{display:grid;gap:7px;align-content:start;min-height:212px;padding:12px;border-radius:8px;background:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--linea-suave);font-family:var(--font-ui);font-size:13px;line-height:1.4;margin-bottom:6px}
.demo-cab{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);padding-bottom:6px;border-bottom:1px solid var(--linea-suave)}
.punto-vivo{width:7px;height:7px;border-radius:50%;background:var(--vivo);box-shadow:0 0 0 3px oklch(0.78 0.17 150 / .18)}
.demo .ln{margin:0;padding:7px 10px;border-radius:10px;max-width:92%;color:var(--hueso)}
.demo .ln small{display:block;font-size:10.5px;font-weight:600;color:var(--gris);margin-bottom:1px}
.demo .cli{background:var(--tinta-3);justify-self:start}
.demo .ia{background:oklch(0.64 0.205 38 / .16);box-shadow:inset 0 0 0 1px oklch(0.64 0.205 38 / .4);justify-self:end}
.demo .hito{background:transparent;padding:2px 0;max-width:100%;color:var(--gris);display:flex;gap:10px}
.demo .hito small{display:inline;min-width:36px;font-variant-numeric:tabular-nums;color:var(--naranja-claro);margin:0}
.demo .etq-ln{background:var(--tinta-3);max-width:100%;display:flex;gap:10px;align-items:baseline}
.demo .etq-ln small{display:inline;min-width:52px;margin:0;color:var(--hueso);text-transform:uppercase;letter-spacing:.05em}
.demo .etq-ln.alta small{color:oklch(0.78 0.13 30)}
.demo .ok{background:oklch(0.78 0.17 150 / .12);box-shadow:inset 0 0 0 1px oklch(0.78 0.17 150 / .35);color:oklch(0.86 0.12 150);max-width:100%;font-weight:600}
.demo .ok::before{content:"✓ "}
.demo .fuente{padding:0;color:var(--gris-2);font-size:11.5px;justify-self:end}
@media (min-width:760px){.sistemas.grande{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.sistemas.grande{grid-template-columns:repeat(3,1fr)}}

.js .escalona .demo .ln{opacity:0;transform:translateY(10px) scale(.98)}
.js .escalona.en-vista .demo .ln{opacity:1;transform:none;transition:opacity .4s var(--ease-out) calc(.35s + var(--k) * 520ms),transform .5s var(--ease-out) calc(.35s + var(--k) * 520ms)}
.js .escalona.en-vista .demo .ok{transition-duration:.3s,.45s}

/* =====================================================================
   FUNNEL: formulario en la cabecera y bloques que convencen hacia él
   ===================================================================== */
.ventajas{list-style:none;display:grid;gap:10px;margin-top:22px}
.ventajas li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:clamp(16px,1.4vw,18px);color:var(--gris);line-height:1.4}
.ventajas li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:var(--naranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140b06' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.ventajas b{color:var(--hueso);font-weight:500}

/* tarjeta del formulario */
.form-card{scroll-margin-top:80px;border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea),0 40px 80px -40px oklch(0 0 0 / .95);overflow:hidden}
.fc-cab{padding:14px clamp(18px,2.6vw,28px);background:oklch(0.64 0.205 38 / .12);border-bottom:1px solid oklch(0.64 0.205 38 / .3);display:grid;gap:10px}
.fc-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fc-plazas{font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.fc-plazas b{font-weight:900;font-size:30px;font-stretch:62%;color:var(--naranja);margin-right:4px;display:inline-block;transform-origin:0 100%}
.mini-cuenta{display:flex;gap:6px;font-family:var(--f-display);font-weight:800;font-stretch:72%;font-variant-numeric:tabular-nums;font-size:18px}
.mini-cuenta span{display:inline-flex;align-items:baseline;gap:2px}
.mini-cuenta b{display:inline-block;min-width:1.15em;text-align:right}
.mini-cuenta small{font-size:11px;color:var(--gris);font-weight:600}
.fc-cab .plazas-barra i{height:6px}
.fc-extra{font-size:13.5px;color:var(--gris)}
.fc-extra b{color:var(--hueso);font-weight:500}
.form-card .form{box-shadow:none;border-radius:0;background:transparent;gap:14px;padding:clamp(18px,2.6vw,28px)}
.form-card .form-tit{font-family:var(--f-display);font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(26px,2.6vw,34px);line-height:.95}
.form-card .gracias{box-shadow:none;border-radius:0;background:transparent}
.form-2{display:none!important}
.paso2 .form-1{display:none!important}
.paso2 .form-2{display:grid!important}
.enviado .form-2{display:none!important}
.saltar{background:none;border:0;color:var(--gris);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;justify-self:center;padding:6px}
@media (prefers-reduced-motion:no-preference){.paso2 .form-2{animation:asomar .5s var(--ease-out) both}}
@media (min-width:980px){.of-cab .form-card{align-self:start}}

/* botón que sube al formulario al final de cada bloque */
.cta-bloque{margin-top:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.cta-bloque span{font-size:14px;color:var(--gris)}

/* agitación + calculadora */
.agita{display:grid;gap:28px 64px}
@media (min-width:980px){.agita{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.agita .texto-caso + .texto-caso{margin-top:1em}
.calc{border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea);padding:clamp(20px,3vw,32px);display:grid;gap:20px}
.calc .etq{color:var(--gris)}
.deslizador{display:grid;gap:8px}
.deslizador label{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--gris)}
.deslizador output{font-family:var(--f-display);font-weight:900;font-stretch:70%;font-size:22px;color:var(--hueso);line-height:1;font-variant-numeric:tabular-nums}
.deslizador input{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0;touch-action:pan-y}
.deslizador input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--naranja) var(--p,50%),var(--tinta-3) var(--p,50%))}
.deslizador input::-moz-range-track{height:6px;border-radius:3px;background:var(--tinta-3)}
.deslizador input::-moz-range-progress{height:6px;border-radius:3px;background:var(--naranja)}
.deslizador input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;margin-top:-11px;background:var(--hueso);box-shadow:0 0 0 4px oklch(0.64 0.205 38 / .35),0 4px 12px oklch(0 0 0 / .5)}
.deslizador input::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:var(--hueso);box-shadow:0 0 0 4px oklch(0.64 0.205 38 / .35)}
.resultado{padding-top:18px;border-top:1px solid var(--linea)}
.resultado .cifra{display:block;font-family:var(--f-display);font-weight:900;font-stretch:62%;line-height:.85;font-size:clamp(64px,9vw,112px);color:var(--naranja);font-variant-numeric:tabular-nums}
.resultado p{margin-top:8px;color:var(--gris);font-size:15.5px}
.resultado p b{color:var(--hueso);font-weight:500}

/* comparativa de opciones */
.opciones{list-style:none;display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:760px){.opciones{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.opciones{grid-template-columns:repeat(4,1fr)}}
.opciones li{padding:22px;border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea);display:grid;gap:10px;align-content:start}
.opciones h3{font-size:clamp(21px,2vw,26px)}
.opciones .pega{color:var(--gris);font-size:15px}
.opciones .pega::before{content:"✕ ";color:oklch(0.72 0.15 28);font-weight:700}
.opciones .nuestra{background:var(--naranja);color:oklch(0.12 0.01 40);box-shadow:none}
.opciones .nuestra .pega{color:oklch(0.12 0.01 40)}
.opciones .nuestra .pega::before{content:"✓ ";color:oklch(0.12 0.01 40)}
.opciones .nuestra .sello{color:oklch(0.12 0.01 40)}

/* para quién es / no es */
.para{display:grid;gap:var(--gap)}
@media (min-width:760px){.para{grid-template-columns:1fr 1fr}}
.para > div{padding:clamp(20px,3vw,32px);border-radius:var(--radio);box-shadow:0 0 0 1px var(--linea)}
.para h3{font-size:clamp(24px,2.6vw,34px);font-stretch:70%;font-weight:900;margin-bottom:14px}
.para ul{list-style:none;display:grid;gap:10px}
.para li{color:var(--gris);font-size:16px;padding-left:26px;position:relative}
.para li::before{position:absolute;left:0;font-weight:700}
.para .si li::before{content:"✓";color:var(--vivo)}
.para .no li::before{content:"✕";color:oklch(0.72 0.15 28)}
.para .no{background:oklch(0.13 0.004 55)}

/* cierre con el 10 gigante */
.final{position:relative;overflow:clip;text-align:left}
.final .envoltorio{position:relative;z-index:1}
.final h2{max-width:14ch}
.final .lead{margin-bottom:28px}
.final .diez-fondo{right:-8vw}

/* cabecera del funnel: en móvil el formulario va justo después del titular */
.of-intro{order:1}.of-cab .form-card{order:2}.of-mas{order:3}
.of-mas .lead{margin-top:0}
@media (min-width:980px){
  .of-cab .of-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"intro form" "mas form";align-items:start;row-gap:28px}
  .of-intro{grid-area:intro}.of-mas{grid-area:mas}.of-cab .form-card{grid-area:form}
}
@media (max-width:979px){.of-cab .of-grid{gap:24px}.of-cab{padding-bottom:40px}}
.resultado .cuenta-txt{margin:0 0 10px;font-size:14.5px;color:var(--gris)}
.resultado .cuenta-txt b{color:var(--hueso);font-weight:500}
/* con cuatro ejemplos, rejilla de 2×2 en escritorio */
@media (min-width:1100px){.sistemas.grande{grid-template-columns:1fr 1fr}}

/* ---------- ventaja Black November: precio congelado ---------- */
.congela{display:grid;gap:28px 64px}
@media (min-width:980px){.congela{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}}
.congela h2{margin-top:14px}
.congela-tarjeta{padding:clamp(20px,3vw,32px);border-radius:var(--radio);background:var(--naranja-velo);box-shadow:inset 0 0 0 1px oklch(0.64 0.205 38 / .45)}
.congela-cifra{font-family:var(--f-display);font-weight:900;font-stretch:62%;line-height:.85;font-size:clamp(64px,9vw,112px);color:var(--naranja);font-variant-numeric:tabular-nums;margin-bottom:18px}
.congela-cifra span{color:var(--hueso)}
.congela-tarjeta ul{list-style:none;display:grid;gap:10px}
.congela-tarjeta li{position:relative;padding-left:22px;font-size:15.5px;color:var(--gris)}
.congela-tarjeta li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--naranja)}
.congela-tarjeta li b{color:var(--hueso);font-weight:500}
.fc-extra a{color:var(--hueso)}

/* ---------- escalera Black November ---------- */
.escalera{list-style:none;display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:980px){.escalera{grid-template-columns:1.15fr 1fr 1fr;align-items:stretch}}
.escalon{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea);transition:opacity .4s ease}
.escalon.top{background:var(--naranja);color:oklch(0.12 0.01 40);box-shadow:0 30px 70px -30px oklch(0.64 0.205 38 / .8)}
.escalon.top .sello,.escalon.top .sello b{color:oklch(0.12 0.01 40)}
.esc-cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.esc-estado{font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.04em;font-size:14px;padding:5px 10px;border-radius:999px;background:oklch(0.12 0.01 40);color:var(--hueso)}
.esc-estado b{color:var(--naranja-claro)}
.escalon h3{font-size:clamp(24px,2.4vw,32px);font-stretch:70%;font-weight:900}
.escalon ul{list-style:none;display:grid;gap:7px}
.escalon ul li{padding-left:24px;position:relative;font-size:15.5px}
.escalon ul li::before{content:"✓";position:absolute;left:0;font-weight:700;color:var(--naranja)}
.escalon.top ul li::before{color:oklch(0.12 0.01 40)}
.escalon:not(.top) ul li{color:var(--gris)}
.escalon:not(.top) ul li b{color:var(--hueso);font-weight:500}
.esc-reloj{margin-top:auto;padding-top:12px;border-top:1px solid var(--linea);font-size:14px;color:var(--gris);font-variant-numeric:tabular-nums}
.esc-reloj b{color:var(--hueso);font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:16px}
.escalon.top .esc-reloj{border-color:oklch(0.12 0.01 40 / .25);color:oklch(0.12 0.01 40)}
.escalon.top .esc-reloj b{color:oklch(0.12 0.01 40)}
.esc-letra{margin-top:18px;font-size:13.5px;color:var(--gris);max-width:60em}
.esc-letra b{color:var(--hueso);font-weight:500}
/* escalón caducado o agotado: tachado y apagado */
.escalon.caducado{opacity:.45;background:var(--tinta-2);color:var(--gris);box-shadow:0 0 0 1px var(--linea-suave)}
.escalon.caducado h3,.escalon.caducado ul{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:oklch(0.72 0.15 28)}
.escalon.caducado .esc-reloj{color:oklch(0.78 0.13 30);font-weight:600}
.escalon.top.caducado{box-shadow:0 0 0 1px var(--linea-suave)}
.escalon.top.caducado .sello,.escalon.top.caducado .sello b,.escalon.top.caducado ul li::before{color:var(--gris-2)}
.escalon.caducado .esc-estado{display:none}
.escalon.top.caducado .esc-reloj{border-color:var(--linea)}

/* =====================================================================
   HOME Y CASOS: resultados, Método REAL y paquetes
   ===================================================================== */

/* ---------- resultados: cifras, no capturas ---------- */
.resultados{list-style:none;display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:760px){.resultados{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.resultados{grid-template-columns:repeat(4,1fr)}}
.res{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea);text-decoration:none;color:inherit;transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
.res-cifra{font-family:var(--f-display);font-weight:900;font-stretch:62%;line-height:.85;font-size:clamp(64px,8vw,104px);color:var(--naranja);font-variant-numeric:tabular-nums}
.res-que{font-family:var(--f-display);font-weight:800;font-stretch:78%;text-transform:uppercase;font-size:17px;line-height:1.1}
.res-antes{font-size:15px;color:var(--gris)}
.res-antes b{color:var(--hueso);font-weight:500}
.res-fuente{margin-top:auto;padding-top:12px;border-top:1px solid var(--linea);font-size:12.5px;color:var(--gris-2)}
.res .ver{font-family:var(--f-display);font-weight:700;font-stretch:84%;text-transform:uppercase;letter-spacing:.05em;font-size:13.5px;color:var(--hueso)}
@media (hover:hover) and (pointer:fine){.res:hover{box-shadow:0 0 0 1px oklch(0.64 0.205 38 / .6);transform:translateY(-3px)}}
/* mientras no haya cifra real: hueco visible para no publicar por error */
.res.pendiente .res-cifra{color:var(--gris-2);font-size:clamp(40px,5vw,60px)}
.res.pendiente .pendiente-aviso{display:inline-block;width:fit-content;padding:4px 10px;border-radius:999px;font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.05em;font-size:12px;background:oklch(0.68 0.19 25 / .18);color:oklch(0.82 0.12 30);box-shadow:inset 0 0 0 1px oklch(0.68 0.19 25 / .45)}
.res:not(.pendiente) .pendiente-aviso{display:none}
.tesis{margin-top:clamp(28px,4vw,44px);font-size:clamp(18px,1.7vw,21px);color:var(--gris);max-width:44em}
.tesis b{color:var(--hueso);font-weight:500}

/* ---------- Método REAL: línea de tiempo de 4 trimestres ---------- */
.metodo{list-style:none;display:grid;gap:0;grid-template-columns:1fr;position:relative}
@media (min-width:980px){.metodo{grid-template-columns:repeat(4,1fr);gap:var(--gap)}}
.fase{position:relative;padding:22px 0 22px 34px;border-left:2px solid var(--linea)}
.fase::before{content:"";position:absolute;left:-8px;top:26px;width:14px;height:14px;border-radius:50%;background:var(--naranja);box-shadow:0 0 0 5px oklch(0.64 0.205 38 / .18)}
@media (min-width:980px){
  .fase{padding:34px 0 0;border-left:0;border-top:2px solid var(--linea)}
  .fase::before{left:0;top:-8px}
}
.fase .trim{font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:44px;line-height:.8;color:var(--naranja)}
.fase h3{font-size:clamp(24px,2.4vw,30px);margin:10px 0 8px}
.fase p{color:var(--gris);font-size:15.5px}
.fase p b{color:var(--hueso);font-weight:500}
.garantia{margin-top:clamp(32px,4vw,48px);display:grid;gap:12px 40px;padding:clamp(22px,3vw,32px);border-radius:var(--radio);background:var(--naranja);color:oklch(0.12 0.01 40)}
@media (min-width:980px){.garantia{grid-template-columns:auto 1fr;align-items:center}}
.garantia h3{font-size:clamp(26px,3vw,40px);font-stretch:66%;font-weight:900}
.garantia p{font-size:16.5px}

/* ---------- paquetes sin precio ---------- */
.paquetes{list-style:none;display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:980px){.paquetes{grid-template-columns:1fr 1.1fr 1fr;align-items:stretch}}
.paquete{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea)}
.paquete h3{font-size:clamp(34px,3.6vw,48px);font-stretch:62%;font-weight:900}
.paquete .para-quien{color:var(--gris);font-size:15.5px}
.paquete ul{list-style:none;display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--linea)}
.paquete li{position:relative;padding-left:24px;font-size:15px;color:var(--gris)}
.paquete li::before{content:"✓";position:absolute;left:0;color:var(--naranja);font-weight:700}
.paquete li b{color:var(--hueso);font-weight:500}
.paquete.estrella{background:var(--naranja);color:oklch(0.12 0.01 40);box-shadow:0 30px 70px -30px oklch(0.64 0.205 38 / .8)}
.paquete.estrella .sello,.paquete.estrella .sello b,.paquete.estrella .para-quien,.paquete.estrella li,.paquete.estrella li b,.paquete.estrella li::before{color:oklch(0.12 0.01 40)}
.paquete.estrella ul{border-color:oklch(0.12 0.01 40 / .25)}
.paquetes-nota{margin-top:16px;font-size:13.5px;color:var(--gris)}

/* ---------- WhatsApp como alternativa al formulario ---------- */
.wa-alt{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 clamp(18px,2.6vw,28px) clamp(18px,2.6vw,24px);font-size:14px;color:var(--gris)}
.wa-alt a{color:var(--hueso);font-weight:500}
.wa-alt svg{width:16px;height:16px;fill:#25D366}

/* ---------- páginas de caso: la cifra manda ---------- */
.caso-cifra{display:grid;gap:8px;margin-top:clamp(24px,3vw,40px)}
.caso-cifra .res-cifra{font-size:clamp(96px,16vw,220px)}
.caso-cifra.pendiente .res-cifra{color:var(--gris-2);font-size:clamp(56px,9vw,120px)}
.historia{list-style:none;display:grid;gap:var(--gap);grid-template-columns:1fr;counter-reset:hist}
@media (min-width:980px){.historia{grid-template-columns:repeat(3,1fr)}}
.historia li{padding:24px;border-radius:var(--radio);background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea)}
.historia .etq{color:var(--naranja)}
.historia h3{font-size:clamp(22px,2.2vw,28px);margin:8px 0 10px}
.historia p{color:var(--gris);font-size:15.5px}
.historia p b{color:var(--hueso);font-weight:500}
.cita{margin-top:clamp(28px,4vw,48px);padding-left:22px;border-left:3px solid var(--naranja);font-size:clamp(20px,2vw,26px);max-width:36em}
.cita footer{margin-top:10px;font-size:14px;color:var(--gris)}
.prueba-img{margin-top:clamp(28px,4vw,48px);max-width:560px}
.paso2 .wa-alt,.enviado .wa-alt{display:none}
.final .contacto-directo{margin-top:22px}
@media (max-width:979px){.form-card.compacta [data-mejor-escalon]{display:none!important}}
@media (min-width:980px){.of-cab .of-grid{grid-template-rows:auto 1fr}.of-mas{align-self:start}}
.caso-cab .sello{margin-bottom:14px}
.caso-cifra.res{background:none;box-shadow:none;padding:0}
.cita p{color:var(--hueso)}
.prueba-img .marco img{height:auto;object-fit:cover;max-height:520px}
.fase .trim{font-size:64px}
.fase .pregunta{font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.03em;color:var(--naranja-claro);font-size:15px;margin-bottom:6px}
.calendario{list-style:none;display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:clamp(24px,3vw,36px)}
@media (min-width:760px){.calendario{grid-template-columns:repeat(3,1fr)}}
.calendario li{display:grid;gap:4px;padding:14px 18px;border-radius:var(--radio);box-shadow:inset 0 0 0 1px var(--linea)}
.calendario b{font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.04em;font-size:14px;color:var(--gris)}
.calendario span{font-size:16px}

/* ---------- home: "Necesita marketing REAL." — se tacha "más" y REAL cae como un sello ---------- */
.h-real .tacha{position:relative;color:var(--gris-2)}
.h-real .tacha::after{content:"";position:absolute;left:-6%;top:52%;width:112%;height:.1em;background:var(--naranja);transform:rotate(-4deg);transform-origin:left}
.h-real .impacto{font-size:2.35em;line-height:.82;margin-top:.04em;letter-spacing:-.01em}
@media (prefers-reduced-motion:no-preference){
  .h-real .tacha{transition:color .3s ease .62s}
  .h-real .tacha::after{animation:tachar-real .38s var(--ease-out) .62s both}
  .h-real .impacto .li{animation-delay:.92s}
  .cab-real .of-grid{animation-delay:1.16s}
  .cab-real::after{animation-delay:1.16s}
  .cab-real .lead{animation-delay:1.3s}
  .espera .h-real .tacha::after{animation-play-state:paused}
}
@keyframes tachar-real{from{transform:rotate(-4deg) scaleX(0)}to{transform:rotate(-4deg) scaleX(1)}}

/* ---------- landings: la R del Método REAL, marcada como gratis en Black November ---------- */
.fase .gratis{display:inline-block;margin-left:12px;vertical-align:top;padding:4px 10px;border-radius:999px;background:var(--naranja);color:var(--tinta);
  font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.05em;font-size:12px;line-height:1.2}

/* =====================================================================
   /ia · "24 horas de tu empresa": cuatro escenas con la hora en grande
   que se rellena al entrar y una conversación que se escribe sola.
   Sin JS o con reduced-motion se ve todo en su estado final.
   ===================================================================== */
.dia-ia{position:relative;overflow:clip}
.dia-ia::before{content:"";position:absolute;left:50%;top:-10%;width:min(1100px,140vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(closest-side,oklch(0.64 0.205 38 / .1),transparent);pointer-events:none}
.dia-ia > *{position:relative}
.dia-ia h2 em{font-style:normal;color:var(--naranja)}
.dia{list-style:none;display:grid;gap:clamp(56px,9vw,120px);margin-top:clamp(32px,5vw,64px)}
.momento-dia{display:grid;gap:22px;align-items:center}
@media (min-width:900px){
  .momento-dia{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,80px)}
  .momento-dia:nth-child(even) .momento-txt{order:2}
}
.hora{position:relative;font-family:var(--f-display);font-weight:900;font-stretch:62%;line-height:.8;letter-spacing:-.01em;
  font-size:clamp(88px,26vw,190px);font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px oklch(0.64 0.205 38 / .55);width:fit-content}
.hora::after{content:attr(data-hora);position:absolute;inset:0;color:var(--naranja);-webkit-text-stroke:0}
.momento{margin-top:14px;font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--naranja-claro)}
.momento-dia h3{margin:8px 0 10px;font-size:clamp(26px,3vw,38px)}
.momento-txt > p:not([class]){color:var(--gris);font-size:16.5px;max-width:34em}
.dato{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 14px;border-radius:999px;background:oklch(0.64 0.205 38 / .14);
  box-shadow:inset 0 0 0 1px oklch(0.64 0.205 38 / .45);font-weight:600;font-size:14.5px;color:var(--hueso)}
.dato::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--naranja)}
.dia .demo{min-height:0;padding:16px;border-radius:14px;font-size:14.5px;gap:9px;background:var(--tinta-2);
  box-shadow:0 0 0 1px var(--linea),0 40px 80px -40px oklch(0 0 0 / .9);transition:box-shadow .8s var(--ease-out)}
.dia .demo .ln{max-width:88%}
.dia .demo .ok,.dia .demo .etq-ln,.dia .demo .hito{max-width:100%}
.dia .ln.ia{position:relative}
.dia-nota{margin-top:clamp(40px,5vw,56px);font-size:13.5px;color:var(--gris-2)}

/* movimiento: solo cuando el script marca la escena (.escalona) y entra en pantalla (.en-vista) */
.dia .escalona .hora::after{clip-path:inset(0 100% 0 0)}
.dia .escalona.en-vista .hora::after{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease-out) .1s}
.dia .escalona .momento,.dia .escalona h3,.dia .escalona .momento-txt > p:not(.hora),.dia .escalona .demo{opacity:0;transform:translateY(18px)}
.dia .escalona.en-vista .momento,.dia .escalona.en-vista h3,.dia .escalona.en-vista .momento-txt > p:not(.hora),.dia .escalona.en-vista .demo{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.dia .escalona.en-vista .momento{transition-delay:.25s}
.dia .escalona.en-vista h3{transition-delay:.33s}
.dia .escalona.en-vista .momento-txt > p:not(.hora){transition-delay:.42s}
.dia .escalona.en-vista .demo{transition-delay:.2s;box-shadow:0 0 0 1px oklch(0.64 0.205 38 / .5),0 40px 90px -40px oklch(0.64 0.205 38 / .45)}
/* las líneas de la demo llegan una a una; el asistente "escribe" antes de responder */
.js .dia .escalona.en-vista .demo .ln{transition:opacity .4s var(--ease-out) calc(.9s + var(--k) * 900ms),transform .5s var(--ease-out) calc(.9s + var(--k) * 900ms)}
.dia .escalona .ln.ia .t{opacity:0}
.dia .escalona.en-vista .ln.ia .t{opacity:1;transition:opacity .35s var(--ease-out) calc(1.6s + var(--k) * 900ms)}
.dia .escalona .ln.ia::after{content:"";position:absolute;left:12px;bottom:12px;width:30px;height:8px;opacity:0;
  background:radial-gradient(circle 3.5px,var(--naranja-claro) 98%,transparent) 0 50%/10px 8px repeat-x}
.dia .escalona.en-vista .ln.ia::after{animation:escribiendo .7s linear calc(.95s + var(--k) * 900ms) 1 both}
@keyframes escribiendo{0%,100%{opacity:0}15%,85%{opacity:1}}
/* la escena no entra entera: entran sus piezas (la hora ya se ve en contorno) */
.js .dia .escalona{opacity:1;transform:none}

/* ---------- /oferta · tres puertas: activos, dormidos y futuros clientes ----------
   Cada tarjeta es una puerta cerrada que se abre hacia dentro al entrar en pantalla
   y deja ver su texto. Sin JS o con reduced-motion no hay hoja: el texto se ve directo. */
#puertas h2 em{font-style:normal;color:var(--naranja)}
.puertas{list-style:none;display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:clamp(28px,4vw,48px)}
@media (min-width:900px){.puertas{grid-template-columns:repeat(3,1fr)}}
.puerta{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:26px 24px 28px;min-height:340px;
  border-radius:var(--radio) var(--radio) 4px 4px;background:var(--tinta-2);box-shadow:0 0 0 1px var(--linea);perspective:1100px}
.puerta.destacada{box-shadow:0 0 0 1px oklch(0.64 0.205 38 / .6),0 30px 70px -36px oklch(0.64 0.205 38 / .55)}
.puerta::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 0% 0%,oklch(0.64 0.205 38 / .22),transparent 60%);pointer-events:none}
.puerta > :not(.hoja){position:relative}
.puerta-tipo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-family:var(--f-display);font-weight:800;font-stretch:80%;
  text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--gris)}
.puerta-tipo span{padding:3px 10px;border-radius:999px;background:var(--naranja);color:var(--tinta);letter-spacing:.05em}
.puerta h3{font-size:clamp(24px,2.4vw,30px);max-width:12em;margin-top:6px}
.puerta p:not(.puerta-tipo){color:var(--gris);font-size:16px}
.puerta p b{color:var(--hueso);font-weight:500}
.puertas-pregunta{margin-top:clamp(28px,4vw,40px);font-family:var(--f-display);font-weight:900;font-stretch:66%;text-transform:uppercase;
  font-size:clamp(28px,3.4vw,44px);line-height:.95}
#puertas .cta-bloque{margin-top:18px}

/* la hoja de la puerta */
.hoja{display:none}
.puertas .escalona .hoja{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;position:absolute;inset:0;z-index:2;padding:24px;
  background:linear-gradient(160deg,var(--tinta-3),var(--tinta-2));transform-origin:0 50%;backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px var(--linea),inset 0 0 0 10px var(--tinta-2),inset 0 0 0 11px var(--linea)}
.puertas .destacada.escalona .hoja{box-shadow:inset 0 0 0 1px oklch(0.64 0.205 38 / .6),inset 0 0 0 10px var(--tinta-2),inset 0 0 0 11px oklch(0.64 0.205 38 / .35)}
.hoja-num{position:absolute;left:24px;top:14px;font-family:var(--f-display);font-weight:900;font-stretch:62%;line-height:1;font-size:clamp(140px,20vw,190px);
  color:transparent;-webkit-text-stroke:1.5px oklch(0.64 0.205 38 / .7)}
.hoja-tipo{font-family:var(--f-display);font-weight:900;font-stretch:66%;text-transform:uppercase;font-size:30px;line-height:.95;color:var(--hueso)}
.hoja-verbo{width:fit-content;padding:3px 10px;border-radius:999px;background:var(--naranja);color:var(--tinta);
  font-family:var(--f-display);font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.pomo{position:absolute;right:26px;top:50%;width:14px;height:14px;border-radius:50%;background:var(--naranja);
  box-shadow:0 0 0 4px oklch(0.64 0.205 38 / .2),0 0 18px oklch(0.64 0.205 38 / .6)}
/* al entrar: la hoja gira hacia dentro, entra la luz y aparece el texto */
.puertas .escalona .hoja{transition:transform 1.25s var(--ease-in-out) calc(.45s + var(--n) * 280ms),opacity .35s linear calc(1.35s + var(--n) * 280ms)}
.puertas .escalona.en-vista .hoja{transform:rotateY(82deg);opacity:0}
.puertas .escalona::before{opacity:0;transition:opacity 1s var(--ease-out) calc(.7s + var(--n) * 280ms)}
.puertas .escalona.en-vista::before{opacity:1}
.puertas .escalona > :not(.hoja){opacity:0;transform:translateX(14px);transition:opacity .6s var(--ease-out) calc(.95s + var(--n) * 280ms),transform .7s var(--ease-out) calc(.95s + var(--n) * 280ms)}
.puertas .escalona.en-vista > :not(.hoja){opacity:1;transform:none}