/* ============================================================================
   PATRÍCIA ALMEIDA NUTRI — camada custom

   Estrutura e movimentos: templates/dark-impact (nav pill, marquee, cards com
   borda de acento, shine, reveal, FAB).
   Paleta: referência brunaburti.com.br (captura Vibe Cloner, 06/08/2026).

   O site da Bruna usa oklch(); os hex abaixo são a conversão exata:
     oklch(0.977 0.007 85)  → #FAF7F2  fundo base
     oklch(0.94  0.012 85)  → #EFEBE2  superfície
     oklch(0.88  0.015 90)  → #DBD7CD  bordas
     oklch(0.24  0.012 260) → #1C1F25  texto forte
     oklch(0.5   0.015 250) → #5D646C  texto corpo
     oklch(0.62  0.025 155) → #7B8B80  sálvia (botões)
     oklch(0.44  0.028 160) → #45584D  sálvia escura
     oklch(0.68  0.055 45)  → #B68E7C  rosé (eyebrows)

   BASE CLARA. Só o hero e o CTA final são escuros — é o que sobrou do impacto
   do Dark Impact sem deixar a página agressiva.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Claros — o corpo da página */
  --lt1: #faf7f2;         /* fundo base */
  --lt2: #efebe2;         /* superfície elevada / card */
  --lt3: #ffffff;         /* card sobre superfície */
  --linha: #dbd7cd;       /* bordas */

  /* Escuros — só hero e CTA final */
  --dk1: #22271f;         /* verde-grafite: mesmo matiz da sálvia, bem escuro */
  --dk0: #1a1e18;         /* vinheta do CTA */

  /* Texto */
  --ink: #1c1f25;         /* títulos e texto forte */
  --ink-2: #5d646c;       /* corpo — oklch(.5 .015 250) da Bruna, 5.6:1 */
  --ink-3: #555c63;       /* legendas — oklch(.47), 6.3:1 (o #8a9098 dela dá 3:1) */

  /* Acentos.
     A Bruna usa sálvia #7B8B80 no botão com texto branco — isso dá 3.1:1 e
     reprova AA. Por isso existem duas versões: a dela para superfícies grandes
     e decorativos, e a escura para texto pequeno e fundo de botão. */
  --salvia: #7b8b80;      /* decorativo e bordas — NUNCA como fundo de texto */
  --salvia-band: #4d5c52; /* faixa sólida §6 — oklch(.46), texto claro a 6.6:1 */
  --salvia-ink: #45584d;  /* botão e texto pequeno — AA */
  --salvia-d: #364438;    /* hover */
  --rose: #b68e7c;        /* eyebrows sobre ESCURO e decorativos */
  --rose-ink: #755141;    /* eyebrow sobre CLARO — oklch(.47), 6.5:1 */
  --bordo: #7a3f42;       /* só os X da coluna perdedora — 6.9:1 sobre lt1 */

  /* Texto sobre as seções escuras */
  --w70: rgba(250, 247, 242, 0.86);
  --w50: rgba(250, 247, 242, 0.68);
  --w40: rgba(250, 247, 242, 0.58);
  --w15: rgba(250, 247, 242, 0.16);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Progresso da nav: 0 no topo da página, 1 depois de rolar.
     O script atualiza este número; todo o morph da barra deriva dele. */
  --nav-p: 0;
}

/* ---------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lt1);
  color: var(--ink);
  font-family: Barlow, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  scroll-behavior: smooth;
}

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

::selection { background: var(--salvia); color: #fff; }

:where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid var(--salvia-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------- tipografia --- */
/* Fraunces no lugar da Cormorant: mesma família de serifada alta editorial,
   com mais peso e personalidade. Caixa mista sempre — serifada de display em
   caixa-alta fica pesada e datada. */

.font-display {
  font-family: Fraunces, "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 120;
  letter-spacing: -0.012em;
}

.font-sub {
  font-family: Fraunces, "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 40;
  letter-spacing: -0.004em;
}

.h-hero       { font-size: clamp(40px, 6.4vw, 76px); line-height: 1.04; }
.h-section    { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.06; }
.h-section-lg { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04; }

/* Eyebrow — na Bruna é rosé, tracking largo, minúsculo */
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rose-ink);
}
/* Sobre fundo escuro o rosé claro já passa AA e fica mais bonito */
.sec-dark .eyebrow, .eyebrow-on-dark { color: var(--rose); }
.eyebrow-mute { color: var(--ink-3); letter-spacing: 0.15em; font-size: 10px; }
.sec-dark .eyebrow-mute { color: var(--w40); }

/* ---------------------------------------------------------- container --- */

.container-x {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) { .container-x { padding-inline: 40px; } }

/* --------------------------------------------------------------- card --- */
/* A borda esquerda de 3px continua — é o movimento do Dark Impact — mas agora
   em sálvia sobre fundo claro, o que a torna um detalhe e não um alerta. */

.card-edge-dark {
  border-width: 1px 1px 1px 3px;
  border-style: solid;
  border-color: rgba(250,247,242,.10) rgba(250,247,242,.10) rgba(250,247,242,.10) var(--rose);
}

.ghost-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 32px;
  line-height: 1;
  opacity: 0.2;
  color: var(--salvia);
}
.sec-dark .ghost-num { color: var(--rose); opacity: 0.35; }

/* --------------------------------------------------------- shine text --- */
/* Bem mais discreto que no Dark Impact: varre do sálvia ao rosé, sem brancos
   estourados. Em base clara um shine forte fica espalhafatoso. */

/* Parado por padrão: a varredura só corre enquanto o ponteiro está em cima.
   Em repouso a posição inicial do gradiente mostra a cor base do texto. */
.shine-text, .shine-text-dark {
  background-size: 250%;
  background-position: 200% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (hover: hover) {
  .shine-text:hover, .shine-text-dark:hover {
    animation: shine 3.4s ease-in-out infinite;
  }
}
/* sobre claro */
.shine-text-dark {
  background-image: linear-gradient(90deg,
    #45584d 0%, #45584d 38%,
    #7b8b80 47%, #96a396 53%,
    #7b8b80 62%, #45584d 100%);
}
/* sobre escuro */
.shine-text {
  background-image: linear-gradient(90deg,
    #b68e7c 0%, #b68e7c 38%,
    #d3b3a3 47%, #e2c8ba 53%,
    #d3b3a3 62%, #b68e7c 100%);
}

/* O rosé claro é token de uso sobre ESCURO. Em #sobre e #investimento ele
   caía sobre creme e a palavra destacada ficava mais apagada que o resto do
   título, o oposto do destaque. Mesma família, base no rosé de texto (AA). */
#sobre .shine-text,
#investimento .shine-text {
  background-image: linear-gradient(90deg,
    #755141 0%, #755141 38%,
    #96694f 47%, #b68e7c 53%,
    #96694f 62%, #755141 100%);
}
@keyframes shine {
  0%   { background-position: 200% center; }
  100% { background-position: -50% center; }
}

@keyframes shine-passada {
  0%        { background-position: 200% center; }
  38%, 100% { background-position: -50% center; }
}

/* A classe entra e sai pelo observador (§13 do script): são sete títulos na
   página, e animar background-position fora da tela é repaint pago à toa. */
.shine-live { animation: shine-passada 6.5s ease-in-out infinite; }

/* ------------------------------------------------------ botão shimmer --- */

.btn-shimmer { position: relative; overflow: hidden; isolation: isolate; }
.btn-shimmer > * { position: relative; z-index: 2; }
.btn-shimmer::before {
  content: "";
  position: absolute;
  top: -20%; left: -75%;
  width: 55%; height: 140%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
  transform: skew(-20deg);
  pointer-events: none;
  z-index: 1;
}
/* Uma varredura por passagem do ponteiro, em vez do laço infinito */
@media (hover: hover) {
  .btn-shimmer:hover::before { animation: btn-shimmer 1.1s var(--ease) 1; }
}
@keyframes btn-shimmer {
  0%        { left: -75%; }
  55%, 100% { left: 175%; }
}

/* ------------------------------------------------------------ marquee --- */
/* O conteúdo do track precisa estar DUPLICADO no HTML (2ª cópia com
   aria-hidden), porque a animação anda exatos -50%. */

.marquee-wrapper {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-left var(--marquee-speed, 40s) linear infinite;
}
@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-wrapper:hover .marquee-track,
.marquee-wrapper:focus-within .marquee-track,
.marquee-wrapper.is-paused .marquee-track { animation-play-state: paused; }

/* ------------------------------------------------- textura do hero --- */
/* Borrão de luz no topo do hero. Desce devagar conforme a página rola
   (--scroll é escrito pelo script, dentro de um requestAnimationFrame) e
   some junto com o fim do hero — não fica pairando sobre a seção seguinte. */

.hero-glow {
  position: absolute;
  z-index: 1;
  top: -28vh;
  left: 50%;
  width: min(1100px, 105vw);
  height: min(760px, 78vh);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(182,142,124,.30) 0%, rgba(182,142,124,.12) 46%, transparent 78%),
    radial-gradient(closest-side, rgba(123,139,128,.22) 0%, transparent 72%);
  filter: blur(60px);
  /* -50% centraliza; o eixo Y e a opacidade seguem a rolagem */
  transform: translate3d(-50%, calc(var(--scroll, 0) * 190px), 0);
  opacity: calc(1 - var(--scroll, 0) * 0.85);
  will-change: transform, opacity;
}
@media (min-width: 768px) {
  /* No desktop ele nasce mais à direita, atrás da coluna da foto */
  .hero-glow { left: 64%; top: -32vh; }
}

/* ---------------------------------------------------------- reveal --- */
/* O estado escondido só existe se o JS estiver vivo (classe .js posta por
   script inline no <head>). Sem JS o conteúdo aparece — nunca seção em branco. */

.js .reveal-init { opacity: 0; transform: translateY(24px); }

/* Precisa dos DOIS seletores: `.js .reveal-init` tem especificidade (0,2,0),
   então um `.reveal-in` sozinho (0,1,0) perderia e nada apareceria. */
.reveal-init.reveal-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* ------------------------------------------------------------ nav pill --- */
/* Barra viva: no topo ela é larga e sem moldura, fundida com o hero. Conforme
   a rolagem avança, --nav-p vai de 0 a 1 e ela encolhe, estreita e ganha
   vidro, fio de borda e sombra. No fim do trajeto virou pill. */

#nav-wrap {
  top: calc(14px - 6px * var(--nav-p));
}

#nav {
  height: calc(66px - 14px * var(--nav-p));
  max-width: calc(1180px - 260px * var(--nav-p));
  will-change: height, max-width;
}

/* A casca de vidro vive numa camada própria e só varia de opacidade. Colocar
   --nav-p dentro de rgba() via calc() invalida a cor durante a transição no
   Chrome e a barra pisca transparente. */
.nav-pill {
  position: relative;
  border-radius: 999px;
}
.nav-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--linha);
  box-shadow: 0 8px 32px rgba(28, 31, 37, 0.08);
  opacity: var(--nav-p);
  pointer-events: none;
  transition: background 200ms var(--ease), border-color 200ms var(--ease),
              box-shadow 200ms var(--ease);
}
.nav-pill > * { position: relative; z-index: 1; }

/* No celular a pill fica sobre conteúdo em movimento o tempo todo, e o custo
   de um backdrop-filter cresce com o raio. Metade do raio, um pouco mais de
   fundo pra compensar a legibilidade. */
@media (max-width: 767px) {
  .nav-pill::before {
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    background: rgba(250, 247, 242, 0.92);
  }
  .nav-pill.on-dark::before { background: rgba(34, 39, 31, 0.82); }
  #menu-mobile.nav-pill::before { background: rgba(250, 247, 242, 0.97); }
}

/* Enquanto está sobre o hero escuro, a pill inverte pra não sumir */
.nav-pill.on-dark::before {
  background: rgba(34, 39, 31, 0.74);
  border-color: rgba(250, 247, 242, 0.18);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.nav-pill.on-dark #menu-btn { color: var(--lt1); }

/* O menu mobile usa a mesma casca, mas é um painel: precisa de fundo sólido
   independente do progresso da rolagem. */
#menu-mobile.nav-pill::before {
  opacity: 1;
  background: rgba(250, 247, 242, 0.97);
  border-color: var(--linha);
  box-shadow: 0 12px 40px rgba(28, 31, 37, 0.14);
}
.nav-pill.on-dark .nav-link,
.nav-pill.on-dark .nav-brand { color: var(--lt1); }

.nav-link {
  position: relative;
  color: var(--ink-2);
  transition: color 200ms var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-pill.on-dark .nav-link:hover { color: #fff; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--salvia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease);
}
.nav-pill.on-dark .nav-link::after { background: var(--rose); }
.nav-link:hover::after,
.nav-link[aria-current="true"]::after { transform: scaleX(1); }

/* --------------------------------------------------------- FAB WhatsApp --- */

/* Nasce escondido: só entra quando a seção seguinte ao hero aparece. No hero
   ele competiria com os dois CTAs que já estão na tela. `visibility` junto da
   opacidade tira o botão do foco por teclado enquanto ele não existe. */
.wpp-fab {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.9);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease),
              visibility 280ms;
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 60;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
  animation: wpp-pulse 2.8s ease infinite;
}
@keyframes wpp-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(37,211,102,0.3), 0 0 0 0 rgba(37,211,102,0.38); }
  70%      { box-shadow: 0 10px 30px rgba(37,211,102,0.3), 0 0 0 16px rgba(37,211,102,0); }
}
.wpp-fab.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
body.menu-open .wpp-fab { display: none; }

/* ------------------------------------------------------- rolagem fluida --- */
/* Runtime do Lenis. Com ele ativo, a rolagem nativa some e quem manda é o
   loop de inércia, então o scroll-behavior do CSS precisa sair da frente. */

html.lenis,
html.lenis body { height: auto; }

html.lenis,
html.lenis body { scroll-behavior: auto !important; }

.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }

.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------ pilha de cartões --- */
/* Porte vanilla do ScrollStack (React Bits), só no mobile: em vez de passarem
   em fila, os três cartões do método param no topo da janela e se empilham.
   Aqui vai só o palco; os transforms são escritos pelo script (§9). */

.scroll-stack-end { width: 100%; height: 1px; }

@media (max-width: 767px) {
  /* Classe dobrada de propósito: o `grid` do Tailwind entra no <head> depois
     deste arquivo e empataria na especificidade. */
  .stack-on.stack-on { display: block; }

  /* A margem entre cartões é escrita pelo script, junto do resto da geometria. */
  .stack-on .scroll-stack-card {
    transform-origin: top center;
    backface-visibility: hidden;
    will-change: transform;
    /* O hover e o reveal também mexem em transform: brigariam com a pilha. */
    transition: none;
  }
  .stack-on .reveal-init {
    opacity: 1;
    transform: none;
  }
  /* Empilhado, o vidro deixaria o texto dos cartões de baixo atravessar o de
     cima. #424e45 é o mesmo tom do vidro sobre a faixa, só que opaco.
     Classe dobrada pra passar na frente de `.band-salvia .card-vidro`. */
  .stack-on.stack-on .card-vidro {
    background: #424e45;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
    /* Os cartões de passo são curtos (4 linhas). Na grade isso é elegante;
       parados no topo da janela viravam uma caixinha perdida numa faixa
       vazia. Empilhados eles ocupam a tela, com o texto centrado. */
    min-height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* O título gruda no topo enquanto os cartões passam por baixo. Fica como
     moldura da sequência em vez de sumir no primeiro palmo de rolagem.
     O fundo é o da própria faixa: sem ele os cartões apareceriam através. */
  /* `overflow: hidden` na seção criaria um scrollport e o sticky nunca
     grudaria. `clip` recorta igual sem virar container de rolagem. */
  #como-e { overflow: clip; }


  .band-salvia .stack-head {
    position: sticky;
    top: 82px;   /* a pill da nav termina em 60: isto dá respiro embaixo dela */
    z-index: 2;
    padding-bottom: 14px;
    background: var(--salvia-band);
  }
  /* A folga até o primeiro cartão sai da caixa grudada e vira margem de
     fluxo: assim o fundo fixo no topo fica só do tamanho do texto. */
  .band-salvia .stack-head { margin-bottom: 28px; }
  .band-salvia .stack-head h2 { margin-bottom: 0; }

  /* O marcador é o freio da pilha: quanto mais longe da última carta ele
     estiver, mais tempo o topo da pilha fica parado antes de soltar. */
  .stack-on + .scroll-stack-end {
    margin-top: 30vh;
    margin-bottom: 3rem;
  }
}

/* ---------------------------------------------------- divisor entalhe --- */
/* Fecha o §5 claro e abre a faixa sálvia do §6. A profundidade do entalhe é
   6% da altura, então a altura daqui é que decide se ele aparece. */

.divisor-entalhe {
  height: 72px;
  background-color: var(--salvia-band);
  background-image: var(--textura-linho);
  background-size: cover;
  background-position: center top;
  /* Sem border-box a imagem começaria abaixo da borda rosé de 2px, e a conta
     do deslocamento da seção logo adiante não fecharia. */
  background-origin: border-box;
  background-blend-mode: soft-light;
  /* A base cai em pixel fracionado e o fundo da página vazava como um fio
     claro na emenda com a seção. 1px de sobreposição resolve. */
  margin-bottom: -1px;
  border-top: 2px solid var(--rose);
  clip-path: polygon(43% 6%, 57% 6%, 60% 0, 100% 0, 100% 100%, 53% 100%, 0 100%, 0 53%, 0 0, 40% 0);
}

/* O divisor já faz o respiro da virada. Somado ao padding das duas seções
   davam 276px de vazio entre o fim do "sobre mim" e a eyebrow do §6. */
#sobre { padding-bottom: 2.5rem; }
.divisor-entalhe + section { padding-top: 1.75rem; padding-bottom: 3rem; }

@media (min-width: 768px) {
  #sobre { padding-bottom: 4rem; }
  .divisor-entalhe + section { padding-top: 2.5rem; padding-bottom: 3.5rem; }
}

/* ---------------------------------------------------------- inversão --- */
/* Regra vinda do Elementor: a seção vira branca e o título preto em 1.2s.
   `.elementor-heading-title` não existe neste projeto — fica no seletor só
   por paridade com o original; quem pinta aqui é o h2 da seção. */

.cor {
  background: #ffffff !important;
  transition: 1.2s !important;
}

.cor .elementor-heading-title,
.cor h2 {
  color: #000000 !important;
  transition: 1.2s !important;
}

/* O resto da seção era claro sobre fundo escuro: no branco sumiria. Mesma
   duração, pra tudo virar junto. */
.cor .text-w70,
.cor .eyebrow-mute { color: var(--ink-2) !important; transition: 1.2s; }

.cor .shine-text {
  background-image: linear-gradient(90deg,
    #45584d 0%, #45584d 38%,
    #7b8b80 47%, #96a396 53%,
    #7b8b80 62%, #45584d 100%);
}

/* A costura logo abaixo saía do verde-grafite: no branco daria um degrau. */
.cor + .seam-to-light {
  background: linear-gradient(#ffffff 0%, var(--lt1) 100%);
  transition: 1.2s;
}

/* ------------------------------------------------------- borrão gradual --- */
/* Porte vanilla do GradualBlur (React Bits). As camadas são geradas pelo
   script: cada uma tem um blur maior e uma máscara que a revela só na sua
   fatia, o que dá um degradê de foco em vez de um corte seco. */

.gradual-blur {
  position: absolute;
  pointer-events: none;
  isolation: isolate;
  transition: opacity 400ms var(--ease-out);
}
.gradual-blur-page {
  position: fixed;
  left: 0;
  right: 0;
}
.gradual-blur-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.gradual-blur-inner > div { position: absolute; inset: 0; }

/* Some perto do rodapé: texto claro sobre fundo escuro borrado é ilegível. */
.gradual-blur.is-off { opacity: 0; }

#page-blur {
  bottom: 0;
  height: 6rem;
  z-index: 40;   /* abaixo da nav (50) e do FAB (60) */
}

/* Cinco camadas de backdrop-filter fixas na base obrigam o navegador a
   reborrar a faixa a cada quadro enquanto a pilha de cartões se move por
   baixo. No desktop passa; no celular é o item mais caro da tela e o menos
   visível, e era parte do engasgo na rolagem. */
@media (max-width: 767px) {
  #page-blur { display: none; }
}

/* Sem backdrop-filter o componente vira um véu cinza sobre a página. Melhor
   não existir. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gradual-blur { display: none; }
}

/* ------------------------------------------------------------ utilidades --- */

/* Costuras entre claro e escuro */
.seam-to-dark  { height: 64px; background: linear-gradient(var(--lt1) 0%, var(--dk1) 100%); }
.seam-to-light { height: 64px; background: linear-gradient(var(--dk1) 0%, var(--lt1) 100%); }

/* Faixa sálvia sólida — o respiro que a Bruna usa entre blocos claros */
/* Textura de linho da faixa sálvia. Fica numa variável porque quem a usa são
   dois elementos irmãos — a seção e o divisor entalhe logo acima dela — e o
   base64 não deve entrar duas vezes no arquivo.
   O blend é soft-light contra o background-color: a cor da faixa continua
   sendo o sólido, a imagem só modula luz e sombra. Se ela falhar ou ainda não
   tiver carregado, a faixa fica idêntica ao que era antes. */
:root { --textura-linho: url("img/textura-linho.webp"); }

.band-salvia {
  color: var(--lt1);
  background-color: var(--salvia-band);
  background-image: var(--textura-linho);
  background-size: cover;
  /* Deslocada pela altura do divisor, que mostra os primeiros 72px da mesma
     imagem na mesma escala: assim a textura atravessa a emenda como um pedaço
     só de tecido, em vez de dois recortes com tons diferentes. */
  background-position: 50% -71px;
  /* Mesma origem do divisor. No padrão (padding-box) a imagem começaria 40px
     abaixo, no fim do padding da seção, e a emenda não fecharia. */
  background-origin: border-box;
  background-blend-mode: soft-light;
}

/* No celular a faixa fica sem textura: só o sálvia sólido.

   A foto de linho é paisagem e aqui a faixa vira quase um retrato, então
   qualquer enquadramento amplia o tecido a ponto de virar mancha. Somem-se o
   cabeçalho grudado, que precisa de fundo opaco e brigava com o fundo atrás
   dele, e o resultado nunca chegou perto do que a textura entrega no desktop.
   Cor sólida é a decisão certa nesta largura — e volta a ser o mesmo respiro
   sólido entre blocos claros que a seção sempre foi.

   Precisa vir DEPOIS das regras de .band-salvia — mesma especificidade, quem
   decide é a ordem. */
@media (max-width: 767px) {
  .band-salvia,
  .divisor-entalhe { background-image: none; }
}

/* Textura pontilhada discreta */
.dots-light {
  background-image: radial-gradient(rgba(28,31,37,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dots-dark {
  background-image: radial-gradient(rgba(250,247,242,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------------------------------------------------------- scrollbar --- */
/* A barra padrão do Windows é cinza-azulada e briga com a paleta quente.
   Aqui ela vira um fio sálvia sobre a superfície off-white. Os carrosséis
   continuam sem barra: as regras deles são por classe e ganham em
   especificidade. */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--salvia) var(--lt2);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--lt2); }
::-webkit-scrollbar-thumb {
  background: var(--salvia);
  border-radius: 999px;
  border: 3px solid var(--lt2);   /* folga que afina o polegar sem sumir com ele */
}
::-webkit-scrollbar-thumb:hover { background: var(--salvia-ink); }
::-webkit-scrollbar-corner { background: var(--lt2); }

/* Âncoras param abaixo da nav fixa em vez de sumir atrás dela */
[id]:is(section, footer) { scroll-margin-top: 90px; }

.chip-strip { scrollbar-width: none; }
.chip-strip::-webkit-scrollbar { display: none; }


/* ------------------------------------------------------------- rodapé --- */

.rodape-link {
  display: inline-block;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 13.5px;
  color: rgba(250, 247, 242, 0.62);
  transition: color 200ms var(--ease), transform 200ms var(--ease);
}
.rodape-link:hover { color: var(--rose); transform: translateX(3px); }

.rodape-contato {
  display: flex;
  gap: 10px;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(250, 247, 242, 0.62);
  transition: color 200ms var(--ease);
}
.rodape-contato svg { margin-top: 3px; color: var(--rose); opacity: .8; }
a.rodape-contato:hover { color: var(--lt1); }
a.rodape-contato:hover svg { opacity: 1; }
.rodape-contato--estatico { cursor: default; }

.rodape-social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 242, 0.16);
  color: rgba(250, 247, 242, 0.7);
  transition: color 200ms var(--ease), border-color 200ms var(--ease),
              background-color 200ms var(--ease), transform 200ms var(--ease);
}
.rodape-social:hover {
  color: var(--dk1);
  background: var(--rose);
  border-color: var(--rose);
  transform: translateY(-2px);
}

/* Assinatura: o nome ocupa a largura toda e fica quase apagado. O foco de luz
   que revela as letras segue o cursor pelas variáveis --mx/--my, escritas no
   pointermove (§14 do script). Mesma técnica do .shine-text — gradiente
   recortado pelo texto — só que a posição é o mouse em vez do tempo. */
.rodape-assinatura {
  margin: 52px 0 26px;
  overflow: hidden;
}
.rodape-assinatura-txt {
  display: block;
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-size: clamp(42px, 12.6vw, 198px);
  letter-spacing: -0.02em;
  /* O letter-spacing também é aplicado DEPOIS do último caractere, e a serifa
     do "a" de Almeida ainda avança além da largura de avanço do glifo: sem
     esta folga o overflow da caixa comia o rabo da letra. */
  padding-right: 0.06em;
  line-height: 1.16;
  white-space: nowrap;
  background-image: radial-gradient(circle 190px at var(--mx, -999px) var(--my, 50%),
                    var(--rose) 0%, rgba(182, 142, 124, 0.55) 38%, rgba(250, 247, 242, 0.07) 72%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.rodape-base {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 26px;
  border-top: 1px solid rgba(250, 247, 242, 0.1);
}
@media (min-width: 768px) {
  .rodape-base { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .rodape-link:hover, .rodape-social:hover { transform: none; }
}



/* ------------------------------------------------------------- CTA final --- */
/* Uma linha em qualquer largura. O nowrap é a garantia; o respiro menor abaixo
   de 400px é o que faz a garantia caber em vez de vazar do container. */
#cta-final .btn-shimmer { white-space: nowrap; }

@media (max-width: 400px) {
  #cta-final .btn-shimmer { padding-left: 32px; padding-right: 32px; }
}

/* ------------------------------------------------- rodapé no celular --- */
/* Sem hover no toque, nada denuncia que os itens do rodapé são clicáveis. Uma
   passada de luz lenta pelos links resolve — é o mesmo shine-passada das
   headlines, com o gradiente recortado pelo texto.
   Os atrasos escalonados existem pra fila não piscar em bloco: cada coluna
   entra num tempo, e o olho lê movimento em vez de um flash. */
@media (max-width: 767px) {
  /* O container tem 20px de recuo fixo de cada lado, que pesa muito mais numa
     tela de 390 do que numa de 1440, e a barra de rolagem ainda leva outros
     10px: com os mesmos 12.6vw a assinatura passava da caixa e o overflow
     comia o "a" de Almeida de novo. */
  .rodape-assinatura-txt { font-size: 11.3vw; }

  .rodape-link {
    background-image: linear-gradient(90deg,
      rgba(250, 247, 242, 0.62) 0%, rgba(250, 247, 242, 0.62) 38%,
      var(--rose) 47%, #d8bcae 53%,
      var(--rose) 62%, rgba(250, 247, 242, 0.62) 100%);
    background-size: 250%;
    background-position: 200% center;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shine-passada 7s ease-in-out infinite;
  }
  .rodape-link:nth-child(2)  { animation-delay: .35s; }
  .rodape-link:nth-child(3)  { animation-delay: .7s; }
  .rodape-link:nth-child(4)  { animation-delay: 1.05s; }
  .rodape-link:nth-child(5)  { animation-delay: 1.4s; }
  .rodape-link:nth-child(6)  { animation-delay: 1.75s; }
  li:nth-child(2) > .rodape-link { animation-delay: .35s; }
  li:nth-child(3) > .rodape-link { animation-delay: .7s; }
  li:nth-child(4) > .rodape-link { animation-delay: 1.05s; }
  li:nth-child(5) > .rodape-link { animation-delay: 1.4s; }
  li:nth-child(6) > .rodape-link { animation-delay: 1.75s; }

  /* No toque, o arrasto vira seleção de texto e o rodapé fica pintado de azul.
     Os dados de contato ficam de fora de propósito: telefone, e-mail e
     endereço são justamente o que alguém quer segurar para copiar. */
  body > footer { -webkit-user-select: none; user-select: none; }
  .rodape-contato span { -webkit-user-select: text; user-select: text; }

  /* O realce cinza do toque briga com a passada de luz. */
  .rodape-link, .rodape-social { -webkit-tap-highlight-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .rodape-link {
    animation: none !important;
    -webkit-text-fill-color: rgba(250, 247, 242, 0.62);
    color: rgba(250, 247, 242, 0.62);
  }
}

/* ---------------------------------------------------- prefers-reduced --- */

@media (prefers-reduced-motion: reduce) {
  .shine-text, .shine-text-dark, .shine-live,
  .btn-shimmer::before,
  .marquee-track,
  .wpp-fab { animation: none !important; }

  /* O borrão para de acompanhar a rolagem, mas continua visível */
  .hero-glow { transform: translate3d(-50%, 0, 0) !important; opacity: .8 !important; }

  .shine-text      { -webkit-text-fill-color: var(--rose);       color: var(--rose); }
  #sobre .shine-text,
  #investimento .shine-text { -webkit-text-fill-color: var(--rose-ink); color: var(--rose-ink); }
  .band-salvia .shine-text  { -webkit-text-fill-color: #dcb9a6; color: #dcb9a6; }
  .shine-text-dark { -webkit-text-fill-color: var(--salvia-ink); color: var(--salvia-ink); }

  .js .reveal-init { opacity: 1; transform: none; }
  .reveal-init.reveal-in { transition: none; }

  /* A nav ainda muda de estado, só que sem interpolar durante a rolagem */
  #nav, .nav-pill { transition: none; }
  .gradual-blur { transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------ faixa sálvia (§6) --- */
/* Número fantasma sobre a faixa sólida: o sálvia sobre sálvia sumiria,
   então aqui ele é off-white rebaixado. */
.ghost-num-band {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 32px;
  line-height: 1;
  color: var(--lt1);
  opacity: 0.42;
}
.band-salvia .eyebrow { color: #f0e4dd; }
.band-salvia .shine-text {
  background-image: linear-gradient(90deg,
    #dcb9a6 0%, #dcb9a6 38%,
    #eed5c7 47%, #f7e7dc 53%,
    #eed5c7 62%, #dcb9a6 100%);
}

/* O ponto da marca na nav: rosé claro sobre a pill clara dá 2.75:1.
   Acompanha o estado da pill. */
/* Marca da logo. O disco claro existe porque o traço escuro do "A" perde
   contraste quando a pill inverte pro estado on-dark sobre o hero e no rodapé. */
.brand-mark {
  display: block;
  width: auto;
  object-fit: contain;
  padding: 3px;
  border-radius: 999px;
  background: rgba(250, 247, 242, 0.92);
  box-shadow: 0 0 0 1px rgba(69, 88, 77, 0.1);
}
/* No topo a pill mostra o nome por extenso; assim que a rolagem começa, ele
   cede lugar ao símbolo. Os dois derivam do mesmo --nav-p que já comanda
   altura, largura e vidro da barra, então a troca acompanha a inércia do Lenis
   e é reversível no meio do caminho, sem estado próprio no JS. */
.brand-swap {
  --w-word: 170px;
  --w-mark: 32px;
  position: relative;
  display: block;
  height: 40px;
  width: calc(var(--w-mark) + (var(--w-word) - var(--w-mark)) * (1 - var(--nav-p)));
}
.brand-word, .nav-logo {
  position: absolute;
  left: 0;
  top: 50%;
  white-space: nowrap;
}
.brand-word {
  opacity: calc(1 - var(--nav-p) * 2.2);
  transform: translateY(-50%) translateX(calc(-8px * var(--nav-p)));
}
.nav-logo {
  width: var(--w-mark);
  height: var(--w-mark);
  opacity: calc(var(--nav-p) * 2.2 - 1.2);
  transform: translateY(-50%) translateX(calc(10px * (1 - var(--nav-p))));
}
.nav-pill.on-dark .nav-logo { box-shadow: 0 0 0 1px rgba(250, 247, 242, 0.2); }
.footer-logo { height: 40px; box-shadow: 0 0 0 1px rgba(250, 247, 242, 0.14); }
@media (prefers-reduced-motion: reduce) { .nav-logo { transition: none; } }

.nav-dot { color: var(--rose-ink); }
.nav-pill.on-dark .nav-dot { color: var(--rose); }

/* Faixa sálvia §6.
   Os cards de vidro CLAREIAM o fundo por baixo do texto: rgba(250,247,242,.12)
   sobre #4d5c52 vira #626f65, e aí o corpo cai pra 4.16:1. Por isso o vidro
   aqui é ESCURO — abaixa o fundo em vez de levantar. */
.band-salvia .eyebrow-mute { color: rgba(250,247,242,.78); }
.band-salvia .card-vidro {
  background: rgba(26, 30, 24, 0.22);
  border: 1px solid rgba(250, 247, 242, 0.20);
}

/* ---------------------------------------------------------- hero img --- */
/* A foto é um retrato (1:1.09) usado num hero landscape. object-position faz
   todo o enquadramento — assim nada é recortado no build e cada viewport
   escolhe o melhor pedaço.
   Mobile: rosto centralizado e alto. Desktop: rosto à direita, longe do texto. */
.hero-img { object-position: 50% 10%; }

/* No mobile o hero deixa de ser texto sobre foto e passa a ser duas camadas
   empilhadas: a foto ocupa o topo da tela inteira e o conteúdo vem embaixo,
   emergindo do escuro. Antes a foto vivia sob um véu de 88% e virava textura;
   assim ela aparece de verdade e a leitura do texto fica limpa. */
@media (max-width: 767px) {
  /* !important porque o min-height e o padding-top do hero são estilo inline
     no <section>, feitos pro layout de desktop. */
  #top {
    display: block;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 3.5rem;
  }

  #top .hero-media {
    position: relative;
    inset: auto;
    height: 58svh;
    min-height: 320px;
  }

  /* Escurece o topo o bastante pra nav clara ler sobre a foto, abre no meio
     pra ela respirar e fecha no dk1 pra emendar com o bloco de texto. */
  #top .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      rgba(34, 39, 31, 0.55) 0%,
      rgba(34, 39, 31, 0.12) 26%,
      rgba(34, 39, 31, 0.35) 62%,
      rgba(34, 39, 31, 0.88) 86%,
      var(--dk1) 100%);
  }

  #top .hero-veu-m { display: none; }

  /* O texto começa dentro da barra final do degradê, então parece sair da foto */
  #top .container-x { padding-top: 1.5rem; }

  .hero-img { object-position: 50% 18%; }
}

/* No desktop a foto vira uma coluna à direita em vez de ocupar a tela toda.
   Isso resolve o zoom: um retrato esticado num hero landscape sempre aproxima
   demais. Como coluna, ela aparece inteira e o texto ganha a esquerda limpa. */
@media (min-width: 768px) {
  /* !important porque o .inset-0 do Tailwind (left:0) vence por ordem de
     cascata e jogaria a coluna de volta pra esquerda. */
  .hero-media {
    left: auto !important;
    right: 0 !important;
    width: 54%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  }
  .hero-img { object-position: 58% 18%; }
}
@media (min-width: 1280px) {
  .hero-media { width: 50%; }
  .hero-img { object-position: 55% 16%; }
}

/* ------------------------------------------- carrossel de depoimentos --- */
/* Carrossel nativo: overflow-x + scroll-snap. As setas só empurram o scroll,
   então arrastar, roda do mouse, trackpad e teclado continuam funcionando
   mesmo se o JS falhar. Sem biblioteca. */

.depo-track {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Nada de scroll-behavior: smooth aqui. Ele transformaria cada incremento
     do deslize automático numa animação, e os quadros se cancelariam entre si
     deixando a fila parada; o salto do loop infinito também deixava de ser
     instantâneo. As setas e o teclado pedem behavior smooth no próprio
     scrollBy, então continuam suaves. */
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.depo-track::-webkit-scrollbar { display: none; }

/* As pontas somem no fundo em vez de cortarem o cartão a seco: dá a leitura
   de que a fila continua fora da tela. */
.depo-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

/* Com a máscara ligada o anel de foco desapareceria justamente nas bordas,
   que é onde ele mais precisa aparecer. */
.depo-track:focus-visible {
  outline: 2px solid var(--salvia-ink);
  outline-offset: 4px;
  border-radius: 12px;
  -webkit-mask-image: none;
          mask-image: none;
}

.depo-card {
  flex: 0 0 auto;
  /* 84vw no mobile (deixa espiar o próximo card, sinalizando que arrasta);
     no desktop 310px, pra 4 cards não caberem justos na tela — se coubessem,
     o carrossel não teria o que deslizar. */
  width: min(84vw, 310px);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--lt3);                 /* branco, como pedido */
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(28, 31, 37, 0.05);
  transition: box-shadow 250ms var(--ease), transform 250ms var(--ease);
}
.depo-card:hover {
  box-shadow: 0 10px 28px rgba(28, 31, 37, 0.10);
  transform: translateY(-2px);
}

.carrossel-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--lt3);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.carrossel-btn:hover:not(:disabled) {
  background: var(--salvia-ink);
  border-color: var(--salvia-ink);
  color: var(--lt1);
}
/* O carrossel é infinito, então as setas nunca desabilitam.
   A regra fica aqui só como rede de segurança se o loop for desligado. */
.carrossel-btn:disabled { opacity: .35; cursor: default; }

/* Clones do loop não devem ser lidos duas vezes por leitor de tela —
   o aria-hidden é posto pelo script; isto só reforça que são decorativos. */
.depo-card[data-clone] { user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .depo-track { scroll-behavior: auto; }
  .depo-card:hover { transform: none; }
}

/* ------------------------------------------------ comparativo (§7) --- */
/* O problema anterior: as duas colunas tinham a mesma largura, o mesmo fundo
   transparente e o mesmo tamanho de título. A única diferença era um filete de
   2px no topo — invisível de relance. Num comparativo, a coluna que você quer
   que vença precisa ter PESO, não um detalhe.
   A vencedora agora é o único bloco escuro no meio da página clara. */

/* — Coluna perdedora: recuada, sem cor, ligeiramente menor — */
.comp-col--off {
  background: transparent;
  border: 1px solid var(--linha);
  opacity: .92;
}
@media (min-width: 768px) {
  /* fica um degrau abaixo, reforçando a hierarquia sem precisar de rótulo */
  .comp-col--off { margin-top: 18px; }
}
.comp-titulo-off { color: var(--ink-3); }
.comp-item-off {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: rgba(85, 92, 99, .35);
  text-decoration-thickness: 1px;
}
.comp-item-off svg { color: var(--bordo); opacity: .78; }

/* — Coluna vencedora: sálvia sólida, elevada, com selo — */
.comp-col--on {
  background: var(--salvia-band);
  border: 1px solid var(--salvia-band);
  box-shadow: 0 14px 40px rgba(34, 39, 31, .18);
  position: relative;
}
.comp-titulo-on { color: var(--lt1); }
.comp-item-on { color: rgba(250, 247, 242, .94); }
.comp-item-on svg { color: #cfe0cd; }

/* — Inclusos: a ficha técnica da consulta. Card na seção de investimento, logo
     abaixo dos planos: é o que responde "o que eu recebo" na falta do preço. — */
.comp-inclui {
  margin-top: 34px;
  padding: 28px 30px 26px;
  background: var(--lt3);
  border: 1px solid var(--linha);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(34, 39, 31, .06);
}
/* Fio curto acima do título: marca o bloco pelo mesmo vocabulário tipográfico
   do resto da página, sem faixa colorida de template. */
.comp-inclui-titulo {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.15;
}
.comp-inclui-titulo::before {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin-bottom: 14px;
  background: var(--salvia);
}
.comp-inclui-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}
.comp-inclui-item {
  display: flex;
  gap: 9px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.3;
}
.comp-inclui-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--salvia-ink);
}
/* Quebra só no mobile: o fecho tem que ler em duas frases, uma por linha. */
.br-mobile { display: inline; }
@media (min-width: 768px) { .br-mobile { display: none; } }

.comp-inclui-nota {
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.4;
}
@media (max-width: 520px) {
  .comp-inclui-grid { grid-template-columns: 1fr; gap: 8px; }
}