/* El Barril Llanero · bio link. Mobile-first. */

@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(assets/fonts/BigShouldersDisplay-800.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(assets/fonts/BigShouldersDisplay-900.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(assets/fonts/HankenGrotesk-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-display:swap;src:url(assets/fonts/HankenGrotesk-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url(assets/fonts/HankenGrotesk-700.woff2) format("woff2")}

:root{
  /* Extraída del logo: rojo #7C0B14, anillo #2E1202, dorado #FCC341, llama #FC7515 */
  --carbon:#211B18;
  --cafe:#35251C;
  --borgona:#57151B;
  --rojo:#7C0B14;
  --rojo-btn:#9A1420;
  --dorado:#E0A83E;
  --crema:#F5EEE3;
  --crema-2:#CDBFAE;      /* texto secundario sobre oscuro */
  --tinta:#2A1A12;        /* texto sobre crema */
  --tinta-2:#5C4636;

  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(1.25rem,6vw,2rem);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;-webkit-tap-highlight-color:transparent}
html::-webkit-scrollbar,body::-webkit-scrollbar,.lightbox::-webkit-scrollbar{display:none;width:0;height:0}
.lightbox{scrollbar-width:none}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){outline:none}
body{
  margin:0;min-height:100svh;overflow-x:hidden;
  background:var(--carbon);color:var(--crema);
  font:400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

:focus-visible{outline:3px solid var(--dorado);outline-offset:3px;border-radius:6px}

.bg{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-1;background:var(--carbon);overflow:hidden;transform:translateZ(0);pointer-events:none}
.bg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.2s ease}
.bg__video.is-ready{opacity:1}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(33,27,24,.12) 0,rgba(33,27,24,.42) 45%,rgba(33,27,24,.62) 100%)}
@media (prefers-reduced-motion:reduce){.bg__video{display:none}}

.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--crema);color:var(--tinta);padding:.7rem 1rem;border-radius:8px;z-index:10;font-weight:700}
.skip:focus{top:.75rem}

.ico--fill{fill:currentColor!important;stroke:none!important}
.ico--social{width:1.4rem!important;height:1.4rem!important}
.ico{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ───── HERO ───── */
.hero{
  position:relative;isolation:isolate;overflow:clip;
  min-height:calc(100svh - 8.5rem);display:flex;align-items:center;justify-content:center;
  padding:max(2rem,env(safe-area-inset-top)) var(--gutter) 2rem;
  text-align:center;
}
.hero__inner{max-width:30rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.hero__text{display:flex;flex-direction:column;align-items:center}
.hero__logo{width:min(58vw,14rem);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.social{display:flex;justify-content:center;gap:.75rem;margin-top:.25rem}
.social a{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  text-decoration:none;font-size:.875rem;font-weight:500;color:var(--crema);
}
.social__ico{
  display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:var(--crema);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.social a:hover .social__ico,.social a:focus-visible .social__ico{background:rgba(255,255,255,.3)}
.social a:active .social__ico{transform:scale(.94)}

/* ───── BIENVENIDA ───── */
/* ───── SECCIONES (centradas, sin fondo: se ve el video) ───── */
.welcome,.block,.hours,.foot{max-width:34rem;margin-inline:auto;text-align:center;padding-inline:var(--gutter);
  color:var(--crema);text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 18px rgba(0,0,0,.65)}
.welcome{padding-bottom:2.5rem}
.welcome h2,.block h2,.hours h2{font:800 clamp(2rem,9.5vw,2.75rem)/1 var(--display);text-transform:uppercase}
.welcome h2{color:var(--crema)}
.block h2,.hours h2{color:var(--dorado)}
.welcome p{margin:1rem auto 0;max-width:32ch}
.block{padding-block:2.25rem}
.block p{margin:.75rem auto 0;max-width:34ch}
.map{margin-top:1.5rem;border-radius:1rem;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.35)}
.map iframe{width:100%;height:100%;border:0;display:block}
.map--empty{background:rgba(255,255,255,.12);color:var(--crema);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.map--empty svg{width:100%;height:100%;display:block}

/* Menú: marco tipo carta, clicable cuando haya imagen */
.menu-card{width:min(68vw,15rem);aspect-ratio:3/4;margin:1.5rem auto 0;padding:.6rem;border-radius:.9rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);text-shadow:none}
.menu-card__inner{height:100%;border:1.5px solid rgba(224,168,62,.8);border-radius:.55rem;display:grid;place-content:center;justify-items:center;gap:.9rem;
  background:rgba(33,27,24,.35)}
.menu-card__title{font:900 2.75rem/1 var(--display);text-transform:uppercase;color:var(--dorado);letter-spacing:.02em}
.menu-card__rule{width:3.5rem;height:1.5px;background:var(--dorado)}
.menu-card__note{font-size:.9375rem;font-weight:500;color:var(--crema)}
.menu-card[role="button"]{cursor:pointer;transition:transform .35s var(--ease),background-color .35s var(--ease)}
.menu-card[role="button"]:hover{transform:translateY(-3px);background:rgba(255,255,255,.2)}
.menu-card[role="button"] .menu-card__note{font-size:0}
.menu-card[role="button"] .menu-card__note::before{content:"Toca para ver";font-size:.9375rem}

/* Visor del menú */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100%;height:100%;overflow:auto;color:var(--crema)}
.lightbox::backdrop{background:rgba(20,15,12,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox img{display:block;width:min(100%,46rem);height:auto;margin:3.5rem auto 2rem;padding-inline:var(--gutter)}
.lightbox__close{position:fixed;top:max(.75rem,env(safe-area-inset-top));right:.75rem;z-index:2;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  color:var(--crema);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);cursor:pointer}

.hours{padding-block:2.25rem 1rem}
.hours__block{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid rgba(245,238,227,.3)}
.hours h2 + .hours__block{margin-top:1.25rem}
.hours h3{font:500 .9375rem/1.3 var(--body)}
.time{font:800 clamp(1.85rem,9vw,2.4rem)/1.1 var(--display);margin-top:.35rem}
.hours__list{margin-top:.5rem;display:grid;gap:1.1rem}
.hours__list dt{font-weight:700;font-size:1.0625rem;color:var(--dorado)}
.hours__list dd.time{margin-top:.1rem}

.foot{--flame-h:clamp(12rem,50vw,18rem);position:relative;isolation:isolate;overflow:hidden;max-width:none;margin:2.5rem 0 0;padding:0;text-align:center}
/* Degradado oscuro muy sutil al fondo: mejora la lectura sin tapar el video */
.foot::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0,rgba(33,25,22,.18) 45%,rgba(33,25,22,.55) 100%)}
/* Llamas dither: Canvas transparente, de lado a lado, en la parte baja */
.foot__flames{position:absolute;left:0;bottom:0;z-index:-1;width:100%;height:var(--flame-h);
  display:block;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
.foot__inner{position:relative;max-width:34rem;margin-inline:auto;padding:2.75rem var(--gutter) calc(max(1.25rem,env(safe-area-inset-bottom)) + var(--flame-h) * .6);
  display:grid;justify-items:center;gap:1rem;color:var(--crema);text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 18px rgba(0,0,0,.65)}
.foot__inner::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:rgba(245,238,227,.35)}
.foot__logo{width:4.25rem;height:4.25rem}
.foot__links{display:flex;gap:.75rem}
.foot__links a{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;color:var(--crema);border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.foot__copy{font-size:.875rem;max-width:30ch;line-height:1.45;margin-top:.25rem}
.foot__credit{font-size:.8125rem}
.foot__credit a{display:inline-block;padding:.8rem .5rem;margin:-.8rem -.5rem;color:var(--dorado);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot__credit a:hover{color:var(--crema)}

.cta{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  margin-top:2rem;min-height:3.5rem;padding:.9rem 1.25rem;
  color:var(--crema);border-radius:.9rem;
  font-weight:700;font-size:1.0625rem;text-decoration:none;
  /* Glassmorphism: mismo vidrio esmerilado que los iconos de redes */
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.cta:hover,.cta:focus-visible{background:rgba(255,255,255,.26)}
.cta:active{transform:scale(.98)}

/* ───── PRELOADER ─────
   1) color de la capa 1  2) el logo aparece suave  3) capa 1 sale a la izquierda
   4) queda la capa blanca con el logo  5) capa blanca baja y descubre el sitio */
.preload{position:fixed;inset:0;z-index:100;pointer-events:none;display:none}
.js.loading .preload,.js .preload.is-run{display:block}
.preload__panel{position:absolute;inset:0;display:grid;place-items:center;will-change:transform;
  transition:transform 1.25s cubic-bezier(.77,0,.175,1)}
.preload__panel--one{background:var(--rojo);z-index:2}
.preload__panel--two{background:#FBF8F3;z-index:1}
.preload__panel img{width:min(52vw,12.5rem);height:auto}
.preload__panel--one img{opacity:0;transform:scale(.94);transition:opacity .8s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
.preload.is-in .preload__panel--one img{opacity:1;transform:none}
.preload.is-step1 .preload__panel--one{transform:translateX(-100%)}
.preload.is-step2 .preload__panel--two{transform:translateY(100%)}

/* ───── REVEAL: aparición lenta al cargar y al hacer scroll ───── */
.js [data-reveal]{opacity:0;translate:0 1.5rem;
  transition:opacity 1.2s var(--ease) var(--d,0s),translate 1.2s var(--ease) var(--d,0s)}
.js [data-reveal].is-in{opacity:1;translate:0 0}
.js.loading{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;translate:none;transition:none}
  .preload{display:none!important}
}

/* ───── ESCRITORIO: adaptación del móvil ───── */

@media (hover:none){.social a:hover .social__ico{background:rgba(255,255,255,.14)}}

.hours{text-shadow:none}