/*
Theme Name: FVS Builder
Theme URI: https://felipevargas.studio
Author: FVS Design e Tecnologia
Description: Tema base do FVS Studio (Felipe Vargas Studio) para projetos WordPress — foco em performance, SEO/GEO, segurança e conteúdo gerenciável via ACF.
Version: 1.0.0
Text Domain: fvs-builder
*/

/* ==========================================================================
   One Page · Dra. Amira Mari
   Home + header + footer (integracao.md 2.1). Fonte dos valores: spec.md
   seção 2, conferida com o Figma final (frame ➤ Dev). Nenhum valor de cor,
   fonte, espaço ou radius fora do bloco :root.
   Breakpoints (spec seção 3; @media não aceita var()):
   1240 (burger) · 1100 · 900 · 600 · hover:none · reduced-motion
   ========================================================================== */

/* Fontes hospedadas no tema (subset latin, cobre o português). Com preload no <head> e
   font-display: block, o texto não é desenhado com a fonte de sistema e trocado depois:
   é isso que evitava o "pulo" de tamanho dos itens da navbar ao recarregar. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 500;  /* fonte variável: um arquivo serve 300, 400 e 500 */
  font-display: block;
  src: url('assets/fonts/outfit-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/libre-baskerville-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/libre-baskerville-italic-latin.woff2') format('woff2');
}

:root {
  /* ---------- Cores ---------- */

  /* Primária — Verde Escuro (base = 800) */
  --verde-50:  #F6F8F3;  --verde-100: #D9DCD6;  --verde-200: #BEC1B9;
  --verde-300: #A3A79E;  --verde-400: #898D83;  --verde-500: #707469;
  --verde-600: #585D51;  --verde-700: #414639;  --verde-800: #2B3023;
  --verde-900: #14170F;

  /* Verde Claro — a oliva do manual (base = 500) */
  --verde-claro-50:  #F6F8EF;  --verde-claro-100: #E6EADA;  --verde-claro-200: #CED5BB;
  --verde-claro-300: #B1B999;  --verde-claro-400: #919A76;  --verde-claro-500: #6E745C;
  --verde-claro-600: #535843;  --verde-claro-700: #3B3F2F;  --verde-claro-800: #25281C;
  --verde-claro-900: #13150D;

  /* Secundária — Creme (base = 100; escala refeita em 09/11, matiz quente) */
  --creme-50:  #F9F6F2;  --creme-100: #F0EBE2;  --creme-200: #DED6CC;
  --creme-300: #C6BCAF;  --creme-400: #AC9F90;  --creme-500: #918474;
  --creme-600: #736757;  --creme-700: #564B3E;  --creme-800: #3A3126;
  --creme-900: #201911;

  /* Secundária — Dourado (base = 400; só sólido) */
  --dourado-50:  #FEF6E9;  --dourado-100: #EFE3CE;  --dourado-200: #E1D0B4;
  --dourado-300: #D2BD9A;  --dourado-400: #C4AB80;  --dourado-500: #A28C65;
  --dourado-600: #826E4B;  --dourado-700: #635132;  --dourado-800: #45361B;
  --dourado-900: #291D05;

  /* Escala de cinza — fixa FVS (= Neutral/* do Figma) */
  --white:         #FFFFFF;
  --grayscale-50:  #FAFAFB;  --grayscale-100: #F1F2F3;  --grayscale-200: #E2E4E6;
  --grayscale-300: #C9CCCF;  --grayscale-400: #A0A4A8;  --grayscale-500: #71767B;
  --grayscale-600: #4C5157;  --grayscale-700: #363A3F;  --grayscale-800: #212326;
  --grayscale-900: #0B0C0E;  --dark: #000;

  /* Valores do design que não são styles no Figma (spec 2.1, pendência #14) */
  --ui-text:         #6B6B6B;  /* texto corrido sobre fundo claro */
  --ui-line:         #E0E0E0;  /* divisores em fundo claro */
  --ui-gradient-end: #D2DAC5;  /* fim do degradê dos títulos (início = --verde-500) */
  --ui-glass:        rgba(42, 37, 37, .24);  /* navbar translúcida sobre o hero */
  --ui-glass-light:      rgba(249, 246, 242, .72);  /* navbar rolada: vidro claro (proposta FVS; creme-50 a 72%) */
  --ui-glass-light-edge: rgba(43, 48, 35, .10);     /* filete de baixo da navbar clara (verde-800 a 10%) */
  --ui-hero-title:      #F8F6F4;  /* H1 do hero, 1ª parte (literal do Figma, ≠ --creme-50) */
  --ui-hero-title-soft: #D4CFC5;  /* H1 do hero, 2ª parte, e barras do burger (literal do Figma) */
  --ui-hero-base:       #412D25;  /* fundo atrás da foto do hero */

  /* Botão de vidro (Reconhecimento e Quando começar): preenchimento Figma 156/156/156 a 26% */
  --ui-glass-fill:       rgba(156, 156, 156, .26);
  --ui-glass-fill-hover: rgba(156, 156, 156, .38);
  --ui-cover-tint:       rgba(0, 0, 0, .20);   /* véu sobre a capa do vídeo */
  --ui-popup-bg:         rgba(20, 23, 15, .92); /* fundo do popup de vídeo (= --verde-900) */
  /* 2ª linha do título de Quando começar: degradê dourado (Figma 2171:7855) */
  --ui-title-gold: linear-gradient(87.08deg, rgb(159, 140, 112) 10.271%, rgb(150, 130, 102) 24.086%, rgb(216, 202, 176) 40.082%, rgb(237, 228, 216) 60.52%, rgb(212, 187, 155) 80.798%);
  /* Seção Na prática (sobre a oliva) e Consulta/Plano de cuidado: literais do Figma */
  --ui-btn-edge:   #ACB29B;  /* borda do botão primário sobre a oliva + fim do degradê da frase */
  --ui-olive-line: #737A5E;  /* divisores dos fatos (o círculo do ícone já vem no SVG) */
  --ui-isnot:      #C9CCC0;  /* coluna "Não é" da Medicina canabinoide */
  --ui-bg-soft:    #F5F5F5;  /* fundo da Filosofia */
  --ui-line-dark:  #3D3D3D;  /* fundo da foto do Sobre, texto das iniciais e sinal do acordeão */
  --ui-line-darker: #333333;  /* divisores do footer */
  --ui-muted:      #C7C7C7;  /* barras do botão de pausa dos Depoimentos */
  /* Card de depoimento: degradê translúcido sobre a oliva (Figma 2171:8503; o ângulo é 134,29° no desktop e 122,25° no mobile) */
  --ui-depo-card-from: rgba(88, 93, 81, .34);
  --ui-depo-card-to:   rgba(65, 70, 57, .34);
  /* 1ª linha da Filosofia: degradê dourado, desktop e mobile (Figma 2171:8454 · 2139:374; o ângulo muda) */
  --ui-filosofia-gold: linear-gradient(86.97deg, rgb(159, 140, 112) 10.271%, rgb(150, 130, 102) 24.086%, rgb(216, 202, 176) 40.082%, rgb(237, 228, 216) 60.52%, rgb(212, 187, 155) 80.798%);
  /* Filete dourado em degradê horizontal (traço de 1px da Consulta e de 2px do Plano de cuidado) */
  --ui-divider-arrow: linear-gradient(45.88deg, #9F8C70 -188.08%, #968266 -112.21%, #D8CAB0 -24.37%, #EDE4D8 87.87%, #D4BB9B 199.23%);  /* Figma "Arrow": paradas calculadas da matriz do gradiente (o código gerado do Figma troca o sinal das 3 primeiras) */
  --ui-gold-rule: linear-gradient(90deg, rgba(210, 189, 154, 0) 0%, var(--dourado-300) 31.8%, var(--dourado-400) 51.3%, var(--dourado-300) 66.8%, rgba(210, 189, 154, 0) 100%);

  /* Card de modalidades do hero (vidro) */
  --ui-modes-fill:    rgba(255, 255, 255, .21);
  --ui-modes-tint:    rgba(42, 37, 37, .08);
  /* Traço de 0,6px em degradê (Figma 2171:7733: branco 100% → 0%, convertido p/ CSS: 217°, .73 em 0% → 0 em 79%) */
  --ui-modes-stroke:  linear-gradient(217deg, rgba(255, 255, 255, .73) 0%, rgba(255, 255, 255, 0) 79%);

  /* Botão primário: degradê radial em oliva (Figma 2171:7727) */
  --btn-olive-1: var(--verde-claro-500);  --btn-olive-2: #4D5240;  --btn-olive-3: #3C4131;
  --btn-circle:  #4C5341;
  --btn-edge:    rgba(112, 116, 105, .65);

  /* ---------- Tipografia ---------- */
  --font-primary:   'Outfit', system-ui, sans-serif;
  --font-secondary: 'Libre Baskerville', Georgia, serif;

  /* Desktop (referência 1440) */
  --fs-h1:      56px;  --fs-h2:      52px;  --fs-h2-xl: 60px;  --fs-h2-sm: 32px;
  --fs-h3:      30px;  --fs-h3-sm:   24px;  --fs-h4:     22px;
  --fs-lead:    19px;  --fs-text-1:  18px;  --fs-text-2: 15px;
  --fs-caption: 13px;  --fs-label:   12px;

  /* Mobile (Figma ➤ Dev, frame 2139:9, 390px) */
  --fs-h1-m: 40px;  --fs-lead-m: 18px;  --fs-text-m: 16px;  --fs-menu-m: 26px;  /* links do menu aberto (Figma 2154:9) */

  --lh-title: 1.18;  --lh-text: 1.65;  --lh-tight: 1.3;
  --ls-eyebrow: .16em;  --ls-btn: .12em;  --ls-title: -.01em;

  /* ---------- Espaçamento ---------- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  56px;
  --space-2xl: 100px;  /* padding vertical padrão das seções */

  /* ---------- Radius ---------- */
  --radius-xs:     4px;
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius-pill:   100px;
  --radius-circle: 50%;
  --radius-phone:  48px;

  /* ---------- Sombras e blur ---------- */
  /* Raios = os do Figma (60, 24…). O código gerado mostra metade (σ do drop-shadow de filtro): box-shadow usa o raio inteiro */
  --shadow-card:  0 30px 60px rgba(0, 0, 0, .20);
  --shadow-glass: 0 10px 24px rgba(0, 0, 0, .20);
  --shadow-glass-inner:      inset 0 3px 14px rgba(0, 0, 0, .25);  /* botão de vidro sobre fundo escuro */
  --shadow-glass-inner-soft: inset 0 3px 14px rgba(0, 0, 0, .08);  /* botão de vidro sobre o celular */
  --shadow-modes: 0 24px 56px rgba(0, 0, 0, .14);
  --shadow-phone: 0 30px 60px rgba(0, 0, 0, .18);
  --shadow-loc:   0 16px 48px rgba(0, 0, 0, .06);
  --shadow-pin:   0 6px 8px rgba(0, 0, 0, .14);
  --shadow-phone-lg: 0 32.643px 65.286px rgba(0, 0, 0, .30);  /* celular da Medicina canabinoide (108,81% do --shadow-phone) */
  --shadow-divider-arrow: 1px 1px 3px rgba(0, 0, 0, .03), 3px 4px 5px rgba(0, 0, 0, .03), 7px 8px 6px rgba(0, 0, 0, .02), 12px 15px 8px rgba(0, 0, 0, .01);
  --blur-glass: 11px;  --blur-nav: 12px;  --blur-card: 10px;

  /* ---------- Layout e movimento ---------- */
  --container: 1216px;  /* 1440 − 2 × 112: o conteúdo não se expande acima disso */
  --gut: 112px;  /* padding lateral: 112 desktop · 40 tablet · 16 mobile */
  --pad-x: max(var(--gut), calc((100% - var(--container)) / 2));
  --navbar-h: 86px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --line-dur: .4s;  /* sublinhado que corre: mesma duração e curva em menu, rodapé, abas e links */
  --line-ease: var(--ease);
}

/* Scroll customizado (templates/scroll-selecao.md) · cor de destaque = Verde Escuro, a primária do projeto */
:root {
  --sbw: 8px;
  --sbc: var(--verde-800);
}
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }
#sb {
  position: fixed;
  top: 0;
  right: 2px;
  width: var(--sbw);
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}
#sb i {
  position: absolute;
  right: 0;
  width: 100%;
  border-radius: 999px;
  background: var(--sbc);
  opacity: 0;
  transition: opacity .35s ease;
}
html.scrolling #sb i { opacity: 1; }
@media (max-width: 1024px) { #sb { display: none; } }

/* Seleção de texto */
::selection      { color: var(--white); background-color: var(--verde-800); }
::-moz-selection { color: var(--white); background-color: var(--verde-800); }

/* Smooth scroll (templates/smooth-scroll.md) · nativo como fallback do Lenis */
html { scroll-behavior: smooth; }

/* DEPOIS da regra acima, senão perde a cascata */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--navbar-h); -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
body {
  font-family: var(--font-primary);
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--ui-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
.site-main--whitepage { overflow-x: visible; }  /* o <main> das páginas em branco só existe por acessibilidade: não corta nada */
.site-main:focus { outline: 0; }  /* alvo do skip-link (tabindex -1): recebe foco por código, sem anel */

/* Skip-link (acessibilidade): escondido até receber foco pelo teclado */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-primary);
  font-size: var(--fs-caption);
  color: var(--creme-50);
  background: var(--verde-800);
  transform: translateY(-100%);
}
.skip-link:focus { transform: translateY(0); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--dourado-400); outline-offset: 3px; }
body.menu-open { overflow: hidden; }

/* Eyebrow: texto literal "|  TEXTO  |" com as barras (spec 2.2.1) */
.hero__content-label,
.areas__header-eyebrow,
.quando-comecar__header-eyebrow,
.consulta__content-header-eyebrow,
.como-funciona__plan-eyebrow,
.plano-de-cuidado__header-eyebrow,
.cannabis__layout-content-header-eyebrow,
.sobre-mim__layout-content-header-eyebrow,
.depoimentos__top-header-eyebrow,
.duvidas__header-eyebrow,
.cta-final__layout-cta-eyebrow,
.aga-modal__header-eyebrow {
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: var(--ls-eyebrow);
  white-space: pre-wrap;
}
.consulta__content-header-eyebrow,
.como-funciona__plan-eyebrow { line-height: 1.6; }

/* Revelar ao rolar (wireframe): só esconde se houver JS e o movimento for permitido */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  /* Colunas lado a lado (wireframe rv-l / rv-r): a da esquerda entra vindo da esquerda, a da direita vindo da direita.
     No tablet/celular (1 coluna) voltam a subir, como o resto. */
  [data-reveal="left"] { transform: translateX(-36px); }
  [data-reveal="right"] { transform: translateX(36px); }
  [data-reveal].is-visible { opacity: 1; transform: none; }
  @media (max-width: 900px) {
    [data-reveal="left"],
    [data-reveal="right"] { transform: translateY(28px); }
    [data-reveal="left"].is-visible,
    [data-reveal="right"].is-visible { transform: none; }
  }
  [data-reveal-delay="1"] { transition-delay: .12s; }
  [data-reveal-delay="2"] { transition-delay: .24s; }
  [data-reveal-delay="3"] { transition-delay: .36s; }
  [data-reveal-delay="4"] { transition-delay: .48s; }
  [data-reveal-delay="5"] { transition-delay: .6s; }
  [data-reveal-delay="6"] { transition-delay: .72s; }
}

/* ==========================================================================
   Navbar (Figma 2171:7709 desktop · 2138:153 mobile)
   O menu sai do wp_nav_menu('principal'): itens 1–3 à esquerda, 4–5 à direita;
   o logo fica centralizado no desktop.
   ========================================================================== */
.navbar {
  --nav-gap: clamp(20px, 5vw - 32px, 40px);
  --sec-fs-link: 14px;
  /* Cores por estado. Sobre o hero: vidro escuro e texto claro (Figma). Rolado: vidro claro e texto escuro (ver abaixo) */
  --nav-text: var(--creme-200);
  --nav-text-hover: var(--creme-50);
  --nav-accent: var(--creme-200);  /* borda do botão */
  --nav-btn-fill: var(--creme-200);
  --nav-btn-text: var(--verde-800);
  --nav-bar: var(--ui-hero-title-soft);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap);
  padding: 20px var(--pad-x);
  background: var(--ui-glass);
  -webkit-backdrop-filter: blur(var(--blur-nav));
  backdrop-filter: blur(var(--blur-nav));
  box-shadow: 0 1px 0 transparent;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* Estado rolado (proposta FVS: o Figma só desenha a navbar sobre o hero): o mesmo vidro, mas CLARO, com texto e logo escuros.
   Vidro escuro sobre seções claras não dá contraste; o desfoque + saturação deixa o conteúdo que passa por baixo à vista. */
.navbar--scrolled {
  --nav-text: var(--verde-700);
  --nav-text-hover: var(--verde-800);
  --nav-accent: var(--verde-800);
  --nav-btn-fill: var(--verde-800);
  --nav-btn-text: var(--creme-50);
  --nav-bar: var(--verde-800);
  background: var(--ui-glass-light);
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(1.5);
  backdrop-filter: blur(var(--blur-nav)) saturate(1.5);
  box-shadow: 0 1px 0 var(--ui-glass-light-edge);
}
/* Menu em tela cheia aberto (Figma 2154:9, fundo creme-50): a navbar vira o topo do menu, creme sólido com filete creme-200,
   logo escuro e o burger em X verde-800. Vence o --scrolled (maior especificidade), então vale também sobre o hero. */
.menu-open .navbar {
  --nav-bar: var(--verde-800);
  background: var(--creme-50);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 var(--creme-200);
}

.navbar__nav { flex: 1; display: flex; }
.navbar__menu { flex: 1; display: flex; align-items: center; gap: var(--nav-gap); }
.navbar__menu li:nth-child(4) { margin-left: auto; }
.navbar__menu a {
  padding: 4px 0;
  font-size: var(--sec-fs-link);
  line-height: 1.5;
  color: var(--nav-text);
  white-space: nowrap;
  transition: color .3s;
}
.navbar__menu a:hover,
.navbar__menu a[aria-current="true"] { color: var(--nav-text-hover); }

/* Micro-interação dos links (wireframe aprovado): o sublinhado corre da esquerda ao passar o mouse e sai pela direita.
   O item da seção visível (aria-current) fica sublinhado. É a MESMA animação (--line-dur / --line-ease) em todo o site:
   menu, rodapé, contatos do card de localização, abas das Dúvidas e "Veja mais" do hero.
   A linha é um background-size (não um transform): o traço fica sempre alinhado ao pixel, sem engrossar durante a animação. */
.navbar__menu a,
.footer__columns-nav a,
.footer__columns-contact-lines a,
.cta-final__location-details-office-contacts a { position: relative; }
.navbar__menu a::after,
.footer__columns-nav a::after,
.footer__columns-contact-lines a::after,
.cta-final__location-details-office-contacts a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(currentColor, currentColor) 100% 0 / 0 100% no-repeat;
  transition: background-size var(--line-dur) var(--line-ease);
}
.navbar__menu a[aria-current="true"]::after { background-position: 0 0; background-size: 100% 100%; }
@media (hover: hover) {
  .navbar__menu a:hover::after,
  .footer__columns-nav a:hover::after,
  .footer__columns-contact-lines a:hover::after,
  .cta-final__location-details-office-contacts a:hover::after { background-position: 0 0; background-size: 100% 100%; }
}

.navbar__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 220px;
  transform: translate(-50%, -50%);
}
.navbar__logo img { width: 100%; height: auto; transition: opacity .4s var(--ease); }
/* 2 versões do logo (claro sobre o hero, escuro sobre o vidro claro) em crossfade; a escura fica por cima, invisível */
.navbar__logo-img--escuro { position: absolute; inset: 0; opacity: 0; }
.navbar--scrolled .navbar__logo-img--claro,
.menu-open .navbar .navbar__logo-img--claro { opacity: 0; }
.navbar--scrolled .navbar__logo-img--escuro,
.menu-open .navbar .navbar__logo-img--escuro { opacity: 1; }

.navbar__menu-button--outline {
  display: inline-flex;
  align-items: center;
  padding: 12px var(--space-md);
  border: 1px solid var(--nav-accent);
  border-radius: var(--radius-pill);
  color: var(--nav-accent);
  white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s;
}
.navbar__menu-button--outline:hover { background: var(--nav-btn-fill); color: var(--nav-btn-text); }
.navbar__menu-button-label {
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
}

/* Burger (Figma 2138:164): 3 barras, a última mais curta */
.navbar__burger {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 12px 10px;
}
.navbar__burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--nav-bar);
  transition: transform .35s var(--ease), opacity .25s, width .35s var(--ease), background-color .4s var(--ease);
}
.navbar__burger-bar:last-child { width: 16px; }
/* X do Figma (2154:13): traços de 12px de extensão no box de 24 → barras de 24 com scaleX(.7) (≈ 17px na diagonal) */
.menu-open .navbar__burger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg) scaleX(.7); }
.menu-open .navbar__burger-bar:nth-child(2) { opacity: 0; }
.menu-open .navbar__burger-bar:nth-child(3) { width: 24px; transform: translateY(-8px) rotate(-45deg) scaleX(.7); }

/* Menu em tela cheia (Figma 2154:9 · 390): topo = a própria navbar (logo + X), links em Baskerville com seta, botão e rodapé */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: calc(var(--navbar-h) + var(--space-md)) var(--gut) 40px;
  overflow-y: auto;
  background: var(--creme-50);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s .4s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--creme-200);
  font-family: var(--font-secondary);
  font-size: var(--fs-menu-m);
  line-height: var(--lh-tight);
  color: var(--verde-800);
}
.mobile-menu__list a::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: url('assets/img/componentes/menu-seta.svg') center / contain no-repeat;
}
.mobile-menu__bottom { display: flex; flex-direction: column; gap: var(--space-md); margin-top: auto; padding-top: var(--space-lg); }
/* Botão primário (visual compartilhado com o do hero, mais abaixo): aqui ocupa a largura toda, com o texto à esquerda e o círculo à direita */
.mobile-menu .mobile-menu__button {
  --sec-btn-rx: 68.66%;  /* 245,8 de 358: o degradê radial acompanha a largura */
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding-left: 26px;
}
.mobile-menu__footer { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__credentials { font-size: var(--fs-label); letter-spacing: .06em; color: var(--verde-600); white-space: nowrap; }
.mobile-menu__social { display: flex; gap: 10px; }
.mobile-menu__social-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--creme-100);
  transition: background-color .3s;
}
.mobile-menu__social-link:hover { background: var(--creme-200); }

/* ==========================================================================
   Hero (Figma 2171:7705 desktop · 2138:148 mobile)
   BACKGROUND DO HERO: troca em um único ponto, o <picture> do front-page.php
   (assets/img/home/hero-desktop.webp e hero-mobile.webp, já com a marca d'água
   e o degradê embutidos).
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 717px;
  padding: 75px var(--pad-x) 0;  /* 75 = 2 × 37,35: centraliza o conteúdo em y = 396 (Figma) */
  background: var(--ui-hero-base);
}
.hero__photo { position: absolute; inset: 0; z-index: -1; }
.hero__photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 43% 50%;  /* deixa o rosto em x ≈ 956 no frame de 1440, como no Figma */
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 592px;
  max-width: 100%;
}
.hero__content-label { color: var(--creme-200); }
.hero__content-heading { display: flex; flex-direction: column; gap: 12px; }
.hero__content-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--ui-hero-title);
}
.hero__content-title-soft { color: var(--ui-hero-title-soft); }
.hero__content-lead { width: 513px; max-width: 100%; }
.hero__content-lead-text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--creme-300);
}

.hero__content-actions { display: flex; align-items: center; gap: var(--space-lg); }

/* Botão primário (pill verde com ícone): hero, Na prática, Sobre, Dúvidas, CTA final e modal da AGA */
.hero__content-actions-button,
.como-funciona__plan-button,
.sobre-mim__layout-content-button,
.duvidas__help-button,
.cta-final__layout-cta-button,
.aga-modal__button,
.mobile-menu__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 6px 6px 6px var(--space-lg);
  border: 0;
  box-shadow: inset 0 0 0 .8px var(--btn-edge);  /* traço interno como no Figma (54 de altura); border fracionada é arredondada pelo navegador conforme a tela */
  border-radius: var(--radius-pill);
  background-image: radial-gradient(var(--sec-btn-rx, 172px) 99px at 48.6% 0, var(--btn-olive-1) 0%, var(--btn-olive-2) 50%, var(--btn-olive-3) 75%, var(--verde-800) 100%);
  background-color: var(--btn-olive-1);
  color: var(--white);
  white-space: nowrap;
}
.hero__content-actions-button::before,
.como-funciona__plan-button::before,
.sobre-mim__layout-content-button::before,
.duvidas__help-button::before,
.cta-final__layout-cta-button::before,
.aga-modal__button::before,
.mobile-menu__button::before {  /* hover: clareia 1 passo · active: escurece 1 passo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--white);
  opacity: 0;
  transition: opacity .3s;
}
.hero__content-actions-button:hover::before,
.como-funciona__plan-button:hover::before,
.sobre-mim__layout-content-button:hover::before,
.duvidas__help-button:hover::before,
.cta-final__layout-cta-button:hover::before,
.aga-modal__button:hover::before,
.mobile-menu__button:hover::before { opacity: .08; }
.hero__content-actions-button:active::before,
.como-funciona__plan-button:active::before,
.sobre-mim__layout-content-button:active::before,
.duvidas__help-button:active::before,
.cta-final__layout-cta-button:active::before,
.aga-modal__button:active::before,
.mobile-menu__button:active::before { background: var(--dark); opacity: .12; }
.hero__content-actions-button-label,
.como-funciona__plan-button-label,
.sobre-mim__layout-content-button-label,
.duvidas__help-button-label,
.cta-final__layout-cta-button-label,
.aga-modal__button-label,
.mobile-menu__button-label {
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
}
.hero__content-actions-button-icon,
.como-funciona__plan-button-icon,
.sobre-mim__layout-content-button-icon,
.duvidas__help-button-icon,
.cta-final__layout-cta-button-icon,
.aga-modal__button-icon,
.mobile-menu__button-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(143.66deg, var(--btn-circle) 26.971%, transparent 127.03%);
  transition: background-color .3s;
}
.hero__content-actions-button:hover .hero__content-actions-button-icon,
.como-funciona__plan-button:hover .como-funciona__plan-button-icon,
.sobre-mim__layout-content-button:hover .sobre-mim__layout-content-button-icon,
.duvidas__help-button:hover .duvidas__help-button-icon,
.cta-final__layout-cta-button:hover .cta-final__layout-cta-button-icon,
.aga-modal__button:hover .aga-modal__button-icon,
.mobile-menu__button:hover .mobile-menu__button-icon { background-color: var(--verde-600); }
/* Sobre a oliva (Na prática, Sobre) e no Dúvidas (fundo branco) a borda é a do Figma, mais clara que a do hero */
.como-funciona__plan-button,
.sobre-mim__layout-content-button,
.duvidas__help-button,
.cta-final__layout-cta-button { --btn-edge: var(--ui-btn-edge); }
.duvidas__help-button { --sec-btn-rx: 203.9px; }  /* o degradê radial acompanha a largura do botão (297 no Figma) */

.hero__content-actions-link {
  position: relative;
  padding-bottom: 3px;
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-btn);
  white-space: pre;
  color: var(--creme-200);
  transition: color .3s;
}
/* Sublinhado (Figma) como linha própria: em repouso está inteiro; no hover sai pela direita e volta correndo da esquerda (mesma micro-interação do menu) */
.hero__content-actions-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 100% no-repeat;
}
@media (hover: hover) {
  .hero__content-actions-link:hover { color: var(--creme-50); }
  .hero__content-actions-link:hover::after { animation: link-redraw calc(var(--line-dur) * 2) var(--line-ease); }
}
@keyframes link-redraw {
  0%   { background-position: 100% 0; background-size: 100% 100%; }
  45%  { background-position: 100% 0; background-size: 0 100%; }
  46%  { background-position: 0 0; background-size: 0 100%; }
  100% { background-position: 0 0; background-size: 100% 100%; }
}

/* Card de modalidades (vidro). Os ícones já trazem o círculo de 40px no próprio SVG. */
.hero__modes {
  --sec-fs-mode-title: 20px;
  --sec-fs-mode-text: 14px;
  position: absolute;
  top: 368.54px;
  right: calc(var(--pad-x) + 21px);  /* 1440: 133px da borda = x 1084 do Figma */
  width: max-content;
  padding: var(--space-xs) 28px;
  border: .6px solid transparent;  /* só reserva a espessura; o traço visível é o ::before */
  border-radius: var(--radius-md);
  background: linear-gradient(var(--ui-modes-tint), var(--ui-modes-tint)), var(--ui-modes-fill);
  box-shadow: var(--shadow-modes);
  -webkit-backdrop-filter: blur(var(--blur-nav));
  backdrop-filter: blur(var(--blur-nav));
}
/* Traço em degradê: um anel (máscara) com o degradê por trás, para acompanhar o raio de 8px */
.hero__modes::before {
  content: "";
  position: absolute;
  inset: -.6px;
  padding: .6px;
  border-radius: inherit;
  background: var(--ui-modes-stroke);
  -webkit-mask: linear-gradient(var(--dark) 0 0) content-box, linear-gradient(var(--dark) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--dark) 0 0) content-box, linear-gradient(var(--dark) 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.hero__modes-mode { display: flex; align-items: center; gap: var(--space-sm); padding: 18px 0; }
.hero__modes-mode + .hero__modes-mode { border-top: 1px solid rgba(224, 224, 224, .29); }
.hero__modes-mode-icon { flex: none; width: 40px; height: 40px; }
.hero__modes-mode-content { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.hero__modes-mode-content-title {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-mode-title);
  line-height: 1.3;
  color: var(--creme-50);
}
.hero__modes-mode-content-text { font-size: var(--sec-fs-mode-text); line-height: 1.5; color: var(--creme-100); }

/* ==========================================================================
   Áreas (Figma 2171:7750 desktop · 2139:55 mobile)
   ========================================================================== */
.areas {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: var(--space-2xl) var(--pad-x);
  background: var(--creme-50);
}
.areas__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; }
.areas__header-eyebrow { color: var(--creme-400); }
.areas__header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--verde-600);
}
.areas__header-title-line { display: block; }
.areas__header-title-soft {  /* 2ª linha: degradê de texto (spec 2.2.1) */
  display: block;
  width: fit-content;
  margin-inline: auto;
  background-image: linear-gradient(90deg, var(--verde-500), var(--ui-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* As linhas do Figma viram "display: contents" para a grade reorganizar (3 → 2 → 1 coluna) */
.areas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md) var(--space-lg); }
.areas__grid-row { display: contents; }
.areas__grid-row-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 250px;
  padding: var(--space-lg) var(--space-lg) 36px;
  border-radius: var(--radius-sm);
  background: var(--white);
}
.areas__grid-row-card-icon { width: 44px; height: 44px; }  /* o círculo --dourado-50 já está no SVG */
.areas__grid-row-card-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h3-sm);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--verde-800);
}
.areas__grid-row-card-divider { height: 1px; background: var(--ui-line); }
.areas__grid-row-card-description { font-size: var(--fs-text-2); line-height: 1.55; color: var(--verde-400); }

/* ==========================================================================
   Botão de vidro: preenchimento translúcido + blur de fundo + traço branco de 0,6px
   (Figma: reconhecimento__card-button--light · quando-comecar__layout-video-phone-button--secondary).
   Só muda a cor do texto e a sombra interna; o posicionamento é de cada seção.
   ========================================================================== */
.reconhecimento__card-button--light,
.quando-comecar__layout-video-phone-button--secondary,
.cannabis__layout-video-phone-button--light,
.cannabis__closing-button--light {
  display: flex;
  align-items: center;
  border: .6px solid var(--white);
  border-radius: var(--radius-pill);
  background-color: var(--ui-glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .3s;
}
.reconhecimento__card-button--light:hover,
.quando-comecar__layout-video-phone-button--secondary:hover,
.cannabis__layout-video-phone-button--light:hover,
.cannabis__closing-button--light:hover { background-color: var(--ui-glass-fill-hover); }

/* ==========================================================================
   Reconhecimento (Figma 2171:7811 desktop · 2139:116 mobile)
   O fundo da seção já é --creme-50 (a faixa "reconhecimento__background" do Figma tem a mesma cor
   e some dentro dele). O card verde é só conteúdo; o fundo (degradê, sombra, raio) é o ::before,
   que o JS abre ao rolar até sobrar 40px de cada lado (--rec-out, wireframe); o raio é fixo.
   As folhas ficam atrás do card e a seção corta o que passa da borda.
   ========================================================================== */
.reconhecimento {
  --sec-fs-item: 17px;
  --sec-fs-number: 14px;
  --sec-rec-edge: 40px;  /* margem que sobra de cada lado quando o card termina de abrir (lida pelo main.js) */
  position: relative;
  overflow: clip;
  padding: 0 var(--pad-x) var(--space-2xl);
  background: var(--creme-50);
}

/* Folhas decorativas: 1 só arquivo; a da direita é o espelho da esquerda (Figma: rotação 32,75° / 147,25° + espelho) */
.reconhecimento__deco {
  position: absolute;
  z-index: 0;
  width: 405.6px;
  height: auto;
  pointer-events: none;
}
.reconhecimento__deco--left  { left: -111.29px; bottom: -89.06px; }
.reconhecimento__deco--right { right: -90.8px; bottom: -86.06px; transform: scaleX(-1); }

.reconhecimento__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding: 96px 104px 60px;
}
.reconhecimento__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--rec-out, 0px) * -1);
  right: calc(var(--rec-out, 0px) * -1);
  border-radius: var(--radius-md);  /* fixo: o raio não muda durante a abertura */
  background-color: var(--verde-claro-500);
  background-image: radial-gradient(ellipse 48.6% 44.7% at 50.8% 0, var(--verde-claro-400) 0%, var(--verde-claro-500) 100%);
  box-shadow: var(--shadow-card);
}

.reconhecimento__card-header { width: 800px; max-width: 100%; }
.reconhecimento__card-header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-align: center;
  color: var(--grayscale-50);
}
.reconhecimento__card-header-title-line { display: block; }
.reconhecimento__card-header-title-soft { display: block; color: var(--verde-100); }

.reconhecimento__card-checklist { display: flex; flex-direction: column; width: 100%; }
.reconhecimento__card-checklist-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); }
.reconhecimento__card-checklist-row-item {
  display: flex;
  gap: var(--space-sm);
  padding: 20px 0;
  border-bottom: 1px solid var(--verde-400);
}
.reconhecimento__card-checklist-row-item-number {
  flex: none;
  width: 28px;
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-number);
  line-height: 1.7;
  color: var(--verde-200);
}
.reconhecimento__card-checklist-row-item-text {
  flex: 1;
  min-width: 0;
  font-size: var(--sec-fs-item);
  line-height: 1.5;
  color: var(--ui-line);
}

.reconhecimento__card-closing { display: flex; flex-direction: column; gap: 12px; width: 696px; max-width: 100%; text-align: center; }
.reconhecimento__card-closing-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--white);
}
.reconhecimento__card-closing-text { font-size: var(--sec-fs-item); line-height: 1.5; color: var(--verde-300); }

/* Botão de vidro: centrado na borda inferior do card (cruza a borda, Figma y = 810 + 57/2 ≈ 839) */
.reconhecimento__card-button--light {
  position: absolute;
  left: 50%;
  bottom: 0;
  padding: 18px 34px;
  color: var(--verde-50);
  box-shadow: var(--shadow-glass), var(--shadow-glass-inner);
  transform: translate(-50%, 50%);
}

/* ==========================================================================
   Quando começar (Figma 2171:7852 desktop · 2139:155 mobile)
   ========================================================================== */
.quando-comecar {
  --sec-col: 384px;
  --sec-fs-highlight: 26px;
  --sec-fs-caption: 14px;
  --sec-radius-screen: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  padding: var(--space-2xl) var(--pad-x);
  background: var(--white);
}
.quando-comecar__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); width: 1008px; max-width: 100%; text-align: center; }
.quando-comecar__header-eyebrow { color: var(--creme-400); }
.quando-comecar__header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--verde-700);
}
.quando-comecar__header-title-line { display: block; }
.quando-comecar__header-title-soft {  /* 2ª linha: degradê dourado de texto */
  display: block;
  width: fit-content;
  margin-inline: auto;
  background-image: var(--ui-title-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 3 colunas: texto · celular (384) · texto. No Figma, 384 + 32 + 384 + 32 + 384 = 1216 */
.quando-comecar__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 31.58%, var(--sec-col)) minmax(0, 1fr);
  column-gap: var(--space-lg);
  align-items: center;
  width: 100%;
}
.quando-comecar__layout-text-left,
.quando-comecar__layout-text-right { display: flex; flex-direction: column; gap: 20px; }
.quando-comecar__layout-text-left-lead,
.quando-comecar__layout-text-right p { font-size: var(--fs-text-1); line-height: 1.6; color: var(--ui-text); }
.quando-comecar__layout-text-left-highlight {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-highlight);
  line-height: 1.4;
  color: var(--verde-800);
}

.quando-comecar__layout-video { display: flex; flex-direction: column; align-items: center; }
.quando-comecar__layout-video-phone { position: relative; }
.quando-comecar__layout-video-phone-screen {
  position: relative;
  padding: 10px;
  border-radius: var(--radius-phone);
  background: var(--dourado-500);
  box-shadow: var(--shadow-phone);
  cursor: pointer;
}
/* Capa (frame do vídeo) em tom suave e desfocado, como no Figma: o vídeo real abre no popup */
.quando-comecar__layout-video-phone-screen-cover {
  position: relative;
  width: 280px;
  height: 560px;
  overflow: hidden;
  border-radius: var(--sec-radius-screen);
  filter: blur(2px);
}
.quando-comecar__layout-video-phone-screen-cover-video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.quando-comecar__layout-video-phone-screen-cover::after { content: ""; position: absolute; inset: 0; background: var(--ui-cover-tint); }

/* ▶ de 80px no centro do celular. O SVG (128×128) já traz a sombra: sai 24px para os lados, 16 em cima e 32 embaixo */
.quando-comecar__layout-video-phone-screen-cover-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}
.quando-comecar__layout-video-phone-screen:hover .quando-comecar__layout-video-phone-screen-cover-play { transform: translate(-50%, -50%) scale(1.06); }
.quando-comecar__layout-video-phone-screen-cover-play-image { position: absolute; top: -20%; left: -30%; width: 160%; height: 160%; max-width: none; }

/* Pulso do ▶ (wireframe): um anel de 1px nasce na borda do círculo, cresce até 1,7x e some, em loop. Só transform/opacity (compositor) */
.quando-comecar__layout-video-phone-screen-cover-play::before,
.cannabis__layout-video-phone-screen-cover-play::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--white);
  border-radius: 50%;
  pointer-events: none;
  animation: play-pulse 2.4s ease-out infinite;
}
@keyframes play-pulse {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .quando-comecar__layout-video-phone-screen-cover-play::before,
  .cannabis__layout-video-phone-screen-cover-play::before { animation: none; opacity: 0; }
}

/* Botão de vidro sobre a base do celular (top 552 = cruza a borda inferior). Centrado no celular */
.quando-comecar__layout-video-phone-button--secondary {
  position: absolute;
  top: 552px;
  left: 50%;
  gap: 12px;
  padding: 18px 34px;
  color: var(--white);
  box-shadow: var(--shadow-glass), var(--shadow-glass-inner-soft);
  transform: translateX(-50%);
}
.quando-comecar__layout-video-phone-button-icon { flex: none; width: 8.8px; height: 11px; }
.quando-comecar__layout-video-caption { width: var(--sec-col); max-width: 100%; padding-top: 52px; }
.quando-comecar__layout-video-caption-text { font-size: var(--sec-fs-caption); line-height: 1.5; text-align: center; color: var(--ui-text); }

/* ==========================================================================
   Consulta (Figma 2171:7874 desktop · 2139:177 mobile)
   Fundo --creme-100 com o padrão de símbolos (1 tile repetido, blend screen a 60%, centrado na
   seção) ATRÁS do conteúdo e um filete dourado de 1px no topo. No Figma desktop o padrão fica por
   cima do texto (o mobile, por baixo); aqui fica por baixo nos dois, para não clarear as letras.
   ========================================================================== */
.consulta {
  --sec-fs-closing: 22px;
  position: relative;
  isolation: isolate;  /* sem overflow: o divisor passa 21px para fora, sobre a emenda com a seção de cima */
  display: grid;
  grid-template-columns: minmax(0, 696fr) minmax(0, 488fr);  /* 696 + 32 + 488 = 1216 */
  column-gap: var(--space-lg);
  padding: var(--space-2xl) var(--pad-x);
  background: var(--creme-100);
}
.consulta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('assets/img/componentes/consulta-padrao-simbolos.svg') 50% calc(50% - 8px) / 128.09px 101.32px;
  mix-blend-mode: screen;
  opacity: .6;
  pointer-events: none;
}
.consulta::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--ui-gold-rule);
  pointer-events: none;
}

/* Divisor (Figma "Arrow" 2171:8292 desktop · 2185:392 mobile): quadrado de 42 com degradê dourado e a seta, centrado
   na emenda com a seção de cima. O degradê é CSS puro (em SVG, com 5 paradas e sombras, pesaria); só a seta é arquivo (1 KB). */
.divider-arrow {
  position: absolute;
  z-index: 1;  /* acima do filete dourado do topo */
  top: -21px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border-radius: var(--radius-sm);
  background-image: var(--ui-divider-arrow);
  box-shadow: var(--shadow-divider-arrow);
  pointer-events: none;
}
.divider-arrow__icon { width: 24px; height: 24px; }

.consulta__content { display: flex; flex-direction: column; gap: 36px; }
.consulta__content-header { display: flex; flex-direction: column; gap: var(--space-md); }
.consulta__content-header-eyebrow { color: var(--verde-500); }
.consulta__content-header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--verde-800);
}
.consulta__content-header-title-line { display: block; }
.consulta__content-header-title-soft { display: block; color: var(--verde-500); }
/* intro e fechamento dividem a altura que sobra (a coluna estica até a altura dos pilares) */
.consulta__content-intro { flex: 1 0 0; }
.consulta__content-intro-text { width: 592px; max-width: 100%; font-size: var(--fs-text-1); line-height: var(--lh-text); color: var(--ui-text); }
.consulta__content-closing { flex: 1 0 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.consulta__content-closing-text {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-closing);
  font-style: italic;
  line-height: 1.4;
  color: var(--ui-text);
}
.consulta__content-intro-link-aga {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--ui-text);
}
.consulta__content-intro-link-aga-label { text-decoration: underline; text-underline-position: from-font; }
.consulta__content-intro-link-aga:hover .consulta__content-intro-link-aga-label { text-decoration: none; }
.consulta__content-intro-link-aga-plus { font-size: var(--fs-text-1); font-weight: 400; line-height: 1; letter-spacing: 0; }

.consulta__pillars-list { display: flex; flex-direction: column; }
.consulta__pillars-pillar {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--creme-200);
}
.consulta__pillars-pillar:last-child { border-bottom: 1px solid var(--creme-200); }
.consulta__pillars-pillar-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  background: var(--creme-50);
}
.consulta__pillars-pillar-icon-image { width: 26px; height: 26px; }
.consulta__pillars-pillar-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.consulta__pillars-pillar-content-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--verde-800);
}
.consulta__pillars-pillar-content-text { font-size: var(--fs-text-m); line-height: 1.6; color: var(--verde-400); }

/* ==========================================================================
   Na prática (Figma 2171:8296 desktop · 2139:219 mobile) — #como-funciona
   Fundo oliva + textura em folhas: overlay a 7% (a imagem) coberto por um degradê radial da própria
   oliva (o SVG é o radial exato do Figma; ele "apaga" a textura para a direita e escurece o fundo).
   ========================================================================== */
.como-funciona {
  --sec-fs-plan: 32px;
  --sec-fs-plan-em: 34px;
  --sec-fs-fact: 26px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 592fr) minmax(0, 488fr);
  column-gap: clamp(48px, 11.18%, 136px);  /* 136 = 11,18% de 1216 */
  align-items: center;
  padding: 80px var(--pad-x);
  background: var(--verde-claro-500);
}
.como-funciona__texture {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  display: block;
  width: max(100%, 1818px);  /* a arte do Figma tem 1818 × 684 e sangra para os lados */
  height: max(100%, 684px);
  transform: translate(-50%, -50%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.como-funciona__texture-image { width: 100%; height: 100%; object-fit: cover; opacity: .07; }
.como-funciona__texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/img/componentes/como-funciona-degrade.svg') 0 0 / 100% 100% no-repeat;
}

.como-funciona__plan { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.como-funciona__plan-eyebrow { color: var(--creme-200); }
.como-funciona__plan-title {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-plan);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.005em;
  color: var(--white);
}
.como-funciona__plan-title-em {  /* itálico 34 com degradê de texto */
  font-size: var(--sec-fs-plan-em);
  background-image: linear-gradient(90deg, var(--creme-200), var(--ui-btn-edge));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.como-funciona__facts { display: flex; flex-direction: column; }
.como-funciona__facts-fact { display: flex; align-items: center; gap: var(--space-md); padding: 28px 0; }
.como-funciona__facts-fact + .como-funciona__facts-fact { border-top: 1px solid var(--ui-olive-line); }
.como-funciona__facts-fact-icon { flex: none; width: 56px; height: 56px; }  /* o círculo já está no SVG */
.como-funciona__facts-fact-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.como-funciona__facts-fact-content-title {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-fact);
  line-height: 1.25;
  color: var(--white);
}
.como-funciona__facts-fact-content-label {
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--creme-200);
}

/* ==========================================================================
   Plano de cuidado (Figma 2171:8340 desktop · 2139:262 mobile)
   Fundo branco, filete dourado de 2px em cima e embaixo, ramos em aquarela (blend darken, 72%).
   ========================================================================== */
.plano-de-cuidado {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--pad-x);
  background: var(--white);
}
.plano-de-cuidado::before,
.plano-de-cuidado::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--ui-gold-rule);
  pointer-events: none;
}
.plano-de-cuidado::before { top: 0; }
.plano-de-cuidado::after { bottom: 0; }

/* 1 arquivo, 2 usos: a esquerda é o espelho horizontal, a direita o vertical (Figma) */
.plano-de-cuidado__deco {
  position: absolute;
  z-index: -1;
  width: 334.92px;
  height: auto;
  opacity: .72;
  mix-blend-mode: darken;
  pointer-events: none;
}
.plano-de-cuidado__deco--left  { top: -47.2px; left: -134.1px; transform: scaleX(-1); }
.plano-de-cuidado__deco--right { right: -123.15px; bottom: -19.7px; transform: scaleY(-1); }

.plano-de-cuidado__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); width: 1008px; max-width: 100%; text-align: center; }
.plano-de-cuidado__header-eyebrow { color: var(--creme-400); }
.plano-de-cuidado__header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--verde-600);
}
.plano-de-cuidado__header-title-line { display: block; }
.plano-de-cuidado__header-title-soft {  /* o degradê corre na largura inteira da linha (1008), como no Figma */
  display: block;
  background-image: var(--ui-title-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.plano-de-cuidado__tags { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px; width: 1008px; max-width: 100%; }
.plano-de-cuidado__tags-tag,
.plano-de-cuidado__tags-tag--highlight {
  display: flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-text-2);
  line-height: 1.5;
  white-space: nowrap;
}
.plano-de-cuidado__tags-tag { background: var(--verde-50); color: var(--verde-700); }
.plano-de-cuidado__tags-tag--highlight { position: relative; background: var(--verde-claro-400); color: var(--white); transition: background-color .3s; }
.plano-de-cuidado__tags-tag--highlight:hover { background: var(--verde-claro-500); }
.plano-de-cuidado__tags-tag-link { display: flex; align-items: center; gap: 10px; }
.plano-de-cuidado__tags-tag-link::after { content: ""; position: absolute; inset: 0; }  /* a pílula inteira é clicável */
.plano-de-cuidado__tags-tag-link span { font-size: 14px; line-height: 1; }

.plano-de-cuidado__closing { width: 696px; max-width: 100%; }
.plano-de-cuidado__closing-text { font-size: var(--fs-text-m); line-height: 1.5; text-align: center; color: var(--ui-text); }
.plano-de-cuidado__closing-text-strong { font-weight: 500; color: var(--verde-800); }

/* ==========================================================================
   Medicina canabinoide (Figma 2171:8377 desktop · 2139:297 mobile) — #cannabis
   Fundo: degradê radial oliva (centro acima do topo); marca d'água do "A" atrás, sangrando à direita.
   Sem padding-bottom: o botão do fechamento cruza a emenda com a Filosofia (o centro dele é o fim da seção),
   por isso a seção fica acima da seguinte (z-index) e só corta o eixo X.
   ========================================================================== */
.cannabis {
  --sec-fs-p: 17px;
  --sec-fs-tag: 15px;
  --sec-fs-compare: 17px;
  --sec-fs-compare-title: 34px;
  --sec-fs-closing-title: 34px;
  --sec-fs-closing-text: 17px;
  --sec-btn-h: 57px;  /* altura do botão de vidro: o centro dele fica na borda de baixo da seção */
  position: relative;
  z-index: 1;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: var(--space-2xl) var(--pad-x) 0;
  background-color: var(--verde-claro-500);
  background-image: radial-gradient(72.48% 424.6px at 50% -84px, var(--verde-claro-400) 0%, var(--verde-claro-500) 100%);
}

.cannabis__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 592fr) minmax(0, 488fr);
  column-gap: clamp(48px, 11.18%, 136px);  /* 136 = 11,18% de 1216 */
  align-items: center;
}
.cannabis__layout-watermark {
  position: absolute;
  z-index: -1;
  top: -64.24px;
  left: 580.16px;
  width: 807.275px;
  height: 818.488px;
  pointer-events: none;
}
.cannabis__layout-watermark-image { width: 100%; height: 100%; max-width: none; }  /* o SVG já traz a opacidade (12%) */

.cannabis__layout-content { display: flex; flex-direction: column; gap: 40px; }
.cannabis__layout-content-header { display: flex; flex-direction: column; gap: var(--space-md); }
.cannabis__layout-content-header-eyebrow { color: var(--verde-100); }
.cannabis__layout-content-header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--verde-100);
}
.cannabis__layout-content-header-title-line { display: block; color: var(--grayscale-50); }
.cannabis__layout-content-header-title-soft { display: block; }
.cannabis__layout-content-paragraphs { display: flex; flex-direction: column; gap: var(--space-sm); font-size: var(--sec-fs-p); line-height: var(--lh-text); color: var(--verde-100); }
.cannabis__layout-content-paragraphs-strong { font-weight: 700; color: var(--verde-50); }

.cannabis__layout-content-situations { display: flex; flex-direction: column; gap: 14px; }
.cannabis__layout-content-situations-label { font-size: var(--fs-label); line-height: 1.5; letter-spacing: var(--ls-eyebrow); color: var(--verde-claro-50); }
.cannabis__layout-content-situations-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cannabis__layout-content-situations-list-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px var(--space-sm);
  border-radius: var(--radius-xs);
  background: var(--ui-olive-line);
  font-size: var(--sec-fs-tag);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--verde-100);
}
.cannabis__layout-content-situations-list-tag-icon { flex: none; width: 18px; height: 18px; }

/* Celular: o mesmo do Quando começar, a 108,81% (moldura 326 × 630, tela 304,67 × 609,34). O container tem 300 × 580 e a
   moldura passa dele (como no Figma: ela fica ~13px à direita do centro da coluna). Moldura em degradê dourado. */
.cannabis__layout-video { display: flex; flex-direction: column; align-items: center; }
.cannabis__layout-video-phone { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 300px; height: 580px; }
.cannabis__layout-video-phone-screen {
  position: relative;
  flex: none;
  width: 326px;
  height: 630px;
  padding: 10.881px;
  border-radius: 52.229px;
  background-image: linear-gradient(90deg, var(--dourado-400), var(--dourado-300));
  box-shadow: var(--shadow-phone-lg);
  cursor: pointer;
}
.cannabis__layout-video-phone-screen-cover {
  position: relative;
  width: 304.669px;
  height: 609.337px;
  overflow: hidden;
  border-radius: 41.348px;
  filter: blur(2.176px);
}
.cannabis__layout-video-phone-screen-cover-video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.cannabis__layout-video-phone-screen-cover::after { content: ""; position: absolute; inset: 0; background: var(--ui-cover-tint); }

/* ▶ de 87,05px no centro; o SVG (139,28 × 139,28) já traz a sombra: sai 30% para os lados, 20% em cima e 40% embaixo */
.cannabis__layout-video-phone-screen-cover-play {
  position: absolute;
  top: calc(50% - .45px);
  left: calc(50% + .22px);
  width: 87.048px;
  height: 87.048px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}
.cannabis__layout-video-phone-screen:hover .cannabis__layout-video-phone-screen-cover-play { transform: translate(-50%, -50%) scale(1.06); }
.cannabis__layout-video-phone-screen-cover-play-image { position: absolute; top: -20%; left: -30%; width: 160%; height: 160%; max-width: none; }

/* Botão de vidro sobre a base do celular */
.cannabis__layout-video-phone-button--light {
  position: absolute;
  top: 591.62px;
  left: -13.02px;
  gap: 12px;
  padding: 18px 34px;
  color: var(--white);
  box-shadow: var(--shadow-glass), var(--shadow-glass-inner-soft);
}
.cannabis__layout-video-phone-button-icon { flex: none; width: 8.8px; height: 11px; }

.cannabis__comparison { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); }
.cannabis__comparison-column--is { color: var(--verde-claro-50); }
.cannabis__comparison-column--is-not { color: var(--ui-isnot); }
.cannabis__comparison-column-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--ui-olive-line);
  white-space: nowrap;
}
.cannabis__comparison-column-title-sign { font-size: 22px; line-height: 1; }
.cannabis__comparison-column-title-text { font-family: var(--font-secondary); font-size: var(--sec-fs-compare-title); font-weight: 400; line-height: 1.2; }
.cannabis__comparison-column-item { padding: 22px 0; border-bottom: 1px solid var(--ui-olive-line); }
.cannabis__comparison-column-item-text { font-size: var(--sec-fs-compare); line-height: 1.5; }

.cannabis__closing { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cannabis__closing-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center; }
.cannabis__closing-content-title { font-family: var(--font-secondary); font-size: var(--sec-fs-closing-title); line-height: 1.25; color: var(--white); }
.cannabis__closing-content-text { font-size: var(--sec-fs-closing-text); line-height: 1.5; color: var(--verde-claro-100); }
.cannabis__closing-action { margin-bottom: calc(var(--sec-btn-h) / -2); }  /* a metade de baixo do botão passa para a Filosofia */
.cannabis__closing-button--light {
  height: var(--sec-btn-h);
  padding: 0 34px;
  color: var(--verde-50);
  box-shadow: var(--shadow-glass), var(--shadow-glass-inner);
}

/* ==========================================================================
   Filosofia (Figma 2171:8452 desktop · 2139:372 mobile) — #filosofia
   Estática (como no Figma) por padrão. O main.js liga .is-scrub: a seção vira 280vh com o conteúdo
   fixo (sticky) na tela, e o progresso do scroll (--p, 0 a 1) acende a frase palavra por palavra
   (efeito do wireframe aprovado), depois mostra o apoio. Sem JS ou com movimento reduzido: tudo visível.
   ========================================================================== */
.filosofia { --sec-fs-quote: var(--fs-h2-xl); --sec-ls-quote: -.015em; background: var(--ui-bg-soft); }
.filosofia__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 120px var(--pad-x) 140px;
  text-align: center;
}
.filosofia__symbol { flex: none; width: 72px; height: 73px; }
.filosofia__quote {
  width: 100%;
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-quote);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--sec-ls-quote);
  color: var(--verde-600);
}
.filosofia__quote-line { position: relative; display: block; }  /* position: o main.js mede o deslocamento de cada palavra na linha */
.filosofia__quote-line--gold {
  background-image: var(--ui-filosofia-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.filosofia__support { width: 800px; max-width: 100%; font-size: var(--fs-lead); line-height: var(--lh-text); color: var(--ui-text); }

/* Modo rolagem: um filho com filtro/opacidade não entra no recorte de texto do pai, então o degradê passa
   para cada palavra (tamanho = a linha inteira, deslocado pela posição da palavra; medidas do main.js) */
.filosofia.is-scrub { height: 280vh; }
.filosofia.is-scrub .filosofia__pin {
  position: sticky;
  top: 0;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding-block: var(--navbar-h) 0;
}
.filosofia.is-scrub .filosofia__symbol { transform: scale(calc(.88 + var(--p, 0) * .12)); }  /* o símbolo da marca não gira: só cresce de leve */
.filosofia.is-scrub .filosofia__quote-line--gold { background-image: none; }
.filosofia.is-scrub .filosofia__quote-word {
  opacity: .12;
  filter: blur(3px);
  transition: opacity .45s var(--ease), filter .45s var(--ease);
}
.filosofia.is-scrub .filosofia__quote-line--gold .filosofia__quote-word {
  background-image: var(--ui-filosofia-gold);
  background-repeat: no-repeat;
  background-size: var(--line-w, 100%) 100%;
  background-position: calc(var(--word-x, 0px) * -1) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.filosofia.is-scrub .filosofia__quote-word.is-lit { opacity: 1; filter: none; }
.filosofia.is-scrub .filosofia__support { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.filosofia.is-scrub .filosofia__support.is-shown { opacity: 1; transform: none; }

/* Quebras de linha do Figma (só no desktop, onde as colunas têm a largura do design): o trecho fica junto e o resto corre */
@media (min-width: 1241px) {
  .consulta__nowrap,
  .como-funciona__nowrap,
  .cannabis__nowrap { white-space: nowrap; }
}

/* ==========================================================================
   Sobre a Dra. (Figma 2171:8459 desktop · 2139:379 mobile) — #sobre-mim
   Fundo oliva chapado, o mesmo dos Depoimentos logo abaixo (50 + 50 de respiro entre a linha do tempo
   e o título). A foto tem 2 recortes do original, na proporção do Figma (592×720 · 358×448).
   ========================================================================== */
.sobre-mim {
  --sec-fs-highlight: 28px;
  --sec-fs-milestone-year: var(--fs-h3);
  --sec-fs-milestone-text: 14px;
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: var(--space-2xl) var(--pad-x) 50px;
  background: var(--verde-claro-500);
}
/* 488 + 592 com 136 de vão (11,18% do contêiner); abaixo disso as colunas e o vão encolhem juntos */
.sobre-mim__layout {
  display: grid;
  grid-template-columns: minmax(0, 488fr) minmax(0, 592fr);
  align-items: center;
  column-gap: clamp(48px, 11.18%, 136px);
}
.sobre-mim__layout-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.sobre-mim__layout-content-header { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; }
.sobre-mim__layout-content-header-eyebrow { color: var(--verde-100); }
.sobre-mim__layout-content-header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--white);
}
.sobre-mim__layout-content-header-registry {
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: .06em;
  white-space: pre-wrap;
  color: var(--verde-100);
}
.sobre-mim__layout-content-text { font-size: var(--fs-text-m); line-height: 1.7; color: var(--verde-100); }
.sobre-mim__layout-content-highlight {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-highlight);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--verde-50);
}
.sobre-mim__layout-image {
  width: 100%;
  aspect-ratio: 592 / 720;
  overflow: clip;
  border-radius: var(--radius-xs);
  background: var(--ui-line-dark);
}
.sobre-mim__layout-image picture { display: contents; }
.sobre-mim__layout-image-photo { width: 100%; height: 100%; object-fit: cover; }

/* Linha do tempo: 4 colunas de 280 (1216 = 4 × 280 + 3 × 32) */
.sobre-mim__timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.sobre-mim__timeline-milestone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--space-md);
  border-top: 1px solid var(--verde-400);
}
.sobre-mim__timeline-milestone-year { font-family: var(--font-secondary); font-size: var(--sec-fs-milestone-year); font-weight: 400; line-height: 1.2; color: var(--white); }
.sobre-mim__timeline-milestone-text { font-size: var(--sec-fs-milestone-text); line-height: 1.6; color: var(--verde-100); }

/* ==========================================================================
   Depoimentos (Figma 2171:8490 desktop · 2139:410 mobile) — #depoimentos
   Avaliações do Google, pelo plugin Widgets para Google Avaliações (functions.php: fvsbuilder_google_reviews).
   2 faixas de cards em loop. O main.js liga .is-looping (duplica os cards e mede o período); sem JS ou com
   movimento reduzido as faixas ficam paradas e rolam na horizontal. Os cards têm o blur de fundo de 10px do Figma
   (--blur-card); ele aparece onde o card passa sobre as Dúvidas (sobreposição de 20px) e sobre o card vizinho.
   ========================================================================== */
.depoimentos {
  --sec-fs-card: 14px;
  --sec-card-w: 432px;
  --sec-card-h: 190px;
  --sec-card-angle: 134.29deg;
  --sec-track-offset: -67px;
  --sec-card-overlap: 20px;  /* Figma: o frame (642) termina 20px antes do fim da 2ª faixa, que invade a seção de baixo */
  position: relative;
  z-index: 1;  /* acima das Dúvidas (a seguinte, de fundo branco) para as faixas aparecerem sobre ela */
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding-bottom: 0;
  background: var(--verde-claro-500);
}
.depoimentos__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); padding: 50px var(--pad-x) 0; }
.depoimentos__top-header { display: flex; flex-direction: column; gap: var(--space-md); width: 592px; max-width: 100%; }
.depoimentos__top-header-eyebrow { color: var(--verde-100); }
.depoimentos__top-header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.depoimentos__top-header-title-line { display: block; color: var(--grayscale-50); }
.depoimentos__top-header-title-soft { display: block; color: var(--verde-100); }

/* Controle de pausa: só aparece com o loop ligado (sem JS não há o que pausar) */
.depoimentos__top-pause { display: flex; align-items: center; gap: 12px; }
.depoimentos:not(.is-looping) .depoimentos__top-pause { visibility: hidden; }
.depoimentos__top-pause-text { font-size: var(--fs-caption); line-height: 1.5; white-space: nowrap; color: var(--verde-200); }
.depoimentos__top-pause-text--touch { display: none; }
.depoimentos__top-pause-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--verde-claro-400);
  border-radius: 22px;
  transition: background-color .3s;
}
.depoimentos__top-pause-button:hover { background-color: rgba(255, 255, 255, .08); }
.depoimentos__top-pause-button-bar { width: 3px; height: 13px; border-radius: 1px; background: var(--ui-muted); }
/* Pausado: as 2 barras viram o ▶ (11 × 13, a mesma pegada das barras) */
.depoimentos.is-paused .depoimentos__top-pause-button-bar:first-child { width: 11px; border-radius: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.depoimentos.is-paused .depoimentos__top-pause-button-bar:last-child { display: none; }

.depoimentos__tracks { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: calc(var(--sec-card-overlap) * -1); }
.depoimentos__track--left { height: var(--sec-card-h); overflow-x: auto; scrollbar-width: none; }
.depoimentos__track--left::-webkit-scrollbar { display: none; }
.depoimentos__track-list { display: flex; gap: var(--space-sm); width: max-content; padding-inline: var(--pad-x); }
/* Loop: o main.js mede --loop-w (um grupo de cards + vão) e --loop-t (duração a 40 px/s) em cada faixa */
.depoimentos.is-looping .depoimentos__track--left { overflow: clip; }
.depoimentos.is-looping .depoimentos__track-list {
  margin-left: var(--sec-track-offset);
  padding-inline: 0;
  animation: depoimentos-loop var(--loop-t, 60s) linear infinite;
}
@keyframes depoimentos-loop { to { transform: translateX(calc(var(--loop-w, 0px) * -1)); } }
.depoimentos.is-paused .depoimentos__track-list,
.depoimentos.is-away .depoimentos__track-list { animation-play-state: paused; }
@media (hover: hover) {
  .depoimentos__tracks:hover .depoimentos__track-list { animation-play-state: paused; }
}

.depoimentos__track-card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 14px;
  width: var(--sec-card-w);
  height: var(--sec-card-h);
  padding: 22px var(--space-md);
  border-radius: var(--radius-md);
  background-image: linear-gradient(var(--sec-card-angle), var(--ui-depo-card-from) 20.686%, var(--ui-depo-card-to) 104.02%);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
}
.depoimentos__track-card-author { display: flex; align-items: center; gap: 12px; }
.depoimentos__track-card-author-avatar {
  position: relative;
  overflow: clip;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--ui-line);
  font-family: var(--font-secondary);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--ui-line-dark);
}
.depoimentos__track-card-author-avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  /* foto do Google por cima das iniciais */
.depoimentos__track-card-author-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.depoimentos__track-card-author-meta-name {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--sec-fs-card);
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-line);
}
/* Estrelas (Figma: 77 × 13, 5 estrelas de 13 com passo 16): a camada vazia fica por baixo e a cheia é cortada pela nota */
.depoimentos__track-card-author-meta-rating {
  position: relative;
  width: 77px;
  height: 13px;
  background: url('assets/img/componentes/depoimentos-estrelas-vazias.svg') 0 0 / 77px 13px no-repeat;
}
.depoimentos__track-card-author-meta-rating::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 77px;
  background: url('assets/img/componentes/depoimentos-estrelas.svg') 0 0 / 77px 13px no-repeat;
}
.depoimentos__track-card-author-meta-rating--1::before { width: 13px; }
.depoimentos__track-card-author-meta-rating--2::before { width: 29px; }
.depoimentos__track-card-author-meta-rating--3::before { width: 45px; }
.depoimentos__track-card-author-meta-rating--4::before { width: 61px; }
.depoimentos__track-card-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--sec-fs-card);
  line-height: 1.6;
  color: var(--verde-200);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.depoimentos__notice { padding: 0 var(--pad-x); font-size: var(--sec-fs-card); line-height: 1.6; color: var(--verde-100); }  /* só para administradores, sem avaliações */

/* ==========================================================================
   Dúvidas (Figma 2171:8609 desktop · 2139:529 mobile) — #duvidas
   Abas + acordeão (spec 7.3): 1 item aberto por vez em cada aba. Sem JS tudo fica aberto.
   O Figma mostra os itens abertos (estado de design); o "+" dos fechados não está desenhado.
   ========================================================================== */
.duvidas {
  --sec-fs-tab: var(--fs-caption);
  --sec-fs-question: var(--fs-h4);
  --sec-fs-number: 15px;
  --sec-fs-help: 26px;
  --sec-fs-sign: 22px;
  --sec-num-w: 24px;
  --sec-sign-w: 12px;
  --sec-gap-col: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding: 120px var(--pad-x) var(--space-2xl);
  background: var(--white);
}
.duvidas__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); width: 100%; max-width: 800px; text-align: center; }
.duvidas__header-eyebrow { color: var(--verde-500); }
.duvidas__header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--verde-800);
}
.duvidas__header-title-line { display: block; }
.duvidas__header-title-soft {  /* 2ª linha: degradê de texto (spec 2.2.1) */
  display: block;
  width: fit-content;
  margin-inline: auto;
  background-image: linear-gradient(90deg, var(--verde-500), var(--ui-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.duvidas__tabs { display: flex; justify-content: center; gap: 40px; width: 100%; }
.duvidas__tabs-tab,
.duvidas__tabs-tab--active {
  position: relative;
  padding-bottom: 11.5px;  /* 10px do design + 1,5px do filete (agora o ::after) */
  font-size: var(--sec-fs-tab);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--verde-500);
  transition: color .3s;
}
/* Filete de 1,5px: corre da esquerda na aba ativa e ao passar o mouse nas outras (mesma micro-interação do menu); ao trocar de aba sai pela direita */
.duvidas__tabs-tab::after,
.duvidas__tabs-tab--active::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.5px;
  background: linear-gradient(var(--verde-800), var(--verde-800)) 100% 0 / 0 100% no-repeat;
  transition: background-size var(--line-dur) var(--line-ease);
}
.duvidas__tabs-tab--active::after { background-position: 0 0; background-size: 100% 100%; }
.duvidas__tabs-tab:hover { color: var(--verde-800); }
@media (hover: hover) {
  .duvidas__tabs-tab:hover::after { background-position: 0 0; background-size: 100% 100%; }
}
.duvidas__tabs-tab--active { color: var(--verde-600); }

.duvidas__accordion { width: 100%; max-width: 800px; border-top: 1px solid var(--ui-line); }
.duvidas__accordion-item,
.duvidas__accordion-item--open { padding: 28px 0; border-bottom: 1px solid var(--ui-line); }
.duvidas__accordion-item-heading { font: inherit; }
.duvidas__accordion-item-trigger {
  display: grid;
  grid-template-columns: var(--sec-num-w) minmax(0, 1fr) var(--sec-sign-w);
  align-items: start;
  column-gap: var(--sec-gap-col);
  width: 100%;
  text-align: left;
}
.duvidas__accordion-item-number { font-family: var(--font-secondary); font-size: var(--sec-fs-number); line-height: 1.5; color: var(--verde-500); }
.duvidas__accordion-item-question {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-question);
  line-height: 1.4;
  color: var(--verde-800);
  transition: color .3s;
}
.duvidas__accordion-item-trigger:hover .duvidas__accordion-item-question { color: var(--verde-700); }
.duvidas__accordion-item-sign { font-size: var(--sec-fs-sign); font-weight: 300; line-height: 1.5; text-align: center; color: var(--ui-line-dark); }
.duvidas__accordion-item-sign::before { content: "+"; }
.duvidas__accordion-item--open .duvidas__accordion-item-sign::before { content: "\2212"; }  /* − */
/* A resposta alinha com a pergunta (número + vão) e para antes do sinal */
.duvidas__accordion-item-answer { display: grid; grid-template-rows: 1fr; margin: 0 calc(var(--sec-sign-w) + var(--sec-gap-col)) 0 calc(var(--sec-num-w) + var(--sec-gap-col)); }
.duvidas__accordion-item-answer-inner { min-height: 0; overflow: hidden; }
.duvidas__accordion-item-answer-text { padding-top: 12px; font-size: var(--fs-text-m); line-height: var(--lh-text); color: var(--ui-text); }
/* Fechado só existe com JS (senão o conteúdo ficaria inacessível): altura animada de 0fr a 1fr */
@media (scripting: enabled) {
  .duvidas__accordion-item .duvidas__accordion-item-answer { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--ease), visibility 0s .4s; }
  .duvidas__accordion-item--open .duvidas__accordion-item-answer { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .duvidas__accordion-item .duvidas__accordion-item-answer,
  .duvidas__accordion-item--open .duvidas__accordion-item-answer { transition: none; }
}

/* Sem JS as abas não funcionam: some o seletor e os dois painéis ficam à vista */
@media (scripting: none) {
  .duvidas__tabs { display: none; }
  .duvidas__accordion-panel[hidden] { display: block; }
}

.duvidas__help { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.duvidas__help-title { font-family: var(--font-secondary); font-size: var(--sec-fs-help); font-weight: 400; line-height: 1.5; text-align: center; color: var(--verde-800); }

/* Quebra manual do destaque do Sobre: só a partir de 1440, onde a coluna tem os 488 do design */
@media (max-width: 1439px) {
  .sobre-mim__br { display: none; }
}

/* ==========================================================================
   CTA final + onde atendo (Figma 2171:8662 desktop · 2139:582 mobile) — #cta-final
   Fundo creme com folhas em aquarela nos cantos de baixo (atrás do card). O Figma desenha um mapa
   ilustrativo; aqui é o embed do Google Maps (spec seção 4).
   ========================================================================== */
.cta-final {
  --sec-fs-title: var(--fs-h2);
  --sec-fs-tele-title: 18px;
  --sec-fs-tele-text: 15px;
  --sec-fs-street: 28px;
  --sec-loc-pad: 42px;
  --sec-leaf-w: 250.478px;
  --sec-leaf-h: 417.023px;
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: var(--space-2xl) var(--pad-x);
  background: var(--creme-50);
}
/* Folhas: 1 só arquivo, recortado na caixa do Figma (250 × 417) e girado 32,75° (a da esquerda é o espelho) */
.cta-final__deco {
  position: absolute;
  z-index: 0;
  width: var(--sec-leaf-w);
  height: var(--sec-leaf-h);
  max-width: none;
  pointer-events: none;
}
.cta-final__deco--left  { left: -11.71px; bottom: -66.51px; transform: rotate(147.25deg) scaleY(-1); }
.cta-final__deco--right { right: 8.98px; bottom: -90.51px; transform: rotate(32.75deg); }
.cta-final__layout,
.cta-final__location { position: relative; z-index: 1; }

.cta-final__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: center; }
.cta-final__layout-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.cta-final__layout-cta-header { display: flex; flex-direction: column; gap: var(--space-lg); }
.cta-final__layout-cta-eyebrow { color: var(--verde-500); line-height: 1.6; }
.cta-final__layout-cta-title {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-title);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.cta-final__layout-cta-title-line { display: block; color: var(--verde-600); }
.cta-final__layout-cta-title-soft {  /* 2ª linha: degradê dourado de texto */
  display: block;
  width: fit-content;
  background-image: var(--ui-title-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-final__layout-cta-text { font-size: var(--fs-text-1); line-height: var(--lh-text); color: var(--ui-text); }

/* Divisor + telemedicina (no Figma os layers se chamam location-details-*, mas ficam na coluna do CTA) */
.cta-final__location-details-divider { width: 393.089px; max-width: 100%; height: 1px; background: var(--ui-line); }
.cta-final__location-details-telemedicine { display: flex; align-items: center; gap: var(--space-sm); width: 100%; }
.cta-final__location-details-telemedicine-icon,
.cta-final__location-details-office-label-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
}
.cta-final__location-details-telemedicine-icon { background: var(--creme-100); }
.cta-final__location-details-office-label-icon { background: var(--dourado-50); }
.cta-final__location-details-telemedicine-content { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.cta-final__location-details-telemedicine-content-title {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-tele-title);
  line-height: 1.35;
  color: var(--verde-800);
}
.cta-final__location-details-telemedicine-content-text { font-size: var(--sec-fs-tele-text); line-height: 1.6; color: var(--ui-text); }

/* Galeria: 592 × 340 + 2 de 280 × 220 (proporções do Figma; as fotos já vêm recortadas como lá) */
.cta-final__layout-gallery { display: flex; flex-direction: column; gap: var(--space-md); }
.cta-final__layout-gallery-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.cta-final__layout-gallery-image,
.cta-final__layout-gallery-group-image { overflow: clip; border-radius: var(--radius-md); background: var(--ui-muted); }
.cta-final__layout-gallery-image { aspect-ratio: 592 / 340; }
.cta-final__layout-gallery-group-image { aspect-ratio: 280 / 220; }
.cta-final__layout-gallery-image img,
.cta-final__layout-gallery-group-image img { width: 100%; height: 100%; object-fit: cover; }

/* Card de localização: detalhes (largura do conteúdo) + mapa (o resto) */
.cta-final__location {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  overflow: clip;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-loc);
}
.cta-final__location-details { padding: var(--sec-loc-pad); }
.cta-final__location-details-office { display: flex; flex-direction: column; gap: var(--space-lg); }
.cta-final__location-details-office-info { display: flex; flex-direction: column; gap: 20px; }
.cta-final__location-details-office-label { display: flex; align-items: center; gap: 12px; }
.cta-final__location-details-office-label-text {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ui-text);
}
.cta-final__location-details-office-address { display: flex; flex-direction: column; gap: var(--space-xs); }
.cta-final__location-details-office-address-street {
  font-family: var(--font-secondary);
  font-size: var(--sec-fs-street);
  line-height: 1.3;
  color: var(--verde-800);
}
.cta-final__location-details-office-address-city,
.cta-final__location-details-office-contacts { font-size: var(--fs-text-m); line-height: 1.6; color: var(--ui-text); }
.cta-final__location-details-office-contacts a,
.footer__columns-contact-lines a { color: inherit; text-decoration: none; white-space: nowrap; }

/* Botões outline (Maps / Waze): hover preenche com a cor da borda e inverte o texto e a seta (spec 2.5) */
.cta-final__location-details-office-directions { display: flex; gap: 12px; }
.cta-final__location-details-office-directions-button-maps--outline,
.cta-final__location-details-office-directions-button-waze--outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px 20px;
  border: 1px solid var(--ui-line-dark);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ui-line-dark);
  transition: background-color .3s, color .3s;
}
.cta-final__location-details-office-directions-button-maps--outline img,
.cta-final__location-details-office-directions-button-waze--outline img { transition: filter .3s; }
.cta-final__location-details-office-directions-button-maps--outline:hover,
.cta-final__location-details-office-directions-button-waze--outline:hover { background-color: var(--ui-line-dark); color: var(--white); }
.cta-final__location-details-office-directions-button-maps--outline:hover img,
.cta-final__location-details-office-directions-button-waze--outline:hover img { filter: brightness(0) invert(1); }

.cta-final__location-map { position: relative; min-height: 320px; background: var(--ui-line); }
.cta-final__location-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Footer (Figma 2171:8727 desktop · 2139:645 mobile) — fica fora do <main> (footer-fullpage.php)
   Desktop: marca + contato na coluna da esquerda, navegação à direita (grid com áreas). Mobile: marca →
   navegação → contato (order). A marca d'água escala com a largura do contêiner (cqw): 12,17% no
   desktop (148 de 1216) e 11,73% no mobile (42 de 358).
   ========================================================================== */
.footer {
  --sec-fs-contact: 14px;
  --sec-fs-contact-title: 20px;
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 60px var(--pad-x) 0;
  border-top: 3px solid var(--dourado-400);
  background: var(--verde-900);
  color: var(--verde-400);
}
.footer__columns {
  display: grid;
  grid-template-columns: 384px 280px;
  grid-template-areas: "brand nav" "contact nav";
  justify-content: space-between;
  align-items: start;
  row-gap: var(--space-md);
}
.footer__columns-brand { grid-area: brand; display: flex; flex-direction: column; gap: var(--space-md); }
.footer__columns-brand-logo { display: block; width: 279.924px; max-width: 100%; }
.footer__columns-brand-logo img { width: 100%; height: auto; }
.footer__columns-brand-credentials { font-size: var(--fs-caption); line-height: 1.65; }
.footer__columns-contact { grid-area: contact; display: flex; flex-direction: column; gap: var(--space-md); }
.footer__columns-brand-divider { height: 1px; background: var(--ui-line-darker); }
.footer__columns-contact-title { font-family: var(--font-secondary); font-size: var(--sec-fs-contact-title); line-height: 1.5; color: var(--white); }
.footer__columns-contact-lines { font-size: var(--sec-fs-contact); line-height: 1.7; }
.footer__columns-brand-social { display: flex; gap: 10px; }
.footer__columns-brand-social-link-instagram,
.footer__columns-brand-social-link-whatsapp {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--verde-800);
  transition: background-color .3s;
}
.footer__columns-brand-social-link-instagram:hover,
.footer__columns-brand-social-link-whatsapp:hover { background: var(--verde-700); }
.footer__nav { grid-area: nav; }
.footer__columns-nav { display: flex; flex-direction: column; gap: var(--space-sm); font-size: var(--fs-text-1); line-height: 1.5; white-space: nowrap; }
.footer__columns-nav a { color: inherit; text-decoration: none; transition: color .3s; }
.footer__columns-nav a:hover { color: var(--verde-100); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--ui-line-darker);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--ui-text);
}
.footer__watermark { container-type: inline-size; position: relative; aspect-ratio: 1216 / 150; overflow: clip; }
.footer__watermark-text {
  position: absolute;
  top: .82cqw;
  left: .74cqw;
  font-family: var(--font-secondary);
  font-size: 12.17cqw;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  background-image: linear-gradient(90deg, rgba(112, 116, 105, .12), rgba(210, 218, 197, .12));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Popup de vídeo (spec 7.2) — um só, compartilhado: o gatilho aponta o arquivo (data-video-src)
   ========================================================================== */
body.popup-open { overflow: hidden; }
.video-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background: var(--ui-popup-bg);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.video-popup[hidden] { display: none; }
.video-popup.is-open { opacity: 1; }
.video-popup__dialog { --sec-video-h: min(88vh, 900px); width: min(100%, calc(var(--sec-video-h) * 9 / 16)); }
@supports (height: 1dvh) { .video-popup__dialog { --sec-video-h: min(88dvh, 900px); } }
.video-popup__video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-md); background: var(--verde-900); }
.video-popup__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  border: .6px solid var(--white);
  border-radius: var(--radius-circle);
  background-color: var(--ui-glass-fill);
  color: var(--white);
  transition: background-color .3s;
}
.video-popup__close:hover { background-color: var(--ui-glass-fill-hover); }
.video-popup__close::before,
.video-popup__close::after,
.aga-modal__close::before,
.aga-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.video-popup__close::after,
.aga-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .video-popup { transition: none; }
}

/* ==========================================================================
   Modal da AGA (spec 7.4) — mesmo fundo e comportamento do popup de vídeo; cartão branco.
   Layout do wireframe (o Figma final não o desenha), com os tokens do projeto.
   ========================================================================== */
.aga-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  padding: var(--space-md);
  overflow-y: auto;
  background: var(--ui-popup-bg);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.aga-modal[hidden] { display: none; }
.aga-modal.is-open { opacity: 1; }
.aga-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  width: min(100%, 800px);
  margin: auto;  /* centra sem cortar o topo quando o cartão passa da altura da tela */
  padding: 48px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.aga-modal__header { display: flex; flex-direction: column; gap: 12px; width: 100%; padding-right: 56px; padding-bottom: var(--space-md); border-bottom: 1px solid var(--ui-line); }
.aga-modal__header-eyebrow { color: var(--creme-400); }
.aga-modal__header-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2-sm);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: var(--ls-title);
  color: var(--verde-800);
}
.aga-modal__text { display: flex; flex-direction: column; gap: var(--space-sm); font-size: var(--fs-text-m); line-height: var(--lh-text); color: var(--ui-text); }
.aga-modal__close {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-circle);
  color: var(--verde-800);
  transition: background-color .3s;
}
.aga-modal__close:hover { background-color: var(--creme-50); }
@media (prefers-reduced-motion: reduce) {
  .aga-modal { transition: none; }
}

/* ==========================================================================
   Responsivo (spec seção 3; tablet = wireframe aprovado, mobile = Figma 390)
   ========================================================================== */
@media (max-width: 1240px) {
  :root { --navbar-h: 82px; }
  .navbar__nav,
  .navbar__menu-button--outline { display: none; }
  .navbar__burger { display: flex; }
  /* inset: auto zera o top/left 50% do desktop; com position: relative eles empurravam o logo 50% da largura para a direita, sobre o burger */
  .navbar__logo { position: relative; inset: auto; width: 176px; transform: none; }

  .reconhecimento__card { padding-inline: 64px; }
}

@media (max-width: 1100px) {
  :root { --gut: 40px; }

  .quando-comecar__layout { column-gap: var(--space-md); }
  .quando-comecar__layout-text-left-lead,
  .quando-comecar__layout-text-right p { font-size: var(--fs-text-m); }
}

@media (max-width: 900px) {
  /* Hero empilhado (Figma mobile, 390px): foto 390×813 no topo e texto sobre ela, a partir de y = 351.
     Os dois escalam com a largura (351 = 90% de 390; 813 = 390 × 2,0846) para o texto
     nunca subir sobre o rosto em telas maiores que 390. */
  .hero { --sec-hero-text-top: 90vw; display: block; min-height: 0; padding: var(--sec-hero-text-top) var(--pad-x) 78px; }
  .hero__photo { inset: 0 0 auto 0; height: auto; aspect-ratio: 390 / 813; }
  .hero__photo-image { object-position: 50% 0; }
  .hero__content { width: auto; max-width: 592px; gap: 14px; }
  .hero__modes { position: relative; top: auto; right: auto; margin-top: 40px; }

  .areas { gap: 44px; padding-block: 80px; }
  .areas__grid { grid-template-columns: 1fr; gap: var(--space-sm); }
  .areas__grid-row-card { min-height: 0; padding: 30px 26px; }

  /* Reconhecimento: folhas no tamanho do Figma mobile (202,8 × 226) */
  .reconhecimento { padding-bottom: 80px; }
  .reconhecimento__deco { width: 202.8px; }
  .reconhecimento__deco--left  { left: -83.4px; bottom: -73.02px; }
  .reconhecimento__deco--right { right: -83.4px; bottom: -73.02px; }
  .reconhecimento__card { gap: var(--space-lg); padding: 72px 40px 60px; }

  /* Quando começar empilhado: texto, texto, celular (o celular vai por último, como no Figma mobile) */
  .quando-comecar { gap: var(--space-lg); padding-block: 80px; }
  .quando-comecar__layout { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-lg); max-width: 600px; }
  .quando-comecar__layout-video { order: 3; }
  .quando-comecar__layout-text-left-highlight { font-size: var(--fs-h4); line-height: 1.35; }
  .quando-comecar__br { display: none; }  /* as quebras manuais do desktop saem quando o texto corre na coluna */
  .quando-comecar__layout-video-caption { width: 100%; }

  /* Consulta empilhada (Figma 2139:177): título, intro, fechamento, pilares e, por último, o link da AGA.
     Os wrappers viram display:contents para o link poder passar para depois dos pilares (order). */
  .consulta { display: flex; flex-direction: column; gap: var(--space-lg); padding-block: 80px; }
  .consulta::before { background-position: 50% calc(50% - .5px); background-size: 121.69px 96.25px; }  /* padrão a 95% no mobile */
  .consulta__content,
  .consulta__content-closing { display: contents; }
  .consulta__content-header { gap: 14px; }
  .consulta__content-intro { flex: none; }
  .consulta__content-intro-link-aga { order: 1; }

  /* Na prática empilhada: eyebrow, frase, fatos e, por último, o botão */
  .como-funciona { display: flex; flex-direction: column; padding-block: 80px; }
  .como-funciona__texture { width: 100%; height: 100%; }
  .como-funciona__texture::after { background-image: url('assets/img/componentes/como-funciona-degrade-mobile.svg'); }
  .como-funciona__plan { display: contents; }
  .como-funciona__plan-eyebrow { order: 1; margin-bottom: 14px; }
  .como-funciona__plan-title { order: 2; margin-bottom: var(--space-lg); }
  .como-funciona__facts { order: 3; margin-bottom: var(--space-lg); }
  .como-funciona__plan-button { order: 4; align-self: flex-start; }

  .plano-de-cuidado { padding-block: 80px; }

  /* Medicina canabinoide empilhada (Figma 2139:297): o celular vem antes do texto; o botão final não cruza mais a emenda */
  .cannabis { gap: 32px; padding-block: 80px; background-image: radial-gradient(90% 480px at 50% 0, var(--verde-claro-400) 0%, var(--verde-claro-500) 100%); }
  .cannabis__layout { display: flex; flex-direction: column; gap: 64px; }
  .cannabis__layout-video { order: -1; }
  .cannabis__layout-watermark { top: -60px; left: 170px; width: 404px; height: 409px; }
  .cannabis__layout-content { gap: 32px; }
  .cannabis__layout-content-header { gap: 14px; }
  .cannabis__layout-video-phone { width: 326px; height: 630px; }
  .cannabis__layout-video-phone-button--light { top: 592px; left: 0; width: 326px; padding: 18px; }
  .cannabis__layout-video-phone-button-label { flex: 1; text-align: center; white-space: normal; }
  .cannabis__comparison { grid-template-columns: 1fr; row-gap: 50px; }
  .cannabis__closing { align-items: stretch; gap: var(--space-lg); }
  .cannabis__closing-content { align-items: flex-start; text-align: left; }
  .cannabis__closing-action { margin-bottom: 0; }
  .cannabis__closing-button--light { height: auto; padding: 18px 22px 18px 26px; }
  .cannabis__closing-button-label { flex: 1; white-space: normal; }

  /* Filosofia: degradê com o ângulo do mobile; a frase usa 52 no tablet (o Figma só desenha o mobile, 28) */
  .filosofia { --sec-fs-quote: var(--fs-h2); --ui-filosofia-gold: linear-gradient(88.76deg, rgb(159, 140, 112) 10.271%, rgb(150, 130, 102) 24.086%, rgb(216, 202, 176) 40.082%, rgb(237, 228, 216) 60.52%, rgb(212, 187, 155) 80.798%); }

  /* Sobre a Dra. empilhada (Figma 2139:379): a foto vem antes do texto, no recorte do mobile (358 × 448) */
  .sobre-mim { gap: var(--space-lg); padding-block: 80px 50px; }
  .sobre-mim__layout { grid-template-columns: 1fr; gap: var(--space-lg); max-width: 600px; }
  .sobre-mim__layout-image { order: -1; aspect-ratio: 358 / 448; }
  .sobre-mim__layout-content-header { gap: 14px; }
  .sobre-mim__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Depoimentos (Figma 2139:410): título centrado e o controle de pausa desce para depois das faixas.
     O wrapper vira display:contents para a pausa poder passar para depois das faixas (order). */
  .depoimentos { --sec-card-overlap: 0px; gap: var(--space-lg); padding-bottom: 80px; }  /* sem sobreposição no mobile/tablet (Figma 2139:410) */
  .depoimentos__top { display: contents; }
  .depoimentos__top-header { align-items: center; width: 100%; padding: 50px var(--pad-x) 0; text-align: center; }
  .depoimentos__tracks { order: 1; }
  .depoimentos__top-pause { order: 2; align-self: center; }
  .depoimentos:not(.is-looping) .depoimentos__top-pause { display: none; }

  .duvidas { gap: var(--space-lg); padding-block: 80px; }

  /* CTA final empilhado (Figma 2139:582): cabeçalho → botão → galeria → divisor → telemedicina → card.
     O wrapper do CTA vira display:contents para a galeria poder entrar no meio (order). */
  .cta-final { --sec-leaf-w: 125.239px; --sec-leaf-h: 208.512px; gap: var(--space-lg); padding-block: 80px; }
  .cta-final__deco--left  { left: -44.62px; bottom: -73.92px; }
  .cta-final__deco--right { right: -44.62px; bottom: -73.92px; }
  .cta-final__layout { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-lg); }
  .cta-final__layout-cta { display: contents; }
  .cta-final__layout-cta-header { order: 0; gap: 14px; }
  .cta-final__layout-cta-button { order: 1; align-self: flex-start; }
  .cta-final__layout-gallery { order: 2; gap: var(--space-sm); }
  .cta-final__layout-gallery-group { gap: var(--space-sm); }
  .cta-final__location-details-divider { order: 3; width: 100%; }
  .cta-final__location-details-telemedicine { order: 4; }
  .cta-final__location { grid-template-columns: 1fr; }
  .cta-final__location-map { height: 320px; min-height: 0; }
  .cta-final__location-details-office-address-city-separator { display: none; }
  .cta-final__location-details-office-address-city-place,
  .cta-final__location-details-office-address-city-cep { display: block; }
  .cta-final__location-details-office-address-city,
  .cta-final__location-details-office-contacts { text-align: center; }
  .cta-final__location-details-office-directions { flex-direction: column; }

  /* Footer empilhado (Figma 2139:645): marca centrada → navegação → contato → legal → marca d'água */
  .footer { gap: var(--space-lg); padding-top: 50px; }
  .footer__columns { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-lg); }
  .footer__columns-brand { order: 0; align-items: center; gap: 20px; text-align: center; }
  .footer__columns-brand-credentials { font-size: var(--fs-label); }
  .footer__nav { order: 1; }
  .footer__columns-contact { order: 2; }
  .footer__legal { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
  .footer__legal p:first-child { max-width: 310px; margin-inline: auto; }  /* a quebra do aviso é a do Figma */
  .footer__watermark { aspect-ratio: 358 / 54; }
  .footer__watermark-text { top: .56cqw; left: 0; font-size: 11.73cqw; }
}

@media (min-width: 601px) and (max-width: 900px) {
  :root { --gut: 40px; }
  .areas__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (max-width: 600px) {
  :root { --gut: 16px; }

  .hero__content-label { font-size: var(--fs-label); letter-spacing: .16em; }
  .hero__content-label-name { display: none; }
  .hero__content-title { font-size: var(--fs-h1-m); line-height: 1.14; letter-spacing: -.02em; }
  .hero__content-lead { width: auto; }
  .hero__content-lead-text { font-size: var(--fs-lead-m); }
  .hero__content-lead-text p { display: inline; }  /* os 2 parágrafos fluem em um só (Figma mobile) */
  .hero__content-actions { flex-direction: column; align-items: stretch; gap: 22px; }
  .hero__content-actions-button { width: 100%; justify-content: space-between; padding-left: 26px; }
  .hero__content-actions-link { align-self: flex-start; }
  .hero__modes { display: none; }  /* o frame mobile do Figma não tem o card */

  .areas { gap: var(--space-lg); padding-block: 50px; }
  .areas__header { align-items: flex-start; gap: 14px; text-align: left; }
  .areas__header-eyebrow { font-size: var(--fs-label); }
  .areas__header-title { font-size: var(--fs-h2-sm); line-height: 1.22; letter-spacing: -.01em; }
  .areas__header-title-line,
  .areas__header-title-soft { display: inline; width: auto; margin: 0; }
  .areas__grid-row-card-title { font-size: var(--fs-h4); }
  .areas__grid-row-card-description { font-size: var(--fs-text-m); }

  /* Reconhecimento (Figma 2139:116): 1 coluna, card com 22 de padding, botão em largura total do card */
  .reconhecimento { --sec-fs-item: 16px; }
  .reconhecimento__card { padding: 56px 22px 80px; }
  .reconhecimento__card::before { background-image: radial-gradient(ellipse 90% 38.6% at 50% 0, var(--verde-claro-400) 0%, var(--verde-claro-500) 100%); }
  .reconhecimento__card-header-title { font-size: var(--fs-h2-sm); line-height: 1.22; text-align: left; }
  .reconhecimento__card-header-title-line,
  .reconhecimento__card-header-title-soft { display: inline; }
  .reconhecimento__card-checklist-row { grid-template-columns: 1fr; }
  .reconhecimento__card-checklist-row-item { padding-block: 18px; }
  .reconhecimento__card-closing { text-align: left; }
  .reconhecimento__card-closing-title { font-size: var(--fs-h4); }
  .reconhecimento__card-button--light { left: 22px; right: 22px; padding: 18px; font-size: var(--fs-label); transform: translateY(50%); }

  /* Quando começar (Figma 2139:155) */
  .quando-comecar { padding-block: 50px; }
  .quando-comecar__header { align-items: flex-start; gap: 14px; text-align: left; }
  .quando-comecar__header-eyebrow { font-size: var(--fs-label); }
  .quando-comecar__header-title { font-size: var(--fs-h2-sm); line-height: 1.22; }
  .quando-comecar__header-title-line { display: inline; }
  .quando-comecar__header-title-soft {  /* cada linha leva o degradê inteiro, como os 2 textos do Figma */
    display: inline;
    width: auto;
    margin: 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .quando-comecar__layout-video-phone-button--secondary { width: 326px; padding: 18px; font-size: var(--fs-label); }
  .quando-comecar__layout-video-phone-button-label { flex: 1; text-align: center; white-space: normal; }

  /* Consulta (Figma 2139:177) */
  .consulta { --sec-fs-closing: 20px; padding-block: 50px; }
  .consulta__content-header-eyebrow,
  .como-funciona__plan-eyebrow,
  .plano-de-cuidado__header-eyebrow,
  .aga-modal__header-eyebrow,
  .sobre-mim__layout-content-header-eyebrow,
  .depoimentos__top-header-eyebrow,
  .duvidas__header-eyebrow,
  .cta-final__layout-cta-eyebrow { font-size: var(--fs-label); }
  .consulta__content-header-title { font-size: var(--fs-h2-sm); line-height: 1.22; }
  .consulta__content-header-title-line,
  .consulta__content-header-title-soft { display: inline; }
  .consulta__pillars-pillar-content-title { font-size: var(--fs-h3-sm); }
  .consulta__content-intro-link-aga { font-size: var(--fs-label); }

  /* Na prática (Figma 2139:219): botão em largura total, com a seta/ícone na ponta */
  .como-funciona { --sec-fs-plan: 28px; --sec-fs-plan-em: 30px; --sec-fs-fact: var(--fs-h4); padding-block: 50px; }
  .como-funciona__plan-title { line-height: 1.35; }
  .como-funciona__plan-button { --sec-btn-rx: 245.8px; align-self: stretch; justify-content: space-between; padding-left: 26px; }
  .como-funciona__plan-button-label { font-size: var(--fs-label); }

  /* Plano de cuidado (Figma 2139:262): as tags viram lista com check; a em destaque fecha a lista, em largura total */
  .plano-de-cuidado { align-items: stretch; gap: var(--space-lg); padding-block: 50px; }
  .plano-de-cuidado__deco { width: 167.46px; }
  .plano-de-cuidado__deco--left  { top: -1.05px; left: -109.73px; }
  .plano-de-cuidado__deco--right { right: -109.73px; bottom: 18.95px; }
  .plano-de-cuidado__header { align-items: flex-start; gap: 14px; width: 100%; text-align: left; }
  .plano-de-cuidado__header-title {  /* o degradê dourado corre no bloco todo (as duas linhas) */
    font-size: var(--fs-h2-sm);
    line-height: 1.22;
    background-image: var(--ui-title-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .plano-de-cuidado__header-title-line { display: inline; color: var(--verde-600); }
  .plano-de-cuidado__header-title-soft { display: inline; background: none; }
  .plano-de-cuidado__tags { flex-direction: column; flex-wrap: nowrap; align-content: stretch; gap: 0; width: 100%; }
  .plano-de-cuidado__tags-tag {
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--ui-line);
    border-radius: 0;
    background: none;
    font-size: var(--fs-text-m);
    white-space: normal;
  }
  .plano-de-cuidado__tags-tag::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: url('assets/img/componentes/plano-de-cuidado-check.svg') center / 20px no-repeat;
  }
  .plano-de-cuidado__tags-tag--highlight { order: 1; margin-top: 20px; padding: 18px 20px; font-size: var(--fs-text-m); white-space: normal; }
  .plano-de-cuidado__tags-tag-link { justify-content: space-between; width: 100%; }
  .plano-de-cuidado__closing { width: 100%; }
  .plano-de-cuidado__closing-text { font-size: var(--fs-text-m); text-align: left; }

  /* Medicina canabinoide (Figma 2139:297) */
  .cannabis { --sec-fs-p: 18px; --sec-fs-tag: 16px; --sec-fs-compare: 16px; --sec-fs-compare-title: 26px; --sec-fs-closing-title: 24px; --sec-fs-closing-text: 16px; padding-block: 50px; }
  .cannabis__layout-content-header-eyebrow { font-size: var(--fs-label); }
  .cannabis__layout-content-header-title { font-size: var(--fs-h2-sm); line-height: 1.22; }
  .cannabis__layout-content-header-title-line,
  .cannabis__layout-content-header-title-soft { display: inline; }
  .cannabis__layout-content-situations-list-tag:last-child { flex: 1 1 0; min-width: 1px; white-space: normal; }  /* a última preenche a linha e quebra o texto */
  .cannabis__layout-video-phone-button--light,
  .cannabis__closing-button--light { font-size: var(--fs-label); }
  .cannabis__closing-content-title { line-height: 1.3; }

  /* Filosofia (Figma 2139:372) */
  .filosofia { --sec-fs-quote: 28px; }
  .filosofia__pin { gap: var(--space-lg); padding-block: 50px; }
  .filosofia__quote { line-height: 1.22; }
  .filosofia__support { font-size: var(--fs-lead-m); }

  /* Sobre a Dra. (Figma 2139:379): marcos em 1 coluna, botão em largura total */
  .sobre-mim { --sec-fs-highlight: 20px; --sec-fs-milestone-year: var(--fs-h3-sm); padding-block: 50px; }
  .sobre-mim__layout-content-header-title { font-size: var(--fs-h2-sm); line-height: 1.22; }
  .sobre-mim__layout-content-button { --sec-btn-rx: 245.8px; align-self: stretch; justify-content: space-between; padding-left: 26px; }
  .sobre-mim__layout-content-button-label { font-size: var(--fs-label); }
  .sobre-mim__timeline { grid-template-columns: 1fr; }

  /* Depoimentos (Figma 2139:410): cards 300 × 204; a 2ª faixa começa 253px à esquerda (a 1ª em 0) */
  .depoimentos { --sec-card-w: 300px; --sec-card-h: 204px; --sec-card-angle: 122.25deg; --sec-track-offset: 0px; padding-bottom: 50px; }
  .depoimentos__track--left + .depoimentos__track--left { --sec-track-offset: -253px; }
  .depoimentos__top-header-title { font-size: var(--fs-h2-sm); line-height: 1.22; }
  .depoimentos__top-header-title-line,
  .depoimentos__top-header-title-soft { display: inline; }

  /* Dúvidas (Figma 2139:529): abas em 10px, acordeão com número de 22 e vão de 14, botão em largura total */
  .duvidas { --sec-fs-tab: 10px; --sec-fs-question: 16px; --sec-fs-number: 16px; --sec-fs-help: 22px; --sec-num-w: 22px; --sec-gap-col: 14px; padding-block: 50px; }
  .duvidas__header { gap: 14px; }
  .duvidas__header-title { font-size: var(--fs-h2-sm); line-height: 1.22; }
  .duvidas__header-title-line { display: inline; }
  .duvidas__header-title-soft { display: inline; width: auto; margin: 0; }
  .duvidas__tabs { flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
  .duvidas__tabs-tab,
  .duvidas__tabs-tab--active { letter-spacing: .14em; }
  .duvidas__accordion-item,
  .duvidas__accordion-item--open { padding-block: 22px; }
  .duvidas__help { align-items: stretch; width: 100%; }
  .duvidas__help-title { line-height: 1.3; }
  .duvidas__help-button { --sec-btn-rx: 245.8px; align-self: stretch; justify-content: space-between; padding-left: 26px; }
  .duvidas__help-button-label { font-size: var(--fs-label); }

  /* CTA final (Figma 2139:582): título corrido, botão em largura total, card com 24 de padding lateral */
  .cta-final { --sec-fs-title: var(--fs-h2-sm); --sec-fs-tele-title: 16px; --sec-fs-tele-text: 16px; --sec-fs-street: 24px; padding-block: 50px; }
  .cta-final__layout-cta-title { line-height: 1.22; }
  .cta-final__layout-cta-title-line { display: inline; }
  .cta-final__layout-cta-title-soft {  /* cada linha leva o degradê inteiro, como os 2 textos do Figma */
    display: inline;
    width: auto;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .cta-final__layout-cta-text p { display: inline; }  /* os 2 parágrafos fluem em um só (Figma mobile) */
  .cta-final__layout-cta-button { --sec-btn-rx: 245.8px; align-self: stretch; justify-content: space-between; padding-left: 26px; }
  .cta-final__layout-cta-button-label { font-size: var(--fs-label); }
  .cta-final__location-details { padding: 36px var(--space-md); }

  /* Modal da AGA */
  .aga-modal { padding: var(--space-sm); }
  .aga-modal__dialog { padding: 28px 22px; }
  .aga-modal__header { padding-right: 48px; }
  .aga-modal__close { top: 20px; right: 16px; }
  .aga-modal__button { align-self: stretch; justify-content: space-between; }
}

@media (hover: none) {
  .hero__content-actions-button:hover::before,
  .como-funciona__plan-button:hover::before,
  .sobre-mim__layout-content-button:hover::before,
  .duvidas__help-button:hover::before,
  .cta-final__layout-cta-button:hover::before,
  .aga-modal__button:hover::before { opacity: 0; }
  .plano-de-cuidado__tags-tag--highlight:hover { background: var(--verde-claro-400); }
  .cannabis__layout-video-phone-button--light:hover,
  .cannabis__closing-button--light:hover { background-color: var(--ui-glass-fill); }
  .cannabis__layout-video-phone-screen:hover .cannabis__layout-video-phone-screen-cover-play { transform: translate(-50%, -50%); }
  .aga-modal__close:hover { background-color: transparent; }
  .depoimentos__top-pause-text--hover { display: none; }
  .depoimentos__top-pause-text--touch { display: inline; }
  .depoimentos__top-pause-button:hover { background-color: transparent; }
  .duvidas__tabs-tab:hover { color: var(--verde-500); }
  .duvidas__accordion-item-trigger:hover .duvidas__accordion-item-question { color: var(--verde-800); }
  .consulta__content-intro-link-aga:hover .consulta__content-intro-link-aga-label { text-decoration: underline; }
  .reconhecimento__card-button--light:hover,
  .quando-comecar__layout-video-phone-button--secondary:hover,
  .video-popup__close:hover { background-color: var(--ui-glass-fill); }
  .quando-comecar__layout-video-phone-screen:hover .quando-comecar__layout-video-phone-screen-cover-play { transform: translate(-50%, -50%); }
}