/* =====================================================================
   Vossa Alteza | Chope Artesanal

   Um arquivo só, sem framework e sem fonte externa. A fonte vem do
   sistema de propósito: Google Fonts seria uma dependência externa (a
   regra do projeto) e mais um bloqueio de renderização. Georgia existe
   em Windows, macOS, Android e iOS, tem o ar editorial que a marca pede
   e custa zero byte.

   A paleta é a da logo, e só ela: amarelo #FEC400, laranja #F79D05,
   branco e o quase-preto #1A0E07. Nenhuma cor foi inventada aqui. É o
   que faz o site parecer do mesmo negócio que o adesivo na Kombi e o
   copo na mão — e é por isso que o brasão pode aparecer na página sem
   parecer colado de outro lugar.

   Fundo quase-preto, amarelo como única cor de destaque, branco-creme
   no texto. No meio, a seção da história vira um bloco amarelo com
   texto preto: a mesma inversão da própria logo, e o descanso que um
   trecho de leitura longa pede.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Fichas                                                           */
/* ------------------------------------------------------------------ */
:root {
  --preto:         #1A0E07;
  --preto-alto:    #241407;
  --casca:         #2E1B0A;
  --casca-linha:   #4A2F12;
  --creme:         #FBF3E3;
  --creme-fraco:   #C9B291;
  --amarelo:       #FEC400;
  --amarelo-claro: #FFDA5C;
  --laranja:       #F79D05;
  --verde:         #6FBF73;
  --alerta:        #F2765A;

  /* Papéis: componentes leem daqui, não das cores cruas. É isso que
     permite a seção clara trocar o tema inteiro mudando seis linhas. */
  --fundo:        var(--preto);
  --superficie:   var(--casca);
  --linha:        var(--casca-linha);
  --texto:        var(--creme);
  --texto-fraco:  var(--creme-fraco);
  --destaque:     var(--amarelo);

  --serifada: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sem-serifa: system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

  --borda:  14px;
  --larg:   1140px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------------ */
/* 2. Base                                                             */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* O cabeçalho gruda no topo; sem isto o título da seção para embaixo
     dele quando se clica no menu. */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--preto);
  color: var(--creme);
  font: 400 clamp(1rem, 0.97rem + 0.15vw, 1.0625rem)/1.65 var(--sem-serifa);
}
/* Não existe `overflow-x: hidden` no body aqui, e isso é deliberado.
   Ele é o curativo clássico para vazamento horizontal — e tem dois
   efeitos colaterais: esconde o vazamento em vez de corrigir (então o
   próximo passa despercebido) e transforma o body em contêiner de
   rolagem, o que quebra o `position: sticky` do cabeçalho em vários
   navegadores. Cada vazamento é resolvido na origem. */

h1, h2, h3 {
  font-family: var(--serifada);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.6rem + 2.2vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.65rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--destaque); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--amarelo-claro); }

img, svg { max-width: 100%; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pular {
  position: absolute; left: 0.75rem; top: -100px; z-index: 100;
  background: var(--amarelo); color: #1A0E07; font-weight: 700;
  padding: 0.7rem 1.1rem; border-radius: 0 0 10px 10px;
  text-decoration: none; transition: top 0.15s;
}
.pular:focus { top: 0; }

/* ------------------------------------------------------------------ */
/* 3. Ícones                                                           */
/* ------------------------------------------------------------------ */
.icone { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.28em; }
.icone-menor { width: 1.05em; height: 1.05em; opacity: 0.8; }

/* ------------------------------------------------------------------ */
/* 4. Aviso do topo                                                    */
/* ------------------------------------------------------------------ */
.aviso {
  margin: 0;
  background: var(--amarelo);
  color: #1A0E07;
  font-weight: 600;
  text-align: center;
  padding: 0.6rem var(--gutter);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ */
/* 5. Cabeçalho                                                        */
/* ------------------------------------------------------------------ */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 14, 7, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--casca-linha);
}

.topo-interno {
  max-width: var(--larg);
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "marca menu acoes";
  align-items: center;
  gap: 1rem;
}

.marca {
  grid-area: marca;
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--creme); text-decoration: none;
}
/* O brasão vem com o próprio fundo amarelo dentro do SVG, então não é um
   ícone que se pinta pelo CSS: é uma etiqueta. Cantos arredondados a
   deixam com cara de adesivo, que é o que ela é na Kombi de verdade. */
.marca-brasao {
  width: 40px; height: auto; flex: none;
  border-radius: 9px;
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.06; }
.marca-texto strong {
  font-family: var(--serifada);
  font-size: 1.24rem; letter-spacing: 0.005em;
}
.marca-texto small {
  font-size: 0.63rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--creme-fraco); margin-top: 0.18rem;
}

.menu {
  grid-area: menu;
  display: flex; justify-content: center; gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  color: var(--creme-fraco); text-decoration: none; white-space: nowrap;
  font-size: 0.9rem; padding: 0.45rem 0.7rem; border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.menu a:hover, .menu a.ativo { color: var(--creme); background: rgba(251, 243, 227, 0.08); }
.menu a.ativo { color: var(--amarelo); }

.topo-acoes {
  grid-area: acoes;
  display: flex; align-items: center; gap: 0.7rem;
}

/* ------------------------------------------------------------------ */
/* 6. Selo de "aberto agora"                                           */
/* ------------------------------------------------------------------ */
.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0;
  font-size: 0.8rem; line-height: 1.25;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--casca-linha);
  border-radius: 999px;
  background: rgba(46, 27, 10, 0.7);
  white-space: nowrap;
}
.status strong { font-weight: 600; }
.status-detalhe { color: var(--creme-fraco); }
.status-detalhe::before { content: " · "; }

.status-ponto {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--alerta);
}
.status-aberto .status-ponto {
  background: var(--verde);
  box-shadow: 0 0 0 0 rgba(111, 191, 115, 0.6);
  animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  70%  { box-shadow: 0 0 0 9px rgba(111, 191, 115, 0); }
  100% { box-shadow: 0 0 0 0  rgba(111, 191, 115, 0); }
}

.status-grande {
  font-size: 0.95rem;
  padding: 0.7rem 1.1rem;
  margin-top: 1.25rem;
  white-space: normal;
}

/* ------------------------------------------------------------------ */
/* 7. Botões                                                           */
/* ------------------------------------------------------------------ */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font: inherit; font-weight: 600; font-size: 0.975rem;
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
}
.botao:active { transform: translateY(1px); }

.botao-amarelo {
  background: linear-gradient(180deg, var(--amarelo-claro), var(--amarelo));
  color: #1A0E07;
  box-shadow: 0 6px 18px -8px rgba(254, 196, 0, 0.8);
}
.botao-amarelo:hover { background: var(--amarelo-claro); color: #1A0E07; }

.botao-fantasma {
  background: transparent;
  color: var(--texto);
  border-color: color-mix(in srgb, var(--texto) 35%, transparent);
}
.botao-fantasma:hover {
  background: color-mix(in srgb, var(--texto) 10%, transparent);
  color: var(--texto);
}

.botao-pequeno { padding: 0.55rem 1rem; font-size: 0.9rem; }
.botao-largo { width: 100%; }

/* ------------------------------------------------------------------ */
/* 8. Abertura                                                         */
/* ------------------------------------------------------------------ */
.hero {
  max-width: var(--larg);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  position: relative;
}
/* O brilho atrás do texto: sugere o poste da praça sem custar imagem.
   As bordas laterais ficam em 0, e não negativas. Sangrando 30% para
   fora, este retângulo esticava a página em 113px num celular de 390px:
   invisível (o gradiente já estava transparente ali), mas o suficiente
   para a página inteira arrastar de lado. Altura pode sangrar à vontade
   — overflow vertical não entorta nada. */
.hero::before {
  content: "";
  position: absolute; inset: -20% 0 auto 0; height: 130%;
  background: radial-gradient(58% 48% at 34% 44%,
              rgba(254, 196, 0, 0.09), transparent 70%);
  pointer-events: none; z-index: -1;
}

.etiqueta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amarelo);
  margin: 0 0 1rem;
}

.hero h1 { margin-bottom: 1rem; }
.hero h1 em {
  font-style: italic;
  color: var(--amarelo);
  display: block;
}

.hero-lead {
  font-size: clamp(1.05rem, 1rem + 0.38vw, 1.22rem);
  color: var(--creme);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}
.hero-lead strong { color: var(--amarelo-claro); font-weight: 600; }

.hero-botoes {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-bottom: 1.75rem;
}

.hero-fatos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
  font-size: 0.925rem; color: var(--creme-fraco);
}
.hero-fatos li { display: flex; align-items: center; gap: 0.55rem; }
.hero-fatos .icone { color: var(--amarelo); }

.hero-arte .cena {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.5));
}

/* ------------------------------------------------------------------ */
/* 9. Seções                                                           */
/* ------------------------------------------------------------------ */
.secao {
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter);
  background: var(--fundo);
  color: var(--texto);
}
/* Todo filho direto de .secao vira uma caixa de 1140px centrada — é o
   que mantém títulos, cartões e formulários alinhados na mesma coluna.
   ARMADILHA: um `margin: 0` numa regra de componente mais abaixo ANULA
   este `margin-inline: auto` (mesma especificidade, vence quem vem
   depois) e o bloco escorrega para a borda da tela. Só aparece em
   monitor largo, onde sobra margem — em 1280px passa despercebido.
   Por isso os componentes abaixo usam `margin-block`, nunca `margin`. */
.secao > * { max-width: var(--larg); margin-inline: auto; }

.secao-torneira, .secao-perguntas { --fundo: var(--preto-alto); }

.secao-cabeca { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.secao-cabeca h2 { margin-bottom: 0.5rem; }
.secao-intro {
  color: var(--texto-fraco);
  max-width: 46rem;
  font-size: 1.05rem;
}

/* Seção amarela: troca os papéis e tudo que está dentro acompanha.
   É a própria logo virada do avesso — fundo amarelo, traço preto,
   cartões brancos como a fita do brasão. Preto sobre este amarelo dá
   contraste de 10:1, bem acima do mínimo, então nada aqui depende de
   vista boa. */
.secao-clara {
  --fundo:       var(--amarelo);
  --superficie:  #FFFFFF;
  --linha:       rgba(26, 14, 7, 0.22);
  --texto:       #1A0E07;
  --texto-fraco: #5A4212;
  --destaque:    #1A0E07;
}
.secao-clara .etiqueta { color: #7A5A0A; }
.secao-clara .pilares li { border-color: #1A0E07; }

.vazio {
  color: var(--texto-fraco);
  border: 1px dashed var(--linha);
  border-radius: var(--borda);
  padding: 1.75rem;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* 10. Cartões                                                         */
/* ------------------------------------------------------------------ */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--borda);
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
}
.cartao h3 {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1rem;
}
.cartao h3 .icone { color: var(--destaque); }
.cartao-nota {
  color: var(--texto-fraco);
  font-size: 0.875rem;
  margin-top: 1rem;
}
.cartao-acoes {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 1.25rem 0 0;
}

/* ------------------------------------------------------------------ */
/* 11. Na torneira                                                     */
/* ------------------------------------------------------------------ */
.chopes {
  list-style: none;
  /* margin-block, e não margin: `margin: 0` anulava o margin-inline:auto
     de `.secao > *` e jogava a lista inteira para a borda esquerda da
     tela, desalinhada do título logo acima dela. */
  margin-block: 0;
  padding: 0;
  display: grid;
  /* 20rem faz caber TRÊS colunas em 1140px — o número de torneiras da
     Kombi. Os três chopes ficam numa linha só. Com 24rem cabiam duas, e
     o terceiro sobrava órfão na linha de baixo. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.chope {
  display: flex; gap: 1.1rem;
  background: var(--casca);
  border: 1px solid var(--casca-linha);
  border-radius: var(--borda);
  padding: 1.4rem;
  position: relative; overflow: hidden;
}
/* Fio de luz no topo do cartão, na cor do próprio chope. */
.chope::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--amarelo), transparent 85%);
  opacity: 0.55;
}
.chope-em-breve { opacity: 0.66; }

.chope-copo { flex: none; width: 46px; padding-top: 0.2rem; }
.copo { width: 100%; height: auto; display: block; }

.chope-corpo { min-width: 0; }
.chope-topo {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0 0 0.3rem;
}
.chope-estilo {
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--amarelo);
}
.selo {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(251, 243, 227, 0.12); color: var(--creme);
  padding: 0.15rem 0.5rem; border-radius: 999px;
}
.chope h3 { margin-bottom: 0.5rem; }
.chope-nota {
  color: var(--creme-fraco);
  font-size: 0.925rem;
  margin-bottom: 0.85rem;
}

.chope-numeros {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--creme-fraco);
  margin-bottom: 0.9rem;
}
.chope-numeros strong { color: var(--creme); font-weight: 600; }

.chope-precos {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin: 0; padding-top: 0.9rem;
  border-top: 1px solid var(--casca-linha);
}
.preco {
  display: flex; flex-direction: column;
  background: rgba(254, 196, 0, 0.1);
  border: 1px solid rgba(254, 196, 0, 0.24);
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  font-weight: 600; font-size: 0.975rem;
  color: var(--amarelo-claro);
}
.preco small {
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--creme-fraco); font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* 12. Onde e quando                                                   */
/* ------------------------------------------------------------------ */
.onde-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.cartao-endereco address {
  font-size: 1.075rem; line-height: 1.7;
}
.cartao-endereco address strong {
  font-family: var(--serifada); font-size: 1.3rem;
  display: inline-block; margin-bottom: 0.15rem;
}

.horarios { width: 100%; border-collapse: collapse; }
.horarios th, .horarios td {
  text-align: left; padding: 0.6rem 0;
  border-bottom: 1px solid var(--linha);
  font-weight: 400;
}
.horarios tr:last-child th, .horarios tr:last-child td { border-bottom: 0; }
.horarios td { text-align: right; font-variant-numeric: tabular-nums; }
.horario-fechado { color: var(--texto-fraco); }

.agenda { margin-top: 2rem; }
.agenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.agenda li {
  display: flex; align-items: center; gap: 1rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
}
.agenda time {
  font-family: var(--serifada); font-size: 1.25rem;
  color: var(--destaque); flex: none;
}
.agenda li span { display: block; color: var(--texto-fraco); font-size: 0.9rem; }

/* ------------------------------------------------------------------ */
/* 13. Eventos e formulário                                            */
/* ------------------------------------------------------------------ */
.secao-eventos { --fundo: var(--preto); }
.eventos-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.lista-marcada { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 0.55rem; }
.lista-marcada li { position: relative; padding-left: 1.6rem; color: var(--texto-fraco); }
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--destaque);
}

.campo { margin-bottom: 1rem; }
.campo label {
  display: block; font-size: 0.875rem; font-weight: 600;
  margin-bottom: 0.35rem;
}
.campo label small { font-weight: 400; color: var(--texto-fraco); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--texto);
  background: rgba(26, 14, 7, 0.5);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}
.campo textarea { resize: vertical; min-height: 5rem; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-fraco); opacity: 0.75; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--amarelo);
  outline: 2px solid rgba(254, 196, 0, 0.35);
  outline-offset: 0;
}
.campo [aria-invalid="true"] { border-color: var(--alerta); }

.campo-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.erro { color: var(--alerta); font-size: 0.85rem; margin: 0.35rem 0 0; }

/* A isca do anti-robô. Fora da tela, não display:none — robô melhor
   escrito ignora campo com display:none, mas preenche este. */
.isca {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.recado { border-radius: 10px; padding: 1rem 1.15rem; }
.recado-erro {
  background: rgba(242, 118, 90, 0.12);
  border: 1px solid rgba(242, 118, 90, 0.45);
  color: var(--alerta);
  margin-bottom: 1.25rem;
}
.recado-ok h3 { color: var(--destaque); }

/* ------------------------------------------------------------------ */
/* 14. A história                                                      */
/* ------------------------------------------------------------------ */
.historia-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.prosa {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.16rem);
  max-width: 38rem;
}
.prosa p { margin-bottom: 1.1rem; }
/* Capitular: dá ar de revista à única parte longa de leitura. */
.prosa > p:first-child::first-letter {
  font-family: var(--serifada);
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--destaque);
}

.pilares { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pilares li {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--borda);
  padding: 1.35rem;
}
.pilares .icone {
  width: 1.9rem; height: 1.9rem; color: var(--destaque);
  margin-bottom: 0.6rem;
}
.pilares h3 { margin-bottom: 0.4rem; }
.pilares p { color: var(--texto-fraco); font-size: 0.925rem; }

/* ------------------------------------------------------------------ */
/* 15. Perguntas                                                       */
/* ------------------------------------------------------------------ */
/* Sem max-width próprio: a lista ocupa os mesmos 1140px que o título e
   que as outras seções, e as bordas esquerdas de tudo batem. Antes ela
   tinha 52rem e, como `.secao > *` a centraliza, o bloco inteiro ficava
   recuado uns 150px em relação ao "Perguntas frequentes" logo acima.
   A largura de leitura confortável é resolvida na resposta, que é o
   único texto longo aqui — a pergunta é curta e cabe numa linha. */
.perguntas { display: grid; gap: 0.6rem; }
.pergunta {
  background: var(--casca);
  border: 1px solid var(--casca-linha);
  border-radius: var(--borda);
  overflow: hidden;
}
.pergunta summary {
  cursor: pointer; list-style: none;
  font-family: var(--serifada); font-size: 1.1rem; font-weight: 700;
  padding: 1.1rem 3rem 1.1rem 1.3rem;
  position: relative;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 1.45rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--amarelo); border-bottom: 2px solid var(--amarelo);
  transform: rotate(45deg);
  transition: transform 0.18s;
}
.pergunta[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.pergunta summary:hover { color: var(--amarelo-claro); }
.resposta {
  padding: 0 1.3rem 1.3rem;
  color: var(--creme-fraco);
  /* Linha de leitura curta mesmo num monitor de 27". 70ch é o limite em
     que o olho ainda acha o começo da linha seguinte sem se perder. */
  max-width: 70ch;
}

/* ------------------------------------------------------------------ */
/* 16. Rodapé                                                          */
/* ------------------------------------------------------------------ */
.rodape {
  background: #120903;
  border-top: 1px solid var(--casca-linha);
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 1.5rem;
  font-size: 0.925rem;
}
.rodape-interno {
  max-width: var(--larg); margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2rem;
}
.rodape h2 {
  font-size: 0.75rem; letter-spacing: 0.17em; text-transform: uppercase;
  font-family: var(--sem-serifa); font-weight: 700;
  color: var(--amarelo); margin-bottom: 0.85rem;
}
.rodape address, .rodape-lista { color: var(--creme-fraco); line-height: 1.75; }
.rodape-lista { list-style: none; margin: 0; padding: 0; }

/* Os links do rodapé são alvo de DEDO, não de mouse: o do WhatsApp é um
   caminho de conversão real. Só com o texto eles tinham 26px de altura,
   abaixo dos ~44px que um toque confortável pede. O padding vertical
   resolve sem mexer no espaçamento visual, porque a lista já tinha
   line-height folgado. */
.rodape-lista a,
.rodape-bloco p a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding-block: 0.45rem;
}

.rodape-brasao { width: 84px; height: auto; border-radius: 14px; display: block; }
.rodape-nome {
  font-family: var(--serifada); font-size: 1.5rem;
  margin: 0.5rem 0 0.1rem;
}
.rodape-sub { color: var(--creme-fraco); font-size: 0.85rem; }

.rodape-fim {
  max-width: var(--larg); margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--casca-linha);
  color: var(--creme-fraco); font-size: 0.82rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  justify-content: space-between; align-items: center;
}
.aviso-legal { max-width: 44rem; margin: 0; }
.aviso-legal strong { color: var(--creme); }

/* ------------------------------------------------------------------ */
/* 17. WhatsApp flutuante                                              */
/* ------------------------------------------------------------------ */
.zap-flutuante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(180deg, #4BD06B, #23A745);
  color: #0A2B14; font-weight: 700; font-size: 0.95rem;
  text-decoration: none;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.7);
}
.zap-flutuante:hover { color: #0A2B14; filter: brightness(1.06); }

/* ------------------------------------------------------------------ */
/* 18. Telas estreitas                                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  /* A arte vai para baixo do texto: em celular o que decide é o
     primeiro parágrafo, não a ilustração. */
  .hero-arte { order: 2; }
  .eventos-grade, .historia-grade { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 8.5rem; }

  .topo-interno {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "marca acoes"
      "menu  menu";
    gap: 0.6rem 0.75rem;
  }
  .menu {
    justify-content: flex-start;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  /* O botão de WhatsApp do cabeçalho sai: o flutuante já cobre, e a
     linha do topo fica respirável no celular. */
  .topo-acoes .botao { display: none; }

  /* O nome da marca não quebra; quem cede espaço é o selo, que passa a
     ocupar duas linhas. Sem isto vira "Vossa / Alteza" no cabeçalho,
     porque o selo é a coluna `auto` do grid e leva a largura que quiser. */
  .marca-texto strong { white-space: nowrap; }
  .topo .status {
    font-size: 0.75rem; padding: 0.35rem 0.7rem;
    white-space: normal; line-height: 1.3;
  }
  .topo .status-detalhe { display: block; }
  .topo .status-detalhe::before { content: none; }

  .zap-flutuante span { display: none; }
  .zap-flutuante { padding: 0.95rem; }
  .zap-flutuante .icone { width: 1.5rem; height: 1.5rem; }

  .campo-dupla { grid-template-columns: 1fr; }
  .rodape-fim { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ */
/* 19. Preferências e impressão                                        */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .topo, .zap-flutuante, .pular, .hero-arte, .cartao-form { display: none; }
  body { background: #fff; color: #000; }
  .secao, .rodape { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}