/* Landing de anuncios /web-79 (una oferta: Web Landing 79 €) · v2 «nivel anuncio».
   Mismo lenguaje que los anuncios del lote 79: Bricolage Grotesque enorme y apretada, 79 € gigante en ascua #ff6a1a, cortes de color
   oscuro / crema / naranja, móviles con muestras rotuladas «Ejemplo de diseño» y chips redondeados.
   3D solo con CSS (perspective + preserve-3d) y JS ligero; todo se anima con transform/opacity y se para fuera de pantalla.
   Sin JS se ve todo; con prefers-reduced-motion queda una versión quieta. Móvil primero. */
:root{
  --ink:#0b0a09;--ink2:#110f0d;--char:#191512;--char2:#211c18;--line:#2c2723;--line2:#3a332d;--dim:#8f857d;--stone:#bdb3aa;
  --cream:#f4efe9;--paper:#fffaf4;--tinta:#160a02;--tinta2:#4a4038;--tinta3:#62574e;
  --ember:#ff6a1a;--ember2:#ff8a3d;--amber:#ffb02e;--ember-osc:#c84a08;--ok:#3fc27e;
  --display:"Bricolage Grotesque","Segoe UI Variable Display","Segoe UI",sans-serif;--sans:"Instrument Sans","Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--muelle:cubic-bezier(.32,.72,0,1);--s0:34px;
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--s0) + 12px)}
body{background:var(--ink);color:var(--cream);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
svg{display:block;width:100%;height:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.claro :focus-visible,.naranja :focus-visible{outline-color:var(--tinta)}
.w{width:min(1240px,100% - 32px);margin-inline:auto}
@media (min-width:900px){.w{width:min(1240px,100% - 72px)}}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--ink);padding:8px 14px;border-radius:8px;z-index:99}.saltar:focus{left:8px}
section{padding:clamp(76px,10vw,150px) 0;position:relative}
.t2{font:800 clamp(36px,5.6vw,82px)/.95 var(--display);letter-spacing:-.05em;text-wrap:balance;max-width:15em}
.lead{color:var(--stone);font-size:clamp(17px,1.5vw,19.5px);margin-top:18px;max-width:36em;text-wrap:pretty}
.nota{color:var(--dim);font-size:14px;margin-top:22px;max-width:62em}
.nota a,.lead a{color:inherit}
.ante{display:inline-flex;align-items:center;gap:9px;font:650 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#ffd2b3;background:rgba(255,106,26,.1);border:1px solid rgba(255,106,26,.34);border-radius:999px;padding:6px 14px 6px 11px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--ember);animation:latir 2.2s var(--ease) infinite}
@keyframes latir{0%{box-shadow:0 0 0 0 rgba(255,106,26,.65)}70%{box-shadow:0 0 0 9px rgba(255,106,26,0)}100%{box-shadow:0 0 0 0 rgba(255,106,26,0)}}

/* secciones de color (como los cortes de los anuncios) */
.claro{background:var(--cream);color:var(--tinta)}
.claro .lead{color:var(--tinta2)}.claro .nota{color:var(--tinta3)}
.naranja{background:var(--ember);color:var(--tinta)}
.naranja .lead{color:rgba(22,10,2,.8)}

/* revelado al entrar (solo con JS; sin JS todo está visible). Usa «translate» para no pisar otros transform */
html.js .rv{transition:opacity .9s var(--muelle) var(--d,0s),translate .9s var(--muelle) var(--d,0s)}
html.js .rv:not(.in){opacity:0;translate:0 28px}

/* botones: píldora, brillo que barre, flecha en su círculo, «imán» en PC (web-79.js) */
.b{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;background-color:var(--ember);color:var(--tinta);font:700 16.5px var(--sans);padding:13px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;isolation:isolate;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 18px 40px -16px rgba(255,106,26,.85);transition:transform .35s var(--muelle),box-shadow .35s var(--muelle)}
.b::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-110%);transition:transform .9s var(--ease)}
.b:hover::before{transform:translateX(110%)}
.b:hover{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 26px 54px -16px rgba(255,106,26,1)}
.b:active{scale:.975}
.b-xl{min-height:60px;font-size:18px;padding:15px 18px 15px 30px}
.b-sec{background-color:rgba(255,255,255,.04);color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line2)}
.b-sec:hover{box-shadow:inset 0 0 0 1.5px var(--stone)}
.b-sec::before{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%)}
.b-peq{min-height:44px;padding:9px 14px 9px 18px;font-size:14.5px;gap:8px}
.b-tinta{background-color:var(--tinta);color:var(--cream);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 22px 50px -18px rgba(22,10,2,.9)}
.b-tinta:hover{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 60px -18px rgba(22,10,2,1)}
.b-tinta .flecha{background:var(--ember);color:var(--tinta)}
.flecha{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:rgba(22,10,2,.16);transition:transform .45s var(--muelle)}
.flecha svg{width:17px;height:17px}
.b:hover .flecha{transform:translate(3px,-1px) scale(1.06)}
.sale{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);transition:transform .45s var(--muelle)}
.sale svg{width:15px;height:15px}
.b:hover .sale{transform:translate(2px,-2px)}

/* S0 · barra superior fija con el progreso de lectura */
.s0{position:sticky;top:0;z-index:40;height:var(--s0);display:grid;place-items:center;background:#1f0e05;border-bottom:1px solid #46220f;font-size:13.5px;color:#ffd9bd;white-space:nowrap;overflow:hidden}
.s0 p{padding:0 12px;text-overflow:ellipsis;overflow:hidden;max-width:100%}
.s0 b{color:#fff}
.s0-prog{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--ember);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.s0-prog{animation:progreso linear both;animation-timeline:scroll(root)}}
@keyframes progreso{to{transform:scaleX(1)}}
@media (max-width:420px){.s0{font-size:12px}.s0 p{padding:0 8px}}

/* ---------- el móvil dibujado (se usa en el hero, el carrusel y el cierre) ---------- */
.tel{position:relative;display:block;container-type:inline-size;border-radius:15% / 7%;
  background:linear-gradient(150deg,#3a332e,#0d0b0a 38%,#1a1613 70%,#2e2824);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 4px #060505,0 40px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.5)}
.tel-pant{position:relative;display:block;margin:3.4%;overflow:hidden;aspect-ratio:390/844;border-radius:12% / 5.6%;background:#1f1b18;container-type:size}
.tel-pant::before{content:"";position:absolute;z-index:2;top:1.7%;left:50%;width:30%;height:2.9%;margin-left:-15%;border-radius:99px;background:#050404}
.tel-pant img{width:100%;height:100%;object-fit:cover;object-position:top}
.tel-brillo{position:absolute;z-index:3;inset:-10% -70%;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.2) 44%,rgba(255,255,255,.04) 50%,rgba(255,255,255,0) 58%)}
.eti-ej{position:absolute;z-index:4;background:var(--cream);color:var(--tinta);font:700 12.5px/1.2 var(--display);letter-spacing:-.01em;padding:5px 10px;border-radius:9px;box-shadow:0 12px 26px -12px rgba(0,0,0,.7);white-space:nowrap}
.tel .eti-ej{top:10%;right:-9%;font-size:clamp(9.5px,6.4cqi,14px);padding:.35em .7em;border-radius:.7em;transform:rotate(5deg)}

/* ---------- S1 · hero ---------- */
.hero{padding:clamp(18px,3vw,48px) 0 clamp(56px,7vw,110px);overflow:hidden;isolation:isolate}
@media (min-width:900px){.hero{min-height:calc(100svh - var(--s0));display:grid;align-items:center}}
.hero-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 92% 4%,rgba(255,106,26,.42),rgba(255,106,26,.08) 55%,transparent 75%),radial-gradient(40% 40% at 0% 100%,rgba(255,176,46,.10),transparent 70%),var(--ink)}
.hero-fondo::after{content:"";position:absolute;inset:0;opacity:.55;background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/6px 6px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hero-g{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{margin-top:20px}
.h1-a{display:block;font:800 clamp(40px,5.6vw,84px)/.93 var(--display);letter-spacing:-.055em;text-wrap:balance}
.h1-precio{display:flex;align-items:flex-start;margin-top:.04em}
.h1-precio b{font:800 clamp(100px,12.6vw,196px)/.84 var(--display);letter-spacing:-.065em;color:var(--ember);text-shadow:0 0 80px rgba(255,106,26,.35);padding-right:.04em}
.h1-precio i{flex:none;font:800 clamp(16px,1.75vw,27px)/1 var(--display);font-style:normal;letter-spacing:-.03em;color:var(--tinta);background:var(--cream);padding:.42em .7em .48em;border-radius:.5em;margin:.25em 0 0 -.5em;transform:rotate(-7deg);box-shadow:0 18px 34px -14px rgba(0,0,0,.8);animation:pega .7s .35s var(--muelle) both}
@keyframes pega{from{opacity:0;transform:rotate(-16deg) scale(1.5) translateY(-10px)}}
.hero-mid{display:block}
.sub{margin:22px 0 0;font-size:clamp(17px,1.4vw,19.5px);color:var(--stone);max-width:31em;text-wrap:pretty}
.fecha{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font:600 16.5px/1.4 var(--sans);color:var(--cream)}
.fecha-ic{flex:none;width:24px;height:24px;color:var(--ember);margin-top:-1px;filter:drop-shadow(0 0 10px rgba(255,106,26,.5))}
.hero-cta{margin-top:30px}
.confia{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;color:var(--stone)}
.candado{flex:none;width:15px;height:15px}
/* las 3 dudas, antes del botón del hero: el JS de #faq- abre la pregunta al tocar */
.dudas-h{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px}
.dudas-h li{position:relative;padding-left:24px;font-size:15px;line-height:1.35}
.dudas-h li::before{content:"";position:absolute;left:3px;top:.3em;width:12px;height:7px;border:solid var(--ok);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.dudas-h a{color:var(--cream);text-decoration:none;border-bottom:1px dotted rgba(242,237,231,.35)}
.fan{display:none}

/* escena 3D (PC): navegador + dos móviles + chips, con profundidad real; el ratón la inclina (web-79.js) */
.escena{position:relative;aspect-ratio:1/1.02;perspective:1500px;perspective-origin:50% 40%}
.esc-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(4deg) rotateY(-9deg)}
.esc-3d>*{position:absolute}
.esc-halo{inset:4% -8% 0 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,106,26,.5),rgba(255,106,26,.12) 55%,transparent);transform:translateZ(-220px) scale(1.25)}
.esc-nav{left:-2%;top:9%;width:82%;border-radius:14px;overflow:hidden;background:#f6f1ec;transform:translateZ(-90px) rotateY(9deg) rotateX(2deg);
  box-shadow:0 70px 120px -40px rgba(255,106,26,.55),0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1);animation:llega-a 1.1s .05s var(--muelle) both}
.esc-nav .nb{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:#ebe4dd;border-bottom:1px solid rgba(0,0,0,.08)}
.esc-nav .nb i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.18)}
.esc-nav .nb span{margin-left:8px;flex:1;max-width:220px;background:#fff;border-radius:7px;font:500 11.5px var(--sans);color:#776d64;padding:3px 10px}
.esc-nav img{width:100%;aspect-ratio:1440/860;object-fit:cover;object-position:top}
.esc-nav .tel-brillo{inset:-20% -40%}
.eti-nav{left:16px;bottom:16px;transform:rotate(-3deg)}
.esc-m1{right:0;bottom:1%;width:33%;transform:translateZ(120px) rotateY(-16deg) rotateZ(3deg);animation:llega-b 1.2s .2s var(--muelle) both}
.esc-m2{left:4%;bottom:-3%;width:25%;transform:translateZ(50px) rotateY(20deg) rotateZ(-6deg);animation:llega-c 1.2s .32s var(--muelle) both}
.esc-m1 .tel,.esc-m2 .tel{width:100%}
.flota{z-index:5;display:inline-flex;align-items:center;gap:9px;background:rgba(20,17,15,.92);border:1px solid rgba(255,255,255,.12);color:var(--cream);font:650 14px var(--sans);padding:9px 15px 9px 10px;border-radius:999px;box-shadow:0 22px 44px -18px rgba(0,0,0,.9);white-space:nowrap;animation:entra-f .9s var(--muelle) both,flota 7s ease-in-out infinite}
.flota i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,106,26,.16);color:var(--ember);padding:5px}
.flota b{font:800 18px var(--display);color:var(--ember);letter-spacing:-.03em;margin-left:5px}
.f1{left:-6%;top:2%;transform:translateZ(190px);animation-delay:.55s,0s}
.f2{right:-4%;top:38%;transform:translateZ(230px);animation-delay:.7s,-2.5s}
.f3{left:31%;bottom:-2%;transform:translateZ(170px);animation-delay:.85s,-4.5s}
.esc-suelo{left:8%;right:-4%;bottom:-9%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);transform:translateZ(-30px)}
@keyframes llega-a{from{opacity:0;translate:0 60px}}
@keyframes llega-b{from{opacity:0;translate:40px 90px}}
@keyframes llega-c{from{opacity:0;translate:-40px 90px}}
@keyframes entra-f{from{opacity:0;scale:.6}}
@keyframes flota{50%{translate:0 -10px}}

@media (max-width:899px){
  .hero-g{grid-template-columns:minmax(0,1fr);gap:0}
  .escena{display:none}
  .hero h1{margin-top:14px}
  .h1-a{font-size:clamp(35px,10.4vw,56px);line-height:.94}
  .h1-precio b{font-size:clamp(88px,25vw,150px)}
  .h1-precio i{font-size:clamp(15px,4.4vw,22px)}
  .hero-mid{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:12px;align-items:start;margin-top:10px}
  .sub{margin:0;font-size:15.5px;line-height:1.47}
  .fecha{font-size:14.5px;margin-top:12px}
  .fecha-ic{width:21px;height:21px}
  .hero-cta{margin-top:20px}
  .hero-cta .b{width:100%}
  .confia{font-size:12.5px;justify-content:center;text-align:center}
  .ante{font-size:11.5px;padding:5px 12px 5px 9px}
  /* abanico 3D de tres móviles: flota solo, se inclina al girar el móvil y se abre al bajar */
  .fan{display:block;position:relative;height:206px;perspective:700px;margin-top:-22px}
  .fan-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(7deg)}
  .fan .tel{position:absolute;left:50%;top:0;width:88px;margin-left:-44px}
  .fan .fan-a{transform:translateZ(30px) rotateZ(4deg);animation:sube-t .9s .1s var(--muelle) both,vaiven 6s ease-in-out infinite}
  .fan .fan-b{transform:translate3d(-30px,12px,-30px) rotateZ(-9deg);animation:sube-t .9s .2s var(--muelle) both,vaiven 6s -2s ease-in-out infinite;filter:brightness(.82)}
  .fan .fan-c{transform:translate3d(30px,22px,-70px) rotateZ(12deg);animation:sube-t .9s .3s var(--muelle) both,vaiven 6s -4s ease-in-out infinite;filter:brightness(.68)}
  .fan .tel .eti-ej{right:-28%;top:12%}
  .fan-luz{position:absolute;left:-30%;right:-30%;bottom:-6%;height:40%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,106,26,.42),transparent);z-index:-1}
}
@media (min-width:560px) and (max-width:899px){.hero-mid{grid-template-columns:minmax(0,1fr) 190px}.fan{height:300px;margin-top:-90px}.fan .tel{width:124px;margin-left:-62px}}
/* móviles bajitos (375 × 667): el botón del hero queda por encima de la franja de cookies */
@media (max-width:899px) and (max-height:720px){
  .hero{padding-top:12px}.hero h1{margin-top:10px}
  .h1-a{font-size:min(9.2vw,35px)}.h1-precio b{font-size:min(21vw,80px)}.h1-precio i{font-size:15px}
  .sub{font-size:14.5px;line-height:1.42}.fecha{font-size:14px;margin-top:8px}
  .hero-mid{grid-template-columns:minmax(0,1fr) 100px;margin-top:6px}
  .fan{height:180px;margin-top:-16px}.fan .tel{width:76px;margin-left:-38px}
  .hero-cta{margin-top:14px}.hero-cta .b{min-height:56px}.confia{margin-top:10px}.dudas-h{gap:4px;margin-bottom:12px}.dudas-h li{font-size:14px}
}
@keyframes sube-t{from{opacity:0;translate:0 50px}}
@keyframes vaiven{50%{translate:0 -7px}}
@supports (animation-timeline:view()){
  @media (max-width:899px) and (prefers-reduced-motion:no-preference){
    .fan-in{animation:abre linear both;animation-timeline:view();animation-range:exit -20% exit 100%}
  }
}
@keyframes abre{to{rotate:y 38deg;scale:1.08}}

/* cinta naranja inclinada que corre (como los chips del anuncio) */
.cinta-caja{position:relative;z-index:3;overflow-x:clip;overflow-y:visible;margin:-60px 0;padding:38px 0}
.cinta{position:relative;margin:0 -3%;background:var(--ember);color:var(--tinta);transform:rotate(-2.2deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);overflow:hidden;padding:15px 0}
.cinta-in{display:flex;width:max-content;animation:corre 42s linear infinite}
.cinta-in.pausa{animation-play-state:paused}
.cinta-g{display:flex;align-items:center;flex:none}
.cinta-g span{font:800 clamp(19px,2.3vw,30px)/1 var(--display);letter-spacing:-.035em;white-space:nowrap;padding:0 22px}
.cinta-g i{font-style:normal;font-size:18px;opacity:.75}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- S2 · para quién es (crema) ---------- */
.para{padding-top:clamp(110px,13vw,190px)}
.para-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.para .t2{position:sticky;top:90px}
.sies{list-style:none;display:grid;gap:14px}
.sies li{position:relative;padding:24px 26px 24px 78px;background:var(--paper);border-radius:28px;font:500 clamp(17px,1.5vw,20px)/1.45 var(--sans);color:var(--tinta);
  box-shadow:0 1px 0 #fff inset,0 24px 50px -30px rgba(90,45,10,.35);transition:transform .5s var(--muelle),box-shadow .5s var(--muelle)}
.sies li:hover{transform:translateY(-3px);box-shadow:0 1px 0 #fff inset,0 34px 60px -30px rgba(90,45,10,.45)}
.si-ic{position:absolute;left:24px;top:22px;width:34px;height:34px;border-radius:50%;background:var(--ember);color:var(--tinta);padding:7px;box-shadow:0 10px 20px -8px rgba(255,106,26,.8)}
.si-ic svg{stroke-width:2.6}
.noes{margin-top:20px;color:var(--tinta2);font-size:16px;padding-left:6px}
.noes a{color:var(--tinta);font-weight:600}
@media (max-width:860px){.para-g{grid-template-columns:1fr;gap:26px}.para .t2{position:static}.sies li{padding:18px 18px 18px 64px;border-radius:22px}.si-ic{left:16px;top:17px;width:32px;height:32px}}

/* ---------- S3 · ejemplos: carrusel 3D (coverflow) ---------- */
.ejemplos{overflow:hidden;isolation:isolate;padding-bottom:clamp(60px,7vw,100px)}
.ej-fondo{position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 45% at 50% 62%,rgba(255,106,26,.22),transparent 70%),var(--ink2)}
.ej-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cf-nav{display:flex;gap:10px;flex:none}
.cf-b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:0;background:rgba(255,255,255,.05);color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line2);cursor:pointer;padding:18px;transition:background .3s var(--ease),transform .4s var(--muelle),color .3s}
.cf-b:hover{background:var(--ember);color:var(--tinta);transform:scale(1.06)}
.cf-b:active{transform:scale(.95)}
.cf{--cw:clamp(206px,56vw,262px);display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  padding:46px calc(50% - var(--cw) / 2) 34px;cursor:grab;-webkit-overflow-scrolling:touch}
.cf::-webkit-scrollbar{display:none}
.cf.arr{scroll-snap-type:none;cursor:grabbing;user-select:none}
.cf.arr *{pointer-events:none}
.cf:focus-visible{outline-offset:-6px}
.cf-it{flex:0 0 var(--cw);scroll-snap-align:center;perspective:1000px;view-timeline:--cf inline}
.cf-in{transform-origin:50% 40%}
.cf-tel{display:block;-webkit-user-drag:none}
.cf-tel .tel{width:100%;transition:transform .6s var(--muelle),box-shadow .6s var(--muelle)}
.cf-tel:hover .tel{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 0 4px #060505,0 50px 80px -30px rgba(255,106,26,.55)}
.cf-tel img{-webkit-user-drag:none}
/* en PC, al pasar el ratón la web completa baja sola dentro del móvil */
.tel-pant .larga{position:absolute;inset:0 0 auto;height:auto;object-fit:initial;opacity:0;transition:opacity .45s var(--ease)}
.cf-tel:hover .larga.lista{opacity:1;animation:baja 11s .4s ease-in-out infinite alternate}
@keyframes baja{to{transform:translateY(calc(-100% + 100cqh))}}
.mu-pie{padding:20px 6px 0;display:grid;gap:3px;justify-items:center;text-align:center}
.mu-sec{font:800 21px/1.1 var(--display);letter-spacing:-.03em}
.mu-neg{font-size:14.5px;color:var(--stone)}
.mu-eti{font-size:12.5px;color:var(--dim);margin-bottom:12px}
.cf-pista{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--dim);font-size:13.5px}
.cf-mano{width:34px;height:18px;border-radius:9px;box-shadow:inset 0 0 0 1.5px var(--line2);position:relative}
.cf-mano::after{content:"";position:absolute;top:4px;left:5px;width:10px;height:10px;border-radius:50%;background:var(--ember);animation:pista 2.4s var(--muelle) infinite}
@keyframes pista{50%{transform:translateX(14px)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cf-in{animation:coverflow linear both;animation-timeline:--cf}
  }
}
@keyframes coverflow{
  0%{transform:translateX(-18%) rotateY(-58deg) scale(.74);opacity:.3}
  35%{opacity:.75}
  50%{transform:none;opacity:1}
  65%{opacity:.75}
  100%{transform:translateX(18%) rotateY(58deg) scale(.74);opacity:.3}
}
@media (max-width:699px){.cf-nav{display:none!important}}
.cf .tel .eti-ej{right:5%;top:6.5%;transform:rotate(3deg)}

/* ---------- S3b · antes / después (crema) ---------- */
.antes-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.cmps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,40px);perspective:1400px}
.cmp figcaption{margin-top:14px;font-size:14px;color:var(--tinta2);text-align:center}
.cmp figcaption b{color:var(--tinta)}
.cmp-tel{padding:3.4%;border-radius:12% / 6%;background:linear-gradient(150deg,#3a332e,#0d0b0a 38%,#1a1613 70%,#2e2824);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 4px #060505,0 50px 80px -36px rgba(60,25,5,.6)}
@media (min-width:900px){.cmp:first-child .cmp-tel{transform:rotateY(9deg) rotateZ(-1.5deg)}.cmp:last-child .cmp-tel{transform:rotateY(-9deg) rotateZ(1.5deg)}.cmp:last-child{margin-top:56px}}
.cmp-caja{--c:50%;position:relative;aspect-ratio:390/780;border-radius:10% / 5%;overflow:hidden;background:#1f1b18;touch-action:pan-y}
.cmp-caja img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.cmp-desp{position:absolute;inset:0;clip-path:inset(0 0 0 var(--c))}
.cmp-linea{position:absolute;top:0;bottom:0;left:var(--c);width:3px;margin-left:-1.5px;background:var(--cream);box-shadow:0 0 22px rgba(255,106,26,.8);pointer-events:none}
.cmp-asa{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--ember);color:var(--tinta);padding:11px;box-shadow:0 0 0 6px rgba(255,106,26,.25),0 14px 30px -8px rgba(0,0,0,.6);transition:transform .3s var(--muelle)}
.cmp-asa svg{stroke-width:2.4}
.cmp-caja:hover .cmp-asa,.cmp-caja:focus-within .cmp-asa{transform:scale(1.12)}
.cmp-caja input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-caja:focus-within .cmp-linea{background:var(--amber)}
.cmp-e{position:absolute;top:12px;z-index:2;font:700 12px var(--sans);padding:5px 10px;border-radius:999px;pointer-events:none}
.cmp-e.a{left:10px;background:rgba(0,0,0,.7);color:#fff}.cmp-e.d{right:10px;background:var(--ember);color:var(--tinta)}
@media (max-width:860px){.antes-g{grid-template-columns:1fr}.cmps{width:100%;max-width:540px;margin-inline:auto}}
@media (max-width:640px){.cmps{gap:12px}.cmp figcaption{font-size:12.5px}.cmp-asa{width:38px;height:38px;margin:-19px 0 0 -19px;padding:9px}.cmp-e{font-size:11px;padding:4px 8px}}

/* ---------- S4 · qué incluye (naranja) ---------- */
.inc-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px 60px;align-items:end}
.cifras{list-style:none;display:flex;gap:clamp(22px,3vw,44px)}
.cifras li{display:grid;gap:6px;max-width:150px}
.cifras b{font:800 clamp(56px,6.4vw,104px)/.82 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.cifras li>span{font:600 14px/1.3 var(--sans);color:rgba(22,10,2,.78)}
.stack{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(36px,5vw,64px)}
.stack li{display:flex;flex-direction:column;gap:18px;padding:22px;min-height:168px;background:var(--tinta);color:var(--stone);border-radius:26px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.38;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 30px 50px -34px rgba(60,20,0,.9);transition:transform .5s var(--muelle)}
.stack li:hover{transform:translateY(-4px) rotate(-.6deg)}
.stack li b{color:var(--cream);font:750 1.08em/1.3 var(--display);letter-spacing:-.02em}
.stack li:nth-child(1),.stack li:nth-child(4),.stack li:nth-child(7),.stack li:nth-child(8){grid-column:span 2}
.stack li.top{background:var(--cream);color:var(--tinta2)}
.stack li.top b{color:var(--tinta)}
.ic{flex:none;width:46px;height:46px;border-radius:15px;background:rgba(255,106,26,.14);color:var(--ember);padding:11px}
.top .ic{background:var(--ember);color:var(--tinta)}
.noinc{margin-top:22px;color:rgba(22,10,2,.82);font-size:15px;max-width:52em}
.gars{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.gar{display:flex;gap:18px;align-items:flex-start;padding:26px;border-radius:28px;background:var(--paper);color:var(--tinta2);box-shadow:0 30px 60px -36px rgba(60,20,0,.8);transition:transform .5s var(--muelle)}
.gar b{display:block;font:800 22px/1.1 var(--display);letter-spacing:-.03em;color:var(--tinta)}
.gar p{font-size:15.5px;margin-top:6px}
.g-ic{flex:none;width:50px;height:50px;border-radius:16px;background:var(--tinta);color:var(--ember);padding:12px}
@media (max-width:980px){.stack{grid-template-columns:1fr 1fr}.stack li:nth-child(n){grid-column:auto}.stack li.top,.stack li:last-child{grid-column:1/-1}.inc-cab{grid-template-columns:1fr}}
@media (max-width:640px){.gars{grid-template-columns:1fr}.stack li{min-height:0;padding:18px;gap:12px;border-radius:22px}.stack li{font-size:16px}.ic{width:40px;height:40px;padding:9px;border-radius:13px}.gar{padding:20px}.cifras{gap:18px;justify-content:space-between}.cifras b{font-size:clamp(48px,15vw,64px)}.cifras li>span{font-size:12.5px}}
@media (max-width:520px){.stack{grid-template-columns:1fr;gap:8px}.stack li{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;border-radius:20px}.stack li:hover{transform:none}}

/* ---------- S5 · comparativa (crema): tabla en PC, tarjetas en móvil ---------- */
.tabla-c{margin-top:clamp(30px,4vw,54px);border-radius:30px;background:var(--paper);box-shadow:0 40px 80px -50px rgba(90,45,10,.5);padding:10px}
.tabla-c table{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px}
.tabla-c th,.tabla-c td{padding:20px 20px;text-align:left;vertical-align:top;border-bottom:1px solid #ece4db}
.tabla-c thead th{font:800 17px var(--display);letter-spacing:-.02em;color:var(--tinta2)}
.tabla-c tbody th{font-weight:650;color:var(--tinta3);width:13%}
.tabla-c td{color:var(--tinta2)}
.tabla-c tr:last-child>*{border-bottom:0}
.tabla-c .nos{background:var(--ember);color:var(--tinta);border-bottom-color:rgba(22,10,2,.12)}
.tabla-c thead .nos{color:var(--tinta);border-radius:22px 22px 0 0}
.tabla-c tbody tr:last-child .nos{border-radius:0 0 22px 22px}
.tabla-c .nos b{font-weight:700}
@media (max-width:760px){
  .tabla-c{background:none;box-shadow:none;padding:0;border-radius:0}
  .tabla-c table,.tabla-c tbody,.tabla-c tr{display:block}
  .tabla-c thead{display:none}
  .tabla-c tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;padding:12px;border-radius:24px;background:var(--paper);box-shadow:0 24px 50px -36px rgba(90,45,10,.5)}
  .tabla-c tbody th{grid-column:1/-1;width:auto;padding:4px 6px 6px;border:0;font:800 19px var(--display);letter-spacing:-.02em;color:var(--tinta)}
  .tabla-c td{border:0;padding:10px 12px;border-radius:14px;background:#f1e9e0;font-size:13.5px;line-height:1.35}
  .tabla-c td::before{content:attr(data-q);display:block;font-size:11.5px;color:var(--tinta3);font-weight:650;margin-bottom:2px}
  .tabla-c td.nos{grid-column:1/-1;font-size:15.5px;background:var(--ember)}
  .tabla-c td.nos::before{color:rgba(22,10,2,.75)}
  .tabla-c tbody tr:last-child .nos{border-radius:14px}
}

/* ---------- S6 · cómo funciona: tira de días real + pasos ---------- */
.como{background:radial-gradient(50% 40% at 100% 0%,rgba(255,106,26,.2),transparent 70%),var(--ink)}
.tira{list-style:none;display:flex;gap:10px;margin-top:clamp(30px,4vw,54px);overflow-x:auto;scrollbar-width:none;padding:8px 2px 14px}
.tira::-webkit-scrollbar{display:none}
.dia{flex:0 0 auto;width:clamp(58px,7vw,92px);display:grid;justify-items:center;align-content:start;gap:2px;padding:14px 4px 12px;border-radius:20px;background:var(--char);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.dia small{font:700 14px var(--display);color:var(--dim)}
.dia b{font:800 clamp(26px,2.6vw,38px)/1 var(--display);letter-spacing:-.04em;color:var(--stone)}
.dia i{font:650 10.5px/1.15 var(--sans);font-style:normal;text-align:center;margin-top:5px}
.dia.finde{opacity:.42}.dia.finde.m-hoy{opacity:1!important}
.dia.m-hoy{background:var(--cream)}.dia.m-hoy small,.dia.m-hoy b,.dia.m-hoy i{color:var(--tinta)}
.dia.m-bor{background:var(--ember);box-shadow:0 18px 40px -14px rgba(255,106,26,.9)}.dia.m-bor small,.dia.m-bor b,.dia.m-bor i{color:var(--tinta)}
.dia.m-ent,.dia.m-emp{box-shadow:inset 0 0 0 2px var(--amber)}.dia.m-ent b,.dia.m-emp b{color:var(--cream)}.dia.m-ent i,.dia.m-emp i{color:var(--amber)}
html.js .tira .dia{transition:opacity .6s var(--muelle) calc(var(--k) * 45ms + .1s),translate .6s var(--muelle) calc(var(--k) * 45ms + .1s)}
html.js .tira:not(.in) .dia{opacity:0;translate:0 18px}
html.js .tira.in .dia.finde{opacity:.42}.dia.finde.m-hoy{opacity:1!important}
.linea{list-style:none;display:grid;gap:10px;margin-top:22px}
.linea li{display:grid;grid-template-columns:52px minmax(0,300px) minmax(0,1fr);align-items:center;gap:8px 24px;padding:24px 30px;border-radius:26px;background:var(--char);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.linea .n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line2);font:800 17px var(--display)}
.linea b{font:800 clamp(21px,2vw,28px)/1.1 var(--display);letter-spacing:-.035em}
.linea p{color:var(--stone);font-size:16.5px}
.linea li.clave{background:var(--ember);color:var(--tinta);box-shadow:0 30px 60px -30px rgba(255,106,26,.7)}
.linea .clave .n{background:var(--tinta);color:var(--ember);box-shadow:none}
.linea .clave p{color:rgba(22,10,2,.82)}
@media (max-width:860px){.linea li{grid-template-columns:42px minmax(0,1fr);padding:18px 18px;align-items:start}.linea li p{grid-column:2}.linea .n{width:36px;height:36px;font-size:15px}}

/* ---------- S7 · garantía (crema) con sello que gira ---------- */
.gar-g{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.gar-g .b{margin-top:30px}
.garantia .t2{max-width:14em}
.acento{color:var(--ember-osc)}
.sello{position:relative;width:clamp(170px,20vw,250px);aspect-ratio:1}
.sello-giro{position:absolute;inset:0;animation:gira 26s linear infinite}
.sello-giro text{font:800 15.5px var(--display);letter-spacing:.17em;fill:var(--tinta)}
.sello-c{position:absolute;inset:27%;border-radius:50%;background:var(--ember);color:var(--tinta);padding:9%;box-shadow:0 24px 50px -16px rgba(255,106,26,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.sello-c svg{stroke-width:2.2}
@keyframes gira{to{transform:rotate(360deg)}}
@media (max-width:760px){.gar-g{grid-template-columns:1fr;gap:20px}.sello{width:150px}.gar-g .b{width:100%}}

/* ---------- S8 · escalón Web Negocio ---------- */
.negocio{padding-bottom:clamp(40px,5vw,70px)}
.neg-c{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:32px;align-items:center;padding:clamp(24px,4vw,52px);border-radius:34px;
  background:linear-gradient(140deg,#221c18,#120f0d 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 50px 90px -50px rgba(0,0,0,.9);transition:transform .6s var(--muelle)}
.neg-luz{position:absolute;z-index:-1;right:-15%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,106,26,.32),transparent)}
.neg-c .ante{margin-bottom:14px}
.neg-c .t2{font-size:clamp(30px,3.8vw,52px)}
.neg-c .lead{font-size:16.5px}
.plazas{display:inline-block;margin-top:16px;font-size:14px;color:#ffe3cc;background:rgba(255,106,26,.14);border:1px solid rgba(255,106,26,.45);border-radius:999px;padding:5px 14px}
.neg-pr{display:grid;gap:16px;justify-items:start}
.neg-pr .pr b{display:block;font:800 clamp(64px,7vw,104px)/.85 var(--display);letter-spacing:-.06em;color:var(--cream)}
.neg-pr .pr s{display:block;margin-top:8px;color:var(--dim);font-size:14px}
@media (max-width:760px){.neg-c{grid-template-columns:1fr;border-radius:26px;gap:20px}.neg-pr{grid-template-columns:auto 1fr;align-items:center;justify-items:stretch}}

/* ---------- S9 · preguntas ---------- */
.dudas-g{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px)}
.dudas .lead a{color:var(--cream);font-weight:600}
.faq{display:grid;gap:10px}
.faq details{border-radius:22px;background:var(--char);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transition:background .3s,box-shadow .3s}
.faq details[open]{background:var(--char2);box-shadow:inset 0 0 0 1px rgba(255,106,26,.35)}
.faq summary{list-style:none;cursor:pointer;padding:21px 64px 21px 24px;font:650 17.5px/1.35 var(--sans);position:relative;border-radius:22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:26px;top:50%;width:16px;height:2px;margin-top:-1px;border-radius:2px;background:var(--ember);transition:transform .45s var(--muelle)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details[open] summary::before{transform:rotate(180deg)}
.faq summary:hover{color:#fff}
.faq p{padding:0 24px 22px;color:var(--stone);font-size:16px}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--muelle),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details:target{box-shadow:inset 0 0 0 1.5px var(--ember)}
@media (max-width:860px){.dudas-g{grid-template-columns:1fr;gap:20px}.faq summary{font-size:16px;padding:18px 54px 18px 18px}.faq summary::before,.faq summary::after{right:20px}.faq p{padding:0 18px 18px;font-size:15.5px}}

/* ---------- S10 · cierre (naranja) con móviles que asoman ---------- */
.cierre{text-align:center;overflow:hidden;isolation:isolate;padding:clamp(90px,11vw,160px) 0 0}
.cierre .t2{margin:0 auto 34px;font-size:clamp(44px,8.4vw,132px);line-height:.9;max-width:11em}
.cierre .confia{justify-content:center;color:rgba(22,10,2,.82);font-weight:600}
.cierre-tels{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2vw,30px);margin-top:clamp(40px,6vw,80px);height:clamp(200px,28vw,380px);overflow:hidden}
.cierre-tels .tel{width:clamp(120px,15vw,210px);flex:none;align-self:flex-start;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 4px #060505,0 -10px 60px -20px rgba(80,20,0,.6)}
.ct-1{transform:rotate(-8deg);margin-top:60px}
.ct-2{margin-top:0}
.ct-3{transform:rotate(8deg);margin-top:60px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cierre-tels .tel{animation:asoma linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    .cierre-tels .ct-2{animation-range:entry 10% cover 55%}
  }
}
@keyframes asoma{from{translate:0 45%}}
@media (max-width:700px){.cierre .b{width:100%}.cierre-tels .tel:first-child,.cierre-tels .tel:last-child{margin-top:46px}}

/* pie: la marca en grande, como cierre */
.pie{padding:clamp(40px,6vw,80px) 0 120px;font-size:13.5px;color:var(--dim);overflow:hidden}
.pie-marca{font:800 clamp(64px,15.5vw,250px)/.8 var(--display);letter-spacing:-.07em;color:var(--char2);white-space:nowrap;margin-bottom:clamp(26px,3vw,44px);user-select:none}
.pie-marca span{color:var(--ember)}
.pie-l{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.pie a{color:var(--stone)}

/* barra fija en el móvil: píldora flotante */
.barra-m{position:fixed;z-index:35;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;border-radius:999px;
  background:rgba(17,15,13,.86);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 50px -16px rgba(0,0,0,.9);transform:translateY(160%);transition:transform .55s var(--muelle)}
.barra-m p{display:grid;line-height:1.05}
.barra-m p b{font:800 24px var(--display);letter-spacing:-.04em;color:var(--cream)}
.barra-m p span{font-size:11.5px;color:var(--stone)}
.barra-m .b{min-height:48px;padding:8px 8px 8px 20px;font-size:15.5px}
.barra-m .flecha{width:32px;height:32px}
.barra-m.ver{transform:none}
@media (max-width:899px){.barra-m{display:flex}}

/* WhatsApp / dudas */
.wa{position:fixed;z-index:34;right:14px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 10px;border-radius:999px;background:#1c1a17;box-shadow:inset 0 0 0 1px var(--line2),0 14px 34px -14px rgba(0,0,0,.9);color:var(--cream);font:600 13.5px var(--sans);text-decoration:none;transition:transform .4s var(--muelle),bottom .45s var(--muelle)}
.wa:hover{transform:translateY(-2px)}
.wa-ic{width:24px;height:24px;border-radius:50%;background:#25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 4a8 8 0 0 0-6.9 12.1L4 20l4-1.1A8 8 0 1 0 12 4zm4.3 11.1c-.2.5-1 1-1.5 1-.4.1-.9.1-2.9-.7-2.4-1-3.9-3.4-4-3.6-.1-.2-1-1.3-1-2.4s.6-1.7.8-1.9c.2-.2.4-.3.6-.3h.4c.1 0 .3 0 .5.4l.7 1.7c.1.1.1.3 0 .4l-.3.4-.3.3c-.1.1-.2.3-.1.5.2.3.7 1.1 1.4 1.7.9.8 1.7 1.1 2 1.2.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.5-.1l1.6.8c.2.1.4.2.4.3.1.1.1.6-.1 1.2z'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:899px){.wa{right:12px;bottom:14px;padding:8px;font-size:0;gap:0}.wa-ic{width:30px;height:30px;background-size:20px}body.con-barra .wa{bottom:86px}}

/* halo de luz que sigue al ratón (solo PC) */
.halo{display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .halo{display:block;position:fixed;z-index:30;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;
    background:radial-gradient(closest-side,rgba(255,120,40,.16),rgba(255,106,26,.05) 55%,transparent);transition:opacity .5s var(--ease)}
  .halo.ver{opacity:1}
}

/* ---------- S1b · hoja de cualificación ---------- */
.hoja{position:fixed;inset:auto 0 0;margin:auto auto 0;width:min(560px,100%);max-width:100%;max-height:min(92dvh,760px);border:0;padding:0;background:transparent;color:var(--cream);overflow:visible}
.hoja::backdrop{background:rgba(5,4,3,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.hoja[open]{animation:sube .5s var(--muelle)}
@keyframes sube{from{transform:translateY(60px);opacity:0}}
.hoja-c{position:relative;max-height:min(92dvh,760px);overflow-y:auto;padding:26px 20px calc(20px + env(safe-area-inset-bottom));background:var(--ink2);border:1px solid var(--line2);border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -30px 80px -30px rgba(255,106,26,.4)}
.hoja-c::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line2)}
@media (min-width:640px){.hoja{inset:0;margin:auto}.hoja-c{border-radius:28px;border-bottom:1px solid var(--line2);padding:30px 28px 24px}.hoja-c::before{display:none}}
.hoja-x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--char);color:var(--cream);font-size:22px;line-height:1;cursor:pointer;transition:transform .3s var(--muelle)}
.hoja-x:hover{transform:rotate(90deg)}
.hoja-paso{font:650 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.hoja h2{font:800 26px/1.05 var(--display);letter-spacing:-.04em;margin:6px 46px 16px 0}
.chips{border:0;display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chips legend{font:650 15.5px var(--sans);color:var(--cream);margin-bottom:8px;width:100%}
.chips label{position:relative}
.chips input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;min-height:42px;border:1.5px solid var(--line2);border-radius:999px;padding:7px 14px;font:500 14.5px var(--sans);color:var(--stone);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .3s var(--muelle)}
.chips label:hover span{border-color:var(--stone)}
.chips label:active span{transform:scale(.96)}
.chips input:checked+span{background:var(--ember);color:var(--tinta);border-color:var(--ember);font-weight:650}
.chips input:focus-visible+span{outline:2px solid var(--amber);outline-offset:2px}
.chips input[type=text]{width:100%;min-height:44px;margin-top:4px;background:var(--ink);border:1.5px solid var(--line2);border-radius:12px;color:var(--cream);font:500 16px var(--sans);padding:9px 13px}
.chips input[type=text]:focus{outline:none;border-color:var(--ember)}
.aviso{width:100%;margin-top:6px;font-size:14px;color:#ffd9bd;background:rgba(255,106,26,.1);border:1px solid rgba(255,106,26,.35);border-radius:12px;padding:9px 12px}
.error{margin-top:12px;color:#ff9a7a;font-size:14.5px}
.hoja-b{width:100%;margin-top:20px}
.hoja-pie{margin-top:10px;text-align:center;font-size:13px;color:var(--dim)}
@media (max-width:639px){
  .hoja,.hoja-c{max-height:97dvh}
  .hoja-c{padding:22px 16px 0}
  .hoja h2{font-size:23px;margin:4px 46px 6px 0}
  .hoja-paso{font-size:11px}
  .chips{gap:6px;margin-top:10px}.chips legend{font-size:15px;margin-bottom:6px}
  .chips span{min-height:38px;padding:6px 12px;font-size:14px}
  .hoja-envio{position:sticky;bottom:0;margin:14px -16px 0;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(17,15,13,0),var(--ink2) 28%)}
  .hoja-b{margin-top:0;min-height:56px}
  .hoja-pie{display:none}
}

/* movimiento reducido: versión quieta (las escenas 3D se quedan en su ángulo, sin viajes) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js .rv:not(.in),html.js .tira:not(.in) .dia{opacity:1;translate:none}
  .cinta-in{transform:translateX(-8%)}
}
@media print{.s0,.barra-m,.wa,.hoja,.halo,.cinta{display:none!important}}