/* Decantador — Phase 2 brand application.
   Distribution = Bar Super (centered, narrow, generous whitespace).
   Skin = Manual_Decantador: cream rest-bg, black type, orange+green leads,
   Salo(display, UPPERCASE) + Neue Haas(body), watercolor illustrations as big supporting shapes. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  overflow-x: hidden;            /* illustrations bleed off-canvas */
  max-width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;     /* Salo is ALWAYS uppercase */
  letter-spacing: -0.015em;      /* Sala de Despiece device: tight negative tracking on condensed display */
  line-height: .96;
}
/* the larger the display, the tighter the tracking */
.hero__logo, .statement p, .page-head h1 { letter-spacing: -0.02em; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem var(--pad);
  background: color-mix(in srgb, var(--c-cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .logo { display: flex; align-items: center; }
.site-header .logo img { height: 30px; width: auto; }   /* wordmark, > min 85px wide */
.nav { display: flex; gap: clamp(.75rem, 2vw, 1.6rem); align-items: center; text-transform: uppercase; font-size: .74rem; letter-spacing: .12em; font-weight: 600; }
.nav a { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { border-color: var(--c-black); } }
.nav a.is-active { color: var(--accent); border-color: var(--accent); }
.lang-toggle { display: inline-flex; gap: .35rem; align-items: center; }
.lang-toggle button { background: none; border: 0; color: var(--muted); font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .12em; cursor: pointer; padding: 0; }
.lang-toggle button[aria-pressed="true"] { color: var(--accent); }
.lang-sep { color: var(--muted); }
/* mobile: wrap nav to its own full-width row under the logo so nothing clips */
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; row-gap: .5rem; padding-block: .6rem; }
  .nav { width: 100%; justify-content: space-between; gap: .5rem; font-size: .7rem; }
}

/* ---------- section rhythm ---------- */
main > section { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem); }
.prose, .statement, .page-head, .info, #menu-groups { position: relative; z-index: 1; }
.prose, .page-head { max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- hero (full viewport, centered) ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.15rem; padding-inline: var(--pad);
  overflow: hidden;
}
.hero__logo { width: min(72vw, 640px); }
.hero__logo img { width: 100%; height: auto; }
.hero__sub { font-size: clamp(1.05rem, 2.4vw, 1.45rem); max-width: 32ch; }
.hero__loc { color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: clamp(.9rem, 3vw, 1.4rem); margin-top: 1.9rem; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 600; }
/* Bar Super capsule-badge device, in Decantador palette */
.hero__cta a {
  display: inline-flex; align-items: center;
  padding: var(--badge-pad);
  border-radius: var(--badge-radius);
  border: 1.5px solid var(--c-black);
  transition: transform var(--dur-press) var(--ease-out),
              background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              filter var(--dur-hover) var(--ease-out);
}
.hero__cta a.cta--primary { background: var(--c-orange); color: var(--c-cream); border-color: var(--c-orange); filter: drop-shadow(var(--badge-shadow)); }
.hero__cta a.cta--secondary { background: var(--c-green); color: var(--c-cream); border-color: var(--c-green); filter: drop-shadow(4px 4px 0 var(--c-orange)); }
.hero__cta a.cta--ghost { background: transparent; color: var(--c-black); }
.hero__cta a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .hero__cta a.cta--ghost:hover { background: var(--c-black); color: var(--c-cream); }
  .hero__cta a.cta--primary:hover, .hero__cta a.cta--secondary:hover { filter: drop-shadow(2px 2px 0 var(--c-black)); }
}
/* watercolor illustrations as big supporting shapes, bleeding off the corners */
.hero__ill { position: absolute; z-index: 0; pointer-events: none; opacity: .9; }
.hero__ill--wine { width: clamp(120px, 20vw, 260px); left: -3vw; bottom: -2vw; transform: rotate(-8deg); }
.hero__ill--grapes { width: clamp(130px, 22vw, 300px); right: -4vw; top: 8vh; transform: rotate(6deg); }

/* ---------- concept statement (green band) ---------- */
.statement { background: var(--c-green); color: var(--c-cream); overflow: hidden; }
.statement__inner { max-width: 22ch; margin-inline: auto; padding-inline: var(--pad); position: relative; z-index: 1; }
.statement p { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.9rem, 5.5vw, 3.6rem); line-height: 1.02; }
.statement .ill { position: absolute; z-index: 0; opacity: .28; pointer-events: none; }
.statement .ill--lemon { width: clamp(140px, 24vw, 340px); left: -5vw; top: -6vw; transform: rotate(-12deg); }
.statement .ill--laurel { width: clamp(150px, 26vw, 380px); right: -6vw; bottom: -8vw; transform: rotate(8deg); }

/* ---------- photo band (flash photography) ---------- */
.photo-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.photo-band img { width: 100%; height: clamp(200px, 34vw, 420px); object-fit: cover; }
@media (max-width: 640px) { .photo-band { grid-template-columns: 1fr 1fr; } .photo-band img:last-child { grid-column: span 2; } }

/* ---------- info block ---------- */
.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); max-width: 900px; margin-inline: auto; padding-inline: var(--pad); }
.info__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; color: var(--accent); margin-bottom: .6rem; }
.info a:hover { color: var(--accent); }
@media (max-width: 640px) { .info { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- page head ---------- */
.page-head { margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.page-head h1 { font-size: var(--fs-h2); }
.page-head__sub { color: var(--muted); margin-top: .6rem; font-size: .92rem; }

/* ---------- menu ---------- */
.menu-section { background: var(--c-cream); color: var(--c-black); }
#menu-groups { max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); text-align: left; }
.menu-group { margin-bottom: 3rem; }
.menu-group h3 { color: var(--accent); margin-bottom: 1rem; font-size: 1.5rem; text-align: center; }
.menu-group:nth-child(even) h3 { color: var(--accent-2); }
.menu-item { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; align-items: baseline; }
.menu-item + .menu-item { border-top: 1px dotted var(--line); }
.menu-item .name { font-weight: 600; }
.menu-item .desc { color: var(--muted); font-size: .88em; }
.menu-item .price { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- reservas ---------- */
.btn { display: inline-block; border: 1.5px solid var(--c-black); padding: .85rem 1.6rem; border-radius: 999px; text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; font-weight: 600;
  transition: transform var(--dur-press) var(--ease-out), background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--c-cream); } }
.btn:active { transform: scale(0.97); }
.reservas__cta { margin-top: 2rem; }

/* ---------- faq ---------- */
.faq { max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); }
.faq-item { border-top: 1px solid var(--line); padding: 1.15rem 0; text-align: left; }
.faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-family: var(--font-body); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: .7rem; color: var(--muted); }

/* ---------- footer (black) ---------- */
.site-footer { background: var(--c-black); color: var(--c-cream); padding: clamp(2.75rem, 7vw, 4.5rem) var(--pad); display: grid; gap: 1.1rem; justify-items: center; }
.site-footer .footer-brand img { height: 34px; width: auto; }
.footer-meta p { color: color-mix(in srgb, var(--c-cream) 65%, transparent); font-size: .9rem; }
.footer-links { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }
.footer-links a { color: var(--accent); }
.footer-links span { color: color-mix(in srgb, var(--c-cream) 65%, transparent); }

/* ---------- entrance motion (rare/first-view → delight is allowed) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero__logo, .hero__sub, .hero__loc, .hero__cta {
  opacity: 0; animation: rise var(--dur-enter) var(--ease-out) forwards;
}
.hero__logo { animation-delay: 60ms; }
.hero__sub  { animation-delay: 140ms; }
.hero__loc  { animation-delay: 200ms; }
.hero__cta  { animation-delay: 260ms; }

/* faq summary press feedback */
.faq-item summary { transition: color var(--dur-hover) var(--ease-out); }
.faq-item[open] summary { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hero__logo, .hero__sub, .hero__loc, .hero__cta { opacity: 1; animation: none; }
  /* keep press feedback off, keep color transitions (aid comprehension) */
  .hero__cta a:active, .btn:active { transform: none; }
}

/* ---------- i18n ---------- */
[data-lang="es"] [data-en] { display: none; }
[data-lang="en"] [data-es] { display: none; }