/* =========================================================
   SALCHIPAPER · styles.css
   Orden del archivo:
   1. Variables (tokens de marca)
   2. Reset y base
   3. Layout (contenedor, grids, secciones)
   4. Componentes (header, hero, cards, chips, botones, footer)
   5. Animaciones (keyframes + clases de reveal)
   6. Responsive
   ========================================================= */

/* ============ 1 · VARIABLES ============ */
:root {
  --c-bg:        #17120F;   /* fondo principal */
  --c-bg-alt:    #1e1712;   /* tarjetas / bandas */
  --c-bg-deep:   #0f0b09;   /* footer */
  --c-line:      #2c211b;   /* bordes suaves */
  --c-line-2:    #3a2d25;   /* bordes tarjetas */
  --c-line-3:    #4a3a30;   /* bordes fuertes */
  --c-text:      #F5F0E8;   /* texto principal */
  --c-text-2:    #cdbcb0;   /* texto secundario */
  --c-text-3:    #9b8a7e;   /* texto terciario */
  --c-text-mute: #6b5848;   /* placeholders */
  --c-yellow:    #FFC81E;   /* acento / precios / CTA */
  --c-red:       #E03A1E;   /* marca / destacados */

  --font-display: 'Anton', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --maxw: 1200px;
  --radius:   16px;
  --radius-sm:10px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ============ 2 · RESET Y BASE ============ */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { text-decoration:none; color:inherit; }
img { display:block; }
::selection { background:var(--c-yellow); color:var(--c-bg); }

/* tipografía reutilizable */
.eyebrow {
  font-family:var(--font-mono);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-yellow);
}
.mono { font-family:var(--font-mono); }
.price {
  font-family:var(--font-mono); font-weight:700;
  color:var(--c-yellow);
}

/* ============ 3 · LAYOUT ============ */
.container { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.section   { max-width:var(--maxw); margin:0 auto; padding:64px 20px 24px; }
.section--hero { padding:64px 20px 56px; }

.grid { display:grid; gap:20px; }
.grid--auto-258 { grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.grid--auto-300 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--auto-280 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid--auto-260 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid--auto-210 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }

.section-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.section-head .bar { width:30px; height:4px; background:var(--c-red); border-radius:2px; }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(34px,5vw,54px);
  text-transform:uppercase; line-height:1; margin-bottom:36px;
}

/* ============ 4 · COMPONENTES ============ */

/* -- Botones -- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:800; border-radius:var(--radius-sm); cursor:pointer;
  transition:transform .15s var(--ease), filter .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn--primary { background:var(--c-yellow); color:var(--c-bg); }
.btn--primary:hover { filter:brightness(1.05); }
.btn--ghost {
  background:transparent; color:var(--c-yellow);
  border:1.5px solid var(--c-yellow); font-weight:700;
}
.btn--outline {
  background:transparent; color:var(--c-text);
  border:2px solid var(--c-line-3); font-weight:700;
}
.btn--lg { font-size:18px; padding:16px 26px; }
.btn--md { font-size:15px; padding:12px 16px; }
.btn--block { width:100%; }

/* -- Header -- */
.header {
  position:sticky; top:0; z-index:50;
  background:var(--c-bg); border-bottom:1px solid var(--c-line);
}
.header__inner {
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:10px; }
.brand img { width:40px; height:40px; border-radius:8px; }
.brand__name {
  font-family:var(--font-display); font-size:22px;
  text-transform:uppercase; letter-spacing:.01em; color:var(--c-text);
}
.brand__name span { color:var(--c-red); }
.header__actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* -- Selector de sede (chips) -- */
.sede-switch {
  display:inline-flex; background:var(--c-bg-alt);
  border:1px solid var(--c-line-2); border-radius:999px; padding:4px;
}
.chip {
  font-family:var(--font-body); font-size:14px; border:none; cursor:pointer;
  border-radius:999px; padding:9px 16px;
  background:transparent; color:var(--c-text-2); font-weight:600;
  transition:background .2s ease, color .2s ease;
}
.chip[aria-pressed="true"] {
  background:var(--c-yellow); color:var(--c-bg); font-weight:700;
}

/* -- Hero -- */
.hero-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:48px; align-items:center;
}
.hero__title {
  font-family:var(--font-display);
  font-size:clamp(48px,8vw,104px); line-height:.92; letter-spacing:-.01em;
  text-transform:uppercase; margin:18px 0 0;
}
.hero__title span { color:var(--c-red); }
.hero__lead { font-size:20px; line-height:1.5; max-width:520px; margin:24px 0 8px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 28px; }
.hero__note { font-family:var(--font-mono); font-size:13px; color:var(--c-text-3); }
.hero__note span { color:var(--c-yellow); }
.hero__art { position:relative; }
.hero__art-glow {
  background:radial-gradient(circle at 50% 35%, #E03A1E22, transparent 70%);
  border-radius:24px; padding:8px;
}
.hero__art-box {
  aspect-ratio:1/1; background:linear-gradient(150deg,#241a14,var(--c-bg));
  border:1px solid var(--c-line-2); border-radius:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.hero__art-box img { width:clamp(110px,22vw,180px); height:auto; border-radius:18px; }

/* -- Placeholder de foto -- */
.placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.placeholder span {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-text-mute);
}

/* -- Banda de prueba social -- */
.social {
  background:var(--c-bg-alt);
  border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line);
}
.social__inner {
  max-width:var(--maxw); margin:0 auto; padding:28px 20px;
  display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:space-between;
}
.stat { display:flex; align-items:baseline; gap:10px; }
.stat__num { font-family:var(--font-display); font-size:34px; }
.stat__num--y { color:var(--c-yellow); }
.stat__txt { font-size:15px; color:var(--c-text-2); line-height:1.3; max-width:170px; }

/* calificaciones por sede */
.social__inner--ratings { justify-content:flex-start; gap:16px 64px; }
.rating { display:flex; align-items:center; gap:14px; }
.rating__score { font-family:var(--font-display); font-size:44px; color:var(--c-yellow); line-height:1; }
.rating__detail { display:flex; flex-direction:column; gap:3px; }
.rating__stars { font-family:var(--font-mono); font-size:16px; color:var(--c-yellow); letter-spacing:.06em; }
.rating__txt { font-size:14px; color:var(--c-text-2); line-height:1.3; }
.rating__txt strong { color:var(--c-text); font-weight:700; }

/* -- Tarjeta de redirección a menú por sede (home) -- */
.menu-link {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:28px; text-decoration:none; color:inherit;
}
.menu-link__body { display:flex; flex-direction:column; gap:6px; }
.menu-link__title {
  font-family:var(--font-display); font-size:36px;
  text-transform:uppercase; line-height:1;
}
.menu-link__addr { font-size:14px; color:var(--c-text-2); margin-top:4px; }
.menu-link__cta {
  display:inline-flex; align-items:center; gap:8px; flex:none;
  background:var(--c-yellow); color:var(--c-bg);
  font-weight:800; font-size:15px; border-radius:var(--radius-sm);
  padding:12px 18px; transition:transform .15s var(--ease);
}
.menu-link:hover .menu-link__cta { transform:translateX(4px); }

/* -- Etiqueta de sede en el header de la página de menú -- */
.menu-sede {
  font-family:var(--font-mono); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-text-3);
}
.menu-sede strong { color:var(--c-yellow); font-weight:700; letter-spacing:.04em; }

/* ============ PÁGINA DE MENÚ (menu-ciudad-montes / menu-country-sur) ============ */
.menu-page {
  max-width:900px; margin:0 auto; padding:40px 20px 100px;
}
.menu-page__head { text-align:center; margin-bottom:32px; }
.menu-page__title {
  font-family:var(--font-display);
  font-size:clamp(34px,6vw,56px);
  text-transform:uppercase; line-height:1; margin:14px 0 12px;
}
.menu-page__lead {
  font-size:17px; line-height:1.5; color:var(--c-text-2);
  max-width:600px; margin:0 auto;
}
.menu-img-wrap {
  display:flex; flex-direction:column; gap:16px;
  margin:0 0 36px; padding:0;
}
.menu-img {
  display:block; width:100%; height:auto;
  max-width:100%; border-radius:14px;
  border:1px solid var(--c-line-2);
  background:var(--c-bg-alt);
}
.menu-img-fallback {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:60px 20px; text-align:center;
  background:var(--c-bg-alt); border:1px dashed var(--c-line-3);
  border-radius:14px; color:var(--c-text-2);
}
.menu-img-fallback strong {
  font-family:var(--font-display); font-size:22px;
  text-transform:uppercase; color:var(--c-text); letter-spacing:.02em;
}
.menu-img-fallback span { font-size:14px; max-width:380px; line-height:1.5; }
.menu-cta-row {
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; margin:0 0 20px;
}
.menu-page__addr {
  font-family:var(--font-mono); font-size:13px;
  color:var(--c-text-3); text-align:center;
}

/* -- Cards genéricas -- */
.card {
  background:var(--c-bg-alt); border:1px solid var(--c-line-2);
  border-radius:var(--radius); transition:transform .2s var(--ease), border-color .2s ease;
}
.card:hover { transform:translateY(-4px); border-color:var(--c-line-3); }

/* destacados */
.feat { overflow:hidden; display:flex; flex-direction:column; }
.feat__media {
  aspect-ratio:4/3; background:linear-gradient(135deg,#2c211b,#1a130f);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border-bottom:1px solid var(--c-line-2); position:relative;
}
.feat__body { padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.feat__name { font-family:var(--font-display); font-size:25px; text-transform:uppercase; line-height:1; }
.feat__desc { font-size:14px; line-height:1.5; color:var(--c-text-2); flex:1; }
.feat__price-unit {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--c-text-3);
}
.feat__price { font-family:var(--font-mono); font-weight:700; font-size:24px; color:var(--c-yellow); }

.tag {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--c-bg); background:var(--c-yellow);
  border-radius:999px; padding:5px 10px;
}
.tag--abs { position:absolute; top:12px; left:12px; }

/* La Original (banner rojo) */
.original {
  background:var(--c-red); border-radius:var(--radius); padding:32px;
  margin:36px 0 28px; display:flex; flex-wrap:wrap; gap:24px;
  align-items:center; justify-content:space-between;
}
.original__eyebrow {
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:#3a0f08; font-weight:700;
}
.original__title {
  font-family:var(--font-display); font-size:clamp(30px,4.5vw,46px);
  text-transform:uppercase; line-height:.98; color:#fff; margin:8px 0 10px;
}
.original__desc { font-size:15px; line-height:1.5; color:#fde3dd; max-width:620px; }
.original__prices { display:flex; gap:28px; margin-top:16px; }
.original__plabel { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fbd0c8; }
.original__pval   { font-family:var(--font-mono); font-weight:700; font-size:24px; color:var(--c-yellow); }

/* subtítulo de categoría del menú */
.menu-cat {
  font-family:var(--font-display); font-size:28px; text-transform:uppercase;
  color:var(--c-text); margin:48px 0 18px;
}
.menu-cat--first { margin-top:40px; margin-bottom:6px; }
.menu-cat__sub {
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-text-3); margin-bottom:20px;
}

/* item de salchipapa (con personal/dúo) */
.dish { padding:22px; display:flex; flex-direction:column; gap:12px; border-radius:14px; }
.dish__top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dish__name { font-family:var(--font-display); font-size:24px; text-transform:uppercase; line-height:1; }
.dish__desc { font-size:14px; line-height:1.5; color:var(--c-text-2); flex:1; }
.dish__tag { flex:none; padding:4px 9px; }
.dish__prices { display:flex; gap:24px; border-top:1px solid var(--c-line); padding-top:14px; }
.dish__plabel { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-3); }
.dish__pval   { font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--c-yellow); }

/* item simple (dogs / burgs / entradas) */
.item { padding:20px; display:flex; flex-direction:column; gap:14px; border-radius:14px; }
.item__name { font-family:var(--font-display); font-size:22px; text-transform:uppercase; line-height:1; }
.item__price { font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--c-yellow); }
.item .btn { margin-top:auto; }

/* listas tipo ticket (adiciones / bebidas / malteadas) */
.ticket { background:var(--c-bg-alt); border:1px solid var(--c-line-2); border-radius:14px; padding:8px 18px; }
.ticket__row {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--c-line);
}
.ticket__row:last-child { border-bottom:none; }
.ticket__name { font-size:15px; color:var(--c-text); }
.ticket__price { font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--c-yellow); flex:none; }

.note { font-size:13px; color:var(--c-text-3); margin-top:20px; }

/* testimonios */
.quote {
  background:var(--c-bg-alt); border:1px solid var(--c-line-2); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; margin:0;
}
.quote__stars { font-family:var(--font-mono); font-size:15px; color:var(--c-yellow); margin-bottom:14px; }
.quote__text { font-size:18px; line-height:1.45; margin:0 0 18px; flex:1; }
.quote__by { display:flex; align-items:center; gap:12px; }
.quote__avatar { width:40px; height:40px; border-radius:999px; background:var(--c-line); border:1px dashed var(--c-line-3); flex:none; }
.quote__name { font-weight:700; font-size:15px; }

/* pasos cómo pedir */
.step { padding:28px; border-radius:var(--radius); }
.step__head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.step__num { font-family:var(--font-display); font-size:30px; color:var(--c-red); }
.step__title { font-family:var(--font-display); font-size:23px; text-transform:uppercase; margin-bottom:8px; }
.step__text { font-size:15px; line-height:1.5; color:var(--c-text-2); }

/* sedes */
.place { overflow:hidden; }
.place iframe { width:100%; height:240px; border:0; display:block; filter:grayscale(.2); }
.place__body { padding:24px; }
.place__title { font-family:var(--font-display); font-size:26px; text-transform:uppercase; margin-bottom:10px; }
.place__row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.place__rating { font-family:var(--font-mono); font-size:13px; color:var(--c-yellow); }
.place__addr { font-size:15px; line-height:1.6; color:var(--c-text-2); margin-bottom:4px; }
.place__wa { font-family:var(--font-mono); font-size:13px; color:var(--c-text-3); margin-bottom:4px; }
.place__hours { font-family:var(--font-mono); font-size:13px; color:var(--c-text-mute); margin-bottom:18px; }

/* redes */
.social-card {
  padding:28px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.social-card__label { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-3); }
.social-card__handle { font-family:var(--font-display); font-size:26px; text-transform:uppercase; }
.social-card__meta { font-size:14px; color:var(--c-text-2); margin-top:4px; }

/* footer */
.footer { background:var(--c-bg-deep); border-top:1px solid var(--c-line); }
.footer__grid {
  max-width:var(--maxw); margin:0 auto; padding:48px 20px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px;
}
.footer__label { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-yellow); }
.footer__text { font-size:14px; line-height:1.7; color:var(--c-text-2); margin-top:10px; }
.footer__about { font-size:14px; line-height:1.6; color:var(--c-text-3); max-width:260px; }
.footer__link { color:var(--c-text-2); display:block; }
.footer__bottom { border-top:1px solid var(--c-line); padding:18px 20px; text-align:center; }
.footer__copy { font-family:var(--font-mono); font-size:12px; color:var(--c-text-mute); }

/* CTA flotante */
.fab {
  position:fixed; bottom:20px; right:20px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--c-yellow); color:var(--c-bg); font-weight:800; font-size:16px;
  border-radius:999px; padding:14px 22px; box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .15s var(--ease);
}
.fab:hover { transform:translateY(-2px) scale(1.03); }

/* ============ 5 · ANIMACIONES ============ */

/* entrada del hero al cargar */
@keyframes fade-up {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:none; }
}
.anim-hero > * { animation:fade-up .7s var(--ease) both; }
.anim-hero > *:nth-child(2) { animation-delay:.12s; }

/* reveal al hacer scroll (controlado por js/app.js con IntersectionObserver) */
.reveal { opacity:0; transform:translateY(26px); }
.reveal.is-visible {
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* pulso suave del CTA flotante para llamar la atención */
@keyframes fab-pulse {
  0%,100% { box-shadow:0 8px 24px rgba(0,0,0,.45); }
  50%     { box-shadow:0 8px 28px rgba(255,200,30,.45); }
}
.fab { animation:fab-pulse 2.6s ease-in-out infinite; }

/* respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .anim-hero > *,
  .fab { animation:none; }
  .reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}

/* ============ 6 · RESPONSIVE ============ */
@media (max-width:600px) {
  .section { padding:48px 20px 16px; }
  .original { padding:24px; }
  .hero-grid { gap:32px; }
}