/* =====================================================================
   BEAUTY ELITE - Landing page
   Paleta oficial: C6AB95 / E9DCCF / FAF8F6 / preto
   Tema travado em escuro, acento unico nude, raio de canto unico (2px)
   ===================================================================== */

:root {
  /* Base pastel. A identidade ja traz o off-white FAF8F6 e a areia E9DCCF;
     o tema claro parte deles e desce em degraus muito curtos, que e o que
     define um pastel: luminosidade alta e croma baixo. */
  --ink:    #FBF7F3;   /* papel, o fundo da pagina */
  --coal:   #F5EDE5;   /* superficie um degrau abaixo */
  --smoke:  #EEE3D8;   /* terceiro degrau */

  /* Acento da marca, agora em versao leitosa */
  --nude:   #E3CDB8;
  --nude-d: #D2B49A;
  --sand:   #E9DCCF;
  --blush:  #F0DED2;

  /* Texto. Marrom quente em vez de preto: preto puro sobre pastel corta a
     pagina ao meio, e o marrom mantem a temperatura do resto. */
  --bone:   #3A2C23;   /* titulos */
  --cream:  #5C4B3F;   /* corpo */
  --mute:   #78665A;   /* secundario, 4.7:1 ate sobre --coal */

  /* Cobre pastel. Os tons claros servem a superficies, os fechados ao texto:
     nenhum tom pastel isolado alcanca 4.5:1 sobre papel, entao o acento de
     texto precisa ser o degrau mais fechado da escala. */
  --cu-100: #F3E2D2;
  --cu-300: #D9B294;
  --cu-400: #C79C79;
  --cu-500: #B0855F;
  --cu-700: #8A6140;   /* acento de texto, 4.7:1 ate sobre --coal */
  --cu-900: #6B4A2E;

  /* Folha metalica para TEXTO. Sobre papel claro ela precisa correr nos
     degraus fechados, senao o glifo desaparece. */
  --foil: linear-gradient(100deg,
            #7E5836  0%,
            #B0855F 16%,
            #D9B294 33%,
            #A87B55 46%,
            #8F6743 58%,
            #C79C79 73%,
            #9A7049 87%,
            #7E5836 100%);

  /* Folha metalica para SUPERFICIE. Aqui vale o pastel cheio, porque quem
     precisa de contraste e o texto escuro que fica por cima. */
  --foil-light: linear-gradient(100deg,
            #E7C9AC  0%,
            #F4E3D2 18%,
            #FBF3EA 36%,
            #EAD0B6 52%,
            #F6E8DA 70%,
            #E4C4A4 86%,
            #E7C9AC 100%);

  --line:   rgba(143, 103, 67, 0.20);
  --line-2: rgba(143, 103, 67, 0.34);
  --rule:   linear-gradient(90deg,
              rgba(176, 133, 95, 0)   0%,
              rgba(176, 133, 95, .35) 22%,
              rgba(143, 103, 67, .55) 50%,
              rgba(176, 133, 95, .35) 78%,
              rgba(176, 133, 95, 0)  100%);

  /* Forma: um unico raio para todo o site */
  --r: 2px;
  --nav-h: 68px;

  /* Ritmo */
  --pad-section: clamp(5rem, 10vw, 9.5rem);

  /* Curvas */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Escala de z-index semantica */
  --z-grain:   90;
  --z-menu:   110;
  --z-float:  120;
  --z-nav:    140;

  color-scheme: light;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-padding-top: calc(var(--nav-h) + 24px); }

body {
  background-color: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
  font-synthesis-weight: none;
}

/* =====================================================================
   LUZ DE COBRE POR SECAO

   Uma camada fixa unica disputava a pintura com o conteudo e perdia de
   forma intermitente na primeira renderizacao. Cada secao carrega o proprio
   brilho, o que elimina a disputa e ainda faz a luz variar ao longo da
   pagina em vez de ser um veu estatico.
   ===================================================================== */

#pilares {
  background-image: radial-gradient(62vw 70vh at 88% 10%, rgba(214, 172, 136, 0.19), transparent 66%);
}
#servicos {
  background-image:
    radial-gradient(58vw 60vh at 4% 8%,  rgba(201, 158, 120, 0.22), transparent 64%),
    radial-gradient(50vw 55vh at 96% 88%, rgba(201, 158, 120, 0.16), transparent 64%);
}
#leticia {
  background-image: radial-gradient(64vw 70vh at 92% 42%, rgba(214, 172, 136, 0.21), transparent 66%);
}
#depoimentos {
  background-image: radial-gradient(70vw 60vh at 12% 18%, rgba(214, 172, 136, 0.18), transparent 64%);
}
#duvidas {
  background-image: radial-gradient(60vw 65vh at 86% 76%, rgba(201, 158, 120, 0.21), transparent 66%);
}
footer[role="contentinfo"] {
  background-image: radial-gradient(70vw 70vh at 16% 100%, rgba(214, 172, 136, 0.17), transparent 62%);
}


/* =====================================================================
   FOLHA METALICA
   Reservada a texto de display (24px ou mais) e a superficies.
   Nunca em texto corrido: a variacao de luminancia derruba o contraste.
   ===================================================================== */

/* Em repouso a folha e estatica. Animar background-position em texto com
   background-clip repinta o glifo a cada quadro e nunca chega a GPU, entao
   a varredura acontece uma unica vez, quando o elemento entra em cena. */
.foil {
  background: var(--foil);
  background-size: 260% 100%;
  background-position: 42% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.foil.is-lit { animation: foil-sheen 2.4s var(--ease-out-quart) 1 both; }

@keyframes foil-sheen {
  from { background-position:   0% 50%; }
  to   { background-position:  42% 50%; }
}

/* Aresta metalica em volta de fotos. Gradiente fixo: o metal ja se le
   como metal parado, e nao custa repintura. */
.edge {
  padding: 1px;
  border-radius: var(--r);
  background: var(--foil);
  background-size: 200% 100%;
  background-position: 30% 50%;
}

/* Regra de cobre: fio com brilho ao centro, no lugar do traco branco */
.rule {
  height: 1px;
  width: 100%;
  background: var(--rule);
  border: 0;
}

::selection { background: var(--cu-300); color: #3A2C23; }

img { display: block; }

/* Foco visivel consistente */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--cu-700);
  outline-offset: 3px;
  border-radius: var(--r);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: var(--z-menu);
  background-color: #E7C9AC;
  background-image: var(--foil-light);
  color: #3A2C23;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--r);
  transition: top 0.2s var(--ease-out-quart);
}
.skip-link:focus { top: 1rem; }

/* Granulacao: PNG real em camada fixa. Um filtro SVG aqui promovia a raiz
   a uma camada de composicao e o primeiro quadro saia com a luz ambiente
   por cima do conteudo. Bitmap simples nao tem esse efeito colateral. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.03;
  background-image: url("assets/img/grain.png");
  background-repeat: repeat;
  background-size: 160px 160px;
}

.section-pad { padding-block: var(--pad-section); }


/* =====================================================================
   NAVEGACAO
   ===================================================================== */

.topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.45s var(--ease-out-quart),
              backdrop-filter 0.45s var(--ease-out-quart),
              border-color 0.45s var(--ease-out-quart);
  border-bottom: 1px solid transparent;
}
.topbar.is-stuck {
  background: rgba(251, 247, 243, 0.82);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: transparent;
}
/* Fio de cobre no pe da barra, no lugar de uma borda cinza */
.topbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out-quart);
}
.topbar.is-stuck::after { opacity: 1; }
.topbar.is-hidden { transform: translateY(-100%); }
.topbar { transition-property: background-color, backdrop-filter, border-color, transform; }

.navlink {
  position: relative;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-out-quart);
}
.navlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 100%;
  background: var(--foil);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out-expo);
}
.navlink:hover { opacity: 1; }
.navlink:hover::after { transform: scaleX(1); transform-origin: left; }

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  padding-inline: 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.menu-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--cream);
  transition: transform 0.35s var(--ease-out-expo), opacity 0.2s linear;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background:
    radial-gradient(90vw 60vh at 80% 8%, rgba(184, 115, 51, 0.16), transparent 68%),
    var(--ink);
  padding-top: var(--nav-h);
  opacity: 0;
}
.menu-mobile[hidden] { display: none; }

/* Enquanto o menu esta aberto o botao flutuante sai de cena para nao competir */
body.menu-aberto .wa-float { opacity: 0 !important; pointer-events: none; }

.menu-item {
  display: block;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bone);
}


/* =====================================================================
   BOTOES
   ===================================================================== */

.btn {
  --btn-py: 0.9rem;
  --btn-px: 1.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s var(--ease-out-quart),
              color 0.35s var(--ease-out-quart),
              border-color 0.35s var(--ease-out-quart),
              background-color 0.35s var(--ease-out-quart);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out-expo);
}
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(0.985); }

.btn-sm { --btn-py: 0.7rem; --btn-px: 1.25rem; font-size: 0.875rem; }
.btn-lg { --btn-py: 1.1rem; --btn-px: 2.25rem; font-size: 1rem; }

/* Varredura de luz que atravessa qualquer botao no hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  transition: left 0.75s var(--ease-out-expo);
}
.btn:hover::after { left: 130%; }

/* Primario: cobre polido com aresta clara em cima e sombra quente embaixo.
   Texto quase preto sobre a faixa mais escura da folha: contraste 6.2:1 */
.btn-primary {
  background-color: #E7C9AC;
  background-image: var(--foil-light);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #3A2C23;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(150, 116, 90, 0.18),
    0 8px 26px rgba(214, 172, 136, 0.26);
  transition: transform 0.25s var(--ease-out-quart),
              background-position 0.8s var(--ease-out-expo),
              box-shadow 0.35s var(--ease-out-quart);
}
.btn-primary::before { display: none; }
.btn-primary:hover {
  background-position: 100% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(150, 116, 90, 0.16),
    0 12px 34px rgba(176, 133, 95, 0.24);
}

/* Contorno de cobre: a borda e um degrade, nao um traco chapado */
.btn-outline {
  color: var(--cu-700);
  border: 0;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    var(--foil) border-box;
  border: 1px solid transparent;
}
.btn-outline::before { background: var(--foil-light); }
.btn-outline:hover { color: #3A2C23; }

/* Fantasma com traco de cobre, nunca sem borda */
.btn-ghost { border: 1px solid var(--line-2); color: var(--cream); }
.btn-ghost::before { background: rgba(143, 103, 67, 0.22); }
.btn-ghost:hover { border-color: var(--cu-400); color: var(--bone); }


/* =====================================================================
   HERO
   ===================================================================== */

/* A hero nao tem mais foto de fundo: o destaque e um recorte com
   transparencia, e ele sobre uma foto de outra pessoa colocaria dois rostos
   competindo na mesma dobra. O veu virou luz de papel. */
.hero-veu {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62vw 78vh at 82% 34%, rgba(214, 172, 136, 0.30), rgba(251, 247, 243, 0) 68%),
    radial-gradient(52vw 60vh at 2% 76%,  rgba(201, 158, 120, 0.18), rgba(251, 247, 243, 0) 70%),
    linear-gradient(160deg, var(--ink) 0%, var(--coal) 62%, var(--ink) 100%);
}

/* Destaque: o recorte precisa de chao. O halo quente atras impede que ele
   flutue solto sobre o papel, e a sombra projetada segue o contorno do
   alfa em vez de desenhar uma caixa. */
.hero-destaque {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-destaque::before {
  content: "";
  position: absolute;
  inset: 8% 2% 0;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(214, 172, 136, 0.46), rgba(214, 172, 136, 0.14) 62%, rgba(214, 172, 136, 0) 78%);
}
.hero-destaque img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 40px rgba(150, 116, 90, 0.30));
}

/* Abaixo de 1024 nao ha coluna: sem limite o destaque tomaria a dobra
   inteira e empurraria o botao para fora da primeira tela. */
@media (max-width: 1023px) {
  .hero-destaque img { max-width: 30rem; }
}

/* O mascaramento por linha precisa de folga para as descidas do italico (p, q, g) */
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.06em;
}
.hero-title .line > span { display: block; }
.hero-title em { font-style: italic; line-height: 1.12; }


/* =====================================================================
   PILARES
   ===================================================================== */

.pilar { position: relative; padding-top: 1.75rem; }
.pilar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    var(--cu-700) 0%, var(--cu-500) 34%, rgba(176, 133, 95, 0.28) 100%);
  transform: scaleX(0);
  transform-origin: left;
}
html:not(.js-anim) .pilar::before { transform: scaleX(1); }

.pilar-title {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.pilar-body {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--mute);
  max-width: 34ch;
}


/* =====================================================================
   PROTOCOLOS - pilha adesiva
   ===================================================================== */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cu-700);
}
.kicker::after {
  content: "";
  width: clamp(2.5rem, 6vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, var(--cu-400), rgba(176, 133, 95, 0));
}

.stack { position: relative; }

.stack-panel {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.panel-inner {
  position: relative;
  width: 100%;
  padding-block: clamp(4rem, 9vh, 7rem);
  background:
    radial-gradient(70vw 70vh at 82% 10%, rgba(214, 172, 136, 0.20), transparent 66%),
    var(--ink);
}
.panel-inner--alt {
  background:
    radial-gradient(70vw 70vh at 12% 12%, rgba(143, 103, 67, 0.20), transparent 66%),
    var(--coal);
}
/* O painel tem 100dvh e o conteudo vem centrado, entao sobram cerca de
   70px de cada lado. Nos paineis de cima essa sobra revela o painel
   anterior, que e o efeito da pilha. No ultimo nao ha nada atras: a sobra
   virava uma faixa clara entre esta secao e a de servicos. Ele passa a
   preencher a altura toda e centra o conteudo por dentro. */
.stack-panel:last-child { align-items: stretch; }
.stack-panel:last-child .panel-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fio de cobre marcando a emenda entre os paineis empilhados */
.panel-inner::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
}

.panel-index {
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cu-700);
}

/* Aresta de cobre em volta da foto do protocolo.
   A imagem e 16% mais alta que a moldura porque o parallax a desloca no
   eixo vertical. Sem essa sobra o deslize revelaria o cobre do fundo. */
.panel-figure {
  overflow: hidden;
  border-radius: var(--r);
  padding: 1px;
  background: var(--foil);
  background-size: 220% 100%;
  background-position: 45% 50%;
  box-shadow: 0 20px 44px rgba(150, 116, 90, 0.15);
}
.panel-quadro {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  aspect-ratio: 4 / 5;
}

/* As duas fotos de painel nasceram em retrato. Sem limite de largura, uma
   coluna de 6 em 4:5 passaria de 800px de altura e estouraria a dobra. */
.panel-figure { margin-inline: auto; max-width: 30rem; }
.panel-img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
}

.feat {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.65;
}
.feat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.7rem;
  height: 1px;
  background: linear-gradient(90deg, var(--cu-700), var(--cu-400));
}


/* =====================================================================
   SERVICOS - acordeao

   Um servico aberto por vez. Acima de 1024 os fechados viram tiras
   verticais com o rotulo girado; abaixo disso o mesmo mecanismo vira
   acordeao vertical, porque dez tiras nao cabem numa tela de celular.

   O texto se apoia numa placa opaca de canto, nao num veu sobre a foto
   inteira. O veu resolvia o contraste mas apagava justamente a metade de
   baixo da imagem, que e onde mora o detalhe do procedimento: a mao que
   marca o abdome, o frasco, os vetores do gluteo.

   A transicao anima flex, que e propriedade de layout. E a excecao
   consciente da pagina: nao existe equivalente em transform que preserve
   o fluxo, e aqui o custo e pontual, disparado por clique, nao no scroll.
   ===================================================================== */

.acordeao {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.acc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--coal);
  box-shadow: inset 0 0 0 1px rgba(184, 115, 51, 0.28);
  transition: flex 0.6s var(--ease-out-expo),
              box-shadow 0.5s var(--ease-out-quart);
  flex: 0 0 4.5rem;
  min-height: 4.5rem;
}
.acc-item.is-aberto {
  flex: 0 0 28rem;
  box-shadow: inset 0 0 0 1px rgba(220, 163, 106, 0.85);
}

.acc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  transition: opacity 0.6s var(--ease-out-quart);
  opacity: 0.5;
}
.acc-item.is-aberto .acc-img { opacity: 1; }

/* Aberto o veu e so um apoio de borda; fechado ele volta a lavar a tira
   inteira, que e o que faz o rotulo girado se ler. */
.acc-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(251, 247, 243, 0.46)  0%,
    rgba(251, 247, 243, 0.16) 30%,
    rgba(251, 247, 243, 0.00) 62%);
}
.acc-item:not(.is-aberto) .acc-veu {
  background: linear-gradient(to top,
    rgba(251, 247, 243, 0.97)  0%,
    rgba(251, 247, 243, 0.92) 22%,
    rgba(251, 247, 243, 0.62) 60%,
    rgba(251, 247, 243, 0.44) 100%);
}

.acc-legenda {
  position: relative;
  z-index: 2;
}
.acc-cabeca { margin: 0; }

.acc-aba {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 4.5rem;
  padding: 0 clamp(1.25rem, 2.4vw, 2rem);
  text-align: left;
  cursor: pointer;
}
.acc-titulo {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(1.25rem, 4.4vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bone);
  transition: color 0.4s var(--ease-out-quart);
}
.acc-aba:hover .acc-titulo { color: var(--cu-700); }

.acc-painel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-inline: clamp(1.25rem, 2.4vw, 2rem);
}
.acc-texto {
  max-width: 46ch;
  padding-bottom: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cream);
}

/* Sem JavaScript o acordeao nao fecha nada: todos ficam abertos e a
   secao segue completa. */
html:not(.js-anim) .acc-item { flex: 0 0 auto; }


/* --- Acima de 1024: a fileira deita ------------------------------------ */
@media (min-width: 1024px) {
  .acordeao {
    flex-direction: row;
    height: clamp(30rem, 58vh, 38rem);
    gap: 0.375rem;
  }

  .acc-item {
    flex: 0 0 3.5rem;
    min-height: 0;
    height: 100%;
  }
  .acc-item.is-aberto { flex: 1 1 auto; }

  /* Fechado, o rotulo gira e a tira vira uma lombada.
     O h3 precisa da altura: sem ela o height:100% do botao resolvia
     contra um bloco de altura automatica e a lombada colapsava no topo. */
  .acc-legenda,
  .acc-cabeca { height: 100%; }

  .acc-aba {
    height: 100%;
    min-height: 0;
    align-items: flex-end;
    padding: 0 0 clamp(1.25rem, 2.4vw, 2rem);
    justify-content: center;
  }
  .acc-titulo {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 1rem;
    transition: color 0.4s var(--ease-out-quart);
  }

  /* Aberto: a placa se solta do canto e a foto respira em volta dela. */
  .acc-item.is-aberto .acc-legenda,
  .acc-item.is-aberto .acc-cabeca { height: auto; }

  .acc-item.is-aberto .acc-legenda {
    position: absolute;
    left: clamp(1.25rem, 2vw, 1.75rem);
    bottom: clamp(1.25rem, 2vw, 1.75rem);
    width: min(31rem, 62%);
    padding: clamp(1.125rem, 1.6vw, 1.5rem) clamp(1.25rem, 1.8vw, 1.625rem);
    border-radius: 3px;
    background: rgba(251, 247, 243, 0.93);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, 0.26),
                0 18px 44px -28px rgba(58, 44, 35, 0.55);
  }

  .acc-item.is-aberto .acc-aba {
    position: static;
    height: auto;
    min-height: 0;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
  }
  .acc-item.is-aberto .acc-titulo {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(1.5rem, 2.2vw, 1.9375rem);
    white-space: normal;
  }

  .acc-painel {
    position: absolute;
    inset: auto 0 0 0;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-quart);
    pointer-events: none;
  }
  .acc-item.is-aberto .acc-painel {
    position: static;
    padding-inline: 0;
    opacity: 1;
    transition-delay: 0.18s;
    pointer-events: auto;
  }
  .acc-item.is-aberto .acc-texto {
    padding-top: 0.5rem;
    padding-bottom: 0;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
  }

  /* Sem JavaScript nao ha quem abra e feche, e dividir a fileira entre dez
     tiras por conteudo produzia larguras de 3px a 241px. A secao entao
     abandona a fileira e vira uma lista vertical, com tudo aberto. */
  html:not(.js-anim) .acordeao { flex-direction: column; height: auto; gap: 0.5rem; }
  html:not(.js-anim) .acc-item  { flex: 0 0 auto; height: auto; min-height: 17rem; }
  html:not(.js-anim) .acc-legenda,
  html:not(.js-anim) .acc-cabeca { height: auto; }
  html:not(.js-anim) .acc-aba {
    position: static;
    height: auto;
    min-height: 4rem;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 clamp(1.25rem, 2.4vw, 2rem);
  }
  html:not(.js-anim) .acc-titulo {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: clamp(1.5rem, 2.2vw, 1.9375rem);
  }
  html:not(.js-anim) .acc-painel {
    position: static;
    opacity: 1;
    padding-inline: clamp(1.25rem, 2.4vw, 2rem);
    pointer-events: auto;
  }
  html:not(.js-anim) .acc-img { opacity: 1; }
}


/* --- Abaixo de 1024: acordeao vertical --------------------------------- */
@media (max-width: 1023px) {
  .acc-painel {
    height: 0;
    transition: height 0.5s var(--ease-out-expo);
  }
  .acc-item.is-aberto .acc-painel { height: auto; }
  html:not(.js-anim) .acc-painel { height: auto; }

  /* A mesma placa, agora como faixa apoiada no pe do bloco. */
  .acc-item.is-aberto .acc-legenda,
  html:not(.js-anim) .acc-legenda {
    margin: 0.625rem;
    border-radius: 3px;
    background: rgba(251, 247, 243, 0.93);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, 0.26);
  }
  .acc-item.is-aberto .acc-aba,
  html:not(.js-anim) .acc-aba { min-height: 4rem; }
}


/* =====================================================================
   O ESPACO - parallax
   ===================================================================== */

.espaco-media {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
}
.espaco-img { width: 100%; height: 100%; object-fit: cover; }
.espaco-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(251, 247, 243, 0.95)  0%,
      rgba(251, 247, 243, 0.86) 30%,
      rgba(251, 247, 243, 0.46) 62%,
      rgba(251, 247, 243, 0.18) 100%),
    linear-gradient(70deg, rgba(201, 158, 120, 0.18), rgba(201, 158, 120, 0.06) 55%, rgba(255, 255, 255, 0.20));
}
#espaco > .relative { z-index: 2; }


/* =====================================================================
   A PROFISSIONAL
   ===================================================================== */

.sobre-figure {
  padding: 1px;
  border-radius: var(--r);
  background: var(--foil);
  background-size: 220% 100%;
  background-position: 62% 50%;
  box-shadow: 0 22px 48px rgba(150, 116, 90, 0.17);
}
/* Sobra de 8%: a foto desliza no scroll e, sem quadro de recorte, o deslize
   descobria a moldura de cobre numa faixa no topo. Aqui a sobra e menor que
   nos paineis porque o enquadramento e fechado na pessoa e 16% comia a cabeca. */
.sobre-quadro {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  aspect-ratio: 4 / 5;
}
.sobre-img {
  position: absolute;
  inset: -4% 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
}

.fact { position: relative; padding-top: 1rem; }
.fact::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cu-700), var(--cu-500) 45%, rgba(176, 133, 95, 0.24));
}
.fact-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cu-700);
}
.fact-value {
  margin-top: 0.55rem;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--bone);
}


/* =====================================================================
   DEPOIMENTOS - trilho com scroll-snap
   ===================================================================== */

.quote-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.25rem;
  padding-inline: 1.25rem;
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 103, 67, 0.40) transparent;
  cursor: grab;
}
.quote-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.quote-rail::-webkit-scrollbar { height: 2px; }
.quote-rail::-webkit-scrollbar-track { background: rgba(58, 44, 35, 0.08); }
.quote-rail::-webkit-scrollbar-thumb { background: rgba(143, 103, 67, 0.40); }

@media (min-width: 768px) {
  .quote-rail { gap: 1.25rem; scroll-padding-inline: 2.5rem; padding-inline: 2.5rem; }
}

.quote-card {
  position: relative;
  flex: 0 0 min(88vw, 30rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid transparent;
  border-radius: var(--r);
  background:
    linear-gradient(150deg, rgba(255, 252, 249, 0.96), rgba(246, 238, 230, 0.96)) padding-box,
    linear-gradient(150deg, rgba(143, 103, 67, 0.42), rgba(176, 133, 95, 0.16) 45%, rgba(255, 255, 255, 0.85)) border-box;
  transition: transform 0.5s var(--ease-out-expo);
}
.quote-card:hover { transform: translateY(-4px); }

.quote-text {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--bone);
  text-wrap: pretty;
}

.quote-by {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cu-700);
}
.quote-role {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  color: var(--mute);
}


/* =====================================================================
   DUVIDAS - acordeao
   ===================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq-item {
  position: relative;
  border-bottom: 1px solid var(--line);
}
/* A linha inferior acende em cobre quando a pergunta abre */
.faq-item::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--cu-700), var(--cu-500) 40%, rgba(176, 133, 95, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
}
.faq-item:hover::after { transform: scaleX(1); }
.faq-item:has(.faq-trigger[aria-expanded="true"])::after { transform: scaleX(1); }

.faq-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding-block: 1.6rem;
  text-align: left;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--bone);
  transition: color 0.3s var(--ease-out-quart);
}
.faq-trigger:hover { color: var(--cu-700); }

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 0.4em;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--cu-700), var(--cu-400));
  transition: transform 0.45s var(--ease-out-expo);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-trigger[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }

.faq-panel { overflow: hidden; height: 0; }
html:not(.js-anim) .faq-panel { height: auto; }
.faq-panel-inner {
  padding-bottom: 1.75rem;
  max-width: 68ch;
  line-height: 1.75;
  color: var(--mute);
}


/* =====================================================================
   CTA FINAL
   ===================================================================== */

.cta-final { border-top: 0; }
.cta-final::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 3;
  height: 1px;
  background: var(--rule);
}
/* O fundo em sangria saiu: um retrato emoldurado da Leticia sobre a foto de
   outra pessoa colocaria dois assuntos disputando a mesma secao. O veu virou
   luz de papel, como na hero. */
.cta-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58vw 76vh at 78% 42%, rgba(214, 172, 136, 0.30), rgba(251, 247, 243, 0) 68%),
    radial-gradient(48vw 56vh at 6% 80%,  rgba(201, 158, 120, 0.18), rgba(251, 247, 243, 0) 70%),
    linear-gradient(200deg, var(--ink) 0%, var(--coal) 58%, var(--ink) 100%);
}

/* Mesma moldura de cobre das outras chapas do site */
.cta-figura {
  padding: 1px;
  border-radius: var(--r);
  background: var(--foil);
  background-size: 220% 100%;
  background-position: 48% 50%;
  box-shadow: 0 22px 48px rgba(150, 116, 90, 0.20);
  margin-inline: auto;
  max-width: 30rem;
  width: 100%;
}
.cta-quadro {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  aspect-ratio: 4 / 5;
}
/* Sobra de 8%, suficiente para o deslize de 3% do parallax */
.cta-figura img {
  position: absolute;
  inset: -4% 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
}

.cta-seal {
  animation: seal-spin 60s linear infinite reverse;
  filter: drop-shadow(0 0 26px rgba(176, 133, 95, 0.42));
}


/* =====================================================================
   RODAPE
   ===================================================================== */

.foot-title {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cu-700);
}
.footlink {
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-out-quart), color 0.3s var(--ease-out-quart);
}
.footlink:hover { opacity: 1; color: var(--cu-700); }


/* =====================================================================
   WHATSAPP FLUTUANTE
   ===================================================================== */

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background-color: #D2A87F;
  background-image: none;
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #35271E;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 24px rgba(143, 103, 67, 0.30),
    0 0 0 1px rgba(107, 74, 46, 0.45);
  transition: transform 0.35s var(--ease-out-expo),
              background-position 0.8s var(--ease-out-expo),
              box-shadow 0.35s var(--ease-out-quart);
}
html.js-anim .wa-float { opacity: 0; transform: scale(0.6); }
.wa-float:hover {
  background-color: #C79C79;
  transform: scale(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(150, 116, 90, 0.18),
    0 16px 44px rgba(176, 133, 95, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}
.wa-icon { width: 30px; height: 30px; position: relative; z-index: 1; }

.wa-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid var(--cu-400);
  animation: wa-ring 2.8s var(--ease-out-quart) infinite;
}
@keyframes wa-ring {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}


/* =====================================================================
   ESTADO INICIAL DAS ANIMACOES
   Aplicado somente quando ha JS. Sem JS, tudo renderiza visivel.
   ===================================================================== */

html.js-anim .reveal,
html.js-anim .pilar,
html.js-anim .tile,
html.js-anim .quote-card,
html.js-anim .faq-item {
  opacity: 0;
  transform: translateY(26px);
}
html.js-anim .hero-title .line > span { transform: translateY(105%); }
html.js-anim .hero-kicker,
html.js-anim .hero-sub,
html.js-anim .hero-cta { opacity: 0; transform: translateY(20px); }
html.js-anim .hero-destaque { opacity: 0; }


/* =====================================================================
   MOVIMENTO REDUZIDO
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.js-anim .reveal,
  html.js-anim .pilar,
  html.js-anim .tile,
  html.js-anim .quote-card,
  html.js-anim .faq-item,
  html.js-anim .hero-kicker,
  html.js-anim .hero-sub,
  html.js-anim .hero-cta,
  html.js-anim .hero-destaque,
  html.js-anim .wa-float {
    opacity: 1 !important;
    transform: none !important;
  }
  html.js-anim .hero-title .line > span { transform: none !important; }
  html.js-anim .pilar::before { transform: scaleX(1) !important; }

  .stack-panel { position: relative; min-height: 0; }
  .espaco-media { position: absolute; inset: 0; }
  .wa-pulse { display: none; }
  .cta-seal { animation: none !important; }
  .foil.is-lit { animation: none !important; }
  .btn::after { display: none; }
}

/* Transparencia reduzida: superficie solida no lugar do vidro. Vale para
   os dois lugares que usam desfoque de fundo: a barra do topo e a placa de
   legenda dos servicos. */
@media (prefers-reduced-transparency: reduce) {
  .topbar.is-stuck,
  .acc-item.is-aberto .acc-legenda,
  html:not(.js-anim) .acc-legenda {
    background: var(--ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}


/* =====================================================================
   DIVISORIAS DE SECAO
   Fio de cobre no lugar de uma borda cinza de 1px.
   ===================================================================== */

.section-rule { position: relative; }
.section-rule::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
}

.foot-bottom { position: relative; }
.foot-bottom::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(143, 103, 67, 0.42), rgba(176, 133, 95, 0.12) 60%, rgba(176, 133, 95, 0));
}



/* =====================================================================
   ORDEM DE CASCATA

   O Tailwind compilado e carregado ANTES deste arquivo, entao uma regra de
   componente daqui passa por cima das utilitarias de exibicao. Foi assim
   que o menu sanduiche ja apareceu no desktop. As regras abaixo devolvem a
   prioridade as utilitarias, sem recorrer a !important.
   ===================================================================== */

.hidden { display: none; }

@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:flex   { display: flex; }
}


/* =====================================================================
   DIPTICO DO CABECALHO DOS PROTOCOLOS

   Duas imagens em vez de uma: o titulo fala de dois metodos, entao o par
   responde a copia. Uma e retrato, a outra e o material. O desencontro
   vertical evita a leitura de grade e da ritmo ao bloco.
   ===================================================================== */

.diptico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.diptico-foto {
  padding: 1px;
  border-radius: var(--r);
  background: var(--foil);
  background-size: 200% 100%;
  box-shadow: 0 20px 44px rgba(150, 116, 90, 0.15);
}
.diptico-foto--a { background-position: 22% 50%; margin-top: 2.75rem; }
.diptico-foto--b { background-position: 68% 50%; }

/* Mesma sobra do painel: o contramovimento nao pode descobrir a moldura */
.diptico-quadro {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  aspect-ratio: 3 / 4;
}
.diptico-foto img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .diptico { gap: 0.625rem; }
  .diptico-foto--a { margin-top: 1.5rem; }
}


/* =====================================================================
   PAGINA DE REDIRECIONAMENTO PARA O WHATSAPP  (/whatsapp/)

   Usa os mesmos tokens da home. A pagina inteira cabe em uma dobra e nao
   rola, entao a altura e travada em 100dvh com as tres faixas empilhadas.
   ===================================================================== */

.wa-pagina {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  background-image:
    radial-gradient(70vw 70vh at 82% 4%,  rgba(214, 172, 136, 0.24), transparent 66%),
    radial-gradient(60vw 60vh at 6% 92%,  rgba(201, 158, 120, 0.20),  transparent 68%);
}

.wa-topo {
  display: flex;
  justify-content: center;
  padding: clamp(1.75rem, 5vh, 3rem) 1.25rem 0;
}

.wa-corpo {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vh, 4rem) 1.25rem;
}

.wa-cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

.wa-rodape {
  padding: 0 1.25rem clamp(1.75rem, 5vh, 3rem);
  text-align: center;
  font-size: 0.75rem;
  color: var(--mute);
}

/* O rotulo da marca vem do .kicker da home, mas ali ele tem um fio a
   direita que so faz sentido em texto alinhado a esquerda. */
.wa-cartao .kicker::after { display: none; }


/* --- Anel de contagem ------------------------------------------------ */

.wa-marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
}

.wa-anel {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);   /* o traco comece no topo, nao a direita */
}

.wa-anel-base {
  fill: none;
  stroke: rgba(143, 103, 67, 0.22);
  stroke-width: 2;
}

.wa-anel-progresso {
  fill: none;
  stroke: url(#cobre);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.wa-pulso {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 1px solid var(--cu-400);
  opacity: 0.55;
  pointer-events: none;
}

.wa-bolha {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background-color: #E7C9AC;
  background-image: var(--foil-light);
  background-size: 200% 100%;
  background-position: 30% 50%;
  color: #3A2C23;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 5px rgba(150, 116, 90, 0.20),
    0 14px 40px rgba(176, 133, 95, 0.24);
}


/* --- Contagem em texto ----------------------------------------------- */

.wa-contagem {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.wa-segundos {
  display: inline-block;
  min-width: 1.1em;
  font-weight: 500;
  color: var(--cu-700);
  font-variant-numeric: tabular-nums;
}

.wa-voltar {
  font-size: 0.875rem;
  color: var(--cream);
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(143, 103, 67, 0.38);
  transition: opacity 0.3s var(--ease-out-quart), color 0.3s var(--ease-out-quart);
}
.wa-voltar:hover { opacity: 1; color: var(--cu-700); }


/* --- Estado inicial, so quando ha JS --------------------------------- */

html.js-anim .wa-entra { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .wa-entra { opacity: 1 !important; transform: none !important; }
  .wa-pulso { display: none; }
}