/* =========================================================
   NeuroPey — Landing Page
   Tokens extraídos do Figma 4Ixhs0puviW09myaxwe1wj
   Desktop 209:13078 (1920) · Mobile 209:14249 (420)
   Tipos fluidos: valor mobile em 420px → valor desktop em 1280px
   ========================================================= */

:root {
  /* ---------- Layout ---------- */
  --frame-desktop: 1920px;
  --container: 1280px;          /* grid 12 col, offset 320 */
  --columns: 12;
  --gutter: 20px;
  --col: calc((var(--container) - 11 * var(--gutter)) / 12); /* 88.33px */
  --page-margin: 20px;          /* margem lateral do mobile (420 → 380) */

  /* ---------- Fontes ---------- */
  --font-display: "Kangge", "Comfortaa", sans-serif;   /* títulos */
  --font-heading: "Comfortaa", sans-serif;             /* subtítulos, FAQ, rodapé */
  --font-body: "Urbanist", sans-serif;                 /* textos */

  /* ---------- Cores ---------- */
  --color-bg: #FCFBF8;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-text: #2F2B26;
  --color-text-alt: #363636;
  --color-text-muted: #6B6762;
  --color-text-subtle: #8C877F;
  --color-text-light: #FCFBF8;
  --color-text-on-dark: #FFFCF5;

  --color-gold-300: #E5C079;
  --color-gold-400: #ECBE6D;
  --color-gold-500: #C9A24F;
  --color-gold-600: #B08436;
  --color-gold-grad-start: #FFD462;
  --color-brown-700: #5D4322;
  --color-brown-800: #7A5014;
  --color-gold-700: #8F6A28;        /* rótulo 'Avaliações no Google' (contraste 4,8:1) */

  --color-cream-50: #FAF4EA;
  --color-cream-100: #F5EBDA;
  --color-cream-200: #FFEED6;
  --color-sand-200: #F3D9B1;
  --color-sand-300: #EBD3A2;
  --color-sand-400: #D9C39C;
  --color-sand-500: #D6C8B4;

  --color-gray-50: #F7F6F3;
  --color-gray-100: #F4F1EA;
  --color-gray-150: #F2F2F2;
  --color-gray-200: #EEEEEE;

  --color-dark: #2F2B26;          /* fundo do rodapé */
  --color-dark-watermark: #3A352F;

  /* ---------- Tipografia (tamanho / line-height / letter-spacing) ---------- */
  --fluid: ((100vw - 420px) / 860);

  /* Kangge */
  --fs-hero: clamp(24px, calc(28px + 20 * var(--fluid)), 48px);   /* 3 linhas fixas; no celular também limitado pela largura (.hero__title) */
  --lh-hero: 1.08;  --ls-hero: -1.15px;
  --fs-h2-xl: clamp(40px, calc(40px + 24 * var(--fluid)), 64px);      /* um olhar que vê */
  --lh-h2-xl: 1.3;
  --fs-h2-tree: clamp(30px, calc(30px + 26 * var(--fluid)), 56px);    /* Um comportamento… */
  --lh-h2-tree: 1.12; --ls-h2-tree: -1.79px;
  --fs-h2-lg: clamp(32px, calc(32px + 16 * var(--fluid)), 48px);      /* Um processo… */
  --lh-h2-lg: 1.3;  --ls-h2-lg: -0.95px;
  --fs-h2-queixas: clamp(28px, calc(28px + 20 * var(--fluid)), 48px);
  --lh-h2-queixas: 1.14; --ls-h2-queixas: -0.79px;
  --fs-h2: clamp(28px, calc(28px + 12 * var(--fluid)), 40px);         /* investiga, prazer, faq, cta */
  --lh-h2: 1.3;     --ls-h2: -0.95px;
  --fs-h3-lg: clamp(32px, calc(32px + 4 * var(--fluid)), 36px);       /* Muitas famílias… */
  --lh-h3-lg: 1.22; --ls-h3-lg: -0.56px;
  --fs-h3-queixas: clamp(20px, calc(20px + 16.97 * var(--fluid)), 36.97px);
  --lh-h3-queixas: 1.08; --ls-h3-queixas: -0.37px;
  --fs-h3-investiga: 32.7px;
  --lh-h3-investiga: 36.6px; --ls-h3-investiga: -0.39px;
  --fs-h3-card: clamp(20px, calc(20px + 4 * var(--fluid)), 24px);
  --lh-h3-card: 1.3; --ls-h3-card: -0.28px;
  --fs-h3-sm: clamp(20px, calc(20px + 2 * var(--fluid)), 22px);       /* Formação que… */
  --lh-h3-sm: 1.4;  --ls-h3-sm: -0.28px;
  --fs-dsm: 28.5px;  --ls-dsm: -0.57px;

  /* Comfortaa */
  --fs-footer-title: clamp(32px, calc(32px + 13.5 * var(--fluid)), 45.5px);
  --lh-footer-title: 1.06; --ls-footer-title: -0.73px;
  --fs-footer-watermark: clamp(79.5px, calc(79.5px + 176.5 * var(--fluid)), 256px);
  --fs-dropcap: 48px;         /* A de “Anamnese” */
  --fs-step: 24px;            /* namnese */
  --fs-quote: 64px; --lh-quote: 40px;
  --fs-faq-q: clamp(18px, calc(18px + 2 * var(--fluid)), 20px);
  --lh-faq-q: 32px; --ls-faq-q: -0.3px;
  --fs-footer-col: 20px; --lh-footer-col: 33px;
  --fs-avatar: 18px;
  --fs-item-title: 17px; --lh-item-title: 22px;
  --fs-progress: 16px;  --lh-progress: 22px;
  --fs-signature: 10px; --ls-signature: -0.61px;

  /* Urbanist */
  --fs-lead: 24px;  --lh-lead: 1;        /* Quando a dificuldade… */
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-18-5: 18.486px;
  --fs-16: 16px;
  --fs-15: 15px;
  --fs-14: 14px;
  --fs-13: 13px;
  --fs-12: 12px;
  --fs-10: 10px;
  --fs-8: 8px;
  --lh-tight: 1.3;
  --lh-normal: 1.4;
  --lh-relaxed: 1.5;
  --ls-button: 0.28px;
  --ls-eyebrow: 0.12em;
  --ls-label: -0.24px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Espaçamentos ---------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;

  /* ---------- Raios ---------- */
  --radius-xs: 4.5px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-card: 22px;
  --radius-card-tab: 4px 22px 22px 22px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 30px;
  --radius-4xl: 48px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-card: 0 10px 24px rgba(23, 54, 92, 0.10);
  --shadow-soft: 0 12px 32px rgba(46, 38, 26, 0.05);
  --ring-inner: inset 0 0 0 1px rgba(47, 43, 38, 0.14);
  --ring-inner-gold: inset 0 0 0 1px rgba(122, 80, 20, 0.30);
  --ring-avatar: 0 0 0 2.3px #FFFCF5;

  /* ---------- Header (209:13455 desktop · 209:14414/14415 mobile) ---------- */
  --header-top: 16px;              /* menu a 16px do topo */
  --header-h: 48px;
  --header-top-m: 14px;            /* mobile: botão a 14px do topo; logo e botão centralizados, 20px das bordas */
  --header-slim-top: 10px;         /* estado ao rolar (Bonança) */
  --header-slim-h: 62px;
  --header-slim-w: 1200px;
  --header-slim-edge: 20px;        /* pílula = 100% − 20px */
  --header-slim-pad: 0 8px 0 24px;
  --header-pill-bg: color-mix(in srgb, var(--color-text-on-dark) 84%, transparent);
  --shadow-header: 0 18px 40px -28px color-mix(in srgb, var(--color-text) 50%, transparent), var(--ring-inner);
  --logo-w: 227.545px;
  --logo-w-slim: 184px;            /* 0.81× (mesma proporção da Bonança) */
  --logo-w-m: 178px;
  --logo-w-m-slim: 144px;
  --logo-h: 42px;
  --logo-tree-w: 42.15px;          /* árvore dentro do logo (unid. do SVG, medida no navegador) */
  --logo-tree-h: 37.98px;
  --nav-gap: 36.97px;
  --nav-links-gap: 34px;
  --nav-links-gap-tablet: 24px;
  --nav-links-pad: 10px 0 14px;
  --nav-link-pad: 6px 0 8px;
  --lh-nav: 23.1px;
  --nav-opacity: .7;
  --nav-marker-w: 32px;
  --nav-marker-h: 6px;
  --scroll-offset: 96px;
  --menu-btn: 48px;
  --menu-btn-slim: 46px;
  --menu-btn-border: 1.5px;
  --menu-line: 18px;               /* ícone: 2 traços, o de baixo menor; vira X */
  --menu-line-short: 11px;
  --menu-line-h: 1.5px;
  --menu-line-gap: 3.5px;          /* distância de cada traço até o centro */
  --color-line: color-mix(in srgb, var(--color-text) 28%, transparent);
  --color-menu-slim: color-mix(in srgb, var(--color-text) 7%, transparent);

  /* ---------- Botões ---------- */
  --color-cream-glow: #FFF6DE;
  --grad-btn-gold: radial-gradient(70% 90% at 50% 120%, color-mix(in srgb, var(--color-cream-glow) 95%, transparent), transparent), var(--color-gold-300);
  --grad-btn-sheen: linear-gradient(179.55deg, rgb(255 255 255 / .34) 1.63%, rgb(255 255 255 / 0) 51.94%);
  --btn-sm-h: 46px;
  --btn-sm-pl: 24.84px;
  --btn-sm-pr: 22px;
  --btn-sm-gap: 9.16px;
  --btn-sm-label: 118px;           /* caixa de texto fixa no Figma */
  --btn-icon-shift: -1px;          /* árvore 1px acima do centro */
  --btn-icon-box: 22px;
  --btn-icon-w: 19.98px;
  --btn-icon-h: 18px;
  --fs-btn-sm: 13px;
  --lh-btn-sm: 16.9px;
  --ls-btn-sm: .26px;

  --color-btn-border: rgb(255 255 255 / .74);
  --btn-lg-pad: 16px 16px 16px 20px;
  --lh-btn: 18.2px;
  --btn-arrow: 25px;
  --btn-arrow-shift: 5px;

  /* ---------- Hero ---------- */
  --hero-u: calc(min(100cqw - 2 * var(--page-margin), var(--container)) / 1280);  /* 1px do Figma no desktop; encolhe no tablet */
  --hero-ox: calc((100cqw - min(100cqw - 2 * var(--page-margin), var(--container))) / 2); /* x = 320 do frame */
  --hero-m: calc(min(100cqw, var(--hero-stage-m-max)) / 420);                     /* 1px do Figma no mobile (420) */
  --hero-mox: calc((100cqw - min(100cqw, var(--hero-stage-m-max))) / 2);
  --hero-stage-m-max: 520px;
  --hero-text-w: 630px;
  --hero-lead-w: 514px;
  --hero-gap: 45px;
  --hero-title-pt: 4px;          /* título começa 4px abaixo do frame (Figma) */
  --hero-title-mb: -7px;         /* e vaza 7px dele */
  --lh-hero-text: 24px;
  --grad-hero-circle: linear-gradient(180deg, color-mix(in srgb, var(--color-brown-800) 30%, transparent) 0%, color-mix(in srgb, var(--color-bg) 21.3%, transparent) 70.6%);
  --grad-hero-fundo: linear-gradient(0deg, var(--color-bg) 0%, transparent 15.125%);       /* foto de fundo: só o pé dissolve (os lados já vêm na imagem) */
  --grad-hero-fundo-m: linear-gradient(180deg, transparent 64.5%, var(--color-bg) 99%);   /* mobile: 292 → 449 de 453 */
  --space-13: 13px;
  --avatar-w: 41px;
  --avatar-h: 42px;
  --radius-avatar: 59px;
  --lh-sig-name: 30.494px;
  --lh-sig-detail: 12.65px;

  /* ---------- Cards do hero ---------- */
  --card-pad: 40px 32px;
  --card-title-w: 303px;
  --card-icon: 30px;
  --card-icon-w: 28.86px;
  --card-icon-h: 26px;
  --card-icon-top: 2px;
  --card-illus-w: 346.6px;
  --card-illus-dy: 3.57px;        /* ilustração do card TDAH 3.57px mais baixa (Figma) */
  --cards-max-m: 480px;

  /* ---------- Faixa árvore ---------- */
  --color-cream-25: #FAF6EF;
  --grad-band: linear-gradient(180deg, var(--color-cream-25) 0%, color-mix(in srgb, var(--color-cream-25) 33%, transparent) 45.321%, transparent 100%);
  --band-inset: 65px;             /* 1790 de 1920 */
  --band-inset-m: 19px;           /* 382 de 420 */
  --band-h: clamp(371px, calc(371px + 227 * var(--fluid)), 598px);
  --band-pad: 80px;
  --band-pad-m: 60px 20px;
  --radius-band: 57.6px;

  /* ---------- Rótulo ---------- */
  --rotulo-h: 677;                /* altura da seção no frame 1920 (× --hero-u) */
  --rotulo-pt: 111px;
  --rotulo-pt-m: 80px;
  --rotulo-art-gap-m: 88px;       /* texto → foto no mobile */
  --rotulo-title-w: 482px;
  --rotulo-texts-w: 531px;
  --rotulo-texts-gap: 33px;
  --lh-label: 13.2px;
  --space-26: 26px;
  --selos-icon-w: 44.4px;
  --selos-icon-h: 40px;
  --selos-icon-pad: 2.8px;
  --selos-icon-overflow: -3px;    /* árvore 40px numa caixa de 34px */
  --selos-icon-rot: -1.64deg;
  --selo-w: 109.61px;
  --selo-gap: 10.813px;
  --selo-row-h: 21px;
  --selo-tree-mr: 47.63px;        /* 2 espaços de 21px + gaps de 2.814px */
  --selo-tree-rot: 2.91deg;
  --selo-title-box: 26.04px;
  --selo-title-shift: -1.96px;
  --fs-selo-title: 28.514px;
  --ls-selo-title: -0.5703px;
  --fs-selo-desc: 10.043px;
  --lh-selo-desc: 11.549px;
  --selo-desc-pad: 2px 0 3px;
  --selo-desc-w: 110px;

  /* ---------- Painel + Um olhar ---------- */
  --radius-panel: 119px;
  --radius-panel-m: 32px;
  --panel-l: -52px;                  /* painel vaza o frame 1920 dos dois lados */
  --panel-r: -55.85px;
  --panel-l-m: 8.25px;
  --panel-r-m: -7.95px;
  --olhar-pt: 102px;
  --olhar-pt-m: 80px;
  --olhar-head-w: 905px;
  --lh-lead-29: 29.578px;
  --tag-bg: color-mix(in srgb, var(--color-gold-400) 40%, transparent);
  --tag-pad: 10px 20px;
  --radius-tag: 51px;
  --lh-tag: 21.75px;
  --tags-gap: 52px;
  --trilha-mt: 72.5px;               /* título → topo da faixa de fotos */
  --trilha-h: 400.5px;
  --trilha-mt-m: 34.2px;
  --trilha-h-m: 259.8px;
  --trilha-cw: clamp(150px, 14.5vw, 216px);   /* card central 216×270 (4:5) */
  --trilha-cw-m: 123px;
  --radius-trilha: 26px;
  --radius-trilha-m: 10.08px;
  --shadow-card-m: 0 3.88px 9.3px rgba(23, 54, 92, 0.10);

  /* ---------- Processo ---------- */
  --color-slate: #3F4A58;          /* texto de apoio do processo (Figma) */
  --processo-pt: 97px;
  --processo-text-x: 112px;        /* textos começam em x 432 */
  --processo-text-w: 438px;
  --processo-head-gap: 37px;
  --processo-cards-mt: 71px;
  --processo-pb: 185px;            /* 105 + 80 que a seção seguinte sobrepõe */
  --processo-gap-m: 36px;
  --processo-pb-m: 79px;
  --etapa-h: 338px;
  --etapa-gap: 16px;
  --etapa-pad: 28px 22px 26px;
  --etapa-ico: 173.19px;
  --etapa-ico-dx: -90.46px;        /* ilustração 4px à esquerda do centro */
  --etapa-ic: 120px;
  --etapa-ic-inset: 26.5px;
  --etapa-back-dy: -12.41px;
  --etapa-devolutiva-mb-m: 19px;   /* no Figma mobile o texto da Devolutiva fica 19px acima dos outros */
  --fs-etapa-l: 48px;
  --fs-etapa: 24px;
  --etapa-title-dy: 18.5px;       /* cap(48) − cap(24): base da letra grande alinhada à palavra */
  --etapa-sticky-top: 84px;
  --etapa-sticky-step: 14px;
  --shadow-etapa-hover: 0 22px 40px -24px color-mix(in srgb, var(--color-text) 35%, transparent);
  --shadow-etapa-stack: 0 -10px 28px -14px color-mix(in srgb, var(--color-text) 28%, transparent);
  --cards-max-m-480: 480px;

  /* ---------- Investiga ---------- */
  --inv-l: -12.89px;               /* fundo vaza o frame: x −12.89 … 2014.96 */
  --inv-r: -94.96px;
  --inv-overlap: -80px;            /* sobe 80px sobre o painel creme */
  --inv-pt: 75px;
  --inv-pb: 64px;
  --inv-pt-m: 82px;
  --inv-pb-m: 80px;
  --inv-head-gap: 261px;
  --inv-title-w: 493px;
  --inv-note-w: 519px;
  --inv-note-gap: 28px;
  --inv-tree-w: 33.3px;
  --inv-tree-h: 30px;
  --fs-note: 18.486px;
  --fs-h2-inv: clamp(32px, calc(32px + 8 * var(--fluid)), 40px);
  --inv-list-mt: 50px;
  --inv-list-mt-m: 40px;
  --inv-cols: 72px 320px minmax(0, 733.44px) 52px;
  --inv-col-gap: 30px;
  --inv-row-pad: 20px;
  --inv-icon: 22px;
  --inv-icon-m: 18px;
  --inv-icon-top: 12px;            /* 8 (marcador) + 4 (ícone na caixa de 30) */
  --inv-media-w: 150px;
  --inv-media-h: 96px;
  --inv-media-w-open: 320px;
  --inv-media-h-open: 224px;
  --inv-media-h-open-m: min(62vw, 300px);
  --inv-text-pt: 7px;              /* 4 + 3 do Figma */
  --inv-desc-mt: 22px;             /* 8 + 14 do Figma */
  --inv-more-mt: 14px;             /* texto extra (não existe no Figma) */
  --inv-more-w: 620px;
  --inv-more-y: 12px;
  --fs-inv-title: 32.706px;
  --lh-inv-title: 36.631px;
  --ls-inv-title: -0.3925px;
  --inv-plus: 40px;
  --inv-plus-icon: 16px;
  --inv-plus-top: 2px;
  --inv-gap-m: 16px;
  --inv-text-gap-m: 14px;
  --inv-div-gap-m: 38px;
  --color-inv-title: color-mix(in srgb, var(--color-brown-700) 60%, transparent);
  --color-inv-title-hover: color-mix(in srgb, var(--color-brown-700) 72%, transparent);
  --color-divider: color-mix(in srgb, var(--color-brown-700) 28%, transparent);

  /* ---------- Queixas ---------- */
  --queixas-run: 320vh;            /* rolagem enquanto os 5 cards passam (80vh por troca, como no Bonança) */
  --radius-queixas: 48px;
  --radius-queixas-m: 30px;
  --queixas-pad: 80px;
  --queixas-track-mt: 60px;
  --queixas-prog-mt: 60px;
  --queixas-cta-mt: 40px;
  --qcard-w: min(880px, 66vw);
  --qcard-h: 467px;
  --qcard-gap: 26px;
  --qcard-pad: 42.66px;
  --qcard-gap-in: 32.64px;
  --qcard-pad-m: 20px;
  --qcard-tree-box: 38.81px;
  --qcard-tree-w: 33.3px;
  --qcard-tree-h: 30px;
  --qcard-head-gap: 14px;
  --qcard-title-pad: 3px 0 8px;
  --lh-qcard-title: 39.93px;
  --lh-qcard-title-m: 1.4;
  --qlist-gap: 28.44px;
  --qlist-gap-m: 22px;
  --qitem-media-h: 201.6px;
  --qitem-gap: 16px;
  --qitem-gap-m: 20px;
  --qitem-col: 20px;
  --qitem-col-gap: 10px;
  --qitem-row-gap: 6px;
  --qitem-desc-w: 216px;
  --qitem-title-pad: 3px 0 6px;
  --qitem-title-row: 22px;
  --qitem-desc-row: 42px;
  --qitem-desc-pad: 5px 0 6px;
  --qprog-dot-ring: 1.5px;
  --radius-qitem: 16px;
  --qprog-pt: 30px;
  --qprog-line-h: 12px;
  --qprog-gap: 14px;
  --qprog-label-pad: 4px 0 6px;
  --qprog-dot: 10px;
  --qprog-dot-on: 14px;
  --qprog-halo: 30px;
  --qprog-tree-w: 28.86px;
  --qprog-tree-h: 26px;
  --qprog-tree-y: -39px;
  --qprog-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cpath d='M0 6C8 3 16 3 24 6C32 9 40 9 48 6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --qprog-wave-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cpath d='M0 6C8 3 16 3 24 6C32 9 40 9 48 6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
  --color-qprog-track: color-mix(in srgb, var(--color-text) 22%, transparent);
  --color-qprog-dot-line: color-mix(in srgb, var(--color-text) 35%, transparent);
  --color-qprog-halo: color-mix(in srgb, var(--color-gold-300) 28%, transparent);
  --qprog-label-off: .68;
  --queixas-logo-w: 216.71px;
  --queixas-cta-gap-m: 32px;
  --queixas-blocks-gap-m: 36px;
  --queixas-safe-gap: 16px;        /* folga abaixo do header quando a seção prende */
  --queixas-pad-min: 32px;
  --qcard-depth: .06;              /* vizinhos encolhem até 94% */
  --qimg-zoom: 1.12;               /* folga para o parallax da foto */
  --qitem-y: 16px;

  /* ---------- Sobre ---------- */
  --sobre-mt: 80px;
  --sobre-gap: 50px;
  --sobre-gap-m: 40px;
  --galeria-gap: 21px;
  --galeria-h: 637px;
  --consultorio-h: 460px;
  --consultorio-h-m: 260px;
  --consultorio-text-w: 600px;
  --atend-foto-h: 600px;
  --atend-foto-h-m: 260px;
  --grade-gap: 20px;
  --radius-gal: 30px;
  --gal-pad-big: 40px;
  --gal-pad: 28px;
  --gal-big-h-m: 419px;
  --pill-pad-big: 10px 16px 10px 12px;
  --pill-pad: 8px 14px 8px 10px;
  --pill-gap: 8px;
  --pill-text-pad: 4px 0;
  --fs-h3-formacao: clamp(20px, calc(20px + 2 * var(--fluid)), 22px);
  --gal-zoom: 1.04;

  /* ---------- Depoimentos ---------- */
  --depo-mt: 160px;
  --depo-gap: 50px;
  --depo-gap-m: 40px;
  --depo-head-w: 796px;
  --depo-head-gap: 36px;
  --depo-head-gap-m: 28px;
  --review-w: 413px;
  --review-w-m: 334px;
  --review-gap: 20px;
  --review-pad: 32px;
  --review-gap-in: 24px;
  --radius-review: 24px;
  --color-review-border: color-mix(in srgb, var(--color-text) 8%, transparent);
  --color-review-line: color-mix(in srgb, var(--color-text) 10%, transparent);
  --review-avatar: 44px;
  --review-who-gap: 8px;
  --fs-quote-mark: 64px;
  --lh-quote-mark: 40px;
  --ls-eyebrow-px: 1.56px;

  /* ---------- CTA final ---------- */
  --cta-mt: 83px;
  --cta-mt-m: 53px;
  --cta-h: 487px;
  --radius-cta: 32px;
  --radius-cta-foto: 27px;
  --cta-gap: 3px;
  --cta-pad: 80px;
  --cta-pad-m: 40px 20px;
  --cta-text-gap: 36px;
  --cta-text-gap-m: 30px;
  --cta-text-w: 512px;
  --cta-logo-w: 238.38px;
  --cta-foto-h-m: 291px;
  --cta-foto-pos: 50% 46.4%;       /* recorte do Figma: foto 187.55% da altura, topo −40.67% */
  --cta-forma-x: 1026px;
  --cta-forma-w: 540px;
  --cta-foto-zoom: 1.08;

  /* ---------- FAQ ---------- */
  --faq-mt: 160px;
  --faq-mt-m: 80px;
  --faq-pb: 80px;
  --faq-text-x: 2px;               /* textos começam em x 322 */
  --faq-text-w: 475px;
  --faq-title-w: 413px;
  --faq-list-w: 630px;
  --faq-gap: 37px;
  --faq-gap-m: 36px;
  --faq-item-gap: 20px;
  --faq-pad: 20px;
  --faq-q-w-m: 279px;
  --radius-faq-q: 19px;
  --radius-faq-a: 20px;
  --faq-btn: 40px;
  --faq-icon: 16px;
  --faq-a-bg: rgb(255 255 255 / .49);
  --faq-a-line: rgb(0 0 0 / .2);
  --fs-h2-faq: clamp(28px, calc(28px + 20 * var(--fluid)), 48px);
  --fs-faq-q: 20px;
  --fs-faq-q-m: 18px;
  --lh-faq-a: 28px;

  /* ---------- Rodapé ---------- */
  --rodape-edge: 19.91px;          /* fundo escuro a 20px das bordas */
  --rodape-gap-bottom: 20px;
  --radius-rodape: 48px;
  --radius-rodape-m: 30px;
  --rodape-pt: 100px;
  --rodape-pb: 28px;
  --rodape-pt-m: 61.6px;
  --rodape-pb-m: 33.6px;
  --rodape-w: 1240px;
  --rodape-side: 40px;
  --rodape-cols: 457.42fr 219.56fr 420.83fr;
  --rodape-col-gap: clamp(32px, 5.7%, 71.1px);
  --rodape-logo-w: 249.22px;
  --fs-rodape-title: clamp(32px, calc(32px + 13.5 * var(--fluid)), 45.504px);
  --lh-rodape-title: 48.234px;
  --ls-rodape-title: -0.7281px;
  --rodape-title-mt: 42px;         /* 40 + 2 do Figma */
  --rodape-desc-pad: 22px 0 7px;
  --lh-24: 24px;
  --rodape-redes-mt: 30px;
  --rd-pill-h: 48px;
  --rd-pill-pad: 0 20px 0 16px;
  --rd-pill-pad-m: 0 14px;
  --rd-ic-box: 20px;
  --rd-sub-pad: 7px 0 10px;
  --lh-rodape-sub: 33px;
  --rodape-list-mt: 22px;
  --rd-nav-row: 28.62px;
  --rd-nav-gap: 14px;
  --rd-nav-dash: 14px;
  --lh-rd-nav: 24.75px;
  --rd-nav-pt: 3.88px;
  --rd-row-pad: 10px 0;
  --rd-badge: 44px;
  --rd-row-tall: 106.09px;
  --rd-badge-ic: 21px;
  --rd-go: 18px;
  --lh-rd-label: 18.85px;
  --lh-rd-value: 21.75px;
  --rodape-wm-pt: 96px;
  --rodape-wm-pad: 105px 0 60px;   /* 80 + 25 do Figma */
  --fs-rodape-wm: min(256px, 20.65cqw);
  --ls-rodape-wm: -0.02em;
  --rodape-cred-pt: 48px;
  --rodape-cred-pad: 24px;
  --lh-rd-copy: 21.45px;
  --rd-copy-tree-w: 24.42px;
  --rd-copy-tree-h: 22px;
  --rd-by-h: 44px;
  --rd-by-w: 270.08px;
  --rd-by-pad: 0 16px 0 18px;
  --rd-by-go: 24px;
  --rd-by-arrow: 11px;
  --rodape-gap-m: 80px;
  --rodape-marca-gap-m: 39px;
  --rodape-col-gap-m: 40px;
  --rodape-items-gap-m: 30px;
  --rodape-cred-gap-m: 23px;
  --rodape-cred-w-m: 350px;
  --color-on-dark-66: color-mix(in srgb, var(--color-text-light) 66%, transparent);
  --color-on-dark-72: color-mix(in srgb, var(--color-text-light) 72%, transparent);
  --color-gray-60: color-mix(in srgb, var(--color-gray-150) 60%, transparent);
  --color-gray-62: color-mix(in srgb, var(--color-gray-150) 62%, transparent);
  --color-gray-40: color-mix(in srgb, var(--color-gray-150) 40%, transparent);
  --color-gray-24: color-mix(in srgb, var(--color-gray-150) 24%, transparent);
  --color-gray-20: color-mix(in srgb, var(--color-gray-150) 20%, transparent);
  --color-gray-18: color-mix(in srgb, var(--color-gray-150) 18%, transparent);
  --color-gray-10: color-mix(in srgb, var(--color-gray-150) 10%, transparent);
  --color-gray-08: color-mix(in srgb, var(--color-gray-150) 8%, transparent);
  --grad-sun: linear-gradient(180deg, var(--color-gold-grad-start), var(--color-gold-300));
  --sel-pad: 1px -7px 1.23px;      /* caixa 305×46 em volta de "numa régua." */
  --sel-handle: 9px;
  --radius-sel: 6px;

  /* ---------- Menu mobile ---------- */
  --menu-symbol-w: 40px;
  --menu-circle: min(706px, 150vw);

  /* ---------- WhatsApp flutuante ---------- */
  --wa-size: 56px;
  --wa-size-m: 52px;
  --wa-edge: 24px;
  --wa-edge-m: 16px;
  --wa-icon: 26px;
  --shadow-wa: 0 12px 28px -10px color-mix(in srgb, var(--color-brown-800) 55%, transparent);

  /* ---------- Camadas ---------- */
  --z-dust: 40;
  --z-menu: 45;
  --z-header: 50;
  --z-wa: 48;
  --z-intro: 100;
  --intro-symbol: clamp(120px, 18vw, 220px);

  /* ---------- Movimento (copiado de bonancainstituto.com.br) ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-button: cubic-bezier(.19, 1, .22, 1);
  --dur-reveal: .9s;      --reveal-y: 22px;   /* .rv: fade + sobe */
  --dur-mask: 1.3s;                          /* .rv-mask: imagem revela de cima p/ baixo */
  --dur-split: 1s;        --split-stagger: .06s; /* títulos palavra a palavra */
  --dur-header: .8s;
  --dur-accordion: .7s;
  --dur-button: 1.3s;
  --t-200: .2s;  --t-300: .3s;  --t-350: .35s; --t-400: .4s;  --t-450: .45s;
  --t-500: .5s;  --t-600: .6s;  --t-700: .7s;  --t-900: .9s;  --t-1000: 1s;
  --t-1100: 1.1s; --t-1200: 1.2s; --t-1400: 1.4s; --t-1600: 1.6s;
  --menu-y: 18px;
  --header-blur: blur(18px) saturate(1.5);

  /* ---------- Breakpoints (referência; usados nos @media) ----------
     mobile  ≤ 767px  (design 420)
     tablet  768–1279 (inferido do desktop)
     desktop ≥ 1280   (design 1920, container 1280) */
}

/* =========================================================
   FONTES
   ========================================================= */
@font-face { font-family: "Kangge"; src: url("assets/fonts/kangge-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("assets/fonts/urbanist-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Comfortaa"; src: url("assets/fonts/comfortaa-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--scroll-offset); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
main { overflow-x: clip; } /* painéis e artes vazam o frame */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:where(h1, h2, h3, h4, p) { text-box: trim-both cap alphabetic; } /* = leading trim do Figma */
:focus-visible { outline: 2px solid var(--color-gold-600); outline-offset: 3px; }
.rodape :focus-visible { outline-color: var(--color-gold-500); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.container { width: calc(100% - 2 * var(--page-margin)); max-width: var(--container); margin-inline: auto; }

/* =========================================================
   ANIMAÇÕES GLOBAIS (Bonança): revelar ao rolar
   ========================================================= */
.js .rv { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-mask { clip-path: inset(0 0 100% 0 round var(--r, 0)); transition: clip-path var(--dur-mask) var(--ease-out); transition-delay: var(--d, 0s); }
.js .rv-mask.in { clip-path: inset(0 0 0 0 round var(--r, 0)); }
/* folga de .1em em cima (acentos) e .35em embaixo (hastes da Kangge: g, p, j, ç); a margem negativa mantém o espaçamento entre linhas */
.js .split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .1em 0 .35em; margin: -.1em 0 -.35em; }
.js .split .w > span { display: inline-block; transform: translateY(150%); transition: transform var(--dur-split) var(--ease-out); transition-delay: var(--wd, 0s); }
.js .split.in .w > span { transform: none; }

/* Partículas nas laterais */
.dust { position: fixed; inset: 0; z-index: var(--z-dust); width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity var(--t-1600) var(--ease-out); }
.dust.is-on { opacity: 1; }
html:not(.js) .dust { display: none; }

/* =========================================================
   ABERTURA
   ========================================================= */
.intro { position: fixed; inset: 0; z-index: var(--z-intro); display: none; place-items: center; background: var(--color-bg); transition: opacity var(--t-500) var(--ease-out); }
.intro-on .intro, .intro.is-active { display: grid; }
.intro-on { overflow: hidden; }
.intro-on .header { opacity: 0; }
.intro__symbol { width: var(--intro-symbol); height: auto; overflow: visible; fill: var(--color-gold-400); transition: transform var(--t-900) var(--ease-out), opacity var(--t-400) var(--ease-out) var(--t-300); }
.intro__symbol g { opacity: 0; transform-box: fill-box; transform-origin: center; }
.intro__tronco { transform-origin: 50% 100%; transform: scaleY(.2); }
.intro__copa { transform: scale(.6) translateY(20%); }
.intro__pontos { transform: translateY(40%); }
/* sequência: tronco cresce → copa abre → pontos sobem (mesmas curvas do selo da Bonança) */
.intro.play .intro__tronco { animation: seal-in var(--t-600) var(--ease-out) .05s forwards; }
.intro.play .intro__copa { animation: seal-in var(--t-700) var(--ease-out) .22s forwards; }
.intro.play .intro__pontos { animation: seal-in var(--t-500) var(--ease-out) .5s forwards; }
@keyframes seal-in { to { opacity: 1; transform: none; } }
.intro.leave { opacity: 0; pointer-events: none; }
.intro.leave .intro__symbol { opacity: 0; }

/* =========================================================
   BOTÕES (hover da Bonança: 3 círculos sobem, texto rola, ícone se desenha)
   ========================================================= */
.btn {
  --btn-bg: var(--grad-btn-gold);
  --btn-fg: var(--color-text);
  --btn-fg-hover: var(--color-text-light);
  --btn-icon-hover: var(--color-gold-300);
  --btn-ring: var(--ring-inner-gold);
  --l1: var(--color-gold-grad-start);
  --l2: var(--color-gold-500);
  --l3: var(--color-dark);
  --pt: var(--color-white);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transform: translateZ(0);
  transition: transform var(--t-200) var(--ease-out), color var(--t-500) var(--ease-out);
}
.btn:active { transform: scale(.965); }
.btn--gold::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: var(--grad-btn-sheen); pointer-events: none; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: var(--btn-ring); pointer-events: none; }
.btn--sm { height: var(--btn-sm-h); padding: 0 var(--btn-sm-pr) 0 var(--btn-sm-pl); gap: var(--btn-sm-gap); font-size: var(--fs-btn-sm); line-height: var(--lh-btn-sm); letter-spacing: var(--ls-btn-sm); }
.btn--sm .btn__label { width: var(--btn-sm-label); }
.btn--sm .btn__icon { translate: 0 var(--btn-icon-shift); }
.btn__bg, .btn__pts { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.btn__bg i { position: absolute; left: 50%; top: -60%; width: max(200%, 10rem); aspect-ratio: 1; margin-left: calc(max(200%, 10rem) / -2); border-radius: 50%; transform: scale(0); transition: transform var(--t-700) var(--ease-out) .12s; }
.btn__bg i:nth-child(1) { background: var(--l1); transition-delay: .2s; }
.btn__bg i:nth-child(2) { background: var(--l2); transition-delay: .1s; }
.btn__bg i:nth-child(3) { background: var(--l3); transition-delay: 0s; }
.btn__pts i { position: absolute; bottom: -6px; left: var(--x); width: 2px; height: 2px; border-radius: 50%; background: var(--pt); opacity: var(--o); animation: btn-pt var(--t) ease-in-out var(--d) infinite; animation-play-state: paused; }
.btn.is-live .btn__pts i { animation-play-state: running; }
@keyframes btn-pt { 0% { transform: translateY(0); } 85% { opacity: 0; } 100% { transform: translateY(-58px); opacity: 0; } }
.btn__icon { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: var(--btn-icon-box); }
.btn__icon svg { width: var(--btn-icon-w); height: var(--btn-icon-h); overflow: visible; fill: currentColor; stroke: currentColor; stroke-width: 0; transition: color var(--t-500) var(--ease-out), transform var(--t-700) var(--ease-out); }
.btn__label { position: relative; z-index: 1; display: inline-grid; overflow: hidden; padding: var(--space-2) 0; }
.btn__label > span { grid-area: 1 / 1; padding: var(--space-4) 0; text-box: trim-both cap alphabetic; transition: transform var(--t-700) var(--ease-out), opacity var(--t-400) linear; }
.btn__label > span + span { opacity: 0; transform: translateY(70%); }
@media (hover: hover) {
  .btn:hover { color: var(--btn-fg-hover); }
  .btn:hover .btn__bg i { transform: scale(1); transition: transform var(--dur-button) var(--ease-button); }
  .btn:hover .btn__bg i:nth-child(1) { transition-delay: 0s; }
  .btn:hover .btn__bg i:nth-child(2) { transition-delay: .1s; }
  .btn:hover .btn__bg i:nth-child(3) { transition-delay: .2s; }
  .btn:hover .btn__icon svg { color: var(--btn-icon-hover); transform: translateY(-1px) rotate(-6deg); animation: btn-draw var(--t-1000) linear forwards; }
  .btn:hover .btn__label > span:first-child { opacity: 0; transform: translateY(-70%); transition: transform var(--t-1400) var(--ease-button), opacity var(--t-300) linear; }
  .btn:hover .btn__label > span + span { opacity: 1; transform: none; transition: transform var(--t-1400) var(--ease-button), opacity var(--t-1400) var(--ease-button); }
}
@keyframes btn-draw {
  0% { fill: transparent; stroke-width: .6; stroke-dasharray: 0 1; }
  88% { fill: transparent; stroke-width: .6; stroke-dasharray: 1 0; }
  100% { fill: currentColor; stroke-width: 0; stroke-dasharray: 1 0; }
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-top: var(--header-top);
  pointer-events: none;
  transition: padding-top var(--dur-header) var(--ease-out), opacity var(--dur-header) var(--ease-out);
}
.header__bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 2 * var(--page-margin));
  max-width: var(--container);
  height: var(--header-h);
  margin-inline: auto;
  pointer-events: auto;
  transition: height var(--dur-header) var(--ease-out), width var(--dur-header) var(--ease-out), max-width var(--dur-header) var(--ease-out), padding var(--dur-header) var(--ease-out);
}
.header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--header-pill-bg);
  -webkit-backdrop-filter: var(--header-blur);
  backdrop-filter: var(--header-blur);
  box-shadow: var(--shadow-header);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity var(--t-600) var(--ease-out), transform var(--dur-header) var(--ease-out);
}
.header__logo { display: block; flex: none; transition: margin var(--dur-header) var(--ease-out); }
.header__logo img { width: var(--logo-w); height: auto; transition: width var(--dur-header) var(--ease-out); }

.nav { display: flex; align-items: center; gap: var(--nav-gap); }
.nav__links { position: relative; display: flex; align-items: flex-start; gap: var(--nav-links-gap); padding: var(--nav-links-pad); }
.nav__link { display: block; width: var(--w); white-space: nowrap; padding: var(--nav-link-pad); color: var(--color-text); font-size: var(--fs-14); line-height: var(--lh-nav); font-weight: var(--fw-medium); opacity: var(--nav-opacity); transition: opacity var(--t-350); }
.nav__text { text-box: trim-both cap alphabetic; transition: font-weight var(--t-500) var(--ease-out); }
.nav__link:hover, .nav__link:focus-visible, .nav__link.is-active { opacity: 1; }
.nav__link.is-active .nav__text { font-weight: var(--fw-bold); }
.nav__marker {
  position: absolute;
  left: 0;
  bottom: var(--space-4);
  width: var(--nav-marker-w);
  height: var(--nav-marker-h);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--bx, 0px) - 50%));
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  transition: transform var(--t-900) var(--ease-out), opacity var(--t-400) var(--ease-out), bottom var(--dur-header) var(--ease-out);
}
.nav__marker.is-on { opacity: 1; }
.nav__marker svg { overflow: visible; }
.nav__marker path { fill: none; stroke: var(--color-gold-400); stroke-width: 1.5; stroke-linecap: round; }
.nav__marker.is-on path { animation: wave-flow 2.4s linear infinite; }
@keyframes wave-flow { to { transform: translateX(10px); } }

.header__menu-btn {
  display: none;
  place-items: center;
  flex: none;
  width: var(--menu-btn);
  height: var(--menu-btn);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--menu-btn-border) var(--color-line);
  transition: width var(--dur-header) var(--ease-out), height var(--dur-header) var(--ease-out), box-shadow var(--t-500), background-color var(--t-500);
}
.header__menu-icon { position: relative; width: var(--menu-line); height: calc(2 * var(--menu-line-gap) + var(--menu-line-h)); }
.header__menu-icon::before, .header__menu-icon::after { content: ""; position: absolute; right: 0; height: var(--menu-line-h); border-radius: var(--radius-pill); background: var(--color-text); transition: transform var(--t-400) var(--ease-out), width var(--t-400) var(--ease-out); }
.header__menu-icon::before { top: 0; width: var(--menu-line); }
.header__menu-icon::after { bottom: 0; width: var(--menu-line-short); }
@media (hover: hover) { .header__menu-btn:hover .header__menu-icon::after { width: var(--menu-line); } }
.menu-open .header__menu-icon::before { transform: translateY(var(--menu-line-gap)) rotate(45deg); }
.menu-open .header__menu-icon::after { width: var(--menu-line); transform: translateY(calc(-1 * var(--menu-line-gap))) rotate(-45deg); }

/* Estado ao rolar: vira pílula creme com desfoque */
.header.is-slim { padding-top: var(--header-slim-top); }
.header.is-slim .header__bar { height: var(--header-slim-h); width: calc(100% - var(--header-slim-edge)); max-width: var(--header-slim-w); padding: var(--header-slim-pad); }
.header.is-slim .header__bar::before { opacity: 1; transform: none; }
.header.is-slim .header__logo img { width: var(--logo-w-slim); }
.header.is-slim .nav__marker { bottom: var(--space-6); }
.header.is-slim .header__menu-btn { width: var(--menu-btn-slim); height: var(--menu-btn-slim); box-shadow: none; background-color: var(--color-menu-slim); }

/* Menu mobile (centralizado, com o círculo do hero ao fundo) */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-40);
  padding: var(--space-100) var(--page-margin) var(--space-48);
  text-align: center;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-450) var(--ease-out), visibility 0s var(--t-450);
}
.menu-open { overflow: hidden; }
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity var(--t-450) var(--ease-out); }
.menu__circle { position: absolute; left: 50%; top: 50%; z-index: -1; width: var(--menu-circle); aspect-ratio: 1; border-radius: 50%; background: var(--grad-hero-circle); translate: -50% -50%; scale: .6; opacity: 0; transition: scale var(--t-1600) var(--ease-out), opacity var(--t-1000) var(--ease-out); }
.menu-open .menu__circle { scale: 1; opacity: 1; }
.menu__symbol { width: var(--menu-symbol-w); height: auto; fill: var(--color-gold-400); }
.menu__links { display: grid; gap: var(--space-28); }
.menu__link { position: relative; display: inline-block; font-family: var(--font-display); font-size: var(--fs-h3-lg); line-height: var(--lh-h3-lg); letter-spacing: var(--ls-h3-lg); text-box: trim-both cap alphabetic; }
.menu__link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + var(--space-10));
  width: var(--nav-marker-w);
  height: var(--nav-marker-h);
  translate: -50% 0;
  background: var(--color-gold-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 3q2.5-2.4 5 0t5 0' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 10px 6px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 3q2.5-2.4 5 0t5 0' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 10px 6px repeat-x;
  opacity: 0;
  transition: opacity var(--t-400) var(--ease-out);
}
.menu-open .menu__link.is-active::after { animation: menu-wave 2.4s linear infinite; }
.menu__link.is-active::after { opacity: 1; }
@keyframes menu-wave { to { -webkit-mask-position: 10px 0; mask-position: 10px 0; } }
.menu__sign { font-size: var(--fs-13); color: var(--color-text-muted); }
.menu__symbol, .menu__link, .menu__cta, .menu__sign { opacity: 0; transform: translateY(var(--menu-y)); transition: opacity var(--t-600) var(--ease-out) var(--d, 0s), transform var(--t-600) var(--ease-out) var(--d, 0s); }
.menu-open .menu__symbol, .menu-open .menu__link, .menu-open .menu__cta, .menu-open .menu__sign { opacity: 1; transform: none; }

/* ---------- Header: tablet ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__links { gap: var(--nav-links-gap-tablet); }
}
@media (min-width: 1024px) {
  .menu { display: none; }
}
@media (max-width: 1023px) {
  .nav { display: none; }
  .header__menu-btn { display: grid; }
}
/* ---------- Header: mobile (frame 420) ---------- */
@media (max-width: 767px) {
  .header { padding-top: var(--header-top-m); }
  .header__logo img { width: var(--logo-w-m); }
  .header.is-slim .header__logo img { width: var(--logo-w-m-slim); }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv-mask, .js .split .w > span { opacity: 1; transform: none; clip-path: none; transition: none; }
  .btn__pts { display: none; }
  .nav__marker.is-on path, .menu-open .menu__link.is-active::after { animation: none; }
  .btn:hover .btn__icon svg { animation: none; }
}

/* =========================================================
   BOTÃO GRANDE (hero, CTAs) + assinatura
   ========================================================= */
.btn--lg { padding: var(--btn-lg-pad); gap: var(--space-20); border: 1px solid var(--color-btn-border); --btn-ring: none; font-size: var(--fs-18); line-height: var(--lh-btn); letter-spacing: var(--ls-button); }
.btn__arrow { position: relative; z-index: 1; flex: none; width: var(--btn-arrow); height: var(--btn-arrow); transition: transform var(--t-600) var(--ease-out); }
.btn__arrow rect { fill: var(--color-dark); transition: fill var(--t-500) var(--ease-out); }
.btn__arrow path { fill: var(--color-gold-300); transition: fill var(--t-500) var(--ease-out); }
@media (hover: hover) {
  .btn:hover .btn__arrow { transform: translateX(var(--btn-arrow-shift)); }
  .btn:hover .btn__arrow rect { fill: var(--color-gold-300); }
  .btn:hover .btn__arrow path { fill: var(--color-dark); }
}

.signature { display: flex; align-items: center; gap: var(--space-13); }
.signature__avatar { flex: none; width: var(--avatar-w); height: var(--avatar-h); border-radius: var(--radius-avatar); object-fit: cover; box-shadow: var(--ring-avatar); }
.signature__text { display: flex; flex-direction: column; gap: var(--space-10); color: var(--color-text); white-space: nowrap; text-align: left; }
.signature__name { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-signature); line-height: var(--lh-sig-name); letter-spacing: var(--ls-signature); }
.signature__detail { font-weight: var(--fw-semibold); font-size: var(--fs-8); line-height: var(--lh-sig-detail); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; z-index: 0; container-type: inline-size; overflow: clip; padding-bottom: var(--space-80); }
.hero__art { position: absolute; inset: 0; pointer-events: none; }
.hero__art > * { position: absolute; display: block; max-width: none; }
.hero__fundo { overflow: hidden; }
.hero__fundo img { position: absolute; max-width: none; }
.hero__fundo::after { content: ""; position: absolute; inset: 0; background: var(--grad-hero-fundo); }

.hero__inner { position: relative; z-index: 7; }
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hero-gap); }
.hero__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: min(var(--fs-hero), (100cqw - 2 * var(--page-margin)) / 13.2); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); white-space: nowrap; }
.hero__texts { display: flex; flex-direction: column; gap: var(--space-32); line-height: var(--lh-hero-text); text-wrap: pretty; }
.hero__lead { max-width: var(--hero-lead-w); font-size: var(--fs-lead); }
.hero__strong { font-size: var(--fs-20); font-weight: var(--fw-bold); }
.hero__cta { display: flex; align-items: center; gap: var(--space-40); }

/* Cards */
.hero__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
@media (min-width: 1024px) and (max-width: 1279px) { .hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hcard { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-32); padding: var(--card-pad); border-radius: var(--radius-2xl); background: var(--card-bg); }
.hcard--tdah { --card-bg: var(--color-sand-500); }
.hcard--altas { --card-bg: var(--color-bg); border: 1px solid var(--color-sand-500); }
.hcard--aprendizagem, .hcard--tea { --card-bg: var(--color-cream-100); }
.hcard__head { display: flex; align-items: flex-start; justify-content: space-between; }
.hcard__title { width: var(--card-title-w); max-width: calc(100% - var(--card-icon)); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h3-card); line-height: var(--lh-h3-card); letter-spacing: var(--ls-h3-card); text-wrap: balance; }
.hcard__icon { flex: none; width: var(--card-icon-w); height: var(--card-icon-h); margin-top: var(--card-icon-top); fill: var(--color-gold-400); }
.hcard__illus { position: relative; width: min(var(--card-illus-w), 100% + var(--space-32)); aspect-ratio: 346.6 / 221.734; }

.hcard__illus img { position: absolute; left: calc(var(--x) / 346.6 * 100%); top: calc(var(--y) / 221.734 * 100%); width: calc(var(--s) / 346.6 * 100%); height: auto; max-width: none; }
.hcard__shape { transition: transform var(--t-1200) var(--ease-out); }
.hcard__img { aspect-ratio: 1; object-fit: contain; transition: transform var(--t-900) var(--ease-out); }
@media (hover: hover) {
  .hcard:hover .hcard__shape { transform: rotate(14deg) scale(1.06); }
  .hcard:hover .hcard__img { transform: translateY(-6px); }
}
.hcard__text { font-size: var(--fs-15); line-height: var(--lh-tight); text-wrap: pretty; }
.hcard__text strong { font-weight: var(--fw-bold); }

/* ---------- Hero: desktop e tablet (composição do frame 1920, escala abaixo de 1280) ---------- */
@media (min-width: 1024px) {
  .hero__fundo { left: calc(var(--hero-ox) - 640 * var(--hero-u)); top: 0; width: calc(2560 * var(--hero-u)); height: calc(800 * var(--hero-u)); }
  .hero__fundo img { left: -10.08%; top: -4.36%; width: 112.8%; height: 112.8%; } /* recorte do preenchimento no Figma (344:2983) */
  .hero__inner { padding-top: calc(221 * var(--hero-u)); }
  .hero__content { width: var(--hero-text-w); min-height: calc(543 * var(--hero-u)); } /* cards em y 764 */
  .hero__title { margin: var(--hero-title-pt) 0 var(--hero-title-mb); }
  .hcard--tdah .hcard__illus, .hcard--tea .hcard__illus { translate: 0 var(--card-illus-dy); }
}

/* ---------- Hero: mobile (frame 420, centralizado; escala até 520px de palco) ---------- */
@media (max-width: 1023px) {
  /* primeira dobra: título, textos e botão cabem na altura visível (100svh, com a barra do navegador).
     --hero-a = 1px do Figma para a arte; encolhe com a altura da tela (mín. 40%) e fica centralizada.
     --hero-fold = altura do título ao botão + respiro inferior */
  .hero { --hero-fold: 302px; --hero-a: max(var(--hero-m) * .4, min(var(--hero-m), (100svh - var(--hero-fold)) / 386)); }
  /* foto ocupa a largura toda; a Raquel (63,2% da imagem) fica no centro da tela */
  .hero__fundo { left: 0; top: 0; width: 100%; height: calc(453 * var(--hero-a)); }
  .hero__fundo img { top: 0; left: calc(50cqw - 916 * var(--hero-a)); width: auto; height: 100%; }
  .hero__fundo::after { background: var(--grad-hero-fundo-m); }
  .hero__inner { padding-top: calc(386 * var(--hero-a)); }
  .hero__content { align-items: center; gap: var(--space-24); max-width: var(--hero-stage-m-max); margin-inline: auto; text-align: center; }
  .hero__texts { gap: var(--space-16); }
  .hero__title { white-space: normal; }
  .hero__lead { max-width: none; }
  .hero__cta { flex-direction: column; gap: var(--space-20); }
  .hero .btn--lg { text-transform: uppercase; }
  .hero__cards { grid-template-columns: minmax(0, 1fr); max-width: var(--cards-max-m); margin: var(--space-80) auto 0; }
  .hcard { justify-content: flex-start; }
}
@media (max-width: 389px) { .hero { --hero-fold: 322px; } } /* texto de apoio quebra em 4 linhas */
@media (min-width: 600px) and (max-width: 1023px) { .hero { --hero-fold: 320px; } } /* tablet: título maior */

/* ---------- Hero: entrada (Bonança) depois que as fotos carregam ---------- */
.js .hero__fundo { opacity: .01; transition: opacity var(--t-1200) var(--ease-out) .1s; }
.js .hero__fundo img { scale: 1.04; transition: scale var(--t-1600) var(--ease-out) .1s; }
.js .hero.is-ready .hero__fundo { opacity: 1; }
.js .hero.is-ready .hero__fundo img { scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__fundo, .js .hero__fundo img { transition: none; }
}

/* =========================================================
   FAIXA ÁRVORE
   ========================================================= */
.band { padding-inline: var(--band-inset); }
.band__box { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; height: var(--band-h); padding: var(--band-pad); border: 1px solid var(--color-sand-500); border-radius: var(--radius-band); background: var(--color-gray-200); }
.band__box::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-band); }
.band__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.band__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2-tree); line-height: var(--lh-h2-tree); letter-spacing: var(--ls-h2-tree); text-align: center; text-wrap: balance; }
@media (max-width: 767px) {
  .band { padding-inline: var(--band-inset-m); }
  .band__box { padding: var(--band-pad-m); border-radius: var(--radius-lg); }
  .br-d { display: none; }
}
/* Bonança: o bloco cresce de 90% para 100% enquanto entra na tela (Firefox fica estático) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .band__box { animation: band-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes band-grow { from { scale: .9; } to { scale: 1; } }
  }
}

/* =========================================================
   ANIMAÇÕES DE APOIO (Bonança): crescer ao entrar + flutuar em loop
   ========================================================= */
.js .rv-grow { scale: 1 .2; opacity: 0; transform-origin: 50% 100%; transition: scale var(--t-1600) var(--ease-out) .1s, opacity var(--t-1000) var(--ease-out) .1s; }
.js .rv-grow.in { scale: 1; opacity: 1; }
@keyframes qs-bob { from { translate: 0 -6px; rotate: -3deg; } to { translate: 0 6px; rotate: 3deg; } }
@keyframes qs-drift { from { translate: -8px 0; } to { translate: 8px 0; } }
@keyframes qs-spin { from { rotate: -8deg; } to { rotate: 8deg; } }
@media (prefers-reduced-motion: no-preference) {
  .js .float-bob { animation: qs-bob var(--fd, 5s) ease-in-out var(--fdl, 0s) infinite alternate; }
  .js .float-drift { animation: qs-drift var(--fd, 7.5s) ease-in-out var(--fdl, 0s) infinite alternate; }
  .js .float-spin { animation: qs-spin var(--fd, 11s) ease-in-out var(--fdl, 0s) infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .js .rv-grow { scale: 1; opacity: 1; transition: none; } }

/* =========================================================
   RÓTULO
   ========================================================= */
.rotulo { position: relative; z-index: 0; container-type: inline-size; overflow-x: clip; }
.rotulo__inner { position: relative; z-index: 2; padding-top: var(--rotulo-pt); }
.rotulo__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-40); }
.selos { display: flex; align-items: center; gap: var(--space-26); }
.selos__label { color: var(--color-black); font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.selos__label--end { text-align: right; }
.selos__icon { box-sizing: content-box; flex: none; width: var(--selos-icon-w); height: var(--selos-icon-h); padding: 0 var(--selos-icon-pad); margin: var(--selos-icon-overflow) 0; fill: var(--color-text); rotate: var(--selos-icon-rot); }
.rotulo__title { width: var(--rotulo-title-w); max-width: 100%; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h3-lg); line-height: var(--lh-h3-lg); letter-spacing: var(--ls-h3-lg); }
.rotulo__texts { display: flex; flex-direction: column; gap: var(--rotulo-texts-gap); width: var(--rotulo-texts-w); max-width: 100%; font-size: var(--fs-16); line-height: var(--lh-tight); text-wrap: pretty; }
.rotulo__texts strong { font-weight: var(--fw-bold); }

.rotulo__art > * { position: absolute; display: block; max-width: none; height: auto; }
.rotulo__decor { z-index: 1; }
.rotulo__circle { z-index: 2; border-radius: 50%; background: var(--grad-hero-circle); }
.rotulo__mancha { z-index: 3; }
.rotulo__foto { z-index: 4; --r: 0; }
.selo { z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: var(--selo-gap); width: var(--selo-w); }
.rotulo__sementes { z-index: 6; }
.selo__tree { width: var(--btn-icon-w); height: var(--btn-icon-h); margin: calc((var(--selo-row-h) - var(--btn-icon-h)) / 2) var(--selo-tree-mr) calc((var(--selo-row-h) - var(--btn-icon-h)) / 2) 0; fill: var(--color-gold-400); transform: rotate(var(--selo-tree-rot)); }
.selo__title { height: var(--selo-title-box); margin-top: var(--selo-title-shift); font-family: var(--font-display); font-size: var(--fs-selo-title); line-height: 1; letter-spacing: var(--ls-selo-title); white-space: nowrap; }
.selo__desc { box-sizing: content-box; width: var(--selo-desc-w); padding: var(--selo-desc-pad); font-size: var(--fs-selo-desc); font-weight: var(--fw-semibold); line-height: var(--lh-selo-desc); text-align: right; }

/* ---------- Rótulo: desktop/tablet (coordenadas do frame 1920, a partir do container) ---------- */
@media (min-width: 1024px) {
  .rotulo { min-height: calc(var(--rotulo-h) * var(--hero-u)); }
  .rotulo__art { position: absolute; inset: 0; pointer-events: none; }
  .rotulo__decor    { left: calc(var(--hero-ox) + 1075 * var(--hero-u)); top: 0; width: calc(752 * var(--hero-u)); }
  .rotulo__circle   { left: calc(var(--hero-ox) + 582 * var(--hero-u)); top: calc(219 * var(--hero-u)); width: calc(706 * var(--hero-u)); aspect-ratio: 1; }
  .rotulo__mancha   { left: calc(var(--hero-ox) + 735.71 * var(--hero-u)); top: calc(121.51 * var(--hero-u)); width: calc(470 * var(--hero-u)); }
  .rotulo__foto     { left: calc(var(--hero-ox) + 764 * var(--hero-u)); top: calc(76 * var(--hero-u)); width: calc(341 * var(--hero-u)); }
  .selo             { left: calc(var(--hero-ox) + 1281.61 * var(--hero-u) - var(--selo-w)); top: calc(81 * var(--hero-u)); } /* ancorado pela direita */
  .rotulo__sementes { left: calc(var(--hero-ox) + 560.44 * var(--hero-u)); top: calc(514.22 * var(--hero-u)); width: calc(84 * var(--hero-u)); }
}
/* ---------- Rótulo: mobile (frame 420; a arte vem depois do texto) ---------- */
@media (max-width: 1023px) {
  .rotulo__inner { padding-top: var(--rotulo-pt-m); }
  .rotulo__content { gap: var(--space-36); max-width: var(--hero-stage-m-max); margin-inline: auto; }
  .rotulo__title { width: auto; }
  .rotulo__art { position: relative; height: calc(426 * var(--hero-m)); margin-top: var(--rotulo-art-gap-m); pointer-events: none; }
  .rotulo__decor    { left: calc(var(--hero-mox) - 321 * var(--hero-m)); top: calc(-169 * var(--hero-m)); width: calc(575 * var(--hero-m)); }
  .rotulo__circle   { left: calc(var(--hero-mox) - 81 * var(--hero-m)); top: calc(109 * var(--hero-m)); width: calc(539 * var(--hero-m)); height: calc(540 * var(--hero-m)); }
  .rotulo__mancha   { left: calc(var(--hero-mox) + 36 * var(--hero-m)); top: calc(34.75 * var(--hero-m)); width: calc(360 * var(--hero-m)); }
  .rotulo__foto     { left: calc(var(--hero-mox) + 96 * var(--hero-m)); top: 0; width: calc(240 * var(--hero-m)); }
  .selo             { left: calc(var(--hero-mox) + 409 * var(--hero-m) - var(--selo-w)); top: calc(4 * var(--hero-m)); }
  .rotulo__sementes { display: none; }
}

/* =========================================================
   PAINEL CREME (um olhar + processo)
   ========================================================= */
.panel { --pl: var(--panel-l); --pr: var(--panel-r); position: relative; z-index: 1; margin: 0 var(--pr) 0 var(--pl); background: var(--color-gray-100); border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.panel > section { margin: 0 calc(-1 * var(--pr)) 0 calc(-1 * var(--pl)); } /* conteúdo volta à largura da tela */
@media (max-width: 767px) {
  .panel { --pl: var(--panel-l-m); --pr: var(--panel-r-m); border-radius: var(--radius-panel-m); }
}

/* =========================================================
   UM OLHAR
   ========================================================= */
.olhar { padding-top: var(--olhar-pt); }
.olhar__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-40); max-width: var(--olhar-head-w); text-align: center; }
.olhar__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2-xl); line-height: var(--lh-h2-xl); white-space: nowrap; }
.olhar__lead { font-size: var(--fs-18); line-height: var(--lh-lead-29); text-wrap: pretty; }
.olhar__lead strong { font-weight: var(--fw-bold); }
.olhar__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tags-gap); }
.tag { padding: var(--tag-pad); border-radius: var(--radius-tag); background: var(--tag-bg); font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: var(--lh-tag); white-space: nowrap; text-box: trim-both cap alphabetic; }

/* Faixa de fotos em curva (Bonança: marquee contínuo + cilindro côncavo) */
.trilha { --cw: var(--trilha-cw); --r: var(--radius-trilha); position: relative; height: var(--trilha-h); margin-top: var(--trilha-mt); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.trilha.is-dragging { cursor: grabbing; }
.trilha__list { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; }
.trilha__card { position: absolute; left: 0; top: 0; width: var(--cw); aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-card); transform-origin: 50% 100%; will-change: transform; opacity: 0; transition: opacity var(--t-900) var(--ease-out); }
.trilha.is-on .trilha__card { opacity: 1; }
.trilha__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

@media (max-width: 767px) {
  .olhar { padding-top: var(--olhar-pt-m); }
  .olhar__head { gap: var(--space-36); }
  .olhar__title { white-space: normal; }
  .olhar__lead { font-size: var(--fs-16); }
  .olhar__tags { gap: var(--space-20); }
  .trilha { --cw: var(--trilha-cw-m); --r: var(--radius-trilha-m); height: var(--trilha-h-m); margin-top: var(--trilha-mt-m); }
  .trilha__card { box-shadow: var(--shadow-card-m); }
}

/* =========================================================
   PROCESSO
   ========================================================= */
.processo { position: relative; z-index: 0; container-type: inline-size; padding: var(--processo-pt) 0 var(--processo-pb); }
.processo__art > * { position: absolute; display: block; max-width: none; height: auto; pointer-events: none; }
.processo__inner { position: relative; z-index: 1; }
.processo__head { display: flex; flex-direction: column; gap: var(--processo-head-gap); width: var(--processo-text-w); max-width: 100%; margin-left: var(--processo-text-x); }
.processo__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2-lg); line-height: var(--lh-h2-lg); letter-spacing: var(--ls-h2-lg); }
.processo__lead { color: var(--color-slate); font-size: var(--fs-18); line-height: var(--lh-tight); text-wrap: pretty; }
.processo__lead strong { color: var(--color-text); font-weight: var(--fw-bold); }

.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--etapa-gap); margin-top: var(--processo-cards-mt); }
.etapa { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: var(--etapa-h); padding: var(--etapa-pad); border-radius: var(--radius-2xl); background: var(--etapa-bg); transition: translate var(--t-700) var(--ease-out), box-shadow var(--t-700) var(--ease-out); }
.js .etapa.rv { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), translate var(--t-700) var(--ease-out), box-shadow var(--t-700) var(--ease-out); transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
.etapa--light { --etapa-bg: var(--color-bg); }
.etapa--cream { --etapa-bg: var(--color-cream-100); }
.etapa__title { position: relative; z-index: 1; padding-top: var(--etapa-title-dy); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-etapa); line-height: var(--lh-tight); text-wrap: balance; }
.etapa__l { display: inline-block; font-weight: var(--fw-bold); font-size: var(--fs-etapa-l); transform-origin: 50% 90%; transition: transform var(--t-600) var(--ease-out); }
.etapa__ico { position: absolute; left: calc(50% + var(--etapa-ico-dx)); top: var(--iy); width: var(--etapa-ico); aspect-ratio: 1; }
.etapa__sh { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--t-1200) var(--ease-out); }
.etapa__sh--back { top: var(--etapa-back-dy); }
.etapa__ic { position: absolute; left: var(--etapa-ic-inset); top: var(--etapa-ic-inset); width: var(--etapa-ic); height: var(--etapa-ic); overflow: visible; transition: transform var(--t-900) var(--ease-out); }
.etapa__text { position: relative; z-index: 1; font-size: var(--fs-15); line-height: var(--lh-tight); text-wrap: pretty; }
/* ícone se desenha quando o card entra (Bonança) */
.js .etapa .dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out) calc(var(--d, 0s) + .3s); }
.js .etapa.in .dr { stroke-dashoffset: 0; }
.js .etapa .fl { opacity: 0; transition: opacity var(--t-900) var(--ease-out) calc(var(--d, 0s) + .9s); }
.js .etapa.in .fl { opacity: 1; }
@keyframes step-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (hover: hover) {
  .etapa:hover { translate: 0 -6px; box-shadow: var(--shadow-etapa-hover); }
  .etapa:hover .etapa__l { transform: translateY(-4px) rotate(-8deg) scale(1.08); }
  .etapa:hover .etapa__sh { transform: rotate(30deg) scale(1.14); }
  .etapa:hover .etapa__ic { transform: translateY(-5px); }
  .js .etapa.in:hover .dr { animation: step-redraw 1.1s var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) { .js .etapa .dr { stroke-dashoffset: 0; transition: none; } .js .etapa .fl { opacity: 1; transition: none; } }

/* ---------- Processo: desktop/tablet (menina + decor, coordenadas do frame 1920) ---------- */
@media (min-width: 1024px) {
  .processo__art { position: absolute; inset: 0; }
  .processo__decor    { left: calc(var(--hero-ox) + 933 * var(--hero-u)); top: calc(152 * var(--hero-u)); width: calc(874 * var(--hero-u)); }
  .processo__mancha   { left: calc(var(--hero-ox) + 725.03 * var(--hero-u)); top: calc(28.02 * var(--hero-u)); width: calc(340 * var(--hero-u)); }
  .processo__galho1   { left: calc(var(--hero-ox) + 678.53 * var(--hero-u)); top: calc(277.83 * var(--hero-u)); width: calc(150 * var(--hero-u)); }
  .processo__galho2   { left: calc(var(--hero-ox) + 1099.83 * var(--hero-u)); top: calc(277.83 * var(--hero-u)); width: calc(150 * var(--hero-u)); transform: scaleX(-1); } /* espelhado: x do Figma era a origem do espelho */
  .processo__menina   { left: calc(var(--hero-ox) + 589 * var(--hero-u)); top: 0; width: calc(641.7 * var(--hero-u)); height: calc(685 * var(--hero-u)); object-fit: contain; --r: 0; }
  .processo__sementes1{ left: calc(var(--hero-ox) + 697.49 * var(--hero-u)); top: calc(66.14 * var(--hero-u)); width: calc(70 * var(--hero-u)); }
  .processo__sementes2{ left: calc(var(--hero-ox) + 1075.28 * var(--hero-u)); top: calc(180.55 * var(--hero-u)); width: calc(58 * var(--hero-u)); transform: scaleX(-1); }
}
/* ---------- Processo: mobile (frame 420: sem a composição da menina) ---------- */
@media (max-width: 1023px) {
  .processo { padding: 0 0 var(--processo-pb-m); }
  .processo__art { display: none; }
  .processo__head { width: auto; margin: 0 auto; max-width: var(--hero-stage-m-max); text-align: center; }
  .etapas { grid-template-columns: minmax(0, 1fr); max-width: var(--cards-max-m-480); margin: var(--processo-gap-m) auto 0; }
  .etapa { text-align: center; }
  .etapa__ico { top: var(--iy-m); }
  .etapa:nth-child(4) .etapa__text { margin-bottom: var(--etapa-devolutiva-mb-m); }
  /* Bonança: no celular os cards empilham ao rolar */
  .etapa { position: sticky; top: calc(var(--etapa-sticky-top) + var(--i) * var(--etapa-sticky-step)); box-shadow: var(--shadow-etapa-stack); }
}

/* =========================================================
   O QUE A AVALIAÇÃO INVESTIGA
   ========================================================= */
.inv { --pl: var(--inv-l); --pr: var(--inv-r); position: relative; z-index: 2; margin: var(--inv-overlap) var(--pr) 0 var(--pl); padding: var(--inv-pt) 0 var(--inv-pb); background: var(--color-bg); border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.inv__vp { margin: 0 calc(-1 * var(--pr)) 0 calc(-1 * var(--pl)); } /* conteúdo volta à largura da tela */
.inv__head { display: flex; align-items: flex-end; gap: var(--inv-head-gap); }
.inv__heading { flex: none; width: var(--inv-title-w); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2-inv); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-wrap: balance; }
.inv__note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--inv-note-gap); width: var(--inv-note-w); color: var(--color-text-muted); font-size: var(--fs-note); line-height: var(--lh-lead-29); }
.inv__note strong { color: var(--color-text); font-weight: var(--fw-bold); }
.inv__tree { width: var(--inv-tree-w); height: var(--inv-tree-h); fill: var(--color-gold-400); }

.inv__list { margin-top: var(--inv-list-mt); }
.inv__row { position: relative; display: grid; grid-template-columns: var(--inv-cols); column-gap: var(--inv-col-gap); align-items: start; padding: var(--inv-row-pad) 0; }
.inv__row + .inv__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-divider); transform-origin: left; }
.inv__icon { width: var(--inv-icon); height: var(--inv-icon); margin-top: var(--inv-icon-top); }
.inv__media { overflow: hidden; width: var(--inv-media-w); height: var(--inv-media-h); border-radius: var(--radius-card-tab); background: var(--color-gray-150); transition: width var(--t-700) var(--ease-out), height var(--t-700) var(--ease-out), margin var(--t-700) var(--ease-out); }
.inv__media img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; transition: scale var(--t-1000) var(--ease-out); }
.inv__text { padding-top: var(--inv-text-pt); min-width: 0; }
.inv__title { color: var(--color-inv-title); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-inv-title); line-height: var(--lh-inv-title); letter-spacing: var(--ls-inv-title); transition: color var(--t-400) var(--ease-out), transform var(--t-600) var(--ease-out); }
.inv__desc { margin-top: var(--inv-desc-mt); color: var(--color-text-muted); font-size: var(--fs-15); line-height: var(--lh-relaxed); text-wrap: pretty; }
.inv__plus { justify-self: end; display: grid; place-items: center; width: var(--inv-plus); height: var(--inv-plus); margin-top: var(--inv-plus-top); border: 1px solid var(--color-divider); border-radius: var(--radius-pill); transition: transform var(--t-500) var(--ease-out), background-color var(--t-400) var(--ease-out), border-color var(--t-400) var(--ease-out); }
.inv__plus img { width: var(--inv-plus-icon); height: var(--inv-plus-icon); }
.inv__icon { transition: scale var(--t-600) var(--ease-out); }

/* texto extra do "+" (Bonança: a área abre de 0fr para 1fr e o texto sobe) */
.inv__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-accordion) var(--ease-out); }
.inv__more > div { overflow: hidden; visibility: hidden; transition: visibility 0s var(--dur-accordion); }
.inv__more p { text-box: none; max-width: var(--inv-more-w); padding-top: var(--inv-more-mt); color: var(--color-text); font-size: var(--fs-15); line-height: var(--lh-relaxed); text-wrap: pretty; opacity: 0; transform: translateY(var(--inv-more-y)); transition: opacity var(--t-500) var(--ease-out), transform var(--t-600) var(--ease-out); }
.inv__row.is-open .inv__more { grid-template-rows: 1fr; }
.inv__row.is-open .inv__more > div { visibility: visible; transition: visibility 0s; }
.inv__row.is-open .inv__more p { opacity: 1; transform: none; transition-delay: .15s; }

/* aberto (Bonança): foto cresce, título ganha cor e anda 4px, + gira e fica dourado */
.inv__row.is-open .inv__media { width: var(--inv-media-w-open); height: var(--inv-media-h-open); }
.inv__row.is-open .inv__media img { scale: 1; }
.inv__row.is-open .inv__title { color: var(--color-brown-700); transform: translateX(4px); }
.inv__row.is-open .inv__plus { transform: rotate(45deg); background: var(--color-gold-400); border-color: var(--color-gold-400); }
.inv__row.is-open .inv__icon { scale: 1.12; }
@media (hover: hover) and (pointer: fine) {
  .inv__row:not(.is-open):hover .inv__title { color: var(--color-inv-title-hover); }
  .inv__row:not(.is-open):hover .inv__plus { border-color: var(--color-text); }
}

/* entrada linha a linha (Bonança: risco desenha da esquerda, depois ícone, foto, texto e +) */
.js .inv__row::before { transform: scaleX(0); transition: transform var(--t-1100) var(--ease-out); }
.js .inv__row.is-in::before { transform: scaleX(1); }
.js .inv__row > :not(.inv__media) { opacity: 0; translate: 0 24px; transition-property: opacity, translate, scale, transform, background-color, border-color; transition-duration: .8s, var(--t-900), var(--t-600), var(--t-500), var(--t-400), var(--t-400); transition-timing-function: var(--ease-out); }
.js .inv__row > .inv__media { opacity: 0; translate: 0 24px; transition: opacity .8s var(--ease-out) .08s, translate var(--t-900) var(--ease-out) .08s, width var(--t-700) var(--ease-out), height var(--t-700) var(--ease-out), margin var(--t-700) var(--ease-out); }
.js .inv__row > .inv__text { transition-delay: .16s, .16s, 0s, 0s, 0s, 0s; }
.js .inv__row > .inv__plus { transition-delay: .24s, .24s, 0s, 0s, 0s, 0s; }
.js .inv__row.is-in > * { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .js .inv__row::before { transform: none; } .js .inv__row > * { opacity: 1; translate: none; } }

/* ---------- Investiga: mobile/tablet (frame 420: sem foto fechada; risco depois de cada item) ---------- */
@media (max-width: 1023px) {
  .inv { --pl: 0px; --pr: 0px; margin-top: 0; padding: var(--inv-pt-m) 0 var(--inv-pb-m); border-radius: 0; background: none; }
  .inv__inner { max-width: var(--hero-stage-m-max); }
  .inv__head { flex-direction: column; align-items: flex-start; gap: var(--space-36); }
  .inv__heading, .inv__note { width: auto; }
  .inv__tree { display: none; }
  .inv__note { font-size: var(--fs-16); line-height: var(--lh-tight); }
  .inv__list { margin-top: var(--inv-list-mt-m); }
  .inv__row { grid-template-columns: 1fr auto; grid-template-areas: "icon plus" "text text" "media media"; row-gap: 0; padding: 0 0 var(--inv-div-gap-m); }
  .inv__row + .inv__row { margin-top: var(--inv-div-gap-m); }
  .inv__row::before, .inv__row + .inv__row::before { content: ""; position: absolute; left: 0; right: 0; top: auto; bottom: 0; height: 1px; background: var(--color-divider); transform-origin: left; }
  .inv__icon { grid-area: icon; width: var(--inv-icon-m); height: var(--inv-icon-m); margin-top: 0; }
  .inv__plus { grid-area: plus; }
  .inv__text { grid-area: text; padding-top: var(--inv-gap-m); }
  .inv__desc { margin-top: var(--inv-text-gap-m); }
  .inv__media { grid-area: media; width: 100%; height: 0; }
  .inv__row.is-open .inv__media { width: 100%; height: var(--inv-media-h-open-m); margin-top: var(--space-20); }
  .inv__row.is-open .inv__title { transform: none; }
}

/* =========================================================
   BOTÃO ESCURO (CTA de Queixas e FAQ)
   ========================================================= */
.btn--dark {
  --btn-bg: radial-gradient(70% 90% at 50% 120%, color-mix(in srgb, var(--color-cream-glow) 95%, transparent), transparent), var(--color-dark);
  --btn-fg: var(--color-white);
  --btn-fg-hover: var(--color-text);
  --btn-icon-hover: var(--color-text);
  --l1: var(--color-brown-700);
  --l2: var(--color-gold-grad-start);
  --l3: var(--color-gold-300);
  --pt: var(--color-gold-400);
  --arr-bg: var(--color-white);
  --arr-fg: var(--color-dark);
}
.btn__arrow rect { fill: var(--arr-bg, var(--color-dark)); }
.btn__arrow path { fill: var(--arr-fg, var(--color-gold-300)); }
@media (hover: hover) {
  .btn--dark:hover .btn__arrow rect { fill: var(--color-dark); }
  .btn--dark:hover .btn__arrow path { fill: var(--color-gold-300); }
}

/* =========================================================
   QUEIXAS
   ========================================================= */
.queixas { position: relative; z-index: 1; }
.queixas__panel { overflow: clip; padding: var(--qpad, var(--queixas-pad)) 0; border-radius: var(--radius-queixas); background: var(--color-cream-50); }
.queixas__title { text-align: center; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2-queixas); line-height: var(--lh-h2-queixas); letter-spacing: var(--ls-h2-queixas); }
.queixas__viewport { margin-top: var(--queixas-track-mt); }
.queixas__track { display: flex; gap: var(--qcard-gap); width: max-content; will-change: transform; }

.qcard { position: relative; scale: calc(1 - var(--qcard-depth) * var(--qd, 0)); display: flex; flex-direction: column; gap: var(--qcard-gap-in); width: var(--qcard-w); min-height: var(--qcard-h); padding: var(--qcard-pad); border-radius: var(--radius-2xl); background: var(--color-bg); box-shadow: var(--ring-inner); transition: background-color var(--t-500) var(--ease-out); }
.qcard.is-on { background: var(--color-cream-100); }
.qcard__head { display: flex; align-items: center; gap: var(--qcard-head-gap); }
.qcard__tree { box-sizing: content-box; flex: none; width: var(--qcard-tree-w); height: var(--qcard-tree-h); padding: calc((var(--qcard-tree-box) - var(--qcard-tree-h)) / 2) calc((var(--qcard-tree-box) - var(--qcard-tree-w)) / 2); fill: var(--color-gold-400); }
.qcard__title { padding: var(--qcard-title-pad); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h3-queixas); line-height: var(--lh-qcard-title); letter-spacing: var(--ls-h3-queixas); white-space: nowrap; }
.qcard__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--qlist-gap); }
.qitem { display: grid; grid-template-columns: var(--qitem-col) minmax(0, 1fr); grid-template-rows: auto var(--qitem-title-row) minmax(var(--qitem-desc-row), auto); column-gap: var(--qitem-col-gap); row-gap: var(--qitem-row-gap); align-content: start; }
.qitem__media { grid-column: 1 / -1; height: var(--qitem-media-h); margin-bottom: calc(var(--qitem-gap) - var(--qitem-row-gap)); overflow: hidden; border-radius: var(--radius-qitem); background: var(--color-gray-150); }
.qitem__media img { width: 100%; height: 100%; object-fit: cover; scale: var(--qimg-zoom); translate: var(--qx, 0px) 0; transition: transform var(--t-1200) var(--ease-out); }
@media (hover: hover) { .qitem:hover .qitem__media img { transform: scale(1.05); } }
.qitem__icon { grid-row: 2; width: var(--fs-18); height: var(--fs-18); margin-top: var(--space-2); }
.qitem__title { grid-row: 2; padding: var(--qitem-title-pad); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-item-title); line-height: var(--lh-item-title); white-space: nowrap; text-box: trim-both cap alphabetic; }
.qitem__desc { grid-column: 2; grid-row: 3; max-width: var(--qitem-desc-w); padding: var(--qitem-desc-pad); font-size: var(--fs-14); line-height: var(--lh-relaxed); text-wrap: pretty; }

/* Progresso em onda + árvore que balança (Bonança: barco) */
.queixas__foot { margin-top: var(--queixas-prog-mt); }
.qprog { --qlast: 4; display: grid; gap: var(--qprog-gap); padding-top: var(--qprog-pt); }
.qprog__line { position: relative; height: var(--qprog-line-h); }
.qprog__line::before, .qprog__fill { content: ""; position: absolute; inset: 0; background: var(--color-qprog-track); -webkit-mask: var(--qprog-wave) 0 0 / 48px 12px repeat-x; mask: var(--qprog-wave) 0 0 / 48px 12px repeat-x; }
.qprog__fill { right: auto; width: calc(var(--p) * 100%); background: var(--color-gold-500); -webkit-mask-image: var(--qprog-wave-on); mask-image: var(--qprog-wave-on); }
.qprog__dot { position: absolute; top: 50%; left: calc(var(--i) / var(--qlast) * 100%); width: var(--qprog-dot); height: var(--qprog-dot); border-radius: 50%; translate: -50% -50%; background: var(--color-cream-50); box-shadow: inset 0 0 0 var(--qprog-dot-ring) var(--color-qprog-dot-line); transition: width var(--t-400) var(--ease-out), height var(--t-400) var(--ease-out), background-color var(--t-400) var(--ease-out), box-shadow var(--t-500) var(--ease-out); }
.qprog__dot.is-past { background: var(--color-gold-500); box-shadow: none; }
.qprog__dot.is-on { width: var(--qprog-dot-on); height: var(--qprog-dot-on); background: var(--color-gold-500); box-shadow: 0 0 0 calc((var(--qprog-halo) - var(--qprog-dot-on)) / 2) var(--color-qprog-halo); }
.qprog__tree { position: absolute; left: calc(var(--p) * 100%); top: var(--qprog-tree-y); width: var(--qprog-tree-w); height: var(--qprog-tree-h); fill: var(--color-gold-400); translate: -50% 0; transform: translateY(var(--bob, 0px)) rotate(calc(5deg + var(--tilt, 0deg))); }
.qprog__labels { position: relative; height: var(--lh-progress); }
.qprog__label { position: absolute; top: 0; left: calc(var(--i) / var(--qlast) * 100%); translate: -50% 0; padding: var(--qprog-label-pad); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-progress); line-height: var(--lh-progress); white-space: nowrap; opacity: var(--qprog-label-off); transition: opacity var(--t-400) var(--ease-out); text-box: trim-both cap alphabetic; }
.qprog__label:first-child { translate: 0 0; }
@media (max-width: 1279px) { .qprog__label { font-size: calc(var(--fs-progress) * .9); } } /* 5 rótulos numa barra mais curta */
.qprog__label:last-child { left: auto; right: 0; translate: 0 0; }
.qprog__label.is-on, .qprog__label:hover { opacity: 1; }

.queixas__cta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--queixas-cta-mt); }
.queixas__logo { width: var(--queixas-logo-w); height: auto; }
.queixas__text { font-size: var(--fs-18); line-height: var(--lh-tight); white-space: nowrap; }
.queixas__text strong { font-weight: var(--fw-bold); }
.queixas .btn--lg { text-transform: uppercase; }

/* ---------- Queixas: desktop — presa na tela enquanto os cards correm ---------- */
@media (min-width: 1024px) {
  .queixas__pin { height: calc(var(--qh, 958px) + var(--queixas-run)); }
  .queixas__panel { position: sticky; top: var(--qtop, 0px); }
  /* tela baixa: o conteúdo encolhe para caber inteiro abaixo do header */
  .queixas__inner { transform: scale(var(--qk, 1)); transform-origin: 50% 0; margin-bottom: calc((var(--qk, 1) - 1) * var(--qch, 0px)); }
}
/* ---------- Queixas: mobile — 4 blocos empilhados, sem barra ---------- */
@media (max-width: 1023px) {
  .queixas__panel { border-radius: var(--radius-queixas-m); }
  .queixas__title { padding-inline: var(--page-margin); }
  .queixas__viewport { margin-top: var(--queixas-blocks-gap-m); }
  .queixas__track { flex-direction: column; gap: var(--queixas-blocks-gap-m); width: calc(100% - 2 * var(--page-margin)); max-width: var(--hero-stage-m-max); margin-inline: auto; transform: none !important; }
  .qcard { width: auto; min-height: 0; gap: var(--space-20); padding: var(--qcard-pad-m); }
  .qcard.is-on { background: var(--color-bg); }
  .qcard--cream, .qcard--cream.is-on { background: var(--color-cream-100); }
  .qcard__title { line-height: var(--lh-qcard-title-m); white-space: normal; padding: 0; }
  .qcard__list { grid-template-columns: minmax(0, 1fr); gap: var(--qlist-gap-m); }
  .qitem__media { margin-bottom: calc(var(--qitem-gap-m) - var(--qitem-row-gap)); }
  .qitem__title, .qitem__desc { padding: 0; } /* no Figma mobile o texto não tem os respiros do desktop */
  .qprog { display: none; }
  .queixas__foot { margin-top: var(--queixas-blocks-gap-m); }
  .queixas__cta { flex-direction: column; justify-content: flex-start; gap: var(--queixas-cta-gap-m); margin-top: 0; text-align: center; }
  .queixas__text { white-space: normal; text-wrap: pretty; }
}

/* Queixas: entrada dos itens quando o card chega ao centro (fotos revelam de cima para baixo, depois o texto) */
.js .qitem__media { clip-path: inset(0 0 100% 0 round var(--radius-qitem)); transition: clip-path var(--t-1100) var(--ease-out) calc(var(--k, 0) * .1s); }
.js .qcard.is-seen .qitem__media { clip-path: inset(0 0 0 0 round var(--radius-qitem)); }
.js .qitem__icon, .js .qitem__title, .js .qitem__desc { opacity: 0; translate: 0 var(--qitem-y); transition: opacity .8s var(--ease-out), translate var(--t-900) var(--ease-out); transition-delay: calc(.35s + var(--k, 0) * .1s); }
.js .qitem__desc { transition-delay: calc(.45s + var(--k, 0) * .1s); }
.js .qcard.is-seen .qitem__icon, .js .qcard.is-seen .qitem__title, .js .qcard.is-seen .qitem__desc { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .js .qitem__media { clip-path: none; transition: none; }
  .js .qitem__icon, .js .qitem__title, .js .qitem__desc { opacity: 1; translate: none; transition: none; }
  .qitem__media img { translate: none; }
}
@media (max-width: 1023px) { .qcard { scale: none; } .qitem__media img { translate: none; } }

/* =========================================================
   SOBRE
   ========================================================= */
.sobre { position: relative; z-index: 0; container-type: inline-size; overflow-x: clip; margin-top: var(--sobre-mt); }
.sobre__decor { position: absolute; z-index: -1; max-width: none; height: auto; pointer-events: none; }
.sobre__inner { display: flex; flex-direction: column; gap: var(--sobre-gap); }
.sobre__head { display: flex; align-items: flex-end; gap: var(--inv-head-gap); }
.sobre__title { flex: none; width: var(--inv-title-w); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2-inv); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.sobre__text { width: var(--inv-note-w); color: var(--color-text-muted); font-size: var(--fs-18); line-height: var(--lh-tight); text-wrap: pretty; }
.sobre__text strong { color: var(--color-text); font-weight: var(--fw-bold); }

.galeria { display: grid; grid-template-columns: 623fr 636fr; gap: var(--galeria-gap); min-height: var(--galeria-h); }
.gal { --r: var(--radius-gal); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; overflow: hidden; padding: var(--gal-pad); border-radius: var(--radius-gal); background: var(--color-gray-150); }
.gal--raquel { padding: var(--gal-pad-big); }
.gal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-1400) var(--ease-out); }
@media (hover: hover) { .gal:hover > img { transform: scale(var(--gal-zoom)); } }
.pill { position: relative; display: inline-flex; align-items: center; gap: var(--pill-gap); padding: var(--pill-pad); border-radius: var(--radius-pill); background: var(--color-bg); font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: var(--lh-tight); white-space: nowrap; text-box: none; }
.pill--big { padding: var(--pill-pad-big); }
.pill img { width: var(--fs-18); height: var(--fs-18); }
.pill span { padding: var(--pill-text-pad); text-box: trim-both cap alphabetic; }

.formacao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-28); padding: var(--space-40); border-radius: var(--radius-2xl); background: var(--color-gray-150); }
.formacao__title { color: var(--color-text-alt); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h3-formacao); line-height: var(--lh-h3-sm); letter-spacing: var(--ls-h3-sm); text-wrap: balance; }
.formacao__list { display: grid; width: 100%; }
.formacao__list li { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-12) 0; border-top: 1px solid var(--color-review-line); }
.formacao__list img { flex: none; width: var(--space-20); height: var(--space-20); }
.formacao__list p { display: flex; flex-direction: column; gap: var(--space-6); }
.formacao__list strong { color: var(--color-text-alt); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.formacao__list span { color: var(--color-text-muted); font-size: var(--fs-14); line-height: var(--lh-tight); }
.formacao__btn { margin-top: auto; }
.btn--md { font-size: var(--fs-15); }
.btn--md .btn__label { margin-block: calc(-1 * (var(--space-2) + var(--space-4))); } /* sem seta: a altura vem do ícone (52px no Figma) */

/* ---------- Sobre: desktop/tablet ---------- */
@media (min-width: 1024px) {
  .sobre__decor { left: calc(var(--hero-ox) - 697 * var(--hero-u)); top: calc(60 * var(--hero-u)); width: calc(874 * var(--hero-u)); }
}
/* ---------- Sobre: mobile (frame 420) ---------- */
@media (max-width: 1023px) {
  .sobre__decor { display: none; }
  .sobre__inner { gap: var(--sobre-gap-m); max-width: var(--hero-stage-m-max); }
  .sobre__head { flex-direction: column; align-items: center; gap: var(--space-36); text-align: center; }
  .sobre__title, .sobre__text { width: auto; }
  .galeria { display: flex; flex-direction: column; gap: var(--galeria-gap); min-height: 0; }
  .gal--raquel { height: var(--gal-big-h-m); padding: var(--gal-pad); }
  .formacao { padding: var(--gal-pad); }
  /* no celular a máscara cortaria a sombra do empilhamento: entra subindo */
  .js .gal.rv-mask { clip-path: none; opacity: 0; translate: 0 var(--reveal-y); transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out); transition-delay: var(--d, 0s); }
  .js .gal.rv-mask.in { opacity: 1; translate: none; }
}

/* =========================================================
   CONSULTÓRIO
   ========================================================= */
.consultorio { margin-top: var(--depo-mt); }
.consultorio__head { display: flex; flex-direction: column; align-items: center; gap: var(--depo-head-gap); max-width: var(--depo-head-w); text-align: center; }
.consultorio__text { max-width: var(--consultorio-text-w); color: var(--color-text-muted); font-size: var(--fs-18); line-height: var(--lh-tight); text-wrap: pretty; }
.consultorio__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grade-gap); height: var(--consultorio-h); margin-top: var(--depo-gap); }
.consultorio__local { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-top: var(--space-28); color: var(--color-text-muted); font-size: var(--fs-15); line-height: var(--lh-tight); text-align: center; }
.consultorio__local img { flex: none; width: var(--fs-18); height: var(--fs-18); }
@media (max-width: 767px) { .consultorio__head { gap: var(--depo-head-gap-m); } .consultorio__fotos { margin-top: var(--depo-gap-m); } }
/* celular/tablet: as fotos empilham ao rolar (Bonança) */
@media (max-width: 1023px) {
  .consultorio__fotos { display: flex; flex-direction: column; gap: var(--galeria-gap); height: auto; }
  .consultorio .gal { position: sticky; z-index: var(--i); top: calc(var(--etapa-sticky-top) + var(--i) * var(--etapa-sticky-step)); height: var(--consultorio-h-m); box-shadow: var(--shadow-etapa-stack); }
}

/* =========================================================
   ATENDIMENTOS (cabeçalho reaproveita .depo__head / .consultorio__text)
   ========================================================= */
.atend { margin-top: var(--depo-mt); }
.atend__grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--grade-gap); margin-top: var(--depo-gap); }
.atend__foto { min-height: var(--atend-foto-h); }
.atend__foto > img { object-position: var(--pos, 50% 50%); }
.atend__lista { display: flex; flex-direction: column; gap: var(--grade-gap); }
.atend__item { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-12); padding: var(--space-32); border-radius: var(--radius-2xl); background: var(--color-cream-100); }
.atend__item--sand { background: var(--color-sand-500); }
.atend__item--gray { background: var(--color-gray-150); }
.atend__icon { width: var(--space-24); height: var(--space-24); }
.atend__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h3-card); line-height: var(--lh-h3-card); letter-spacing: var(--ls-h3-card); }
.atend__desc { font-size: var(--fs-15); line-height: var(--lh-tight); text-wrap: pretty; }
.atend__desc strong { font-weight: var(--fw-bold); }
.atend__cta { display: flex; justify-content: center; margin-top: var(--space-40); }
@media (max-width: 767px) { .atend__grid { margin-top: var(--depo-gap-m); } }
/* celular/tablet: as duas fotos lado a lado, os três atendimentos embaixo */
@media (max-width: 1023px) {
  .atend__grid { grid-template-columns: 1fr 1fr; max-width: var(--hero-stage-m-max); }
  .atend__foto { min-height: var(--atend-foto-h-m); }
  .atend__foto .pill { display: none; } /* não cabe em meia largura; os cards logo abaixo explicam cada foto */
  .atend__lista { grid-column: 1 / -1; order: 1; }
  .atend__item { padding: var(--gal-pad); }
}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.depo { margin-top: var(--depo-mt); }
.depo__head { display: flex; flex-direction: column; align-items: center; gap: var(--depo-head-gap); max-width: var(--depo-head-w); text-align: center; }
.depo__eyebrow { color: var(--color-gold-700); font-size: var(--fs-13); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow-px); text-transform: uppercase; }
.depo__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2-queixas); line-height: var(--lh-h2-queixas); letter-spacing: var(--ls-h2-queixas); }
.reviews { --cw: var(--review-w); position: relative; column-gap: var(--review-gap); margin-top: var(--depo-gap); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.reviews.is-dragging { cursor: grabbing; }
.reviews__list { position: relative; }
.review { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; width: var(--cw); border: 1px solid var(--color-review-border); border-radius: var(--radius-review); background: var(--color-white); box-shadow: var(--shadow-soft); opacity: 0; transition: opacity var(--t-900) var(--ease-out); }
.reviews.is-on .review { opacity: 1; }
.review__body { display: flex; flex-direction: column; gap: var(--review-gap-in); padding: var(--review-pad); }
.review__top { display: flex; align-items: center; justify-content: space-between; }
.review__quote { color: var(--color-gold-300); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-quote-mark); line-height: var(--lh-quote-mark); text-box: trim-both cap alphabetic; }
.review__text { margin: 0; font-size: var(--fs-18); line-height: var(--lh-relaxed); }
.review__author { display: flex; align-items: center; gap: var(--space-14); margin-top: auto; padding: var(--review-pad); border-top: 1px solid var(--color-review-line); }
.review__avatar { display: grid; place-items: center; flex: none; width: var(--review-avatar); height: var(--review-avatar); border-radius: 50%; background: var(--color-cream-100); color: var(--color-gold-600); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-avatar); }
.review__who { display: flex; flex-direction: column; gap: var(--review-who-gap); white-space: nowrap; text-box: none; }
.review__who strong { font-size: var(--fs-16); font-weight: var(--fw-semibold); text-box: trim-both cap alphabetic; }
.review__who span { color: var(--color-text-muted); font-size: var(--fs-13); font-weight: var(--fw-medium); text-box: trim-both cap alphabetic; }
@media (max-width: 767px) {
  .depo__head { gap: var(--depo-head-gap-m); }
  .reviews { --cw: var(--review-w-m); margin-top: var(--depo-gap-m); }
}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final { margin-top: var(--cta-mt); scroll-margin-top: var(--scroll-offset); }
.cta-final__card { position: relative; isolation: isolate; display: flex; gap: var(--cta-gap); min-height: var(--cta-h); overflow: clip; border-radius: var(--radius-cta); background: var(--color-cream-50); }
.cta-final__forma { position: absolute; z-index: -1; left: var(--cta-forma-x); top: 0; width: var(--cta-forma-w); max-width: none; height: auto; pointer-events: none; }
.cta-final__foto { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius-cta-foto); }
.cta-final__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cta-foto-pos); scale: var(--cta-foto-zoom); transition: scale var(--t-1600) var(--ease-out) .2s; }
.cta-final__card.in .cta-final__foto img, html:not(.js) .cta-final__foto img { scale: 1; }
.cta-final__textos { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: var(--cta-text-gap); padding: var(--cta-pad); }
.cta-final__logo { width: var(--cta-logo-w); height: auto; }
.cta-final__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.cta-final__text { width: var(--cta-text-w); max-width: 100%; color: var(--color-text-muted); font-size: var(--fs-18); line-height: var(--lh-tight); text-wrap: pretty; }
.cta-final__text strong { color: var(--color-text); font-weight: var(--fw-bold); }
.cta-final .btn--lg { text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .cta-final__foto img { scale: 1; transition: none; } }
@media (max-width: 1023px) {
  .cta-final { margin-top: var(--cta-mt-m); max-width: var(--hero-stage-m-max); }
  .cta-final__card { flex-direction: column; min-height: 0; }
  .cta-final__foto { flex: none; height: var(--cta-foto-h-m); }
  .cta-final__textos { gap: var(--cta-text-gap-m); padding: var(--cta-pad-m); }
  .cta-final__text { width: auto; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: grid; grid-template-columns: var(--faq-text-w) var(--faq-list-w); justify-content: space-between; align-items: start; margin-top: var(--faq-mt); padding-bottom: var(--faq-pb); }
.faq__textos { display: flex; flex-direction: column; align-items: flex-start; gap: var(--faq-gap); padding-left: var(--faq-text-x); }
.faq__title { width: var(--faq-title-w); max-width: 100%; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2-faq); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.faq__text { color: var(--color-text-muted); font-size: var(--fs-18); line-height: var(--lh-tight); text-wrap: pretty; }
.faq__text strong { color: var(--color-text-alt); font-weight: var(--fw-bold); }
.faq .btn--lg { text-transform: uppercase; }
.faq__list { display: flex; flex-direction: column; gap: var(--faq-item-gap); }

.faq__h { font: inherit; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); width: 100%; padding: var(--faq-pad); border-radius: var(--radius-faq-q); background: var(--color-white); text-align: left; transition: border-radius var(--t-500) var(--ease-out) var(--t-200); }
.faq__qtext { color: var(--color-text-alt); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-faq-q); line-height: var(--lh-faq-q); letter-spacing: var(--ls-faq-q); text-box: trim-both cap alphabetic; }
.faq__icon { display: grid; place-items: center; flex: none; width: var(--faq-btn); height: var(--faq-btn); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-black); transition: background-color var(--t-400) var(--ease-out), box-shadow var(--t-400) var(--ease-out), transform var(--t-500) var(--ease-out); }
.faq__icon svg { width: var(--faq-icon); height: var(--faq-icon); overflow: visible; fill: none; stroke: var(--color-text); stroke-width: 1.6; stroke-linecap: round; }
.faq__v { transform-origin: 8px 8px; transition: transform var(--t-500) var(--ease-out); }
@media (hover: hover) { .faq__item:not(.is-open) .faq__q:hover .faq__icon { background: var(--color-cream-100); } }

/* resposta (Bonança: a área abre de 0fr para 1fr e o texto sobe) */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-accordion) var(--ease-out); }
.faq__a-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s var(--dur-accordion); }
.faq__a-box { padding: var(--faq-pad); border-top: 1px solid var(--faq-a-line); border-radius: 0 0 var(--radius-faq-a) var(--radius-faq-a); background: var(--faq-a-bg); }
.faq__a p { color: var(--color-text-muted); font-size: var(--fs-16); line-height: var(--lh-faq-a); opacity: 0; transform: translateY(var(--inv-more-y)); transition: opacity var(--t-500) var(--ease-out), transform var(--t-600) var(--ease-out); }
.faq__item.is-open .faq__q { border-radius: var(--radius-faq-q) var(--radius-faq-q) 0 0; transition-delay: 0s; }
.faq__item.is-open .faq__icon { background: var(--color-gold-300); box-shadow: none; transform: rotate(180deg); }
.faq__item.is-open .faq__v { transform: scaleY(0); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a-in { visibility: visible; transition: visibility 0s; }
.faq__item.is-open .faq__a p { opacity: 1; transform: none; transition-delay: .15s; }

@media (max-width: 1023px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: var(--faq-gap-m); max-width: var(--hero-stage-m-max); margin-top: var(--faq-mt-m); }
  .faq__textos { display: contents; }
  .faq__title, .faq__text { justify-self: center; width: auto; text-align: center; }
  .faq__title { order: 1; } .faq__text { order: 2; margin-top: calc(var(--faq-gap) - var(--faq-gap-m)); } .faq__list { order: 3; } .faq__btn { order: 4; justify-self: center; }
  .faq__qtext { max-width: var(--faq-q-w-m); font-size: var(--fs-faq-q-m); }
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape { padding: 0 var(--rodape-edge) var(--rodape-gap-bottom); color: var(--color-text-light); }
.rodape__box { overflow: clip; padding: var(--rodape-pt) var(--rodape-side) var(--rodape-pb); border-radius: var(--radius-rodape); background: var(--color-dark); }
.rodape__in { container-type: inline-size; max-width: var(--rodape-w); margin-inline: auto; }
.rodape__grade { display: grid; grid-template-columns: var(--rodape-cols); column-gap: var(--rodape-col-gap); align-items: start; }
.rodape a { color: inherit; }
.rodape__logo { width: var(--rodape-logo-w); height: auto; }
.rodape__title { margin-top: var(--rodape-title-mt); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-rodape-title); line-height: var(--lh-rodape-title); letter-spacing: var(--ls-rodape-title); text-box: none; }
.rodape__desc { padding: var(--rodape-desc-pad); color: var(--color-on-dark-66); font-size: var(--fs-15); line-height: var(--lh-24); }
.rodape__redes { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--rodape-redes-mt); }

/* Botões das redes (Bonança: meio-sol dourado sobe no hover) */
.rd-pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; width: var(--w); align-items: center; gap: var(--space-10); height: var(--rd-pill-h); padding: var(--rd-pill-pad); border: 1px solid var(--color-gray-24); border-radius: var(--radius-pill); font-size: var(--fs-14); line-height: var(--lh-nav); transition: color var(--t-450) var(--ease-out), border-color var(--t-450); }
.rd-pill .rd-ic { box-sizing: content-box; padding: calc((var(--rd-ic-box) - 15px) / 2); margin: calc((15px - var(--rd-ic-box)) / 2) 0; }
.rd-ic { flex: none; overflow: visible; }
.rd-sun { position: absolute; z-index: -1; left: 50%; bottom: 0; width: 140%; aspect-ratio: 2 / 1; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--grad-sun); translate: -50% 110%; transition: translate var(--t-600) var(--ease-out); }
@keyframes hz-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@media (hover: hover) {
  .rd-pill:hover { color: var(--color-dark); border-color: var(--color-gold-300); }
  .rd-pill:hover .rd-sun { translate: -50% 18%; }
  .rd-pill:hover .rd-ic { animation: hz-bob 1.6s ease-in-out infinite; }
}

.rodape__sub { padding: var(--rd-sub-pad); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-footer-col); line-height: var(--lh-rodape-sub); white-space: nowrap; }
.rodape__nav ul { display: grid; grid-auto-rows: var(--rd-nav-row); gap: var(--rd-nav-gap); margin-top: var(--rodape-list-mt); }
.rodape__nav a { display: inline-flex; align-items: center; padding: var(--rd-nav-pt) 0 0 var(--space-10); color: var(--color-on-dark-72); font-size: var(--fs-15); line-height: var(--lh-rd-nav); transition: color var(--t-300), padding var(--t-400) var(--ease-out); }
.rodape__nav a::before { content: ""; width: 0; height: 1.5px; border-radius: 2px; background: var(--color-gold-300); transition: width var(--t-400) var(--ease-out), margin var(--t-400) var(--ease-out); }
@media (hover: hover) {
  .rodape__nav a:hover { padding-left: 0; color: var(--color-text-light); }
  .rodape__nav a:hover::before { width: var(--rd-nav-dash); margin-right: var(--space-10); }
}

.rodape__contato ul { margin-top: var(--rodape-list-mt); }
.rd-row { display: flex; align-items: center; gap: var(--space-16); padding: var(--rd-row-pad); }
.rd-badge { display: grid; place-items: center; flex: none; width: var(--rd-badge); height: var(--rd-badge); border-radius: 50%; background: var(--color-gray-08); color: var(--color-gold-300); transition: background-color var(--t-400), color var(--t-400), transform var(--t-500) var(--ease-out); }
.rd-ic--ig { width: 16px; height: 16px; }
.rd-row--tall { min-height: var(--rd-row-tall); }
.rd-row--tall .rd-txt { align-self: flex-start; }
.rd-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.rd-txt small { padding: 5px 0; color: var(--color-gray-60); font-size: var(--fs-13); line-height: var(--lh-rd-label); text-box: trim-both cap alphabetic; }
.rd-txt > span { padding: 5px 0 6px; color: var(--color-text-light); font-size: var(--fs-15); line-height: var(--lh-rd-value); text-box: trim-both cap alphabetic; }
.rd-go { flex: none; color: var(--color-gray-40); transition: transform var(--t-450) var(--ease-out), color var(--t-300); }
@media (hover: hover) {
  a.rd-row:hover .rd-badge { background: var(--color-gold-300); color: var(--color-dark); transform: rotate(-8deg); }
  a.rd-row:hover .rd-go { color: var(--color-gold-300); transform: translate(3px, -3px); }
}

.rodape__marca-dagua::before { content: attr(data-text); } /* decorativa: texto em pseudo-elemento não entra no teste de contraste */
.rodape__marca-dagua { margin-top: var(--rodape-wm-pt); padding: var(--rodape-wm-pad); border-top: 1px solid var(--color-gray-18); color: var(--color-dark-watermark); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-rodape-wm); line-height: normal; letter-spacing: var(--ls-rodape-wm); white-space: nowrap; user-select: none; }
.rodape__creditos { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); margin-top: var(--rodape-cred-pt); padding-top: var(--rodape-cred-pad); border-top: 1px solid var(--color-gray-18); }
.rodape__copy { display: flex; align-items: center; gap: 18px; color: var(--color-on-dark-72); font-size: var(--fs-13); line-height: var(--lh-rd-copy); text-box: none; }
.rodape__copy span { padding: 6px 0 7px; white-space: nowrap; text-box: trim-both cap alphabetic; }
.rodape__copy svg { box-sizing: content-box; width: var(--rd-copy-tree-w); height: var(--rd-copy-tree-h); padding: 2px 0.79px; fill: var(--color-gold-400); }

/* "Desenvolvido por" (Bonança: setas saem/entram em loop, meio-sol sobe no hover) */
.rd-by { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; width: var(--rd-by-w); align-items: center; gap: var(--space-12); height: var(--rd-by-h); padding: var(--rd-by-pad); border: 1px solid var(--color-gray-20); border-radius: var(--radius-pill); transition: color var(--t-450) var(--ease-out), border-color var(--t-450); }
.rd-by__txt { color: var(--color-gray-62); font-size: var(--fs-12); line-height: 19.8px; transition: color var(--t-450); }
.rd-by__mark { color: var(--color-text-on-dark); font-size: var(--fs-13); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); transition: color var(--t-450); }
.rd-by__go { position: relative; flex: none; overflow: hidden; width: var(--rd-by-go); height: var(--rd-by-go); border-radius: 50%; background: var(--color-gray-10); color: var(--color-text-light); transition: background-color var(--t-450), color var(--t-450), scale var(--t-450) var(--ease-out); }
.rd-by__a { position: absolute; left: calc((var(--rd-by-go) - var(--rd-by-arrow)) / 2); top: calc((var(--rd-by-go) - var(--rd-by-arrow)) / 2); width: var(--rd-by-arrow); height: var(--rd-by-arrow); }
.rd-by__a + .rd-by__a { translate: -150% 150%; }
@keyframes by-out { from { translate: 0 0; } to { translate: 150% -150%; } }
@keyframes by-in { from { translate: -150% 150%; } to { translate: 0 0; } }
@keyframes by-out-idle { 0% { translate: 0 0; } 14%, 100% { translate: 150% -150%; } }
@keyframes by-in-idle { 0% { translate: -150% 150%; } 14%, 100% { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .rd-by__a { animation: by-out-idle 5s cubic-bezier(.6, 0, .2, 1) 1.5s infinite; }
  .rd-by__a + .rd-by__a { animation-name: by-in-idle; }
}
@media (hover: hover) {
  .rd-by:hover { border-color: var(--color-gold-300); }
  .rd-by:hover .rd-sun { translate: -50% 18%; }
  .rd-by:hover .rd-by__txt, .rd-by:hover .rd-by__mark { color: var(--color-dark); }
  .rd-by:hover .rd-by__go { background: var(--color-dark); color: var(--color-gold-300); scale: 1.08; }
  .rd-by:hover .rd-by__a { animation: by-out .55s cubic-bezier(.6, 0, .2, 1) both; }
  .rd-by:hover .rd-by__a + .rd-by__a { animation-name: by-in; }
}
.rd-by .rd-sun { width: 140%; }

/* Caixa de seleção desenhada por um cursor em "numa régua." (Bonança) */
.sel-target { position: relative; display: inline-block; white-space: nowrap; }
.selbox { position: absolute; inset: var(--sel-pad); pointer-events: none; }
.selbox-rect { position: absolute; inset: 0; border: 1px solid var(--color-gold-300); border-radius: var(--radius-sel); clip-path: inset(0 100% 100% 0); }
.selbox i { position: absolute; width: var(--sel-handle); height: var(--sel-handle); border: 1px solid var(--color-gold-300); border-radius: 50%; background: var(--color-text-light); opacity: 0; transform: scale(.3); transition: opacity .25s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.selbox i:nth-of-type(1) { left: -5px; top: -5px; } .selbox i:nth-of-type(2) { right: -5px; top: -5px; }
.selbox i:nth-of-type(3) { left: -5px; bottom: -5px; } .selbox i:nth-of-type(4) { right: -5px; bottom: -5px; }
.selbox-cur { position: absolute; left: -60px; top: 120%; opacity: 0; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35)); }
.selbox-cur svg { width: 22px; height: 22px; color: var(--color-gold-300); }
.sel-on .selbox-cur { animation: selcur 2.4s cubic-bezier(.65, 0, .35, 1) forwards; }
.sel-on .selbox-rect { animation: seldrag 1.1s cubic-bezier(.65, 0, .35, 1) .75s forwards; }
.sel-on .selbox i { opacity: 1; transform: none; transition-delay: 1.85s; }
.sel-on .selbox i:nth-of-type(2) { transition-delay: 1.9s; } .sel-on .selbox i:nth-of-type(3) { transition-delay: 1.95s; } .sel-on .selbox i:nth-of-type(4) { transition-delay: 2s; }
.sel-done .selbox-cur { opacity: 0 !important; transition: opacity .7s; }
@keyframes selcur { 0% { left: -70px; top: 140%; opacity: 0; } 10% { opacity: 1; } 30% { left: -8px; top: -8px; opacity: 1; } 78% { left: calc(100% - 8px); top: calc(100% - 8px); opacity: 1; } to { left: calc(100% + 6px); top: calc(100% + 4px); opacity: 1; } }
@keyframes seldrag { to { clip-path: inset(0 0 0 0); } }
html:not(.js) .selbox-rect { clip-path: none; }
html:not(.js) .selbox i { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .selbox-rect { clip-path: none !important; animation: none !important; } .selbox i { opacity: 1; transform: none; } .selbox-cur { display: none; } }

/* ---------- Rodapé: tablet ---------- */
@media (max-width: 1279px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; row-gap: var(--rodape-gap-m); }
  .rodape__marca { grid-column: 1 / -1; }
}
/* ---------- Rodapé: mobile (frame 420) ---------- */
@media (max-width: 767px) {
  .rodape { padding: 0 0 var(--rodape-gap-bottom); }
  .rodape__box { padding: var(--rodape-pt-m) var(--page-margin) var(--rodape-pb-m); border-radius: var(--radius-rodape-m); }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); row-gap: var(--rodape-gap-m); }
  .rodape__marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rodape-marca-gap-m); }
  .rodape__title { margin-top: 0; line-height: var(--lh-tight); text-box: trim-both cap alphabetic; }
  .rodape__desc { padding: 0; }
  .rodape__redes { flex-wrap: wrap; gap: var(--space-8); margin-top: 0; }
  .rodape__redes li { min-width: 0; }
  .rd-pill { width: auto; max-width: var(--wm); padding: var(--rd-pill-pad-m); }
  .rodape__nav ul { gap: var(--rodape-items-gap-m); grid-auto-rows: auto; margin-top: var(--rodape-col-gap-m); }
  .rodape__nav a { display: block; padding: 0; text-box: trim-both cap alphabetic; }
  .rodape__nav a::before { display: none; }
  .rodape__sub { padding: 0; }
  .rodape__contato ul { display: grid; gap: var(--rodape-items-gap-m); margin-top: var(--rodape-col-gap-m); }
  .rd-row { padding: 0; }
  .rd-row--tall { min-height: 0; align-items: flex-start; }
  .rd-txt { gap: var(--space-12); }
  .rd-txt small, .rd-txt > span { padding: 0; }
  .rd-go { display: none; }
  .rodape__marca-dagua { margin-top: var(--rodape-col-gap-m); padding: 0; border-top: 0; }
  .rodape__creditos { flex-direction: column; gap: var(--rodape-cred-gap-m); width: min(100%, var(--rodape-cred-w-m)); margin-top: var(--rodape-col-gap-m); padding-top: 0; border-top: 0; }
  .rodape__copy { align-self: stretch; }
  .rodape__copy span { padding: 6px 0 7px; }
}

/* =========================================================
   DESEMPENHO: seções fora da tela não são montadas até chegarem perto
   (alturas estimadas; "auto" guarda a altura real depois da 1ª vez)
   ========================================================= */
@supports (content-visibility: auto) {
  .band, .rotulo, .inv, .sobre, .cta-final, .faq, .rodape { content-visibility: auto; contain-intrinsic-size: auto var(--civ, 800px); }
  .band { --civ: 598px; } .rotulo { --civ: 677px; } .inv { --civ: 1545px; } .sobre { --civ: 767px; }
  .cta-final { --civ: 487px; } .faq { --civ: 676px; } .rodape { --civ: 1080px; }
  @media (max-width: 1023px) {
    .band { --civ: 371px; } .rotulo { --civ: 1060px; } .inv { --civ: 2280px; } .sobre { --civ: 1440px; }
    .cta-final { --civ: 706px; } .faq { --civ: 1064px; } .rodape { --civ: 1480px; }
  }
}

/* =========================================================
   ACESSIBILIDADE (auditoria)
   ========================================================= */
.skip-link { position: fixed; left: var(--space-16); top: var(--space-16); z-index: calc(var(--z-intro) + 1); padding: var(--space-12) var(--space-20); border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-text-light); font-weight: var(--fw-semibold); transform: translateY(-200%); transition: transform var(--t-300) var(--ease-out); }
.skip-link:focus { transform: none; }
[tabindex="-1"]:focus { outline: none; }
/* menu em tela baixa (celular deitado / zoom): rola em vez de esmagar o botão */
.menu { overflow-y: auto; justify-content: safe center; }
.menu > * { flex-shrink: 0; }
/* cards empilhados só em telas altas o bastante para ler o card inteiro */
@media (max-width: 1023px) and (max-height: 560px) {
  .etapa, .gal, .formacao { position: relative; top: auto; }
}
/* telas muito estreitas (ou zoom 400%): textos podem quebrar em vez de cortar */
@media (max-width: 359px) {
  .rodape__copy span, .pill, .btn__label > span { white-space: normal; }
  .rd-pill { width: auto; max-width: none; }
  .rodape__redes { flex-wrap: wrap; }
}
/* celulares mais estreitos que o frame do Figma (420): botões, pílulas e formação cabem sem cortar */
@media (max-width: 419px) { .rd-pill { padding-inline: var(--space-10); } }
@media (max-width: 399px) { .btn--lg { gap: var(--space-12); } }
@media (max-width: 389px) { .btn--lg { font-size: var(--fs-15); } }
/* loops decorativos só com movimento liberado */
@media (prefers-reduced-motion: reduce) {
  .menu-open .menu__link.is-active::after, .rd-pill:hover .rd-ic { animation: none; }
}

/* =========================================================
   WHATSAPP FLUTUANTE (aparece depois do topo, some no rodapé e com o menu aberto)
   ========================================================= */
.wa-float { position: fixed; right: max(var(--wa-edge), env(safe-area-inset-right)); bottom: max(var(--wa-edge), env(safe-area-inset-bottom)); z-index: var(--z-wa); display: grid; place-items: center; width: var(--wa-size); height: var(--wa-size); border-radius: 50%; background: var(--grad-btn-gold); color: var(--color-dark); box-shadow: var(--shadow-wa), var(--ring-inner-gold); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85); transition: opacity var(--t-500) var(--ease-out), transform var(--t-700) var(--ease-out), visibility 0s var(--t-500); }
.wa-float svg { width: var(--wa-icon); height: var(--wa-icon); overflow: visible; }
.wa-float.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-500) var(--ease-out), transform var(--t-700) var(--ease-out); }
.menu-open .wa-float { opacity: 0; visibility: hidden; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-gold-300) 55%, transparent); }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-gold-300) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .wa-float.is-on::before { animation: wa-pulse 2.8s var(--ease-out) 1s infinite; }
}
@media (hover: hover) { .wa-float:hover { transform: scale(1.07); } }
@media (max-width: 767px) {
  .wa-float { --wa-size: var(--wa-size-m); right: max(var(--wa-edge-m), env(safe-area-inset-right)); bottom: max(var(--wa-edge-m), env(safe-area-inset-bottom)); }
}