/* ==========================================================================
   ANA FERREIRA — LASH DESIGNER
   Design e UI: modelo PRO MAX
   Conteúdo, dados e identidade visual: Ana Ferreira (manual da marca 2026)

   Para adaptar a outro cliente, troque só o :root abaixo.
   ========================================================================== */

:root {
  /* ---- PALETA OFICIAL (manual da marca) ---- */
  --dourado-claro:    #FFFACC;
  --dourado:          #FFD41F;
  --dourado-medio:    #CF8D30;
  --dourado-escuro:   #B16F17;
  --dourado-profundo: #6B5A14;
  --preto:            #000000;
  --branco:           #FFFFFF;

  /* ---- Papéis de cor ---- */
  --cor-primaria: var(--dourado-escuro);
  --cor-texto:       #000000;
  --cor-texto-claro: #2e2e2e;
  --cor-fundo:       #FFFFFF;   /* a página inteira é branca */
  --cor-borda:       #F0E3C0;
  --cor-escura:      #000000;

  /* 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: #FFFFFF;                  /* fundo dos cartões e do menu */
  --cor-cabecalho:  rgba(255, 255, 255, 0.95);
  --cor-linha:      #000000;                  /* traço das linhas divisórias */
  --dourado-ui:     #B16F17;                  /* dourado de textos e ícones */

  --gradiente-dourado: linear-gradient(100deg, #B16F17 1%, #FFD41F 50%, #CF8D30 100%);

  /* ---- Tipografia (manual da marca) ---- */
  --fonte-titulo: 'Cinzel', Georgia, serif;
  --fonte-texto:  'Manrope', 'Segoe UI', sans-serif;

  /* ---- Contato (o script.js lê o número daqui) ---- */
  --whatsapp-numero: "5531998873859";
  --cor-whatsapp:    #25D366;

  /* ---- Sombras: todas pretas, nos tons do site original ---- */
  --sombra-botao:     0 1px 10px rgba(0, 0, 0, 0.20);
  --sombra:           0 1px 10px rgba(0, 0, 0, 0.30);
  --sombra-hover:     0 10px 28px rgba(0, 0, 0, 0.30);
  --sombra-cabecalho: 0 1px 10px rgba(0, 0, 0, 0.60);
  --sombra-mapa:      0 0 25px rgba(0, 0, 0, 0.99);

  /* ---- 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:            30px;
  --raio-pequeno:    18px;
  --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:       #6B5A14;   /* dourado fosco no lugar do creme */
  --cor-linha:       #CF8D30;   /* divisórias douradas */
  --dourado-ui:      #CF8D30;   /* #B16F17 fica embarrado no preto */

  /* 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; }

/* As logos são preto 100% puro sobre transparente (conferido pixel a pixel),
   então invertê-las devolve branco puro — mesmo desenho, mesma borda suave,
   sem precisar de arquivo novo. Escopo só no escuro: o tema claro continua
   exatamente como estava. */
[data-tema="escuro"] .logo img,
[data-tema="escuro"] .hero__logo,
[data-tema="escuro"] .linha-divisoria__icone { filter: invert(1); }

/* 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: var(--cor-fundo);
  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; }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; 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);
  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 original do site da Ana.
   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;
}

.hero__logo {
  height: 62px;
  width: auto;
  display: block;
  margin: 20px auto 40px;
}

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

.hero__titulo span {
  font-style: italic;
  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: 25px;
  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 3/4 (960x1280) para as três fotos ficarem do mesmo tamanho.
   Cantinho e biossegurança já são 3/4 e entram inteiras. A da maca é 4/5,
   então com object-fit: cover perde ~3% de cada lateral — o mínimo para
   não sobrar nenhuma faixa. */
.carrossel__item img {
  width: 100%;
  aspect-ratio: 960 / 1280;
  height: auto;
  object-fit: cover;
}

.carrossel__legenda {
  position: absolute;
  inset: auto 0 0 0;
  padding: 60px 20px 22px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
  color: var(--branco);
  text-align: left;
}
.carrossel__legenda h3 { font-size: 20px; margin-bottom: 5px; }
.carrossel__legenda p { font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); }

/* 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 dourado. */
.carrossel__pontos { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.carrossel__ponto {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: var(--cor-borda);
  transition: width var(--transicao), background var(--transicao);
}
.carrossel__ponto[aria-current="true"] {
  width: 54px;
  background: var(--gradiente-dourado);
}

/* --------------------------------------------------------------------------
   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. */
.grade-servicos {
  display: grid;
  grid-template-columns: repeat(2, 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,
   "Volume Luxo" (1 linha) e "Volume Egípcio" (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 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);
}

/* --------------------------------------------------------------------------
   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;
}

.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;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.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: 0 4px 20px rgba(24, 179, 81, 0.4);   /* sombra blur do site original */
  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;
  }

  /* Procedimentos: a partir daqui o cartão volta ao tamanho cheio e a grade
     passa a se acomodar sozinha (2 colunas em tablet, 4 em desktop). */
  .grade-servicos { grid-template-columns: repeat(auto-fit, minmax(228px, 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);
  }

  .hero__conteudo { text-align: center; padding: 48px 24px 0; }
  .hero__logo { height: 78px; }
  .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; }
}