.intro{position:fixed;inset:0;z-index:1000;overflow:hidden;background:#1c1512;font-family:'Hanken Grotesk',sans-serif}
.ventana{position:absolute;left:0;top:0;right:0;overflow:hidden;background:#846759 url(../img/metal-topo.jpg) 0 0/1024px}
.escena{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity}
.escena img.fondo{display:block;width:100%;height:100%}
#e1{width:1672px;height:941px}
#e2{width:1672px;height:941px}
#e3{width:1672px;height:941px;opacity:0;background:#1c1512}
.hoja{position:absolute;left:698px;top:125px;width:285px;height:565px;background:url(../intro/hoja.png) 0 0/100% 100%;
  transform-origin:0 50%;backface-visibility:hidden}
.firma-pared{position:absolute;left:668px;top:190px;width:300px;height:auto;opacity:1;
  filter:drop-shadow(-1px -1px 0 rgba(255,225,195,.35)) drop-shadow(3px 5px 4px rgba(50,22,8,.5)) drop-shadow(1px 1px 1px rgba(60,26,10,.45));
  -webkit-mask-image:linear-gradient(100deg,#000 0,#000 var(--p),transparent calc(var(--p) + 7%));
  mask-image:linear-gradient(100deg,#000 0,#000 var(--p),transparent calc(var(--p) + 7%));--p:-8%}
.texto-pared{position:absolute;left:528px;width:580px;top:716px;text-align:center;font-size:19px;letter-spacing:.32em;
  text-transform:uppercase;color:#F7EADB;text-shadow:0 1px 2px rgba(50,22,10,.55);opacity:0}
.luz-pared{position:absolute;width:520px;height:420px;margin:-210px 0 0 -260px;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 50% 50% at 50% 42%,rgba(255,226,196,.30),rgba(255,214,176,.12) 45%,rgba(255,210,170,0) 72%)}
.destello{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#FFF4E6,#F3DCC2 60%,#E6C7A6)}
.negro{position:absolute;inset:0;background:#1c1512;pointer-events:none}
.final{position:absolute;inset:0;opacity:0;background:#846759 url(../img/metal-topo.jpg) 0 0/1024px;pointer-events:none}
.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.firma-vuela{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;pointer-events:none;z-index:4}
/* banda inferior (solo móvil) */
.banda{position:absolute;left:0;right:0;bottom:0;display:none;background:#846759 url(../img/metal-topo.jpg) 0 0/1024px;}
.banda::before{content:"";position:absolute;left:0;right:0;top:-80px;height:80px;background:linear-gradient(180deg,rgba(132,103,89,0),#7d6255)}
.banda-contenido{display:none;position:absolute;left:0;right:0;top:18px;display:flex;flex-direction:column;align-items:center;gap:14px}
.firma-banda{width:150px;filter:drop-shadow(0 1px 1px rgba(40,24,16,.6));
  -webkit-mask-image:linear-gradient(100deg,#000 0,#000 var(--p),transparent calc(var(--p) + 7%));
  mask-image:linear-gradient(100deg,#000 0,#000 var(--p),transparent calc(var(--p) + 7%));--p:-8%}
.texto-banda{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#F5E6D6;opacity:0}
/* controles */
.controles{position:absolute;top:22px;right:28px;display:flex;gap:14px;align-items:center;z-index:5}
.c-saltar{min-height:44px;padding:0 18px;border:1px solid rgba(230,160,124,.8);border-radius:3px;background:rgba(40,26,20,.25);
  color:#F5F1EA;font:500 12px 'Hanken Grotesk',sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(2px)}
.c-cv{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:3px;text-decoration:none;
  background:linear-gradient(180deg,#E6A07C,#BB785B 55%,#9A5E43);color:#2A1810;font:600 12px 'Hanken Grotesk',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 2px 0 #7A4128,0 8px 16px rgba(20,12,8,.35)}
@media (max-width:780px){
  .banda{display:block}
  .controles{top:auto;bottom:max(18px,env(safe-area-inset-bottom));left:16px;right:16px;justify-content:space-between}
}
@media (prefers-reduced-motion: reduce){ .intro{display:none} }

.intro.saliendo{transition:opacity .5s ease;opacity:0!important}
html.con-intro,html.con-intro body{overflow:hidden}
html.con-intro .hero-foto{opacity:0}
.hero-foto{transition:opacity .7s ease}
.ver-intro{display:inline-block;margin-top:18px;font:500 12px 'Hanken Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E9D9C8;text-decoration:none;opacity:.75}
.ver-intro:hover,.ver-intro:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}
html.intro-pendiente body::before{content:'';position:fixed;inset:0;z-index:999;background:#1c1512}