/* ==========================================================================
   ADORUS — speakeasy by Carbonaro
   Menú digital · hoja de estilo única
   Paleta y tipografía derivadas del PDF oficial (MENU ADORUS R.pdf)
   ========================================================================== */

:root{
  /* — Color — */
  --noir:        #0a0806;
  --noir-deep:   #050403;
  --panel:       #100d0a;
  --gold:        #d09c42;
  --gold-soft:   #e3ba6a;
  --gold-deep:   #a9762a;
  --gold-line:   rgba(208,156,66,.28);
  --gold-faint:  rgba(208,156,66,.12);
  --white:       #f6f2ec;
  --text:        rgba(246,242,236,.94);
  --text-2:      rgba(246,242,236,.62);
  --text-3:      rgba(246,242,236,.54);   /* contraste AA sobre el fondo negro */
  --rule:        rgba(246,242,236,.09);

  /* — Tipografía — */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          "Inter", "Roboto", "Noto Sans", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           "Times New Roman", Georgia, serif;

  /* — Métrica — */
  --topbar-h: 98px;      /* alto real de la barra sticky + holgura */
  --pad: clamp(20px, 5.5vw, 64px);
  --maxw: 1920px;

  /* — Movimiento — */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--noir);
}
body{
  margin:0;
  background:var(--noir);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* `clip` en vez de `hidden`: evita crear un contenedor de scroll que
     rompería el `position:sticky` de la barra de categorías. */
  overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* Textura fina sobre el fondo — evita el “negro plano” */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link{
  position:fixed; top:-100px; left:50%; transform:translateX(-50%);
  z-index:200; padding:12px 22px;
  background:var(--gold); color:#1a1206; border-radius:2px;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
.skip-link:focus{ top:12px; }

:focus-visible{
  outline:1px solid var(--gold);
  outline-offset:4px;
}

/* ==========================================================================
   PORTADA
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:calc(env(safe-area-inset-top) + 8vh) var(--pad) 14vh;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media picture{ display:block; height:100%; }
.hero__img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 46%;
  /* placeholder difuminado mientras carga la imagen real */
  background:#0d0a07;
  animation:fade-in 1.2s var(--ease) both;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    /* leve tono cálido para ligar la fotografía con el dorado de la marca,
       sin tocar los colores del propio archivo */
    linear-gradient(180deg, rgba(94,58,18,.10), rgba(94,58,18,.04)),
    radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.64) 55%, rgba(0,0,0,.88) 100%),
    linear-gradient(180deg, rgba(5,4,3,.74) 0%, rgba(5,4,3,.34) 34%, rgba(5,4,3,.88) 88%, var(--noir) 100%);
}
.hero__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:clamp(34px, 7vh, 60px);
}
.hero__brand{ margin:0; }
.hero__brand img{
  width:clamp(216px, 62vw, 340px);
  height:auto;
  filter:drop-shadow(0 6px 40px rgba(0,0,0,.65));
  animation:rise 1.1s var(--ease) both .1s;
}

.btn-explore{
  position:relative;
  display:inline-block;
  padding:16px 34px;
  border:1px solid var(--gold-line);
  color:var(--white);
  font-size:.72rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  line-height:1;
  background:rgba(10,8,6,.28);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease);
  animation:rise 1.1s var(--ease) both .35s;
}
.btn-explore span{ display:block; transform:translateX(.16em); } /* compensa el tracking */
.btn-explore::after{
  content:""; position:absolute; inset:4px;
  border:1px solid transparent;
  transition:border-color .5s var(--ease);
}
.btn-explore:hover,.btn-explore:focus-visible{
  border-color:var(--gold);
  color:var(--gold-soft);
  background:rgba(208,156,66,.06);
}
.btn-explore:hover::after{ border-color:var(--gold-faint); }
.btn-explore:active{ transform:scale(.985); }

.hero__cue{
  position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom) + 26px);
  transform:translateX(-50%);
  width:1px; height:54px;
  background:linear-gradient(180deg, transparent, var(--gold-line));
  overflow:hidden;
}
.hero__cue span{
  position:absolute; inset-inline:0; height:16px;
  background:linear-gradient(180deg, transparent, var(--gold));
  animation:cue 2.6s var(--ease) infinite;
}

@keyframes cue{
  0%   { transform:translateY(-18px); opacity:0; }
  40%  { opacity:1; }
  100% { transform:translateY(54px); opacity:0; }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@keyframes fade-in{ from{opacity:0} to{opacity:1} }

/* ==========================================================================
   BARRA STICKY + NAVEGACIÓN DE CATEGORÍAS
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(8,6,5,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.topbar__row{
  max-width:var(--maxw);
  margin-inline:auto;
}
.topbar__brand{
  display:flex; justify-content:center;
  padding:10px 0 8px;
}
.topbar__brand img{
  width:auto; height:26px;
  opacity:.95;
  transition:opacity .4s var(--ease);
}
.topbar__brand:hover img{ opacity:1; }

.catnav{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
.catnav::-webkit-scrollbar{ display:none; }
.catnav__list{
  display:flex; align-items:stretch;
  gap:2px;
  padding:0 max(14px, calc((100vw - var(--maxw))/2));
  width:max-content;
  min-width:100%;
}
.catnav__link{
  position:relative;
  display:flex; align-items:center;
  padding:11px 14px 13px;
  min-height:44px;                    /* área táctil cómoda */
  white-space:nowrap;
  font-size:.7rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--text-3);
  transition:color .35s var(--ease);
}
.catnav__link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:8px;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:center;
  transition:transform .45s var(--ease);
}
.catnav__link:hover{ color:var(--text-2); }
.catnav__link[aria-current="true"]{ color:var(--gold-soft); }
.catnav__link[aria-current="true"]::after{ transform:scaleX(1); }

/* ==========================================================================
   EPÍGRAFE
   ========================================================================== */
.epigraph{
  max-width:760px;
  margin-inline:auto;
  padding:clamp(52px,10vw,96px) var(--pad) clamp(30px,6vw,52px);
  text-align:center;
}
.epigraph__kicker{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.6rem,6vw,2.1rem);
  color:var(--gold);
  letter-spacing:.02em;
  line-height:1;
  margin-bottom:26px;
}
.epigraph__text{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(.98rem,3.6vw,1.16rem);
  line-height:1.85;
  color:var(--text-2);
  text-wrap:pretty;
}

/* ==========================================================================
   SECCIONES DE MENÚ
   ========================================================================== */
.sections{ max-width:var(--maxw); margin-inline:auto; }
.loading{
  padding:80px var(--pad);
  text-align:center; color:var(--text-3);
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
}

.section{
  padding:clamp(44px,8vw,80px) var(--pad) clamp(30px,6vw,56px);
  scroll-margin-top:var(--topbar-h);
}
.section + .section{ padding-top:clamp(30px,6vw,56px); }

.section__head{
  position:relative;
  margin-bottom:clamp(28px,5vw,46px);
}
.section__rule{
  display:block; height:1px; width:100%;
  background:linear-gradient(90deg, var(--gold-line), rgba(208,156,66,.02));
  margin-bottom:22px;
}
.section__title{
  font-size:clamp(1.85rem,8.4vw,3.15rem);
  font-weight:800;
  letter-spacing:-.012em;
  line-height:1.02;
  text-transform:uppercase;
  color:var(--white);
}
.section__intro{
  margin-top:12px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(.95rem,3.5vw,1.08rem);
  line-height:1.6;
  color:var(--gold);
  opacity:.92;
  max-width:52ch;
  text-wrap:pretty;
}

/* — Sección destacada: De la Brasa — */
.section--hero{
  position:relative;
  isolation:isolate;
  padding-top:clamp(56px,10vw,96px);
}
.section--hero::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%;
  width:100vw; transform:translateX(-50%);
  background:
    linear-gradient(180deg, rgba(208,156,66,.05) 0%, transparent 44%),
    linear-gradient(180deg, var(--panel), rgba(16,13,10,0) 70%);
  border-top:1px solid var(--gold-faint);
}

/* ---------- Lista de platillos ---------- */
.items{
  display:grid;
  gap:0;
}
.item{
  position:relative;
  padding:22px 0;
  border-bottom:1px solid var(--rule);
}
.item:first-child{ border-top:1px solid var(--rule); }

/* Fotografía del platillo: aparece solo si menu.json trae una ruta en "image".
   Ancho de la columna, formato editorial, sin marco pesado. */
.item__photo{
  margin:0 0 16px;
  overflow:hidden;
  border:1px solid var(--gold-faint);
}
.item__photo img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .9s var(--ease);
}
.item--photo:hover .item__photo img{ transform:scale(1.03); }

.item__head{
  display:flex; align-items:baseline; gap:16px;
}
.item__name{
  flex:1 1 auto;
  font-size:clamp(.87rem,3.7vw,.95rem);
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--white);
  text-wrap:balance;
}
.item__fleur{
  display:inline-block;
  width:13px; height:auto;
  margin-left:9px;
  vertical-align:-1px;
  opacity:.95;
}
.item__price{
  flex:0 0 auto;
  font-size:clamp(.87rem,3.7vw,.95rem);
  font-weight:500;
  letter-spacing:.03em;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.item__desc{
  margin-top:9px;
  max-width:62ch;
  font-size:clamp(.83rem,3.4vw,.9rem);
  line-height:1.68;
  font-weight:300;
  color:var(--text-2);
  text-wrap:pretty;
}
.item__portion{
  margin-top:9px;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--text-3);
}

/* — Variante compacta: Complemento del Chef — */
.items--compact .item{ padding:16px 0; }
.items--compact .item__head{ align-items:baseline; }
.items--compact .item__portion{
  margin-top:5px;
}

/* ==========================================================================
   BANDA EDITORIAL
   Fotografía real del restaurante a todo lo ancho, entre secciones.
   ========================================================================== */
.editorial{
  position:relative;
  margin:clamp(30px,6vw,54px) 0;
  overflow:hidden;
  isolation:isolate;
}
.editorial img{
  width:100%;
  height:clamp(230px, 42svh, 420px);
  object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.6s var(--ease);
}
.editorial.is-in img{ transform:scale(1); }
.editorial__scrim{
  position:absolute; inset:0;
  /* velo cálido y sobrio: mantiene la foto legible sin falsear sus colores */
  background:
    linear-gradient(180deg, var(--noir) 0%, rgba(10,8,6,.34) 26%, rgba(10,8,6,.34) 70%, var(--noir) 100%),
    linear-gradient(90deg, rgba(10,8,6,.30), rgba(10,8,6,0) 40%, rgba(10,8,6,.30));
}
/* hilo dorado que enmarca la banda */
.editorial::after{
  content:""; position:absolute; inset:0;
  border-top:1px solid var(--gold-faint);
  border-bottom:1px solid var(--gold-faint);
  pointer-events:none;
}

@media (min-width:768px){
  .editorial{ margin:clamp(48px,6vw,80px) 0; }
  .editorial img{ height:clamp(300px, 46svh, 500px); }
}

/* ==========================================================================
   HISTORIA
   ========================================================================== */
.story{
  position:relative;
  margin-top:clamp(48px,9vw,90px);
  padding:clamp(58px,11vw,110px) var(--pad);
  text-align:center;
  isolation:isolate;
  overflow:hidden;
}
.story__media{ position:absolute; inset:0; z-index:-1; }
.story__media img{ width:100%; height:100%; object-fit:cover; object-position:78% 58%; }
.story__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--noir) 0%, rgba(6,5,4,.90) 26%, rgba(6,5,4,.92) 74%, var(--noir) 100%);
}
.story__inner{ max-width:680px; margin-inline:auto; }
.story__fleur{
  width:34px; height:auto;
  margin:0 auto 26px;
  opacity:.9;
}
.story__title{
  font-size:clamp(1.35rem,5.6vw,2rem);
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:28px;
}
.story__body p{
  font-family:var(--serif);
  font-size:clamp(.92rem,3.5vw,1.04rem);
  line-height:1.9;
  color:var(--text-2);
  text-wrap:pretty;
}
.story__body p + p{ margin-top:18px; }
.story__closing{
  margin-top:30px;
  font-size:.76rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--white);
}
.story__signature{
  margin-top:34px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.25rem,5.4vw,1.7rem);
  color:var(--gold);
  letter-spacing:.01em;
}

/* ==========================================================================
   HORARIO  (bloque de cierre, dentro del footer)
   ========================================================================== */
.hours{ text-align:center; }
.hours__title{
  font-size:.72rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--white);
  margin-bottom:clamp(22px,4vw,30px);
  text-indent:.34em;              /* compensa el tracking al centrar */
}
.hours__list{
  display:grid;
  gap:0;
  max-width:520px;
  margin-inline:auto;
}
.hours__row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
  text-align:left;
}
.hours__row:first-child{ border-top:1px solid var(--rule); }
.hours__days{
  font-size:.72rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold);
}
.hours__time{
  margin:0;
  font-size:.86rem; font-weight:300;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-2);
  white-space:nowrap;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  border-top:1px solid var(--rule);
  padding:clamp(58px,11vw,96px) var(--pad) calc(env(safe-area-inset-bottom) + 48px);
  text-align:center;
  background:var(--noir-deep);
  scroll-margin-top:var(--topbar-h);
}
.footer__logo{
  width:clamp(168px,46vw,210px);
  margin:0 auto clamp(36px,7vw,52px);
  opacity:.92;
}
.footer__note{
  margin-top:clamp(34px,6vw,48px);
  font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,242,236,.5);
}

/* ==========================================================================
   REVELADO AL SCROLL
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1; transform:none;
  will-change:auto;
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */
@media (min-width:768px){
  :root{ --topbar-h:72px; }

  .topbar__row{
    display:flex; align-items:center; gap:28px;
    padding-inline:max(24px, calc((100vw - var(--maxw))/2));
  }
  .topbar__brand{ padding:12px 0; flex:0 0 auto; }
  .topbar__brand img{ height:34px; }
  .catnav{
    flex:1 1 auto;
    mask-image:none;
  }
  .catnav__list{
    justify-content:flex-end;
    padding:0;
    width:auto;
  }
  .catnav__link{ font-size:.68rem; padding:14px 13px 16px; }
  .catnav__link::after{ left:13px; right:13px; bottom:11px; }

  .items{
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:clamp(40px,5vw,80px);
  }
  .items .item:nth-child(2){ border-top:1px solid var(--rule); }

  .items--compact{ column-gap:clamp(40px,6vw,90px); }

  .hero__cue{ bottom:34px; }
}

@media (min-width:1280px){
  .section__title{ font-size:3.4rem; }
  .item__desc{ font-size:.88rem; }
}

/* ---- Portada en escritorio: composición editorial a dos columnas ----
   La fotografía original es vertical y de resolución limitada; usarla como
   panel lateral la mantiene nítida en lugar de estirarla a pantalla completa. */
@media (min-width:900px){
  .hero{
    display:grid;
    grid-template-columns:1fr minmax(420px, 46%);
    align-items:stretch;
    padding:0;
    min-height:100svh;
  }
  .hero__media{
    position:relative; inset:auto; z-index:0;
    grid-column:2; grid-row:1;
    overflow:hidden;
  }
  /* la imagen se posiciona en absoluto para que no defina la altura de la fila */
  .hero__img{ position:absolute; inset:0; object-position:50% 50%; }
  .hero__scrim{
    background:
      linear-gradient(90deg, var(--noir) 0%, rgba(10,8,6,.72) 16%, rgba(10,8,6,.12) 46%, rgba(10,8,6,.28) 100%),
      linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 26%, rgba(10,8,6,.10) 70%, rgba(10,8,6,.75) 100%);
  }
  .hero__inner{
    grid-column:1; grid-row:1;
    justify-content:center;
    padding:0 clamp(48px,6vw,104px);
    z-index:1;
  }
  .hero__brand img{ width:clamp(300px,26vw,400px); }

  /* leve calidez detrás del logotipo para que el panel no quede plano */
  .hero__inner::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:radial-gradient(60% 42% at 50% 44%, rgba(208,156,66,.07), transparent 70%);
  }
  .hero__cue{
    position:relative; grid-column:1; grid-row:1;
    align-self:end; justify-self:center;
    left:auto; bottom:auto; transform:none;
    margin-bottom:38px;
  }
}

/* ==========================================================================
   PREFERENCIAS DEL SISTEMA
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  body::before,.hero__media,.story__media,.topbar,.hero__cue{ display:none; }
  body{ background:#fff; color:#000; }
  .item__price,.section__intro,.hours__days{ color:#000; }
}