/* ==========================================================================
   Terumi Nails — estilo.css
   Um arquivo só. Cor, fonte e medida ficam nas variáveis do :root.
   As fontes vêm de assets/fontes/fontes.css (locais, sem internet).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis: paleta medida nas artes, duas fontes, escala e grade de 8 px
   -------------------------------------------------------------------------- */
:root {
  --perola: #FBF6F1;        /* fundo da página */
  --nude: #F4E6DE;          /* fundo de cartão e faixa */
  --poeira: #E8CEC2;        /* linhas, bordas, divisórias */
  --sakura: #E3AFA0;        /* flores e detalhe pequeno (nunca texto) */
  --cobre: #B17157;         /* logo, títulos grandes, ícones */
  --vinho: #7A3A30;         /* preços, botão principal, destaque */
  --vinho-escuro: #612D25;  /* botão principal pressionado */
  --cacau: #4A2E28;         /* texto corrido, nomes de serviço */
  --branco: #FFFFFF;

  --fonte-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fonte-texto: "Montserrat", "Segoe UI", Arial, sans-serif;

  /* escala: cresce do celular (390 px) ao computador (1280 px) */
  --t-pagina: clamp(2.5rem, 1.45rem + 4.3vw, 4rem);        /* 40 → 64 px */
  --t-secao: clamp(2rem, 1.45rem + 2.3vw, 2.75rem);         /* 32 → 44 px */
  --t-apoio: clamp(1.25rem, 1.13rem + .5vw, 1.5rem);        /* 20 → 24 px */
  --t-texto: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);   /* 17 → 18 px */
  --t-rotulo: clamp(.75rem, .72rem + .12vw, .8125rem);      /* 12 → 13 px */
  --t-preco: clamp(1.375rem, 1.32rem + .25vw, 1.5rem);      /* 22 → 24 px */
  --t-pequeno: .9375rem;                                    /* 15 px: legendas */

  --largura-max: 1120px;
  --margem: 24px;           /* margem lateral */
  --secao: 64px;            /* espaço entre seções */
  --raio-cartao: 20px;
  --raio-foto: 16px;
  --raio-pilula: 999px;
  --altura-cabecalho: 100px;

  --suave: cubic-bezier(.2, .8, .2, 1);
  --sombra-leve: 0 8px 24px rgba(74, 46, 40, .12);
}
@media (min-width: 768px) {
  :root { --margem: 48px; --secao: 96px; }
}
@media (min-width: 1024px) {
  :root { --altura-cabecalho: 124px; }
}

/* --------------------------------------------------------------------------
   2. Base: zera o navegador e aplica cor, fonte e números tabulares
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 16px);
  overflow-x: clip;                        /* junto com o body: o Safari do iPhone ignora só no body */
}
body {
  margin: 0;
  padding-top: var(--altura-cabecalho);   /* espaço do cabeçalho fixo */
  background: var(--perola);
  color: var(--cacau);
  font-family: var(--fonte-texto);
  font-size: var(--t-texto);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                        /* o galho pode passar da borda sem criar rolagem */
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3 { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; border-radius: 4px; }
.pular {                                     /* "pular para o conteúdo": só aparece ao focar pelo teclado */
  position: absolute; left: 16px; top: 8px; z-index: 60;
  padding: 12px 20px;
  background: var(--vinho); color: var(--perola);
  border-radius: var(--raio-pilula);
  font-weight: 600;
  transform: translateY(-200%);
}
.pular:focus-visible { transform: none; outline-color: var(--vinho); }

/* --------------------------------------------------------------------------
   3. Tipografia: título em Cormorant, resto em Montserrat
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--cacau);
  text-wrap: balance;
}
h1 { font-size: var(--t-pagina); line-height: 1; color: var(--cobre); }
h2 { font-size: var(--t-secao); color: var(--cobre); }
h3 { font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.15; }

.apoio {                                     /* frase de apoio, itálico */
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-apoio);
  line-height: 1.25;
  color: var(--cacau);
}
.rotulo {                                    /* rótulo caixa alta de seção */
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cacau);
}
.pequeno { font-size: var(--t-pequeno); }
.prosa { max-width: 36rem; }                 /* bloco de parágrafos */
.prosa p + p { margin-top: 1em; }
.oculto {                                    /* só para leitor de tela */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Grade: container de 1120 px e espaço entre seções
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--largura-max) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}
.secao { padding-block: calc(var(--secao) / 2); }   /* duas metades somam 96/64 px */
.secao--nude { background: var(--nude); }
.secao__cabecalho { max-width: 640px; margin-bottom: 40px; }
.secao__cabecalho--centro { margin-inline: auto; text-align: center; }
.secao__cabecalho .rotulo { margin-bottom: 16px; }
.secao__cabecalho .apoio { margin-top: 16px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.acoes--centro { justify-content: center; }
.grade { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grade--2, .grade--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grade { gap: 24px; }
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
}
.duas-colunas { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .duas-colunas { grid-template-columns: .8fr 1.2fr; gap: 64px; }
}

/* --------------------------------------------------------------------------
   5. Cabeçalho fixo e translúcido; linha fina só depois de rolar
   -------------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--altura-cabecalho);
  background: rgba(251, 246, 241, .72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--suave);
}
.cabecalho--rolou { border-bottom-color: var(--poeira); }
.cabecalho__barra {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cabecalho__logo { display: block; flex: none; }
.cabecalho__logo img { width: 120px; }
.cabecalho__nav, .cabecalho__barra .cabecalho__cta { display: none; }   /* no celular ficam no painel */

/* botão de três riscos que vira X */
.cabecalho__menu-botao {
  position: relative;
  width: 48px; height: 48px;
  margin-right: -8px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform 100ms ease-out, background-color 150ms var(--suave);
  -webkit-tap-highlight-color: transparent;
}
.cabecalho__menu-botao:active { transform: scale(.92); background: var(--nude); }
.cabecalho__menu-botao span {
  position: absolute;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--cacau);
  transition: transform 250ms var(--suave), opacity 150ms var(--suave);
}
.cabecalho__menu-botao span:nth-child(1) { transform: translateY(-7px); }
.cabecalho__menu-botao span:nth-child(3) { transform: translateY(7px); }
.cabecalho--aberto .cabecalho__menu-botao span:nth-child(1) { transform: rotate(45deg); }
.cabecalho--aberto .cabecalho__menu-botao span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.cabecalho--aberto .cabecalho__menu-botao span:nth-child(3) { transform: rotate(-45deg); }

/* painel do celular: desce do cabeçalho, some com Esc, toque fora ou rolagem */
.menu-celular {
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: 8px var(--margem) 24px;
  background: var(--perola);              /* sólido: não empilha duas superfícies translúcidas */
  border-bottom: 1px solid var(--poeira);
  box-shadow: var(--sombra-leve);
  max-height: calc(100vh - var(--altura-cabecalho));   /* celular deitado: o painel rola em vez de cortar */
  max-height: calc(100dvh - var(--altura-cabecalho));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 250ms var(--suave), opacity 200ms var(--suave), visibility 0s linear 250ms;
}
.cabecalho--aberto .menu-celular {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.menu-celular__lista a {
  display: flex; align-items: center;
  min-height: 52px;
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--poeira);
}
.menu-celular__lista a[aria-current="page"] { color: var(--vinho); }
.menu-celular .botao { width: 100%; margin-top: 24px; }

@media (min-width: 1024px) {
  .cabecalho__logo img { width: 140px; }
  .cabecalho__nav { display: block; margin-left: auto; }
  .cabecalho__lista { display: flex; gap: 4px; }
  .cabecalho__lista a {
    display: inline-flex; align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--raio-pilula);
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 150ms var(--suave), color 150ms var(--suave);
  }
  .cabecalho__lista a:hover { background: var(--nude); }
  .cabecalho__lista a[aria-current="page"] { color: var(--vinho); font-weight: 600; }
  .cabecalho__barra .cabecalho__cta { display: inline-flex; }
  .cabecalho__menu-botao, .menu-celular { display: none; }
}

/* --------------------------------------------------------------------------
   6. Botões: pílula, reação ao toque na hora (sem esperar soltar)
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out, background-color 150ms var(--suave),
              color 150ms var(--suave), border-color 150ms var(--suave);
}
.botao:active { transform: scale(.97); }
.botao svg { width: 20px; height: 20px; flex: none; }
.botao--principal { background: var(--vinho); border-color: var(--vinho); color: var(--perola); }
.botao--principal:hover { background: var(--vinho-escuro); border-color: var(--vinho-escuro); }
.botao--secundario { background: transparent; border-color: var(--cobre); color: var(--vinho); }   /* texto Vinho: Cobre não passa no AA em 16 px */
.botao--secundario:hover { background: rgba(122, 58, 48, .06); }
.botao--pequeno { min-height: 44px; padding: 0 18px; font-size: .875rem; }
@media (min-width: 1024px) {
  .botao { min-height: 52px; }
  .botao--pequeno { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   7. Cartões e preços
   -------------------------------------------------------------------------- */
.cartao {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px;
  background: var(--nude);
  border-radius: var(--raio-cartao);
}
@media (min-width: 768px) { .cartao { padding: 32px; } }
.cartao__nome { font-family: var(--fonte-texto); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.cartao__texto { font-size: 1rem; line-height: 1.5; }
.cartao__preco { margin-top: auto; padding-top: 12px; }
.cartao__preco .rotulo { display: block; margin-bottom: 8px; }
.cartao__pe { margin-top: 16px; }

.preco {                                     /* número em Vinho, "R$" menor */
  font-family: var(--fonte-texto);
  font-size: var(--t-preco);
  font-weight: 700;
  line-height: 1;
  color: var(--vinho);
  white-space: nowrap;
}
.preco small { font-size: .62em; font-weight: 600; margin-right: .2em; }
.preco__mais { font-size: .75em; font-weight: 600; margin-right: .15em; }
.preco--grande { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.5rem); }
.preco__nota {                               /* linha pequena embaixo do preço */
  display: block;
  margin-top: 8px;
  font-size: var(--t-pequeno);
  font-weight: 500;
  line-height: 1.4;
  color: var(--cacau);
  white-space: normal;
}

/* --------------------------------------------------------------------------
   8. Tabela de preços de uma coluna: nome à esquerda, preço à direita
   -------------------------------------------------------------------------- */
.tabela__linha {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--poeira);
}
.tabela__info { flex: 1 1 240px; min-width: 0; }
.tabela__nome { font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.tabela__descricao { margin-top: 4px; font-size: var(--t-pequeno); line-height: 1.45; }
.tabela__valor { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* --------------------------------------------------------------------------
   9. Fotos: placeholder "foto em breve" e a foto real, mesmos cantos
   -------------------------------------------------------------------------- */
.foto, .foto-em-breve {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-foto);
  overflow: hidden;
}
.foto { object-fit: cover; }
.foto--quadrada, .foto-em-breve--quadrada { aspect-ratio: 1; }
.foto--3x4, .foto-em-breve--3x4 { aspect-ratio: 3 / 4; }
.foto--4x5, .foto-em-breve--4x5 { aspect-ratio: 4 / 5; }
.foto-em-breve {
  position: relative;
  display: grid; place-items: center;
  background: var(--nude);
}
.foto-em-breve::before {                     /* monograma a 15% */
  content: "";
  position: absolute; inset: 0;
  background: url("../img/logo-monograma-320.png") center / 46% auto no-repeat;
  opacity: .15;
}
.foto-em-breve::after {
  content: "foto em breve";
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--vinho);                       /* Vinho: Cobre em 13 px não passa no contraste AA */
}

/* --------------------------------------------------------------------------
   10. Hero: texto + foto com o galho de cerejeira atrás
   -------------------------------------------------------------------------- */
.hero { padding-top: 32px; padding-bottom: calc(var(--secao) / 2); }
.hero__grade { display: grid; gap: 40px; align-items: center; }
.hero__texto .apoio { margin-top: 24px; max-width: 34rem; }
.hero__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__botoes .botao { flex: 1 1 200px; }
.hero__foto { position: relative; width: 100%; max-width: 440px; margin-inline: auto; padding-top: 30%; }  /* respiro: o galho pintado (72% de largura) fica quase todo acima da foto */
.hero__foto .foto-em-breve, .hero__foto .foto { position: relative; z-index: 1; }
.galho {                                     /* o único galho da página: o galho pintado da logo (webp com transparência) */
  position: absolute; z-index: 0;
  top: 0; right: -10%;                      /* começa abaixo do cabeçalho e cobre só a ponta de cima da foto */
  width: 72%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 900px) {
  .hero { padding-top: 48px; }
  .hero__grade { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .hero__foto { margin-right: 0; }
  .hero__botoes .botao { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   11. Faixa de provas: rótulo + uma linha, três colunas no computador
   -------------------------------------------------------------------------- */
.provas {
  display: grid; gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--poeira);
  border-bottom: 1px solid var(--poeira);
}
.prova .rotulo { margin-bottom: 8px; }
.prova__texto {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
}
@media (min-width: 768px) {
  .provas { grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 40px 0; }
}

/* --------------------------------------------------------------------------
   12. Galeria, passos e chamada final
   -------------------------------------------------------------------------- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }   /* 9 fotos: 3 x 3 em qualquer tela */
@media (min-width: 768px) {
  .galeria { grid-template-columns: repeat(3, 1fr); }
}

.passos { display: grid; gap: 24px; counter-reset: passo; }
.passo { counter-increment: passo; padding-top: 16px; border-top: 1px solid var(--poeira); }
.passo::before {                             /* 01, 02, 03 em Cormorant */
  content: counter(passo, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--cobre);
}
.passo__titulo { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.passo__texto { margin-top: 8px; font-size: 1rem; line-height: 1.5; }
@media (min-width: 768px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.chamada {
  padding: 48px 24px;
  background: var(--nude);
  border-radius: var(--raio-cartao);
  text-align: center;
}
.chamada h2 { max-width: 18ch; margin-inline: auto; }
.chamada p { max-width: 32rem; margin: 16px auto 0; }
.chamada .acoes { justify-content: center; }
@media (min-width: 768px) { .chamada { padding: 64px 48px; } }

/* --------------------------------------------------------------------------
   13. Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  margin-top: calc(var(--secao) / 2);
  padding: 48px 0 24px;
  background: var(--nude);
  border-top: 1px solid var(--poeira);
}
.rodape__grade { display: grid; gap: 32px; justify-items: center; text-align: center; }
.rodape__marca img { width: 120px; margin-inline: auto; margin-bottom: 12px; }
.rodape__marca p { font-family: var(--fonte-titulo); font-style: italic; font-size: 1.25rem; font-weight: 500; }
.rodape .rotulo { margin-bottom: 8px; }
.rodape__lista a, .rodape__contato a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-weight: 500;
  transition: color 150ms var(--suave);
}
.rodape__lista a:hover, .rodape__contato a:hover { color: var(--vinho); }
.rodape__contato svg { width: 20px; height: 20px; flex: none; }
.rodape__contato p:last-child { margin-top: 8px; font-size: var(--t-pequeno); }
.rodape__base {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--poeira);
  font-size: var(--t-pequeno);
  text-align: center;
}
@media (min-width: 768px) {
  .rodape__grade { grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; justify-items: start; text-align: left; }
  .rodape__marca img { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   14. Botão flutuante de WhatsApp
   -------------------------------------------------------------------------- */
.zap-flutuante {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--vinho);
  color: var(--branco);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(74, 46, 40, .24);
  transition: transform 200ms var(--suave), opacity 200ms var(--suave), background-color 150ms var(--suave);
  -webkit-tap-highlight-color: transparent;
}
/* com JavaScript ele só aparece depois de rolar 400 px (a primeira tela já tem o botão do hero) */
.js .zap-flutuante { opacity: 0; transform: scale(.8); pointer-events: none; }
.js .zap-flutuante--visivel { opacity: 1; transform: none; pointer-events: auto; }
.zap-flutuante:hover { background: var(--vinho-escuro); }
.zap-flutuante:active { transform: scale(.92); transition-duration: 100ms; }
.zap-flutuante svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 767px) {
  .sem-flutuante .zap-flutuante { display: none; }   /* serviços no celular: cada linha já tem o seu Agendar */
}

/* --------------------------------------------------------------------------
   15. Aparição suave ao rolar (só transform e opacity; precisa do site.js)
   -------------------------------------------------------------------------- */
.js .aparece {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 300ms var(--suave), transform 300ms var(--suave);
  transition-delay: var(--atraso, 0ms);
}
.js .aparece.visivel { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. Preferências do sistema: menos movimento, menos transparência, mais contraste
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece { transform: none; transition: opacity 150ms ease; }
  .menu-celular { transform: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
  .cabecalho__menu-botao span, .cabecalho, .botao, .zap-flutuante,
  .cabecalho__lista a, .rodape__lista a, .rodape__contato a { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .cabecalho {
    background: var(--perola);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .cabecalho { background: var(--perola); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cabecalho--rolou, .menu-celular { border-bottom-color: var(--cacau); }
  .botao--secundario { color: var(--vinho); border-color: var(--vinho); border-width: 2px; }
  .cartao, .chamada { border: 1px solid var(--cacau); }
  .provas, .tabela__linha, .passo, .rodape, .rodape__base { border-color: var(--cacau); }
}

/* --------------------------------------------------------------------------
   17. Impressão: só o conteúdo, em preto sobre branco
   -------------------------------------------------------------------------- */
@media print {
  body { padding-top: 0; background: #fff; color: #000; }
  .cabecalho, .menu-celular, .zap-flutuante, .galho, .foto-em-breve, .galeria { display: none; }
  .js .aparece { opacity: 1; transform: none; }
  .cartao, .chamada, .rodape, .secao--nude { background: none; }
  .cartao, .chamada { border: 1px solid #999; }
  .botao { border: 1px solid #000; background: none; color: #000; }
  h1, h2, .preco, .passo::before { color: #000; }
}

/* --------------------------------------------------------------------------
   18. servicos.html: nota embaixo da tabela (o topo usa .topo-pagina, seção 20)
   -------------------------------------------------------------------------- */
.tabela__nota { margin-top: 16px; }

/* --------------------------------------------------------------------------
   19. Páginas sobre, contato e 404 (só o que as classes acima não cobrem)
   -------------------------------------------------------------------------- */
/* a lista de passos é um <ol>: tira a numeração do navegador (o 01, 02, 03 vem do .passo::before) */
.passos { list-style: none; margin: 0; padding: 0; }

/* sobre: retrato grande com o galho atrás, como no hero */
.sobre__foto { position: relative; width: 100%; max-width: 440px; margin-inline: auto; padding-top: 30%; }
.sobre__foto .foto-em-breve, .sobre__foto .foto { position: relative; z-index: 1; }
.sobre__texto .apoio { margin-top: 20px; max-width: 32rem; }
.sobre__texto .prosa { margin-top: 24px; }
@media (max-width: 899px) {                  /* celular: título primeiro, retrato menor embaixo */
  .sobre__texto { order: 1; }
  .sobre__foto { order: 2; max-width: 280px; }
}
@media (min-width: 900px) { .sobre__foto { margin-inline: 0; } }

/* contato: cartão com ícone redondo e o número/@ em destaque */
.contato__icone {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--perola);
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.contato__icone svg { width: 26px; height: 26px; }
.contato__destaque {                          /* número do WhatsApp e o @ do Instagram */
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vinho);
  overflow-wrap: anywhere;
}
.contato__nota { margin-top: 24px; text-align: center; font-size: var(--t-pequeno); }

/* 404: bloco centralizado, com o galho num canto */
.erro {
  position: relative;
  min-height: calc(100vh - var(--altura-cabecalho) - 240px);
  display: grid; place-items: center;
  text-align: center;
  padding-block: 48px;
}
.erro__conteudo { position: relative; z-index: 1; max-width: 36rem; }
.erro .apoio { margin-top: 20px; }
.erro .acoes { justify-content: center; }
.erro .galho { display: none; }                      /* no celular o galho cobriria o título */
@media (min-width: 900px) { .erro .galho { display: block; top: -40px; right: -6%; width: 520px; height: auto; } }

/* --------------------------------------------------------------------------
   20. pacotes.html e domicilio.html: topo de página interna e cartão de pacote
   -------------------------------------------------------------------------- */
.topo-pagina { padding-top: 32px; }
.topo-pagina .container { position: relative; }
.topo-pagina .secao__cabecalho { position: relative; z-index: 1; margin-bottom: 0; }
.topo-pagina .secao__cabecalho .prosa { margin-top: 24px; }
.topo-pagina .galho { display: none; }               /* no celular o galho cobriria o título */
@media (min-width: 900px) {
  .topo-pagina { padding-top: 48px; }
  .topo-pagina .galho { display: block; top: -60px; right: -8%; width: 520px; height: auto; }
}

/* cartão de pacote: lista do que inclui, filete antes do preço grande, botão no pé */
.pacote__itens { margin-top: 4px; }
.pacote__itens li {
  position: relative;
  padding: 4px 0 4px 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.pacote__itens li::before {                  /* ponto Rosa sakura, detalhe pequeno */
  content: "";
  position: absolute; left: 0; top: .8em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sakura);
}
.pacote .cartao__preco { padding-top: 16px; border-top: 1px solid var(--poeira); }
.pacote .cartao__pe .botao { width: auto; min-width: 200px; }   /* não vai até a borda: o flutuante não cobre a ponta */
.pagamento .cartao .rotulo { margin-bottom: 4px; }


/* --------------------------------------------------------------------------
   21. Trilha de cerejeira: a cerejeira acompanha o site inteiro. Cada seção
   pode receber um ramo num canto (data-ramo) e pétalas soltas (data-petalas),
   sempre ATRÁS do conteúdo e saindo um pouco da borda, como se a árvore
   fosse desenhando ao longo da rolagem. Decisão do Felipe em 04/10/2026.
   -------------------------------------------------------------------------- */
.secao { position: relative; }
.secao > * { position: relative; z-index: 1; }          /* o conteúdo fica na frente dos ramos */
.secao[data-ramo]::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(220px, 30vw, 420px); aspect-ratio: 1100 / 429;
  background: url("../img/cerejeira-horizontal-a.webp") no-repeat center / contain;
}
.secao[data-ramo-tamanho="p"]::before { width: clamp(170px, 22vw, 300px); }
.secao[data-ramo="direita"]::before        { top: 0; right: -6%; transform: translateY(-60%) scaleX(-1); }            /* base na borda direita, flores para dentro */
.secao[data-ramo="esquerda"]::before       { top: 0; left: -6%; transform: translateY(-60%); }                        /* base na borda esquerda, flores para dentro */
.secao[data-ramo="direita-baixo"]::before  { bottom: 0; right: -9%; transform: translateY(55%); aspect-ratio: 1000 / 737; }   /* galho que cai do canto direito (pintura b) */
.secao[data-ramo="esquerda-baixo"]::before { bottom: 0; left: -9%; transform: translateY(55%) scaleX(-1); aspect-ratio: 1000 / 737; }
.secao[data-petalas]::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 30px; aspect-ratio: 1; background: url("../img/cerejeira-petala.webp") no-repeat center / contain;
  opacity: .9; animation: petala-flutua 7s ease-in-out infinite;
}
.secao[data-petalas="esquerda"]::after { top: 14%; left: 6%; }
.secao[data-petalas="direita"]::after  { top: 22%; right: 8%; animation-delay: -3s; }
@keyframes petala-flutua {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(10px) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { .secao[data-petalas]::after { animation: none; } }
@media print { .secao[data-ramo]::before, .secao[data-petalas]::after { display: none; } }


/* --------------------------------------------------------------------------
   22. Revisão de 04/10/2026 (noite): cerejeira vetorial, prova no hero,
   PIX nos pacotes, passos em três colunas e dúvidas rápidas.
   -------------------------------------------------------------------------- */

/* cerejeira vetorial do hero: sobe pela lateral direita, atrás do conteúdo */
.hero { position: relative; overflow: visible; }
.hero > .container { position: relative; z-index: 1; }
.cerejeira-hero {                           /* só no computador: corredor próprio à direita da foto (560 x 1500) */
  display: none;
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: 0; bottom: -40px;
  width: clamp(220px, 21vw, 290px); height: auto;
}
.galho--hero-celular { display: block; top: -24px; right: -22%; width: 84%; height: auto; }   /* celular: galho que cai, no respiro acima da foto */
@media (max-width: 899px) { .hero__foto { padding-top: 150px; } }
@media (min-width: 900px) {
  .cerejeira-hero { display: block; }
  .galho--hero-celular { display: none; }
  .hero > .container { padding-right: 270px; }      /* o corredor da cerejeira */
  .hero__foto { padding-top: 0; margin-right: 0; }
}

/* a linha de prova embaixo dos botões do hero */
.hero__prova { margin-top: 20px; font-size: var(--t-pequeno, .875rem); letter-spacing: .01em; color: var(--cacau); opacity: .85; }

/* ramos nas costuras: agora o desenho vetorial horizontal, base na borda, flores para dentro */
.secao[data-ramo]::before {
  background-image: url("../img/cerejeira-horizontal-a.webp");
  width: clamp(220px, 30vw, 420px); aspect-ratio: 1100 / 429;
}
.secao[data-ramo-tamanho="p"]::before { width: clamp(170px, 22vw, 300px); }
.secao[data-petalas]::after { background-image: url("../img/cerejeira-petala.webp"); width: 30px; aspect-ratio: 62 / 57; }
.secao[data-ramo$="-baixo"]::before { background-image: url("../img/cerejeira-horizontal-b.webp"); }   /* variante com as flores pendendo */
@media (max-width: 899px) {                 /* celular: ramo mais dentro da seção nova (não encosta no botão de cima) e tronco grosso fora da tela */
  .secao[data-ramo="esquerda"]::before { transform: translateY(-42%); }
  .secao[data-ramo="direita"]::before  { transform: translateY(-42%) scaleX(-1); }
  .secao[data-ramo="direita-baixo"]::before  { right: -16%; }
  .secao[data-ramo="esquerda-baixo"]::before { left: -16%; }
}

/* preço do PIX dentro do cartão de pacote */
.cartao__pix { display: block; margin-top: 6px; font-size: .875rem; color: var(--cacau); opacity: .85; }

/* passos em três colunas no computador */
@media (min-width: 900px) { .passos--3 { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* dúvidas rápidas: sanfona simples, sem ícone pesado */
.duvidas { display: grid; gap: 0; max-width: 760px; }
.duvida { border-top: 1px solid var(--poeira); }
.duvida:last-child { border-bottom: 1px solid var(--poeira); }
.duvida summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-family: var(--fonte-texto); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--cacau);
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after {
  content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--cobre); border-bottom: 1.5px solid var(--cobre);
  transform: rotate(45deg); transition: transform 200ms cubic-bezier(.2,.8,.2,1); margin-right: 4px;
}
.duvida[open] summary::after { transform: rotate(225deg); }
.duvida summary:focus-visible { outline: 2px solid var(--cobre); outline-offset: 4px; border-radius: 4px; }
.duvida p { padding: 0 0 20px; max-width: 60ch; font-size: 1rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .duvida summary::after { transition: none; } }

/* sobre: o ramo horizontal fica acima do retrato, inteiro e abaixo do cabeçalho */
.sobre__foto { padding-top: 0; margin-top: 104px; }
.galho--sobre { top: -150px; right: -22%; width: 92%; height: auto; }
@media (max-width: 899px) { .sobre__foto { margin-top: 72px; } .galho--sobre { top: -90px; right: -24%; width: 90%; } }

/* faixa de três fotos nas páginas internas */
.faixa-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (min-width: 900px) { .faixa-fotos { gap: 16px; } }

/* carrossel de fotos do hero: as fotos se revezam sozinhas, com pontinhos para escolher */
.carrossel { position: relative; z-index: 1; overflow: hidden; border-radius: 16px; background: #F4E6DE; }
.carrossel__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; }
.carrossel__foto.ativa { opacity: 1; }
.carrossel__pontos { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.carrossel__pontos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(251,246,241,.6); cursor: pointer; transition: width 300ms ease, background 300ms ease; }
.carrossel__pontos button[aria-current="true"] { width: 22px; background: #FBF6F1; }
.carrossel__pontos button:focus-visible { outline: 2px solid #FBF6F1; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .carrossel__foto, .carrossel__pontos button { transition: none; } }

/* carrossel, revisão de 05/10: a foto aparece INTEIRA, centralizada, sem zoom;
   o espaço que sobra é preenchido pela própria foto, desfocada, ao fundo */
.carrossel__foto { object-fit: contain; }
.carrossel__fundo { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) saturate(1.05); opacity: 0; transition: opacity 900ms ease; transform: scale(1.08); }
.carrossel__fundo.ativa { opacity: .85; }

.carrossel.foto--4x5 { aspect-ratio: 2 / 3; }

/* setas do carrossel */
.carrossel__seta { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: rgba(251,246,241,.85); color: #7A3A30; font-size: 28px; line-height: 1; padding: 0 0 3px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(74,46,40,.18); transition: background 200ms ease; }
.carrossel__seta:hover { background: #FBF6F1; }
.carrossel__seta:focus-visible { outline: 2px solid #7A3A30; outline-offset: 2px; }
.carrossel__seta--esq { left: 10px; }
.carrossel__seta--dir { right: 10px; }