/* ==========================================================================
   Dayla Rocha Cerimonial — styles.css
   Escrito à mão. Cores e fontes usam var(--c-*) / var(--f-*) para responder
   ao tema injetado pelo PainelSites (ver docs/PADRAO-DE-PROJETO.md, seção 4).
   ========================================================================== */

/* ---- Fontes auto-hospedadas ---- */
@font-face {
  font-family: 'EB Garamond';
  src: url('assets/fonts/eb-garamond-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('assets/fonts/eb-garamond-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('assets/fonts/eb-garamond-bold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-semibold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* ---- Tokens de identidade (o painel injeta um bloco equivalente em runtime) ---- */
:root {
  --c-marfim: #F5F1EA;
  --c-marfim-rgb: 245 241 234;
  --c-offwhite: #FAF8F4;
  --c-offwhite-rgb: 250 248 244;
  --c-taupe: #B5A99B;
  --c-taupe-rgb: 181 169 155;
  --c-marromCafe: #352D29;
  --c-marromCafe-rgb: 53 45 41;
  --c-pretoSuave: #181716;
  --c-pretoSuave-rgb: 24 23 22;
  --c-destaque: #B39A6A;
  --c-destaque-rgb: 179 154 106;

  /* Aliases: o PainelSites (esquema/tema.json e a prévia gerada pelo programa)
     usa as chaves marromCafe/pretoSuave. O CSS abaixo consome --c-marrom/--c-preto
     historicamente; como custom properties são resolvidas em tempo de uso, estes
     aliases herdam automaticamente qualquer edição de cor feita no painel
     (auditoria 20/08/2026, item P1 #5). Não editar --c-marrom/--c-preto diretamente. */
  --c-marrom: var(--c-marromCafe);
  --c-marrom-rgb: var(--c-marromCafe-rgb);
  --c-preto: var(--c-pretoSuave);
  --c-preto-rgb: var(--c-pretoSuave-rgb);

  --c-fundo: var(--c-offwhite);
  --c-fundo-alt: var(--c-marfim);
  --c-fundo-escuro: var(--c-marrom);
  --c-texto: var(--c-preto);
  --c-texto-suave: rgb(var(--c-preto-rgb) / 0.68);
  --c-texto-claro: var(--c-offwhite);
  --c-texto-claro-suave: rgb(var(--c-offwhite-rgb) / 0.72);
  --c-borda: rgb(var(--c-preto-rgb) / 0.12);
  --c-borda-clara: rgb(var(--c-offwhite-rgb) / 0.22);

  --f-titulos: 'EB Garamond', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --f-corpo: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --largura-max: 1180px;
  --espaco-secao: clamp(4rem, 3rem + 5vw, 8rem);
  --raio: 2px;
  --duracao: 320ms;
  --facil: cubic-bezier(.4,0,.2,1);
}

/* ---- Reset enxuto ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Rodada 2026-08-22: o cabeçalho é fixed (~80-88px de altura) e as âncoras
   do menu (#sobre, #servicos etc.) não tinham compensação — ao navegar
   pelo menu, o título da seção ficava parcialmente coberto pelo
   cabeçalho. scroll-margin-top garante respiro suficiente em todas as
   larguras testadas (375–1920px). */
#sobre, #servicos, #diferenciais, #depoimentos, #contato, #manifesto {
  scroll-margin-top: 6rem;
}
body {
  margin: 0;
  font-family: var(--f-corpo);
  color: var(--c-texto);
  background: var(--c-fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
input, select, textarea { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Revelação editorial das fotografias principais ao entrar na tela
   (auditoria de direção de arte 20/08/2026, Movimento). A classe
   ".js-revela-ativo" só é adicionada por script.js, e apenas quando
   prefers-reduced-motion NÃO está ativo — progressive enhancement: sem
   JS, ou com "menos movimento" pedido pelo usuário, as fotos já nascem
   totalmente visíveis (nenhum estado inicial "escondido" é aplicado). */
html.js-revela-ativo [data-revelar] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--facil), transform 900ms var(--facil);
}
html.js-revela-ativo [data-revelar].revelado {
  opacity: 1;
  transform: none;
}

:focus-visible {
  outline: 2px solid var(--c-destaque);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.secao { padding-block: var(--espaco-secao); }
.secao--escura { background: var(--c-fundo-escuro); color: var(--c-texto-claro); }
.secao--alt { background: var(--c-fundo-alt); }
.secao--preta { background: var(--c-preto); color: var(--c-texto-claro); }

.eyebrow {
  display: inline-block;
  font-family: var(--f-corpo);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-destaque);
  margin-bottom: 1rem;
}

h1, h2, h3 { font-family: var(--f-titulos); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 1.9rem + 2.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 1.55rem + 1.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem); font-weight: 500; }

.destaque-italic { font-style: italic; color: var(--c-destaque); }

.texto-corpo { font-size: 1.0625rem; line-height: 1.75; color: var(--c-texto-suave); }
.secao--escura .texto-corpo,
.secao--preta .texto-corpo { color: var(--c-texto-claro-suave); }
.texto-corpo + .texto-corpo { margin-top: 1.1em; }

/* Contraste em seções escuras (auditoria 20/08/2026, item P0 #1): as regras
   genéricas ".secao--escura .texto-corpo" acima não alcançam estes seletores
   específicos, que ficavam com var(--c-texto)/var(--c-texto-suave) — cor de
   texto escura sobre fundo escuro (~1,33:1). Corrigido para as variantes claras. */
.secao--escura .sobre-lead,
.secao--escura .faq-pergunta {
  color: var(--c-texto-claro);
}
.secao--escura .sobre-credenciais,
.secao--escura .objecao-lista li,
.secao--escura .faq-resposta p {
  color: var(--c-texto-claro-suave);
}
.secao--escura .sobre-credenciais,
.secao--escura .faq-lista,
.secao--escura .faq-item,
.secao--escura .objecao-fechamento {
  border-color: var(--c-borda-clara);
}

.subtitulo-serif {
  font-family: var(--f-titulos);
  font-style: italic;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  color: var(--c-destaque);
}

/* ---- Botões ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--raio);
  transition: background var(--duracao) var(--facil), color var(--duracao) var(--facil), border-color var(--duracao) var(--facil), transform var(--duracao) var(--facil);
  white-space: normal;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn-primario {
  background: var(--c-destaque);
  color: var(--c-preto);
  border-color: var(--c-destaque);
}
.btn-primario:hover { background: transparent; color: var(--c-destaque); border-color: var(--c-destaque); }
.secao--escura .btn-primario:hover,
.secao--preta .btn-primario:hover { color: var(--c-destaque); }
.btn-secundario {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
/* Hover (auditoria 20/08/2026, item P1 #7): o botão é reaproveitado em dois
   contextos com currentColor invertido — claro sobre o hero (fundo escuro) e
   escuro na galeria (".secao--alt", fundo claro). O hover usa "background:
   currentColor" (já se adapta a cada contexto), mas o texto do <span> interno
   ficava sempre fixo em --c-fundo-escuro: correto no hero, ilegível na
   galeria (texto escuro sobre fundo que também fica escuro). Agora o
   contexto claro tem uma regra própria. */
.btn-secundario:hover { background: currentColor; }
.btn-secundario:hover span { color: var(--c-fundo-escuro); }
.secao:not(.secao--escura):not(.secao--preta) .btn-secundario:hover span {
  color: var(--c-texto-claro);
}
.btn-secundario span { transition: color var(--duracao) var(--facil); }
.btn-fantasma {
  background: transparent;
  color: var(--c-destaque);
  border-color: rgb(var(--c-destaque-rgb) / 0.5);
  padding: 0.8em 1.8em;
}
.btn-fantasma:hover { border-color: var(--c-destaque); background: rgb(var(--c-destaque-rgb) / 0.08); }
.btn-bloco { width: 100%; }

/* ==========================================================================
   01 — HEADER
   ========================================================================== */
.cabecalho {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: 1.4rem;
  transition: background var(--duracao) var(--facil), padding var(--duracao) var(--facil), box-shadow var(--duracao) var(--facil), backdrop-filter var(--duracao) var(--facil);
}
.cabecalho .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cabecalho--rolado {
  padding-block: 0.85rem;
  background: rgb(var(--c-offwhite-rgb) / 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--c-borda);
}
.cabecalho--rolado .marca-wordmark,
.cabecalho--rolado .menu-desktop a { color: var(--c-preto); }
.cabecalho--rolado .menu-toggle span { background: var(--c-preto); }

.marca { display: flex; flex-direction: column; line-height: 1; gap: 0.2rem; }
.marca-wordmark {
  font-family: var(--f-titulos);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--c-texto-claro);
  transition: color var(--duracao) var(--facil);
}
body.pagina-clara .marca-wordmark,
.cabecalho--rolado .marca-wordmark { color: var(--c-preto); }
.marca-sufixo {
  font-family: var(--f-corpo);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-destaque);
}

.menu-desktop { display: none; }
.menu-desktop a {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-texto-claro);
  padding-block: 0.3rem;
  transition: color var(--duracao) var(--facil);
}
.menu-desktop a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--c-destaque);
  transition: right var(--duracao) var(--facil);
}
.menu-desktop a:hover { color: var(--c-destaque); }
.menu-desktop a:hover::after { right: 0; }

.cabecalho-acoes { display: flex; align-items: center; gap: 1rem; }
.cabecalho-acoes .btn { display: none; }

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  padding: 0;
}

/* Breakpoint do cabeçalho (auditoria 20/08/2026, item P1 #4): a 900px o menu
   desktop (6 links) + CTA "Fale Conosco" não cabem — o CTA extrapolava o
   contêiner. Consolidado num único media query em 1024px (regra única,
   evitando duplicidade/conflito entre breakpoints). Menu móvel permanece
   ativo até 1024px. */
@media (min-width: 1024px) {
  .menu-desktop {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 2vw, 2.4rem);
  }
  .cabecalho-acoes .btn { display: inline-flex; }
  .menu-toggle { display: none; }
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--c-texto-claro);
  transition: background var(--duracao) var(--facil), transform var(--duracao) var(--facil), opacity var(--duracao) var(--facil);
}

.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--c-marrom);
  color: var(--c-texto-claro);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 6rem 2rem 3rem;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duracao) var(--facil), opacity var(--duracao) var(--facil), visibility 0s var(--duracao);
}
.menu-movel.aberto {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--duracao) var(--facil), opacity var(--duracao) var(--facil);
}
.menu-movel a { font-family: var(--f-titulos); font-size: 1.9rem; }
.menu-movel .btn { align-self: flex-start; margin-top: 1rem; }
body.menu-movel-aberto,
body.lightbox-aberto { overflow: hidden; }

/* ==========================================================================
   02 — HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--c-texto-claro);
  overflow: hidden;
}
/* Hero em telas baixas (auditoria 20/08/2026, item P2 #14): com min-height:
   100svh + overflow:hidden + conteúdo alinhado embaixo, em telas de pouca
   altura (celular deitado) ou com zoom de texto grande, a parte de cima do
   H1 podia ficar cortada. A imagem de fundo é absolute+inset:0 e continua
   cobrindo o hero mesmo que ele cresça além de 100svh — então, nesses casos,
   deixamos o hero crescer (overflow visível) em vez de cortar o conteúdo, e
   escondemos o indicador de rolagem para não sobrepor o texto/rodapé do hero. */
@media (max-height: 700px) {
  .hero { overflow: visible; }
  .hero-scroll { display: none; }
}
.hero-midia { position: absolute; inset: 0; z-index: 0; }
/* Enquadramento do hero (reauditoria geral 22/08/2026, item P1 #1): a
   debutante está posicionada à direita da foto original. Em telas estreitas,
   object-fit:cover com posição horizontal central cortava boa parte dela,
   sobrando sobretudo piscina/luzes no enquadramento. Abaixo de 720px o
   recorte agora favorece o lado direito (onde está a debutante); a partir
   de 720px volta ao enquadramento centralizado já validado no desktop. */
.hero-midia img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 18%; }
@media (min-width: 720px) {
  .hero-midia img { object-position: center 20%; }
}
.hero-midia::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(24 23 22 / 0.35) 0%, rgb(24 23 22 / 0.55) 55%, rgb(24 23 22 / 0.88) 100%);
}
/* Coreografia de entrada do hero (auditoria de direção de arte 20/08/2026,
   Movimento): escala muito leve da imagem de fundo (1,03 → 1) e entrada
   curta e escalonada do título/textos/botões/rodapé. São keyframes puros
   em CSS — sem dependência de JS — então a regra global de
   prefers-reduced-motion já definida acima (que zera animation-duration
   para todos os elementos) neutraliza esta animação automaticamente para
   quem pede menos movimento, sem nunca deixar o conteúdo escondido. */
@keyframes hero-zoom-suave { from { transform: scale(1.03); } to { transform: scale(1); } }
@keyframes hero-surge { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hero-midia img { animation: hero-zoom-suave 1.8s var(--facil) both; }
.hero-titulo,
.hero-texto,
.hero-ctas,
.hero-rodape {
  animation: hero-surge 700ms var(--facil) both;
}
.hero-titulo { animation-delay: 80ms; }
.hero-texto:not(.hero-complemento) { animation-delay: 220ms; }
.hero-complemento { animation-delay: 340ms; }
.hero-ctas { animation-delay: 460ms; }
.hero-rodape { animation-delay: 560ms; }
.hero-conteudo { position: relative; z-index: 1; padding-block: 8rem 3.5rem; width: 100%; }
/* Grade do hero (auditoria de direção de arte 20/08/2026, item P0.1): o
   `.container` do hero usava max-width:760px + margin-inline:0, anulando a
   centralização do contêiner global e fazendo o texto começar bem à
   esquerda da linha do logotipo no cabeçalho. Agora `.hero-conteudo
   .container` herda a mesma largura/centralização de `.container` (usada
   pelo cabeçalho e pelas demais seções) e o bloco de texto interno
   (`.hero-bloco`) é quem limita a largura de leitura confortável,
   mantendo a linha esquerda do hero alinhada à do logotipo em desktop. */
.hero-bloco { max-width: 720px; }
/* Escala tipográfica do hero (auditoria de direção de arte 20/08/2026,
   Tipografia): título girava em torno de 64px mesmo em telas muito largas
   (herdava o clamp genérico do h1). Escala própria eleva o título a uma
   faixa óptica de ~72–80px em 1366–1920px, com entrelinha mais curta e
   editorial (1.05), sem prejudicar a leitura — a quebra em duas linhas
   continua controlada manualmente pelos spans .linha (nenhuma alterada). */
.hero-titulo {
  margin-bottom: 1.5rem;
  font-size: clamp(2.4rem, 1.7rem + 3.2vw, 5rem);
  line-height: 1.05;
}
.hero-titulo .linha { display: block; }
.hero-texto { font-size: 1.0625rem; line-height: 1.7; color: var(--c-texto-claro-suave); max-width: 46ch; }
.hero-complemento { margin-top: 1rem; max-width: 48ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
/* Overflow em 320px (reauditoria independente 20/08/2026, item P2): o CTA do
   hero (texto + padding horizontal) chegava a ~328px de largura própria em
   telas de 320px. Abaixo de 360px os CTAs do hero e do menu móvel passam a
   ocupar 100% da largura disponível, com padding lateral reduzido. */
@media (max-width: 359px) {
  .hero-ctas .btn,
  .menu-movel .btn {
    width: 100%;
    padding-inline: 1rem;
  }
}
.hero-rodape {
  margin-top: 3rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-texto-claro-suave);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Espaço reservado para o botão flutuante de WhatsApp fixo no canto
     inferior direito (auditoria 20/08/2026, item P2 #13): confirmado por
     medição real que o texto colidia com o botão em telas estreitas. */
  max-width: calc(100% - 4.5rem);
}
.hero-rodape::before { content: ''; width: 28px; height: 1px; background: var(--c-destaque); }
.hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--c-texto-claro-suave);
  animation: flutuar 2.4s ease-in-out infinite;
}
@keyframes flutuar { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }

/* ---- Manifesto (dentro do hero, seção 03) ---- */
.manifesto { text-align: center; }
.manifesto .container { max-width: 820px; }
.manifesto-titulo { margin-bottom: var(--espaco-secao); }
.manifesto-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
  margin-block: 3rem;
}
@media (min-width: 720px) { .manifesto-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .manifesto-grade { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; } }
.manifesto-item { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.manifesto-item .icone { width: 34px; height: 34px; color: var(--c-destaque); }
.manifesto-item span { font-size: 0.9rem; color: var(--c-texto-suave); }
.manifesto-transicao { margin-top: 3rem; max-width: 620px; margin-inline: auto; }
.manifesto-destaque {
  margin-top: 1.75rem;
  font-family: var(--f-titulos);
  font-style: italic;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  color: var(--c-destaque);
}

/* ==========================================================================
   04 — SOBRE
   ========================================================================== */
.sobre-grade {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .sobre-grade { grid-template-columns: 1fr 1fr; gap: 5vw; }
  .sobre-grade.inverso { direction: rtl; }
  .sobre-grade.inverso > * { direction: ltr; }
}
.sobre-foto { position: relative; background: var(--c-marfim); }
.sobre-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sobre-foto::before {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid rgb(var(--c-destaque-rgb) / 0.55);
  z-index: -1;
}
.sobre-texto h2 { margin-bottom: 0.5rem; }
.sobre-texto .subtitulo-serif { display: block; margin-bottom: 1.5rem; }
.sobre-lead { font-family: var(--f-titulos); font-size: 1.2rem; font-style: italic; margin-bottom: 1.25rem; color: var(--c-texto); }
.sobre-credenciais {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-borda);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--c-texto-suave);
}

.faixa-reciprocidade {
  display: grid;
  gap: 1.75rem;
  text-align: center;
  padding-block: 3.5rem;
}
@media (min-width: 720px) { .faixa-reciprocidade { grid-template-columns: repeat(3, 1fr); } }
.faixa-reciprocidade p { font-family: var(--f-titulos); font-size: 1.15rem; }
.faixa-reciprocidade strong { color: var(--c-destaque); font-weight: 500; }

/* ==========================================================================
   05 — SERVIÇOS
   ========================================================================== */
.servicos-cabecalho { text-align: center; max-width: 700px; margin-inline: auto; margin-bottom: 3.5rem; }
.servico {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-block: 3rem;
}
.servico + .servico { border-top: 1px solid var(--c-borda); }
@media (min-width: 860px) {
  .servico { grid-template-columns: 1fr 1fr; gap: 5vw; }
  .servico.inverso .servico-foto { order: 2; }
}
/* Vazios/layout shift em imagens lazy (auditoria 20/08/2026, item P0 #3): o
   contêiner passa a reservar a proporção e uma cor de fundo antes da imagem
   carregar; a imagem preenche 100%/100% do contêiner via object-fit. */
.servico-foto {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--c-marfim);
}
.servico-foto img,
.sobre-foto img,
.cta-final-midia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Rodada 2026-08-22 — object-position individual: em debutante-01.webp a
   debutante está posicionada bem à esquerda do enquadramento original; o
   corte 5:4 do card de serviço remove parte lateral da imagem, então
   deslocamos o foco para a esquerda para preservar a assunto principal
   por completo. Demais fotos desta rodada já se aproximam o bastante do
   enquadramento do contêiner e permanecem no centro padrão. */
.servico-foto img[src*="debutante-01"] { object-position: 15% center; }
/* Numeração decorativa "01/02/03" removida dos serviços (auditoria de
   direção de arte 20/08/2026, Tipografia item 7): os três serviços não são
   etapas de uma sequência (diferente da seção "processo", que mantém a
   numeração 01-04 por representar uma ordem real). A regra .servico-numero
   não era um campo data-p-* — nenhum conteúdo editável foi afetado. */
.servico-texto h3 { margin-bottom: 1rem; }
.servico-poema { font-family: var(--f-titulos); font-style: italic; font-size: 1.05rem; line-height: 1.7; color: var(--c-texto-suave); margin-bottom: 1.25rem; }
.servico-texto .btn { margin-top: 1.5rem; }

/* ==========================================================================
   06 — GALERIA
   ========================================================================== */
.galeria-cabecalho { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.galeria-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.galeria-filtro {
  background: none;
  border: 1px solid var(--c-borda);
  padding: 0.5em 1.1em;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--c-texto-suave);
  transition: background var(--duracao) var(--facil), color var(--duracao) var(--facil), border-color var(--duracao) var(--facil);
}
.galeria-filtro:hover,
.galeria-filtro[aria-pressed="true"] { background: var(--c-preto); color: var(--c-offwhite); border-color: var(--c-preto); }

.galeria-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 160px;
  gap: 0.6rem;
}
@media (min-width: 640px) { .galeria-grade { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; } }
@media (min-width: 960px) { .galeria-grade { grid-auto-rows: 220px; } }
.galeria-item { position: relative; overflow: hidden; cursor: zoom-in; background: var(--c-marfim); }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--facil); }
.galeria-item:hover img { transform: scale(1.06); }
.galeria-item--grande { grid-column: span 2; grid-row: span 2; }
.galeria-legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.9rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.55), transparent);
  opacity: 1;
  transition: opacity var(--duracao) var(--facil);
}
/* Legenda dependente de hover (auditoria 20/08/2026, item P1 #8): em
   touch/mobile não há hover confiável, então a categoria ficava indisponível.
   Agora a legenda é permanente por padrão; o comportamento de hover
   (esconder/mostrar) só se aplica em dispositivos com ponteiro fino e hover
   real (mouse de desktop). */
@media (hover: hover) and (pointer: fine) {
  .galeria-legenda { opacity: 0; }
  .galeria-item:hover .galeria-legenda { opacity: 1; }
}
.galeria-cta { text-align: center; margin-top: 2.5rem; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(24 23 22 / 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--duracao) var(--facil), visibility 0s var(--duracao);
}
.lightbox.aberto { opacity: 1; visibility: visible; transition: opacity var(--duracao) var(--facil); }
.lightbox img { max-width: min(90vw, 1100px); max-height: 82vh; object-fit: contain; }
.lightbox-fechar {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: 1px solid rgb(255 255 255 / 0.4); color: #fff;
  width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem;
}

/* ==========================================================================
   07 — DIFERENCIAIS
   ========================================================================== */
.diferenciais-cabecalho { max-width: 640px; margin-bottom: 3.5rem; }
.diferenciais-pilares {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .diferenciais-pilares { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; } }
.pilar { border-left: 1px solid rgb(var(--c-destaque-rgb) / 0.5); padding-left: 1.25rem; }
.pilar h3 { margin-bottom: 0.5rem; }
.pilar p { font-size: 0.95rem; color: var(--c-texto-suave); line-height: 1.65; }

.diferenciais-fecho { margin-top: 3rem; font-family: var(--f-titulos); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); }

/* Faixa dos quatro atributos (auditoria de direção de arte 20/08/2026, item
   P0.3): banda full-bleed com fundo marrom café — o mesmo par de cores já
   usado em ".secao--escura" (marrom café + off-white), portanto já validado
   pelo checklist de contraste do projeto. A cor do texto (--c-texto-claro-
   suave) sempre foi pensada para fundo escuro; o bug real era não ter fundo
   escuro nenhum aqui — por isso ela permanece igual, agora correta. */
.faixa-pilares-banda {
  background: var(--c-marrom);
  color: var(--c-texto-claro);
  margin-top: 3.5rem;
  padding-block: 3rem;
}
.faixa-pilares {
  display: grid;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 720px) {
  .faixa-pilares { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .faixa-pilares .item {
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
    border-left: 1px solid var(--c-borda-clara);
  }
  .faixa-pilares .item:first-child { border-left: none; padding-inline-start: 0; }
  .faixa-pilares .item:last-child { padding-inline-end: 0; }
}
.faixa-pilares .item span.rotulo {
  display: block;
  font-family: var(--f-corpo);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-destaque);
  margin-bottom: 0.6rem;
}
.faixa-pilares .item p { font-size: 0.9rem; color: var(--c-texto-claro-suave); }

/* ==========================================================================
   08 — COMO FUNCIONA
   ========================================================================== */
.processo-cabecalho { text-align: center; max-width: 700px; margin: 0 auto 3.5rem; }
.processo-passos {
  display: grid;
  gap: 2.5rem;
  counter-reset: passo;
}
@media (min-width: 760px) { .processo-passos { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }
.processo-passo { position: relative; padding-top: 2.5rem; }
.processo-passo::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  font-family: var(--f-titulos);
  font-size: 2.1rem;
  color: var(--c-destaque);
  display: block;
}
.processo-passo h3 { margin-bottom: 0.5rem; font-size: 1.15rem; }
.processo-passo p { font-size: 0.92rem; color: var(--c-texto-suave); }
.processo-final { text-align: center; margin-top: 4rem; }
.processo-final p:first-child { font-size: 0.95rem; color: var(--c-texto-suave); margin-bottom: 0.4rem; }

/* ==========================================================================
   09 — DEPOIMENTOS
   ========================================================================== */
.depoimentos-cabecalho { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.depoimentos-carrossel { position: relative; }
.depoimentos-trilho {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.depoimento {
  scroll-snap-align: start;
  flex: 0 0 min(340px, 82vw);
  background: var(--c-offwhite);
  border: 1px solid var(--c-borda);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.depoimento-estrelas { color: var(--c-destaque); letter-spacing: 0.15em; font-size: 0.9rem; }
.depoimento-texto { font-family: var(--f-titulos); font-style: italic; font-size: 1.05rem; line-height: 1.6; flex-grow: 1; }
.depoimento-autor { display: flex; align-items: center; gap: 0.85rem; }
.depoimento-autor img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.depoimento-autor-nome { font-weight: 600; font-size: 0.9rem; }
.depoimento-autor-evento { font-size: 0.78rem; color: var(--c-texto-suave); }
.depoimentos-nav { display: flex; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.depoimentos-nav button {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-borda); background: none;
  display: flex; align-items: center; justify-content: center;
}
.depoimentos-nav button:hover { border-color: var(--c-destaque); color: var(--c-destaque); }

/* ==========================================================================
   10 — QUEBRA DE OBJEÇÃO
   ========================================================================== */
.objecao { }
.objecao-grade { display: grid; gap: 3rem; }
@media (min-width: 900px) { .objecao-grade { grid-template-columns: 1fr 1fr; gap: 5vw; align-items: start; } }
.objecao-titulo { margin-bottom: 1rem; }
.objecao-pergunta { font-family: var(--f-titulos); font-style: italic; font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem); color: var(--c-destaque); margin: 1.5rem 0; }
.objecao-lista { display: grid; gap: 0.75rem; margin-block: 1.75rem; }
.objecao-lista li { display: flex; align-items: baseline; gap: 0.75rem; font-size: 0.95rem; color: var(--c-texto-suave); }
.objecao-lista li::before { content: '—'; color: var(--c-destaque); flex-shrink: 0; }
.objecao-destaque { font-family: var(--f-titulos); font-size: 1.2rem; margin-top: 1.5rem; }
.objecao-fechamento { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--c-borda); }

.faq-lista { display: grid; gap: 0; border-top: 1px solid var(--c-borda); }
.faq-item { border-bottom: 1px solid var(--c-borda); }
.faq-pergunta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.25rem;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--f-titulos);
  font-size: 1.05rem;
  color: var(--c-texto);
}
.faq-pergunta .sinal { color: var(--c-destaque); transition: transform var(--duracao) var(--facil); flex-shrink: 0; }
.faq-item[data-aberto="true"] .sinal { transform: rotate(45deg); }
.faq-resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duracao) var(--facil);
}
.faq-resposta p { font-size: 0.92rem; color: var(--c-texto-suave); padding-bottom: 1.25rem; line-height: 1.65; max-width: 60ch; }

/* ==========================================================================
   11 — CTA FINAL (cinematográfica)
   ========================================================================== */
.cta-final { position: relative; min-height: 78svh; display: flex; align-items: center; color: var(--c-texto-claro); overflow: hidden; }
.cta-final-midia { position: absolute; inset: 0; z-index: 0; }
.cta-final-midia img { width: 100%; height: 100%; object-fit: cover; }
.cta-final-midia::after { content: ''; position: absolute; inset: 0; background: rgb(24 23 22 / 0.72); }
/* Grade do CTA final (auditoria de direção de arte 20/08/2026, item P0.2):
   faltava width:100% aqui — como item flexível filho de `.cta-final`
   (display:flex), o bloco encolhia até o tamanho do próprio conteúdo e
   ficava colado à esquerda, deixando um vazio inexplicado à direita. Com
   width:100% o `.container` interno volta a poder se centralizar de
   verdade dentro da seção. Mantido centralizado (text-align:center) na
   versão oficial, que ainda usa imagem-placeholder — a composição
   assimétrica (texto no terço esquerdo, sujeito à direita) sugerida pela
   auditoria depende de uma fotografia real e é avaliada na cópia
   DaylaRocha-preview-imagens. */
.cta-final-conteudo { position: relative; z-index: 1; width: 100%; text-align: center; }
.cta-final-conteudo .container { max-width: 760px; }
.cta-final-linha { display: block; }
.cta-final-verbos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em 1.4em;
  margin-block: 2rem;
  font-family: var(--f-titulos);
  font-style: italic;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  color: var(--c-destaque);
}
.cta-final-fechamento { margin: 1.75rem 0 2.5rem; }
.cta-final-negativas { color: var(--c-texto-claro-suave); font-size: 0.95rem; line-height: 1.9; margin-bottom: 1.5rem; }

/* ==========================================================================
   12 — CONTATO
   ========================================================================== */
.contato-grade { display: grid; gap: 3.5rem; }
@media (min-width: 960px) { .contato-grade { grid-template-columns: 0.85fr 1.15fr; gap: 5vw; } }
.contato-info .eyebrow { display: block; }
.contato-lista { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.contato-lista li { display: flex; gap: 1rem; align-items: flex-start; }
.contato-lista .icone { width: 20px; height: 20px; color: var(--c-destaque); flex-shrink: 0; margin-top: 0.2rem; }
.contato-lista a, .contato-lista span.valor { font-size: 0.98rem; }
.contato-lista .rotulo { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-texto-suave); margin-bottom: 0.15rem; }
/* Overflow horizontal em 320px (reauditoria independente 20/08/2026, item P2):
   itens de grid/flex têm min-width:auto por padrão, o que impede encolher
   abaixo do conteúdo — o e-mail longo (texto sem quebra) empurrava
   ".contato-lista li > div", ".contato-info" e ".contato-grade" para além do
   contêiner (37px de overflow medidos em 320px). min-width:0 permite encolher;
   overflow-wrap permite o e-mail quebrar em vez de forçar a largura. */
.contato-grade,
.contato-info,
.formulario,
.contato-lista li > div {
  min-width: 0;
}
.contato-lista a {
  overflow-wrap: anywhere;
}

.formulario {
  background: var(--c-offwhite);
  border: 1px solid var(--c-borda);
  padding: clamp(1.5rem, 2vw, 2.75rem);
}
.campo { margin-bottom: 1.4rem; }
.campo label { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-texto-suave); margin-bottom: 0.5rem; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio);
  color: var(--c-texto);
  transition: border-color var(--duracao) var(--facil);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--c-destaque); }
.campo-linha { display: grid; gap: 1.4rem; }
@media (min-width: 560px) { .campo-linha { grid-template-columns: 1fr 1fr; } }
.formulario-nota { font-size: 0.78rem; color: var(--c-texto-suave); margin-top: 1rem; text-align: center; }
.campo-status { font-size: 0.85rem; margin-top: 0.75rem; min-height: 1.2em; }
.campo-status[data-tipo="erro"] { color: #a4443b; }
.campo-status[data-tipo="ok"] { color: #5c7a52; }

/* ==========================================================================
   13 — FOOTER
   ========================================================================== */
.rodape { padding-block: 4rem 2rem; }
.rodape-grade {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-borda-clara);
}
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.2fr 1fr 1fr; } }
.rodape-marca .marca-wordmark { color: var(--c-texto-claro); font-size: 1.6rem; }
.rodape-marca p { margin-top: 1rem; font-size: 0.9rem; color: var(--c-texto-claro-suave); max-width: 34ch; }
.rodape-coluna h4 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-destaque); margin-bottom: 1.1rem; }
.rodape-coluna ul { display: grid; gap: 0.75rem; }
.rodape-coluna a { font-size: 0.92rem; color: var(--c-texto-claro-suave); transition: color var(--duracao) var(--facil); }
.rodape-coluna a:hover { color: var(--c-destaque); }
.rodape-base {
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: center;
  /* Reserva espaço para o botão flutuante de WhatsApp fixo no canto inferior
     direito (auditoria 20/08/2026, item P2 #13): confirmado por medição real
     que o copyright ficava coberto pelo botão em telas estreitas, onde o
     rodapé ainda está em coluna e centralizado. */
  padding-right: 4.5rem;
}
@media (min-width: 760px) {
  .rodape-base { flex-direction: row; justify-content: space-between; text-align: left; padding-right: 0; }
}
.rodape-assinatura { font-family: var(--f-titulos); font-style: italic; font-size: 1rem; }
.rodape-assinatura .destaque-italic { display: block; font-size: 0.85rem; margin-top: 0.15rem; }
.rodape-copyright { font-size: 0.78rem; color: var(--c-texto-claro-suave); }

/* ---- WhatsApp flutuante ---- */
.wa-flutuante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-marrom);
  color: var(--c-offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.22);
  transition: transform var(--duracao) var(--facil);
}
.wa-flutuante:hover { transform: scale(1.06); }

/* ---- placeholders de imagem (sem foto real ainda) ---- */
.ph {
  background:
    linear-gradient(135deg, rgb(var(--c-marrom-rgb) / 0.92), rgb(var(--c-preto-rgb) / 0.92));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgb(var(--c-offwhite-rgb) / 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem;
  line-height: 1.5;
  min-height: 100%;
  width: 100%;
  height: 100%;
}

/* ---- utilidades ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--c-preto); color: #fff;
  padding: 0.75em 1.25em; z-index: 999;
  transition: top var(--duracao) var(--facil);
}
.skip-link:focus { top: 1rem; }