/* ============================================================
   BIM BAM BUM BURGER — Estilos
   ------------------------------------------------------------
   Estructura:
   1. Variables & Reset
   2. Utilidades / accesibilidad base
   3. Noise overlay
   4. Hero
   5. Navegación
   6. Layout general
   7. Cabeceras de sección
   8. Items del menú
   9. Badges
   10. Grid dos columnas (Burgers)
   11. Postres
   12. Footer
   13. Animaciones
   14. Responsive (mobile)
   15. Accesibilidad (reduced motion)
   ============================================================ */


/* ── 1. VARIABLES & RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --y:  #f5c300;   /* amarillo neón principal */
  --yd: #c9a000;   /* amarillo oscuro (acentos suaves) */
  --yl: #fff176;   /* amarillo claro (hover) */
  --bk: #080808;   /* negro base */
  --g1: #111111;   /* gris muy oscuro (cards) */
  --g2: #1a1a1a;   /* gris oscuro */
  --g3: #252525;   /* gris medio (bordes) */
  --wh: #f4f0e6;   /* blanco cálido */
  --mu: #969183;   /* gris muted — textos secundarios (contraste AA sobre --bk) */

  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bebas Neue', 'Arial Narrow', 'Oswald', sans-serif;

  --nav-h: 62px;   /* alto de la nav sticky + aire (para el scroll-padding de las anclas) */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);          /* el ancla no queda tapada por la nav */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bk);
  color: var(--wh);
  font-family: var(--font-body);
  overflow-x: hidden;
  overflow-x: clip;
}


/* ── 2. UTILIDADES / ACCESIBILIDAD BASE ── */
/* Foco visible y coherente para navegación por teclado */
a:focus-visible,
.hero-scroll:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: 3px;
  border-radius: 3px;
}



/* ── 3. NOISE OVERLAY ── */
/* Textura de grano sutil para evitar el negro plano */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
  opacity: .6;
}


/* ── 4. HERO ── */
/* Compacto por definición: presencia de marca sin retrasar el acceso a la carta.
   En escritorio se le da algo más de aire (ver media query). */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 30px 24px 24px;
}

/* Anillos decorativos concéntricos */
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245,195,0,.12);
  animation: pulseRing 6s ease-in-out infinite;
}
.hero-ring:nth-child(1) { width: 340px; height: 340px; animation-delay: 0s; }
.hero-ring:nth-child(2) { width: 560px; height: 560px; animation-delay: 1.5s; }
.hero-ring:nth-child(3) { width: 780px; height: 780px; animation-delay: 3s; }

/* Brillo que sigue el cursor (posición controlada por JS) */
.hero-glow {
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,195,0,.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--y);
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp .5s .05s forwards;
}

/* Logo principal del hero */
.hero-logo {
  display: flex;
  justify-content: center;
}
.hero-logo-img {
  width: clamp(200px, 46vw, 380px);
  height: auto;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .55s .12s forwards;
  mix-blend-mode: lighten; /* elimina visualmente el fondo negro del logo */
}

.hero-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--y), transparent);
  margin: 20px auto;
  opacity: 0;
  animation: fadeUp .5s .32s forwards;
}

/* Bloque de información (horario, teléfono, instagram) */
.hero-meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp .5s .24s forwards;
}
.hero-meta-item { text-align: center; }
.hero-meta-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 4px;
}
.hero-meta-value {
  font-size: 15px;
  font-weight: 400;
  color: var(--wh);
}
a.hero-meta-value { text-decoration: none; }
a.hero-meta-value:hover { color: var(--y); }

/* Indicador de scroll "CARTA ↓" */
.hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  opacity: 0;
  animation: fadeUp .5s .4s forwards;
}
.hero-scroll span {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mu);
}
.scroll-arrow {
  width: 18px; height: 18px;
  border-right: 1px solid var(--y);
  border-bottom: 1px solid var(--y);
  transform: rotate(45deg);
  animation: bounceDown 2s ease-in-out infinite;
}


/* ── 5. NAVEGACIÓN ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(8,8,8,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(245,195,0,.14);
  padding: 0 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 2.5px;
  color: var(--mu);
  text-decoration: none;
  padding: 15px 16px;
  position: relative;
  transition: color .2s;
  white-space: nowrap;
}
/* Línea amarilla inferior al hacer hover o cuando está activo */
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 16px; right: 16px;
  height: 2px;
  background: var(--y);
  transform: scaleX(0);
  transition: transform .2s;
}
.nav a:hover        { color: var(--y); }
.nav a:hover::after { transform: scaleX(1); }
/* Estado activo: color + subrayado + leve fondo para que se lea de un vistazo */
.nav a.active        { color: var(--y); }
.nav a.active::after  { transform: scaleX(1); height: 3px; }


/* ── 6. LAYOUT GENERAL ── */
.page {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px 100px;
}


/* ── 7. CABECERAS DE SECCIÓN ── */
.s-head {
  padding: 60px 0 32px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
}
.s-head-number {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--y);
  opacity: .7;
  padding-bottom: 8px;
}
.s-head h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 76px);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--wh);
}
/* Línea decorativa que rellena el espacio restante */
.s-head-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(245,195,0,.35), transparent);
  margin-bottom: 12px;
}
/* La primera sección va pegada a la nav: no necesita tanto aire superior */
.page > section:first-child .s-head { padding-top: 40px; }


/* ── 8. ITEMS DEL MENÚ ── */
.items { display: grid; gap: 0; }

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--g3);
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
.item:last-child { border-bottom: none; }

/* Destello dorado diagonal al hacer hover */
.item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(245,195,0,.03), transparent);
  transform: translateX(-100%);
  transition: transform .55s ease;
  pointer-events: none;
}
.item:hover::before  { transform: translateX(100%); }
.item:hover          { border-color: rgba(245,195,0,.2); }

.item-left  { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.item-name {
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: 1.5px;
  color: var(--wh);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  transition: color .2s;
}
.item:hover .item-name { color: var(--yl); }

.item-desc {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--mu);
  line-height: 1.55;
  max-width: 560px;
}

.item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-top: 2px;
}
.item-price {
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: 1px;
  color: var(--y);
  white-space: nowrap;
}


/* ── 9. BADGES ── */
/* Para añadir un badge nuevo: añade una clase .b-xxx aquí y úsala en el HTML */
.badge {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2.5px 7px;
  border-radius: 3px;
  white-space: nowrap;
  position: relative;
  top: -1px;               /* alinea óptimamente con la mayúscula de Bebas */
}
.b-hot  { background: rgba(220,50,40,.14);  color: #ff8b7c; border: 1px solid rgba(220,50,40,.3);  }
.b-new  { background: rgba(0,200,160,.1);   color: #22d9b0; border: 1px solid rgba(0,200,160,.26); }
.b-best { background: rgba(245,195,0,.12);  color: var(--y); border: 1px solid rgba(245,195,0,.28); }


/* ── 10. GRID DOS COLUMNAS (Burgers) ── */
.items-2 { display: grid; gap: 0; }

@media (min-width: 760px) {
  .items-2 {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }
}


/* ── 11. POSTRES ── */
.postres-card {
  margin-top: 8px;
  padding: 32px 36px;
  border: 1px solid rgba(245,195,0,.2);
  border-radius: 2px;
  background: var(--g1);
  display: flex;
  align-items: center;
  gap: 24px;
}
.postres-icon { font-size: 36px; flex-shrink: 0; }
.postres-text h3 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--y);
  margin-bottom: 6px;
}
.postres-text p {
  font-size: 14px;
  font-weight: 300;
  color: var(--mu);
  line-height: 1.6;
}


/* ── 12. FOOTER ── */
footer {
  border-top: 1px solid var(--g3);
  padding: 44px 24px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.footer-logo-img {
  width: clamp(180px, 40vw, 300px);
  height: auto;
  mix-blend-mode: lighten;
  opacity: .9;
  margin-bottom: 12px;
}
footer p {
  font-size: 13px;
  font-weight: 300;
  color: var(--mu);
  line-height: 1.8;
}
footer a { color: var(--wh); text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--y); }


/* ── 13. ANIMACIONES ── */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseRing {
  0%, 100% { opacity: .5;  transform: scale(1);    }
  50%       { opacity: .15; transform: scale(1.04); }
}
@keyframes bounceDown {
  0%, 100% { transform: rotate(45deg) translateY(0);  }
  50%       { transform: rotate(45deg) translateY(5px);}
}


/* ── 14. RESPONSIVE ── */

/* En escritorio/tablet el hero puede permitirse algo más de presencia */
@media (min-width: 601px) {
  .hero { min-height: 62svh; padding: 56px 24px 84px; }
}

@media (max-width: 600px) {
  /* ── HERO COMPACTO ──
     La marca aparece (logo + eyebrow + halo), pero el hero mide ~270px:
     en un móvil típico la nav de categorías y el primer producto quedan
     visibles nada más escanear el QR. Teléfono e Instagram viven en el pie. */
  .hero { padding: 22px 20px 18px; }
  .hero-eyebrow  { font-size: 10px; letter-spacing: 3px; }
  .hero-logo-img { width: clamp(150px, 44vw, 210px); }
  .hero-divider  { display: none; }

  .hero-meta { margin-top: 12px; gap: 0; animation-delay: .2s; }
  .hero-meta-item:not(:first-child) { display: none; }
  .hero-meta-label { display: none; }
  .hero-meta-value {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .3px;
    color: var(--mu);
  }

  .hero-scroll { display: none; }

  .hero-ring:nth-child(1) { width: 220px; height: 220px; }
  .hero-ring:nth-child(2) { width: 360px; height: 360px; }
  .hero-ring:nth-child(3) { display: none; }

  /* ── DENSIDAD DE LA CARTA ── */
  .item       { gap: 14px; padding: 16px 0; }
  .item-left  { gap: 5px; }
  .item-name  { font-size: 19px; letter-spacing: 1px; }
  .item-desc  { font-size: 13px; line-height: 1.5; }
  .item-price { font-size: 21px; }
}

@media (max-width: 480px) {
  .nav a      { font-size: 13.5px; letter-spacing: 1.5px; padding: 14px 14px; }
  .nav a::after { left: 14px; right: 14px; }
  .page       { padding: 0 16px 72px; }
  .s-head     { padding: 40px 0 22px; gap: 12px; }
  .page > section:first-child .s-head { padding-top: 26px; }
  .s-head-number { font-size: 11px; }

  .postres-card {
    flex-direction: column;
    text-align: center;
    padding: 26px 22px;
    gap: 14px;
  }

  .footer-logo-img { width: clamp(160px, 66vw, 240px); }
  footer { padding: 36px 20px 32px; }
  footer p { font-size: 12.5px; }
}

@media (max-width: 759px) {
  .items-2 { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .item-name { font-size: 17px; }
  .badge     { font-size: 8.5px; padding: 2px 7px; }
}


/* ── 15. ACCESIBILIDAD (reduced motion) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }

  /* El hero aparece con animación CSS: garantizamos que quede visible igualmente */
  .hero-eyebrow, .hero-logo-img, .hero-divider,
  .hero-meta, .hero-scroll { opacity: 1 !important; transform: none !important; }
}