/* =========================================================
   OKAPI · Propuesta 2 — "Gastrobar moderno"
   Dark cálido + grotesque expresiva + ámbar/tomate
   ========================================================= */
:root {
  --bg:      #120F0D;   /* near-black cálido */
  --bg-2:    #1B1714;   /* superficie */
  --bg-3:    #241E1A;   /* tarjetas */
  --cream:   #F3ECDD;   /* texto */
  --muted:   #B7A998;   /* texto secundario */
  --amber:   #F2A33C;   /* acento primario (azafrán) */
  --amber-d: #DB8E26;
  --tomato:  #E64A2E;   /* acento secundario (pimentón) */
  --olive:   #9C9A5F;   /* matiz */
  --line:    #352C25;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "Geist Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --pad: clamp(1.1rem, 4vw, 3rem);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

body {
  background: var(--bg); color: var(--cream);
  font-family: var(--sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,iframe { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
.wrap { width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }

.skip-link { position:absolute; left:-999px; top:0; z-index:300; background:var(--amber); color:var(--bg); padding:.7rem 1.1rem; border-radius:0 0 .5rem 0; font-weight:600; }
.skip-link:focus { left:0; }
:focus-visible { outline:3px solid var(--amber); outline-offset:3px; border-radius:4px; }

/* ---------- Tipografía base ---------- */
.eyebrow { font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--amber); margin-bottom:1rem; text-transform:uppercase; }
.h2 { font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,5.2vw,3.6rem); line-height:.98; letter-spacing:-.02em; }
.head { max-width:54ch; margin-bottom:2.6rem; }
.head__sub { color:var(--muted); margin-top:1rem; font-size:1.05rem; max-width:42ch; }
.head--row { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; max-width:none; flex-wrap:wrap; }

/* ---------- Botones ---------- */
.btn {
  --bg-btn: transparent; --fg: var(--cream); --bd: var(--cream);
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  padding:.8rem 1.35rem; border-radius:999px;
  background:var(--bg-btn); color:var(--fg); border:1.5px solid var(--bd);
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s;
  white-space:nowrap; cursor:pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--amber { --bg-btn:var(--amber); --fg:#2A1A08; --bd:var(--amber); }
.btn--amber:hover { --bg-btn:var(--amber-d); --bd:var(--amber-d); }
.btn--line { --bg-btn:transparent; --fg:var(--cream); --bd:#5a4c41; }
.btn--line:hover { --bd:var(--cream); }
.btn--dark { --bg-btn:var(--bg); --fg:var(--cream); --bd:var(--bg); }
.btn--dark:hover { --bg-btn:#0a0807; --bd:#0a0807; }
.btn--lg { padding:1rem 1.7rem; font-size:1.02rem; }
.btn--xl { padding:1.15rem 2.2rem; font-size:1.2rem; font-family:var(--mono); }

/* ---------- Ticker ---------- */
.ticker { background:var(--amber); color:#2A1A08; overflow:hidden; border-bottom:1px solid var(--bg); }
.ticker__track { display:inline-flex; align-items:center; gap:1.5rem; white-space:nowrap; padding:.45rem 0; font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; will-change:transform; animation: marquee 38s linear infinite; }
.ticker__track i { color:var(--tomato); font-style:normal; }
@keyframes marquee { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- NAV ---------- */
.nav { position:sticky; top:0; z-index:100; transition: background .3s var(--ease), border-color .3s; border-bottom:1px solid transparent; }
.nav[data-scrolled="true"]{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.nav__inner { max-width:var(--wrap); margin-inline:auto; padding:.85rem var(--pad); display:flex; align-items:center; gap:1.4rem; }
.brand { display:inline-flex; align-items:baseline; gap:.5rem; }
.brand__mark { width:26px; height:26px; align-self:center; }
.brand__name { font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; }
.brand__tag { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.nav__links { margin-left:auto; display:flex; gap:1.6rem; }
.nav__links a { color:var(--cream); font-weight:500; font-size:.95rem; opacity:.85; transition:opacity .2s, color .2s; }
.nav__links a:hover { opacity:1; color:var(--amber); }
.nav__cta { padding:.6rem 1.2rem; }
.nav__burger { display:none; margin-left:auto; width:44px; height:44px; background:none; border:0; cursor:pointer; flex-direction:column; gap:6px; align-items:center; justify-content:center; }
.nav__burger span { width:24px; height:2px; background:var(--cream); transition:.3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
.nav__drawer { background:var(--bg-2); border-bottom:1px solid var(--line); padding:1rem var(--pad) 1.4rem; display:grid; gap:.2rem; }
.nav__drawer[hidden] { display:none; }   /* el atributo hidden DEBE ganar al display:grid */
.nav__drawer a { padding:.85rem .2rem; font-size:1.1rem; border-bottom:1px solid var(--line); }
.nav__drawer .btn { margin-top:.8rem; }

/* ---------- Placeholders de imagen ---------- */
.ph { position:relative; overflow:hidden; border-radius:18px; background:linear-gradient(150deg,var(--bg-3),var(--bg-2)); border:1px solid var(--line);
  display:grid; place-content:center; gap:.5rem; text-align:center; padding:1.5rem; color:var(--cream); }
.ph::after { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 60% at 80% 10%, color-mix(in srgb,var(--amber) 22%, transparent), transparent 70%),
             radial-gradient(50% 50% at 10% 100%, color-mix(in srgb,var(--tomato) 18%, transparent), transparent 70%); }
.ph > * { position:relative; z-index:1; }
.ph__tag { font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber);
  border:1px solid color-mix(in srgb,var(--amber) 45%, transparent); padding:.22rem .55rem; border-radius:999px; justify-self:center; }
.ph__title { font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1.05; }
.ph__hint { font-family:var(--mono); font-size:.72rem; color:var(--muted); }

/* ---------- HERO ---------- */
.hero { padding:clamp(2.5rem,6vh,4.5rem) 0 clamp(3rem,7vh,5rem); }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.kicker { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.82rem; color:var(--muted); margin-bottom:1.4rem; }
.kicker .dot { width:9px; height:9px; border-radius:50%; background:var(--tomato); box-shadow:0 0 0 4px color-mix(in srgb,var(--tomato) 25%, transparent); }
.hero__h1 { font-family:var(--display); font-weight:800; font-size:clamp(2.9rem,8vw,5.6rem); line-height:.92; letter-spacing:-.03em; }
.hero__h1 .hl { color:var(--amber); position:relative; white-space:nowrap; }
.hero__h1 .hl::after { content:""; position:absolute; left:0; right:0; bottom:.06em; height:.09em; background:var(--tomato); border-radius:2px; }
.hero__lead { margin-top:1.4rem; max-width:44ch; color:var(--muted); font-size:1.14rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.hero__pills { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.hero__pills li { font-family:var(--mono); font-size:.78rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.4rem .8rem; }
.hero__pills b { color:var(--amber); }
.hero__right { position:relative; }
.ph--hero { aspect-ratio:4/5; min-height:380px; }
.hero__badge { position:absolute; left:-14px; bottom:8%; width:96px; height:96px; border-radius:50%; background:var(--tomato); color:var(--cream);
  display:grid; place-content:center; text-align:center; font-family:var(--display); font-weight:700; font-size:.95rem; line-height:1.05; transform:rotate(-10deg); box-shadow:0 14px 30px rgba(0,0,0,.45); }

/* ---------- Secciones ---------- */
.section { padding:clamp(3.5rem,8vh,6.5rem) 0; }

/* Carta */
.carta { border-top:1px solid var(--line); }
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,1fr); gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; margin-inline:calc(var(--pad)*-1); padding-inline:var(--pad); scrollbar-width:thin; }
.rail::-webkit-scrollbar { height:8px; }
.rail::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.card { scroll-snap-align:start; background:var(--bg-2); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:border-color .25s, transform .25s var(--ease); }
.card:hover { border-color:color-mix(in srgb,var(--amber) 55%, transparent); transform:translateY(-4px); }
.ph--card { aspect-ratio:5/4; border-radius:0; border:0; border-bottom:1px solid var(--line); }
.ph--card .ph__title { font-size:1.3rem; }
.card__body { padding:1.1rem 1.2rem 1.4rem; }
.card__top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.card__top h3 { font-family:var(--display); font-weight:700; font-size:1.3rem; }
.tag { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 40%, transparent); padding:.2rem .5rem; border-radius:999px; white-space:nowrap; }
.card__body p { color:var(--muted); font-size:.95rem; margin-top:.5rem; }
.rail__hint { text-align:center; font-family:var(--mono); font-size:.74rem; color:var(--muted); margin-top:.4rem; }

.more { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--line); }
.more__k { font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--amber); }
.chips { list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; }
.chips li { font-size:.9rem; padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px; color:var(--cream); background:var(--bg-2); }

/* Nosotros */
.nosotros { background:var(--bg-2); border-block:1px solid var(--line); }
.nosotros__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.ph--portrait { aspect-ratio:4/5; min-height:420px; }
.nosotros__p { color:var(--muted); font-size:1.1rem; margin-top:1.2rem; max-width:50ch; }
.bigquote { margin-top:2rem; font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.3; color:var(--cream); padding-left:1.3rem; border-left:3px solid var(--amber); }
.bigquote cite { display:block; margin-top:.9rem; font-family:var(--mono); font-style:normal; font-size:.78rem; color:var(--amber); }

/* Galería */
.strip { display:grid; grid-auto-flow:column; grid-auto-columns:300px; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--pad) 1rem; scrollbar-width:thin; }
.strip::-webkit-scrollbar { height:8px; }
.strip::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.ph--g { scroll-snap-align:start; aspect-ratio:3/4; }
.hashtags { display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:center; margin-top:2.2rem; font-family:var(--mono); font-size:.85rem; color:var(--olive); }
.hashtags span { transition:color .2s; }
.hashtags span:hover { color:var(--amber); }

/* Visítanos */
.visitanos__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.info { list-style:none; margin:1.6rem 0 2rem; }
.info li { display:grid; grid-template-columns:96px 1fr; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }
.info li:last-child { border-bottom:1px solid var(--line); }
.info__k { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--amber); padding-top:.15rem; }
.info__v { font-size:1.05rem; }
.info__v em { color:var(--muted); font-style:normal; font-size:.92rem; }
.info__v a { border-bottom:1px solid var(--amber); }

.map-frame { border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 50px -24px rgba(0,0,0,.7); }
.map-frame iframe { width:100%; height:430px; border:0; display:block; filter:saturate(.85) contrast(1.05) brightness(.92); }
.map-facade { position:relative; width:100%; height:430px; border:0; cursor:pointer; display:grid; place-content:center; gap:.6rem; text-align:center;
  background:radial-gradient(120% 120% at 70% 20%, var(--bg-3), var(--bg)); color:var(--cream); overflow:hidden; font-family:var(--sans); }
.map-facade__grid { position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:linear-gradient(var(--olive) 1px,transparent 1px),linear-gradient(90deg,var(--olive) 1px,transparent 1px); background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%); mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%); }
.map-facade__pin { width:20px; height:20px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--tomato); box-shadow:0 0 0 6px color-mix(in srgb,var(--tomato) 26%, transparent); justify-self:center; position:relative; z-index:1; }
.map-facade__addr { font-family:var(--display); font-weight:700; font-size:1.25rem; position:relative; z-index:1; }
.map-facade__cta { font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 45%, transparent); padding:.4rem 1rem; border-radius:999px; justify-self:center; position:relative; z-index:1; }

/* Reserva */
.reserva { background:var(--amber); color:#2A1A08; padding:clamp(3.5rem,8vh,6rem) 0; }
.reserva__inner { text-align:center; max-width:640px; }
.reserva__h { font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,6vw,4rem); line-height:.95; letter-spacing:-.02em; }
.reserva__p { margin:1rem auto 2rem; max-width:42ch; font-size:1.1rem; color:#4a3414; }
.reserva__social { margin-top:2.2rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.6rem; font-family:var(--mono); font-size:.85rem; }
.reserva__social a { color:#4a3414; border-bottom:1px solid transparent; transition:border-color .2s; }
.reserva__social a:hover { border-bottom-color:#4a3414; }

/* Footer */
.footer { background:var(--bg); padding:3rem 0 6rem; border-top:1px solid var(--line); }
.footer__inner { display:grid; gap:.7rem; text-align:center; justify-items:center; }
.footer .brand__name { font-family:var(--display); font-weight:800; font-size:1.5rem; }
.footer p { color:var(--muted); font-family:var(--mono); font-size:.85rem; }
.footer__fine { color:#7d6f61 !important; }
.footer a { border-bottom:1px solid var(--amber); color:var(--cream); }

/* Dock fijo móvil */
.dock { position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:.6rem; padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); }
.dock .btn { flex:1; }

/* ---------- Reveal (a prueba de fallos: visible por defecto) ---------- */
.reveal { opacity:1; }
.reveal--armed { opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal--armed.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal--armed { opacity:1 !important; transform:none !important; transition:none; }
  .ticker__track { animation:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px){
  .hero__grid, .nosotros__grid, .visitanos__grid { grid-template-columns:1fr; }
  .hero__right, .nosotros__media { max-width:440px; margin-inline:auto; width:100%; }
  .nosotros__media { order:2; }
}
@media (max-width: 720px){
  .nav__links, .nav__cta { display:none; }
  .nav__burger { display:flex; }
  .dock { display:flex; }
  .footer { padding-bottom:6.5rem; }
}