/* 10 cenas en 5 minutos · piezas propias encima de base.css (esqueleto de quesos) */

/* ---------- hero ---------- */
.h1a{color:var(--leche)}
.h1b{color:var(--leche2);font-size:.6em;line-height:1}
.h1c{color:var(--posit);position:relative;width:max-content}
.h1c::after{content:none}
.h1c .cinco{display:inline-block;font-size:1.5em;line-height:.7;vertical-align:-.12em;margin-right:.06em;color:var(--posit);text-shadow:0 0 40px rgba(255,178,56,.45)}
.sellos-hero li{border-color:var(--posit);color:var(--posit)}
.sellos-hero li:nth-child(2){border-color:#8fd3ff;color:#8fd3ff}
.sellos-hero li:nth-child(3){border-color:var(--relleno);color:var(--relleno);transform:rotate(-2deg)}

/* story de IG con las 10 cenas, el cronómetro y los envases recortados */
.story-wrap{position:relative;justify-self:center;width:min(100%,400px);perspective:1200px}
.story{position:relative;aspect-ratio:9/15.2;border-radius:28px;overflow:hidden;background:#000;border:1px solid var(--borde);box-shadow:0 50px 90px -30px rgba(0,0,0,.75);transform:rotate(1.2deg);transform-style:preserve-3d}
.story::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,178,56,.8),transparent 35%,transparent 65%,rgba(255,63,120,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.st-media,.st-media .slide{position:absolute;inset:0;width:100%;height:100%}
.st-media .slide{object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s}
.st-media .slide.on{opacity:1;animation:kb 4.6s linear forwards}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-2%,2%)}}
.story::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,transparent 22%,transparent 52%,rgba(0,0,0,.82) 100%);pointer-events:none}
.st-bars{position:absolute;top:10px;left:10px;right:10px;z-index:4;display:flex;gap:3px}
.st-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.st-bars b{display:block;height:100%;width:0;background:#fff}
.st-bars i.ya b{width:100%}
.st-head{position:absolute;top:22px;left:12px;right:12px;z-index:4;display:flex;align-items:center;gap:8px;font-size:.85rem;color:#fff}
.st-head img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}
.st-head span{color:rgba(255,255,255,.75)}
.st-reloj{position:absolute;top:66px;right:14px;z-index:4;width:92px;height:92px;display:grid;place-items:center;border-radius:50%;background:rgba(14,20,40,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
.st-reloj svg,.crono-reloj svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pista{fill:none;stroke:rgba(255,255,255,.16);stroke-width:8}
.arco{fill:none;stroke:var(--posit);stroke-width:8;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0}
.st-t{position:relative;font-family:Bebas,sans-serif;font-size:2rem;line-height:1;color:#fff;letter-spacing:.02em}
.st-pie{position:absolute;left:16px;right:16px;bottom:18px;z-index:4;display:grid;gap:4px}
.st-modo{justify-self:start;padding:4px 10px;border-radius:99px;background:var(--posit);color:var(--tinta);font-weight:800;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase}
.st-tit{font-family:Bebas,sans-serif;font-size:2.5rem;line-height:.95;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.st-packs{position:absolute;left:10px;right:10px;bottom:100px;z-index:4;height:110px;pointer-events:none}
.st-packs img{position:absolute;bottom:0;width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}
.st-tap{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:1fr 1fr}
.st-tap button{background:none;border:0;cursor:pointer}

/* ---------- 1 · excusas ---------- */
.excusas{background:linear-gradient(180deg,transparent,rgba(37,50,89,.55) 16%,rgba(37,50,89,.55) 90%,transparent)}
.excs{display:flex;gap:14px;margin:28px calc(-1*var(--gut)) 0;padding:6px var(--gut) 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
.excs::-webkit-scrollbar{display:none}
.exc{flex:0 0 min(78vw,300px);scroll-snap-align:start;height:380px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;perspective:1300px}
.exc-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.exc.vuelta .exc-in{transform:rotateY(180deg)}
.exc-cara,.exc-dorso{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.exc-cara{padding:22px;background:linear-gradient(165deg,#3a4a80,#28355f);border:1px solid var(--borde);box-shadow:0 26px 40px -24px rgba(0,0,0,.8)}
.exc-cara::after{content:"“";position:absolute;right:14px;bottom:-40px;font-family:Serif,Georgia,serif;font-size:13rem;line-height:1;color:rgba(255,178,56,.12)}
.exc-n{font-weight:700;font-size:.8rem;color:var(--leche3)}
.exc-frase{margin:auto 0;font-family:Hand,cursive;font-weight:700;font-size:2.55rem;line-height:1.02;color:var(--leche)}
.exc-toca{font-size:.92rem;color:var(--leche2)}
.exc-toca b{color:var(--posit)}
.exc-dorso{transform:rotateY(180deg);background:#151d36;border:1px solid rgba(255,178,56,.4)}
.exc-dorso img{width:100%;height:46%;object-fit:cover}
.exc-resp{padding:16px 18px 6px;font-size:1.04rem;line-height:1.4;color:var(--leche)}
.exc-cena{margin-top:auto;padding:12px 18px 16px;font-size:.88rem;color:var(--leche2)}
.exc-cena b{color:var(--posit)}
.exc:focus-visible{outline:none}
.exc:focus-visible .exc-in{outline:3px solid var(--posit);outline-offset:4px;border-radius:24px}
.excusas .caso{margin-top:0}

/* ---------- 2 · las 10 cenas ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.filtros button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:99px;border:1.5px solid var(--borde);background:rgba(255,255,255,.03);font-weight:700;font-size:.95rem;color:var(--leche2);cursor:pointer;transition:background .25s,color .25s}
.filtros svg{width:19px;height:19px}
.filtros b{font-weight:800;color:var(--leche3)}
.filtros button[aria-selected="true"]{background:var(--leche);border-color:var(--leche);color:var(--tinta)}
.filtros button[aria-selected="true"] b{color:var(--tinta)}
.cenas-grid{display:grid;gap:22px;margin-top:26px}
.cena{display:grid;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,rgba(49,64,111,.8),rgba(37,50,89,.8));border:1px solid var(--borde);box-shadow:0 30px 50px -34px rgba(0,0,0,.9)}
.cena[hidden],.entre[hidden]{display:none}
.cena-foto{position:relative;aspect-ratio:4/4.3;overflow:hidden;background:#222c4c}
.cena-foto>img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;transition:transform .8s var(--ease)}
.cena:hover .cena-foto>img{transform:scale(1.05)}
.cena-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 30%,transparent 62%,rgba(10,15,30,.7));pointer-events:none}
.cena-n{position:absolute;left:14px;top:12px;z-index:2;font-family:Bebas,sans-serif;font-size:3.4rem;line-height:.8;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.cena-n small{font-size:.38em;margin-right:2px;vertical-align:top}
.cena-modo{position:absolute;left:14px;top:62px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:99px;font-weight:800;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:var(--tinta);background:#8fd3ff}
.cena-modo svg{width:16px;height:16px}
.cena-modo.m-frio{background:#8fd3ff}.cena-modo.m-micro{background:var(--ambar)}.cena-modo.m-sarten{background:var(--relleno);color:#fff}
.reloj-mini{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--posit);color:var(--tinta);font-weight:800;font-size:.7rem;line-height:1;box-shadow:0 0 0 5px rgba(255,178,56,.25),0 12px 24px -8px rgba(0,0,0,.6);transform:rotate(8deg)}
.reloj-mini b{font-family:Bebas,sans-serif;font-weight:400;font-size:2.1rem;margin-bottom:-6px}
.cena-packs{position:absolute;left:8px;right:6px;bottom:-8px;z-index:2;display:flex;justify-content:flex-end;align-items:flex-end}
.cena-packs img{width:21%;max-width:88px;aspect-ratio:1;object-fit:contain;margin-left:-5%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.6));transform-origin:50% 100%}
.cena-packs img:nth-child(odd){transform:rotate(-5deg)}
.cena-packs img:nth-child(even){transform:rotate(4deg) translateY(-6px)}
.cena-body{padding:18px 20px 22px}
.cena h3{font-size:clamp(2.2rem,8vw,2.8rem);line-height:.92}
.cena h3 .serif{display:block;color:var(--posit);font-size:.72em;line-height:1.1}
.cena .chips{margin:12px 0 12px}
.voz-j{color:var(--leche2);font-size:1rem;margin:0 0 16px}
.cena-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hecho-tag{display:none;padding:5px 12px;border-radius:8px;border:2px solid var(--carro);color:var(--carro);font-family:Bebas,sans-serif;font-size:1.3rem;letter-spacing:.04em;transform:rotate(-5deg)}
.cena.hecha .hecho-tag{display:inline-block}
.entre{grid-column:1/-1}
.entre .bisagra{margin:40px auto}
.aviso-casos{margin:26px 0 0;font-size:.8rem;color:var(--leche3)}

/* ---------- hoja de receta ---------- */
.hoja{position:fixed;inset:0;z-index:90;display:grid;align-items:end}
.hoja[hidden]{display:none}
.hoja-fondo{position:absolute;inset:0;background:rgba(8,12,26,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade .3s both}
.hoja-in{position:relative;display:flex;flex-direction:column;max-height:92vh;max-height:92dvh;overflow:hidden;border-radius:26px 26px 0 0;background:#1a2442;border-top:1px solid var(--borde);box-shadow:0 -30px 60px -20px rgba(0,0,0,.7);animation:sube .45s var(--ease) both;outline:0}
.hoja-barra{position:relative;flex:none;display:flex;justify-content:center;align-items:center;height:52px;border-bottom:1px solid var(--borde)}
.asa{width:44px;height:5px;border-radius:5px;background:var(--leche3);opacity:.5}
.hoja-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px calc(28px + env(safe-area-inset-bottom))}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hoja-x{position:absolute;right:10px;top:4px;width:44px;height:44px;border-radius:50%;border:0;background:var(--noche3);color:var(--leche);font-size:1.7rem;line-height:1;cursor:pointer}
.hoja-cab{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;margin-bottom:16px}
.hoja-cab img{width:96px;height:120px;border-radius:16px;object-fit:cover}
.hoja-meta{margin:0 0 4px;font-size:.8rem;font-weight:700;color:var(--posit);text-transform:uppercase;letter-spacing:.04em}
.hoja-cab h3{font-size:2.2rem;line-height:.92}
.hoja-cab h3 .serif{display:block;font-size:.7em;color:var(--leche2)}
.crono{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;padding:16px;border-radius:22px;background:linear-gradient(150deg,#2c3a68,#222c4c);border:1px solid rgba(255,178,56,.35)}
.crono-reloj{position:relative;width:118px;height:118px;display:grid;place-items:center}
.crono-t{position:relative;font-family:Bebas,sans-serif;font-size:2.6rem;line-height:1;color:#fff}
.crono.fin .arco{stroke:var(--carro)}
.crono-ahora{margin:0 0 12px;font-size:1rem;line-height:1.4;color:var(--leche);min-height:2.8em}
.crono-btns{display:flex;flex-wrap:wrap;gap:8px}
.crono-btns .btn{min-height:46px;font-size:1.15rem;padding:8px 16px}
.hoja-h{margin:24px 0 10px;font-family:Bebas,sans-serif;font-weight:400;font-size:1.6rem;line-height:1;letter-spacing:.02em}
.hoja-h small{font-family:Hand,cursive;font-size:1.05rem;color:var(--leche3);margin-left:6px}
.hoja-packs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.hoja-packs li{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:8px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--borde);font-size:.82rem;line-height:1.25}
.hoja-packs img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.hoja-ing{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hoja-ing button{display:grid;grid-template-columns:26px 1fr;gap:10px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--borde);background:rgba(255,255,255,.03);text-align:left;cursor:pointer;color:var(--leche)}
.hoja-ing .ck{width:24px;height:24px;border-radius:7px;border:2px solid var(--leche3);display:grid;place-items:center;font-weight:800;font-size:.9rem;color:var(--tinta)}
.hoja-ing small{display:block;color:var(--leche3);font-size:.85rem}
.hoja-ing .on .ck{background:var(--carro);border-color:var(--carro)}
.hoja-ing .on .ck::after{content:"✓"}
.hoja-ing .on span:last-child{text-decoration:line-through;opacity:.5}
.hoja-pasos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:8px}
.hoja-pasos li{counter-increment:p;position:relative;padding:12px 12px 12px 54px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid transparent;transition:background .3s,border-color .3s,opacity .3s}
.hoja-pasos li::before{content:counter(p);position:absolute;left:12px;top:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--noche3);font-family:Bebas,sans-serif;font-size:1.3rem}
.hoja-pasos li small{display:block;margin-top:2px;font-size:.78rem;color:var(--leche3)}
.hoja-pasos li.ahora{background:rgba(255,178,56,.14);border-color:var(--posit)}
.hoja-pasos li.ahora::before{background:var(--posit);color:var(--tinta)}
.hoja-pasos li.ya{opacity:.5}
.hoja-tips{display:grid;gap:10px;margin:22px 0}
.hoja-tips p{margin:0;padding:14px 16px;border-radius:16px;font-size:.97rem;line-height:1.45}
.hoja-tips b{display:block;font-family:Bebas,sans-serif;font-weight:400;font-size:1.35rem;letter-spacing:.03em}
.truco{background:rgba(111,224,160,.1);border:1px solid rgba(111,224,160,.35)}
.truco b{color:var(--carro)}
.cagada{background:rgba(255,90,78,.1);border:1px solid rgba(255,90,78,.35)}
.cagada b{color:var(--relleno)}
.hecho-btn{width:100%}
.hecho-btn.ya{animation:none;opacity:.7}
.hoja-puente{margin:16px 0 0;text-align:center;color:var(--leche2)}
.hoja-puente a{color:var(--posit);font-weight:700}

/* ---------- 3 · carro ---------- */
.foto-yo{position:relative;margin:26px 0 0;border-radius:22px;overflow:hidden;aspect-ratio:4/4.4}
.foto-yo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.foto-yo figcaption{position:absolute;left:14px;bottom:12px;font-family:Hand,cursive;font-weight:700;font-size:1.7rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);transform:rotate(-3deg)}
.ticket li.grupo{padding:16px 2px 6px;border-bottom:2px solid var(--tinta);font-family:Bebas,sans-serif;font-size:1.35rem;letter-spacing:.04em}
.ticket img{object-fit:contain;background:none;border:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.ticket .ya{margin:16px 0 0;font-size:.9rem;color:#4d5677}
.ticket .ya b{color:var(--tinta)}
#ticket-list{max-height:none}

/* ---------- giro y hablemos ---------- */
.polaroid img{object-position:50% 20%}
.wrap-caso{margin-top:60px}

/* ---------- dock con el contador ---------- */
.dock{grid-template-columns:auto 1fr auto}
.dock-n{display:grid;place-items:center;align-content:center;min-width:54px;padding:0 4px;line-height:1}
.dock-n b{font-family:Bebas,sans-serif;font-weight:400;font-size:1.5rem;color:var(--posit)}
.dock-n span{font-size:.66rem;color:var(--leche2)}
.dock .btn{font-size:1.15rem;padding:10px 14px}

@media (min-width:760px){
  .cenas-grid{grid-template-columns:1fr 1fr}
  .hoja{place-items:center;padding:24px}
  .hoja-in{width:min(680px,100%);max-height:88vh;border-radius:26px}
  .hoja-body{padding:20px 26px 28px}
  .hoja-packs{grid-template-columns:repeat(4,1fr)}
  .hoja-packs li{grid-template-columns:1fr;justify-items:center;text-align:center}
  .hoja-packs img{width:72px;height:72px}
  .dock{width:470px}
}
@media (min-width:980px){
  .excs{display:grid;grid-template-columns:repeat(3,1fr);margin-inline:0;padding-inline:0;overflow:visible}
  .exc{height:400px}
  .cenas-grid{grid-template-columns:repeat(3,1fr)}
  .story-wrap{width:400px}
}
@media (prefers-reduced-motion:reduce){
  .st-media .slide.on{animation:none}
}

/* ================= v2 (22-10 tarde): feedback de Jonathan ================= */
/* nada se sale por los lados: en iPhone la página no puede bailar a izquierda y derecha */
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}
main,section,footer,.cinta{max-width:100vw}

/* cintas: el giro se hace sobre la parte que se ve, no sobre el centro de una tira de 3.000 px */
.cinta{height:clamp(170px,24vw,240px)}
.cinta>div{left:-6vw;transform-origin:56vw 50%}
.cinta .ca{top:36%}.cinta .cb{top:62%}
.cinta.sola .ca{top:50%}

/* casos: antes y ahora enteros, uno al lado del otro, sin cortar el cuerpo */
.duo2,.duo3{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duo2 figure,.duo3 figure{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#222c4c;aspect-ratio:720/1384}
.duo2 img,.duo3 img{width:100%;height:100%;object-fit:cover}
.duo2 figcaption,.duo3 figcaption{position:absolute;left:8px;top:6px;font-family:Hand,cursive;font-weight:700;font-size:1.35rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.duo2 figure:last-child figcaption{color:var(--posit)}
.caso2{display:grid;gap:20px;align-items:center;padding:18px;border-radius:26px;background:rgba(255,255,255,.04);border:1px solid var(--borde)}
.caso2 .duo2{max-width:360px;width:100%;justify-self:center}
.caso2 h4{font-family:Bebas,sans-serif;font-weight:400;font-size:clamp(1.9rem,6vw,2.5rem);line-height:.95;margin:0 0 12px}
.caso2 h4 span{display:block;color:var(--posit)}
.caso2 blockquote{margin:0 0 8px;font-family:Serif,Georgia,serif;font-style:italic;font-size:1.25rem;line-height:1.3}
.caso2 ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.caso2 li{position:relative;padding-left:28px;color:var(--leche2)}
.caso2 li::before{content:"✓";position:absolute;left:0;color:var(--carro);font-weight:800}
.caso2 li.no{text-decoration:line-through;text-decoration-color:rgba(255,90,78,.7);color:var(--leche3)}
.caso2 li.no::before{content:"✗";color:var(--relleno)}

/* tira de alumnas justo después del hero */
.tira-sec{padding:6px 0 10px}
.tira-tit{margin:0 0 12px;color:var(--leche2);font-size:.95rem}
.tira-tit b{color:var(--leche)}
.tira-tit span{color:var(--posit);font-weight:700;white-space:nowrap}
.tira{list-style:none;margin:0;padding:4px var(--gut) 12px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.tira::-webkit-scrollbar{display:none}
.tira li{flex:0 0 auto;scroll-snap-align:start}
.tira a{display:grid;gap:4px;width:186px;padding:8px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--borde);text-decoration:none}
.tira b{font-family:Bebas,sans-serif;font-weight:400;font-size:1.35rem;line-height:1;margin-top:4px}
.tira q{font-size:.8rem;line-height:1.3;color:var(--leche2)}
.duo3{gap:4px}.duo3 figure{border-radius:10px}.duo3 figcaption{font-size:1rem;left:5px;top:2px}

/* bloques entre cenas */
.bloque{position:relative;margin:26px 0;padding:22px 18px;border-radius:26px;background:linear-gradient(150deg,#2c3a68,#222c4c);border:1px solid rgba(255,178,56,.3);overflow:hidden}
.bloque .h3{margin-bottom:18px}
.ojo{margin:0 0 8px;font-family:Hand,cursive;font-weight:700;font-size:1.5rem;color:var(--posit)}
.programa{display:grid;gap:22px}
.programa .video{max-width:300px;justify-self:center;width:100%}
.mini-cta{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:18px}
.mini-cta .btn{font-size:1.1rem;padding:10px 14px;min-height:50px}
.giro.bloque{padding:30px 18px;background:radial-gradient(120% 80% at 0% 0%,rgba(255,63,120,.16),transparent 60%),#1a2442}
.giro.bloque h2{font-size:clamp(2.3rem,8.5vw,4rem);margin-bottom:20px}
.giro .giro-grid{position:relative;z-index:1}
.montse-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:10px;align-items:start}
.montse-grid .video{aspect-ratio:720/1384}
.montse .quien{margin:12px 0 0}
.wrap-caso{margin-top:28px}
.hablemos .final{margin-top:40px}
.cena-actions .btn{animation:none}

@media (min-width:760px){
  .caso2{grid-template-columns:340px 1fr;padding:24px;gap:34px}
  .programa{grid-template-columns:1fr 280px;align-items:center}
  .montse-grid{grid-template-columns:260px 300px}
  .bloque{padding:34px}
}

/* ---------- iPhone: menos carga para que Safari no se quede sin memoria ---------- */
@media (max-width:900px),(hover:none){
  .fondo{background:radial-gradient(90% 50% at 10% 15%,rgba(52,86,184,.45),transparent 70%),radial-gradient(70% 40% at 95% 55%,rgba(255,63,120,.14),transparent 70%),radial-gradient(70% 40% at 40% 100%,rgba(255,174,58,.10),transparent 70%),var(--noche)}
  .fondo i,.fondo::after{display:none}
  .top.solid,.dock{backdrop-filter:none;-webkit-backdrop-filter:none}
  .top.solid{background:rgba(24,33,61,.96)}
  .dock{background:rgba(24,33,61,.97)}
  .st-reloj{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,20,40,.8)}
  .hoja-fondo{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,12,26,.82)}
  .cena-packs img,.st-packs img,.hoja-packs img,.ticket img{filter:none}
  .story,.cinta>div,.giro-fondo,.w>span{will-change:auto}
  .giro-fondo{display:none}
  .btn::after{display:none}
  .btn-main,.btn-wa,.dock .wa{animation:none}
  .st-media .slide.on{animation:none}
}

/* Safari ignora a veces backface-visibility: cada cara se apaga a mitad del giro */
.exc-cara{transform:rotateY(0deg);transition:opacity 0s .4s}
.exc-dorso{opacity:0;transition:opacity 0s .4s}
.exc.vuelta .exc-cara{opacity:0}
.exc.vuelta .exc-dorso{opacity:1}