:root{
  --negro:#0a0a0c; --rojo:#d7141e; --rojo2:#ff3b44; --blanco:#f4f1ec; --gris:#a3a3a8; --amarillo:#f2b90f;
  --menu:76px; --ease:cubic-bezier(.22,.61,.36,1); --gut:clamp(22px,6vw,110px);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;background:var(--negro)}
body{overflow-x:clip;background:transparent;color:var(--blanco);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.salto{position:fixed;left:12px;top:-60px;z-index:60;background:#fff;color:#000;padding:10px 14px;border-radius:8px;font-weight:700}
.salto:focus{top:12px}

/* polvo negro de fondo */
.polvo{position:fixed;inset:0;z-index:-1;background:#0a0a0c url(polvo-poster.webp) 50% 50%/cover;transform:translateZ(0);pointer-events:none}
.polvo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease)}
.polvo video.listo{opacity:1}
.polvo::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,8,10,.22),rgba(8,8,10,.22)),radial-gradient(ellipse at 50% 40%,rgba(8,8,10,0) 0%,rgba(8,8,10,.5) 100%)}

/* menú */
.menu{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--menu) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 24px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;background:#0a0a0cf5;border-bottom:1px solid #ffffff12;transform:translateZ(0)}
.menu .marca img{height:40px;width:auto;display:block;filter:drop-shadow(0 2px 10px #000)}
.menu nav{display:flex;gap:30px}
.menu nav a{font:700 13px/1 'Manrope';letter-spacing:.14em;text-transform:uppercase;color:#d8d5cf;padding:10px 2px;border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.menu nav a:hover,.menu nav a[aria-current="page"]{color:#fff;border-color:var(--rojo)}
.btn-wa{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--rojo);color:#fff;font:800 14px/1 'Manrope';letter-spacing:.06em;text-transform:uppercase;transition:transform .2s,background .2s;text-shadow:none}
.btn-wa:hover{background:var(--rojo2);transform:translateY(-1px)}
.btn-wa:active{transform:translateY(1px) scale(.98)}
.btn-wa.golpe{animation:golpe .32s linear}
@keyframes golpe{0%,100%{transform:translate(0)}20%{transform:translate(-3px,1px)}40%{transform:translate(3px,-1px)}60%{transform:translate(-2px,0)}80%{transform:translate(2px,1px)}}
.btn-wa svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-grande{min-height:48px;padding:0 26px;font-size:12px;letter-spacing:.12em}
.burger{display:none;width:46px;height:46px;border:1px solid #ffffff30;border-radius:12px;background:#0a0a0c99;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:#fff;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}
.hoja{position:fixed;inset:0;z-index:30;background:#0a0a0cf7;display:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:90px 28px 40px;transform:translateZ(0)}
.hoja.on{display:flex}
.hoja a{font:900 clamp(34px,10vw,56px)/1.1 'Big Shoulders Display';text-transform:uppercase;padding:8px 0}
.hoja a:hover{color:var(--rojo2)}
.hoja .cerrar{position:absolute;top:calc(14px + env(safe-area-inset-top));right:20px;width:46px;height:46px;border-radius:12px;border:1px solid #ffffff30;font-size:26px}

/* estructura de página interna */
main{flex:1;padding-top:calc(var(--menu) + env(safe-area-inset-top))}
.cab{padding:clamp(40px,9vh,110px) var(--gut) clamp(28px,5vh,56px);max-width:1280px}
.etiqueta{display:inline-flex;align-items:center;gap:12px;font:600 10.5px/1.3 'Manrope';letter-spacing:.3em;text-transform:uppercase;color:var(--amarillo)}
.etiqueta i{width:34px;height:3px;background:repeating-linear-gradient(90deg,var(--amarillo) 0 8px,#000 8px 14px)}
h1{font:800 clamp(34px,4.4vw,72px)/1 'Big Shoulders Display';text-transform:uppercase;letter-spacing:.045em;margin:22px 0 0;text-shadow:var(--tshadow)}
h1 em{font-style:normal;color:var(--rojo2);display:block}
h2{font:800 clamp(26px,2.8vw,46px)/1.05 'Big Shoulders Display';text-transform:uppercase;letter-spacing:.04em}
.intro{font:400 clamp(14px,1.05vw,17px)/1.75 'Manrope';color:#cfcbc4;max-width:34em;margin-top:20px;text-shadow:var(--tshadow)}
.bloque{padding:clamp(28px,5vh,60px) var(--gut);max-width:none}

/* aparecer al entrar en pantalla */
.rev{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev.in{opacity:1;transform:none}

/* pie */
.pie{position:relative;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding:26px var(--gut) calc(26px + env(safe-area-inset-bottom));
  background:#0a0a0cf2;border-top:1px solid #ffffff18;font:500 13px/1.4 'Manrope';color:var(--gris);margin-top:clamp(30px,6vh,80px)}
.pie nav{display:flex;gap:22px;flex-wrap:wrap}
.pie a:hover{color:#fff}

@media (max-width:900px){
  :root{--menu:68px}
  .menu{padding-left:16px;padding-right:16px}
  .menu nav,.menu>.btn-wa{display:none}
  .burger{display:flex}
  .menu .marca img{height:34px}
  h1{font-size:clamp(30px,8.6vw,44px)}
  .intro{font-size:14px}
}