/* ==========================================================================
   MODELO COMPLETO — base para landing page de negócio local
   Design e UI: modelo PRO MAX

   ====================  COMO ADAPTAR ESTE ARQUIVO  ====================
   Praticamente TUDO que muda de cliente para cliente está no :root logo
   abaixo. O resto do arquivo (1500+ linhas) é layout e não precisa ser
   tocado. Procure por "TROCAR:" para achar cada ponto.

   São só 3 blocos:
     1. PALETA      — as cores da marca do cliente
     2. TIPOGRAFIA  — as 2 fontes (lembre de trocar também o <link> do HTML)
     3. CONTATO     — o número do WhatsApp
   ===================================================================== */

:root {
  /* ---- TROCAR: PALETA DA MARCA DO CLIENTE ----
     Os 5 tons da La Dolce Vita, na MESMA ordem do modelo (claro → escuro):
     o gradiente, as bordas e o tema escuro leem daqui e continuam
     funcionando sozinhos. Todos tirados a conta-gotas do próprio logo.
     Os nomes continuam "--dourado-*" porque são as posições da escala, não
     a cor em si — renomear obrigaria a mexer em 20 pontos do arquivo.
     --preto e --branco são neutros, normalmente não mudam. */
  --dourado-claro:    #FBF4DD;   /* amarelo manteiga — fundo do site        */
  --dourado:          #F7A8B4;   /* rosa — linhas, estrelas, destaques      */
  --dourado-medio:    #F2929F;   /* rosa médio — contornos e bordas         */
  --dourado-escuro:   #8A5A3B;   /* marrom claro — subtítulos               */
  --dourado-profundo: #4A2411;   /* marrom escuro — títulos                 */
  --preto:            #000000;
  --branco:           #FFFFFF;

  /* O pistache tem papel próprio (WhatsApp, setas e tracinhos do carrossel),
     não é um degrau da escala acima — por isso fica fora dela. */
  --pistache:       #A8AB68;
  --pistache-claro: #D7D9B6;   /* tracinho apagado do carrossel */

  /* ---- Papéis de cor ---- */
  --cor-primaria: var(--dourado-profundo);
  --cor-texto:       #4A2411;   /* marrom escuro — títulos e corpo */
  --cor-texto-claro: #8A5A3B;   /* marrom claro — subtítulos       */
  --cor-fundo:       #FBF4DD;   /* a página inteira é manteiga     */
  --cor-borda:       #F2929F;
  --cor-escura:      #4A2411;

  /* Papéis que o tema escuro troca (ver bloco [data-tema="escuro"] logo abaixo).
     --branco e --preto NÃO entram aqui de propósito: são cores fixas da marca
     e --branco também é a cor do texto DENTRO do botão dourado — invertê-la
     quebraria o botão nos dois temas. */
  --cor-superficie: #FFFCF2;                  /* fundo dos cartões e do menu */
  --cor-cabecalho:  rgba(251, 244, 221, 0.95);
  --cor-linha:      #F2929F;                  /* traço das linhas divisórias */
  --dourado-ui:     #8A5A3B;                  /* marrom claro de textos e ícones */

  --gradiente-dourado: linear-gradient(100deg, #F2929F 1%, #F7A8B4 50%, #EDA6B6 100%);

  /* Fundo da página: o mesmo manteiga em degradê bem suave, do topo mais
     claro para a base um pouco mais quente. Fica no body; o html continua
     com a cor chapada para a rolagem do celular não piscar branco. */
  --gradiente-fundo: linear-gradient(175deg, #FFFCF0 0%, #FBF4DD 55%, #F8EDCE 100%);

  /* Mesmo desenho do gradiente da marca, no pistache — usado só no tracinho
     ativo do carrossel, para casar com as setas. */
  --gradiente-pistache: linear-gradient(100deg, #8F9354 1%, #A8AB68 50%, #9BA05E 100%);

  /* ---- TROCAR: TIPOGRAFIA ----
     Se mudar as fontes aqui, mude TAMBÉM o <link> do Google Fonts no <head>
     do index.html — senão a fonte não carrega e o navegador cai no fallback.
     Arimo é a Arial em fonte aberta: mesmo desenho e mesmas medidas, mas
     existe nos pesos 500/600 que a Arial não tem. Por isso o fallback é a
     própria Arial — se o Google Fonts cair, nada se desloca na página. */
  --fonte-titulo: 'Arimo', Arial, Helvetica, sans-serif;
  --fonte-texto:  'Poppins', 'Segoe UI', sans-serif;

  /* ---- TROCAR: WHATSAPP DO CLIENTE ----
     Formato: código do país + DDD + número, só dígitos, entre aspas.
     Exemplo: "5531998877665" = 55 (Brasil) + 31 (DDD) + número.
     O script.js lê daqui e monta TODOS os links wa.me do site. É o único
     lugar onde o número aparece — não existe número solto no HTML. */
  --whatsapp-numero: "5531987343031";
  --cor-whatsapp:    #25D366;   /* verde oficial do WhatsApp */

  /* ---- Sombras: todas pretas, nos tons do site original ---- */
  /* Site sem sombra nenhuma. Quem separa os blocos aqui é a borda rosa dos
     cartões e o espaço entre as seções. Os nomes continuam existindo porque
     ~20 regras do arquivo leem daqui: zerar no :root desliga todas de uma
     vez, e repor é só devolver os valores nestas 5 linhas.
     Valores do modelo, caso queira voltar:
       botão 0 1px 10px rgba(0,0,0,.20)   ·  padrão 0 1px 10px rgba(0,0,0,.30)
       hover 0 10px 28px rgba(0,0,0,.30)  ·  cabeçalho 0 1px 10px rgba(0,0,0,.60)
       mapa  0 0 25px rgba(0,0,0,.99) */
  --sombra-botao:     none;
  --sombra:           none;
  --sombra-hover:     none;
  --sombra-mapa:      none;

  /* A única sombra que sobrou no site. É o próprio amarelo manteiga do fundo
     (#FBF4DD, o mesmo --dourado-claro), não um preto transparente: embaixo do
     cabeçalho fixo o fundo é quase branco (#FFFCF0, topo do degradê), então o
     manteiga aparece como uma faixa quente e marca onde o cabeçalho termina
     sem sujar a página com cinza. */
  --sombra-cabecalho: 0 10px 22px rgba(251, 244, 221, 1);

  /* ---- Forma, ritmo e movimento ---- */
  /* Altura única de TUDO no cabeçalho: logo, chave de tema e hamburguer.
     Os três leem daqui para não saírem de sincronia. O ícone das linhas
     divisórias também acompanha, porque precisa render igual à logo. */
  --altura-acao:   32px;   /* tamanho do hamburguer; logo e chave acompanham */
  --largura-chave: 58px;   /* mantém a proporção da pílula (≈1,8 : 1) */

  /* --raio vale para as CAIXAS: cartões, carrossel, mapa, foto do sobre.
     Era 30px, que deixava tudo bem arredondado; agora acompanha o 18px das
     perguntas frequentes, que é o meio-termo entre quadrado e redondo.
     --raio-botao existe para os botões continuarem com o canto de antes:
     eles liam o --raio junto com as caixas, e baixar um baixava o outro. */
  --raio:            18px;
  --raio-pequeno:    18px;
  --raio-botao:      30px;
  --espaco-secao:    64px;   /* mesmo espaço acima e abaixo de cada divisória */
  --transicao:       0.25s ease;
  --transicao-lenta: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  --largura-maxima:  1100px;
}

/* --------------------------------------------------------------------------
   TEMA ESCURO
   Precisa vir DEPOIS do :root — os dois têm a mesma especificidade, então
   quem ganha é quem vem por último.
   As sombras aqui são douradas na mesma opacidade das pretas do tema claro.
   -------------------------------------------------------------------------- */
[data-tema="escuro"] {
  --cor-texto:       #FFFFFF;
  --cor-texto-claro: #C7C7C7;
  --cor-fundo:       #000000;   /* a página inteira é preta */
  --cor-superficie:  #000000;   /* cartões no mesmo preto: separa só a borda */
  --cor-cabecalho:   rgba(0, 0, 0, 0.95);
  --cor-borda:       #5C3A22;   /* marrom fosco no lugar do manteiga */
  --cor-linha:       #F2929F;   /* divisórias rosa */
  --dourado-ui:      #F7A8B4;   /* o marrom claro some no preto; o rosa não */
  --gradiente-fundo: none;      /* no escuro vale a cor chapada do --cor-fundo */

  /* Sem sombra no escuro. Sombra é ausência de luz: em fundo preto ela vira
     brilho, e brilho em todas as caixas deixa a página embaçada. Quem separa
     os cartões aqui é a borda. Onde não há borda (cabeçalho, mapa, fotos),
     entra um filete branco — a mesma espessura já usada no rodapé. */
  --sombra-botao:     none;
  --sombra:           none;
  --sombra-hover:     none;
  --sombra-cabecalho: 0 1px 0 rgba(255, 255, 255, 0.14);
  --sombra-mapa:      0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* As duas fotos não têm borda; no escuro o filete é o que as delimita. */
[data-tema="escuro"] .sobre__foto,
[data-tema="escuro"] .carrossel__janela { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* Faz a barra de rolagem e os controles nativos acompanharem o tema.
   Definido aqui no CSS de propósito, para não precisar tocar na meta
   color-scheme que está dentro do bloco NÃO MEXER. */
:root { color-scheme: light; }
[data-tema="escuro"] { color-scheme: dark; }

/* --------------------------------------------------------------------------
   UTILITÁRIOS
   Classes que existem para que NENHUM style="" sobre dentro do index.html.
   Sem elas o HTML volta a ter CSS misturado. Não apague.
   -------------------------------------------------------------------------- */

/* Bloco <svg> do topo do body que só guarda o gradiente das setas. Precisa
   estar renderizado (não pode ser display:none), senão o paint server não
   resolve — por isso tamanho zero e fora do fluxo, em vez de escondido. */
.svg-definicoes { position: absolute; width: 0; height: 0; }

/* Sprite de ícones: só um depósito de <symbol> para o <use> referenciar. */
.svg-sprite { display: none; }

/* Pixel da Meta para quem navega sem JavaScript. */
.pixel-noscript { display: none; }

/* Etiqueta sobre fundo escuro (seção de indicação). */
.etiqueta--clara { color: var(--branco); }

/* Centraliza o bloco do botão do Instagram. */
.centralizado { text-align: center; }

/* AQUI HAVIA UM filter: invert(1) nas logos no tema escuro. Funcionava no
   modelo original, em que a logo era preto 100% puro sobre transparente:
   inverter devolvia branco puro, sem precisar de arquivo novo.
   A logo da La Dolce Vita é colorida, e inverter trocava TODAS as cores —
   o creme virava azul-marinho e o marrom virava azul-claro. A regra foi
   removida para a marca aparecer nas cores reais nos dois temas. */

/* O mapa do Google não tem tema escuro próprio; este filtro escurece o
   tile e devolve os matizes ao lugar.
   O iframe é ".mapa aparecer", e .aparecer também usa filter (blur). Como
   filter não acumula entre regras, o blur da animação tem que ser repetido
   aqui — senão o tema escuro apaga a entrada do mapa, ou a entrada apaga o
   tema escuro assim que o mapa é revelado. */
[data-tema="escuro"] { --filtro-mapa: invert(0.91) hue-rotate(180deg) brightness(0.95) contrast(0.92); }
[data-tema="escuro"] .mapa          { filter: var(--filtro-mapa) blur(12px); }
[data-tema="escuro"] .mapa.visivel  { filter: var(--filtro-mapa) blur(0); }

@media (prefers-reduced-motion: reduce) {
  [data-tema="escuro"] .mapa { filter: var(--filtro-mapa); }
}

/* --------------------------------------------------------------------------
   RESET / BASE
   -------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* O fundo também no html para o "estica" da rolagem no celular não piscar branco. */
html { scroll-behavior: smooth; background: var(--cor-fundo); }

body {
  background-color: var(--cor-fundo);
  background-image: var(--gradiente-fundo);
  background-attachment: fixed;   /* o degradê vale a página toda, não cada tela */
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--transicao), color var(--transicao);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

/* 600 é o "peso moderado" pedido. A Arial só tem 400 e 700; a Arimo cobre o
   meio-termo e cai na Arial se o Google Fonts não carregar. */
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.25; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 24px;
}

/* Todas as seções têm o mesmo respiro em cima e embaixo. Como as divisórias
   ficam ENTRE as seções, isso garante espaço idêntico dos dois lados. */
.secao { padding: var(--espaco-secao) 0; }

/* --------------------------------------------------------------------------
   ANIMAÇÃO DE ENTRADA (reveal on scroll)
   O script.js tem um fallback: nada fica invisível para sempre.
   -------------------------------------------------------------------------- */
.aparecer {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(12px);
  transition: opacity var(--transicao-lenta), transform var(--transicao-lenta), filter var(--transicao-lenta);
}
.aparecer.visivel {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .aparecer { opacity: 1; transform: none; filter: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   TÍTULOS DE SEÇÃO
   -------------------------------------------------------------------------- */
.etiqueta {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dourado-ui);
  margin-bottom: 10px;
}

.secao__titulo { font-size: 26px; margin-bottom: 16px; }

.secao__descricao { color: var(--cor-texto-claro); font-size: 15px; }

.secao__cabecalho { margin-bottom: 36px; }

.secao__grade {
  display: grid;
  gap: 40px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   BOTÕES
   -------------------------------------------------------------------------- */
.botao {
  display: block;
  width: 100%;
  text-align: center;
  padding: 20px;
  border-radius: var(--raio-botao);
  font-weight: 700;
  font-size: 15px;
  transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao), background var(--transicao);
}

.botao--dourado {
  background: var(--gradiente-dourado);
  color: var(--branco);
  box-shadow: var(--sombra-botao);
}
.botao--dourado:hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: var(--sombra-hover); }

.botao--contorno {
  background: transparent;
  color: var(--dourado-ui);
  border: 1px solid var(--dourado-medio);
}
.botao--contorno:hover { transform: translateY(-3px); box-shadow: var(--sombra-botao); }

.botao--instagram {
  background: linear-gradient(135deg, #f824ff 0%, #fd5949 50%, #ffdd1f 100%);
  color: var(--branco);
  box-shadow: var(--sombra-botao);
}
.botao--instagram:hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: var(--sombra-hover); }

/* Animação ao clicar. O script.js segura o link por 1s para a cliente
   conseguir ver o efeito antes de sair da página. */
.botao--clicado { animation: pulso-botao 1s ease; }

@keyframes pulso-botao {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.96); }
  55%  { transform: scale(1.04); filter: brightness(1.14); }
  80%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .botao--clicado { animation: none; }
}

/* --------------------------------------------------------------------------
   CABEÇALHO
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sombra-cabecalho);
}

/* O blur fica no ::before, e não no .cabecalho, porque backdrop-filter no
   próprio cabeçalho criaria um containing block novo e quebraria o menu
   mobile (position: fixed). */
.cabecalho::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cor-cabecalho);
  backdrop-filter: blur(10px);
}

.cabecalho__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  max-width: var(--largura-maxima);
  margin: 0 auto;
}

.logo img { height: var(--altura-acao); width: auto; }

/* Agrupa a chave de tema e o hamburguer no canto direito. Sem isso o
   space-between do .cabecalho__linha jogaria a chave para o meio. */
.cabecalho__acoes { display: flex; align-items: center; gap: 14px; }

/* --------------------------------------------------------------------------
   CHAVE DE TEMA (claro / escuro)
   Mostra o destino, não o estado atual: lua no tema claro (clicar escurece),
   sol no tema escuro (clicar clareia).
   -------------------------------------------------------------------------- */
.troca-tema {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: var(--largura-chave);
  height: var(--altura-acao);
  padding: 3px;
  border-radius: 999px;
  background: var(--cor-escura);
  /* Positivo/negativo: --cor-texto já é preta no claro e branca no escuro,
     então uma regra só dá a borda certa nos dois temas. */
  border: 1px solid var(--cor-texto);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
/* No escuro a pílula fica vazada, só o contorno branco. */
[data-tema="escuro"] .troca-tema { background: transparent; }

.troca-tema__bolinha {
  /* desconta 1px de borda + 3px de padding de cada lado */
  width: calc(var(--altura-acao) - 8px);
  height: calc(var(--altura-acao) - 8px);
  border-radius: 50%;
  background: var(--branco);
  color: var(--preto);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transicao-lenta);
}
/* Percurso = pista - bolinha = (largura - 8) - (altura - 8) = largura - altura.
   Assim continua certo se algum dos dois tamanhos mudar. */
[data-tema="escuro"] .troca-tema__bolinha {
  transform: translateX(calc(var(--largura-chave) - var(--altura-acao)));
}

.troca-tema svg { width: 15px; height: 15px; }
.troca-tema__sol { display: none; }
[data-tema="escuro"] .troca-tema__lua { display: none; }
[data-tema="escuro"] .troca-tema__sol { display: block; }

@media (prefers-reduced-motion: reduce) {
  .troca-tema__bolinha { transition: none; }
}

/* Hamburguer animado.
   Flex em vez do display inline padrão do <label>: como <svg> é inline, ele
   herdava o espaço de descida da linha de texto e a caixa ficava 8px mais
   alta que o desenho — era isso que deixava o ícone acima da chave de tema,
   mesmo com as duas caixas centralizadas. */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--altura-acao);
  height: var(--altura-acao);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger input { display: none; }
.hamburger svg {
  display: block;
  width: var(--altura-acao);
  height: var(--altura-acao);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line {
  fill: none;
  stroke: var(--cor-texto);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line-top-bottom { stroke-dasharray: 12 63; }
.hamburger input:checked + svg { transform: rotate(-45deg); }
.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

.nav {
  display: none;
  flex-direction: column;
  gap: 22px;
  padding: 32px 24px 40px;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.nav__link {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.7s ease, transform 0.7s ease, color var(--transicao);
}
.nav--visivel .nav__link { opacity: 1; transform: translateY(0); }
.nav__link:not(.botao):hover { color: var(--dourado-ui); }

.nav__link:nth-child(1) { transition-delay: 0.00s; }
.nav__link:nth-child(2) { transition-delay: 0.07s; }
.nav__link:nth-child(3) { transition-delay: 0.14s; }
.nav__link:nth-child(4) { transition-delay: 0.21s; }
.nav__link:nth-child(5) { transition-delay: 0.28s; }
.nav__link:nth-child(6) { transition-delay: 0.35s; }
.nav__link:nth-child(7) { transition-delay: 0.42s; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero { padding: 8px 0 var(--espaco-secao); }

.hero__conteudo {
  max-width: 620px;
  margin: 0 auto;
  padding: 32px 24px 0;
}

/* Aqui entra o logotipo deitado (só o nome), não o selo redondo. Por isso
   o tamanho é dado pela LARGURA e não pela altura: com os 62px de altura
   que o selo quadrado usava, as três linhas de texto ficariam com ~15px
   cada e ninguém leria o nome. */
.hero__logo {
  width: 210px;
  height: auto;
  display: block;
  margin: 20px auto 32px;
}

.hero__titulo { font-size: 38px; margin: 12px 0 16px; }

/* O destaque do h1 é só a cor do gradiente: AQUI HAVIA UM font-style: italic
   que foi retirado a pedido da Danielle. */
.hero__titulo span {
  background: var(--gradiente-dourado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitulo { color: var(--cor-texto-claro); font-size: 15px; margin-bottom: 30px; }

.hero__acoes .botao { margin-bottom: 18px; }
.hero__acoes .botao:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   LINHA DIVISÓRIA — preta, entre as seções
   -------------------------------------------------------------------------- */
.linha-divisoria {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 24px;
}

.linha-divisoria__trecho {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cor-linha), transparent);
}

/* Mesma altura da headline (.logo img) para o isotipo renderizar idêntico —
   em tamanho menor a estrela perdia definição no redimensionamento. */
.linha-divisoria__icone { height: var(--altura-acao); width: auto; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   SOBRE
   -------------------------------------------------------------------------- */
/* Mesma largura da foto do carrossel: o bloco menos os 24px de cada lado
   que lá são reservados para as setas, e o mesmo teto de 420px — senão em
   telas largas o carrossel trava e esta continua crescendo. */
.sobre__foto {
  border-radius: var(--raio);   /* era 25px solto; agora acompanha as caixas */
  width: calc(100% - 48px);
  max-width: 420px;
  margin: 0 auto;
  box-shadow: var(--sombra);
  transition: transform var(--transicao-lenta), box-shadow var(--transicao-lenta);
}
.sobre__foto:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }

.sobre__texto p { color: var(--cor-texto-claro); font-size: 15px; margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   CARROSSEL (galeria do espaço) — componente do Pro Max
   -------------------------------------------------------------------------- */
/* O padding lateral é a faixa onde as setas ficam, fora da imagem.
   Esses 24px de cada lado são os mesmos descontados da .sobre__foto, para
   as duas fotos ficarem exatamente da mesma largura. */
.carrossel {
  position: relative;
  max-width: 468px;
  margin: 0 auto;
  padding: 0 24px;
}

.carrossel__janela {
  overflow: hidden;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.carrossel__trilha { display: flex; transition: transform 0.45s ease; }

.carrossel__item { min-width: 100%; position: relative; }

/* Caixa em 4/5 para as 30 fotos ficarem exatamente do mesmo tamanho.
   As 5 fotos que já são 4/5 entram inteiras; as 24 verticais de celular
   (9:16) e a de 3/4 são cortadas pelo centro — o bolo fica no meio do
   quadro, então o que sai é teto e chão. Os arquivos já saem recortados
   em 640x800; o cover aqui é só a garantia para qualquer foto nova. */
.carrossel__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}

/* AQUI FICAVA A .carrossel__legenda: uma tarja com degradê preto e o
   título da foto por cima da imagem. Saiu a pedido — a galeria agora
   mostra só a foto, sem nada escrito em cima. */

/* Sem círculo: só a seta, com o gradiente dourado da paleta.
   O gradiente vem do <linearGradient id="gradienteDourado"> do sprite SVG. */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;          /* igual ao padding do .carrossel, para não invadir a foto */
  height: 52px;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.carrossel__seta svg { width: 24px; height: 24px; }
.carrossel__seta--anterior { left: 0; }
.carrossel__seta--proxima { right: 0; }

/* Indicador em traços: o da foto atual fica mais largo e em pistache cheio;
   os outros ficam no mesmo verde, só que lavado. O pistache é o que amarra
   os tracinhos às setas do carrossel, que usam o mesmo tom. */
/* Com 30 fotos são 30 traços: 1.140px numa faixa de 403px. Em vez de
   encolher os traços, a fileira rola na horizontal igual às fotos — o
   script.js traz o traço da foto atual para o campo de visão. */
.carrossel__pontos {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 20px;
  overflow-x: auto;
  /* O deslizar suave é pedido pelo script.js, no scrollTo({behavior}).
     Com scroll-behavior: smooth AQUI, a rolagem programática era engolida. */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* Edge antigo */
  padding-bottom: 2px;              /* o traço não encosta na borda do corte */
}
.carrossel__pontos::-webkit-scrollbar { display: none; }

/* Enquanto os traços couberem todos, ficam centralizados como antes. */
@supports (justify-content: safe center) {
  .carrossel__pontos { justify-content: safe center; }
}
.carrossel__ponto {
  width: 30px;
  height: 3px;
  flex-shrink: 0;        /* sem isso o flex esmaga os 30 traços até sumirem */
  border-radius: 999px;
  background: var(--pistache-claro);
  transition: width var(--transicao), background var(--transicao);
}
.carrossel__ponto[aria-current="true"] {
  width: 54px;
  background: var(--gradiente-pistache);
}

/* --------------------------------------------------------------------------
   PROCEDIMENTOS — grade de cartões do Pro Max
   -------------------------------------------------------------------------- */
/* Duas colunas já no celular. Escolher procedimento é decisão por
   comparação: um cartão embaixo do outro obriga a rolar para lembrar do
   anterior. Lado a lado, os quatro são comparados de uma vez.
   Os tamanhos abaixo são os da versão compacta; a partir de 700px eles
   voltam ao normal. */
/* 1 cartão por linha no celular. O modelo vinha com 2, mas aqui cada cartão
   abre a lista de sabores em 2 colunas — com meia tela, cada coluna ficaria
   com ~80px e "Brigadeiro de Paçoquinha" quebraria em 3 linhas. No desktop
   voltam a conviver vários por linha (regra do @media lá embaixo). */
.grade-servicos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.cartao-servico {
  position: relative;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 12px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
/* Sem mudança de fundo no hover: o site é mobile, não existe passar o
   mouse — e no desktop o fundo dourado tirava a legibilidade do texto. */
.cartao-servico:hover { transform: translateY(-8px); box-shadow: var(--sombra-hover); }
.cartao-servico > * { position: relative; }

.cartao-servico__foto {
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
  margin-bottom: 12px;
  transition: transform var(--transicao-lenta);
}
.cartao-servico:hover .cartao-servico__foto { transform: scale(1.03); }

/* Reserva a altura de 2 linhas no título mesmo quando ele ocupa 1. Sem isso,
   um serviço de nome curto (1 linha) e outro de nome longo (2 linhas) fazem
   a descrição começar em alturas diferentes nos cartões lado a lado.
   O valor é em em, então acompanha a mudança de font-size no desktop. */
.cartao-servico h3 {
  font-size: 15px;
  line-height: 1.25;
  min-height: 2.5em;   /* 2 linhas × 1.25 de entrelinha */
  margin-bottom: 5px;
}
.cartao-servico p { font-size: 12.5px; line-height: 1.4; color: var(--cor-texto-claro); margin-bottom: 10px; }

/* O margin-top: auto fica AQUI, e não no botão. Ele empurra preço e botão
   juntos para a base do cartão, então os dois alinham entre cartões da mesma
   linha mesmo quando a descrição tem 3 linhas num e 4 no outro. */
.cartao-servico__preco {
  margin-top: auto;
  font-family: var(--fonte-titulo);
  font-size: 19px;
  margin-bottom: 12px;
  background: var(--gradiente-dourado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* "o cento" não é o número: fica menor e em marrom chapado, fora do
   recorte do gradiente que pinta o preço. */
.cartao-servico__unidade {
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 400;
  color: var(--cor-texto-claro);
  -webkit-text-fill-color: var(--cor-texto-claro);
}

/* "Monte o seu bolo" e "Decoração" não têm preço fechado (depende do tamanho
   escolhido), e sem o .cartao-servico__preco ninguém empurra o botão para a
   base — ele subia e desalinhava com os outros cartões da mesma linha. Aqui
   o próprio botão assume o margin-top: auto. */
.cartao-servico--sem-preco .botao { margin-top: auto; }

/* O botão do cartão precisa caber em ~130px de largura útil, então não
   herda o padding nem o corpo do .botao padrão. */
.cartao-servico .botao {
  padding: 12px 8px;
  font-size: 12.5px;
  line-height: 1.3;
  border-radius: var(--raio-pequeno);
}

/* --------------------------------------------------------------------------
   SABORES — lista que abre dentro do cartão
   É um <details>/<summary> nativo: abre e fecha SEM JavaScript. O FAQ do
   modelo usa script.js porque precisa animar a altura; aqui não precisa,
   então o navegador resolve sozinho e a lista continua no HTML (o Google lê
   os sabores mesmo com o bloco fechado).
   -------------------------------------------------------------------------- */
.sabores { margin-bottom: 12px; }

.sabores__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto);
  cursor: pointer;
  list-style: none;              /* tira o triângulo padrão */
  transition: border-color var(--transicao), background var(--transicao);
}
/* O Safari ignora list-style no summary e usa este pseudo-elemento. */
.sabores__botao::-webkit-details-marker { display: none; }
.sabores__botao:hover { border-color: var(--dourado-medio); }

.sabores__botao svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--pistache);
  transition: transform var(--transicao);
}
.sabores[open] .sabores__botao svg { transform: rotate(180deg); }

/* Duas colunas, que é o que cabe com o cartão ocupando a linha inteira. */
.sabores__lista {
  columns: 2;
  column-gap: 14px;
  padding: 12px 12px 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cor-texto-claro);
}
.sabores__lista li {
  break-inside: avoid;           /* nenhum sabor parte no meio entre colunas */
  margin-bottom: 7px;
  padding-left: 12px;
  position: relative;
}
/* Pontinho pistache no lugar do marcador de lista. */
.sabores__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pistache);
}

/* Os sabores finos são frases, não nomes curtos: em 2 colunas eles viram
   um paredão. Esta lista fica em 1 coluna. */
.sabores__lista--longa { columns: 1; }

/* --------------------------------------------------------------------------
   PAINÉIS DO CARDÁPIO — "Bolos" e "Doces"
   Nível 1 do cardápio: cada painel guarda uma .grade-servicos inteira.
   Também é <details>/<summary> nativo, sem JavaScript, e os dois começam
   FECHADOS — a visitante escolhe primeiro se quer bolo ou doce e só então vê
   os preços daquilo, em vez de rolar oito cartões.
   Mesmo visual dos cartões (fundo, borda, raio), só um pouco maior.
   -------------------------------------------------------------------------- */
.painel-cardapio {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 14px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.painel-cardapio:last-of-type { margin-bottom: 0; }

.painel-cardapio__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;              /* tira o triângulo padrão */
}
/* O Safari ignora list-style no summary e usa este pseudo-elemento. */
.painel-cardapio__botao::-webkit-details-marker { display: none; }

/* O <summary> é o único jeito de abrir o painel sem mouse, então o foco do
   teclado precisa aparecer — o anel padrão do navegador fica fraco em cima
   do fundo creme. */
.painel-cardapio__botao:focus-visible {
  outline: 2px solid var(--dourado-medio);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* O título é um <span>, e não um <h3>: os cartões lá dentro já são h3 e
   rebaixá-los para h4 mexeria em conteúdo que não era para mudar. Assim o
   painel tem a APARÊNCIA de título sem entrar na hierarquia da página. */
.painel-cardapio__titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--cor-texto);
}

/* O convite ("Toque para ver...") existe porque um painel fechado não diz o
   que acontece ao tocar. Some do fluxo visual quando o painel abre. */
.painel-cardapio__convite {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cor-texto-claro);
}
.painel-cardapio[open] .painel-cardapio__convite { display: none; }

.painel-cardapio__seta {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--pistache);
  transition: transform var(--transicao);
}
.painel-cardapio[open] .painel-cardapio__seta { transform: rotate(180deg); }

/* Respiro curto na horizontal de propósito: cada pixel aqui sai da largura
   dos cartões e, com eles em 1 coluna no celular, é a lista de sabores em 2
   colunas que paga a conta. O respiro de cima e de baixo é maior porque o
   cartão sobe 8px no hover e sem ele encostaria na borda do painel. */
.painel-cardapio__corpo { padding: 10px 8px 14px; }

/* --------------------------------------------------------------------------
   GRUPOS DENTRO DO "VER TUDO"
   O cartão "Monte o seu bolo" tem quatro listas no mesmo painel (massas,
   recheios tradicionais, recheios especiais e toppings), então cada uma
   ganha um rótulo. São <span> com display:block, e não <p>: .cartao-servico p
   tem especificidade maior que estas classes e sobrescreveria o tamanho da
   fonte e a margem.
   -------------------------------------------------------------------------- */
.sabores__grupo {
  display: block;
  margin: 14px 12px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dourado-ui);
}

/* Linha do acréscimo por tamanho, logo abaixo do rótulo do grupo. */
.sabores__nota {
  display: block;
  margin: 3px 12px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--cor-texto-claro);
}

/* Com rótulo em cima, a lista não repete o respiro de 12px do topo. */
.sabores__grupo + .sabores__lista,
.sabores__nota + .sabores__lista { padding-top: 7px; }

/* --------------------------------------------------------------------------
   TABELAS DE PREÇO DOS BOLOS
   Tamanho e camadas à esquerda, preço à direita.

   É uma grade no <ul> com os <li> em display: contents, e não uma grade por
   <li>: assim as colunas são as MESMAS em todas as linhas, e os preços (e os
   rótulos "Minizinho / M, G e GG" da decoração) alinham de verdade. Com uma
   grade por linha cada <li> media a sua própria coluna e os preços saíam
   desencontrados.

   Não é <table> porque a tabela mede pelo conteúdo e empurra a largura para
   fora da tela no celular; aqui a coluna do texto encolhe e quebra em 2
   linhas, sem rolagem horizontal.
   -------------------------------------------------------------------------- */
.precos {
  display: grid;
  grid-template-columns: 1fr auto;     /* 1fr, não minmax(0,1fr): o mínimo de
                                          conteúdo impede a coluna do texto
                                          de ser esmagada até zero */
  /* stretch, e não baseline: quando o texto da esquerda quebra em 2 linhas e o
     preço fica em 1, o baseline deixava as duas células com alturas diferentes
     e o traço separador aparecia partido no meio da linha. Esticadas, as duas
     terminam juntas — e o preço continua alinhado com a 1ª linha do texto,
     porque é o padding-top que o posiciona. */
  align-items: stretch;
  padding: 10px 12px 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cor-texto-claro);
}
.precos > li { display: contents; }

/* O traço separador vai nas CÉLULAS, porque o <li> não tem caixa própria.
   Por isso também não existe column-gap: o vão entre as colunas partia o
   traço em pedaços. O respiro vem de padding dentro das próprias células. */
.precos > li > * {
  padding: 7px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.precos > li:last-child > * { border-bottom: 0; }

/* Os seletores abaixo levam .precos na frente de propósito: sem ele a regra
   perde para o `.precos > li > *` acima, que também escreve padding. */
.precos .precos__item { padding-right: 12px; }

.precos__tamanho { font-weight: 600; color: var(--cor-texto); }

.precos__valor {
  font-weight: 600;
  text-align: right;
  color: var(--cor-texto);
  white-space: nowrap;
}

/* --- Decoração: dois preços por item ---------------------------------------
   Três colunas (item + 2 preços) não cabem em lugar nenhum: no celular
   sobrariam ~85px para "Glitter comestível próprio para confeitaria", e no
   desktop os cartões vão a 2 por linha, então a largura útil mal passa de
   430px e a terceira coluna vazava para fora do cartão.
   Então vale em toda tela: o nome ocupa a linha inteira e os dois preços
   dividem a linha de baixo, cada um com o seu tamanho em cima. */
.precos--duplo { grid-template-columns: 1fr 1fr; }

.precos--duplo .precos__item {
  grid-column: 1 / -1;
  padding: 7px 0 0;
  border-bottom: 0;
}
.precos--duplo .precos__valor {
  padding-top: 2px;
  text-align: left;
  white-space: normal;        /* "entre R$ 25 e R$ 40" não cabe em meia linha */
}
.precos--duplo .precos__valor + .precos__valor { text-align: right; }

/* O rótulo do tamanho fica EM CIMA do preço, e não na frente: na mesma linha
   sobrava pouco para o número e "entre R$ 25 e R$ 40" quebrava no meio. */
.precos__rotulo {
  display: block;
  margin-bottom: 1px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--dourado-ui);
}

/* --------------------------------------------------------------------------
   POLÍTICA — cartões com ícone (padrão "garantias" do Pro Max)
   -------------------------------------------------------------------------- */
.grade-garantias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* Grade com UM cartão só (seção "nossos serviços"). Sem isso o auto-fit
   estica o cartão pela largura inteira do container e ele fica com cara de
   faixa, não de cartão. */
.grade-garantias--unica { max-width: 420px; margin: 0 auto 28px; }

.cartao-garantia {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao-garantia:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }

.cartao-garantia__icone {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--gradiente-dourado);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transicao);
}
.cartao-garantia:hover .cartao-garantia__icone { transform: rotate(-6deg) scale(1.08); }
.cartao-garantia__icone svg { width: 24px; height: 24px; }

.cartao-garantia h3 { font-family: var(--fonte-texto); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.cartao-garantia p { font-size: 13px; color: var(--cor-texto-claro); }

/* --------------------------------------------------------------------------
   MIMOS — painel de indicação do Pro Max
   -------------------------------------------------------------------------- */
/* Sem painel de fundo: ficam só os textos e as caixinhas pretas. */
.indicacao {
  background: none;
  padding: 0;
  color: var(--cor-texto);
  box-shadow: none;
  display: grid;
  gap: 32px;
}

.indicacao__texto h2 { font-size: 26px; margin-bottom: 12px; }
.indicacao__texto p { font-size: 15px; color: var(--cor-texto-claro); }

.indicacao__passos { display: flex; flex-direction: column; gap: 14px; }

/* Só o contorno, no mesmo raio dos cartões do resto do site.
   Sem animação: o mimo não é clicável, e no celular o efeito não aparece. */
.indicacao__passo {
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}

.indicacao__selo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradiente-dourado);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicacao__passo span { font-size: 13px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   DEPOIMENTOS — cartões do Pro Max
   -------------------------------------------------------------------------- */
/* Um depoimento embaixo do outro, e não em grade: lidos em sequência eles
   funcionam como uma conversa. Mesma largura máxima do FAQ para não
   esticarem demais no desktop. */
.grade-depoimentos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
}

.cartao-depoimento {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 26px 24px;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao-depoimento:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }

.cartao-depoimento__estrelas { display: flex; gap: 3px; margin-bottom: 14px; color: var(--dourado); }
.cartao-depoimento__estrelas svg { width: 16px; height: 16px; }

.cartao-depoimento__texto { font-size: 14px; color: var(--cor-texto-claro); line-height: 1.5; }

/* --------------------------------------------------------------------------
   FAQ — accordion do Pro Max
   -------------------------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.faq__item {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: border-color var(--transicao);
}
.faq__item[data-aberto="true"] { border-color: var(--dourado-medio); }

.faq__pergunta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px;
  text-align: left;
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 700;
  color: var(--cor-texto);
}

.faq__pergunta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--dourado-ui);
  transition: transform var(--transicao);
}
.faq__item[data-aberto="true"] .faq__pergunta svg { transform: rotate(180deg); }

.faq__resposta { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq__resposta p {
  font-size: 14px;
  color: var(--cor-texto-claro);
  line-height: 1.5;
  margin: 0 18px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
}

/* --------------------------------------------------------------------------
   INSTAGRAM — grade do Pro Max
   -------------------------------------------------------------------------- */
.grade-instagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.grade-instagram a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--raio-pequeno);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  background: var(--dourado-claro);
  box-shadow: var(--sombra-botao);
}
.grade-instagram img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-lenta); }
.grade-instagram a:hover img { transform: scale(1.07); }

/* Marca d'água enquanto as fotos reais não entram */
.grade-instagram .marca-vazia { width: 42%; height: auto; object-fit: contain; opacity: 0.25; }

/* Sempre visível: no celular não existe passar o mouse, e o "ver post"
   fixo é o que mostra que o quadro é clicável. */
.grade-instagram__cobertura {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(207, 141, 48, 0.25), rgba(0, 0, 0, 0.75));
  color: var(--branco);
  font-size: 13px;
  font-weight: 600;
  /* Tinha um text-shadow aqui para o "ver post" não sumir na foto. Saiu
     junto com as outras sombras — o degradê escuro do fundo deste mesmo
     bloco já garante a leitura. */
}
.grade-instagram__cobertura svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   LOCALIZAÇÃO
   -------------------------------------------------------------------------- */
.lista-contato { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 26px; }
.lista-contato li { display: flex; align-items: flex-start; gap: 14px; }
.lista-contato svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--dourado-ui);
  margin-top: 2px;
}
.lista-contato strong { display: block; font-family: var(--fonte-titulo); font-size: 17px; }
.lista-contato span { font-size: 14px; color: var(--cor-texto-claro); }

/* Ícones redondos de contato: sem animação (no celular o efeito não aparece). */
.redes-sociais { display: flex; gap: 12px; margin-bottom: 26px; }
.redes-sociais a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-botao);
}
.redes-sociais a svg { width: 18px; height: 18px; }

/* "Avalie no Google": também sem animação. */
#localizacao .botao--contorno:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.mapa {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
  border-radius: var(--raio);
  box-shadow: var(--sombra-mapa);
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.cta-final {
  background: var(--cor-escura);
  text-align: center;
  padding: var(--espaco-secao) 24px;
}
.cta-final .etiqueta { color: var(--dourado); }
.cta-final h2 { color: var(--branco); font-size: 30px; margin: 12px 0 32px; }
.cta-final p { color: rgba(255, 255, 255, 0.85); font-size: 15px; margin-bottom: 28px; }
.cta-final .botao { max-width: 420px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   LOGO — seção própria, entre o CTA e o rodapé
   -------------------------------------------------------------------------- */
.secao-logo {
  background: var(--cor-escura);
  text-align: center;
  padding: 48px 24px 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Mesma largura do botão do CTA (.botao tem max-width: 420px). */
.secao-logo__imagem {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--cor-escura);
  color: rgba(255, 255, 255, 0.75);
  padding: 44px 24px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.rodape__conteudo { max-width: var(--largura-maxima); margin: 0 auto; }

.rodape__grade { display: grid; gap: 28px; }

.rodape__logo { height: 54px; width: auto; margin-bottom: 18px; }

.rodape p { font-size: 14px; margin-bottom: 6px; }

.rodape h4 {
  font-family: var(--fonte-texto);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dourado);
  margin-bottom: 10px;
}

.rodape a {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transicao);
}
.rodape a:hover { color: var(--dourado); }

.rodape__copy {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 26px;
  padding-top: 16px;
  font-size: 11px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   BOTÃO FLUTUANTE DO WHATSAPP
   -------------------------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cor-whatsapp);
  color: var(--branco);            /* deixa o símbolo branco */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  z-index: 200;
  transition: transform var(--transicao);
}
.whatsapp-flutuante svg { width: 28px; height: 28px; fill: var(--branco); }
.whatsapp-flutuante:hover { transform: scale(1.08); }

/* ==========================================================================
   TABLET / DESKTOP
   ========================================================================== */
@media (min-width: 700px) {
  :root { --espaco-secao: 88px; }

  .secao__titulo { font-size: 34px; }
  .secao__cabecalho { text-align: center; max-width: 640px; margin: 0 auto 44px; }

  .botao {
    display: inline-block;
    width: auto;
    min-width: 260px;
    padding: 18px 40px;
  }

  /* Cardápio: 2 colunas fixas, não auto-fit. Com auto-fit os 4 cartões
     entravam numa linha só (245px cada) e a lista de sabores em 2 colunas
     ficava com ~90px por coluna — todo sabor quebrava em 2 ou 3 linhas.
     É o mesmo motivo pelo qual no celular vai 1 cartão por linha. */
  .grade-servicos { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cartao-servico { padding: 20px; }
  .cartao-servico__foto { height: 220px; border-radius: var(--raio); margin-bottom: 20px; }
  .cartao-servico h3 { font-size: 20px; margin-bottom: 8px; }
  .cartao-servico p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
  .cartao-servico__preco { font-size: 24px; margin-bottom: 16px; }
  /* O min-width de 260px do .botao estouraria o cartão, que tem ~190px úteis. */
  .cartao-servico .botao {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 16px 12px;
    font-size: 14px;
    border-radius: var(--raio-botao);
  }

  /* Painéis do cardápio: aqui sobra largura, então o respiro volta ao normal. */
  .painel-cardapio { margin-bottom: 20px; }
  .painel-cardapio__botao { padding: 24px 28px; }
  .painel-cardapio__titulo { font-size: 24px; }
  .painel-cardapio__convite { margin-top: 5px; font-size: 14px; }
  .painel-cardapio__seta { width: 28px; height: 28px; }
  .painel-cardapio__corpo { padding: 4px 24px 28px; }

  .sabores__grupo { font-size: 12.5px; }
  .sabores__nota  { font-size: 12.5px; }
  .precos { font-size: 14px; }
  .precos .precos__item { padding-right: 20px; }
  .precos__rotulo { font-size: 12px; }

  .hero__conteudo { text-align: center; padding: 48px 24px 0; }
  .hero__logo { width: 270px; }
  .hero__titulo { font-size: 52px; }
  .hero__subtitulo { max-width: 520px; margin-left: auto; margin-right: auto; }
  .hero__acoes { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
  .hero__acoes .botao { margin-bottom: 0; min-width: 240px; }

  .indicacao { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
  .indicacao__texto h2 { font-size: 32px; }

  .grade-instagram { gap: 14px; }

  .mapa { height: 380px; }

  .cta-final h2 { font-size: 40px; }

  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
}

@media (min-width: 980px) {
  .hamburger { display: none; }

  /* O cabeçalho continua ocupando a largura toda (o fundo branco precisa
     disso); o padding lateral centraliza o conteúdo na largura máxima. */
  .cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-left: max(24px, calc((100% - var(--largura-maxima)) / 2));
    padding-right: max(24px, calc((100% - var(--largura-maxima)) / 2));
  }

  .cabecalho__linha { flex: 0 0 auto; max-width: none; margin: 0; padding: 14px 0; }

  .nav {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .nav__link {
    opacity: 1;
    transform: none;
    font-family: var(--fonte-texto);
    font-size: 15px;
    font-weight: 600;
    position: relative;
  }
  .nav__link:not(.botao)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--gradiente-dourado);
    transition: width var(--transicao);
  }
  .nav__link:not(.botao):hover::after { width: 100%; }
  .nav .botao { min-width: 0; padding: 12px 24px; font-size: 14px; }

  .secao__grade--duas { grid-template-columns: 1fr 1fr; gap: 56px; }
  .sobre__foto { width: 100%; max-width: none; }

  .whatsapp-flutuante { right: 24px; bottom: 24px; width: 62px; height: 62px; }
  .whatsapp-flutuante svg { width: 31px; height: 31px; }
}