/* Sevile Salgados · versão 2 · "Editorial clara" (dev/v2/DIRECAO-V2.md).
   Papel quente e tinta grafite; o laranja da marca preenche um único bloco (o Destaque), o botão final e os detalhes.
   Schibsted Grotesk (títulos 500, texto 400, rótulos e botões 600) + Instrument Serif itálico só na palavra-chave
   dos títulos e nos números. Celular primeiro; quebras em 700 e 1100 px; grade de 12 colunas no computador.
   Nada de estilo no HTML (CSP). Contrastes medidos em DIRECAO-V2 §4. */

/* ================================================================ tokens */
:root {
  --papel: #F6F1E7;          /* fundo de quase tudo */
  --papel-2: #EFE7DA;        /* rodapé; fundo de foto que ainda carrega */
  --tinta: #16151B;          /* texto, fios fortes, botões grafite: 16,1:1 no papel */
  --tinta-2: #4B4852;        /* apoio e legendas: 7,95:1 no papel */
  --fio: rgba(22, 21, 27, .16);
  --laranja: #FB8225;        /* cor da marca: só preenche (2,24:1 no papel: nunca texto no papel) */
  --laranja-texto: #A84A00;  /* laranja como texto até 23 px, ícones e anel de foco: 5,12:1 */
  --laranja-titulo: #D06000; /* itálico dos títulos e números grandes (24 px ou mais): 3,48:1 */
  --fio-laranja: rgba(22, 21, 27, .35);
  --curva: cubic-bezier(.2, .7, .2, 1);
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --margem: 16px;
  --vao: 12px;
  --largura: 1320px;
  --entre: 104px;
}
@media (min-width: 700px) { :root { --margem: 40px; --vao: 24px; --entre: 136px; } }
@media (min-width: 1100px) { :root { --margem: 60px; --entre: 168px; } }

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papel); color: var(--tinta); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papel);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (min-width: 700px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
strong, b { font-weight: 600; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--laranja-texto); outline-offset: 3px; }
.pular {
  position: absolute; left: 16px; top: -120px; z-index: 60;
  padding: 12px 16px; background: var(--tinta); color: var(--papel); font-size: 15px; font-weight: 600;
}
.pular:focus { top: 12px; }

.so-largo { display: none; }
@media (min-width: 700px) { .so-largo { display: inline; } .so-estreito { display: none; } }
@media (max-width: 699.98px) {
  /* some da tela no celular, mas o leitor de tela continua lendo (rótulo completo do botão) */
  .cabe-largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.casca { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
h2, h3, .carta__titulo, .capacidade, .vitrine-fecho__texto, .rodape__frase, .sobre__lead, .peca__nome, .ficha__nome,
.sumario__nome, .na-capa a { text-wrap: balance; }   /* "Churros de / doce de leite", e não "leite" sozinho */
p { text-wrap: pretty; }

/* âncoras: o título da seção para abaixo do cabeçalho fixo (computador) */
section[id], .peca, .ficha, .como { scroll-margin-top: 16px; }
@media (min-width: 1100px) { section[id], .peca, .ficha, .como { scroll-margin-top: 92px; } }
/* Seção com respiro em cima (padding): quem para a 16 px do topo (ou do cabeçalho fixo de 77 px) é o fio da cabeça, e não
   o começo do respiro (sobrava a seção de cima sob o cabeçalho e um vão de 120 a 180 px). "Início" (menu, logo, rodapé)
   leva sempre ao topo da página. Por id, para vencer o section[id] de cima, inclusive no bloco ≥ 1100. */
#produtos, #sobre, #instagram { scroll-margin-top: calc(16px - var(--entre)); }
#contato { scroll-margin-top: -88px; }          /* .contato tem 104 px de respiro em cima */
#inicio { scroll-margin-top: 100vh; }
@media (min-width: 1100px) {
  #produtos, #sobre, #instagram { scroll-margin-top: calc(92px - var(--entre)); }
  #contato { scroll-margin-top: -84px; }        /* 176 px de respiro */
}
/* foco pelo teclado: o link focado não fica atrás do botão flutuante nem do cabeçalho fixo */
a { scroll-margin-bottom: 88px; }
@media (min-width: 1100px) { a { scroll-margin-top: 96px; } }

/* ================================================================ tipografia de apoio */
/* itálico serifado: só a palavra marcada com _palavra_ nos títulos */
h1 em, h2 em, h3 em, .carta__titulo em, .rodape__frase em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--laranja-titulo);
  letter-spacing: -.01em;
}
h1 em { font-size: 1.14em; line-height: .8; }
h2 em, h3 em, .carta__titulo em { font-size: 1.1em; line-height: .8; }

.rotulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rotulo__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--laranja-texto);
}
.quadrado { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--laranja); }

/* ================================================================ links e botões */
/* sublinhado que corre (DIRECAO-V2 §9): 1 px que vai de 0 a 100 % no hover e no foco */
.topo__nav a > span, .na-capa a, .sumario__nome, .rodape a > span, .dados a > span {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .35s var(--curva);
}
.topo__nav a:hover > span, .topo__nav a:focus-visible > span, .topo__nav a.atual > span,
.na-capa a:hover, .na-capa a:focus-visible,
.sumario a:hover .sumario__nome, .sumario a:focus-visible .sumario__nome,
.rodape a:hover > span, .rodape a:focus-visible > span,
.dados a:hover > span, .dados a:focus-visible > span { background-size: 100% 1px; }

/* link de ação: fio fixo embaixo e o sublinhado grafite correndo por cima */
.link, .link-wa > span:first-of-type {
  padding-bottom: 3px;
  background-image: linear-gradient(var(--tinta), var(--tinta)), linear-gradient(var(--fio), var(--fio));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0 1px, 100% 1px;
  transition: background-size .35s var(--curva);
}
.link { display: inline-block; font-size: 15px; font-weight: 600; line-height: 1.3; }
/* área de toque maior que o desenho (o texto continua no mesmo lugar): 11 px a mais em cima e embaixo */
.link, .dados a { position: relative; }
.link::after, .dados a::after { content: ""; position: absolute; inset: -11px -4px; }
.link:hover, .link:focus-visible,
.link-wa:hover > span:first-of-type, .link-wa:focus-visible > span:first-of-type, .peca:hover .link-wa > span:first-of-type {
  background-size: 100% 1px, 100% 1px;
}
.link-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.link-wa .ico { width: 18px; height: 18px; color: var(--laranja-texto); }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 22px;
  border: 1px solid var(--tinta);
  border-radius: 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.botao .ico { width: 19px; height: 19px; }
.botao--tinta { background: var(--tinta); color: var(--papel); }
.botao--tinta:hover { background: var(--laranja); border-color: var(--laranja); color: var(--tinta); }
.botao--linha { background: transparent; color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: var(--papel); }
.botao--laranja { background: var(--laranja); border-color: var(--laranja); color: var(--tinta); }
.botao--laranja:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.botao--grande { min-height: 64px; padding: 12px 30px; font-size: 18px; }
.botao--grande .ico { width: 22px; height: 22px; }
.ico--desce { transition: transform .3s var(--curva); }
.botao:hover .ico--desce { transform: translateY(3px); }
/* abaixo de 360 px: menos respiro dos lados, para o rótulo dos botões caber numa linha ("Conversar no WhatsApp") */
@media (max-width: 359.98px) {
  .botao { padding-inline: 14px; gap: 8px; }
  .botao--grande { padding-inline: 16px; font-size: 17px; }
}

/* foto: moldura reta, fundo de espera, zoom lento no hover */
.foto { display: block; overflow: hidden; background: var(--papel-2); }
.foto img { width: 100%; transition: transform .9s var(--curva); }
a:hover > .foto img, .peca:hover .foto img, figure:hover > .foto img { transform: scale(1.035); }

/* ================================================================ cabeçalho (§7.1) */
.topo { background: var(--papel); border-bottom: 1px solid var(--fio); }
.topo__barra {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 64px auto;
  align-items: center;
  column-gap: 12px;
}
.topo__marca { grid-column: 1; grid-row: 1; display: block; justify-self: start; }
.topo__marca img { width: auto; height: 44px; }
.topo__wa {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tinta);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background-color .25s ease, color .25s ease;
}
.topo__wa .ico { width: 17px; height: 17px; }
.topo__wa:hover { background: var(--tinta); color: var(--papel); }
.topo__num { display: none; }
.topo__nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--fio);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.topo__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.topo__nav a > span { padding-bottom: 2px; }
@media (min-width: 700px) {
  .topo__nav { font-size: 15px; }
}
@media (min-width: 1100px) {
  .topo { position: sticky; top: 0; z-index: 30; }
  .topo__barra { grid-template-columns: 1fr auto 1fr; grid-template-rows: 76px; }
  .topo__marca img { height: 48px; }
  .topo__nav { grid-column: 2; grid-row: 1; gap: 44px; border-top: 0; }
  .topo__wa { justify-self: end; padding: 0 16px; }
  .topo__num { display: inline; padding-left: 10px; border-left: 1px solid var(--fio); color: var(--tinta-2); font-weight: 500; }
  .topo__wa:hover .topo__num { color: inherit; border-color: rgba(246, 241, 231, .3); }
}

/* ================================================================ hero (§7.2) */
.hero { padding-top: 14px; }
.hero__linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fio);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero__rotulo { display: none; }
.hero__b2b { display: inline-flex; align-items: center; gap: 8px; }
/* Celular: "Exclusivo para empresas" e, embaixo, alinhada ao texto, a área de venda ("Salvador e Região Metropolitana",
   inteira); o "·" sai da tela (o leitor de tela continua lendo) e o quadrado fica na altura da 1ª linha. */
@media (max-width: 699.98px) {
  .hero__b2b { align-items: baseline; }
  .hero__local { display: block; }
  .hero__ponto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.hero__topo { padding-top: 20px; }
.hero__titulo {
  font-size: clamp(40px, 12.4vw, 64px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.045em;
}
.hero__titulo > span { display: block; }
.hero__lado { margin-top: 18px; }
/* linhas equilibradas (29/10/2026): com "Salvador e Região Metropolitana" inteira numa linha, sem o balance sobrava uma
   linha curta no meio do apoio */
.hero__apoio { max-width: 46ch; color: var(--tinta-2); font-size: 16px; line-height: 1.5; text-wrap: balance; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero__acoes .botao { flex: 1 1 auto; padding: 10px 14px; }

/* colagem: coxinha de borda a borda, feijoada subindo sobre ela, churros ao lado e o índice "Na capa" */
.colagem {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 12px;
  margin-top: 26px;
}
.colagem__esq { display: contents; }
.colagem__a { grid-column: 1 / -1; grid-row: 1; margin-inline: calc(-1 * var(--margem)); }
.colagem__b {
  grid-column: 1 / 8;
  grid-row: 2 / 4;
  align-self: start;
  position: relative;
  z-index: 2;
  margin-top: -32px;
  outline: 6px solid var(--papel);
}
.colagem__c { grid-column: 8 / -1; grid-row: 2; align-self: start; margin-top: 16px; }
.na-capa { grid-column: 8 / -1; grid-row: 3; align-self: start; margin-top: 12px; }
.na-capa__rotulo {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.na-capa ul { display: flex; flex-direction: column; align-items: flex-start; }
.na-capa a { display: inline-block; padding: 8px 0; font-size: 13px; line-height: 1.3; background-position: 0 calc(100% - 7px); }
.na-capa__num { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--laranja-texto); }

@media (min-width: 700px) {
  .hero { padding-top: 16px; }
  .hero__linha { font-size: 12px; }
  .hero__rotulo { display: inline; }
  .hero__titulo { font-size: clamp(56px, 9vw, 88px); }
  .hero__lado { margin-top: 24px; }
  .hero__apoio { font-size: 18px; }
  .hero__acoes { gap: 10px; margin-top: 24px; }
  .hero__acoes .botao { flex: 0 0 auto; padding: 10px 22px; }
  .colagem { margin-top: 40px; }
  .na-capa a { font-size: 14px; }
}
/* De 960 px para cima (tablet deitado e computador) o hero já usa a composição do computador: em coluna única, a
   primeira tela de 1024 px ficava com metade vazia. */
@media (min-width: 960px) {
  .hero { padding-top: 20px; }
  .hero__linha { padding-bottom: 12px; }
  /* o título atravessa a grade; apoio e botões encaixados ao lado da 2ª linha */
  .hero__topo {
    --corpo: clamp(64px, 6.7vw, 104px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: calc(var(--corpo) * .93) auto;
    column-gap: var(--vao);
    padding-top: 36px;
  }
  .hero__titulo { grid-column: 1 / -1; grid-row: 1 / 3; align-self: start; font-size: var(--corpo); line-height: .93; }
  .hero__titulo .hero__l1, .hero__titulo .hero__l2 { display: inline; }
  .hero__lado { grid-column: 6 / -1; grid-row: 2; margin: 0; padding-top: calc(var(--corpo) * .2); }
  .hero__acoes { margin-top: 22px; }

  .colagem { column-gap: var(--vao); margin-top: 44px; align-items: start; }
  .colagem__esq {
    display: grid;
    grid-column: 1 / 8;
    grid-row: 1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--vao);
  }
  .colagem__a { grid-column: 1 / -1; grid-row: 1; margin-inline: 0; }
  .colagem__c {
    grid-column: 5 / -1;
    grid-row: 1 / 3;
    align-self: end;
    justify-self: end;
    width: clamp(176px, 17.2vw, 248px);
    margin: 0 calc(-1 * clamp(40px, 4.2vw, 60px)) 0 0;
    position: relative;
    z-index: 3;
    outline: 8px solid var(--papel);
  }
  .na-capa { grid-column: 1 / 5; grid-row: 2; margin-top: 18px; }
  .colagem__b { grid-column: 8 / -1; grid-row: 1; margin-top: 64px; outline: 0; }
}
@media (min-width: 1100px) {
  .hero__lado { grid-column: 7 / -1; }
}

/* ================================================================ cabeças de seção (§6) */
.cabeca { padding-top: 16px; border-top: 1px solid var(--tinta); }
.cabeca__titulo {
  margin-top: 26px;
  font-size: clamp(36px, 10.2vw, 88px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.04em;
}
.cabeca__abertura { margin-top: 18px; max-width: 46ch; color: var(--tinta-2); }
/* título em frases (o do Sobre): cada frase começa numa linha e se equilibra sozinha (text-wrap: balance do h2) */
.cabeca__titulo .frase { display: block; }
@media (min-width: 1100px) {
  .cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); }
  .cabeca > .rotulo { grid-column: 1 / 4; grid-row: 1; padding-top: 6px; }
  .cabeca__titulo { grid-column: 4 / -1; grid-row: 1; margin-top: 0; }
  .cabeca__abertura { grid-column: 4 / 9; grid-row: 2; margin-top: 26px; }
}

/* ================================================================ vitrine (§7.3) */
.produtos { padding-top: var(--entre); }
.sumario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-top: 30px; font-size: 14px; line-height: 1.3; }
.sumario li { break-inside: avoid; border-top: 1px solid var(--fio); }
.sumario a { display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 11px 0 10px; }
.sumario__num {
  flex: none;
  min-width: 1.35em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.1;
  color: var(--laranja-texto);
}
.sumario__nome { padding-bottom: 1px; }
@media (min-width: 700px) { .sumario { display: block; columns: 2; column-gap: var(--vao); font-size: 15px; } }
@media (min-width: 1100px) { .sumario { grid-column: 4 / -1; grid-row: 3; margin-top: 40px; } }

.vitrine { display: grid; row-gap: 64px; margin-top: 64px; }
.peca__texto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  margin-top: 16px;
}
.peca__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--laranja-titulo);
}
.peca__nome { grid-column: 2; grid-row: 1; font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.peca__desc { grid-column: 2; margin-top: 8px; max-width: 40ch; color: var(--tinta-2); font-size: 16px; line-height: 1.5; }
.peca__par { grid-column: 2; margin-top: 14px; padding-top: 12px; max-width: 36ch; border-top: 1px solid var(--fio); }
.peca__par-rotulo {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.peca__par-valor { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; }
.peca .link-wa { grid-column: 2; justify-self: start; margin-top: 8px; }
@media (max-width: 699.98px) {
  .peca--recuada { width: 86%; margin-left: auto; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vao); row-gap: 80px; align-items: start; }
  .peca:nth-child(even) { margin-top: 96px; }
}
@media (min-width: 1100px) {
  .vitrine { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); row-gap: 120px; margin-top: 112px; align-items: start; }
  .peca--m1 { grid-column: 1 / 6; }
  .peca--m2 { grid-column: 7 / -1; margin-top: 176px; }
  .peca--m3 { grid-column: 1 / 8; }
  .peca--m4 { grid-column: 9 / -1; margin-top: 104px; }
  .peca--m5 { grid-column: 2 / 7; }
  .peca--m6 { grid-column: 8 / -1; margin-top: 232px; }
  .peca__texto { margin-top: 20px; column-gap: 16px; }
  .peca__num { font-size: 40px; }
  .peca__nome { font-size: 32px; }
}

/* carta "Para servir com vinho" (07–10): só texto, sem foto e sem placa */
.carta { margin-top: 96px; padding-top: 16px; border-top: 1px solid var(--tinta); }
.carta__titulo { margin-top: 22px; font-size: 32px; font-weight: 500; line-height: 1.04; letter-spacing: -.035em; }
.carta__grupos { margin-top: 32px; }
.carta__grupo + .carta__grupo { margin-top: 44px; }
.carta__rotulo {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fio);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laranja-texto);
}
.ficha {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 8px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--fio);
}
.ficha__num { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: .9; color: var(--laranja-titulo); }
.ficha__corpo { display: flex; flex-direction: column; align-items: flex-start; }
.ficha__nome { font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.ficha__desc { margin-top: 6px; max-width: 40ch; color: var(--tinta-2); font-size: 15px; line-height: 1.5; }
.ficha .link-wa { margin-top: 4px; }
@media (min-width: 1100px) {
  .carta {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    margin-top: 144px;
  }
  .carta__cabeca { grid-column: 1 / 5; }
  .carta__titulo { font-size: 44px; }
  .carta__grupos { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vao); margin-top: 0; }
  .carta__grupo + .carta__grupo { margin-top: 0; }
  .ficha { grid-template-columns: 68px minmax(0, 1fr); padding: 22px 0 22px; }
  .ficha__num { font-size: 52px; }
  .ficha__nome { font-size: 26px; }
}

/* fecho da vitrine */
.vitrine-fecho { margin-top: 88px; padding-top: 24px; border-top: 1px solid var(--fio); }
.vitrine-fecho__texto { max-width: 30ch; font-size: 21px; line-height: 1.35; letter-spacing: -.012em; }
.vitrine-fecho .botao { margin-top: 22px; }
@media (min-width: 700px) {
  .vitrine-fecho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; }
  .vitrine-fecho .botao { margin-top: 0; }
}
@media (min-width: 1100px) {
  .vitrine-fecho { margin-top: 96px; margin-left: calc((100% - 11 * var(--vao)) / 12 * 3 + 3 * var(--vao)); }
}

/* ================================================================ destaque (§7.4): o único bloco laranja */
.destaque { margin-top: 104px; padding: 72px 0 80px; background: var(--laranja); color: var(--tinta); }
.destaque :focus-visible { outline-color: var(--tinta); }
.destaque .rotulo__num { color: var(--tinta); }
.destaque h2 em { color: var(--tinta); }
.destaque__grade { display: flex; flex-direction: column; }
.destaque__texto { display: contents; }
.destaque__cabeca { order: 1; }
.destaque__fotos { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin-top: 36px; }
.destaque__corpo { order: 3; margin-top: 40px; }
.destaque__grande { grid-column: 1 / -1; }
.destaque__pequena--2 { margin-top: 36px; }
.destaque figure .foto { background: rgba(22, 21, 27, .08); }
.destaque figcaption { margin-top: 9px; font-size: 13px; line-height: 1.35; color: var(--tinta); }
.destaque__titulo { margin-top: 18px; font-size: clamp(34px, 9.2vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.destaque__lead { margin-top: 18px; max-width: 44ch; font-size: 18px; line-height: 1.5; }
.combos { border-top: 1px solid var(--fio-laranja); }
.combos li { padding: 14px 0 16px; border-bottom: 1px solid var(--fio-laranja); font-size: 19px; line-height: 1.4; }
.destaque__fecho { margin-top: 20px; max-width: 46ch; font-size: 16px; line-height: 1.5; }
.destaque__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 30px; }
.destaque .botao--tinta:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.destaque .link { background-image: linear-gradient(var(--tinta), var(--tinta)), linear-gradient(var(--fio-laranja), var(--fio-laranja)); }
@media (min-width: 700px) {
  .destaque__fotos { max-width: 720px; gap: 28px var(--vao); }
}
@media (min-width: 1100px) {
  .destaque { margin-top: 144px; padding: 120px 0 128px; }
  .destaque__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: start; }
  .destaque__fotos {
    grid-column: 1 / 7;
    grid-row: 1;
    max-width: none;
    margin-top: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--vao);
    row-gap: 30px;
  }
  .destaque__pequena--1 { grid-column: 1 / 4; }
  .destaque__pequena--2 { grid-column: 4 / -1; margin-top: 64px; }
  .destaque__texto { display: block; grid-column: 8 / -1; grid-row: 1; position: sticky; top: 96px; }
  .destaque__corpo { margin-top: 32px; }
}

/* ================================================================ sobre, processo e como funciona (§7.5) */
.sobre { padding-top: var(--entre); }
.sobre__bloco { margin-top: 40px; }
.sobre__texto { margin-top: 28px; }
.sobre__lead { max-width: 30ch; font-size: 21px; line-height: 1.4; letter-spacing: -.012em; }
.sobre__apoio { margin-top: 16px; max-width: 48ch; color: var(--tinta-2); }
.para-quem { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--fio); }
.para-quem__rotulo { font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.para-quem__texto { margin-top: 6px; max-width: 44ch; }
@media (min-width: 1100px) {
  .sobre__bloco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: end; margin-top: 64px; }
  .sobre__foto { grid-column: 1 / 8; }
  .sobre__texto { grid-column: 9 / -1; margin-top: 0; }
  .sobre__lead { font-size: 23px; }
}

.processo { margin-top: 88px; }
.processo__titulo { font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.processo__lista { margin-top: 24px; border-top: 1px solid var(--fio); }
.processo__lista li { padding: 16px 0 18px; border-bottom: 1px solid var(--fio); }
.processo__rotulo { font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.processo__texto { margin-top: 5px; max-width: 46ch; color: var(--tinta-2); font-size: 17px; line-height: 1.5; }
.capacidade { margin-top: 28px; font-size: 28px; font-weight: 500; line-height: 1.12; letter-spacing: -.025em; }
.processo__foto { margin-top: 36px; }
@media (min-width: 1100px) {
  .processo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); row-gap: 48px; margin-top: 112px; }
  .processo__titulo { grid-column: 4 / -1; grid-row: 1; font-size: 44px; }
  .processo__corpo { grid-column: 1 / 6; grid-row: 2; }
  .processo__lista { margin-top: 0; }
  .processo__foto { grid-column: 7 / -1; grid-row: 2; margin-top: 0; }
  .capacidade { font-size: 32px; }
}

.como { margin-top: 88px; padding-top: 16px; border-top: 1px solid var(--tinta); }
.como__titulo { margin-top: 24px; font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.como__abertura { margin-top: 16px; max-width: 52ch; color: var(--tinta-2); }
.passos { margin-top: 28px; }
.passo {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 8px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--fio);
}
.passo__num { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: .85; color: var(--laranja-titulo); }
.passo__nome { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.passo__texto { margin-top: 6px; max-width: 36ch; color: var(--tinta-2); font-size: 16px; line-height: 1.5; }
.como__acao { margin-top: 40px; }
.como__acao .botao { width: 100%; }
@media (min-width: 700px) {
  .como__acao .botao { width: auto; }
}
@media (min-width: 1100px) {
  .como { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); margin-top: 112px; }
  .como__cabeca { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); }
  .como__rotulo { grid-column: 1 / 4; grid-row: 1; padding-top: 6px; }
  .como__titulo { grid-column: 4 / -1; grid-row: 1; margin-top: 0; font-size: 44px; }
  .como__abertura { grid-column: 4 / 10; grid-row: 2; }
  .passos { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--vao); margin-top: 56px; }
  .passo { display: block; padding: 0; border-top: 0; }
  .passo__num { display: block; margin-bottom: 18px; font-size: 64px; line-height: .9; }
  .passo__texto { font-size: 15px; }
  .como__acao { grid-column: 4 / -1; }
}

/* ================================================================ Instagram (§7.6) */
.insta { padding-top: var(--entre); }
.insta__cabeca { padding-top: 16px; border-top: 1px solid var(--tinta); }
.insta__titulo { margin-top: 26px; font-size: clamp(36px, 10.2vw, 88px); font-weight: 500; line-height: .98; letter-spacing: -.04em; }
.insta__frase { margin-top: 16px; max-width: 44ch; color: var(--tinta-2); }
.insta__botao { margin-top: 22px; }
/* Mosaico: 12 capas (ou 18) com 2 grandes de 2×2, sem célula vazia. Celular: 3 colunas e 6 linhas; os Reels do 3º em
   diante vão para a última linha (nunca mais de 2 rostos seguidos). De 700 px para cima: 6 colunas e 3 linhas (antes,
   de 700 a 1099 px, eram 3 colunas na largura toda: o mosaico chegava a 2.360 px de altura). */
.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 4px; margin-top: 36px; }
.mosaico__item a { display: block; height: 100%; }
.mosaico__item .foto { height: 100%; }
.mosaico__item--g1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.mosaico__item--g2 { grid-column: 2 / 4; grid-row: 4 / 6; }
@media (max-width: 699.98px) { .mosaico__item--depois { order: 1; } }
@media (min-width: 700px) {
  .mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .mosaico__item--g1 { grid-column: 3 / 5; grid-row: 1 / 3; }
  .mosaico__item--g2 { grid-column: 5 / 7; grid-row: 2 / 4; }
}
/* as grandes ocupam a área de 2×2 sem empurrar as linhas (a altura vem das capas pequenas) */
.mosaico__item--g1 .foto, .mosaico__item--g2 .foto { position: relative; }
.mosaico__item--g1 img, .mosaico__item--g2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaico a:focus-visible { outline-offset: 2px; }
.insta__legenda { margin-top: 14px; font-size: 13px; line-height: 1.4; color: var(--tinta-2); }
@media (min-width: 1100px) {
  .insta__cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: end; }
  .insta__cabeca > .rotulo { grid-column: 1 / 4; grid-row: 1; align-self: start; padding-top: 6px; }
  .insta__titulo { grid-column: 4 / 11; grid-row: 1; margin-top: 0; }
  .insta__frase { grid-column: 4 / 10; grid-row: 2; margin-top: 22px; }
  .insta__botao { grid-column: 10 / -1; grid-row: 2; justify-self: end; margin-top: 0; }
  .mosaico { gap: 8px; margin-top: 48px; }
}

/* ================================================================ chamada final (§7.7) */
.contato { padding: 104px 0; }
.contato__grade { padding-top: 16px; border-top: 1px solid var(--tinta); }
.contato__titulo {
  margin-top: 26px;
  font-size: clamp(40px, 11.4vw, 112px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
}
/* Hierarquia de 700 px para cima: título de seção nunca maior que o h1 do hero, e o da chamada final no máximo 1,1 × o
   h1 (de 700 a 1300 px, os clamp de antes deixavam o h2 e o contato maiores que o h1). Vem depois das três regras base. */
@media (min-width: 700px) {
  .cabeca__titulo, .insta__titulo { font-size: clamp(48px, 6.4vw, 88px); }
  /* teto de 104 px (e não 108): com 108, acima de ~1490 px a frase quebrava em duas linhas na casca de 1320 px */
  .contato__titulo { font-size: clamp(56px, 7vw, 104px); }
}
.contato__texto { margin-top: 22px; max-width: 40ch; color: var(--tinta-2); font-size: 17px; line-height: 1.5; }
.contato__acao { margin-top: 32px; }
.contato__acao .botao { width: 100%; }
.dados { margin-top: 28px; border-top: 1px solid var(--fio); }
.dados__linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--fio);
}
.dados dt { font-size: 13px; line-height: 1.4; color: var(--tinta-2); }
.dados dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: right; }
.dados a { display: inline-flex; align-items: center; gap: 8px; }
.dados a .ico { width: 16px; height: 16px; color: var(--laranja-texto); }
/* celular: rótulo em cima e valor embaixo, à esquerda (à direita, o valor ficava sob o botão flutuante) */
@media (max-width: 699.98px) {
  .dados__linha { display: block; }
  .dados dd { text-align: left; margin-top: 2px; }
}
/* Valor com " · " ("Salvador e Região Metropolitana · só para empresas"; 29/10/2026): no celular e de 1100 a 1319 px (a
   coluna da lista é estreita para a linha inteira ao lado do rótulo), um trecho por linha e o "·" fora da tela (o leitor
   de tela continua lendo). No resto, numa linha só (de 1320 px para cima, com folga de 20 px ou mais). */
@media (max-width: 699.98px), (min-width: 1100px) and (max-width: 1319.98px) {
  .dados__trecho { display: block; width: fit-content; }   /* a caixa de cada linha do tamanho do texto */
  .dados__ponto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1319.98px) { .dados__trecho { margin-left: auto; } }   /* alinhadas à direita */
@media (min-width: 700px) {
  .contato__acao, .contato__grade > .dados { max-width: 536px; }
}
/* computador: texto e, logo embaixo, o botão nas colunas 1–5; a lista de dados nas 8–12, ao lado dos dois */
@media (min-width: 1100px) {
  .contato { padding: 176px 0 168px; }
  .contato__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: start; }
  .contato__cabeca { grid-column: 1 / -1; }
  .contato__titulo { margin-top: 40px; }
  .contato__texto { grid-column: 1 / 6; grid-row: 2; margin-top: 44px; font-size: 19px; }
  .contato__acao { grid-column: 1 / 6; grid-row: 3; max-width: none; margin-top: 32px; }
  .contato__grade > .dados { grid-column: 8 / -1; grid-row: 2 / 4; margin-top: 44px; max-width: none; }
}

/* ================================================================ rodapé (§7.8) */
.rodape { padding: 56px 0 96px; background: var(--papel-2); font-size: 15px; line-height: 1.5; }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 36px 16px; }
.rodape__marca { grid-column: 1 / -1; }
.rodape__logo { width: 116px; height: auto; }
.rodape__frase { margin-top: 18px; font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.rodape__frase em { font-size: 1.1em; line-height: .8; }
.rodape__linha { margin-top: 10px; max-width: 44ch; color: var(--tinta-2); font-size: 15px; }
.rodape__tit { margin-bottom: 6px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.rodape__col ul { display: flex; flex-direction: column; align-items: flex-start; }
.rodape__col a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.rodape__col a .ico { width: 16px; height: 16px; color: var(--laranja-texto); }
.rodape__base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--fio);
  font-size: 13px;
  color: var(--tinta-2);
}
.rodape__base a { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 1100px) {
  .rodape { padding: 72px 0 104px; }   /* embaixo, espaço livre para o flutuante não cobrir a linha de base */
  .rodape__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); row-gap: 56px; }
  .rodape__marca { grid-column: 1 / 6; }
  .rodape__frase { font-size: 30px; }
  .rodape__col--nav { grid-column: 7 / 9; }
  .rodape__col--fale { grid-column: 9 / 12; }
}

/* ================================================================ botão flutuante (§7.9) */
.wa-flutuante {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 2px;
  background: var(--tinta);
  color: var(--papel);
  transition: opacity .25s ease, background-color .25s ease, color .25s ease;
}
.wa-flutuante .ico { width: 24px; height: 24px; }
.wa-flutuante:hover { background: var(--laranja); color: var(--tinta); }
/* o v2.js põe "oculto" enquanto os botões do hero, a chamada final ou o rodapé estão na tela (sem JS, fica sempre à
   mostra). Continua na ordem do Tab: com o foco do teclado, reaparece. */
.wa-flutuante.oculto { opacity: 0; pointer-events: none; }
.wa-flutuante.oculto:focus-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1100px) {
  .wa-flutuante { right: 24px; bottom: 24px; width: 56px; height: 56px; }
  .wa-flutuante .ico { width: 26px; height: 26px; }
}

/* ================================================================ privacidade (§7.10) */
.doc { padding: 56px 0 104px; }
.doc__cabeca { padding-top: 16px; border-top: 1px solid var(--tinta); }
.doc__titulo { margin-top: 24px; font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.doc__data { margin-top: 14px; font-size: 14px; color: var(--tinta-2); }
.doc__texto { margin-top: 32px; max-width: 68ch; }
/* abaixo de 1100 px, a coluna de leitura deixa a margem direita livre: o flutuante nunca fica sobre o texto */
@media (max-width: 1099.98px) { .doc__texto { margin-right: calc(76px - var(--margem)); } }
.doc__resumo { font-size: 19px; line-height: 1.5; letter-spacing: -.01em; }
.doc__texto h2 { margin-top: 48px; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.doc__texto p:not(.doc__resumo), .doc__texto li { font-size: 17px; line-height: 1.65; }
.doc__texto h2 + p, .doc__texto p + p, .doc__texto h2 + ul { margin-top: 12px; }
.doc__texto li { position: relative; margin-top: 8px; padding-left: 20px; }
.doc__texto li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--laranja); }
@media (min-width: 1100px) {
  .doc { padding: 88px 0 168px; }
  .doc__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); }
  .doc__cabeca { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); }
  .doc__cabeca > .rotulo { grid-column: 1 / 4; grid-row: 1; padding-top: 6px; }
  .doc__titulo { grid-column: 4 / -1; grid-row: 1; margin-top: 0; font-size: 64px; }
  .doc__data { grid-column: 4 / -1; grid-row: 2; }
  .doc__texto { grid-column: 4 / 11; margin-top: 56px; }
}

/* ================================================================ 404 (§7.11) */
.erro { padding: 48px 0 120px; }
.erro__grade { padding-top: 16px; border-top: 1px solid var(--tinta); }
.erro__numero { font-family: var(--serif); font-style: italic; font-size: 96px; line-height: .9; letter-spacing: -.01em; color: var(--laranja-titulo); }
.erro__titulo { margin-top: 18px; font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.erro__texto { margin-top: 18px; max-width: 46ch; color: var(--tinta-2); font-size: 17px; line-height: 1.5; }
.erro__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (min-width: 1100px) {
  .erro { padding: 88px 0 168px; }
  .erro__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: end; }
  .erro__numero { grid-column: 1 / 5; font-size: 160px; }
  .erro__texto-bloco { grid-column: 5 / -1; padding-bottom: 14px; }
  .erro__titulo { margin-top: 0; font-size: 64px; }
}

/* ================================================================ movimento (§9) */
/* entrada suave: a classe "espera" só existe se o v2.js rodar (sem JS, nada fica escondido) */
[data-revela] { transition: opacity .5s var(--curva), transform .5s var(--curva); }
[data-revela].espera { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-revela].espera { opacity: 1; transform: none; }
  .foto img { transform: none !important; }
}
@media print {
  .topo { position: static; }
  .wa-flutuante, .sprite { display: none; }
  [data-revela].espera { opacity: 1; transform: none; }
}