/* primera pantalla: la sala a media luz. Arriba la marca; su punto naranja es la lámpara y de ahí baja el haz sobre el muro */
.ini{position:relative;height:calc(max(100svh,620px) + var(--r));overflow:hidden;color:#fff;background:#0B0908;--py:calc(var(--nav) - 30px);--mx:0;--my:0;--sp:0}
/* la sala es una fotografía real de un montaje visto desde abajo: la parrilla de truss con sus luces encendidas y los haces en la bruma */
.sala{position:absolute;z-index:0;left:-3%;top:-3%;width:106%;height:103%;object-fit:cover;object-position:50% 12%;filter:grayscale(.75) brightness(.88) contrast(1.06);transform-origin:50% 0;transform:translate3d(calc(var(--mx)*-16px),calc(var(--my)*-10px),0) scale(calc(1.03 + var(--sp)*.06))}
/* tono cálido de la marca sobre la foto, sin tocar su nitidez */
.tinte{position:absolute;z-index:0;inset:0;pointer-events:none;background:#C2581C;mix-blend-mode:soft-light;opacity:.7}
.velo{position:absolute;z-index:0;inset:0;pointer-events:none;background:
 linear-gradient(180deg,rgba(9,7,6,.5) 0,rgba(9,7,6,.3) 22%,rgba(9,7,6,.1) 40%,rgba(9,7,6,.2) 60%,rgba(9,7,6,.9) 86%,#090706 100%),
 radial-gradient(24cqw 11cqw at 50% 14%,rgba(9,7,6,.82) 0,rgba(9,7,6,.6) 45%,rgba(9,7,6,0) 100%),
 radial-gradient(80cqw 50cqw at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%)}
/* grano de película sobre toda la escena */
.grano{position:absolute;z-index:4;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tit{position:relative;z-index:3;padding-top:var(--py);text-align:center;transform:translate3d(calc(var(--mx)*-10px),calc(var(--my)*-6px - var(--sp)*60px),0);opacity:calc(1 - var(--sp)*1.6)}
.marca{display:inline-block;position:relative}
.marca svg{display:block;width:clamp(46px,3.5cqw,66px);height:auto;margin:0 auto;overflow:visible}
.marca .punto{transform-origin:500px 60px;animation:late 3.6s ease-in-out 2.4s infinite}
.marca b{display:block;margin-top:.95cqw;padding-left:.3em;font:600 clamp(28px,2.85cqw,53px)/1 'Montserrat',system-ui,sans-serif;letter-spacing:.3em}
.marca i{display:block;margin-top:.6cqw;padding-left:.36em;font:300 clamp(11px,.84cqw,15.5px)/1 'Montserrat',system-ui,sans-serif;font-style:normal;letter-spacing:.36em;color:rgba(255,255,255,.74)}
.eslogan{margin-top:1.75cqw;padding-left:.3em;font:600 clamp(14px,1.2cqw,22px)/1.2 'Montserrat',system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#fff}
/* el muro */
.muro{position:absolute;z-index:1;left:0;right:0;bottom:var(--r);height:calc(100% - var(--nav) - var(--r));perspective:var(--p,1000px);perspective-origin:calc(50% + var(--mx)*-9%) calc(var(--oy,57.5%) + var(--my)*-7%);transform-origin:50% var(--oy,57.5%);transform:scale(calc(1 + var(--sp)*.16));cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.muro:focus-visible{outline-offset:-8px;border-radius:var(--r)}
.muro.arr{cursor:grabbing}
.pn{position:absolute;left:50%;top:var(--oy,57.5%);width:var(--w);height:var(--H);margin:calc(var(--H)/-2) 0 0 calc(var(--w)/-2);will-change:transform,filter;filter:brightness(var(--b,1)) saturate(var(--s,1));transition:filter .6s}
.pn .cara{position:absolute;inset:0;border-radius:44px;overflow:hidden;background:#1B1E21;box-shadow:0 0 0 1.5px rgba(255,255,255,.12),0 50px 80px -30px rgba(0,0,0,.8)}
/* reflejo en el piso: solo la foto, sin el rótulo */
.pn .refl{position:absolute;left:0;right:0;top:calc(100% + 16px);height:36%;border-radius:44px;overflow:hidden;opacity:.44;filter:blur(4px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0) 80%);mask-image:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0) 80%)}
.pn .refl img{height:calc(var(--H));transform:scaleY(-1)}
.pn img{pointer-events:none;-webkit-user-drag:none}
.pn .cara::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,11,0) 54%,rgba(8,9,11,.78) 100%)}
.pn .tx{position:absolute;z-index:1;left:44px;right:36px;bottom:40px;color:#fff;transition:opacity .6s}
.pn .tx b{display:block;font:500 43px/1.08 'Montserrat',system-ui,sans-serif;letter-spacing:-.035em}
.pn .tx span{display:block;margin-top:14px;font:600 18px/1.2 'Montserrat',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.muro.off .pn{--b:.16;--s:.3}
.muro.off .pn .tx{opacity:0}
/* pausa del muro: visible siempre (web, tablet y teléfono), no solo al pasar el mouse */
.pz{position:absolute;z-index:4;right:var(--m);top:calc(var(--nav) + 18px);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(8,8,10,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:background-color .25s,transform .2s}
.pz:hover{background:rgba(8,8,10,.62)}
.pz:active{transform:scale(.94)}
.pz svg{width:16px;height:16px;display:block}
.pz .ir{display:none}
.pz.on .ip{display:none}
.pz.on .ir{display:block}
.base{opacity:calc(1 - var(--sp)*2);position:absolute;z-index:3;left:var(--m);right:var(--m);bottom:calc(var(--r) + 40px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px}
.base .txt{text-shadow:0 1px 18px rgba(0,0,0,.7)}
.base p{max-width:36ch}
.base h1{white-space:nowrap;font:600 clamp(16px,1.2cqw,20px)/1.3 'Montserrat',system-ui,sans-serif;letter-spacing:-.014em;color:#fff}
.base p{margin-top:5px;font:400 clamp(14px,1.02cqw,16.5px)/1.42 'Montserrat',system-ui,sans-serif;letter-spacing:-.008em;color:rgba(255,255,255,.8)}
.base .acc{display:flex;gap:10px;justify-self:end;grid-column:3;grid-row:1}
.base .paso{grid-column:2;grid-row:1}
.ini .btn.b{box-shadow:inset 0 0 0 1px rgba(255,255,255,.62);color:#fff}
.ini .btn.b:hover{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1px #fff}
.paso{position:relative;display:flex;align-items:center;gap:12px}
/* instrucción de seguir bajando, bajo las flechas de la galería */
.ini-cue{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:600 10.5px/1 'Montserrat',system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.86);text-shadow:0 1px 12px rgba(0,0,0,.8);transition:color .25s}
.ini-cue:hover{color:#fff}
.ini-cue svg{width:14px;height:14px;color:var(--o);animation:iniCue 1.6s ease-in-out infinite}
@keyframes iniCue{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.cuenta{min-width:64px;text-align:center;font:500 15px/1 'Montserrat',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#fff}
.cuenta span{color:rgba(255,255,255,.6)}
.fl{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);transition:background-color .25s,color .25s,transform .2s}
.fl:hover{background:#fff;color:var(--tinta)}.fl:active{transform:scale(.96)}
.fl svg{width:18px;height:18px}
/* entrada: la sala aparece, entra la marca y el muro llega girando y se enciende */
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes baja{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.sala{animation:aparece 2s ease both}
.nav{animation:baja .8s var(--sal) 1s both}
.marca svg{animation:sube 1.1s var(--sal) .35s both}
.marca b{animation:sube 1.1s var(--sal) .5s both}
.marca i{animation:sube 1.1s var(--sal) .62s both}
.eslogan{animation:sube 1.1s var(--sal) .78s both}
.base{animation:sube .9s var(--sal) 2.2s backwards}
.espera .nav,.espera .ini *{animation-play-state:paused!important}
/* teléfono: el muro sube un poco y la base se apila (texto, botones, aviso); la galería se mueve con el dedo */
@media (max-width:900px){
 .ini{--oy:45%;--py:calc(var(--nav) - 8px);height:calc(max(100svh,600px) + var(--r))}
 /* la marca un poco más chica y más abajo: el isotipo no roza el botón Cotizar de la cabecera */
 .marca svg{width:32px}.marca b{font-size:24px}.marca i{font-size:10px}
 .base{grid-template-columns:1fr;gap:14px;bottom:calc(var(--r) + 46px)}
 .base h1{white-space:normal}
 .base .acc{grid-column:1;grid-row:2;justify-self:stretch}
 .base .acc .btn{height:48px;padding:0 16px;font-size:14px}
 .base .acc .btn.b{flex:1}
 .base .paso{grid-column:1;grid-row:3;height:0;justify-content:center}
 .base .paso .fl,.base .paso .cuenta{display:none}
 .ini-cue{top:4px}
 .pz{top:calc(var(--nav) + 10px);width:36px;height:36px}
 .pz svg{width:14px;height:14px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .sala,.nav,.marca svg,.marca b,.marca i,.eslogan,.base{animation:none}
 .ini-cue svg{animation:none}
 .pn{transition:none}
}

/* "Siga bajando" bien presente: pastilla con borde, más grande, y en el teléfono sube para que quede dentro de la primera pantalla */
.ini-cue{gap:12px;padding:13px 22px 13px 24px;border-radius:999px;font-size:13.5px;letter-spacing:.2em;color:#fff;background:rgba(8,8,10,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ini-cue:hover{background:#fff;color:var(--tinta)}
.ini-cue svg{width:20px;height:20px}
.base{bottom:calc(var(--r) + 92px)}
@media (max-width:900px){
 .ini-cue{top:2px;font-size:13px;padding:12px 20px 12px 22px}
 .base{bottom:calc(var(--r) + 70px);gap:10px}
}