/* Barile Bar — cartaz de calçada (claro) + tampo de barril (escuro) */

:root {
  --papel: #f3e9d6;
  --papel-fundo: #e9dcc3;
  --tinta: #1d140e;
  --tinta-suave: #5a4a3c;
  --vermelho: #c4281c;
  --verde: #1f4a2e;
  --amarelo: #f2b21b;
  --laranja: #ef7d17;
  --madeira: #24170f;
  --madeira-funda: #150d08;
  --cobre: #cf9160;
  --osso: #f6eddd;
  --osso-suave: #c4b39c;

  --cartaz: "Anton", "Arial Narrow", Impact, sans-serif;
  --texto: "Archivo", "Segoe UI", Arial, sans-serif;

  --largura: 76rem;
  --respiro: 1.25rem;
  --topo: 4rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

* { font-style: normal; }

html {
  scroll-padding-top: calc(var(--topo) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.55;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd, ul, address { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2 {
  font-family: var(--cartaz);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
}

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
}

.pular {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--tinta);
  color: var(--osso);
}
.pular:focus { top: 0.5rem; }

/* ---------- botões e links ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.4rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: background-color 0.15s;
}
.botao--zap { background: var(--verde); color: var(--osso); }
.botao--zap:hover { background: #153521; }
.botao--amarelo { background: var(--amarelo); color: var(--tinta); }
.botao--amarelo:hover { background: #ffc73d; }

.link-seta {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.link-seta::after { content: " \2193"; }
.link-seta:hover { color: var(--vermelho); }
.link-seta--claro::after { content: " \2197"; }
.link-seta--claro:hover { color: var(--amarelo); }

/* ---------- topo ---------- */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 2px solid var(--tinta);
}
.topo__dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--largura);
  height: var(--topo);
  margin-inline: auto;
  padding-inline: var(--respiro);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--cartaz);
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.marca img { border-radius: 50%; }

.topo__botao {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 2px solid var(--tinta);
  border-radius: 3px;
  background: transparent;
  color: var(--tinta);
  font: 700 0.95rem var(--texto);
  cursor: pointer;
}
.topo__barras,
.topo__barras::before,
.topo__barras::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
}
.topo__barras { position: relative; }
.topo__barras::before,
.topo__barras::after { content: ""; position: absolute; left: 0; }
.topo__barras::before { top: -6px; }
.topo__barras::after { top: 6px; }
.topo__botao[aria-expanded="true"] .topo__barras { background: transparent; }
.topo__botao[aria-expanded="true"] .topo__barras::before { top: 0; transform: rotate(45deg); }
.topo__botao[aria-expanded="true"] .topo__barras::after { top: 0; transform: rotate(-45deg); }

.menu {
  display: none;
  position: absolute;
  inset: 100% 0 auto 0;
  flex-direction: column;
  padding: 0.5rem var(--respiro) 1.25rem;
  background: var(--papel);
  border-bottom: 2px solid var(--tinta);
}
.menu.aberto { display: flex; }
.menu a {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(29, 20, 14, 0.18);
  font-weight: 500;
  font-size: 1.125rem;
  text-decoration: none;
}
.menu a:hover { color: var(--vermelho); }
.menu .menu__zap {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-radius: 3px;
  background: var(--verde);
  color: var(--osso);
  font-weight: 700;
  text-align: center;
}
.menu .menu__zap:hover { background: #153521; color: var(--osso); }

@media (min-width: 56rem) {
  .topo__botao { display: none; }
  .menu {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.9rem;
    padding: 0;
    border: 0;
  }
  .menu a { padding: 0.4rem 0; border: 0; font-size: 1rem; }
  .menu .menu__zap { margin: 0 0 0 0.4rem; padding: 0.6rem 1.1rem; }
}

/* ---------- abertura ---------- */

.abertura { padding-top: var(--topo); }
.abertura__dentro {
  display: grid;
  gap: 2rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 2.25rem var(--respiro) 0;
}

.sobretitulo {
  margin-bottom: 1.1rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.abertura h1 { font-size: clamp(2.9rem, 14.2vw, 6.4rem); }

.etiqueta {
  display: inline-block;
  margin-top: 0.14em;
  padding: 0.2em 0.2em 0.06em;
  background: var(--vermelho);
  white-space: nowrap;
  font-size: 0.8em;
  color: var(--osso);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.abertura__apoio {
  max-width: 30rem;
  margin-top: 1.75rem;
  font-size: 1.1875rem;
  font-weight: 500;
}

.abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.abertura__foto {
  position: relative;
  z-index: 2;
  width: min(100%, 23rem);
  margin: 0.5rem auto -4.5rem;
  padding: 0.55rem 0.55rem 0.55rem;
  background: var(--osso);
  border: 2px solid var(--tinta);
  transform: rotate(2.5deg);
}
.abertura__foto img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }

.plaquinha {
  display: grid;
  border: 2px solid var(--tinta);
  order: 2;
}
.plaquinha > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
}
.plaquinha > div + div { border-top: 2px solid var(--tinta); }
.plaquinha dt {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.plaquinha dd {
  font-family: var(--cartaz);
  font-size: 1.35rem;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: right;
}
.plaquinha__fechado { background: var(--tinta); color: var(--osso); }

.abertura__foto { order: 3; }

@media (min-width: 56rem) {
  .abertura__dentro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
    grid-template-rows: auto auto;
    column-gap: 3.5rem;
    row-gap: 2.75rem;
    padding-top: 4rem;
  }
  .abertura h1 { font-size: clamp(3.4rem, 6.1vw, 5.9rem); }
  .etiqueta { font-size: 1em; }
  .abertura__texto { grid-column: 1; grid-row: 1; }
  .plaquinha {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(3, 1fr);
    align-self: end;
    margin-bottom: 3.5rem;
    order: 0;
  }
  .plaquinha > div { flex-direction: column; gap: 0.25rem; padding: 0.85rem 1rem 0.9rem; }
  .plaquinha > div + div { border-top: 0; border-left: 2px solid var(--tinta); }
  .plaquinha dd { text-align: left; font-size: 1.55rem; }
  .abertura__foto {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    width: 100%;
    margin: 0 0 -6.5rem;
    order: 0;
  }
}

/* ---------- happy hour ---------- */

.happy { background: var(--verde); color: var(--osso); }
.happy__dentro {
  display: grid;
  gap: 1.25rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 6.5rem var(--respiro) 3rem;
}
.happy h2 {
  max-width: 9em;
  font-size: clamp(2.6rem, 11vw, 5.4rem);
  color: var(--amarelo);
}
.happy__notas { max-width: 27rem; }
.happy__notas p + p { margin-top: 0.75rem; }
.happy__miudo { font-size: 0.9375rem; color: #c9d6c5; }

@media (min-width: 56rem) {
  .happy__dentro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
    column-gap: 3.5rem;
    padding-block: 3.75rem 4rem;
  }
  .happy h2, .happy__notas { grid-column: 1; }
  .happy h2 { font-size: clamp(3.6rem, 6.4vw, 5.8rem); }
}

/* ---------- a casa ---------- */

.casa__dentro {
  display: grid;
  gap: 2.25rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 4rem var(--respiro) 5.5rem;
}
.casa h2 { font-size: clamp(2.5rem, 10vw, 4.4rem); max-width: 8em; }
.casa__texto p { max-width: 33rem; margin-top: 1.1rem; }
.casa__texto .casa__abre { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.4; }

.casa__foto {
  width: min(100%, 38rem);
  padding: 0.5rem;
  background: var(--osso);
  border: 2px solid var(--tinta);
  transform: rotate(-1.5deg);
}
.casa__foto img { width: 100%; }
.casa__foto figcaption {
  padding: 0.55rem 0.2rem 0.1rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.casa__selo {
  justify-self: start;
  max-width: 24rem;
  padding: 1rem 1.2rem 1.1rem;
  background: var(--amarelo);
  font-size: 1rem;
  line-height: 1.45;
}
.casa__selo strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--cartaz);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
  text-transform: uppercase;
}

@media (min-width: 56rem) {
  .casa__dentro {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: 4.5rem;
    row-gap: 0;
    padding-block: 9.5rem 7rem;
  }
  .casa__foto { grid-column: 1; grid-row: 1; align-self: start; }
  .casa__texto { grid-column: 2; grid-row: 1 / span 2; }
  .casa__selo {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    z-index: 2;
    justify-self: end;
    margin: -1.5rem -2rem 0 0;
  }
}

/* ---------- cardápio ---------- */

.cardapio { background: var(--madeira); color: var(--osso); }
.cardapio__dentro {
  display: grid;
  gap: 2.25rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 0 var(--respiro) 4rem;
}

.cardapio__foto {
  order: -1;
  width: 13.5rem;
  margin-top: -3.25rem;
  padding: 0.4rem;
  border: 2px solid var(--cobre);
  border-radius: 50%;
  background: var(--madeira);
  box-shadow: 0 0 0 0.4rem var(--madeira), 0 0 0 calc(0.4rem + 2px) var(--cobre);
}
.cardapio__foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 78%;
  border-radius: 50%;
}

.cardapio__cabeca h2 { font-size: clamp(2.6rem, 11vw, 5rem); color: var(--cobre); }
.cardapio__cabeca p { max-width: 26rem; margin-top: 1rem; color: var(--osso-suave); }

.cardapio__listas { display: grid; gap: 2.5rem; }

.lista h3 {
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--cobre);
  font-family: var(--cartaz);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--amarelo);
}
.lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed rgba(246, 237, 221, 0.28);
}
.lista strong { display: block; font-size: 1.125rem; font-weight: 700; }
.lista li div span { display: block; margin-top: 0.15rem; font-size: 0.9375rem; color: var(--osso-suave); }
.preco {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobre);
}

.cardapio__viagem {
  padding: 1rem 1.2rem;
  border: 2px solid var(--cobre);
  font-weight: 500;
}

@media (min-width: 40rem) {
  .cardapio__listas { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

@media (min-width: 56rem) {
  .cardapio__dentro {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 4rem;
    row-gap: 2.75rem;
    padding-bottom: 6rem;
  }
  .cardapio__foto {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    width: 100%;
    max-width: 22rem;
    margin-top: -5.5rem;
    order: 0;
  }
  .cardapio__cabeca { grid-column: 2; padding-top: 4.5rem; }
  .cardapio__listas { grid-column: 2; }
  .cardapio__viagem { grid-column: 2; justify-self: start; }
}

/* ---------- fotos ---------- */

.fotos__dentro {
  max-width: var(--largura);
  margin-inline: auto;
  padding: 4rem var(--respiro) 4.5rem;
}
.fotos h2 { font-size: clamp(2.8rem, 12vw, 6rem); }
.fotos__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.75rem;
}
.fotos__grade img { width: 100%; object-fit: cover; }
.fotos__grade figcaption { padding-top: 0.5rem; font-size: 0.9375rem; font-weight: 500; }
.fotos__a { grid-column: 1 / -1; }
.fotos__a img { aspect-ratio: 4 / 4.4; }
.fotos__b img, .fotos__c img { aspect-ratio: 3 / 4; }

.fotos__insta {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 9rem;
  padding: 1.2rem;
  background: var(--laranja);
  color: var(--tinta);
  text-decoration: none;
}
.fotos__insta span { font-weight: 700; }
.fotos__insta strong {
  font-family: var(--cartaz);
  font-weight: 400;
  font-size: clamp(2.1rem, 9vw, 3.2rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.fotos__insta:hover { background: var(--amarelo); }

@media (min-width: 56rem) {
  .fotos__dentro { padding-block: 6rem 7rem; }
}

@media (min-width: 40rem) {
  .fotos__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 1.5rem;
    margin-top: 2.5rem;
  }
  .fotos__a { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .fotos__a img { aspect-ratio: 4 / 4.9; }
  .fotos__b { grid-column: 7 / span 3; grid-row: 1; }
  .fotos__c { grid-column: 10 / span 3; grid-row: 1; margin-top: 3.5rem; }
  .fotos__insta { grid-column: 7 / -1; grid-row: 2; align-self: start; min-height: 10rem; }
}

/* ---------- onde fica ---------- */

.onde { background: var(--madeira); color: var(--osso); }
.onde__dentro {
  display: grid;
  gap: 2.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 4rem var(--respiro) 4rem;
}
.onde h2 { font-size: clamp(3rem, 13vw, 6rem); color: var(--amarelo); }
.onde address { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.5; }
.onde__fone { margin-top: 1.25rem; }
.onde__fone a {
  display: block;
  font-family: var(--cartaz);
  font-size: 2.2rem;
  line-height: 1.1;
  text-decoration: none;
  color: var(--cobre);
}
.onde__fone a:hover { color: var(--amarelo); }
.onde__fone span { font-size: 0.9375rem; color: var(--osso-suave); }
.onde__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.horarios {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.horarios caption {
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--cobre);
  font-family: var(--cartaz);
  font-size: 1.6rem;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
  color: var(--cobre);
}
.horarios th,
.horarios td {
  padding: 0.7rem 0;
  border-bottom: 1px dashed rgba(246, 237, 221, 0.28);
  font-size: 1.125rem;
}
.horarios th { font-weight: 500; text-align: left; }
.horarios td { font-weight: 700; text-align: right; }
.horarios__fechado th,
.horarios__fechado td { color: var(--osso-suave); font-weight: 500; }
.horarios tfoot td {
  padding-top: 0.9rem;
  border: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  text-align: left;
  color: var(--osso-suave);
}

.onde__mapa { border: 2px solid var(--cobre); }
.onde__mapa iframe { display: block; width: 100%; height: 20rem; border: 0; }

@media (min-width: 56rem) {
  .onde__dentro {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: 5rem;
    row-gap: 3.5rem;
    padding-block: 6rem 5rem;
  }
  .horarios { align-self: end; }
  .onde__mapa { grid-column: 1 / -1; }
  .onde__mapa iframe { height: 26rem; }
}

/* ---------- rodapé ---------- */

.rodape { background: var(--madeira-funda); color: var(--osso-suave); font-size: 0.9375rem; }
.rodape__dentro {
  display: grid;
  gap: 1.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 2.5rem var(--respiro) 6rem;
}
.rodape__marca { display: flex; align-items: center; gap: 1rem; color: var(--osso); }
.rodape__marca img { border-radius: 50%; }
.rodape__aviso { max-width: 22rem; }
.rodape a { text-underline-offset: 0.25em; }
.rodape a:hover { color: var(--amarelo); }

@media (min-width: 56rem) {
  .rodape__dentro {
    grid-template-columns: 1.3fr 1fr auto;
    align-items: center;
    column-gap: 3rem;
    padding-bottom: 2.5rem;
  }
  .rodape__legal { padding-right: 5rem; }
}

/* ---------- WhatsApp fixo ---------- */

.zap-fixo {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--osso);
  border-radius: 50%;
  background: #1c7a43;
  color: #fff;
  transition: opacity 0.2s, visibility 0.2s;
}
.zap-fixo:hover { background: var(--verde); }
.zap-fixo.some { opacity: 0; visibility: hidden; }