/* ===========================================================
   Praça Lounge Bar — style.css
   Identidade monocromática (preto, branco, cinzentos).
   Profundidade via contraste, espaço em branco, tipografia
   e fotografia — nunca via cor. Fotografias ficam a cores:
   é o único ponto de cor do site.
   =========================================================== */

/* ---------------- Tipografia — alojada localmente ----------------
   Google Fonts, licença aberta, auto-alojadas em /assets/fonts como
   .woff2. Sem CDN externo (performance + RGPD). Open Sans e Playfair
   Display são servidas pela Google como ficheiro variável — um único
   .woff2 cobre os pesos pedidos, por isso cada peso tem o seu próprio
   @font-face mas partilha o mesmo ficheiro local.
   ------------------------------------------------------------- */
@font-face{
  font-family: "Open Sans";
  src: url("../fonts/open-sans-variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Open Sans";
  src: url("../fonts/open-sans-variable.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-variable.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ===== paleta — só preto, branco e escalas de cinzento ===== */
  --preto:     #0A0A0A;
  --branco:    #FFFFFF;
  --cinza-100: #F5F5F5;
  --cinza-200: #E0E0E0;
  --cinza-300: #C7C7C7;
  --cinza-400: #9A9A9A;
  --cinza-500: #808080;
  --cinza-600: #595959;
  --cinza-700: #333333;
  --cinza-800: #1A1A1A;

  /* ===== superfícies e texto (tudo derivado da paleta acima) ===== */
  --bg:            var(--preto);
  --bg-alt:        color-mix(in srgb, var(--branco) 4%, var(--preto));
  --surface:       color-mix(in srgb, var(--branco) 7%, var(--preto));
  --surface-2:     color-mix(in srgb, var(--branco) 11%, var(--preto));
  --line:          color-mix(in srgb, var(--branco) 12%, transparent);
  --line-strong:   color-mix(in srgb, var(--branco) 22%, transparent);

  --ink:           var(--branco);
  --ink-soft:      var(--cinza-200);
  --ink-muted:     var(--cinza-400);

  /* ===== tipografia — três fontes, por ordem de hierarquia ===== */
  --fonte-display: "Pinyon Script", cursive;
  --fonte-titulos: "Playfair Display", Georgia, serif;
  --fonte-corpo:   "Open Sans", system-ui, sans-serif;

  /* ===== ritmo ===== */
  --gap: clamp(1.25rem, 2vw, 2rem);
  --section-pad: clamp(4rem, 9vw, 8rem);
  --radius: 4px;
  --radius-lg: 10px;
  --container: 1180px;

  --shadow: 0 20px 60px -20px color-mix(in srgb, var(--preto) 55%, transparent);
  --ease: cubic-bezier(.19,1,.22,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

h1,h2,h3{
  font-family: var(--fonte-titulos);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h4{
  font-family: var(--fonte-corpo);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 400; }
h2{ font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.55rem); }
p{ margin: 0 0 1em; color: var(--ink-soft); }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--fonte-corpo);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.1em;
}
.eyebrow::before{
  content:"";
  width: 26px; height:1px;
  background: var(--ink-muted);
  display:inline-block;
}

.lede{ font-size: 1.1rem; color: var(--ink-soft); max-width: 54ch; }

section{ padding-block: var(--section-pad); position:relative; }
.section-head{ max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }

/* ---------------- Buttons ----------------
   Hierarquia de CTAs sem depender de cor:
   .btn-primary = sólido, alto contraste (só o CTA principal)
   .btn-outline = contorno, funil de navegação
   .btn-ghost   = inline/texto, ação secundária discreta
   ------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding: .95em 1.7em;
  border-radius: 100px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--branco);
  color: var(--preto);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--branco) 35%, transparent);
}
.btn-primary:hover{ box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--branco) 45%, transparent); }
.btn-outline{
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--branco); border-color: var(--branco); color: var(--preto); }
.btn-ghost{
  background: transparent;
  color: var(--ink);
  padding: .95em .4em;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-color: var(--line-strong);
}
.btn-ghost:hover{ text-decoration-color: var(--ink); }
.btn-lg{ padding: 1.1em 2.2em; font-size: 1rem; }
.btn svg{ width: 1.1em; height:1.1em; flex-shrink:0; }

/* ---------------- Header / Nav ---------------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding-block: 1.15rem;
  transition: background .4s ease, padding .35s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: color-mix(in srgb, var(--preto) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line);
  padding-block: .75rem;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.5rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; font-family: var(--fonte-display); font-style: normal; font-size:1.3rem; color: var(--ink); }
.brand img{ height: 34px; width:auto; }
.brand small{ display:block; font-family: var(--fonte-corpo); font-size:.6rem; letter-spacing:.2em; color: var(--ink-muted); text-transform:uppercase; font-weight:600; }

.nav-main{ display:flex; align-items:center; gap: 2.1rem; }
.nav-main a{
  font-family: var(--fonte-corpo);
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-soft);
  position:relative;
  padding-block:.3rem;
}
.nav-main a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background: var(--branco);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-main a:hover{ color: var(--ink); }
.nav-main a:hover::after, .nav-main a.active::after{ transform: scaleX(1); }
.nav-main a.active{ color: var(--ink); font-weight:600; }

.header-actions{ display:flex; align-items:center; gap: .9rem; }
.icon-btn-call{
  display:flex; align-items:center; gap:.5em;
  color: var(--ink-soft); font-size:.9rem; font-weight:600;
}
.icon-btn-call svg{ width:1.1em; height:1.1em; color: var(--ink-soft); }

.nav-toggle{
  display:none;
  width: 42px; height:42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  align-items:center; justify-content:center;
  color: var(--ink);
}
.nav-toggle svg{ width:20px; height:20px; }

/* mobile drawer */
.mobile-drawer{
  position: fixed; inset:0;
  background: color-mix(in srgb, var(--preto) 97%, transparent);
  backdrop-filter: blur(6px);
  z-index: 200;
  display:flex; flex-direction:column;
  padding: 1.5rem;
  transform: translateY(-8px);
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.mobile-drawer.is-open{
  opacity:1; visibility:visible; transform:none;
  transition: opacity .3s ease, transform .3s ease;
}
.mobile-drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 3rem; }
.mobile-drawer nav{ display:flex; flex-direction:column; gap: 1.4rem; }
.mobile-drawer nav a{ font-family: var(--fonte-corpo); font-weight:600; font-size: 1.9rem; color: var(--ink); }
.mobile-drawer .btn{ margin-top: 2.5rem; align-self:flex-start; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  align-items: flex-end;
  padding-top: 8rem;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  object-position: 78% 32%;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--preto) 55%, transparent) 0%, color-mix(in srgb, var(--preto) 35%, transparent) 30%, color-mix(in srgb, var(--preto) 55%, transparent) 66%, color-mix(in srgb, var(--preto) 96%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--preto) 88%, transparent) 0%, color-mix(in srgb, var(--preto) 35%, transparent) 48%, color-mix(in srgb, var(--preto) 15%, transparent) 100%);
}
.hero-content{ position:relative; z-index:1; max-width: 760px; }
.hero-content h1{ margin-bottom:.35em; }
.hero-content h1 em{
  font-family: var(--fonte-display);
  font-style: normal;
  color: var(--ink);
  font-size: 1.4em;
  line-height: 1.3;
  letter-spacing: .01em;
  display:inline-block;
  padding-bottom:.08em;
}
.hero-content .lede{ font-size: 1.15rem; max-width: 46ch; margin-bottom: 2.2em; color: var(--ink-soft); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap: 1rem; margin-bottom: 2.6rem; }
.hero-scroll{
  position:absolute; right: clamp(1.25rem,5vw,2.5rem); bottom: 2.2rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color: var(--ink-muted); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  z-index:1;
}
.hero-scroll .line{ width:1px; height:42px; background: linear-gradient(var(--branco), transparent); animation: scrollpulse 2.4s ease-in-out infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* ---------------- Trust bar ---------------- */
.trust-bar{
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.trust-bar .container{
  display:flex; flex-wrap:wrap; gap: 1.75rem 2.75rem;
  align-items:center; justify-content:space-between;
}
.trust-item{ display:flex; align-items:center; gap:.65rem; font-size:.92rem; color: var(--ink-soft); font-weight:600; }
.trust-item svg{ width:1.2em; height:1.2em; color: var(--ink-soft); flex-shrink:0; }
.trust-item strong{ color: var(--ink); font-family: var(--fonte-corpo); font-size:1.15rem; font-weight:600; }
.stars{ color: var(--branco); letter-spacing:.1em; }

/* ---------------- Cards: "o que se faz aqui" ---------------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }

.feature-card{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 3/4;
  isolation:isolate;
  box-shadow: var(--shadow);
}
.feature-card img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.feature-card:hover img{ transform: scale(1.06); }
.feature-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--preto) 92%, transparent) 100%);
}
.feature-card-body{ position:absolute; left:0; right:0; bottom:0; padding: 1.6rem; z-index:2; }
.feature-card-body .num{ font-family: var(--fonte-corpo); color: var(--ink-muted); font-size:.85rem; letter-spacing:.15em; font-weight:600; }
.feature-card-body h3{ margin: .35em 0 .4em; color:#fff; }
.feature-card-body p{ color: var(--ink-soft); font-size:.92rem; margin-bottom:0; }

/* ---------------- Menu highlight cards ---------------- */
.menu-highlights{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.dish-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: border-color .3s ease, transform .3s var(--ease);
}
.dish-card:hover{ border-color: var(--line-strong); transform: translateY(-4px); }
.dish-card .thumb{ aspect-ratio: 1/1; overflow:hidden; }
.dish-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.dish-card-body{ padding: 1.1rem 1.2rem 1.3rem; }
.dish-card-body .row{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.dish-card-body h3{ font-family: var(--fonte-corpo); font-size:1.05rem; line-height:1.2; letter-spacing:normal; color:var(--ink); margin:0; font-weight:600; }
.dish-card-body .price{ font-family: var(--fonte-corpo); color: var(--ink); font-weight:600; font-size:1.05rem; white-space:nowrap; }
.dish-card-body .desc{ font-size:.85rem; color: var(--ink-muted); margin: .4em 0 0; }
.tag-row{ display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; }

/* two big cover cards (Comida / Bebidas) */
.cover-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.cover-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio: 4/5; box-shadow: var(--shadow);
}
.cover-card img{ width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease); }
.cover-card:hover img{ transform: scale(1.05); }
.cover-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, color-mix(in srgb, var(--preto) 92%, transparent) 0%, color-mix(in srgb, var(--preto) 15%, transparent) 55%, transparent 100%); }
.cover-card-body{ position:absolute; left:0; right:0; bottom:0; padding: 2rem; z-index:2; }
.cover-card-body .eyebrow{ margin-bottom:.5em; }
.cover-card-body h3{ font-size: clamp(1.5rem,3vw,2rem); color:#fff; margin-bottom:.3em; }
.cover-card-body p{ color: var(--ink-soft); margin-bottom: 1.2em; max-width: 34ch; }

/* ---------------- Ambience / about split ---------------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.split-media{ position:relative; }
.split-media img{ width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); display:block; }
.split-media .frame{
  position:absolute; inset: 18px;
  border: 1px solid color-mix(in srgb, var(--branco) 35%, transparent);
  pointer-events:none;
}
.split .stat-chip{
  position:absolute; left: -1.5rem; bottom: -1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow);
}
.stat-chip .big{ font-family: var(--fonte-corpo); font-weight:600; font-size:2.1rem; color: var(--ink); line-height:1; }
.stat-chip .small{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color: var(--ink-muted); margin-top:.4em; }

.check-list{ display:flex; flex-direction:column; gap: .85rem; margin: 1.6rem 0 2.2rem; }
.check-list li{ display:flex; gap:.75rem; align-items:flex-start; color: var(--ink-soft); font-size:.95rem; }
.check-list svg{ width:1.15em; height:1.15em; color: var(--ink); flex-shrink:0; margin-top:.15em; }

/* ---------------- Gallery grid ---------------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: .85rem;
}
.gallery-grid figure{
  margin:0; position:relative; overflow:hidden; border-radius: var(--radius);
  cursor: zoom-in;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease), filter .4s ease; }
.gallery-grid figure:hover img{ transform: scale(1.07); }
.gallery-grid figure::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--preto) 55%, transparent), transparent 45%);
  opacity:0; transition: opacity .3s ease;
}
.gallery-grid figure:hover::after{ opacity:1; }
.gallery-grid figcaption{
  position:absolute; left:.9rem; bottom:.8rem; z-index:2;
  font-size:.78rem; color:#fff; opacity:0; transform: translateY(6px);
  transition: all .3s ease; font-weight:600;
}
.gallery-grid figure:hover figcaption{ opacity:1; transform:none; }
.gallery-grid .tall{ grid-row: span 2; }
.gallery-grid .wide{ grid-column: span 2; }

.lightbox{
  position: fixed; inset:0; z-index: 300;
  background: color-mix(in srgb, var(--preto) 96%, transparent);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  padding: 4rem 1.5rem;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition: opacity .3s ease; }
.lightbox img{ max-width: min(92vw, 1100px); max-height: 82vh; object-fit:contain; border-radius: var(--radius); box-shadow: var(--shadow); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background: color-mix(in srgb, var(--branco) 6%, transparent); border:1px solid var(--line-strong);
  color: var(--branco); width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.lightbox-close{ top:1.5rem; right:1.5rem; }
.lightbox-prev{ left:1.5rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1.5rem; top:50%; transform:translateY(-50%); }
.lightbox-close svg,.lightbox-prev svg,.lightbox-next svg{ width:20px; height:20px; }

/* ---------------- Events CTA ---------------- */
.events-cta{
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(120deg, var(--surface-2), var(--surface) 60%);
  border: 1px solid var(--line-strong);
  position:relative; overflow:hidden;
}
.events-cta::before{
  content:"";
  position:absolute; width:520px; height:520px; border-radius:50%;
  right:-180px; top:-220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--branco) 8%, transparent), transparent 70%);
}
.events-cta-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items:center; }
.events-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin: 1.4rem 0 0; }
.events-list li{
  border:1px solid var(--line-strong); border-radius:100px; padding:.5em 1.1em;
  font-size:.85rem; color: var(--ink-soft);
}

/* ---------------- Testimonials ---------------- */
.testi-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.testi-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem;
}
.testi-card .stars{ display:block; margin-bottom: 1rem; font-size: .95rem; }
.testi-card p{ font-family: var(--fonte-corpo); font-size: 1.08rem; color: var(--ink); font-style:italic; }
.testi-card footer{ display:flex; align-items:center; gap:.7rem; margin-top: 1.3rem; }
.testi-avatar{
  width:38px; height:38px; border-radius:50%;
  background: var(--surface-2); color: var(--ink);
  display:flex; align-items:center; justify-content:center; font-family: var(--fonte-corpo); font-weight:600;
}
.testi-name{ font-size:.85rem; color: var(--ink-soft); font-weight:600; }
.testi-name span{ display:block; font-weight:400; color: var(--ink-muted); font-size:.78rem; }

/* ---------------- Location / contact ---------------- */
.loc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items:stretch; }
.loc-map{ border-radius: var(--radius-lg); overflow:hidden; min-height: 340px; border:1px solid var(--line); filter: grayscale(1) invert(.85) brightness(1.05) contrast(1.15); }
.loc-map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }
.loc-info{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.75rem,3vw,2.75rem); }
.loc-row{ display:flex; gap:1rem; padding-block: 1rem; border-bottom:1px solid var(--line); }
.loc-row:last-child{ border-bottom:0; }
.loc-row svg{ width:1.3em; height:1.3em; color: var(--ink-soft); flex-shrink:0; margin-top:.15em; }
.loc-row h3{ font-family: var(--fonte-corpo); font-size:.78rem; line-height:1.2; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-muted); margin:0 0 .3em; font-weight:600; }
.loc-row p{ margin:0; color: var(--ink); font-weight:600; font-size:.95rem; }
.hours-table{ width:100%; font-size:.92rem; }
.hours-table td{ padding: .3rem 0; color: var(--ink-soft); }
.hours-table td:last-child{ text-align:right; color: var(--ink); font-weight:600; }

/* ---------------- Final CTA band ---------------- */
.cta-band{
  text-align:center;
  padding-block: clamp(4rem,8vw,6.5rem);
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  border-top: 1px solid var(--line);
}
.cta-band h2{ max-width: 18ch; margin-inline:auto; }
.cta-band .btn-row{ display:flex; gap:1rem; justify-content:center; margin-top: 2rem; flex-wrap:wrap; }

/* ---------------- Footer ---------------- */
.site-footer{ background: color-mix(in srgb, var(--branco) 2%, var(--preto)); border-top: 1px solid var(--line); padding-block: 3.5rem 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer-brand{ display:flex; align-items:center; gap:.6rem; font-family: var(--fonte-display); font-style: normal; font-size:1.25rem; margin-bottom:1rem; }
.footer-brand img{ height:30px; }
.site-footer p{ font-size:.88rem; }
.site-footer h3{ font-family: var(--fonte-corpo); font-weight:600; font-size:.75rem; line-height:1.2; text-transform:uppercase; letter-spacing:.14em; color: var(--ink-muted); margin: 0 0 1.1em; }
.footer-links{ display:flex; flex-direction:column; gap:.65rem; }
.footer-links a{ font-size:.9rem; color: var(--ink-soft); }
.footer-links a:hover{ color: var(--ink); }
.footer-social{ display:flex; gap:.75rem; margin-top:1.2rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color: var(--ink-soft);
}
.footer-social a:hover{ border-color: var(--branco); color: var(--ink); }
.footer-social svg{ width:17px; height:17px; }
.footer-bottom{
  border-top: 1px solid var(--line); padding-top: 1.75rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.8rem; color: var(--ink-muted);
}
.footer-bottom-links{ display:flex; gap:1.5rem; }
.footer-bottom-links a{ color: var(--ink-muted); }
.footer-bottom-links a:hover{ color: var(--ink); }
/* assinatura do autor do site — discreta, mas o nome sobressai no hover */
.footer-credit strong{ font-weight:600; color: var(--ink-muted); transition: color .25s ease; }
.footer-credit:hover strong{ color: var(--ink); }

/* ---------------- Mobile sticky reserve bar ----------------
   OPÇÃO B: botão flutuante fixo — ver etiquetas no HTML.
   ------------------------------------------------------------- */
.mobile-bar{
  position: fixed; left:0; right:0; bottom:0; z-index: 90;
  display:none;
  background: color-mix(in srgb, var(--preto) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-strong);
  padding: .7rem .9rem;
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  gap: .7rem;
}
.mobile-bar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5em;
  padding: .85em 1em; border-radius: 100px; font-weight:600; font-size:.9rem;
}
.mobile-bar .call{ border:1px solid var(--line-strong); color: var(--ink); }
.mobile-bar .reserve{ background: var(--branco); color: var(--preto); }
.mobile-bar svg{ width:1.1em; height:1.1em; }

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero{
  padding-top: 10rem; padding-bottom: 4rem;
  position:relative; overflow:hidden;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero-media{ position:absolute; inset:0; z-index:0; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.32; }
.page-hero-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, color-mix(in srgb, var(--preto) 40%, transparent), var(--bg) 92%); }
.breadcrumb{ display:flex; gap:.5em; align-items:center; font-size:.82rem; color: var(--ink-muted); margin-bottom:1.4rem; }
.breadcrumb a:hover{ color: var(--ink); }

/* ---------------- Menu page ---------------- */
.menu-nav{
  position: sticky; top: 76px; z-index: 40;
  background: color-mix(in srgb, var(--preto) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-block: 1rem;
  margin-bottom: 3rem;
}
.menu-nav .container{ display:flex; gap: .6rem; overflow-x:auto; scrollbar-width:none; }
.menu-nav .container::-webkit-scrollbar{ display:none; }
.menu-nav a{
  white-space:nowrap; padding: .55em 1.15em; border-radius:100px; font-size:.85rem; font-weight:600;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.menu-nav a.active, .menu-nav a:hover{ background: var(--branco); border-color: var(--branco); color: var(--preto); }

.menu-category{ display:none; padding-block: 3rem; scroll-margin-top: 150px; }
.menu-category.is-active{ display:block; }
.menu-category:first-of-type{ padding-top:0; }
.menu-cat-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom: 2.2rem; flex-wrap:wrap; }
.menu-cat-head p{ margin:0; max-width:48ch; }

.menu-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.menu-item{ display:flex; justify-content:space-between; gap:1rem; padding-block: 1.1rem; border-bottom: 1px dashed var(--line); }
.menu-item .name{ font-family: var(--fonte-corpo); font-size: 1.05rem; color: var(--ink); font-weight:600; }
.menu-item .name .allergen{ font-family:var(--fonte-corpo); font-size:.68rem; color: var(--ink-muted); vertical-align:super; margin-left:.3em; }
.menu-item .desc{ font-size:.83rem; color: var(--ink-muted); margin-top:.3em; }
.menu-item .price{ font-family: var(--fonte-corpo); color: var(--ink); font-weight:600; font-size: 1.05rem; white-space:nowrap; flex-shrink:0; }

.menu-note{
  margin-top: 3.5rem; padding: 1.3rem 1.6rem; border:1px dashed var(--line-strong); border-radius: var(--radius-lg);
  font-size: .85rem; color: var(--ink-muted); display:flex; gap:.9rem;
}
.menu-note svg{ width:1.4em; height:1.4em; color: var(--ink-soft); flex-shrink:0; }

/* ---------------- Reservation form ---------------- */
.reserve-panel{ background: var(--surface); border:1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(1.75rem,4vw,2.75rem); box-shadow: var(--shadow); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field{ margin-bottom: 1.15rem; }
/* o grupo de rádios "Ocasião" é um <fieldset> (semântica correta para o grupo);
   isto tira a moldura e margens que o browser lhe dá por defeito */
fieldset.field{ border:0; padding:0; margin-inline:0; min-inline-size:0; }
fieldset.field > legend{ padding:0; }
.field label, .field > legend{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-muted); margin-bottom:.5em; font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; background: var(--bg-alt); border:1px solid var(--line-strong); border-radius: var(--radius);
  padding: .85em 1em; color: var(--ink); outline:none; transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--branco); }
.field textarea{ resize: vertical; min-height: 90px; }
.field-occasion{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip-radio{ position:relative; }
.chip-radio input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip-radio span{
  display:inline-flex; padding:.55em 1.1em; border-radius:100px; border:1px solid var(--line-strong);
  font-size:.85rem; color: var(--ink-soft); transition: all .2s ease;
}
.chip-radio input:checked + span{ background: var(--branco); border-color: var(--branco); color: var(--preto); }
/* o input está opacity:0, por isso o foco tem de ser desenhado no span */
.chip-radio input:focus-visible + span{ outline:2px solid var(--branco); outline-offset:2px; }

/* ---------------- Events page extras ---------------- */
.pack-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
/* variante de 2 colunas (4 tipos de evento, 2 redes sociais) — colapsa com os
   breakpoints normais, ao contrário de um style inline que os venceria */
.pack-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.pack-grid.narrow{ max-width: 760px; margin-inline: auto; }
.pack-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; display:flex; flex-direction:column; }
.pack-card .icon{ width:48px; height:48px; border-radius:50%; background: var(--surface-2); display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; }
.pack-card .icon svg{ width:22px; height:22px; color: var(--ink); }
.pack-card ul{ margin: 1rem 0 1.6rem; display:flex; flex-direction:column; gap:.55rem; }
.pack-card li{ font-size:.87rem; color: var(--ink-soft); display:flex; gap:.6rem; }
.pack-card li svg{ width:1.1em; height:1.1em; color: var(--ink); flex-shrink:0; margin-top:.15em; }
.pack-card .btn{ margin-top:auto; }
/* nota que substitui o CTA num cartão sem orçamento — alinha no mesmo sítio */
.pack-note{ margin-top:auto; margin-bottom:0; font-size:.85rem; color: var(--ink-muted); }
.pack-note a{ color: var(--ink); text-decoration:underline; text-underline-offset:.25em; text-decoration-color: var(--line-strong); }
.pack-note a:hover{ text-decoration-color: var(--ink); }

/* ---------------- Utility ---------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ================= Responsive ================= */
@media (max-width: 1080px){
  .grid-3, .menu-highlights{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .pack-grid, .pack-grid.cols-2{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 860px){
  .nav-main, .header-actions .icon-btn-call, .header-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .split, .loc-grid, .cover-cards, .grid-2, .events-cta-inner, .testi-grid{ grid-template-columns: 1fr; }
  .split{ gap: 3.5rem; }
  .split.reverse .split-media{ order:-1; }
  .menu-list{ grid-template-columns: 1fr; }
  .mobile-bar{ display:flex; }
  body{ padding-bottom: 78px; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 180px; }
  .stat-chip{ left:1rem; bottom:1rem; }
}

@media (max-width: 620px){
  .grid-3, .menu-highlights{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .hero-scroll{ display:none; }
  .footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------------- Alvos de âncora sob o header fixo ---------------- */
#reservar, #orcamento{ scroll-margin-top: 110px; }

/* ---------------- Respeitar prefers-reduced-motion ---------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------------- Skip link (só visível com foco de teclado) ---------------- */
.skip-link{
  position:absolute; left:1rem; top:-100px;
  z-index:300;
  background: var(--branco); color: var(--preto);
  padding:.8em 1.4em; border-radius:100px;
  font-weight:600; font-size:.9rem;
  transition: top .2s ease;
}
.skip-link:focus{ top:1rem; }

/* Reserva altura para os widgets Elfsight antes de carregarem (evita CLS) */
[class^="elfsight-app-"]{ min-height: 420px; }

/* ---------------- Banner de cookies (RGPD) ---------------- */
.cookie-banner{
  position: fixed; left:1rem; right:1rem; bottom:1rem;
  z-index: 250;
  max-width: 620px; margin-inline:auto;
  background: var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
  display:flex; flex-direction:column; gap:1rem;
}
.cookie-banner p{ margin:0; font-size:.88rem; color: var(--ink-soft); }
.cookie-banner a{ color: var(--ink); text-decoration:underline; text-underline-offset:.25em; }
.cookie-banner-actions{ display:flex; gap:.7rem; }
/* os dois botões têm o mesmo tamanho: recusar não pode ser mais difícil que aceitar */
.cookie-banner-actions .btn{ flex:1; padding:.7em 1.2em; font-size:.9rem; }

@media (max-width: 860px){
  /* não tapar a barra fixa de "Ligar / Reservar" */
  .cookie-banner{ bottom: 90px; }
}

/* ---------------- Páginas legais (cookies, privacidade) ---------------- */
.legal-doc{ max-width: 70ch; }
.legal-doc h2{ font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 2.5rem; }
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc p{ font-size: 1rem; }
.legal-doc a{ color: var(--ink); text-decoration:underline; text-underline-offset:.25em; text-decoration-color: var(--line-strong); }
.legal-doc a:hover{ text-decoration-color: var(--ink); }
.legal-doc .hours-table{ margin: 1.2rem 0 0; }
.legal-doc .hours-table th{ text-align:left; font-weight:600; color: var(--ink-muted); font-size:.9rem; padding-right:1.5rem; }