/* ASRA Fantasy World · landing e09-pelicula (mejorada) · autor: Zeiknawn */
@font-face{font-family:"Inter";src:url("motor/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("motor/fonts/instrument-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("motor/fonts/instrument-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --bg:#0b0a10;--bg-2:#13111b;--bg-3:#1b1826;--noche:#06050a;
  --fg:#f4eee6;--fg-1:#d9d0c6;--fg-2:#aaa1b4;
  --acc:#e0ad66;--acc-h:#f0c88c;--arc:#8b7cf6;--rojo:#e0605a;--vivo:#52e08a;
  --line:rgba(244,238,230,.14);--line-2:rgba(244,238,230,.3);
  --fs:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--fd:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);--r:6px;--maxw:1180px;
  --gut:max(20px,env(safe-area-inset-left,0px));--gutr:max(20px,env(safe-area-inset-right,0px));
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --lbh:clamp(44px,9svh,84px);--sec:clamp(72px,10vw,140px);--bar:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--noche)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--fs);overflow-x:hidden;padding-bottom:calc(var(--bar) + var(--sab))}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-weight:400}
::selection{background:rgba(224,173,102,.35)}
:focus-visible{outline:3px solid var(--acc-h);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut) var(--gutr)}
.skip{position:fixed;left:12px;top:-90px;z-index:200;background:var(--acc);color:#14100a;padding:14px 18px;border-radius:var(--r);font:600 14px/1 var(--fs)}
.skip:focus{top:max(var(--sat),12px)}
.cred{font:600 12px/1.45 var(--fs);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.acc{color:var(--acc)}
.t-2{font:italic 400 clamp(42px,9.4vw,104px)/.98 var(--fd);text-wrap:balance}
.t-3{font:italic 400 clamp(30px,5.6vw,52px)/1.02 var(--fd)}
.lead{font-size:clamp(17px,1.4vw,19px);color:var(--fg-1);max-width:46ch;text-wrap:pretty}
.capt{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.capt-n{font:400 22px/1 var(--fd);color:var(--acc)}
.capt-l{width:44px;height:1px;background:var(--line-2)}
section{position:relative}
.sec{padding-block:var(--sec)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:var(--r);font:700 14px/1 var(--fs);letter-spacing:.16em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),background .3s;-webkit-tap-highlight-color:transparent}
.btn-p{background:var(--acc);color:#14100a}
.btn-p:hover{background:var(--acc-h)}
.btn:active{transform:scale(.97)}
.btn-p::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,248,236,.6) 50%,transparent 65%);transform:translateX(-115%);transition:transform .9s var(--ease)}
.btn-p:hover::after{transform:translateX(115%)}
.btn-jugar{width:min(100%,460px);min-height:76px;font-size:clamp(20px,5.4vw,26px);letter-spacing:.3em;padding-left:calc(26px + .3em);box-shadow:0 0 0 1px rgba(255,236,200,.5) inset,0 18px 60px -12px rgba(224,173,102,.55)}
.btn-jugar svg{width:.9em;height:.9em;fill:currentColor;flex:none}
.pulso::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 140% at 50% 50%,rgba(255,244,220,.7),transparent 72%);opacity:0;animation:pulso 2.6s ease-in-out 1.6s infinite}
@keyframes pulso{0%,100%{opacity:0}50%{opacity:.75}}

/* Grano ligero (estático, sin animar para ahorrar GPU) */
.grano{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjgyJyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDEgMCAwIDAgMCAuOTUgMCAwIDAgMCAuODggMCAwIDAgMS4yNSAtLjQyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");background-size:220px}

/* Nav superior (desktop) */
.nav{position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;gap:14px;padding:max(var(--sat),10px) var(--gutr) 8px var(--gut);transition:background .5s}
html.scrolled .nav{background:rgba(11,10,16,.94);box-shadow:0 1px 0 var(--line)}
.nav-logo{font:italic 400 24px/1 var(--fd);min-height:48px;display:flex;align-items:center;margin-right:auto;letter-spacing:.01em}
.nav-l{display:none}
.nav .btn{min-height:48px;padding:0 20px;font-size:12px}
.nav .btn-p{display:none}
@media (min-width:900px){
  .nav{padding-inline:max(var(--gut),calc((100% - var(--maxw))/2))}
  .nav-l{display:flex;gap:4px}
  .nav-l a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font:600 11px/1 var(--fs);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-1);transition:color .3s}
  .nav-l a:hover{color:var(--acc)}
  .nav .btn-p{display:inline-flex}
}

/* JUGAR flotante (iPhone/móvil) */
.fab{position:fixed;z-index:90;left:50%;bottom:calc(10px + var(--sab));transform:translate(-50%,0);width:min(calc(100% - 40px),380px);min-height:56px;border-radius:999px;background:var(--acc);color:#14100a;font:700 16px/1 var(--fs);letter-spacing:.26em;padding-left:.26em;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 40px -6px rgba(0,0,0,.8),0 0 0 1px rgba(255,236,200,.5) inset;transition:transform .5s var(--ease)}
.fab svg{width:14px;height:14px;fill:currentColor}
.fab:active{transform:translate(-50%,0) scale(.97)}
@media (max-width:899px){:root{--bar:76px}}
@media (min-width:900px){.fab{display:none}}
@media (max-height:500px) and (max-width:899px){
  :root{--bar:64px}
  .fab{left:auto;right:max(14px,env(safe-area-inset-right,0px));transform:none;width:auto;min-width:150px;padding-inline:26px;min-height:48px}
  .fab:active{transform:scale(.97)}
}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;overflow:hidden;background:#000;isolation:isolate;padding:calc(var(--lbh) + 24px) 0 calc(var(--lbh) + 20px)}
.hero-bg{position:absolute;inset:-6% 0;z-index:-2;will-change:transform;transform:translate3d(0,calc(var(--p,0) * 14%),0) scale(1.06)}
.ph{background:radial-gradient(120% 80% at 50% 0%,rgba(139,124,246,.28),transparent 60%),radial-gradient(90% 70% at 20% 100%,rgba(224,173,102,.22),transparent 60%),linear-gradient(180deg,#14111f,#0b0a10 80%);background-size:cover;background-position:center}
.ph img{width:100%;height:100%;object-fit:cover}
.hero-bg.ph{width:100%;height:112%}
.hero-bg img{filter:contrast(1.06) saturate(.9) sepia(.1)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,5,10,.55) 0%,rgba(6,5,10,.1) 35%,rgba(6,5,10,.92) 100%)}
.hero-in{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;transform:translate3d(0,calc(var(--p,0) * -40px),0);opacity:calc(1 - var(--p,0) * 1.4)}
.hero-pre{opacity:1}
.hero h1{font:italic 400 clamp(52px,16vw,176px)/.88 var(--fd);text-wrap:balance;letter-spacing:-.01em;text-shadow:0 8px 60px rgba(0,0,0,.7)}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--acc)}
.hero-sub{max-width:34ch;color:var(--fg-1);font-size:clamp(16px,2.2vw,20px);text-wrap:balance}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.hero-note{font:600 11px/1.4 var(--fs);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.lb{position:absolute;left:0;right:0;height:var(--lbh);background:#000;z-index:3;pointer-events:none}
.lb-t{top:0;transform-origin:50% 0}
.lb-b{bottom:0;transform-origin:50% 100%}
.scroll-ind{position:absolute;left:50%;bottom:calc(var(--lbh) / 2 - 8px);z-index:4;width:1px;height:16px;background:var(--fg-2);transform-origin:top;opacity:0}

/* Intro cinematográfica */
.titulo-ap{position:fixed;inset:0;z-index:120;background:#000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;pointer-events:none}
html.js:not(.rm) .titulo-ap{display:flex;animation:ap-fuera 1.4s linear forwards}
html.skipap .titulo-ap{display:none!important}
.titulo-ap .cred{animation:ap-txt 1.2s var(--ease) both}
.titulo-ap .t-3{animation:ap-txt 1.2s var(--ease) .1s both}
@keyframes ap-txt{0%{opacity:0;transform:translate3d(0,14px,0)}22%,72%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes ap-fuera{0%,78%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
html.js:not(.rm) .lb{animation:obt 1s cubic-bezier(.76,0,.24,1) .5s backwards}
@keyframes obt{from{transform:scaleY(3.4)}to{transform:scaleY(1)}}
html.js:not(.rm) .hero-bg{animation:kb 22s ease-out .4s both}
@keyframes kb{from{scale:1.18}to{scale:1}}
html.js:not(.rm) .hero-pre{animation:rise .5s var(--ease) 0s both}
html.js:not(.rm) .hero h1 .l1{animation:rise .5s var(--ease) 0s both}
html.js:not(.rm) .hero h1 .l2{animation:rise .5s var(--ease) .1s both}
html.js:not(.rm) .hero-sub{animation:rise .5s var(--ease) .2s both}
html.js:not(.rm) .hero-cta{animation:rise .5s var(--ease) .3s both}
html.js:not(.rm) .scroll-ind{animation:scrl 2.2s ease-in-out 1.6s infinite}
html.rm .hero-pre{opacity:1}
@keyframes rise{from{opacity:.01;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes scrl{0%{opacity:0;transform:scaleY(0)}40%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:translate3d(0,10px,0) scaleY(1)}}
@media (max-height:500px){
  .hero{padding-block:calc(var(--lbh) + 6px) calc(var(--lbh) + 6px);justify-content:center}
  .hero-in{gap:10px}
  .hero h1{font-size:clamp(40px,9vw,64px)}
  .hero-sub{display:none}
  .btn-jugar{min-height:60px;font-size:20px}
  .hero-pre{display:none}
  .scroll-ind{display:none}
  :root{--lbh:clamp(26px,8svh,40px)}
}
@media (min-width:900px){.hero{justify-content:center}.hero-in{gap:26px}}

/* ===== Reveals ===== */
html.js .rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
html.js .rv.in{opacity:1;transform:none}
html.rm .rv{opacity:1;transform:none;transition:none}

/* ===== MUNDO ===== */
.mundo{background:var(--bg)}
.mundo-grid{display:grid;gap:34px;align-items:center}
.visor{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line),0 40px 90px -30px #000}
.visor .ph{position:absolute;inset:-8% 0;height:116%;transform:translate3d(0,calc(var(--p,.5) * 10% - 5%),0)}
.visor::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(0,0,0,.6);pointer-events:none}
.visor figcaption{position:absolute;left:14px;bottom:12px;z-index:2}
.dato-lista{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--line)}
.dato-lista li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);color:var(--fg-1)}
.dato-lista b{font:400 24px/1 var(--fd);color:var(--acc);min-width:1.4em}
@media (min-width:900px){.mundo-grid{grid-template-columns:1fr 1.15fr;gap:72px}}

/* ===== ENEMIGOS ===== */
.enem{background:var(--noche)}
.enem-head{margin-bottom:36px;display:grid;gap:18px}
.jefe{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(360px,62svh,560px);display:flex;align-items:flex-end;box-shadow:0 0 0 1px rgba(224,96,90,.45),0 40px 100px -30px rgba(224,96,90,.35);margin-bottom:22px;isolation:isolate}
.jefe .ph{position:absolute;inset:0;z-index:-2;background:radial-gradient(80% 70% at 50% 30%,rgba(224,96,90,.35),transparent 65%),linear-gradient(180deg,#1d1016,#0b0a10)}
.jefe::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(6,5,10,.92))}
.jefe-in{padding:26px;display:grid;gap:10px}
.etq{display:inline-flex;align-self:start;justify-self:start;padding:6px 10px;border-radius:3px;font:700 11px/1 var(--fs);letter-spacing:.18em;text-transform:uppercase;background:var(--rojo);color:#1a0808}
.rangos{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutr) 20px var(--gut);margin-inline:calc(var(--gut) * -1) calc(var(--gutr) * -1);scrollbar-width:none;overscroll-behavior-x:contain}
.rangos::-webkit-scrollbar{display:none}
.rango{flex:0 0 min(64vw,230px);scroll-snap-align:start;border-radius:var(--r);background:var(--bg-2);box-shadow:0 0 0 1px var(--line);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .4s}
.rango .ph{aspect-ratio:4/3;background:radial-gradient(90% 80% at 50% 20%,hsla(var(--h),70%,60%,.3),transparent 70%),linear-gradient(180deg,#171320,#0e0c14)}
.rango-t{padding:14px 16px 18px;display:grid;gap:4px}
.rango-r{font:400 30px/1 var(--fd);color:hsl(var(--h),70%,72%)}
.rango p{font-size:14px;line-height:1.45;color:var(--fg-2)}
@media (hover:hover){.rango:hover{transform:translate3d(0,-6px,0);box-shadow:0 0 0 1px var(--acc)}}
@media (min-width:900px){
  .rangos{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0;gap:16px}
  .rango{flex:none}
  .enem-head{grid-template-columns:1fr 1fr;align-items:end}
  .jefe-in{padding:48px;max-width:640px}
}
@media (max-height:500px){.jefe{min-height:300px}}

/* ===== MODOS ===== */
.modos{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.modos-g{display:grid;gap:16px;margin-top:40px}
.modo{position:relative;border-radius:var(--r);padding:28px 24px 30px;background:var(--bg-3);box-shadow:0 0 0 1px var(--line);display:grid;gap:12px;overflow:hidden;isolation:isolate}
.modo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 100% 0%,rgba(139,124,246,.18),transparent 60%)}
.modo-n{font:italic 400 84px/.8 var(--fd);color:transparent;-webkit-text-stroke:1px rgba(244,238,230,.4)}
.modo p{color:var(--fg-1);font-size:16px}
@media (min-width:800px){.modos-g{grid-template-columns:repeat(3,1fr);gap:20px}}

/* ===== VIVO ===== */
.vivo{background:var(--noche);overflow:hidden}
.vivo::before{content:"";position:absolute;left:50%;top:0;width:min(900px,160vw);height:600px;margin-left:calc(min(900px,160vw) / -2);background:radial-gradient(closest-side,rgba(82,224,138,.12),transparent);pointer-events:none}
.live{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;border-radius:999px;box-shadow:0 0 0 1px rgba(82,224,138,.5);font:700 12px/1 var(--fs);letter-spacing:.2em;text-transform:uppercase;color:var(--vivo)}
.live i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--vivo)}
.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--vivo);animation:ping 1.8s ease-out infinite}
html.rm .live i::after{animation:none;opacity:0}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
.vivo-h{display:grid;gap:22px;justify-items:start;margin-bottom:46px}
.tl{position:relative;display:grid;gap:0;padding-left:30px}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--vivo),var(--acc),var(--rojo));transform-origin:top;transform:scaleY(var(--tl,0))}
.paso{position:relative;padding:0 0 34px}
.paso:last-child{padding-bottom:0}
.paso::before{content:"";position:absolute;left:-30px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--acc)}
.paso.fin::before{background:var(--rojo);box-shadow:0 0 0 2px var(--rojo),0 0 24px var(--rojo)}
.paso h3{font:italic 400 clamp(26px,4.4vw,38px)/1.05 var(--fd);margin:4px 0 6px}
.paso p{color:var(--fg-1);max-width:44ch}
@media (min-width:900px){
  .tl{grid-template-columns:repeat(3,1fr);gap:40px;padding:34px 0 0}
  .tl::before{left:0;right:0;top:7px;bottom:auto;height:2px;width:auto;transform-origin:left;transform:scaleX(var(--tl,0))}
  .paso{padding:0}
  .paso::before{left:0;top:-34px}
}

/* ===== CLASES ===== */
.clases{background:var(--bg)}
.cl-g{display:grid;gap:16px;margin-top:40px}
.cl{border-radius:var(--r);background:var(--bg-2);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.cl .ph{aspect-ratio:16/10}
.cl-t{padding:22px 22px 26px;display:grid;gap:8px}
.cl-t p{color:var(--fg-1);font-size:16px}
@media (min-width:800px){.cl-g{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (max-height:500px){.cl .ph{aspect-ratio:21/9}}

/* ===== CREDITOS ===== */
.cred-s{background:var(--noche);overflow:hidden;text-align:center;padding-block:var(--sec)}
.rodillo{position:relative;display:grid;gap:44px;justify-items:center;margin-top:48px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.rodillo .blq{display:grid;gap:8px;transform:translate3d(0,calc(var(--p,.5) * -26px + 13px),0)}
.rodillo .rol{font:600 12px/1.4 var(--fs);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-2)}
.rodillo .nom{font:italic 400 clamp(34px,8vw,64px)/1 var(--fd)}
.rodillo .nom.g{color:var(--acc)}

/* ===== CIERRE ===== */
.cierre{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate;padding-block:calc(var(--lbh) + 30px)}
.cierre .ph{position:absolute;inset:0;z-index:-2;opacity:.9}
.cierre::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%,rgba(6,5,10,.6),rgba(6,5,10,.95))}
.cierre-in{display:flex;flex-direction:column;align-items:center;gap:26px}
.cierre h2{font:italic 400 clamp(46px,12vw,140px)/.92 var(--fd);text-wrap:balance}
.pie{background:#000;padding:30px var(--gutr) 34px var(--gut);text-align:center;display:grid;gap:6px;justify-items:center}
.pie small{font-size:13px;color:var(--fg-2)}
.pend{font-size:.82em;opacity:.8}
@media (max-height:500px){.cierre{min-height:auto;padding-block:50px}.cierre-in{gap:16px}.cierre h2{font-size:48px}}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grano{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero-bg,.hero-in{transform:none!important;opacity:1!important}
}

/* ===== Paso 2: integración de TEXTOS ===== */
.pend{font:500 12px/1.4 var(--fs);letter-spacing:.04em;color:var(--fg-2);opacity:.75}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.mini{border-radius:var(--r);background:var(--bg-2);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.mini .ph{aspect-ratio:16/10}
.mini-t{padding:12px 14px 16px;display:grid;gap:4px}
.mini-t .t-3{font-size:26px}
.mini-t p{font-size:14px;line-height:1.45;color:var(--fg-2)}
@media (min-width:900px){.minis{grid-template-columns:repeat(4,1fr);gap:16px}}
@media (max-height:500px){.minis{grid-template-columns:repeat(4,1fr)}.mini-t p{display:none}}
.rn{font:italic 400 22px/1.1 var(--fd);margin-top:2px}
.modo{padding:0;gap:0}
.modo .ph{aspect-ratio:16/10}
.modo-t{padding:20px 22px 26px;display:grid;gap:10px}
.visor-vivo{margin-bottom:46px}
.tl4 .paso p{font-size:16px}
@media (min-width:900px){.tl4{grid-template-columns:repeat(4,1fr);gap:28px}}
.sk{font-size:14px!important;color:var(--acc)!important}
.sk-i{aspect-ratio:844/390!important;border-radius:4px;overflow:hidden;margin-top:10px;box-shadow:0 0 0 1px var(--line)}
.nom small{font:600 12px/1 var(--fs);letter-spacing:.16em;color:var(--fg-2)}
.rodillo .nom-s{font-size:clamp(22px,4.4vw,34px);max-width:22ch;line-height:1.15}
.ph{position:relative;overflow:hidden}
.ph>img,.ph>picture,.ph>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg.ph{position:absolute}
.visor .ph{position:absolute}
.cierre .ph{position:absolute}
.cierre h2{max-width:16ch}

html.rm .tl::before{transform:none}
html[data-prod] .pend{display:none}

.skills{font:500 13px/1.45 var(--fs);letter-spacing:.03em;color:var(--fg-1);margin-top:10px;opacity:.9}