/* Favo de Mel — proposta "Colmeia & Catálogo".
   Tokens e medidas seguem o handoff de design. O protótipo era 1200px fixo;
   as media queries no fim do arquivo são a adaptação mobile (a maior parte do
   tráfego deve ser gente no celular procurando "o que tem hoje"). */

:root {
  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --mel: #ffcb1f;
  --ambar: #f2b01e;
  --creme-claro: #fff8e6;
  --creme-hex: #fdf6e6;
  --creme: #f7ecd4;
  --madeira: #2e1a0b;
  --madeira-media: #3d2411;
  --madeira-profunda: #241205;
  --madeira-rodape: #1a0d03;
  --fundo-doc: #e2d0ae;

  --texto: #2e1a0b;
  --texto-2: #4a3319;
  --texto-3: #5c3a12;
  --texto-4: #6b4423;
  --kicker-claro: #96600f;
  --kicker-escuro: #ffd677;
  --sobre-escuro: #f7ecd4;
  --sobre-escuro-2: #f0e2c8;
  --sobre-escuro-3: #e6d3b4;
  --sobre-escuro-4: #d9c7a8;
  --sobre-escuro-5: #c9b391;
  --acento-2: #8a5323;

  --divisor: color-mix(in srgb, #2e1a0b 16%, transparent);
  --divisor-escuro: rgba(247, 236, 212, 0.2);
  --sombra-lg: 0 24px 60px rgba(46, 26, 11, 0.22);

  --hc-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='2'%3E%3Cpolygon points='26,-30 52,-15 52,15 26,30 0,15 0,-15'/%3E%3Cpolygon points='26,60 52,75 52,105 26,120 0,105 0,75'/%3E%3Cpolygon points='0,15 26,30 26,60 0,75 -26,60 -26,30'/%3E%3Cpolygon points='52,15 78,30 78,60 52,75 26,60 26,30'/%3E%3C/g%3E%3C/svg%3E");
  --hc-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23f2b01e' stroke-opacity='0.22' stroke-width='2'%3E%3Cpolygon points='26,-30 52,-15 52,15 26,30 0,15 0,-15'/%3E%3Cpolygon points='26,60 52,75 52,105 26,120 0,105 0,75'/%3E%3Cpolygon points='0,15 26,30 26,60 0,75 -26,60 -26,30'/%3E%3Cpolygon points='52,15 78,30 78,60 52,75 26,60 26,30'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo-doc);
  font-family: var(--font-body);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

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

.pagina { padding: 40px; }

.container {
  width: min(1200px, 100%);
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  background: var(--mel);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-body);
  border: 0;
  cursor: pointer;
  transition: filter 0.18s ease;
}
.btn:hover { filter: brightness(0.93); }
.btn--mel { background: var(--mel); color: var(--madeira); }
.btn--escuro { background: var(--madeira-profunda); color: var(--mel); }

.tag {
  display: inline-block;
  border-radius: 999px;
  font-weight: 600;
}

.kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kicker-claro);
  margin-bottom: 10px;
}
.kicker--escuro { color: var(--kicker-escuro); }

.nota-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--texto-4);
  text-align: right;
  line-height: 1.7;
}

/* Mascote: o corpo da abelha é preto, então sobre fundo escuro ele precisa
   obrigatoriamente do disco creme. Regra firme do handoff. */
.mascote-disco {
  border-radius: 999px;
  background: var(--creme-hex);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.mascote-disco img { width: 100%; height: auto; display: block; }

/* ---------- Header ---------- */

.topo { padding: 22px 40px 0; }

.header-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--madeira);
  color: var(--sobre-escuro);
  border-radius: 999px;
  padding: 10px 14px 10px 18px;
}

.header-marca { display: flex; align-items: center; gap: 12px; }
.header-marca .mascote-disco { width: 38px; height: 38px; padding: 5px; }
.header-marca strong {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 400;
  color: var(--mel);
}

.header-nav { display: flex; gap: 24px; font-size: 13.5px; font-weight: 600; }
.header-nav a { color: var(--sobre-escuro); transition: color 0.18s ease; }
.header-nav a:hover { color: var(--mel); }

.header-barra .btn { font-size: 13px; padding: 10px 18px; }

.menu-toggle { display: none; }

/* ---------- Herói ---------- */

.heroi {
  padding: 34px 40px 56px;
  text-align: center;
  background-image: var(--hc-white);
  background-size: 130px 225px;
}
.heroi img.mascote { width: 250px; height: auto; display: block; margin: 0 auto 14px; }
.heroi h1 { font-size: 76px; line-height: 0.98; margin: 0 0 16px; }
.heroi p { font-size: 18px; color: var(--texto-2); max-width: 46ch; margin: 0 auto 30px; }

.fatos {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--madeira);
  color: var(--sobre-escuro);
  border-radius: 999px;
  padding: 12px 8px 12px 26px;
  gap: 22px;
  font-size: 14.5px;
}
.fatos strong { color: var(--mel); }
.fatos .sep { opacity: 0.35; }
.fatos .btn { font-size: 13.5px; padding: 10px 20px; }

/* ---------- Hexágonos ---------- */

.hexagonos { padding: 0 40px 56px; }
.hexagonos-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }

.hex {
  aspect-ratio: 0.866;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  background: var(--creme-hex);
  color: var(--madeira);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  padding: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.hex:hover { background: var(--acento-2); color: var(--creme-hex); }
.hex b { font-family: var(--font-heading); font-size: 17px; font-weight: 400; }
.hex span { font-size: 11.5px; opacity: 0.7; }

.hex--destaque { background: var(--madeira); color: var(--mel); }
.hex--destaque:hover { background: var(--madeira-media); color: var(--mel); }

/* ---------- Cardápio do dia ---------- */

.secao-cardapio { padding: 60px 44px 66px; background: var(--creme-claro); }

.secao-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.secao-cabecalho h2 { font-size: 52px; margin: 0; line-height: 1; }

.destaque {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  border-radius: 26px;
  overflow: hidden;
  background: var(--madeira);
  color: var(--sobre-escuro);
  margin-bottom: 46px;
}
.destaque-foto {
  min-height: 280px;
  background: var(--madeira-media);
  background-image: var(--hc-honey);
  background-size: 130px 225px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--kicker-escuro);
  text-align: center;
  line-height: 1.7;
}
.destaque-foto img { width: 100%; height: 100%; object-fit: cover; }

.destaque-corpo { padding: 38px 40px 34px; display: flex; flex-direction: column; gap: 14px; }
.destaque-corpo .tag {
  align-self: flex-start;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--madeira);
  background: var(--mel);
  padding: 6px 14px;
}
.destaque-corpo h3 { font-size: 44px; line-height: 1.02; margin: 0; color: var(--creme-claro); }
.destaque-corpo p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sobre-escuro-3);
  max-width: 44ch;
}
.destaque-detalhes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  border-top: 1px solid var(--divisor-escuro);
  padding-top: 16px;
  margin-top: 4px;
}
/* display:block porque no verso do card estes são <span> — dentro de um <button>
   só cabe conteúdo de texto, então não dá para usar <div> ali. */
.rotulo {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kicker-escuro);
  margin-bottom: 6px;
}
.valor { display: block; font-size: 12.5px; line-height: 1.6; color: var(--sobre-escuro-2); }

.categoria { margin-bottom: 34px; }
.categoria-titulo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--divisor);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.categoria-titulo h3 { font-size: 25px; margin: 0; }
.categoria-titulo span { font-size: 12.5px; color: var(--texto-4); }

/* Lista de cardápio. Cada prato é um <details>: o navegador cuida do estado,
   do teclado e do anúncio para leitor de tela, e funciona sem JavaScript.
   A gaveta aberta é escura porque era assim o verso do card do design original —
   a interação mudou, a linguagem visual continua. */
.itens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }

.prato {
  background: var(--mel);
  border-radius: 18px;
  overflow: hidden;
}

.prato > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.prato > summary::-webkit-details-marker { display: none; }
.prato > summary::marker { content: ''; }
.prato > summary:focus-visible {
  outline: 2px solid var(--madeira);
  outline-offset: -3px;
  border-radius: 18px;
}

.prato-foto {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ambar);
  background-image: var(--hc-white);
  background-size: 90px 156px;
  display: grid;
  place-items: center;
}
.prato-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prato-foto-vazia {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--texto-3);
}

.prato-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.prato-nome { font-family: var(--font-heading); font-size: 16.5px; line-height: 1.2; }
.prato-resumo { font-size: 12.5px; line-height: 1.45; color: var(--texto-2); }
.prato-selos { font-size: 11px; line-height: 1.4; color: var(--texto-3); }

.prato-fim {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  align-self: flex-start;
  padding-top: 2px;
}
.prato-preco {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--acento-2);
  white-space: nowrap;
}
.prato-seta { color: var(--acento-2); transition: transform 0.2s ease; }
.prato[open] .prato-seta { transform: rotate(180deg); }

.prato-detalhes {
  background: var(--madeira);
  color: var(--sobre-escuro);
  padding: 15px 18px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* A abertura é animada por altura no JS; sem isto o conteúdo escaparia
     da gaveta enquanto ela cresce. */
  overflow: hidden;
}
.prato-detalhes .rotulo { font-size: 9.5px; margin-bottom: 4px; }
.prato-detalhes .valor { font-size: 12px; line-height: 1.55; }

.barra-encerramento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--madeira);
  color: var(--sobre-escuro);
  border-radius: 999px;
  padding: 14px 26px;
  margin-top: 8px;
}
.barra-encerramento div:first-child { font-size: 14px; }
.barra-encerramento div:last-child { font-size: 13px; color: var(--kicker-escuro); }

/* ---------- Bebidas ---------- */

.secao-bebidas { padding: 56px 44px 60px; background: var(--creme); }
.secao-bebidas h2 { font-size: 38px; margin: 0; }
.bebidas-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.bebida-card { background: var(--creme-claro); border-radius: 24px; padding: 24px 26px 22px; }
.bebida-card h3 { font-size: 20px; margin: 0 0 4px; }
.bebida-card .nota { font-size: 12px; color: var(--texto-4); margin-bottom: 16px; }
.bebida-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--divisor);
  padding: 9px 0;
}
.bebida-linha span:first-child { font-size: 14px; }
.bebida-preco {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--acento-2);
  white-space: nowrap;
}

/* ---------- Encomendas ---------- */

.secao-encomendas { padding: 60px 44px 64px; background: var(--ambar); }
.encomendas-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.secao-encomendas .kicker { color: var(--texto-3); }
.secao-encomendas h2 { font-size: 42px; margin: 0 0 16px; line-height: 1.05; }
.secao-encomendas p { font-size: 16px; line-height: 1.6; color: #3a2510; max-width: 42ch; margin: 0 0 14px; }
.secao-encomendas p:last-of-type { margin-bottom: 26px; }
.encomendas-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.encomendas-cta .btn { font-size: 14px; padding: 13px 22px; }
.encomendas-cta span { font-size: 13px; color: var(--texto-3); }

.encomendas-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.encomenda-card { background: var(--creme-claro); border-radius: 20px; padding: 16px 18px; }
.encomenda-card b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.15;
  margin-bottom: 5px;
}
.encomenda-card span { font-size: 12.5px; line-height: 1.45; color: var(--texto-3); }

/* ---------- Por quilo + A casa ---------- */

.secao-institucional {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 60px 44px;
  background: var(--madeira-profunda);
  background-image: var(--hc-honey);
  background-size: 130px 225px;
  align-items: start;
}
.secao-institucional h2 { font-size: 38px; margin: 0 0 16px; color: var(--creme-claro); }
.secao-institucional > div > p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sobre-escuro-3);
  margin: 0 0 26px;
  max-width: 44ch;
}

.passos { display: flex; flex-direction: column; gap: 14px; }
.passo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-top: 1px solid var(--divisor-escuro);
  padding-top: 13px;
}
.passo b {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 17px;
  color: var(--mel);
  min-width: 22px;
}
.passo div { font-size: 14px; line-height: 1.55; color: var(--sobre-escuro-2); }

.casa-tags { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.casa-tags .tag { font-size: 12.5px; padding: 7px 16px; }
.tag--mel { background: var(--mel); color: var(--madeira-profunda); }
.tag--contorno { border: 1px solid rgba(255, 214, 119, 0.5); color: var(--kicker-escuro); }

.depoimento { background: rgba(247, 236, 212, 0.08); border-radius: 24px; padding: 22px 24px; }
.depoimento p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--sobre-escuro-2); }
.depoimento .fonte { font-size: 12px; color: var(--sobre-escuro-5); }

/* ---------- Rodapé ---------- */

.rodape { padding: 52px 44px 44px; background: var(--madeira-rodape); color: var(--sobre-escuro); }
.rodape-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 1fr; gap: 44px; align-items: start; }

.rodape-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rodape-marca .mascote-disco { width: 48px; height: 48px; padding: 6px; }
.rodape-marca strong {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  color: var(--mel);
}
.rodape-endereco { font-size: 14px; line-height: 1.7; color: var(--sobre-escuro-4); }
.rodape .btn { font-size: 13px; padding: 11px 20px; margin-top: 20px; }
.rodape .rotulo { font-size: 10.5px; margin-bottom: 12px; }
.rodape-horario { font-size: 14px; line-height: 1.8; color: var(--sobre-escuro-4); }
.rodape-vagas { font-size: 14px; line-height: 1.65; color: var(--sobre-escuro-4); }
.rodape-vagas strong { color: var(--sobre-escuro); font-weight: 600; }
.rodape-email {
  display: inline-block;
  font-size: 13.5px;
  color: var(--mel);
  margin-top: 8px;
  word-break: break-all;
}
.rodape-mapa {
  aspect-ratio: 1.7;
  border-radius: 20px;
  overflow: hidden;
  background: var(--madeira);
  background-image: var(--hc-honey);
  background-size: 130px 225px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--kicker-escuro);
  text-align: center;
  line-height: 1.7;
}
.rodape-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.rodape-rota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kicker-escuro);
  transition: color 0.18s ease;
}
.rodape-rota:hover { color: var(--mel); }

.rodape-creditos {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--divisor-escuro);
  font-size: 12px;
  color: var(--sobre-escuro-5);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rodape-creditos a { color: var(--sobre-escuro-5); }
.rodape-creditos a:hover { color: var(--mel); }

/* ---------- Responsivo ---------- */

@media (max-width: 1100px) {
  .header-nav { gap: 18px; font-size: 13px; }
  .heroi h1 { font-size: 60px; }
  .hexagonos-grade { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .pagina { padding: 16px; }
  .container { border-radius: 20px; }
  .topo { padding: 14px 16px 0; }

  .header-barra { padding: 8px 10px 8px 14px; gap: 12px; position: relative; flex-wrap: wrap; }
  /* Aberta, a barra cresce: o raio de pílula viraria um oval comendo os itens
     das pontas, então ela passa a ter cantos de caixa. */
  .header-barra.menu-aberto { border-radius: 22px; padding-bottom: 4px; }
  .header-barra .btn span { display: none; }
  .header-barra .btn { padding: 10px; }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--divisor-escuro);
    background: none;
    color: var(--sobre-escuro);
    cursor: pointer;
    order: 3;
  }
  .header-nav {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 6px 4px 10px;
  }
  .header-nav.aberto { display: flex; }
  .header-nav a { padding: 11px 8px; border-top: 1px solid var(--divisor-escuro); }

  .heroi { padding: 26px 20px 40px; }
  .heroi img.mascote { width: 160px; }
  .heroi h1 { font-size: 40px; }
  .heroi p { font-size: 16px; margin-bottom: 24px; }
  .fatos {
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    padding: 18px 20px;
    gap: 12px;
    width: 100%;
  }
  .fatos .sep { display: none; }

  .hexagonos { padding: 0 20px 40px; }
  .hex b { font-size: 15px; }
  .hex span { font-size: 10.5px; }

  .secao-cardapio,
  .secao-bebidas,
  .secao-encomendas,
  .secao-institucional,
  .rodape { padding-left: 20px; padding-right: 20px; }
  .secao-cardapio { padding-top: 40px; padding-bottom: 44px; }

  .secao-cabecalho { flex-direction: column; align-items: flex-start; gap: 12px; }
  .secao-cabecalho h2 { font-size: 36px; }
  .nota-mono { text-align: left; }

  .destaque { grid-template-columns: 1fr; }
  .destaque-foto { min-height: 180px; }
  .destaque-corpo { padding: 26px 22px 24px; }
  .destaque-corpo h3 { font-size: 32px; }

  .itens { grid-template-columns: 1fr; }
  .prato > summary { padding: 13px 15px; gap: 12px; }
  .prato-detalhes { grid-template-columns: 1fr; gap: 12px; padding: 14px 15px 15px; }

  .barra-encerramento {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 22px;
    padding: 18px 22px;
    gap: 10px;
  }

  .bebidas-grade { grid-template-columns: 1fr; }
  .encomendas-grid { grid-template-columns: 1fr; gap: 32px; }
  .secao-encomendas h2 { font-size: 32px; }
  .encomendas-tipos { grid-template-columns: 1fr; }

  .secao-institucional { grid-template-columns: 1fr; gap: 40px; padding: 44px 20px; }
  .secao-institucional h2 { font-size: 30px; }

  .rodape-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 460px) {
  .hexagonos-grade { grid-template-columns: repeat(2, 1fr); }
  .heroi h1 { font-size: 34px; }
}

/* A única animação que sobrou é o giro da setinha; quem pede menos
   movimento recebe a mesma seta, só que sem a transição. */
@media (prefers-reduced-motion: reduce) {
  .prato-seta { transition: none; }
  .hex { transition: none; }
}

/* Impresso, o cardápio abre tudo: quem imprime quer a folha inteira,
   não as gavetas fechadas. */
@media print {
  .pagina { padding: 0; }
  .container { box-shadow: none; }
  .itens { grid-template-columns: 1fr 1fr; }
  .prato { break-inside: avoid; }
  .prato-detalhes { display: grid !important; }
  .prato-seta { display: none; }
}