/* ============================================================
   BRAZA DRAGON - preview
   Identidad tomada de nuevo.psd / MENU.jpg
   Tipos: Song of Coronos (display) - Dutch Mediaeval Pro (texto) - Abel (UI)
   ============================================================ */

@font-face{font-family:"Coronos";src:url("../fonts/SongOfCoronos.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Dutch";src:url("../fonts/DutchMediaeval-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Dutch";src:url("../fonts/DutchMediaeval-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Dutch";src:url("../fonts/DutchMediaeval-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Dutch";src:url("../fonts/DutchMediaeval-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Abel";src:url("../fonts/Abel-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#080304;
  --ink-2:#140708;
  --maroon:#2b0b0c;
  --blood:#b0181a;
  --blood-hi:#e0332a;
  --ember:#ff7a18;
  --ember-hi:#ffc061;
  --bone:#f0eae0;
  --bone-dim:#c9c0b4;
  --gold:#d0a052;

  --shell:min(1180px,92vw);
  --pad-x:clamp(16px,5vw,64px);
  --frame-h:clamp(30px,6vw,62px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

@property --shine{syntax:"<percentage>";inherits:false;initial-value:120%}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:dark;
  overflow-y:scroll;                 /* la barra existe desde la carga */
  scrollbar-width:thin;
  scrollbar-color:#c62a1a rgba(14,6,7,.6);
}
/* barra de scroll con diseño de brasa */
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{
  background:linear-gradient(#0a0405,#170a0b);
  box-shadow:inset 0 0 6px rgba(0,0,0,.85);
}
::-webkit-scrollbar-thumb{
  border-radius:20px;border:3px solid #0a0405;
  background:linear-gradient(180deg,#ff8a20 0%,#e0332a 42%,#8f1114 100%);
  box-shadow:0 0 8px rgba(224,51,42,.55);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ffc061 0%,#ff5a1e 45%,#b0181a 100%);
}
body{
  min-height:100svh;
  background:var(--ink);
  color:var(--bone-dim);
  font-family:"Dutch",Georgia,"Times New Roman",serif;
  font-size:clamp(15px,1.05vw + 12px,18px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blood);color:#fff}

/* ============================================================
   INTRO - forja del logo en fuego (coreografía con GSAP)
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;overflow:hidden;
  background:#0a0405;
}
/* durante el intro no ocultamos overflow: la barra sigue presente */
/* mismo fondo premium que la página: piel de dragón + viñeta */
.preloader__bg{
  position:absolute;inset:-6%;
  background:url("../img/scales.webp") center / min(760px,62vmax) repeat;
  filter:saturate(.92) brightness(.66);
  opacity:.9;
}
.preloader__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(100% 74% at 50% 46%, rgba(6,2,3,.35) 0%, rgba(5,2,3,.72) 62%, rgba(3,1,1,.96) 100%);
}
/* piso de fuego/libro como en la página */
.preloader__floor{
  position:absolute;left:50%;bottom:0;width:min(1700px,150vw);translate:-50% 0;
  aspect-ratio:1800/381;
  background:url("../img/book.webp") center bottom / 100% auto no-repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(to top,#000 22%,transparent 100%);
          mask-image:linear-gradient(to top,#000 22%,transparent 100%);
}
/* garras de dragón que enmarcan el logo */
.preloader__claw{
  position:absolute;bottom:-2%;width:min(440px,46vw);height:auto;opacity:0;
  pointer-events:none;z-index:2;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.85));
  will-change:transform,opacity;
}
.preloader__claw--r{right:0}
.preloader__claw--l{left:0}
.preloader__aura{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(1050px,124vw);aspect-ratio:1/1;opacity:0;
  background:radial-gradient(circle at 50% 54%, rgba(255,150,55,.55), rgba(224,50,18,.24) 34%, transparent 66%);
  filter:blur(26px);will-change:opacity,transform;
}
.preloader__embers{position:absolute;inset:0;width:100%;height:100%}
.preloader__ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:46px;height:46px;border-radius:50%;opacity:0;
  border:2px solid rgba(255,170,70,.9);
  box-shadow:0 0 48px rgba(255,120,40,.85), inset 0 0 24px rgba(255,150,60,.6);
  will-change:transform,opacity;
}
.preloader__logo{
  position:relative;width:min(660px,90vw);opacity:0;z-index:3;
  will-change:transform,opacity,filter;
}
.preloader__logo-img{
  width:100%;height:auto;
  filter:drop-shadow(0 0 26px rgba(230,60,25,.45)) drop-shadow(0 14px 40px rgba(0,0,0,.7));
}
.preloader__sweep{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("../img/logo-full.png") center/contain no-repeat;
          mask:url("../img/logo-full.png") center/contain no-repeat;
  background:linear-gradient(105deg,transparent 43%,rgba(255,244,214,.95) 50%,transparent 57%);
  background-size:250% 100%;background-position:150% 0;
  mix-blend-mode:screen;opacity:.95;
}
.preloader__flash{
  position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:4;
  background:radial-gradient(circle at 50% 52%, rgba(255,232,195,.95), rgba(255,120,40,.5) 30%, transparent 62%);
}

/* ============================================================
   ESCENARIO - capas de fondo fijas
   (sin background-attachment:fixed, que se rompe en iOS)
   ============================================================ */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.scene__scales{
  position:absolute;inset:-6% -6%;
  background:url("../img/scales.webp") center / min(760px,62vmax) repeat;
  opacity:.62;
  filter:saturate(.9) brightness(.72);
  transform:translate3d(0,0,0) scale(1.04);
  animation:drift 46s var(--ease) infinite alternate;
}
.scene__heat{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 62% at 50% 118%, rgba(255,122,24,.42) 0%, rgba(198,40,12,.20) 34%, transparent 68%),
    radial-gradient(80% 50% at 50% 6%, rgba(120,14,14,.34) 0%, transparent 70%);
  mix-blend-mode:screen;
  animation:pulse 7.5s ease-in-out infinite alternate;
}
.scene__book{
  position:absolute;left:50%;bottom:0;width:min(1700px,150vw);
  translate:-50% 0;
  aspect-ratio:1800/381;
  background:url("../img/book.webp") center bottom / 100% auto no-repeat;
  opacity:.52;
  -webkit-mask-image:linear-gradient(to top,#000 26%,transparent 100%);
          mask-image:linear-gradient(to top,#000 26%,transparent 100%);
}
.scene__embers{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.scene__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(94% 66% at 50% 46%, rgba(3,1,1,.55) 0%, rgba(3,1,1,.30) 46%, transparent 72%),
    radial-gradient(126% 90% at 50% 44%, transparent 34%, rgba(4,1,2,.66) 74%, rgba(3,1,1,.96) 100%);
}
.scene__grain{
  position:absolute;inset:-25%;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}

/* fuego WebGL a pantalla completa */
.firegl{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:40;pointer-events:none;
  mix-blend-mode:screen;opacity:0;
  transition:opacity .6s ease;
  contain:strict;
}
.firegl.on{opacity:1}
/* destello blanco-naranja del "encendido" */
.ignite-flash{
  position:fixed;inset:0;z-index:41;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 50% 108%, rgba(255,180,80,.9), rgba(255,90,20,.5) 30%, transparent 62%);
  mix-blend-mode:screen;
}

/* placas talladas: SIEMPRE fijas; el contenido scrollea por debajo */
.frame{
  position:fixed;left:0;right:0;height:var(--frame-h);
  background:url("../img/border.webp") center / auto 100% repeat-x;
  z-index:50;pointer-events:none;
  filter:saturate(.85) contrast(1.05);
}
.frame--top{top:0;box-shadow:0 16px 34px -16px rgba(0,0,0,.95)}
.frame--bottom{bottom:0;transform:scaleY(-1);box-shadow:0 16px 34px -16px rgba(0,0,0,.95)}

@keyframes drift{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-2.2%,-2.6%,0) scale(1.1)}}
@keyframes pulse{from{opacity:.72}to{opacity:1}}
@keyframes grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-6%,4%)}
  40%{transform:translate(4%,-6%)}
  60%{transform:translate(-4%,-4%)}
  80%{transform:translate(6%,5%)}
  100%{transform:translate(0,0)}
}

/* ============================================================
   ESTRUCTURA
   ============================================================ */
.shell{position:relative;z-index:2}

.hero{
  min-height:min(100svh,840px);
  display:grid;place-items:center;
  padding:calc(var(--frame-h) + clamp(22px,5vh,56px)) var(--pad-x) clamp(26px,4vh,52px);
  position:relative;
  text-align:center;
}
.hero__inner{width:var(--shell);display:grid;justify-items:center;gap:clamp(8px,1.9vh,20px)}

/* --- logo --- */
.crest{position:relative;width:min(560px,88vw,48vh);isolation:isolate}
.crest__img{
  width:100%;
  animation:breathe 6.5s ease-in-out infinite alternate;
}
.crest__ember{
  position:absolute;inset:8% 12%;z-index:-1;
  background:radial-gradient(60% 60% at 50% 55%, rgba(255,110,30,.34), transparent 70%);
  filter:blur(28px);
  animation:pulse 4.2s ease-in-out infinite alternate;
}
@keyframes breathe{
  from{filter:drop-shadow(0 0 26px rgba(196,32,18,.34)) drop-shadow(0 14px 34px rgba(0,0,0,.7));transform:scale(1)}
  to{filter:drop-shadow(0 0 46px rgba(232,58,24,.55)) drop-shadow(0 14px 34px rgba(0,0,0,.7));transform:scale(1.014)}
}

.rule{width:min(420px,64vw);opacity:.9;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}

/* --- titular --- */
.title{
  font-family:"Coronos",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.1rem,min(9.6vw,8vh),5.6rem);
  line-height:.96;
  letter-spacing:.012em;
  display:grid;gap:.02em;
  padding-inline:.06em;
}
.title__line{display:block;position:relative}
.title__line:first-child{
  font-size:.66em;letter-spacing:.05em;color:#e7d9c6;opacity:.96;
  -webkit-text-fill-color:currentColor;
  text-shadow:0 2px 16px rgba(0,0,0,.85),0 0 24px rgba(214,52,26,.28);
}
/* palabra protagonista: COCINANDO, brasa incandescente */
.title__hero{font-size:1.16em}
.title .w{
  display:inline-block;
  background-image:
    linear-gradient(105deg,transparent 45%,rgba(255,248,232,.9) 50%,transparent 55%),
    linear-gradient(168deg,
      #fff6ec 0%, #ffe4c2 18%, #ffb066 34%,
      #ff7a1e 50%, #e6371f 68%, #b0141a 84%, #6d0f10 100%);
  background-size:250% 100%, 100% 100%;
  background-position:var(--shine) 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,214,150,.22))
         drop-shadow(0 0 30px rgba(255,110,28,.5))
         drop-shadow(0 0 64px rgba(214,40,20,.42))
         drop-shadow(0 12px 26px rgba(0,0,0,.9));
  animation:heatpulse 3.6s ease-in-out infinite alternate, shine 6s var(--ease) infinite;
}
.title__line:first-child .w{
  animation:none;
  background:none;
  -webkit-text-fill-color:currentColor;color:inherit;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.85));
}
@keyframes heatpulse{
  from{filter:drop-shadow(0 1px 0 rgba(255,214,150,.20)) drop-shadow(0 0 24px rgba(255,110,28,.42)) drop-shadow(0 0 52px rgba(214,40,20,.34)) drop-shadow(0 12px 26px rgba(0,0,0,.9))}
  to{filter:drop-shadow(0 1px 0 rgba(255,230,180,.30)) drop-shadow(0 0 40px rgba(255,132,40,.62)) drop-shadow(0 0 84px rgba(230,55,25,.52)) drop-shadow(0 12px 26px rgba(0,0,0,.9))}
}
@keyframes shine{0%,66%{--shine:130%}100%{--shine:-30%}}

.lede{
  font-style:italic;
  font-size:clamp(.98rem,2.4vw,1.28rem);
  color:#ddd2c4;
  max-width:34ch;
  text-wrap:balance;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}

/* --- botones --- */
.actions{display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,16px);justify-content:center;margin-top:clamp(2px,1vh,10px)}
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:clamp(46px,5.4vh,54px);padding:0 clamp(20px,4vw,32px);
  font-family:"Abel",system-ui,sans-serif;
  font-size:clamp(.92rem,1.6vw,1.02rem);
  letter-spacing:.18em;text-transform:uppercase;
  color:#fff2e6;
  border:1px solid rgba(224,51,42,.55);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(120,16,14,.55),rgba(42,6,7,.75));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 12px 32px -14px rgba(224,51,42,.9);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.btn__flame{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 160% at 50% 130%, rgba(255,138,32,.85), rgba(190,26,18,.3) 46%, transparent 72%);
  translate:0 42%;opacity:.55;
  transition:translate .5s var(--ease-out), opacity .5s var(--ease-out);
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  border-color:var(--ember);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 18px 44px -12px rgba(255,122,24,.75);
}
.btn:hover .btn__flame,.btn:focus-visible .btn__flame{translate:0 8%;opacity:1}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:rgba(10,4,5,.42);
  border-color:rgba(226,214,198,.24);
  color:var(--bone-dim);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}
.btn--ghost:hover{border-color:rgba(226,214,198,.6);color:var(--bone)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* --- social + dominio --- */
.social{list-style:none;display:flex;gap:14px;margin-top:clamp(0px,.6vh,8px)}
.social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(226,214,198,.2);
  color:var(--bone-dim);
  transition:color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease-out);
}
.social svg{width:20px;height:20px;fill:currentColor}
.social a:hover{color:#fff;border-color:var(--blood-hi);box-shadow:0 0 22px -4px rgba(224,51,42,.85);transform:translateY(-3px)}
.social__wa:hover{color:#25d366!important;border-color:#25d366!important;box-shadow:0 0 22px -4px rgba(37,211,102,.85)!important}

.domain{
  font-family:"Abel",system-ui,sans-serif;
  letter-spacing:.26em;text-transform:uppercase;
  font-size:clamp(.72rem,1.9vw,.86rem);
  color:#9d9086;
}
.domain span{color:var(--blood-hi)}

/* ============================================================
   MENU
   ============================================================ */
.menu{
  padding:clamp(28px,5vh,60px) var(--pad-x) calc(var(--frame-h) + clamp(40px,7vh,90px));
  display:grid;justify-items:center;gap:clamp(28px,5vh,52px);
}
.menu__head{display:grid;justify-items:center;gap:.4rem;text-align:center}
.kicker{
  font-family:"Abel",system-ui,sans-serif;
  letter-spacing:.4em;text-transform:uppercase;
  font-size:.74rem;color:var(--blood-hi);
}
.menu__title{
  font-family:"Coronos",Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,8vw,4.4rem);line-height:1;letter-spacing:.02em;
  color:var(--bone);
  text-shadow:0 0 30px rgba(214,52,26,.35),0 8px 24px rgba(0,0,0,.9);
}
.menu__sub{font-style:italic;color:#a99e93;font-size:.98rem}

.cards{
  width:var(--shell);
  display:grid;gap:clamp(18px,3.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.card{
  position:relative;display:block;padding:0;border-radius:3px;overflow:hidden;
  border:1px solid rgba(226,214,198,.14);
  background:#0b0405;
  box-shadow:0 26px 60px -30px rgba(0,0,0,1);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .5s var(--ease);
}
.card img{width:100%;transition:transform .8s var(--ease-out)}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,2,3,.9));
  opacity:.8;transition:opacity .5s var(--ease);
}
.card__tag{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:"Abel",system-ui,sans-serif;
  letter-spacing:.3em;text-transform:uppercase;font-size:.72rem;
  color:var(--bone);text-shadow:0 2px 10px #000;
}
.card:hover,.card:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(224,51,42,.6);
  box-shadow:0 40px 80px -34px rgba(0,0,0,1),0 0 44px -18px rgba(224,51,42,.8);
}
.card:hover img{transform:scale(1.035)}
.card:hover::after{opacity:.55}

.foot{
  font-family:"Abel",system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:#6f645c;
  text-align:center;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{
  width:100vw;max-width:100vw;height:100svh;max-height:100svh;
  border:0;padding:0;background:rgba(4,1,2,.97);color:var(--bone-dim);
  overscroll-behavior:contain;
}
.lb::backdrop{background:rgba(3,1,1,.9)}
.lb[open]{display:grid;grid-template-rows:1fr auto}
.lb__scroll{
  overflow:auto;display:grid;place-items:center;min-height:0;
  padding:calc(env(safe-area-inset-top) + 58px) clamp(10px,3vw,28px) 8px;
  -webkit-overflow-scrolling:touch;
}
/* el menu completo entra en pantalla (nada cortado); rueda del mouse = zoom */
.lb__scroll img{
  max-width:100%;
  max-height:calc(100svh - env(safe-area-inset-top) - 118px);
  width:auto;height:auto;
  object-fit:contain;border-radius:3px;
  box-shadow:0 30px 90px -40px #000,0 0 0 1px rgba(226,214,198,.08);
  animation:lbIn .5s var(--ease-out) both;
  transform-origin:center center;
  will-change:transform;cursor:zoom-in;
  touch-action:pan-y;
}
.lb__scroll.zoomed{overflow:hidden}
.lb__scroll.zoomed img{cursor:grab;touch-action:none}
/* controles de zoom (PC y móvil) */
.lb__zoom{
  position:fixed;left:50%;translate:-50% 0;
  bottom:calc(env(safe-area-inset-bottom) + 62px);z-index:6;
  display:flex;align-items:center;gap:2px;
  background:rgba(12,4,5,.72);border:1px solid rgba(226,214,198,.18);
  border-radius:30px;padding:5px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -14px #000;
}
.lb__zoom button{
  min-width:44px;height:40px;padding:0 12px;
  color:var(--bone);font-family:"Abel",system-ui,sans-serif;
  font-size:1.15rem;line-height:1;border-radius:24px;
  display:grid;place-items:center;
  transition:background .25s,color .25s;
}
.lb__zoom button:hover,.lb__zoom button:focus-visible{background:rgba(224,51,42,.28)}
.lb__zoom #lbReset{font-size:.72rem;letter-spacing:.12em}
/* pista de zoom */
.lb__hint{
  position:fixed;left:50%;translate:-50% 0;
  top:calc(env(safe-area-inset-top) + 14px);z-index:5;
  font-family:"Abel",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  font-size:.66rem;color:#b6a99b;
  background:rgba(12,4,5,.55);border:1px solid rgba(226,214,198,.16);
  padding:7px 14px;border-radius:20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  pointer-events:none;opacity:.9;
}
@media (hover:none){.lb__hint{display:none}}
/* en pantallas altas y estrechas (movil) deja el menu grande y con scroll para leer */
@media (max-width:640px){
  .lb__scroll{align-items:start}
  .lb__scroll img{max-height:none;width:100%}
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__cap{
  font-family:"Abel",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  font-size:.72rem;text-align:center;
  padding:12px 16px calc(env(safe-area-inset-bottom) + 16px);
  color:#8d8177;
}
.lb__close{
  position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:14px;z-index:5;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(226,214,198,.28);background:rgba(12,4,5,.7);
  color:var(--bone);font-size:1.05rem;line-height:1;
  display:grid;place-items:center;
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  transition:border-color .3s,color .3s,transform .3s var(--ease-out);
}
.lb__close:hover{border-color:var(--blood-hi);transform:rotate(90deg)}

/* ============================================================
   ENTRADA - solo se oculta si el JS de animacion arranco
   ============================================================ */
.js [data-anim],.js [data-r]{opacity:0}

/* ============================================================
   RESPONSIVE / PREFERENCIAS
   ============================================================ */
@media (max-width:560px){
  :root{--shell:100%}
  /* el hero se ajusta a su contenido (sin banda vacía); el menú asoma debajo */
  .hero{
    min-height:auto;
    padding-top:calc(var(--frame-h) + 26px);
    padding-bottom:clamp(30px,5vh,52px);
  }
  .hero__inner{gap:clamp(18px,3.4vh,32px)}
  .crest{width:min(620px,94vw)}
  .rule{width:min(460px,72vw)}
  .title{font-size:clamp(2rem,10.6vw,3.6rem)}
  .lede{font-size:1.06rem}
  .social a{width:46px;height:46px}
  /* el menú empieza justo después: nada de banda vacía */
  .menu{padding-top:clamp(30px,6vh,64px)}
}
@media (min-width:1024px){
  .hero__inner{gap:clamp(18px,2.6vh,30px)}
}
@media (hover:none){
  .card:hover{transform:none}
  .card:hover img{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js [data-anim],.js [data-r]{opacity:1!important;transform:none!important}
  .preloader{display:none!important}
}