:root{
  /* Colores base (oscuro) */
  --color-almost-black:#1C1410;
  --color-almost-black-soft:#2E2018;
  --color-text-on-dark:#F4ECDA;

  /* Colores madera (fondos claros) */
  --color-wood-base:#C89A67;
  --color-wood-light:#DCC29A;
  --color-cream-card:#F3E4C8;

  /* Colores de acento */
  --color-amber:#E2A63D;
  --color-amber-deep:#B97D1E;
  --color-brick:#7F3620;
  --color-sage:#5C7A52;

  /* Bordes */
  --color-divider:rgba(28,20,16,0.16);
  --color-divider-on-dark:rgba(244,236,218,0.18);

  --radius:2px;
  --max-width:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--color-wood-base);
  color:var(--color-almost-black);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, .display{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
  text-transform:uppercase;
  line-height:0.95;
  margin:0;
}

.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--color-brick);
  font-weight:600;
}

::selection{ background:var(--color-amber); color:var(--color-almost-black); }
:focus-visible{ outline:3px solid var(--color-amber); outline-offset:2px; }

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:var(--color-almost-black);
  color:var(--color-text-on-dark);
  border-bottom:3px solid var(--color-amber);
}

.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  max-width:var(--max-width); margin:0 auto;
}

.logo{ display:flex; flex-direction:column; line-height:0.9; }
.logo .logo-name{ font-family:'Anton',sans-serif; font-size:22px; letter-spacing:0.02em; }
.logo .logo-place{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.24em; color:var(--color-amber); margin-top:4px; }

.main-nav{
  display:none; gap:28px;
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
}
.main-nav a{ text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
.main-nav a:hover{ border-color:var(--color-amber); }

.header-actions{ display:flex; gap:10px; align-items:center; }

.btn-call{
  display:flex; align-items:center; gap:8px;
  background:var(--color-amber); color:var(--color-almost-black);
  padding:9px 14px; font-weight:700; font-size:13px;
  text-decoration:none; border-radius:var(--radius); white-space:nowrap;
}
.btn-call svg{ width:16px; height:16px; flex:none; }

.btn-menu-toggle{
  background:none; border:2px solid var(--color-text-on-dark); color:var(--color-text-on-dark);
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none;
}

.main-nav.is-open{
  display:flex; flex-direction:column; gap:0;
  position:absolute; top:100%; left:0; right:0;
  background:var(--color-almost-black); border-bottom:3px solid var(--color-amber);
  padding:6px 20px 18px;
}
.main-nav.is-open a{ padding:12px 0; border-bottom:1px solid var(--color-divider-on-dark); }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:var(--color-almost-black);
  color:var(--color-text-on-dark);
  padding:52px 0 40px;
  overflow:hidden;
}
.hero .container{ position:relative; z-index:2; }

.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--color-cream-card); color:var(--color-almost-black);
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:20px; margin-bottom:22px;
}
.status-dot{ width:8px;height:8px;border-radius:50%; background:var(--color-sage); flex:none; }
.status-pill.is-closed .status-dot{ background:var(--color-brick); }

.hero h1{ font-size:52px; color:var(--color-text-on-dark); }
.hero h1 span{ color:var(--color-amber); }

.hero .lead{
  font-size:17px; max-width:46ch; margin:18px 0 28px;
  color:rgba(244,236,218,0.82); line-height:1.5;
}

.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:0.03em;
  text-decoration:none; border-radius:var(--radius); border:2px solid transparent;
}
.btn-primary{ background:var(--color-amber); color:var(--color-almost-black); }
.btn-outline{ border-color:var(--color-text-on-dark); color:var(--color-text-on-dark); }

.hero-badges{ display:flex; gap:22px; margin-top:38px; flex-wrap:wrap; }
.hero-badge{ display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(244,236,218,0.75); }
.hero-badge svg{ width:22px;height:22px; color:var(--color-amber); flex:none; }

/* ---------- SCHEDULE BAR ---------- */
.schedule-bar{
  background:var(--color-wood-light);
  border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider);
  padding:16px 0;
}
.schedule-bar .container{
  display:flex; flex-wrap:wrap; gap:10px 30px; align-items:center; justify-content:space-between;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
}
.schedule-bar .schedule-item{ display:flex; gap:8px; }
.schedule-bar .schedule-item b{ color:var(--color-brick); font-weight:700; }

/* ---------- SECTION HEADS ---------- */
section{ padding:56px 0; }
.section-head{ margin-bottom:30px; }
.section-head h2{ font-size:36px; margin-top:8px; }

/* ---------- MENU ---------- */
#menu{ background:var(--color-wood-base); }

.menu-tabs{
  display:flex; gap:8px; overflow-x:auto;
  padding-bottom:14px; margin-bottom:26px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.menu-tabs::-webkit-scrollbar{ display:none; }

.menu-tab{
  flex:none;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.03em;
  padding:10px 16px;
  background:transparent; border:2px solid var(--color-almost-black); color:var(--color-almost-black);
  cursor:pointer; border-radius:20px; white-space:nowrap;
}
.menu-tab.is-active{
  background:var(--color-almost-black); color:var(--color-text-on-dark); border-color:var(--color-almost-black);
}

.menu-note{
  font-size:13.5px; color:var(--color-almost-black-soft);
  background:var(--color-wood-light);
  border-left:3px solid var(--color-sage);
  padding:12px 14px; margin-bottom:22px; max-width:60ch;
}

.menu-item-grid{ display:grid; grid-template-columns:1fr; gap:16px; }

.menu-panel{ display:none; }
.menu-panel.is-active{ display:block; }

.menu-item{
  position:relative;
  background:var(--color-cream-card);
  border:1.5px solid var(--color-almost-black);
  padding:0 0 16px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.menu-item::before{
  content:"";
  position:absolute; top:-1px; left:22px; right:22px; height:1px; z-index:3;
  background-image: radial-gradient(circle, var(--color-wood-base) 2px, transparent 2.2px);
  background-size:12px 4px; background-position:0 -2px;
}

.menu-item-photo{
  flex:none; width:100%; height:200px;
  background:var(--color-wood-light);
  border-bottom:1.5px solid var(--color-almost-black);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-brick); font-size:56px;
  overflow:hidden;
  position:relative;
}
.menu-item-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.menu-item-photo .menu-item-photo-fallback{
  display:none; align-items:center; justify-content:center;
  width:100%; height:100%;
}

.menu-item-body{ flex:1; min-width:0; padding:16px 18px 0; }
.menu-item-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.menu-item-name{ font-family:'Anton',sans-serif; font-size:20px; letter-spacing:0.01em; }
.menu-item-desc{ font-size:13.5px; color:var(--color-almost-black-soft); margin-top:6px; line-height:1.45; }

.menu-item-price{
  position:absolute; top:172px; right:14px; z-index:2;
  width:54px; height:54px; border-radius:50%;
  background:var(--color-cream-card);
  border:2px solid var(--color-brick); color:var(--color-brick);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12.5px;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  transform:rotate(-8deg); text-align:center; line-height:1.1;
}

.menu-list{ display:grid; grid-template-columns:1fr; gap:10px; }
.menu-list-row{
  display:flex; justify-content:space-between; gap:10px;
  padding:12px 14px; background:var(--color-cream-card); border:1px solid var(--color-divider);
  font-size:14px;
}
.menu-list-row b{ font-weight:600; }
.menu-list-row .menu-list-price{
  font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--color-brick); flex:none;
}

/* ---------- STORY / CONCEPTO ---------- */
#historia{ background:var(--color-almost-black); color:var(--color-text-on-dark); }
#historia .section-head h2{ color:var(--color-text-on-dark); }
#historia .eyebrow{ color:var(--color-amber); }

.story-layout{ display:grid; grid-template-columns:1fr; gap:34px; }
.story-text p{ font-size:15.5px; line-height:1.6; color:rgba(244,236,218,0.82); max-width:56ch; }

.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.feature-card{ border:1px solid var(--color-divider-on-dark); padding:16px 12px; text-align:center; }
.feature-card svg{ width:26px; height:26px; color:var(--color-amber); margin:0 auto 10px; }
.feature-card span{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.05em; text-transform:uppercase; color:rgba(244,236,218,0.75);
}

/* ---------- UBICACION ---------- */
#ubicacion{ background:var(--color-wood-base); }
.location-layout{ display:grid; grid-template-columns:1fr; gap:20px; }
.location-card{ background:var(--color-cream-card); border:1px solid var(--color-divider); padding:22px; }
.location-row{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--color-divider); }
.location-row:last-child{ border-bottom:none; }
.location-row svg{ width:20px; height:20px; color:var(--color-brick); flex:none; margin-top:2px; }
.location-row .row-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--color-almost-black-soft); margin-bottom:3px;
}
.location-row a.link{ font-weight:600; text-decoration:underline; }

.map-frame{ border:1px solid var(--color-divider); overflow:hidden; min-height:280px; }
.map-frame iframe{ width:100%; height:100%; min-height:280px; border:0; display:block; }

/* ---------- CONTACTO ---------- */
#contacto{ background:var(--color-wood-light); }
.contact-card{ display:grid; grid-template-columns:1fr; gap:12px; max-width:420px; }
.contact-row{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--color-cream-card); border:1px solid var(--color-divider); padding:16px;
}
.contact-row svg{ width:20px; height:20px; color:var(--color-brick); flex:none; margin-top:2px; }
.contact-row .row-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--color-almost-black-soft); margin-bottom:3px;
}
.contact-row a.link{ font-weight:600; text-decoration:underline; }

/* ---------- FOOTER ---------- */
footer{ background:var(--color-almost-black); color:rgba(244,236,218,0.7); padding:38px 0 26px; }
.footer-top{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:26px;
  padding-bottom:24px; border-bottom:1px solid var(--color-divider-on-dark);
}
.footer-logo .logo-name{ font-family:'Anton',sans-serif; color:var(--color-text-on-dark); font-size:22px; }
.footer-logo .logo-place{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.24em; color:var(--color-amber); margin-top:4px; }

.footer-links{ display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; }
.footer-links a{ text-decoration:none; }
.footer-links a:hover{ color:var(--color-amber); }

.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:18px; font-size:12px; }

/* ---------- DESKTOP ---------- */
@media (min-width: 860px){
  .main-nav{ display:flex; position:static; background:none; border:none; padding:0; flex-direction:row; }
  .btn-menu-toggle{ display:none; }
  .hero h1{ font-size:76px; }
  .hero .lead{ font-size:19px; }
  .section-head h2{ font-size:46px; }
  .menu-item-grid{ grid-template-columns:1fr 1fr; }
  .menu-list{ grid-template-columns:1fr 1fr; }
  .story-layout{ grid-template-columns:1.1fr 0.9fr; align-items:center; }
  .location-layout{ grid-template-columns:0.9fr 1.1fr; }
  .map-frame{ min-height:380px; }
  .map-frame iframe{ min-height:380px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}