/* ==========================================================================
   Dr. Matheus Amaral · Urologista
   Sistema visual compartilhado (as 4 páginas usam este arquivo) · v2

   v2 (feedback "ficou muito diferente e simples"): a composição sobe ao nível da
   referência (paccajuliana.com.br, docs/REFERENCIA-VISUAL.md). Paleta, fonte e textos
   continuam os mesmos. Os blocos novos são portes dos componentes do 21st.dev que
   estão em docs/21st/ (cada bloco abaixo cita a fonte num comentário).

   Índice
   01. Tokens
   02. Reset e base
   03. Tipografia
   04. Layout, seções, fundos escuros (.s-dark, .s-dark-2) e cabeçalhos de seção
   05. Foco, links e utilitários (.glass, .section-foot, .img-credit)
   06. Botões
   07. Ícones
   08. Imagens e placeholders (.media, .media-band, .img-reveal)
   09. Header que vira cápsula (.nav-morph) e menu em cortina (.menu-curtain)
   10. Hero "capa de revista" (+ desfoque de borda e saída ao rolar)
   11. Faixa com o nome (velocidade da rolagem)
   12. Componentes de seção (v1 mantidos + novos da v2)
   13. FAQ de vidro (.faq-glass)
   14. Rodapé azul-escuro com mapa (.footer-light)
   15. Botão flutuante de WhatsApp (.fab-pill)
   16. Estados iniciais das animações (GSAP) e trava
   17. Movimento reduzido
   18. Impressão

   Breakpoints (desktop-first): 1099px (tablet), 767px (celular), 479px (celular pequeno).
   Animação de entrada: data-anim / data-anim-stagger / data-lines + entradas próprias
   de cada componente (ver site.js e docs/COMPONENTES.md).
   ========================================================================== */


/* ==========================================================================
   01. Tokens
   ========================================================================== */
:root{
  color-scheme:light;

  /* Superfícies e texto */
  --bg:#FAFBFC; --bg-2:#F2F5F7; --card:#FFFFFF; --line:#C9D9E6; --line-strong:#6B8291;
  --dark:#002B44; --ink:#0F2A3A; --ink-2:#4A6070;
  --dark-2:#00243A;       /* segundo escuro: azul profundo (feedback 2: os dois escuros são azuis, nada de verde) */
  --deep:#001A2B;         /* fim dos degradês escuros: azul mais escuro ainda */
  --header-bg:rgba(0,31,51,.96);   /* barra do header: #001F33 com leve vidro */

  /* Marca */
  --brand:#004063; --brand-2:#002B44; --on-brand:#FFFFFF;
  --accent:#3C9B8C;       /* decorativo: linhas, pontos, ícones, bordas. Nunca texto pequeno */
  --accent-2:#2A7D70;     /* itálico de títulos em fundo claro (texto grande, 24px ou mais) */
  --accent-3:#236B60;     /* texto pequeno verde em fundo claro: eyebrow e links (5,4:1 em --bg-2) */
  --accent-light:#7FD1C3; /* qualquer texto verde sobre --dark/--dark-2/--brand (8,3:1 · 7,0:1 · 6,2:1) */
  --on-dark:#FFFFFF; --on-dark-2:#B7CAD4;   /* --on-dark-2: 8,7:1 em --dark e 7,3:1 em --dark-2 */
  --wa:#128C4A;           /* WhatsApp com ícone branco (4,3:1) */

  /* Canais RGB para transparências */
  --accent-rgb:60,155,140; --shadow-rgb:0,64,99; --dark-rgb:0,43,68; --dark-2-rgb:0,36,58;
  --line-rgb:120,170,210;   /* azul claro das bordas sobre o escuro */
  --shadow-dark-rgb:0,20,32;

  /* Raios e sombras (sombras sempre tingidas de azul) */
  --r-sm:10px; --r-md:16px; --radius:22px; --r-pill:999px;
  --shadow-sm:0 6px 18px rgba(var(--shadow-rgb),.07);
  --shadow-md:0 18px 44px rgba(var(--shadow-rgb),.14);

  /* Tipografia */
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container:1200px; --gutter:clamp(20px,calc(4vw / var(--z,1)),48px);
  --section-y:clamp(72px,calc(9vw / var(--z,1)),128px);
  --header-h:80px;          /* barra sólida: 16 + 46 + 16 + fio de 1px (72px no celular) */
  --gap:clamp(16px,calc(2vw / var(--z,1)),24px);

  /* Camadas */
  --z-header:90; --z-menu:95; --z-fab:80; --z-ribbon:2;

  /* Curvas */
  --ease-out:cubic-bezier(.19,1,.22,1); --ease-flex:cubic-bezier(.35,0,.25,1); --ease-std:cubic-bezier(.4,0,.2,1);

  /* Tokens derivados (sem hex novo). São redefinidos no escopo escuro (seção 04) */
  --heading:var(--brand);          /* cor dos títulos */
  --em:var(--accent-2);            /* <em> dos títulos, números, checks */
  --eyebrow:var(--accent-3);       /* eyebrow e rótulos pequenos */
  --link:var(--accent-3);          /* links no texto */
  --focus:var(--accent-2);         /* anel de foco (3:1 ou mais em --bg, --bg-2 e --card) */
  --icon:var(--accent);            /* ícones de traço */
  --surface:var(--card);           /* fundo de card */
  --surface-line:var(--line);      /* borda de card */
  --section-bg:var(--bg);          /* fundo da seção atual (miolo de pontos e marcadores) */
  --placeholder:var(--bg-2);       /* fundo de imagem ainda sem arquivo */
  --hatch:rgba(var(--shadow-rgb),.05);
  --chip-line:var(--line-strong);
  --spot-rgb:var(--shadow-rgb);
  --u-color:var(--accent);
  --stack-bg:var(--card);
  --line-dark:rgba(var(--line-rgb),.22);   /* bordas, contornos e divisores sobre o escuro */
  --line-light:#C9D9E6;                    /* bordas, contornos e divisores sobre o claro */
  --line-blue:#8FB2CC;                     /* borda em destaque ou hover (claro e escuro) */
  --pale-blue:#D6E6F2;                     /* hover da pílula clara e faixa clara */
  --glass-dark:rgba(var(--shadow-dark-rgb),.45);
  --wa-2:color-mix(in srgb, var(--wa) 90%, black);   /* pílula do FAB: texto branco 5,1:1 */

  /* Vidro (REFERENCIA §1.3): no claro, branco translúcido; no escuro, branco a 6–10% */
  --glass-bg:color-mix(in srgb,var(--card) 60%,transparent);
  --glass-bg-h:color-mix(in srgb,var(--card) 80%,transparent);
  --glass-line:color-mix(in srgb,var(--card) 88%,transparent);
  --glass-polish:color-mix(in srgb,var(--card) 90%,transparent);
  --glass-shadow:0 10px 26px rgba(var(--shadow-rgb),.08);

  /* Grão escuro (Ocean grain): tile SVG estático + degradês da marca */
  --grain-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --ocean:linear-gradient(160deg,#003252 0%,var(--dark) 45%,var(--deep) 100%);   /* azul-escuro → azul mais escuro */
  --petrol:linear-gradient(160deg,#0B2E48 0%,var(--dark-2) 50%,#001523 100%);     /* o segundo escuro, também azul */
}


/* ==========================================================================
   02. Reset e base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 16px);
  scroll-padding-bottom:96px;               /* o FAB não cobre o elemento focado (WCAG 2.4.11) */
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;min-height:calc(100vh / var(--z,1));
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;                          /* clip não quebra position:sticky (hidden quebra) */
}
@supports not (overflow:clip){body{overflow-x:hidden}}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class],nav ul,nav ol{list-style:none;margin:0;padding:0}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
::selection{background:rgba(var(--accent-rgb),.28);color:var(--ink)}


/* ==========================================================================
   03. Tipografia
   ========================================================================== */
h1,h2,h3{color:var(--heading);font-weight:600;text-wrap:balance;overflow-wrap:break-word}
h2{font-size:clamp(28px,calc(3.3vw / var(--z,1)),44px);line-height:1.06;letter-spacing:-.04em}
h3{font-size:clamp(19px,calc(1.6vw / var(--z,1)),22px);line-height:1.25;letter-spacing:-.02em}
:is(h1,h2,h3) em{font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--em)}

p{max-width:62ch}
.lead{font-size:clamp(16px,calc(1.15vw / var(--z,1)),17.5px);line-height:1.65;color:var(--ink-2);max-width:60ch}
small{font-size:14px;line-height:1.6}
strong,b{font-weight:600}

/* Rótulo acima do título: 11px, 700, caixa-alta, traço de 28px antes */
.eyebrow{
  --r:1;                                     /* escala dos traços (o GSAP anima no .sec-head) */
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;
  color:var(--eyebrow);
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none;transform:scaleX(var(--r));transform-origin:100% 50%}

@media (max-width:479px){
  h1,h2{hyphens:auto;-webkit-hyphens:auto}   /* exige <html lang="pt-BR"> */
}


/* ==========================================================================
   04. Layout, seções e tema escuro
   ========================================================================== */
.container{
  width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px));
}
.container--narrow{max-width:880px}

section{position:relative;padding-block:var(--section-y)}
.s-alt{background:var(--bg-2);--section-bg:var(--bg-2);--placeholder:var(--line)}

/* Azul-marinho com grão (Ocean grain) */
.s-dark{
  --section-bg:var(--dark);
  background:var(--grain-tile) 0 0/160px 160px, var(--ocean);
  background-blend-mode:overlay,normal;
}
/* Petróleo com grão (o segundo escuro da referência). Alterne com .s-dark; nunca cole dois iguais */
.s-dark-2{
  --section-bg:var(--dark-2);
  background:
    var(--grain-tile) 0 0/160px 160px,
    radial-gradient(70% 55% at 88% 0%,rgba(var(--line-rgb),.1),transparent 62%),
    var(--petrol);
  background-blend-mode:overlay,normal,normal;
}

/* Escopo escuro: a hero, .s-dark, .s-dark-2, o menu, o FAQ de vidro e o convite escuro
   trocam os tokens. Componentes usam só os tokens, então ficam legíveis nos dois temas.
   Em .s-dark, texto pequeno secundário (--ink-2) de preferência no topo da seção: na base
   o degradê puxa para o verde. Perto da base, use texto principal. */
:is(.s-dark,.s-dark-2,.hero,.menu-curtain,.faq-glass,.invite--dark,.footer-light){
  --ink:var(--on-dark); --ink-2:var(--on-dark-2);
  --heading:var(--on-dark); --em:var(--accent-light); --eyebrow:var(--accent-light);
  --link:var(--accent-light); --focus:var(--accent-light); --icon:var(--accent-light);
  --surface:var(--glass-dark); --surface-line:var(--line-dark); --line:var(--line-dark);
  --placeholder:rgba(255,255,255,.06); --hatch:rgba(255,255,255,.05);
  --chip-line:rgba(var(--line-rgb),.45); --spot-rgb:var(--line-rgb); --u-color:var(--accent-light);
  --stack-bg:var(--brand-2);
  --glass-bg:color-mix(in srgb,var(--on-dark) 7%,transparent);
  --glass-bg-h:color-mix(in srgb,var(--on-dark) 11%,transparent);
  --glass-line:color-mix(in srgb,var(--on-dark) 16%,transparent);
  --glass-polish:color-mix(in srgb,var(--on-dark) 12%,transparent);
  --glass-shadow:0 14px 30px rgba(var(--shadow-dark-rgb),.28);
  color:var(--ink);
}

/* ---------- Cabeçalho de seção (padrão v2): .sec-head ----------
   Porte do "Text Reveal (Mask)" (soralabs, 21st id 19257) + "Text Highlight" (uiable, id 27942)
   + "Text Highlighter" (danielpetho, id 18771), no desenho da referência (d02, d03, d06, d14):
   eyebrow ENTRE dois traços (no centralizado) + H2 de duas linhas, a 2ª em itálico.
   Uso: <header class="sec-head center"> <p class="eyebrow"> <h2> <p class="lead">.
   Sem .center: alinhado à esquerda (seções com foto ao lado), com o traço só antes.
   O site.js anima tudo sozinho: NÃO use data-lines/data-anim nos filhos diretos. */
.sec-head{display:grid;justify-items:start;gap:18px;max-width:780px;margin-bottom:clamp(36px,calc(5vw / var(--z,1)),64px)}
.sec-head.center{justify-items:center;max-width:960px;margin-inline:auto;text-align:center}
.sec-head > h2{max-width:22ch}
.sec-head.center > h2{max-width:24ch}
.sec-head .lead{margin-top:2px}
.sec-head.center :is(.lead,p){margin-inline:auto}
.sec-head.center .eyebrow{gap:14px}
.sec-head.center .eyebrow::before{width:clamp(28px,calc(3vw / var(--z,1)),40px)}
.sec-head.center .eyebrow::after{
  content:"";width:clamp(28px,calc(3vw / var(--z,1)),40px);height:1px;background:currentColor;flex:none;
  transform:scaleX(var(--r));transform-origin:0 50%;
}
.sec-head--flush{margin-bottom:0}
.sec-head--lg > h2{font-size:clamp(34px,calc(4.8vw / var(--z,1)),62px);line-height:1.04;max-width:26ch}
@media (max-width:479px){.sec-head.center .eyebrow{gap:10px;letter-spacing:.18em}}

/* Cabeçalho da v1 (continua valendo): eyebrow + H2[data-lines] + lead */
.section-head{display:grid;justify-items:start;gap:18px;max-width:780px;margin-bottom:clamp(36px,calc(5vw / var(--z,1)),64px)}
.section-head--center{justify-items:center;margin-inline:auto;text-align:center}
.section-head--center :is(p,.lead){margin-inline:auto}
.section-head--center .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;flex:none}
.section-head .lead{margin-top:2px}

/* Bloco de texto corrido */
.prose{display:grid;gap:1.05em;align-content:start}
.prose > p{color:var(--ink)}

/* Linha de botões depois do conteúdo */
.section-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:clamp(28px,calc(4vw / var(--z,1)),44px)}
.section-actions--center{justify-content:center}

/* .stack: pilha de blocos com respiro regular (frase + lista + frase + botão).
   .stack--center centraliza (manifesto e listas de chips centralizados) */
.stack{display:grid;gap:clamp(20px,calc(2.4vw / var(--z,1)),28px);align-content:start}
.stack--center{justify-items:center;text-align:center}
.stack--center :is(p,.lead,.callout){margin-inline:auto}
.stack > .section-actions{margin-top:clamp(4px,calc(1vw / var(--z,1)),12px)}

/* Respiro antes da frase final ou da faixa de imagem que vem logo depois de um componente
   (notas da v1: cada página resolvia de um jeito). Use .section-foot ou deixe a regra automática. */
.section-foot{margin-top:clamp(28px,calc(4vw / var(--z,1)),44px)}
:where(:not(.split-content,.split-media-body,.photo-split-body,.prose,.sec-head,.s-photo-bg-close,.stack)) > :is(.trio,.sticky-story,.cards-lift,.timeline,.chips,.check-list,.glass-list,.pillar-cards,.img-cards,.journey,.checkrail,.spot-cards,.stack-steps,.showcase) + :is(.callout,.media,.media-band,p){margin-top:clamp(28px,calc(4vw / var(--z,1)),44px)}


/* ==========================================================================
   05. Foco, links e utilitários
   ========================================================================== */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Links dentro do texto: cor + sublinhado (não depender só da cor) */
:where(p,dd,figcaption,.prose li,.line-list li,.check-list li,.glass-text,.checkrail-text) a:not([class]){
  color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
  transition:text-decoration-thickness .2s ease;
}
:where(p,dd,figcaption,.prose li,.line-list li,.check-list li,.glass-text,.checkrail-text) a:not([class]):hover{text-decoration-thickness:2px}

/* Link ainda sem destino (dado que o cliente vai mandar) */
a[aria-disabled="true"]{cursor:default}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;left:16px;top:12px;z-index:calc(var(--z-menu) + 5);
  padding:.8rem 1.2rem;border-radius:var(--r-sm);
  background:var(--brand);color:var(--on-brand);font-size:14px;font-weight:600;
  transform:translateY(-200%);transition:transform .2s ease;
}
.skip-link:focus{transform:none}

/* .glass: superfície de vidro genérica (REFERENCIA §1.3). Troca sozinha no escuro.
   Para cartões, caixas de destaque ou molduras; as listas usam .glass-list. */
.glass{
  position:relative;isolation:isolate;
  border:1px solid var(--glass-line);border-radius:18px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:inset 0 1px 0 var(--glass-polish),var(--glass-shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-bg-h)}
}

/* Legenda "Imagem ilustrativa" (opcional; decisão da equipe sobre a Res. CFM 2.336/2023, art. 14).
   Vai dentro de uma caixa de imagem (.media, .photo-reveal-frame, .img-reveal). */
.img-credit{
  position:absolute;right:10px;bottom:10px;z-index:3;max-width:none;
  padding:.2rem .55rem;border-radius:var(--r-pill);
  background:rgba(var(--dark-rgb),.55);color:var(--on-dark);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;line-height:1.5;
  pointer-events:none;
}


/* ==========================================================================
   06. Botões
   Uso: <a class="btn">, <a class="btn btn-ghost">, também em <button>.
   No escopo escuro, .btn vira a variante clara e .btn-ghost o contorno claro.
   ========================================================================== */
.btn{
  --btn-bg:var(--brand); --btn-fg:var(--on-brand); --btn-line:transparent;
  --btn-bg-h:var(--brand-2); --btn-fg-h:var(--on-brand); --btn-line-h:transparent;
  --btn-shadow:0 12px 28px rgba(var(--shadow-rgb),.28);
  --btn-shadow-h:0 16px 34px rgba(var(--shadow-rgb),.34);
  --btn-sheen:rgba(255,255,255,.4);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:48px;padding:1.05rem 2.1rem;
  border:1.5px solid var(--btn-line);border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow);
  font:inherit;font-size:.78rem;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  max-width:100%;text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:translate .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn::after{                                       /* brilho que atravessa no hover */
  content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:55%;
  background:linear-gradient(100deg,transparent,var(--btn-sheen),transparent);
  transform:translateX(-160%) skewX(-22deg);pointer-events:none;
}
.btn .ico{width:17px;height:17px}
.btn:focus-visible{outline-offset:4px}
@media (hover:hover){
  .btn:hover{background:var(--btn-bg-h);color:var(--btn-fg-h);border-color:var(--btn-line-h);box-shadow:var(--btn-shadow-h);translate:0 -2px}
  .btn:hover::after{transform:translateX(260%) skewX(-22deg);transition:transform .65s ease}
}
.btn:active{translate:none}

.btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--brand); --btn-line:var(--line-blue);
  --btn-bg-h:rgba(var(--shadow-rgb),.06); --btn-fg-h:var(--brand); --btn-line-h:var(--brand);
  --btn-shadow:none; --btn-shadow-h:none; --btn-sheen:rgba(var(--line-rgb),.22);
}
.btn-sm{min-height:44px;padding:.78rem 1.45rem}
.btn-block{width:100%}

/* Escopo escuro: clara (fundo branco, texto --brand) e contorno --accent-light.
   .contact-glass e .ch-card também usam a pílula clara (podem ficar fora de .s-dark) */
:is(.s-dark,.s-dark-2,.hero,.menu-curtain,.faq-glass,.invite--dark,.footer-light) .btn,
.contact-glass:not(.contact-glass--light) .btn{
  --btn-bg:var(--on-dark); --btn-fg:var(--brand);
  --btn-bg-h:var(--pale-blue); --btn-fg-h:var(--dark);
  --btn-shadow:0 12px 28px rgba(var(--shadow-dark-rgb),.35);
  --btn-shadow-h:0 16px 34px rgba(var(--shadow-dark-rgb),.42);
  --btn-sheen:rgba(var(--line-rgb),.3);
}
:is(.s-dark,.s-dark-2,.hero,.menu-curtain,.faq-glass,.invite--dark,.footer-light) .btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--on-dark); --btn-line:rgba(var(--line-rgb),.6);
  --btn-bg-h:rgba(var(--line-rgb),.14); --btn-fg-h:var(--on-dark); --btn-line-h:rgba(var(--line-rgb),.95);
  --btn-shadow:none; --btn-shadow-h:none;
}

@media (max-width:479px){
  .btn{white-space:normal}
  .section-actions .btn{width:100%}
}


/* ==========================================================================
   07. Ícones (SVG inline, traço de 1,5px; logos de marca preenchidos)
   ========================================================================== */
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico-fill{fill:currentColor;stroke:none}
.ico-box{
  display:grid;place-items:center;flex:none;width:56px;height:56px;
  border-radius:var(--r-md);background:color-mix(in srgb,var(--heading) 8%,transparent);color:var(--icon);
}
.ico-box .ico{width:28px;height:28px}


/* ==========================================================================
   08. Imagens e placeholders
   Toda imagem de conteúdo fica numa caixa com proporção fixa (--ratio).
   Se o arquivo ainda não existe, a caixa mantém o tamanho com a hachura (sem CLS).
   ========================================================================== */
.media,.img-reveal{
  position:relative;width:100%;margin:0;overflow:hidden;
  aspect-ratio:var(--ratio,4/5);border-radius:var(--radius);
  background-color:var(--placeholder);
  background-image:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 14px);
}
.media > img,.img-reveal > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
img.is-missing{opacity:0!important}   /* o site.js marca imagens que falharam; !important vence o autoAlpha do GSAP (o alt continua acessível) */

/* .media-band: imagem larga entre o cabeçalho e o conteúdo (21:9; 3:2 no celular).
   Substitui .rh-band, .de-banner e .pp-feito-media das páginas (notas da v1). */
.media-band{--ratio:21/9;margin-bottom:clamp(36px,calc(5vw / var(--z,1)),64px)}
@media (max-width:767px){.media-band{--ratio:3/2}}


/* ==========================================================================
   09. Header que vira cápsula (.nav-morph) e menu em cortina (.menu-curtain)
   ========================================================================== */

/* ---------- 09.1 .nav-morph ----------
   Barra azul-escura SÓLIDA (feedback do cliente, rodada 2: "deixa o menu com a barra azul
   escuro"). Nunca transparente sobre a hero: #001F33 com leve vidro, logo e links brancos, fio
   inferior de 1px em azul claro translúcido e a pílula clara "Agende sua consulta".
   .is-floating (= .scrolled, rolou 24px; o site.js marca) só reduz o padding e acrescenta uma
   sombra azul suave. A hero começa ABAIXO da barra (margin-top: --header-h).
   O site.js ainda marca .is-compact e .is-past-hero; o CSS não esconde mais links nem o botão.
   Fio de progresso de leitura na base; aria-current="location" na seção visível. */
.brand{display:flex;align-items:center;flex:none;margin-right:auto;line-height:0;color:inherit}
/* Logo do cliente (webp 269×44, texto branco: só sobre o escuro). Não ampliar além de ~1,3× */
.brand-logo{display:block;width:auto;height:40px;max-width:none;image-rendering:auto}
.brand-name{font-size:17px;font-weight:600;letter-spacing:-.02em}
.brand-role{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--header-sub,var(--ink-2))}

.nav-morph{
  --nm-pad:16px;                                   /* 16px no topo, 10px rolando */
  --header-sub:var(--on-dark-2);
  --focus:var(--accent-light);
  position:fixed;inset:0 0 auto;z-index:var(--z-header);
  padding-block:var(--nm-pad);
  color:var(--on-dark);
  background:var(--header-bg);
  border-bottom:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  transition:padding .45s var(--ease-out),box-shadow .35s ease;
}
html:not(.site-js) .nav-morph{position:absolute}  /* sem JS, a barra fica no topo da página */
.nav-morph:is(.is-floating,.scrolled){--nm-pad:10px;box-shadow:0 14px 34px -16px rgba(var(--shadow-rgb),.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav-morph{background:#001F33}}

.nav-morph-shell{position:relative;display:flex;align-items:center;gap:clamp(16px,calc(2.4vw / var(--z,1)),36px);min-height:46px}

.nav-morph-links ul{display:flex;align-items:center;gap:clamp(18px,calc(2vw / var(--z,1)),30px)}
.nav-morph-links a{
  position:relative;display:inline-block;padding:10px 0;
  font-size:14px;font-weight:500;letter-spacing:.01em;color:inherit;
}
.nav-morph-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;border-radius:2px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out);
}
.nav-morph-links a:is([aria-current="location"],[aria-current="page"])::after{transform:scaleX(1);transform-origin:left;background:var(--accent-light)}
@media (hover:hover){.nav-morph-links a:hover::after{transform:scaleX(1);transform-origin:left}}

.nav-morph-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
/* "Agende sua consulta": pílula clara, sempre visível na barra */
.nav-morph .btn{
  --btn-bg:var(--on-dark); --btn-fg:var(--brand);
  --btn-bg-h:var(--pale-blue); --btn-fg-h:var(--dark);
  --btn-shadow:0 10px 24px rgba(var(--shadow-dark-rgb),.35);
  --btn-shadow-h:0 14px 30px rgba(var(--shadow-dark-rgb),.42);
  --btn-sheen:rgba(var(--line-rgb),.3);
}

/* Progresso de leitura: um fio sobre a linha da base da barra (transform: scaleX) */
.nav-morph-progress{
  position:absolute;left:0;right:0;bottom:calc(-1 * var(--nm-pad) - 1px);height:2px;border-radius:2px;
  background:var(--accent-light);
  transform:scaleX(var(--nm-p,0));transform-origin:0 50%;
  opacity:0;transition:opacity .35s ease,bottom .45s var(--ease-out);pointer-events:none;
}
.nav-morph:is(.is-floating,.scrolled) .nav-morph-progress{opacity:1}

@media (max-width:1099px){.nav-morph-links{display:none}}
@media (max-width:767px){
  :root{--header-h:72px}
  .brand-logo{height:32px}
  .nav-morph{--nm-pad:12px}
  .nav-morph:is(.is-floating,.scrolled){--nm-pad:8px}
  .nav-morph-cta{display:none}                     /* no celular o FAB assume */
}

/* ---------- 09.2 Botão que abre o menu (fica no header) ---------- */
.menu-curtain-toggle{
  display:none;place-items:center;flex:none;width:46px;height:46px;padding:0;
  border:1.5px solid color-mix(in srgb,currentColor 38%,transparent);border-radius:var(--r-sm);
  background:transparent;color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .25s ease,background-color .25s ease;
}
@media (max-width:1099px){.menu-curtain-toggle{display:inline-grid}}
html.no-js .menu-curtain-toggle{display:none}      /* sem JS a navegação completa fica no rodapé */
@media (hover:hover){.menu-curtain-toggle:hover{border-color:currentColor}}
.menu-curtain-bars{position:relative;display:block;width:20px;height:12px}
.menu-curtain-bars i{position:absolute;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:width .45s var(--ease-out)}
.menu-curtain-bars i:first-child{top:0;width:100%}
.menu-curtain-bars i:last-child{bottom:0;width:62%}   /* traço de baixo mais curto: detalhe editorial */
@media (hover:hover){.menu-curtain-toggle:hover .menu-curtain-bars i:last-child{width:100%}}

/* ---------- 09.3 .menu-curtain ----------
   Porte do "Immersive Full Screen Navigation" (@hyperiux, 21st id 27229): cortina em clip-path,
   links grandes numerados que sobem por máscara, hover por letras, coluna com as páginas de
   tratamento e uma foto real da clínica, pé com WhatsApp + CRM/RQE. Foco preso, Esc fecha. */
html.menu-curtain-open{overflow:hidden}
html.menu-curtain-open body{padding-right:var(--menu-curtain-sbw,0px)}

.menu-curtain{
  --line:var(--line-dark); --header-sub:var(--on-dark-2);
  position:fixed;inset:0;z-index:var(--z-menu);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  color:var(--on-dark);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%,rgba(var(--line-rgb),.12),transparent 70%),
    var(--grain-tile) 0 0/160px 160px,
    linear-gradient(170deg,#001F33 0%,var(--deep) 100%);
  background-blend-mode:normal,overlay,normal;
  clip-path:polygon(0% 0%,100% 0%,100% 0%,0% 0%);
}
.menu-curtain:not(.is-gsap){transition:clip-path .6s var(--ease-out)}       /* sem GSAP: cortina em CSS */
.menu-curtain.is-open:not(.is-gsap){clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
@media (min-width:1100px){.menu-curtain{display:none!important}}

.menu-curtain-inner{display:flex;flex-direction:column;min-height:100%;flex:1 0 auto}
.menu-curtain-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h);padding-block:14px}
.menu-curtain-top .brand{color:var(--on-dark)}
.menu-curtain-close{
  position:relative;display:inline-grid;place-items:center;flex:none;width:46px;height:46px;padding:0;
  border:1.5px solid color-mix(in srgb,var(--on-dark) 38%,transparent);border-radius:var(--r-sm);
  background:transparent;color:var(--on-dark);
  transition:border-color .25s ease,background-color .25s ease;
}
.menu-curtain-close i{position:absolute;left:50%;top:50%;width:20px;height:1.5px;margin:-.75px 0 0 -10px;border-radius:2px;background:currentColor}
.menu-curtain-close i:first-child{rotate:45deg}
.menu-curtain-close i:last-child{rotate:-45deg}
@media (hover:hover){.menu-curtain-close:hover{border-color:rgba(var(--line-rgb),.8);background:color-mix(in srgb,var(--on-dark) 6%,transparent)}}

.menu-curtain-body{
  flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:center;gap:clamp(28px,calc(6vw / var(--z,1)),96px);padding-block:clamp(20px,calc(5svh / var(--z,1)),56px);
}
.menu-curtain-nav ol{display:grid;gap:clamp(0px,calc(.5svh / var(--z,1)),6px)}
.menu-curtain-mask{display:block;overflow:hidden;padding:10px 12px;margin:-10px -12px}   /* folga para o anel de foco */
.menu-curtain-link{
  display:inline-flex;align-items:baseline;gap:clamp(14px,calc(2vw / var(--z,1)),24px);padding:2px 0;
  font-size:clamp(30px,min(calc(8.4vw / var(--z,1)),calc(6.6svh / var(--z,1))),64px);font-weight:600;line-height:1.08;letter-spacing:-.035em;
  color:var(--on-dark);text-decoration:none;transition:color .3s ease;
}
.menu-curtain-num{flex:none;min-width:2.1em;font-size:12px;font-weight:600;letter-spacing:.2em;line-height:1;color:var(--accent-light);font-variant-numeric:tabular-nums}
.menu-curtain-link[aria-current] .menu-curtain-text{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em;text-decoration-color:var(--accent-light)}
/* Hover por letras (montado pelo site.js): a letra sobe e a cópia verde-água entra por baixo */
.menu-curtain-chars{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.12em .1em;margin-block:-.12em -.1em;white-space:nowrap}
.menu-curtain-char{display:inline-block;white-space:pre;text-shadow:0 1.4em 0 var(--accent-light);transition:transform .55s cubic-bezier(.625,.05,0,1);transition-delay:calc(var(--c,0) * 14ms)}
@media (hover:hover) and (pointer:fine){
  .menu-curtain-link:hover .menu-curtain-char,
  .menu-curtain-link:focus-visible .menu-curtain-char{transform:translateY(-1.4em)}
}

.menu-curtain-side{display:grid;gap:clamp(18px,calc(3svh / var(--z,1)),28px);align-content:center;max-width:460px;justify-self:end;width:100%}
.menu-curtain-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-light)}
.menu-curtain-label::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.menu-curtain-pages{display:grid;border-top:1px solid var(--line-dark)}
.menu-curtain-pages a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line-dark);
  font-size:16.5px;font-weight:500;letter-spacing:-.01em;color:var(--on-dark-2);transition:color .25s ease;
}
.menu-curtain-pages a .ico{width:18px;height:18px;color:var(--accent-light);transition:translate .35s var(--ease-out)}
.menu-curtain-pages a[aria-current]{color:var(--on-dark)}
@media (hover:hover){
  .menu-curtain-pages a:hover{color:var(--on-dark)}
  .menu-curtain-pages a:hover .ico{translate:4px 0}
}
.menu-curtain-media{--ratio:16/10;border-radius:var(--r-md)}
.menu-curtain-media > img{filter:saturate(.85) contrast(1.02)}
.menu-curtain-media::after{content:"";position:absolute;inset:0;background:rgba(var(--dark-rgb),.28);pointer-events:none}

.menu-curtain-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  padding-block:22px calc(26px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-dark);
}
.menu-curtain-creds{max-width:none;font-size:12px;font-weight:600;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
.menu-curtain-creds b{font-weight:600;color:var(--on-dark)}

@media (max-width:1099px){.menu-curtain-body{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}}
@media (max-width:767px){
  .menu-curtain-body{grid-template-columns:minmax(0,1fr);align-content:center;gap:30px}
  .menu-curtain-side{justify-self:stretch;max-width:none}
  .menu-curtain-foot{flex-direction:column;align-items:stretch}
  .menu-curtain-foot .btn{width:100%}
}
@media (max-width:599px){.menu-curtain-media{display:none}}
@media (max-height:640px) and (max-width:767px){
  .menu-curtain-link{font-size:clamp(26px,calc(7.4vw / var(--z,1)),34px)}
  .menu-curtain-body{padding-block:16px;gap:22px}
}


/* ==========================================================================
   10. Hero "capa de revista"
   Foto horizontal com os textos espalhados pelos cantos (leitura em Z).
   Nunca usar data-anim/.reveal aqui: a hero tem a própria linha do tempo no site.js.
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;display:flex;
  margin-top:var(--header-h);                      /* a barra é sólida: a hero começa abaixo dela */
  min-height:clamp(540px,calc(calc(100svh / var(--z,1)) - var(--header-h) - 48px),860px);
  padding:0;background:var(--dark);
}
.hero-media{position:absolute;inset:0;display:block;margin:0;overflow:hidden}   /* o Ken Burns fica recortado aqui */
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 32%;transform-origin:62% 40%;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;background:
    linear-gradient(180deg,rgba(var(--dark-rgb),.55) 0%,rgba(var(--dark-rgb),.16) 16%,transparent 30%),
    radial-gradient(ellipse 62% 58% at 6% 100%,rgba(var(--dark-rgb),.86) 0%,rgba(var(--dark-rgb),.5) 40%,transparent 72%),
    radial-gradient(ellipse 36% 48% at 100% 94%,rgba(var(--dark-rgb),.72),transparent 72%),
    linear-gradient(0deg,rgba(var(--dark-rgb),.62) 0%,transparent 20%),
    linear-gradient(90deg,rgba(var(--dark-rgb),.38) 0%,transparent 46%);
}
.hero-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background:var(--grain-tile) 0 0/160px 160px}

/* Acabamento da foto (porte "Edge Blur", cult-ui, 21st id 18015 + "Scroll Reveal Image" 24466 /
   "Smooth Scroll Hero" 2061, invertidos). O site.js cria os dois elementos:
   .hero-edgeblur: 4 camadas de backdrop-filter na faixa de baixo, onde ficam o H1 e o lead
   (a foto sai de foco atrás do texto e o rosto continua nítido); acende depois do Ken Burns.
   .hero-exit-veil: véu que escurece a foto enquanto a hero sai da tela (scrub, 768px ou mais). */
.hero-edgeblur{position:absolute;z-index:0;left:0;right:0;bottom:0;height:var(--he-h,38%);pointer-events:none}
.hero-edgeblur i{
  position:absolute;inset:0;opacity:0;
  -webkit-backdrop-filter:blur(var(--he-b));backdrop-filter:blur(var(--he-b));
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent var(--he-end));
  mask-image:linear-gradient(to top,#000 0%,transparent var(--he-end));
}
.hero-edgeblur i:nth-child(1){--he-b:1px;  --he-end:100%}
.hero-edgeblur i:nth-child(2){--he-b:2.5px;--he-end:78%}
.hero-edgeblur i:nth-child(3){--he-b:5px;  --he-end:56%}
.hero-edgeblur i:nth-child(4){--he-b:10px; --he-end:34%}
.hero-edgeblur.is-lit i{opacity:1}
.hero-exit-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgb(var(--dark-rgb));opacity:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-edgeblur{display:none}}

.hero-grid{
  --hero-gutter:clamp(24px,calc(4.5vw / var(--z,1)),72px);
  position:relative;z-index:5;flex:1;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto auto;
  column-gap:clamp(16px,calc(2vw / var(--z,1)),32px);
  padding-block:clamp(20px,calc(3.6svh / var(--z,1)),40px) clamp(20px,calc(3.2svh / var(--z,1)),36px);
  padding-inline:max(var(--hero-gutter),env(safe-area-inset-left,0px)) max(var(--hero-gutter),env(safe-area-inset-right,0px));
}
@media (min-width:1800px){.hero-grid{padding-inline:max(72px,(calc(100vw / var(--z,1)) - 1680px) / 2)}}

.hero-eyebrow{grid-column:1/6;grid-row:1;align-self:start}
.hero-id{
  grid-column:8/13;grid-row:1;justify-self:end;align-self:start;
  display:grid;gap:4px;max-width:none;text-align:right;
}
.hero-id b{font-size:15px;font-weight:600;color:var(--on-dark)}
.hero-id > span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--on-dark-2)}
/* O separador é aria-hidden; os espaços em volta dele (no HTML) separam as palavras para o leitor de tela */
.hero-id .sep{color:var(--accent-light);padding-inline:.1em;font-weight:400}

.hero-title{
  grid-column:1/8;grid-row:3;align-self:end;max-width:13ch;
  font-size:clamp(42px,min(calc(5.4vw / var(--z,1)),calc(9.5svh / var(--z,1))),92px);line-height:1.02;letter-spacing:-.04em;color:var(--on-dark);
}
.hero-title--long{max-width:18ch;font-size:clamp(38px,min(calc(4.4vw / var(--z,1)),calc(8svh / var(--z,1))),72px)}   /* títulos longos das landing pages */

.hero-side{grid-column:9/13;grid-row:3;align-self:end;justify-self:end;width:clamp(300px,calc(24vw / var(--z,1)),400px)}
.hero-lead{margin:0 0 18px;max-width:34ch;font-size:clamp(15px,calc(1.1vw / var(--z,1)),16px);line-height:1.6;color:var(--on-dark-2)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

.btn.hero-cta{padding-right:.55rem;gap:1rem}
@media (hover:hover){.btn.hero-cta:hover{--btn-bg-h:var(--on-dark);--btn-fg-h:var(--brand-2)}}
.hero-cta .arr{
  display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--brand);color:var(--accent-light);transition:transform .25s ease;
}
.hero-cta .arr .ico{width:16px;height:16px;stroke-width:2}
@media (hover:hover){.hero-cta:hover .arr{transform:scale(1.1)}}
.hero-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;color:var(--on-dark-2);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.hero-link .ico{width:15px;height:15px}
.hero-link:hover{color:var(--on-dark)}

.hero-rule{grid-column:1/-1;grid-row:4;align-self:start;height:1px;margin-top:clamp(18px,calc(2.6svh / var(--z,1)),28px);background:rgba(255,255,255,.18);transform-origin:left center}
.hero-foot{
  grid-column:1/-1;grid-row:4;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;
  margin-top:clamp(18px,calc(2.6svh / var(--z,1)),28px);padding-top:16px;
}
.scroll-cue{
  display:flex;align-items:center;gap:12px;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-2);
}
.scroll-cue i{position:relative;width:1px;height:36px;overflow:hidden;background:rgba(255,255,255,.22)}
.scroll-cue i::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--accent-light);
  transform:translateY(-100%);animation:cue 2.4s var(--ease-std) 1.6s 3;   /* 3 ciclos e para */
}
@keyframes cue{to{transform:translateY(260%)}}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:6px 0;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);
}
.hero-facts li{display:flex;align-items:center}
.hero-facts li + li::before{content:"";width:4px;height:4px;margin:0 14px;border-radius:50%;background:var(--accent)}

/* Tablet: o título ganha largura; apoio + ação descem para uma linha própria */
@media (max-width:1099px){
  .hero{min-height:clamp(540px,calc(82svh / var(--z,1)),760px)}
  .hero-media img{object-position:70% 30%}
  .hero-grid{grid-template-rows:auto 1fr auto auto auto}
  .hero-title{grid-column:1/11}
  .hero-title--long{grid-column:1/-1}
  .hero-side{
    grid-column:1/-1;grid-row:4;justify-self:stretch;width:auto;margin-top:22px;
    display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  }
  .hero-lead{margin:0;max-width:44ch}
  .hero-rule,.hero-foot{grid-row:5}
  .scroll-cue{display:none}
}
/* Celular: foto 4:5 em cima, título sobe sobre o pé da foto, resto num bloco azul */
@media (max-width:767px){
  .hero{display:block;min-height:0}
  .hero-media{position:relative;height:min(calc(122vw / var(--z,1)),calc(64svh / var(--z,1)))}
  .hero-media img{object-position:center 20%}
  .hero-scrim{bottom:auto;height:min(calc(122vw / var(--z,1)),calc(64svh / var(--z,1)));background:linear-gradient(180deg,rgba(var(--dark-rgb),.35) 0%,transparent 22%,transparent 45%,rgba(var(--dark-rgb),.7) 75%,var(--dark) 100%)}
  .hero-grain{display:none}
  .hero-edgeblur{--he-photo:min(calc(122vw / var(--z,1)),calc(64svh / var(--z,1)));top:calc(var(--he-photo) * .5);bottom:auto;height:calc(var(--he-photo) * .5)}
  .hero-exit-veil{display:none}
  .hero-grid{
    display:flex;flex-direction:column;align-items:stretch;
    margin-top:calc(-1 * clamp(96px,calc(26vw / var(--z,1)),128px));
    padding:0 max(20px,env(safe-area-inset-right,0px)) 28px max(20px,env(safe-area-inset-left,0px));
  }
  .hero-eyebrow{order:1;align-self:flex-start;margin-bottom:12px}
  .hero-title,.hero-title--long{order:2;align-self:stretch;max-width:none;font-size:clamp(36px,calc(10vw / var(--z,1)),44px);line-height:1.04}
  .hero-side{order:3;display:block;align-self:stretch;width:auto;margin-top:18px}
  .hero-lead{margin-bottom:18px;font-size:15px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn.hero-cta{justify-content:space-between;min-height:52px;padding-left:1.6rem}
  .hero-link{align-self:flex-start}
  .hero-id{order:4;align-self:stretch;text-align:left;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
  .hero-rule{display:none}
  .hero-foot{order:5;margin-top:14px;padding-top:0}
  .hero-facts{display:grid;gap:8px}
  .hero-facts li::before,.hero-facts li + li::before{content:"";flex:none;width:4px;height:4px;margin:0 12px 0 0;border-radius:50%;background:var(--accent)}
}


/* ==========================================================================
   11. Faixa com o nome (depois da hero E antes do FAQ, nas 4 páginas)
   Porte do "Scroll Velocity Text" (cnippet-dev, 21st id 19585) + "Scroll Based Velocity"
   (magicui, id 1269): a fita anda sozinha (~48px/s) e acelera até 1,6x quando a página rola,
   sem nunca inverter; desacelera até parar no hover, no botão de pausa e fora da tela.
   Entrada: a fita se desenrola da esquerda. A fita é aria-hidden; o botão fica fora (WCAG 2.2.2).
   Movimento reduzido ou sem JS: a fita fica parada e centralizada.
   ========================================================================== */
.ribbons{position:relative;z-index:var(--z-ribbon);isolation:isolate;height:92px;overflow:hidden;background:var(--brand)}
.ribbon{
  position:absolute;top:50%;left:-3%;width:106%;
  display:flex;overflow:hidden;padding:.5rem 0;
  transform:translateY(-50%) rotate(-1.5deg);
  background:var(--pale-blue);box-shadow:0 8px 22px rgba(var(--shadow-rgb),.35);
}
.mq-track{flex:none;display:flex;align-items:center;justify-content:center;min-width:100%}
.ribbons.is-ready .mq-track{justify-content:flex-start;min-width:0;will-change:transform}
.mq-item{
  display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;white-space:nowrap;
  font-size:.74rem;font-weight:700;line-height:1.4;letter-spacing:.3em;text-transform:uppercase;color:var(--dark);
}
.mq-item .star{font-size:.7rem;color:var(--brand)}
/* Antes do FAQ a faixa pode ficar sobre o petróleo (alterna com o FAQ azul das landing pages) */
.ribbons--petrol{background:var(--dark-2)}

/* Sem botão de pausar/retomar (pedido do cliente): a faixa para no hover, fora da tela e com movimento reduzido */

@media (max-width:767px){
  .ribbons{height:60px}
  .mq-item{gap:1rem;padding-right:1rem;font-size:.62rem;letter-spacing:.24em}
}


/* ==========================================================================
   12. Componentes de seção
   Regra das entradas: data-anim / data-anim-stagger vão no wrapper (item do grid),
   nunca no próprio card ou botão, para não brigar com o hover em CSS.
   Os hovers que deslocam usam as propriedades translate/scale (o GSAP anima transform),
   então os dois nunca disputam a mesma propriedade.
   Componentes com entrada própria (img-cards, pillar-cards, showcase, journey, photo-split,
   photo-strip...) NÃO levam data-anim/data-anim-stagger dentro deles (ver COMPONENTES.md).
   ========================================================================== */

/* ---------- 12.0 .split: duas colunas (cabeçalho à esquerda, conteúdo à direita) ---------- */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:clamp(32px,calc(5vw / var(--z,1)),80px)}
.split > :is(.section-head,.sec-head){margin-bottom:0}
.split--sticky > :first-child{position:sticky;top:calc(var(--header-h) + 32px)}
.split-content{display:grid;gap:clamp(20px,calc(2.4vw / var(--z,1)),28px);align-content:start}
.split-content > .section-actions{margin-top:4px}
@media (max-width:1099px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split--sticky > :first-child{position:static}
}

/* ---------- 12.1 Frase de fechamento e lista de linhas ---------- */
.callout{
  max-width:62ch;padding-left:18px;border-left:2px solid var(--line-blue);
  font-size:clamp(16px,calc(1.2vw / var(--z,1)),17px);line-height:1.65;color:var(--ink);
}
.callout--center{margin-inline:auto;padding:0;border:0;text-align:center}
.line-list{display:grid;border-top:1px solid var(--line)}
.line-list li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.6;color:var(--ink)}
.line-list li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--accent)}

/* ---------- 12.2 .cards-lift: grid de cards que sobem no hover ---------- */
.cards-lift{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap)}
.cards-lift > li{display:flex}
.card{
  display:grid;align-content:start;gap:14px;width:100%;
  padding:clamp(24px,calc(2.6vw / var(--z,1)),36px);
  background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:translate .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.card p{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.card-num{font-size:clamp(28px,calc(2.6vw / var(--z,1)),36px);font-weight:600;line-height:1;letter-spacing:-.04em;color:var(--em);font-variant-numeric:tabular-nums}
@media (hover:hover){
  .cards-lift .card:hover{translate:0 -5px;box-shadow:var(--shadow-md);border-color:var(--line-blue)}
}
.cards-lift--media{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.cards-lift--media > .cards-lift-media{grid-row:span var(--rows,3)}
.cards-lift--media > .cards-lift-media .media{height:100%;min-height:100%;aspect-ratio:auto}
.cards-lift--media .card{grid-template-columns:auto 1fr;column-gap:22px}
.cards-lift--media .card > :not(.card-num){grid-column:2}
.cards-lift--media .card-num{grid-row:1 / span 2}
@media (max-width:1099px){
  .cards-lift{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-lift > :last-child:nth-child(odd){grid-column:1/-1}
  .cards-lift--media{grid-template-columns:minmax(0,1fr)}
  .cards-lift--media > .cards-lift-media{grid-row:auto}
  .cards-lift--media > .cards-lift-media .media{aspect-ratio:16/9;height:auto}
}
@media (max-width:767px){.cards-lift{grid-template-columns:minmax(0,1fr)}}

/* ---------- 12.3 .spot-cards: luz que segue o ponteiro (Spotlight, kevingirelli 35180) ---------- */
.spot-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.spot-cards > li{display:flex}
.spot-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-content:start;gap:18px;width:100%;
  padding:clamp(24px,calc(2.4vw / var(--z,1)),32px);
  background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius);
}
.spot-card::before,.spot-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease}
.spot-card::before{z-index:-1;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(var(--spot-rgb),.12),transparent 45%)}
.spot-card::after{
  padding:1px;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(var(--spot-rgb),.5),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.spot-cards.is-lit .spot-card::before,.spot-cards.is-lit .spot-card::after{opacity:1}
.spot-num{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--em);font-variant-numeric:tabular-nums}
.spot-card p{font-size:16px;line-height:1.6;color:var(--ink)}
@media (max-width:1099px){
  .spot-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spot-cards > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:767px){.spot-cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- 12.4 .timeline: linha que se desenha (vertical abaixo de 1100px) ---------- */
.timeline{position:relative;--axis:x;--dot:14px}
.timeline-track{
  position:absolute;left:0;right:0;top:calc(var(--dot) / 2 - 1px);height:2px;overflow:hidden;
  background:rgba(var(--line-rgb),.4);border-radius:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
}
.timeline-fill{position:absolute;inset:0;background:linear-gradient(90deg,#5B8DB3,var(--brand));transform-origin:0 50%}
:is(.s-dark,.s-dark-2) .timeline-fill{background:linear-gradient(90deg,#5B8DB3,#A9CBE6)}
.timeline-steps{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 clamp(18px,calc(2.2vw / var(--z,1)),32px)}
.timeline-step{position:relative;display:grid;align-content:start;gap:10px;padding-top:calc(var(--dot) + 28px)}
.timeline-dot{
  position:absolute;top:0;left:0;width:var(--dot);height:var(--dot);border-radius:50%;
  background:var(--accent);border:2px solid var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.2);
  transition:background-color .45s ease,box-shadow .45s ease;
}
.timeline.is-armed .timeline-dot:not(.is-on){background:var(--section-bg);box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
.timeline-num{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--eyebrow);font-variant-numeric:tabular-nums}
.timeline-step p{font-size:15px;line-height:1.65;color:var(--ink-2)}
@media (max-width:1099px){
  .timeline{--axis:y}
  .timeline-track{
    left:calc(var(--dot) / 2 - 1px);right:auto;top:6px;bottom:0;width:2px;height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent);
  }
  .timeline-fill{transform-origin:50% 0;background:linear-gradient(180deg,#5B8DB3,var(--brand))}
  :is(.s-dark,.s-dark-2) .timeline-fill{background:linear-gradient(180deg,#5B8DB3,#A9CBE6)}
  .timeline-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:clamp(26px,calc(4vw / var(--z,1)),36px)}
  .timeline-step{max-width:60ch;padding-top:0;padding-left:calc(var(--dot) + 26px)}
  .timeline-dot{top:6px}
}

/* ---------- 12.5 .check-list: checks que se desenham ---------- */
.check-list{display:grid;gap:12px}
.check-list li{
  display:flex;align-items:flex-start;gap:14px;padding:14px 18px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--surface-line);
  font-size:16px;line-height:1.6;color:var(--ink);
}
@media (min-width:768px){.check-list--cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chk{
  display:grid;place-items:center;flex:none;width:26px;height:26px;margin-top:1px;
  border-radius:50%;background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.55);
}
.chk svg{width:13px;height:13px;fill:none;stroke:var(--em);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chk path{stroke-dasharray:24 26;stroke-dashoffset:0}       /* sem JS: já desenhado */
.check-list.on-dark li{position:relative;overflow:hidden;transition:translate .3s ease,background-color .3s ease,border-color .3s ease}
.check-list.on-dark .chk{background:rgba(var(--accent-rgb),.25);border-color:rgba(var(--accent-rgb),.7)}
.check-list.on-dark li::after{
  content:"";position:absolute;inset:0 auto 0 0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:translateX(-160%) skewX(-20deg);
}
.check-list.on-dark.is-sheen li::after{animation:sheen 7.5s linear calc(var(--i,0) * .6s) 4}
@keyframes sheen{0%{transform:translateX(-160%) skewX(-20deg)}16%,100%{transform:translateX(320%) skewX(-20deg)}}
@media (hover:hover){
  .check-list.on-dark li:hover{translate:6px 0;background:rgba(var(--line-rgb),.12);border-color:rgba(var(--line-rgb),.6)}
}

/* ---------- 12.6 .sticky-story: imagem fixa que troca com os blocos de texto ---------- */
.sticky-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,calc(5vw / var(--z,1)),80px);align-items:start}
.sticky-story--reverse .sticky-story-media{order:-1}
.sticky-story-media{
  position:sticky;top:calc(var(--header-h) + 24px);
  overflow:hidden;aspect-ratio:var(--ratio,4/5);max-height:calc(calc(100svh / var(--z,1)) - var(--header-h) - 48px);
  border-radius:var(--radius);box-shadow:var(--shadow-md);
  background-color:var(--placeholder);
  background-image:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 14px);
}
.sticky-story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sticky-story-media img:not(:first-child){opacity:0;visibility:hidden}   /* sem JS: só a primeira */
.sticky-story-steps{display:grid}
.sticky-story-step{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;
  min-height:clamp(280px,calc(50svh / var(--z,1)),480px);padding-block:24px;
}
.sticky-story-step h3{font-size:clamp(22px,calc(2.4vw / var(--z,1)),32px);line-height:1.2;letter-spacing:-.03em;transition:color .4s ease}
.sticky-story-step p{color:var(--ink-2)}
.sticky-story-step > .eyebrow{transition:opacity .4s ease}
/* Passo inativo: só o número esmaece e o título vai para --ink-2 (5,7:1 em --bg-2). O texto
   continua com a cor normal (a v1 esmaecia o bloco inteiro a .35 e caía abaixo do AA). */
.sticky-story.is-dimmed .sticky-story-step:not(.is-active) > .eyebrow{opacity:.45}
.sticky-story.is-dimmed .sticky-story-step:not(.is-active) h3{color:var(--ink-2)}
.sticky-story-figure{display:none}
@media (max-width:767px){
  .sticky-story{grid-template-columns:minmax(0,1fr);gap:0}
  .sticky-story-media{display:none}
  .sticky-story-steps{gap:clamp(36px,calc(8vw / var(--z,1)),48px)}
  .sticky-story-step{min-height:0;padding-block:0}
  .sticky-story-figure{display:block;--ratio:4/3;margin-bottom:6px}
}

/* ---------- 12.7 .img-reveal: imagem que abre por máscara (estado inicial na seção 16) ---------- */
.img-reveal{will-change:clip-path}
.img-reveal > img{transform-origin:50% 50%}

/* ---------- 12.8 .signature: assinatura que se desenha ---------- */
.signature{display:grid;justify-items:start;gap:10px;margin:0}
.signature svg{width:clamp(180px,calc(22vw / var(--z,1)),240px);height:auto;overflow:visible;color:var(--heading)}
.signature path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.1;stroke-dashoffset:0}
.signature figcaption{display:grid;gap:2px;line-height:1.4}
.signature figcaption b{font-size:15px;font-weight:600;color:var(--ink)}
.signature figcaption span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- 12.9 .stack-steps: passos que se empilham (lista simples no celular) ---------- */
.stack-steps{display:grid;gap:clamp(16px,calc(2vw / var(--z,1)),24px);padding-bottom:clamp(24px,calc(6vh / var(--z,1)),64px)}
.stack-step{position:sticky;top:calc(var(--header-h) + 28px + var(--i,0) * 16px)}
.stack-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:clamp(20px,calc(3vw / var(--z,1)),48px);
  min-height:clamp(200px,calc(22vw / var(--z,1)),250px);padding:clamp(28px,calc(3.4vw / var(--z,1)),48px);
  background:var(--stack-bg);border:1px solid var(--surface-line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);transform-origin:50% 0;
}
.stack-num{font-size:clamp(40px,calc(5vw / var(--z,1)),72px);font-weight:600;line-height:.9;letter-spacing:-.05em;color:var(--em);font-variant-numeric:tabular-nums}
.stack-body{display:grid;gap:12px;align-content:start}
.stack-body p{color:var(--ink-2)}
@media (max-width:767px){
  .stack-step{position:static}
  .stack-card{grid-template-columns:minmax(0,1fr);gap:14px;min-height:0;box-shadow:var(--shadow-sm)}
  .stack-steps{padding-bottom:0}
}

/* ---------- 12.10 .split-media: texto + imagem lado a lado ---------- */
.split-media{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,calc(5vw / var(--z,1)),80px);align-items:center}
.split-media--reverse{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.split-media--reverse > .split-media-media{order:-1}
.split-media--sticky{align-items:start}
.split-media--sticky > .split-media-media{position:sticky;top:calc(var(--header-h) + 32px)}
.split-media-body{display:grid;justify-items:start;gap:20px;align-content:start}
.split-media-body > .section-actions{margin-top:clamp(8px,calc(2vw / var(--z,1)),20px)}
.split-media-body > :is(.check-list,.glass-list,.checkrail,.line-list){width:100%}
@media (max-width:767px){
  .split-media,.split-media--reverse{grid-template-columns:minmax(0,1fr)}
  .split-media--sticky > .split-media-media{position:static}
}
/* Até 479px os botões de .section-actions ocupam a largura toda; o justify-items:start do corpo
   encolhia a linha de botões (notas da v1). Pode apagar o contorno dos CSS das páginas. */
@media (max-width:479px){
  :is(.split-media-body,.photo-split-body,.split-content) > .section-actions{justify-self:stretch}
}

/* ---------- 12.11 .chips: sintomas e sinais em pílulas ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips--center{justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:.62rem 1.1rem;border:1px solid var(--chip-line);border-radius:var(--r-pill);
  font-size:15px;font-weight:500;line-height:1.35;color:var(--ink);
  background:color-mix(in srgb,var(--card) 40%,transparent);
}
.chip::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.chips--lg{gap:12px}
.chips--lg .chip{padding:.9rem 1.5rem;font-size:clamp(17px,calc(1.6vw / var(--z,1)),21px);font-weight:600;letter-spacing:-.01em;color:var(--heading)}
.chips--lg .chip::before{width:8px;height:8px}
:is(.s-dark,.s-dark-2) .chip{background:color-mix(in srgb,var(--on-dark) 5%,transparent)}

/* ---------- 12.12 .trio: três itens com ícone ou número ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,calc(3vw / var(--z,1)),44px)}
.trio-item{position:relative;display:grid;align-content:start;gap:14px;padding-top:28px;border-top:1px solid var(--line)}
.trio-item::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:2px;background:var(--accent)}
.trio-item .ico{width:40px;height:40px;color:var(--icon);margin-bottom:6px}
.trio-num{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--eyebrow);font-variant-numeric:tabular-nums}
.trio-item p{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
@media (max-width:767px){.trio{grid-template-columns:minmax(0,1fr)}}

/* ---------- 12.13 .cta-band: chamada final (use com .s-dark) ---------- */
.cta-band{text-align:center}
.cta-band-inner{display:grid;justify-items:center;gap:22px}
.cta-band h2{max-width:22ch}
.cta-band .section-actions{margin-top:10px}

/* ---------- 12.14 em.u-draw / em.u-mark: sublinhado e marca-texto que se desenham ----------
   Fio de 2px (u-draw) ou faixa baixa translúcida (u-mark) em background: funciona mesmo quando
   o <em> quebra em duas linhas. O site.js anima --u de 0 a 1; sem JS ele já aparece inteiro.
   Text Highlight (uiable, 21st 27942) + Text Highlighter (danielpetho, 18771). */
em.u-draw{
  background-image:linear-gradient(var(--u-color),var(--u-color));
  background-repeat:no-repeat;background-position:0 92%;
  background-size:calc(var(--u,1) * 100%) 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:.04em;
}
em.u-mark{
  background-image:linear-gradient(rgba(var(--spot-rgb),.2),rgba(var(--spot-rgb),.2));
  background-repeat:no-repeat;background-position:0 88%;
  background-size:calc(var(--u,1) * 100%) .36em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-inline:.04em;
}


/* ==========================================================================
   12.20 .photo-split · foto de meia seção que se dissolve no fundo
   Porte do "Editorial Image Hero" (felipemenezes098, 21st id 19077: a foto some por MÁSCARA)
   + "Edge Blur" (cult-ui, id 18015: camadas de backdrop-filter que tiram a borda de foco).
   Referência d04, d11, m02, m04. Funciona em .s-dark, .s-dark-2 ou claro (--bg / .s-alt).
   >= 1100px: foto absoluta em meia seção; < 1100px: foto no topo dissolvendo para baixo e o
   eyebrow + título sobem sobre o pé dela. GSAP: a moldura abre por clip-path e a foto anda
   em paralaxe dentro da folga de 8%.
   ========================================================================== */
.photo-split{
  --ps-w:50%;
  --ps-fade:36%;
  --ps-fade-y:26%;
  --ps-h:min(100%,1040px);
  --ps-h-m:min(calc(118vw / var(--z,1)),calc(76svh / var(--z,1)),780px);
  --ps-pos:50% 22%;
  --ps-pos-m:50% 18%;
  --ps-overlap:clamp(48px,calc(12vw / var(--z,1)),104px);
  --ps-text-shadow:none;
  position:relative;isolation:isolate;overflow:clip;
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(560px,calc(86svh / var(--z,1)),860px);
}
@supports not (overflow:clip){.photo-split{overflow:hidden}}
.photo-split:is(.s-dark,.s-dark-2){
  --ps-overlap:clamp(96px,calc(30vw / var(--z,1)),240px);
  --ps-text-shadow:0 2px 18px rgba(var(--shadow-dark-rgb),.6);
}
.photo-split-media{
  position:absolute;z-index:0;top:0;left:0;
  width:var(--ps-w);height:var(--ps-h);margin:0;
  background-color:var(--placeholder);
  background-image:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 14px);
  -webkit-mask-image:
    linear-gradient(to right,#000 calc(100% - var(--ps-fade)),transparent 100%),
    linear-gradient(to bottom,#000 calc(100% - var(--ps-fade-y)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,#000 calc(100% - var(--ps-fade)),transparent 100%),
    linear-gradient(to bottom,#000 calc(100% - var(--ps-fade-y)),transparent 100%);
  mask-composite:intersect;
}
.photo-split--reverse .photo-split-media{
  left:auto;right:0;
  -webkit-mask-image:
    linear-gradient(to left,#000 calc(100% - var(--ps-fade)),transparent 100%),
    linear-gradient(to bottom,#000 calc(100% - var(--ps-fade-y)),transparent 100%);
  mask-image:
    linear-gradient(to left,#000 calc(100% - var(--ps-fade)),transparent 100%),
    linear-gradient(to bottom,#000 calc(100% - var(--ps-fade-y)),transparent 100%);
}
.photo-split-frame{position:absolute;inset:0;overflow:hidden}
.photo-split-frame img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:var(--ps-pos)}
.photo-split-blur{position:absolute;top:0;bottom:0;right:0;width:calc(var(--ps-fade) + 10%);pointer-events:none}
.photo-split--reverse .photo-split-blur{right:auto;left:0}
.photo-split-blur i{position:absolute;inset:0}
.photo-split-blur i:nth-child(1){--ps-b:1.5px;--ps-from:0%; --ps-to:30%}
.photo-split-blur i:nth-child(2){--ps-b:3px;  --ps-from:18%;--ps-to:48%}
.photo-split-blur i:nth-child(3){--ps-b:6px;  --ps-from:36%;--ps-to:68%}
.photo-split-blur i:nth-child(4){--ps-b:12px; --ps-from:56%;--ps-to:90%}
.photo-split-blur i{
  -webkit-backdrop-filter:blur(var(--ps-b));backdrop-filter:blur(var(--ps-b));
  -webkit-mask-image:linear-gradient(var(--ps-dir,to right),transparent var(--ps-from),#000 var(--ps-to));
  mask-image:linear-gradient(var(--ps-dir,to right),transparent var(--ps-from),#000 var(--ps-to));
}
.photo-split--reverse .photo-split-blur{--ps-dir:to left}
.photo-split-grid{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.photo-split-body{grid-column:7/-1;display:grid;justify-items:start;align-content:start;gap:20px;max-width:600px;padding-left:clamp(0px,calc(2.2vw / var(--z,1)),36px)}
.photo-split--reverse .photo-split-body{grid-column:1/7;padding-left:0;padding-right:clamp(0px,calc(2.2vw / var(--z,1)),36px)}
.photo-split-body > .sec-head{margin-bottom:6px}
.photo-split-body > h3{margin-top:clamp(10px,calc(1.6vw / var(--z,1)),22px)}
.photo-split-body > .section-actions{margin-top:clamp(6px,calc(1.6vw / var(--z,1)),16px)}
.photo-split-body > :is(.line-list,.check-list,.glass-list,.checkrail,.photo-split-trail){width:100%}
.photo-split-body > p:not([class]){color:var(--ink)}
/* "Formação e trajetória": pontos ligados por um fio (o .edu da referência, d04/d05) */
.photo-split-trail{display:grid;width:100%}
.photo-split-trail li{position:relative;padding:0 0 18px 30px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.photo-split-trail li:last-child{padding-bottom:0}
.photo-split-trail li::before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
.photo-split-trail li:not(:last-child)::after{content:"";position:absolute;left:8px;top:calc(.55em + 14px);bottom:4px;width:1px;background:var(--line)}
.photo-split-trail b{font-weight:600;color:var(--ink)}
@media (max-width:1099px){
  .photo-split{display:block;min-height:0;padding-top:0}
  .photo-split-media,.photo-split--reverse .photo-split-media{
    position:relative;left:auto;right:auto;width:100%;height:var(--ps-h-m);
    -webkit-mask-image:linear-gradient(to bottom,#000 38%,transparent 97%);
    mask-image:linear-gradient(to bottom,#000 38%,transparent 97%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  .photo-split-frame img{object-position:var(--ps-pos-m)}
  .photo-split-blur,.photo-split--reverse .photo-split-blur{inset:auto 0 0 0;width:auto;height:58%;--ps-dir:to bottom}
  .photo-split-grid{display:block;margin-top:calc(-1 * var(--ps-overlap))}
  .photo-split-body,.photo-split--reverse .photo-split-body{max-width:680px;padding:0}
  .photo-split-body > :is(.eyebrow,h2),
  .photo-split-body > .sec-head > :is(.eyebrow,h2){text-shadow:var(--ps-text-shadow)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.photo-split-blur{display:none}}


/* ==========================================================================
   12.21 .s-photo-bg · seção inteira sobre uma foto desfocada e escurecida
   Porte do "Parallax Scrolling Effect" (minhxthanh, 21st id 2544), sem filter animado: o JS
   clona a camada (uma quase nítida, outra bem desfocada) e faz um crossfade de opacidade,
   com paralaxe e zoom-out lentos (scrub). Referência .mama (d07, m03).
   Uso: <section class="s-photo-bg s-dark"> (o .s-dark traz os tokens do escuro);
   petróleo: + .s-photo-bg--petrol. No máximo uma por página.
   ========================================================================== */
.s-photo-bg{
  --pb-tint-rgb:var(--dark-rgb);
  --pb-blur:18px;
  --pb-blur-near:4px;
  --pb-blur-far:20px;
  --pb-veil:.8;
  --pb-pos:50% 40%;
  position:relative;isolation:isolate;overflow:clip;
  background:rgb(var(--pb-tint-rgb));
}
@supports not (overflow:clip){.s-photo-bg{overflow:hidden}}
.s-photo-bg--petrol{--pb-tint-rgb:var(--dark-2-rgb);--section-bg:var(--dark-2)}
.s-photo-bg-media{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.s-photo-bg-layer{position:absolute;left:0;right:0;top:-8%;height:116%;transform:scale(1.1);transform-origin:50% 50%}
.s-photo-bg-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pb-pos);filter:blur(var(--pb-blur)) saturate(.85)}
.s-photo-bg.is-focus .s-photo-bg-layer img{filter:blur(var(--pb-blur-near)) saturate(.85)}
.s-photo-bg.is-focus .s-photo-bg-layer--deep img{filter:blur(var(--pb-blur-far)) saturate(.8)}
.s-photo-bg-layer--deep{opacity:0}
.s-photo-bg-media::before,.s-photo-bg-media::after{content:"";position:absolute;inset:0;z-index:2}
.s-photo-bg-media::before{
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%,rgba(var(--pb-tint-rgb),calc(var(--pb-veil) - .1)) 0%,rgba(var(--pb-tint-rgb),var(--pb-veil)) 100%),
    linear-gradient(180deg,rgba(var(--pb-tint-rgb),.4) 0%,transparent 16%,transparent 84%,rgba(var(--pb-tint-rgb),.5) 100%);
}
.s-photo-bg-media::after{background:var(--grain-tile) 0 0/160px 160px;mix-blend-mode:overlay;opacity:.14}
.s-photo-bg .check-list.on-dark li{
  background:color-mix(in srgb,var(--on-dark) 7%,transparent);
  border-color:color-mix(in srgb,var(--on-dark) 16%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
}
.s-photo-bg-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--gap);max-width:980px;margin-inline:auto}
@media (max-width:767px){.s-photo-bg-cols{grid-template-columns:minmax(0,1fr)}}
.s-photo-bg-close{display:grid;justify-items:center;gap:22px;margin-top:clamp(28px,calc(4vw / var(--z,1)),44px);text-align:center}
.s-photo-bg-close p{max-width:62ch;color:var(--ink)}


/* ==========================================================================
   12.22 .glass-list · itens de vidro com check que se desenha
   Porte do "Glass Card" (educalvolpz, 21st id 28259: vidro, aro polido, brilho especular)
   + "Task Steps" (ddoemonn, id 23569: o check que salta) + "Line Draw SVG" (pulkitxm, id 18352).
   Referência .why-list (d11, m04). Claro (padrão), escuro (dentro de .s-dark/.s-dark-2) e
   .glass-list--photo (vidro azul-marinho denso sobre foto). .glass-list--cols: 2 colunas.
   ========================================================================== */
.glass-list{
  --gl-bg:color-mix(in srgb,var(--card) 62%,transparent);
  --gl-bg-h:color-mix(in srgb,var(--card) 82%,transparent);
  --gl-line:color-mix(in srgb,var(--card) 88%,transparent);
  --gl-line-h:var(--line-blue);
  --gl-ink:var(--ink);
  --gl-shadow:0 10px 26px rgba(var(--shadow-rgb),.08);
  --gl-chk-bg:rgba(var(--accent-rgb),.12);
  --gl-chk-line:rgba(var(--accent-rgb),.5);
  --gl-chk-ink:var(--accent-2);
  --gl-spec:color-mix(in srgb,var(--card) 90%,transparent);
  --gl-sheen:rgba(var(--line-rgb),.14);
  --gl-rest:var(--shadow-sm);
  --gl-blur:14px;
  display:grid;gap:10px;
}
:is(.s-dark,.s-dark-2) .glass-list{
  --gl-bg:color-mix(in srgb,var(--on-dark) 7%,transparent);
  --gl-bg-h:rgba(var(--line-rgb),.12);
  --gl-line:var(--line-dark);
  --gl-line-h:rgba(var(--line-rgb),.7);
  --gl-ink:var(--on-dark);
  --gl-shadow:0 14px 30px rgba(var(--shadow-dark-rgb),.28);
  --gl-chk-bg:rgba(var(--accent-rgb),.24);
  --gl-chk-line:rgba(var(--accent-rgb),.75);
  --gl-chk-ink:var(--accent-light);
  --gl-spec:color-mix(in srgb,var(--on-dark) 22%,transparent);
  --gl-sheen:color-mix(in srgb,var(--on-dark) 14%,transparent);
  --gl-rest:0 0 0 transparent;
}
.glass-list--photo,
:is(.s-dark,.s-dark-2) .glass-list--photo{
  --gl-bg:rgba(var(--dark-rgb),.46);
  --gl-bg-h:rgba(var(--dark-rgb),.62);
  --gl-line:color-mix(in srgb,var(--on-dark) 26%,transparent);
  --gl-ink:var(--on-dark);
  --gl-chk-bg:rgba(var(--accent-rgb),.24);
  --gl-chk-line:rgba(var(--accent-rgb),.75);
  --gl-chk-ink:var(--accent-light);
  --gl-spec:color-mix(in srgb,var(--on-dark) 22%,transparent);
  --gl-sheen:color-mix(in srgb,var(--on-dark) 14%,transparent);
  --gl-rest:0 0 0 transparent;
  --gl-blur:16px;
}
@media (min-width:900px){.glass-list--cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.glass-list--center{max-width:980px;margin-inline:auto}
.glass-item{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-start;gap:14px;
  padding:15px 20px 15px 16px;border-radius:16px;
  border:1px solid var(--gl-line);background:var(--gl-bg);
  -webkit-backdrop-filter:blur(var(--gl-blur)) saturate(1.12);backdrop-filter:blur(var(--gl-blur)) saturate(1.12);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-dark) 14%,transparent),var(--gl-rest);
  font-size:16px;line-height:1.55;color:var(--gl-ink);
  transition:translate .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.glass-text{min-width:0;padding-top:2px}
.glass-text strong{font-weight:600}
.glass-check{
  position:relative;display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--gl-chk-bg);border:1px solid var(--gl-chk-line);
}
.glass-check svg{width:14px;height:14px;overflow:visible}
.glass-check path{fill:none;stroke:var(--gl-chk-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.02;stroke-dashoffset:0}
.glass-check::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gl-chk-line);pointer-events:none;opacity:var(--ring-o,0);transform:scale(var(--ring-s,1))}
.glass-item::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,30%) var(--my,30%),var(--gl-spec),transparent 62%);
  transition:opacity .35s ease;
}
.glass-item::after{
  content:"";position:absolute;inset:0 auto 0 0;width:42%;pointer-events:none;
  background:linear-gradient(100deg,transparent,var(--gl-sheen),transparent);
  transform:translateX(-170%) skewX(-20deg);
}
.glass-list.is-sheen .glass-item::after{animation:glass-sheen 8s linear calc(var(--i,0) * .55s) 3}
@keyframes glass-sheen{0%{transform:translateX(-170%) skewX(-20deg)}18%,100%{transform:translateX(340%) skewX(-20deg)}}
@media (hover:hover) and (pointer:fine){
  .glass-item:hover{translate:6px 0;background:var(--gl-bg-h);border-color:var(--gl-line-h);box-shadow:var(--gl-shadow)}
  .glass-item:hover::before{opacity:1}
}
@media (max-width:479px){.glass-item{gap:12px;padding:14px 16px 14px 14px;font-size:15.5px}}


/* ==========================================================================
   12.23 .monogram · "MA" gigante em marca d'água, com paralaxe
   Porte do "Parallax Image" (pulkitxm, 21st id 20023) + "Signature" (kevingirelli, id 35190):
   o "MA" do favicon em traço, cortado na borda da seção (o .bigjp da referência, d03); os traços
   se desenham uma vez e depois o monograma desliza devagar com a rolagem.
   A seção recebe .monogram-host. Variantes: --left, --top, --small, --plain (sem o fio verde).
   ========================================================================== */
.monogram-host{position:relative;isolation:isolate;overflow:hidden}
@supports (overflow:clip){.monogram-host{overflow:clip}}
.monogram-host > :not(.monogram,.photo-split-media,.journey-blobs,.s-photo-bg-media,.faq-glass-light,.rb-glow,.rb-mark,.invite-deco,.invite-thread){position:relative;z-index:1}
.monogram{
  --mono-color:color-mix(in srgb,var(--brand) 6%,transparent);
  --mono-line:color-mix(in srgb,var(--brand) 14%,transparent);
  --mono-stroke:1.7;
  position:absolute;z-index:0;top:50%;right:-5%;
  width:clamp(300px,calc(44vw / var(--z,1)),680px);
  transform:translateY(-50%);
  pointer-events:none;user-select:none;
}
.monogram svg{display:block;width:100%;height:auto;overflow:visible}
.monogram path{fill:none;stroke:var(--mono-color);stroke-width:var(--mono-stroke);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.1;stroke-dashoffset:0}
.monogram .monogram-line{stroke:var(--mono-line);stroke-width:calc(var(--mono-stroke) * .5)}
.monogram--plain .monogram-line{display:none}
.monogram--left{right:auto;left:-5%}
.monogram--top{top:clamp(24px,calc(6vw / var(--z,1)),72px);transform:none}
.monogram--small{width:clamp(220px,calc(28vw / var(--z,1)),420px)}
:is(.s-dark,.s-dark-2,.hero) .monogram{
  --mono-color:color-mix(in srgb,var(--on-dark) 5%,transparent);
  --mono-line:rgba(var(--line-rgb),.18);
}
@media (max-width:767px){
  .monogram{top:clamp(16px,calc(6vw / var(--z,1)),40px);right:calc(-16vw / var(--z,1));width:min(calc(78vw / var(--z,1)),360px);transform:none}
  .monogram--left{right:auto;left:calc(-16vw / var(--z,1))}
}


/* ==========================================================================
   12.24 .manifesto · frase do briefing que acende palavra por palavra
   Porte do "Scroll word reveal" (motiondotdev, 21st id 24525) + "Text Reveal" (magicui, id 856):
   as palavras começam apagadas (~.22) e acendem em sequência com a rolagem (scrub), sem palco
   fixo. Variante .manifesto--start (à esquerda, com barra de progresso). No máximo uma por página.
   ========================================================================== */
.manifesto{position:relative;display:grid;justify-items:center;gap:clamp(18px,calc(2.2vw / var(--z,1)),26px);max-width:960px;margin-inline:auto;text-align:center}
.manifesto--start{justify-items:start;margin-inline:0;text-align:left;padding-left:clamp(22px,calc(3vw / var(--z,1)),40px)}
.manifesto-text{
  max-width:32ch;margin:0;
  font-size:clamp(23px,calc(2.7vw / var(--z,1)),38px);font-weight:500;line-height:1.36;letter-spacing:-.028em;
  color:var(--heading);text-wrap:pretty;
}
.manifesto--start .manifesto-text{max-width:30ch}
.manifesto-text em{font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--em)}
.manifesto-w{will-change:opacity}
.manifesto-bar{display:none}
.manifesto--start .manifesto-bar{display:block;position:absolute;left:0;top:.5em;bottom:.5em;width:2px;overflow:hidden;border-radius:2px;background:var(--line)}
.manifesto-bar span{display:block;width:100%;height:100%;transform-origin:50% 0;background:linear-gradient(180deg,#5B8DB3,var(--brand))}
:is(.s-dark,.s-dark-2) .manifesto-bar span{background:linear-gradient(180deg,#5B8DB3,#A9CBE6)}
.manifesto-sign{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.manifesto-sign::before{content:"";width:28px;height:1px;background:var(--accent)}
@media (max-width:479px){.manifesto-text{font-size:clamp(21px,calc(6.2vw / var(--z,1)),24px);line-height:1.4}}


/* ==========================================================================
   12.25 .img-cards · cards com foto P&B, véu, pílula de vidro e corpo no hover/foco
   Porte do "Focus Cards" (Aceternity/manuarora700, 21st id 1168) + "Hover Reveal Cards"
   (lavikatiyar, id 7840), no desenho da referência .mama .xp (d07, m03). Substitui o .xp-cards.
   Desktop com mouse: a pílula mostra o nome; hover/foco abre o corpo, aproxima a foto e os
   vizinhos recuam. Toque/tablet/celular: corpo sempre visível. Card sem link: corpo sempre visível.
   Grade: 3 por linha (4 ou 2 cards = 2 por linha; 5 cards = 3 + 2). Entrada própria (site.js).
   ========================================================================== */
.img-cards{
  --imgc-h:clamp(320px,calc(28vw / var(--z,1)),400px);
  --imgc-h-open:clamp(360px,calc(31vw / var(--z,1)),440px);
  --imgc-line:color-mix(in srgb,var(--on-dark) 22%,transparent);
  --imgc-pill-line:color-mix(in srgb,var(--on-dark) 34%,transparent);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,calc(1.4vw / var(--z,1)),18px);
}
.img-cards > li{display:flex;min-width:0}
.img-cards > :where(li){grid-column:span 2}
.img-cards > :where(li:only-child){grid-column:1 / -1}
.img-cards > :where(li:first-child:nth-last-child(2),li:first-child:nth-last-child(2) ~ li,
  li:first-child:nth-last-child(4),li:first-child:nth-last-child(4) ~ li,
  li:nth-child(4):nth-last-child(2),li:nth-child(5):last-child){grid-column:span 3}
.img-card{
  position:relative;isolation:isolate;overflow:hidden;flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:var(--imgc-h);
  border-radius:var(--radius);border:1px solid var(--imgc-line);
  background:var(--dark);color:var(--on-dark);
  --focus:var(--accent-light);
  box-shadow:0 18px 40px rgba(var(--shadow-dark-rgb),.28);
  transition:opacity .45s var(--ease-std),scale .45s var(--ease-std),border-color .35s ease;
}
.img-card-img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.92);
  transition:scale 1s var(--ease-out),filter .6s ease;
}
.img-card-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--dark-rgb),.04) 0%,rgba(var(--dark-rgb),.3) 44%,rgba(var(--dark-rgb),.92) 100%),
    rgba(var(--shadow-rgb),.28);
  transition:opacity .45s ease;
}
.img-card-veil::after{
  content:"";position:absolute;inset:0;transition:opacity .45s ease;
  background:linear-gradient(180deg,rgba(var(--dark-rgb),.1) 0%,rgba(var(--dark-rgb),.62) 38%,rgba(var(--dark-rgb),.9) 100%);
}
.img-card-tag{
  position:absolute;left:16px;right:16px;bottom:20px;z-index:1;
  display:flex;justify-content:center;max-width:none;
  transition:opacity .3s ease,translate .45s var(--ease-out);
}
.img-card-tag span{
  padding:.55rem 1.05rem;border-radius:var(--r-pill);
  background:rgba(var(--dark-rgb),.45);border:1px solid var(--imgc-pill-line);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  font-size:.68rem;font-weight:600;line-height:1.35;letter-spacing:.16em;text-transform:uppercase;text-align:center;
  color:var(--on-dark);
}
.img-card-body{
  position:relative;z-index:1;display:grid;gap:10px;
  padding:clamp(22px,calc(2vw / var(--z,1)),30px);
  transition:opacity .45s ease .12s,translate .5s var(--ease-out) .12s;
}
.img-card-kicker{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--accent-light);font-variant-numeric:tabular-nums}
.img-card-body h3{color:var(--on-dark);font-size:clamp(20px,calc(1.7vw / var(--z,1)),24px)}
.img-card-body p{max-width:46ch;font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--on-dark) 90%,transparent)}
.img-card-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;width:max-content;
  padding-bottom:3px;border-bottom:1px solid rgba(var(--line-rgb),.6);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-light);
}
.img-card-more .ico{width:16px;height:16px;stroke-width:2;transition:translate .3s ease}
.img-card-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.img-card-link:focus-visible{outline:3px solid var(--focus);outline-offset:-5px}
@media (min-width:1100px) and (hover:hover){
  .img-card:has(> .img-card-link) .img-card-body{opacity:0;translate:0 18px;transition:opacity .3s ease,translate .4s ease}
  .img-card:has(> .img-card-link) .img-card-veil::after{opacity:0}
  .img-card:not(:has(> .img-card-link)) .img-card-tag{display:none}
  .img-card:has(> .img-card-link):is(:hover,:focus-within) .img-card-body{opacity:1;translate:none;transition:opacity .45s ease .12s,translate .5s var(--ease-out) .12s}
  .img-card:is(:hover,:focus-within) .img-card-tag{opacity:0;translate:0 10px}
  .img-card:is(:hover,:focus-within) .img-card-img{scale:1.06;filter:grayscale(1) contrast(1.05) brightness(1)}
  .img-card:is(:hover,:focus-within) .img-card-veil::after{opacity:1}
  .img-card:is(:hover,:focus-within){border-color:rgba(var(--line-rgb),.6)}
  .img-card:hover .img-card-more .ico{translate:4px 0}
  .img-cards:has(.img-card:is(:hover,:focus-within)) .img-card:not(:hover,:focus-within){opacity:.58;scale:.985}
}
@supports not selector(:has(*)){.img-card-tag{display:none}}
@media (max-width:1099px){
  .img-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
  .img-cards > li{grid-column:auto}
  .img-cards > li:last-child:nth-child(odd){grid-column:1 / -1}
  .img-card{min-height:340px}
}
@media (max-width:1099px),(hover:none){
  .img-card-tag{display:none}
  .img-card-veil{background:
    linear-gradient(180deg,rgba(var(--dark-rgb),.06) 0%,rgba(var(--dark-rgb),.5) 42%,rgba(var(--dark-rgb),.94) 100%),
    rgba(var(--shadow-rgb),.3)}
}
@media (max-width:767px){
  .img-cards{grid-template-columns:minmax(0,1fr)}
  .img-cards > li:last-child:nth-child(odd){grid-column:auto}
  .img-card{min-height:clamp(300px,calc(84vw / var(--z,1)),360px)}
  .img-card-body{padding:22px 20px}
}
@media (min-width:1100px){.img-card:not(:has(> .img-card-link)){min-height:var(--imgc-h-open)}}


/* ==========================================================================
   12.26 .showcase · vitrine: lista em acordeão + foto grande que troca
   Porte do "Index List Image Gallery" (kedhareswer, 21st id 36226) + acordeão do "Feature
   List Showcase" (felipemenezes098, id 27506), no desenho da referência .show/.mp (d10).
   Item ativo em itálico, "+" que vira "×", descrição que abre; foto P&B sticky que troca por
   máscara (de baixo quando a lista desce, de cima quando sobe). Celular: cada item abre a
   própria foto. Sem JS: tudo aberto. Sem autoplay (WCAG 2.2.2).
   ========================================================================== */
.showcase{
  --sc-gap:clamp(14px,calc(1.6vw / var(--z,1)),22px);
  --sc-num:2.4em;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,calc(5vw / var(--z,1)),80px);align-items:start;
}
.showcase--media-left{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.showcase--media-left > .showcase-media{order:-1}
.showcase-list{border-top:1px solid var(--line)}
.showcase-item{position:relative;border-bottom:1px solid var(--line)}
.showcase-item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--heading);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-flex)}
.showcase-item.is-active::after{transform:scaleX(1)}
.showcase-h{margin:0;font:inherit;letter-spacing:normal;color:inherit}
.showcase-trigger{
  display:grid;grid-template-columns:var(--sc-num) minmax(0,1fr) auto;align-items:center;gap:var(--sc-gap);
  width:100%;padding:clamp(16px,calc(1.7vw / var(--z,1)),22px) 0;border:0;background:none;text-align:left;
  color:var(--heading);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.showcase-trigger:focus-visible{outline-offset:4px;border-radius:var(--r-sm)}
.showcase-num{font-size:12px;font-weight:700;letter-spacing:.2em;line-height:1;color:var(--eyebrow);font-variant-numeric:tabular-nums}
.showcase-title{font-size:clamp(21px,calc(2.1vw / var(--z,1)),30px);font-weight:600;line-height:1.15;letter-spacing:-.03em;transition:translate .45s var(--ease-out),color .3s ease}
.showcase-icon{position:relative;flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line-blue);transition:transform .45s var(--ease-flex),background-color .3s ease,border-color .3s ease}
.showcase-icon::before,.showcase-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;border-radius:2px;background:var(--em);transform:translate(-50%,-50%);transition:background-color .3s ease}
.showcase-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.showcase-item.is-active .showcase-title{font-style:italic;font-weight:400;color:var(--em);translate:6px 0}
.showcase-item.is-active .showcase-icon{transform:rotate(45deg);background:var(--em);border-color:var(--em)}
.showcase-item.is-active .showcase-icon::before,
.showcase-item.is-active .showcase-icon::after{background:var(--section-bg)}
@media (hover:hover){
  .showcase-trigger:hover .showcase-title{translate:6px 0}
  .showcase-trigger:hover .showcase-icon{border-color:var(--heading)}
}
.showcase-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease-flex),visibility 0s}
.showcase-panel-inner{overflow:hidden;min-height:0}
.showcase-panel-body{display:grid;gap:14px;padding:0 0 24px calc(var(--sc-num) + var(--sc-gap))}
.showcase-panel-body p{max-width:52ch;font-size:16px;line-height:1.7;color:var(--ink-2)}
.showcase-figure{display:none}
.showcase.is-ready .showcase-item:not(.is-active) .showcase-panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s var(--ease-flex),visibility 0s linear .5s}
.showcase.is-instant .showcase-panel{transition:none!important}
.showcase-media{
  position:sticky;top:calc(var(--header-h) + 32px);
  overflow:hidden;isolation:isolate;margin:0;
  aspect-ratio:var(--ratio,1/1);max-height:calc(calc(100svh / var(--z,1)) - var(--header-h) - 64px);
  border-radius:var(--radius);box-shadow:var(--shadow-md);
  background-color:var(--placeholder);
  background-image:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 14px);
}
.showcase:has(.showcase-item:nth-child(5)) > .showcase-media{--ratio:4/5}
.showcase-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.showcase-media img:not(:first-of-type){visibility:hidden}
.showcase.is-ready .showcase-media img{visibility:hidden;z-index:0}
.showcase.is-ready .showcase-media img.was-on{visibility:visible;z-index:1}
.showcase.is-ready .showcase-media img.is-on{visibility:visible;z-index:2}
.showcase-media::after{content:"";position:absolute;inset:auto 0 0;z-index:3;height:38%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--dark-rgb),.55))}
.showcase-tag{
  position:absolute;left:18px;bottom:18px;z-index:4;max-width:calc(100% - 36px);
  display:inline-flex;align-items:center;gap:12px;
  padding:.55rem 1rem;border-radius:var(--r-pill);
  background:rgba(var(--dark-rgb),.45);border:1px solid color-mix(in srgb,var(--on-dark) 30%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  font-size:.68rem;font-weight:600;line-height:1.35;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark);
}
.showcase-tag b{font-weight:700;color:var(--accent-light);font-variant-numeric:tabular-nums;white-space:nowrap}
.showcase-tag [data-showcase-name]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1099px){
  .showcase{gap:clamp(24px,calc(4vw / var(--z,1)),40px)}
  .showcase-title{font-size:clamp(20px,calc(2.6vw / var(--z,1)),26px)}
}
@media (max-width:767px){
  .showcase,.showcase--media-left{grid-template-columns:minmax(0,1fr)}
  .showcase-media{display:none}
  .showcase-figure{
    display:block;position:relative;overflow:hidden;margin:0 0 4px;
    aspect-ratio:4/3;border-radius:var(--r-md);
    background-color:var(--placeholder);
    background-image:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 14px);
  }
  .showcase-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
  .showcase-panel-body{padding-left:0}
  .showcase-icon{width:34px;height:34px}
}


/* ==========================================================================
   12.27 .journey · jornada em cards de vidro sobre uma linha que se desenha
   Porte do "Product Timeline" (hyperiux, 21st id 26930) + "Scroll animated timeline"
   (ibrandify, id 35029), no desenho do .htl da referência (d09). A linha acompanha a rolagem
   (scrub) e cada etapa acende quando ela passa. Manchas de luz no fundo (.journey-blobs, na
   <section class="journey-host">). Horizontal a partir de 1100px; vertical abaixo.
   ========================================================================== */
.journey-host{overflow:clip}
@supports not (overflow:clip){.journey-host{overflow:hidden}}
.journey-host > .container{position:relative;z-index:1}
.journey-blobs{position:absolute;inset:0;z-index:0;pointer-events:none}
.journey-blob{
  position:absolute;border-radius:50%;
  width:var(--size,560px);height:var(--size,560px);
  background:radial-gradient(circle,rgba(var(--blob-rgb,var(--line-rgb)),var(--blob-a,.26)),transparent 66%);
}
.journey-blob:nth-child(1){--size:clamp(360px,calc(44vw / var(--z,1)),620px);top:-14%;left:-12%}
.journey-blob:nth-child(2){--size:clamp(320px,calc(38vw / var(--z,1)),540px);bottom:-22%;right:-10%;--blob-rgb:var(--shadow-rgb);--blob-a:.14}
.journey-blob:nth-child(3){--size:clamp(220px,calc(24vw / var(--z,1)),360px);top:34%;left:46%;--blob-a:.14}
:is(.s-dark,.s-dark-2) .journey-blob{--blob-a:.22}
:is(.s-dark,.s-dark-2) .journey-blob:nth-child(2){--blob-rgb:var(--spot-rgb);--blob-a:.10}

.journey{
  position:relative;--axis:x;--dot:15px;--stem:26px;
  --journey-glass:color-mix(in srgb,var(--card) 55%,transparent);
  --journey-glass-h:color-mix(in srgb,var(--card) 76%,transparent);
  --journey-edge:color-mix(in srgb,var(--card) 72%,transparent);
  --journey-shadow:0 18px 40px rgba(var(--shadow-rgb),.12);
  --journey-numc:rgba(var(--shadow-rgb),.1);
  --journey-fill:linear-gradient(90deg,#5B8DB3,var(--brand));
}
:is(.s-dark,.s-dark-2) .journey{
  --journey-glass:color-mix(in srgb,var(--on-dark) 7%,transparent);
  --journey-glass-h:color-mix(in srgb,var(--on-dark) 12%,transparent);
  --journey-edge:var(--line-dark);
  --journey-shadow:0 18px 40px rgba(var(--shadow-dark-rgb),.35);
  --journey-numc:rgba(var(--spot-rgb),.12);
  --journey-fill:linear-gradient(90deg,#5B8DB3,#A9CBE6);
}
.journey-track{
  position:absolute;left:0;right:0;top:calc(var(--dot) / 2 - 1px);height:2px;overflow:hidden;
  border-radius:2px;background:rgba(var(--line-rgb),.4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.journey-fill{position:absolute;inset:0;background:var(--journey-fill);transform-origin:0 50%}
.journey-steps{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 clamp(12px,calc(1.2vw / var(--z,1)),16px)}
.journey-step{position:relative;display:flex;flex-direction:column;padding-top:calc(var(--dot) + var(--stem))}
.journey-node{position:absolute;top:0;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center}
.journey-dot{
  display:block;width:var(--dot);height:var(--dot);border-radius:50%;
  background:var(--accent);border:2px solid var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.18);
  transition:background-color .45s ease,box-shadow .45s ease;
}
.journey-stem{display:block;width:1px;height:var(--stem);transform-origin:50% 0;background:linear-gradient(180deg,var(--line-blue),rgba(var(--line-rgb),.15));transition:transform .5s var(--ease-out) .1s}
.journey-card{
  position:relative;isolation:isolate;overflow:hidden;flex:1;
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,calc(1.7vw / var(--z,1)),24px) clamp(16px,calc(1.3vw / var(--z,1)),20px) clamp(44px,calc(3.6vw / var(--z,1)),52px);
  border-radius:18px;border:1px solid var(--journey-edge);
  background:var(--journey-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 1px 0 color-mix(in srgb,var(--card) 60%,transparent) inset;
  transition:translate .35s ease,background-color .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.journey-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;z-index:1;background:var(--journey-fill);transform-origin:0 50%;transition:transform .7s var(--ease-out) .15s}
.journey-kicker{font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow);font-variant-numeric:tabular-nums}
.journey-card h3{font-size:clamp(17px,calc(1.25vw / var(--z,1)),18px);line-height:1.28;hyphens:auto;-webkit-hyphens:auto}
.journey-card p{font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.journey-num{position:absolute;right:12px;bottom:-.3em;z-index:-1;font-size:clamp(64px,calc(5.4vw / var(--z,1)),78px);font-weight:700;line-height:1;letter-spacing:-.06em;color:var(--journey-numc);font-variant-numeric:tabular-nums;pointer-events:none}
@media (hover:hover){.journey-card:hover{translate:0 -5px;background:var(--journey-glass-h);box-shadow:var(--journey-shadow)}}
.journey.is-armed .journey-step:not(.is-on) .journey-dot{background:var(--section-bg);box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
.journey.is-armed .journey-step:not(.is-on) .journey-stem{transform:scaleY(0)}
.journey.is-armed .journey-step:not(.is-on) .journey-card::before{transform:scaleX(0)}
.journey + .section-actions{margin-top:clamp(36px,calc(4vw / var(--z,1)),52px)}
@media (max-width:1099px){
  .journey{--axis:y;--stem:16px;max-width:680px;margin-inline:auto}
  .journey-track{
    left:calc(var(--dot) / 2 - 1px);right:auto;top:calc(26px + var(--dot) / 2);bottom:0;width:2px;height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);mask-image:linear-gradient(180deg,#000 86%,transparent);
  }
  .journey-fill{transform-origin:50% 0;background:linear-gradient(180deg,#5B8DB3,var(--brand))}
  :is(.s-dark,.s-dark-2) .journey-fill{background:linear-gradient(180deg,#5B8DB3,#A9CBE6)}
  .journey-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:14px}
  .journey-step{padding-top:0;padding-left:calc(var(--dot) + var(--stem))}
  .journey-node{top:26px;left:0;translate:none;flex-direction:row}
  .journey-stem{width:var(--stem);height:1px;transform-origin:0 50%;background:linear-gradient(90deg,var(--line-blue),rgba(var(--line-rgb),.15))}
  .journey.is-armed .journey-step:not(.is-on) .journey-stem{transform:scaleX(0)}
  .journey-card p{font-size:15px}
}
@media (max-width:479px){
  .journey{--stem:12px}
  .journey-card{padding:18px 16px 22px}
  .journey-num{font-size:56px;right:8px;bottom:auto;top:-.18em}
}


/* ==========================================================================
   12.28 .pillar-cards · pilares com o ícone dentro de um círculo com anel
   Porte do "Feature Problem Cards" (Hirael/mohammadshehadeh, 21st id 26524) + brilho de canto
   do "Feature Grid Spotlight Cards" (id 26797), no desenho da referência .pillars (d02).
   Variante .pillar-cards--center (ex.: causas). No celular o ícone fica ao lado do título.
   Entrada própria (site.js): NÃO use data-anim-stagger no <ul>.
   ========================================================================== */
.pillar-cards{
  --pillar-orb:64px;
  --pillar-orb-bg:var(--bg-2);
  --pillar-ring:var(--line);
  display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap);
}
.s-alt .pillar-cards{--pillar-orb-bg:var(--bg)}
:is(.s-dark,.s-dark-2,.hero) .pillar-cards{--pillar-orb-bg:rgba(var(--line-rgb),.12);--pillar-ring:var(--line-dark)}
.pillar-cards > li{display:flex}
.pillar-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-content:start;gap:12px;width:100%;
  padding:clamp(28px,calc(2.8vw / var(--z,1)),40px) clamp(24px,calc(2.6vw / var(--z,1)),36px) clamp(28px,calc(2.8vw / var(--z,1)),38px);
  background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:translate .4s var(--ease-out),box-shadow .4s ease,border-color .4s ease;
}
.pillar-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 12% 0%,rgba(var(--line-rgb),.12),transparent 70%);transition:opacity .4s ease}
.pillar-card::after{content:"";position:absolute;left:clamp(24px,calc(2.6vw / var(--z,1)),36px);right:clamp(24px,calc(2.6vw / var(--z,1)),36px);bottom:0;height:2px;background:linear-gradient(90deg,var(--line-blue),rgba(var(--line-rgb),.2));transform:scaleX(.14);transform-origin:left;transition:transform .7s var(--ease-out)}
.pillar-num{position:absolute;top:clamp(22px,calc(2.2vw / var(--z,1)),30px);right:clamp(22px,calc(2.4vw / var(--z,1)),32px);font-size:12px;font-weight:700;letter-spacing:.2em;line-height:1;color:var(--eyebrow);font-variant-numeric:tabular-nums}
.pillar-orb{
  position:relative;isolation:isolate;display:grid;place-items:center;flex:none;
  width:var(--pillar-orb);height:var(--pillar-orb);margin:8px 0 20px 8px;
  border-radius:50%;background:var(--pillar-orb-bg);border:1px solid var(--pillar-ring);
  outline:1px solid var(--pillar-ring);outline-offset:6px;color:var(--icon);
  transition:outline-offset .5s var(--ease-out),outline-color .4s ease,border-color .4s ease;
}
.pillar-orb::before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(var(--line-rgb),.26) 0%,rgba(var(--line-rgb),.08) 45%,transparent 70%);filter:blur(6px);opacity:.75;transition:opacity .4s ease,transform .6s var(--ease-out)}
.pillar-orb .ico{width:28px;height:28px;stroke-width:1.5}
.pillar-card h3{font-size:clamp(19px,calc(1.6vw / var(--z,1)),22px)}
.pillar-card p{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
@media (hover:hover){
  .pillar-card:hover{translate:0 -5px;box-shadow:var(--shadow-md);border-color:var(--line-blue)}
  .pillar-card:hover .pillar-orb{outline-offset:10px;outline-color:var(--line-blue);border-color:var(--line-blue)}
  .pillar-card:hover .pillar-orb::before{opacity:1;transform:scale(1.12)}
  .pillar-card:hover::after{transform:scaleX(1)}
}
.pillar-cards--center .pillar-card{justify-items:center;text-align:center}
.pillar-cards--center .pillar-orb{margin:8px auto 22px}
.pillar-cards--center .pillar-card p{margin-inline:auto}
.pillar-cards--center .pillar-card::after{transform-origin:center}
@media (max-width:1099px){
  .pillar-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillar-cards > li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:767px){
  .pillar-cards{grid-template-columns:minmax(0,1fr);gap:14px}
  .pillar-cards > li:last-child:nth-child(odd){grid-column:auto}
  .pillar-card{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:18px;row-gap:12px;padding:24px 22px}
  .pillar-card > p{grid-column:1 / -1}
  .pillar-card > h3{grid-column:2;padding-right:28px}
  .pillar-orb{--pillar-orb:52px;margin:6px;outline-offset:5px}
  .pillar-orb .ico{width:24px;height:24px}
  .pillar-cards--center .pillar-card{justify-items:start;text-align:left}
  .pillar-cards--center .pillar-orb{margin:6px}
}


/* ==========================================================================
   12.29 .reviews-band · avaliações do Google sobre o escuro (sem avaliações inventadas)
   Porte do "Star Rating" (shadcncraft, 21st id 29309) + "Toolchain Marquee" (35283) +
   "Marquee" (kevingirelli, 35200), na composição .apres-band da referência (d06).
   Use com .s-dark-2: <section class="reviews-band s-dark-2">. O selo só mostra nota/estrelas
   com data-score REAL; a moldura do widget some enquanto o widget do Google não for colado.
   Modo B (opcional): avaliações REAIS escritas no HTML viram duas fileiras opostas (d06).
   ========================================================================== */
.reviews-band{
  --rb-bg:var(--dark-2);
  --rb-glass:rgba(255,255,255,.06);
  --rb-glass-2:rgba(255,255,255,.1);
  --rb-line:var(--line-dark);
  --rb-line-2:rgba(var(--line-rgb),.55);
  --rb-star:var(--accent-light);
  --rb-pad:clamp(14px,calc(2vw / var(--z,1)),24px);
  --section-bg:var(--rb-bg);
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  background:
    var(--grain-tile) 0 0/160px 160px,
    radial-gradient(90% 70% at 50% 0%,rgba(var(--line-rgb),.12),transparent 62%),
    linear-gradient(180deg,var(--rb-bg) 0%,color-mix(in srgb,var(--rb-bg) 70%,var(--dark)) 100%);
  background-blend-mode:overlay,normal,normal;
}
.rb-glow{
  position:absolute;inset:-25% -10% auto;z-index:-1;height:150%;pointer-events:none;
  background:
    radial-gradient(34% 30% at 16% 34%,rgba(var(--line-rgb),.16),transparent 70%),
    radial-gradient(30% 28% at 86% 62%,rgba(var(--spot-rgb),.12),transparent 70%);
}
.reviews-band .sec-head{margin-bottom:clamp(26px,calc(3.2vw / var(--z,1)),38px)}
.rb-sub{font-style:italic}
.rb-mark{
  position:absolute;top:clamp(8px,calc(2vw / var(--z,1)),28px);left:0;right:0;z-index:-1;
  font-size:clamp(220px,calc(30vw / var(--z,1)),440px);font-weight:700;line-height:1;letter-spacing:0;text-align:center;
  color:var(--accent-light);opacity:.06;pointer-events:none;user-select:none;
}
.rb-badge-row{display:flex;justify-content:center}
.rb-badge{
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;
  max-width:100%;min-height:58px;padding:9px 22px 9px 9px;
  border:1px solid var(--rb-line);border-radius:var(--r-pill);
  background:var(--rb-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--ink);text-decoration:none;
  transition:border-color .3s ease,background-color .3s ease,translate .3s ease;
}
.rb-g{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--on-dark);color:var(--brand)}
.rb-g svg{width:20px;height:20px;fill:currentColor}
.rb-score{display:inline-flex;align-items:center;gap:10px}
.rb-score[hidden],.rb-score[hidden] + .rb-divider{display:none!important}
.rb-score-num{font-size:24px;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--heading)}
.rb-stars{display:inline-flex;gap:3px;color:var(--rb-star)}
.rb-star{position:relative;display:inline-flex;width:16px;height:16px}
.rb-star svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.rb-star-base svg{fill:none;opacity:.5}
.rb-star-fill{position:absolute;inset:0 auto 0 0;overflow:hidden;width:var(--fill,0%)}
.rb-star-fill svg{fill:currentColor}
.rb-count{font-size:12px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rb-divider{width:1px;height:26px;background:var(--rb-line)}
.rb-badge-label{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;text-align:left}
.rb-badge-label .ico{width:16px;height:16px;stroke-width:2;transition:transform .3s ease}
@media (hover:hover){
  .rb-badge:hover{border-color:var(--rb-line-2);background:var(--rb-glass-2);translate:0 -2px}
  .rb-badge:hover .rb-badge-label .ico{transform:translate(2px,-2px)}
}
.rb-badge:focus-visible{outline-offset:4px}
.rb-frame{
  position:relative;margin-top:clamp(36px,calc(4.4vw / var(--z,1)),56px);padding:var(--rb-pad);
  border:1px solid var(--rb-line);border-radius:var(--radius);
  background:var(--rb-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  text-align:left;
}
.rb-frame[data-state="empty"]{position:absolute;left:0;right:0;height:0;margin:0;padding:0;border:0;overflow:hidden;visibility:hidden;pointer-events:none}
.rb-frame:not([data-state]):has(> .rb-widget:empty){display:none}
.rb-corner{position:absolute;width:16px;height:16px;border:0 solid rgba(var(--line-rgb),.9);pointer-events:none;opacity:.8}
.rb-corner--tl{top:10px;left:10px;border-top-width:1.5px;border-left-width:1.5px;transform-origin:0 0}
.rb-corner--tr{top:10px;right:10px;border-top-width:1.5px;border-right-width:1.5px;transform-origin:100% 0}
.rb-corner--bl{bottom:10px;left:10px;border-bottom-width:1.5px;border-left-width:1.5px;transform-origin:0 100%}
.rb-corner--br{right:10px;bottom:10px;border-right-width:1.5px;border-bottom-width:1.5px;transform-origin:100% 100%}
.rb-skeleton{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rb-frame[data-state="loading"] .rb-skeleton{display:grid}
.rb-skel-card{display:grid;align-content:start;gap:12px;padding:22px;border:1px solid var(--rb-line);border-radius:var(--r-md);background:var(--rb-glass)}
.rb-skel-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.rb-skel-av{flex:none;width:40px;height:40px;border-radius:50%}
.rb-skel-line{display:block;height:10px;border-radius:6px}
.rb-skel-line.w40{width:40%}.rb-skel-line.w60{width:60%}.rb-skel-line.w80{width:80%}.rb-skel-line.w90{width:90%}
.rb-skel-av,.rb-skel-line{background:linear-gradient(100deg,rgba(255,255,255,.05) 20%,rgba(255,255,255,.13) 40%,rgba(255,255,255,.05) 60%) 0 0/250% 100%;animation:rb-shimmer 1.8s linear infinite}
@keyframes rb-shimmer{from{background-position:120% 0}to{background-position:-130% 0}}
.rb-widget{position:relative;min-width:0}
.rb-frame[data-state="loading"] .rb-widget{position:absolute;top:var(--rb-pad);right:var(--rb-pad);left:var(--rb-pad);opacity:0;pointer-events:none}
/* Modo B: fileiras de avaliações REAIS */
.rb-rows{position:relative;margin-top:clamp(36px,calc(4.4vw / var(--z,1)),56px);text-align:left}
.rb-rows:not(:has(.rb-card)){display:none}
.rb-list{
  display:flex;justify-content:safe center;gap:16px;
  margin:0;padding:6px max(var(--gutter),env(safe-area-inset-left,0px)) 10px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;
  scroll-padding-inline:max(var(--gutter),env(safe-area-inset-left,0px));
}
.rb-list > li{display:flex;flex:none;width:min(340px,calc(80vw / var(--z,1)));scroll-snap-align:start}
.rb-list:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--r-md)}
.rb-card{display:flex;flex-direction:column;gap:14px;width:100%;margin:0;padding:22px 22px 18px;border:1px solid var(--rb-line);border-radius:var(--r-md);background:var(--rb-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rb-card-head{display:flex;align-items:center;gap:12px;min-width:0}
.rb-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(var(--line-rgb),.55);background:rgba(var(--line-rgb),.16);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--on-dark)}
.rb-card-who{display:grid;gap:3px;min-width:0}
.rb-card-name{font-size:15px;font-weight:600;line-height:1.3;color:var(--heading);overflow-wrap:anywhere}
.rb-card-stars:empty{display:none}
.rb-card-stars .rb-star,.rb-card-stars .rb-star svg{width:13px;height:13px}
.rb-card-text{margin:0;flex:1}
.rb-card-text p{max-width:none;font-size:15px;line-height:1.65;color:var(--ink)}
.rb-card-src{display:flex;align-items:center;gap:8px;max-width:none;padding-top:12px;border-top:1px solid var(--rb-line);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.rb-card-src svg{width:14px;height:14px;flex:none;fill:currentColor}
.rb-rows.is-marquee .rb-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rb-row{display:flex;overflow:hidden;padding-block:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rb-row + .rb-row{margin-top:10px}
.rb-row-track{display:flex;flex:none;gap:16px;margin:0;padding:0 16px 0 0;list-style:none;will-change:transform}
.rb-row-track > li{display:flex;flex:none;width:clamp(280px,calc(25vw / var(--z,1)),360px)}
.rb-row .rb-card-text p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
@media (max-width:1099px){.rb-skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}.rb-skel-card:nth-child(3){display:none}}
@media (max-width:767px){
  .rb-skeleton{grid-template-columns:minmax(0,1fr)}
  .rb-skel-card:nth-child(n+2){display:none}
  .rb-badge{padding-right:18px}
  .rb-row-track{gap:12px;padding-right:12px}
  .rb-row-track > li{width:min(300px,calc(78vw / var(--z,1)))}
  .rb-card{padding:18px 18px 16px}
}
@media (max-width:479px){
  .rb-badge{border-radius:var(--r-md);padding:12px 14px}
  .rb-badge-label{font-size:.72rem;letter-spacing:.08em;text-align:center}
  .rb-divider{display:none}
}


/* ==========================================================================
   12.30 .photo-strip · faixa infinita de fotos reais do consultório, com pausa
   Porte do "Marquee" (kevingirelli, 21st id 35200) + botão de pausa do "Toolchain Marquee"
   (johnmamanao, id 35283) + preenchimento do "Marquee" (diceui, id 27529), composição
   .clinic-strip da referência (d13). Fica FORA do .container (filha direta da <section>).
   Sem JS/movimento reduzido: faixa rolável à mão (scroll-snap). Pausa no hover, fora da
   tela e ao arrastar (sem botão de pausa: pedido do cliente). As fotos aparecem como são (sem P&B).
   ========================================================================== */
.photo-strip{--pstrip-h:clamp(200px,calc(21vw / var(--z,1)),300px);--pstrip-gap:14px;--pstrip-radius:var(--r-md);position:relative}
.pstrip-viewport{
  position:relative;display:flex;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;padding-block:2px;
}
.pstrip-viewport::-webkit-scrollbar{display:none}
.pstrip-viewport:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--pstrip-radius)}
.pstrip-track{display:flex;flex:none;gap:var(--pstrip-gap);margin:0;padding:0 var(--pstrip-gap);list-style:none}
.pstrip-item{
  position:relative;flex:none;overflow:hidden;
  height:var(--pstrip-h);aspect-ratio:var(--pstrip-ratio,3/2);
  border-radius:var(--pstrip-radius);scroll-snap-align:center;
  background-color:var(--placeholder);
  background-image:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 14px);
}
.pstrip-item--tall{--pstrip-ratio:2/3}
.pstrip-item--square{--pstrip-ratio:1/1}
.pstrip-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.photo-strip.is-looping .pstrip-viewport{overflow:hidden;scroll-snap-type:none;cursor:grab;touch-action:pan-y}
.photo-strip.is-looping.is-dragging .pstrip-viewport{cursor:grabbing}
.photo-strip.is-looping .pstrip-track{padding-inline:0 var(--pstrip-gap);will-change:transform}
.photo-strip.is-looping .pstrip-item{scroll-snap-align:none}
.photo-strip.is-looping.has-fade .pstrip-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
* + .photo-strip{margin-top:clamp(40px,calc(5vw / var(--z,1)),64px)}
@media (max-width:767px){
  .photo-strip{--pstrip-h:200px;--pstrip-gap:10px}
}


/* ==========================================================================
   12.31 .contact-glass · card de contato de vidro
   Porte do "Glass Card" (@educalvolpz, 21st id 28259) em versão sóbria (sem a borda refrativa
   nem o aro cromático): corpo fosco, borda polida, brilho que segue o ponteiro, luz que
   atravessa uma vez na entrada. Estrutura do "Informações de contato" da referência (d12).
   Escuro (padrão: vidro fumê) ou .contact-glass--light. data-anim no wrapper, nunca no card.
   ========================================================================== */
.contact-glass{
  --cg-bg:color-mix(in srgb,var(--dark) 62%,transparent);
  --cg-edge:rgba(var(--line-rgb),.3);
  --cg-polish:color-mix(in srgb,var(--on-dark) 24%,transparent);
  --cg-head:rgba(var(--line-rgb),.08);
  --cg-fg:var(--on-dark);
  --cg-fg-2:var(--on-dark-2);
  --cg-accent:var(--accent-light);
  --cg-ic-bg:rgba(var(--line-rgb),.1);
  --cg-ic-edge:rgba(var(--line-rgb),.5);
  --cg-shine:color-mix(in srgb,var(--on-dark) 15%,transparent);
  --cg-sweep:color-mix(in srgb,var(--on-dark) 75%,transparent);
  --cg-shadow:0 26px 60px -26px rgba(var(--shadow-dark-rgb),.65),0 10px 26px -18px rgba(var(--shadow-dark-rgb),.5);
  --focus:var(--accent-light);
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;width:100%;max-width:440px;text-align:left;
  border:1px solid var(--cg-edge);border-radius:var(--radius);
  background:var(--cg-bg);color:var(--cg-fg);
  box-shadow:inset 0 1px 0 var(--cg-polish),inset 0 0 0 1px color-mix(in srgb,var(--on-dark) 4%,transparent),var(--cg-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  transition:translate .4s var(--ease-out),box-shadow .4s ease;
}
.contact-glass::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(280px circle at var(--mx,28%) var(--my,18%),var(--cg-shine),transparent 70%);opacity:.6;transition:opacity .45s ease}
.contact-glass::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent calc(var(--mx,50%) - 110px),var(--cg-sweep) var(--mx,50%),transparent calc(var(--mx,50%) + 110px));opacity:0;transition:opacity .45s ease}
.contact-glass.is-lit::before,.contact-glass.is-lit::after{opacity:1}
@media (hover:hover) and (pointer:fine){.contact-glass:hover{translate:0 -3px}}
.contact-glass-head{display:grid;gap:6px;padding:22px 26px 20px;background:var(--cg-head);border-bottom:1px solid var(--cg-edge)}
.contact-glass-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:var(--cg-accent)}
.contact-glass-kicker::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.contact-glass-title{margin:0;font-size:clamp(19px,calc(1.6vw / var(--z,1)),22px);font-weight:600;line-height:1.25;letter-spacing:-.02em;color:var(--cg-fg)}
.contact-glass-creds{max-width:none;font-size:11px;font-weight:600;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:var(--cg-fg-2);font-variant-numeric:tabular-nums}
.contact-glass .contact-glass-list{display:grid;gap:16px;margin:0;padding:22px 26px 8px;list-style:none}
.contact-glass-list li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:14px}
.contact-glass-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cg-ic-bg);border:1px solid var(--cg-ic-edge);color:var(--cg-accent)}
.contact-glass-ic .ico{width:18px;height:18px}
.contact-glass-item{display:grid;gap:1px;padding-top:1px;font-size:15px;line-height:1.55;color:var(--cg-fg)}
.contact-glass-label{font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--cg-fg-2)}
.contact-glass-item a:not(.btn){justify-self:start;color:var(--cg-fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--cg-ic-edge);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .25s ease}
@media (hover:hover){.contact-glass-item a:not(.btn):hover{text-decoration-color:currentColor}}
.contact-glass-actions{display:grid;gap:10px;padding:14px 26px 26px}
.contact-glass-actions .btn{width:100%}
.contact-glass--light{
  --cg-bg:color-mix(in srgb,var(--card) 62%,transparent);
  --cg-edge:color-mix(in srgb,var(--card) 90%,transparent);
  --cg-polish:var(--card);
  --cg-head:rgba(var(--shadow-rgb),.04);
  --cg-fg:var(--ink);
  --cg-fg-2:var(--ink-2);
  --cg-accent:var(--accent-3);
  --cg-ic-bg:rgba(var(--shadow-rgb),.06);
  --cg-ic-edge:var(--line-blue);
  --cg-shine:color-mix(in srgb,var(--card) 85%,transparent);
  --cg-sweep:var(--card);
  --cg-shadow:var(--shadow-md);
  --focus:var(--accent-2);
}
.contact-glass--light .contact-glass-head{border-bottom-color:var(--line)}
.contact-glass--light .contact-glass-ic{color:var(--accent-2)}
@media (max-width:479px){
  .contact-glass-head{padding:20px 20px 18px}
  .contact-glass .contact-glass-list{padding:20px 20px 6px}
  .contact-glass-actions{padding:14px 20px 22px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .contact-glass{background:color-mix(in srgb,var(--dark) 82%,transparent)}
  .contact-glass--light{background:color-mix(in srgb,var(--card) 94%,transparent)}
}
/* Fecho de conversão das landing pages (d12/d13): texto à esquerda, card à direita */
.contact-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(32px,calc(5vw / var(--z,1)),80px)}
.contact-split > :last-child{justify-self:end;width:100%;max-width:440px}
.contact-split .sec-head{margin-bottom:0}
@media (max-width:1099px){
  .contact-split{grid-template-columns:minmax(0,1fr)}
  .contact-split > :last-child{justify-self:start}
}


/* ==========================================================================
   12.32 .invite · convite final centralizado
   Porte do "Call to Action" (@felipemenezes098, 21st id 18475), no espírito do .convite da
   referência (d12): fio que desce da seção anterior, anéis finos desenhados uma vez, frase
   grande com a 2ª parte em itálico, texto, botão e a linha de fatos. Claro (--bg-2) ou
   .invite--dark (petróleo). No máximo um por página; só frases do briefing.
   ========================================================================== */
.invite{
  --section-bg:var(--bg-2);
  --invite-ring:var(--line-blue);
  --invite-glow:rgba(var(--line-rgb),.2);
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  background:var(--bg-2);text-align:center;
}
.invite-thread{position:absolute;top:0;left:50%;width:1px;height:clamp(44px,calc(6vw / var(--z,1)),84px);margin-left:-.5px;background:linear-gradient(to bottom,transparent,var(--invite-ring));transform-origin:50% 0;pointer-events:none}
.invite-deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.invite-deco::before{content:"";position:absolute;left:50%;top:54%;width:min(900px,calc(120vw / var(--z,1)));aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,var(--invite-glow),transparent 72%)}
.invite-rings{position:absolute;left:50%;top:54%;width:min(860px,calc(128vw / var(--z,1)));aspect-ratio:1;translate:-50% -50%;color:var(--invite-ring);opacity:.38;overflow:visible}
.invite-rings circle{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.invite-rings circle:last-child{stroke-dasharray:.004 .012}
.invite-inner{position:relative;display:grid;justify-items:center;gap:22px;max-width:880px;margin-inline:auto}
.invite .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;flex:none}
.invite-title{font-size:clamp(32px,calc(4.4vw / var(--z,1)),58px);line-height:1.06;max-width:24ch}
.invite-text{max-width:60ch;margin-inline:auto;font-size:clamp(16px,calc(1.25vw / var(--z,1)),18px);line-height:1.7;color:var(--ink-2)}
.invite-actions{display:grid;justify-items:center;gap:18px;margin-top:10px}
.invite .invite-facts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:11px;font-weight:600;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.invite-facts li{display:inline-flex;align-items:center;gap:14px}
.invite-facts li + li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}
.invite--dark{
  --section-bg:var(--dark-2);
  --invite-ring:rgba(var(--line-rgb),.6);
  --invite-glow:rgba(var(--line-rgb),.18);
  background:var(--grain-tile) 0 0/160px 160px, var(--petrol);
  background-blend-mode:overlay,normal;
}
.invite--dark .invite-rings{opacity:.26}
.invite--dark .invite-facts li + li::before{background:var(--accent-light)}
@media (max-width:767px){
  .invite-inner{gap:18px}
  .invite-rings,.invite-deco::before{top:50%}
  .invite .invite-facts{flex-direction:column;gap:6px}
  .invite-facts li + li::before{display:none}
}


/* ==========================================================================
   12.33 .channel-cards · Instagram e YouTube em dois cards grandes com capa
   Porte do "Glass Blog Card" (moumensoliman, 21st id 10598) + "Reveal on hover" (youcefbnm,
   id 1816). Capa dessaturada que ganha cor no hover/foco, ícone e seta de vidro, painel de
   vidro sempre visível. Nada de posts, seguidores ou curtidas.
   ========================================================================== */
.channel-cards{
  --ch-ratio:4/3;
  --ch-veil:rgba(var(--dark-rgb),.88);
  --ch-glass:rgba(var(--shadow-dark-rgb),.34);
  --ch-glass-line:rgba(255,255,255,.18);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
  margin:0;padding:0;list-style:none;
}
.channel-cards > li{display:flex;min-width:0}
.ch-card{
  position:relative;isolation:isolate;display:block;width:100%;overflow:hidden;
  aspect-ratio:var(--ch-ratio);border-radius:var(--radius);
  background-color:var(--dark);color:var(--on-dark);text-decoration:none;
  box-shadow:var(--shadow-sm);--focus:var(--accent-2);
  transition:box-shadow .45s ease,translate .45s var(--ease-out);
}
.ch-media{position:absolute;inset:-6% 0;z-index:-2;display:block}
.ch-media img{width:100%;height:100%;object-fit:cover;object-position:var(--ch-pos,50% 35%);filter:grayscale(.9) contrast(1.05);transition:filter .7s ease,transform 1.1s var(--ease-out)}
.ch-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--ch-veil) 0%,rgba(var(--dark-rgb),.42) 48%,rgba(var(--dark-rgb),.16) 100%);transition:opacity .6s ease}
.ch-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain-tile) 0 0/160px 160px;mix-blend-mode:overlay;opacity:.35}
.ch-top{position:absolute;inset:clamp(18px,calc(2.2vw / var(--z,1)),26px) clamp(18px,calc(2.2vw / var(--z,1)),26px) auto;display:flex;align-items:flex-start;justify-content:space-between}
.ch-icon,.ch-go{display:grid;place-items:center;flex:none;border-radius:50%;border:1px solid var(--ch-glass-line);background:var(--ch-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ch-icon{width:56px;height:56px}
.ch-icon .ico{width:26px;height:26px}
.ch-go{width:44px;height:44px;transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.ch-go .ico{width:18px;height:18px;stroke-width:2;transition:transform .4s var(--ease-out)}
.ch-panel{position:absolute;inset:auto clamp(14px,calc(1.8vw / var(--z,1)),22px) clamp(14px,calc(1.8vw / var(--z,1)),22px);display:grid;gap:4px;padding:clamp(16px,calc(1.8vw / var(--z,1)),22px) clamp(18px,calc(2vw / var(--z,1)),26px);border:1px solid var(--ch-glass-line);border-radius:var(--r-md);background:var(--ch-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:translate .5s var(--ease-out),border-color .4s ease}
.ch-name{font-size:clamp(24px,calc(2.5vw / var(--z,1)),34px);font-weight:600;line-height:1.05;letter-spacing:-.03em;color:var(--on-dark)}
.ch-handle{font-size:14px;font-weight:500;line-height:1.5;color:var(--on-dark-2);overflow-wrap:anywhere}
@media (hover:hover){.ch-card:hover{box-shadow:var(--shadow-md);translate:0 -4px}}
.ch-card:is(:hover,:focus-visible) .ch-media img{filter:none;transform:scale(1.06)}
.ch-card:is(:hover,:focus-visible)::before{opacity:.85}
.ch-card:is(:hover,:focus-visible) .ch-panel{translate:0 -6px;border-color:rgba(var(--line-rgb),.7)}
.ch-card:is(:hover,:focus-visible) .ch-go{background:var(--pale-blue);border-color:var(--pale-blue);color:var(--dark)}
.ch-card:is(:hover,:focus-visible) .ch-go .ico{transform:translate(2px,-2px)}
.ch-card:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
@media (max-width:767px){
  .channel-cards{grid-template-columns:minmax(0,1fr);--ch-ratio:5/4}
  .ch-icon{width:48px;height:48px}
  .ch-icon .ico{width:22px;height:22px}
}
@media (max-width:479px){.channel-cards{--ch-ratio:4/5}}


/* ==========================================================================
   12.34 .checkrail · lista que se confere conforme a leitura avança
   Porte do "Task Steps" (ddoemonn, 21st id 23569) + "Scroll animated timeline" (ibrandify,
   id 35029): um trilho fino liga os marcadores; ao rolar, a linha desce e cada item é
   conferido. Só avança (rolar para cima não desmarca). Sem contador, sem confete.
   Use data-anim no <ul> inteiro (não data-anim-stagger). Claro e escuro.
   ========================================================================== */
.checkrail{
  --mk:30px;
  --cr-fill:linear-gradient(180deg,#5B8DB3,var(--brand));
  --cr-done-bg:rgba(var(--accent-rgb),.14);
  --cr-done-line:var(--accent);
  --cr-done-ink:var(--accent-2);
  --cr-sep:var(--line);
  --cr-pend-line:color-mix(in srgb,var(--line-strong) 55%,transparent);
  --cr-mark-bg:var(--section-bg);
  position:relative;display:grid;margin:0;padding:0;list-style:none;
}
:is(.s-dark,.s-dark-2) .checkrail{
  --cr-fill:linear-gradient(180deg,#5B8DB3,#A9CBE6);
  --cr-done-bg:rgba(var(--accent-rgb),.26);
  --cr-done-line:var(--accent-light);
  --cr-done-ink:var(--accent-light);
  --cr-sep:var(--line-dark);
  --cr-pend-line:rgba(var(--spot-rgb),.42);
  --cr-mark-bg:color-mix(in srgb,var(--dark) 70%,transparent);
}
.checkrail::before,.checkrail::after{content:"";position:absolute;left:calc(var(--mk) / 2 - 1px);width:2px;border-radius:2px;top:var(--cr-top,calc(14px + var(--mk) / 2));bottom:var(--cr-bottom,calc(14px + var(--mk) / 2))}
.checkrail::before{background:rgba(var(--line-rgb),.4)}
.checkrail::after{background:var(--cr-fill);transform-origin:50% 0;transform:scaleY(var(--p,1));transition:transform .5s var(--ease-out)}
.checkrail-item{position:relative;display:grid;grid-template-columns:var(--mk) minmax(0,1fr);gap:0 var(--cr-gap,18px);align-items:start;padding:14px 0}
.checkrail-item + .checkrail-item::before{content:"";position:absolute;top:0;right:0;left:calc(var(--mk) + var(--cr-gap,18px));height:1px;background:var(--cr-sep)}
.checkrail-text{min-height:var(--mk);display:flex;align-items:center;font-size:16.5px;line-height:1.55;color:var(--ink);transition:color .4s ease}
.checkrail-mark{position:relative;z-index:1;display:grid;place-items:center;width:var(--mk);height:var(--mk);border-radius:50%;background:var(--cr-mark-bg);box-shadow:inset 0 0 0 1.5px var(--cr-done-line);transition:box-shadow .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.checkrail-mark::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cr-done-bg);transition:opacity .4s ease}
.checkrail-dot{position:absolute;width:6px;height:6px;border-radius:2px;background:var(--line-strong);opacity:0;transition:opacity .25s ease}
:is(.s-dark,.s-dark-2) .checkrail-dot{background:var(--on-dark-2)}
.checkrail-mark svg{position:relative;width:14px;height:14px;overflow:visible}
.checkrail-mark path{fill:none;stroke:var(--cr-done-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.02;stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--ease-out) .12s}
.checkrail.is-armed .checkrail-item:not(.is-done) .checkrail-mark{box-shadow:inset 0 0 0 1.5px var(--cr-pend-line);transform:scale(.86)}
.checkrail.is-armed .checkrail-item:not(.is-done) .checkrail-mark::before{opacity:0}
.checkrail.is-armed .checkrail-item:not(.is-done) .checkrail-dot{opacity:1}
.checkrail.is-armed .checkrail-item:not(.is-done) .checkrail-mark path{stroke-dashoffset:1;transition-delay:0s}
.checkrail.is-armed .checkrail-item:not(.is-done) .checkrail-text{color:var(--ink-2)}
.checkrail-label{font-weight:600;color:var(--ink)}
@media (max-width:479px){.checkrail{--mk:28px;--cr-gap:14px}.checkrail-text{font-size:16px}}


/* ==========================================================================
   12.35 .photo-reveal · imagem que entra por persianas (ou cortina) e anda em paralaxe
   Porte do "Shutter Reveal" (dhileepkumargm, 21st id 9326) + "Parallax Strip Slider"
   (hyperiux, id 26866) + "Parallax Image" (pulkitxm, id 20023). As persianas são UM clip-path
   em escada desenhado pelo JS (sem cópias da imagem). Alternativa ao .img-reveal: não use os
   dois na mesma imagem. data-reveal="blinds|curtain|side", data-slats="6", data-from="top",
   data-parallax="40" (px). Legenda editorial opcional (<figcaption>).
   ========================================================================== */
.photo-reveal{--pr-par:0px;display:grid;gap:14px;margin:0}
.photo-reveal-frame{
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:var(--ratio,4/5);border-radius:var(--radius);
  background-color:var(--placeholder);
  background-image:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(#000,#000);
}
.photo-reveal-inner{position:absolute;left:0;right:0;top:calc(-1 * var(--pr-par));bottom:calc(-1 * var(--pr-par))}
.photo-reveal-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pr-pos,50% 50%)}
.photo-reveal figcaption{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.photo-reveal figcaption::before{content:"";flex:none;width:28px;height:1px;background:var(--accent)}
.photo-reveal--flat .photo-reveal-frame{border-radius:0}


/* ==========================================================================
   13. FAQ de vidro sobre o escuro (.faq-glass) · mesmo design nas 4 páginas
   Porte do "Liquid Glass Accordion" (@obaidqatan, 21st id 32321) + "Interactive Accordion"
   (@jatin-yadav05, id 9602) + "Two-Column FAQ" (@ln-dev7, id 26910), como d14.
   Fundo petróleo (padrão, home) ou .faq-glass--navy (landing pages, cujo "Por que escolher"
   acima é petróleo). Sem JS todas abertas; com JS uma por vez, setas/Home/End, Ctrl+F abre
   (hidden=until-found) e #id abre a pergunta.
   ========================================================================== */
.faq-glass{
  --section-bg:var(--dark-2);
  --fg-glass:color-mix(in srgb,var(--on-dark) 6%,transparent);
  --fg-glass-hover:color-mix(in srgb,var(--on-dark) 9%,transparent);
  --fg-glass-open:color-mix(in srgb,var(--on-dark) 11%,transparent);
  --fg-edge:var(--line-dark);
  --fg-edge-on:rgba(var(--line-rgb),.55);
  --fg-radius:18px;
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  color:var(--on-dark);
  background:var(--grain-tile) 0 0/160px 160px, var(--petrol);
  background-blend-mode:overlay,normal;
}
.faq-glass--navy{--section-bg:var(--dark);background:var(--grain-tile) 0 0/160px 160px, var(--dark);background-blend-mode:overlay,normal}
.faq-glass-light{
  position:absolute;inset:-12% -6%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 34% at 14% 22%,rgba(var(--line-rgb),.16),transparent 72%),
    radial-gradient(34% 30% at 88% 78%,rgba(var(--line-rgb),.12),transparent 72%),
    radial-gradient(30% 26% at 70% 8%,rgba(var(--shadow-rgb),.55),transparent 70%);
}
.faq-glass-list{display:grid;gap:12px;max-width:880px;margin-inline:auto}
.faq-glass-item{
  position:relative;border-radius:var(--fg-radius);
  background:var(--fg-glass);border:1px solid var(--fg-edge);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-dark) 9%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  transition:background-color .35s ease,border-color .35s ease;
}
.faq-glass-item::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:1.5px;border-radius:2px;background:rgba(var(--line-rgb),.9);opacity:.75;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-flex)}
.faq-glass-item:not(.is-closed){background:var(--fg-glass-open);border-color:var(--fg-edge-on)}
.faq-glass-item:not(.is-closed)::after{transform:scaleX(1)}
@media (hover:hover){
  .faq-glass-item.is-closed:hover{background:var(--fg-glass-hover);border-color:rgba(var(--line-rgb),.4)}
  .faq-glass-item.is-closed:hover::after{transform:scaleX(.3)}
}
.faq-glass-h{margin:0;font:inherit;letter-spacing:normal;color:inherit}
.faq-glass-q{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
  width:100%;padding:18px 20px 18px 18px;border:0;border-radius:var(--fg-radius);background:none;text-align:left;
  font-size:clamp(16.5px,calc(1.35vw / var(--z,1)),19px);font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.faq-glass-q:focus-visible{outline:3px solid var(--accent-light);outline-offset:3px}
.faq-glass-num{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:40px;height:40px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);font-variant-numeric:tabular-nums;transition:color .3s ease}
.faq-glass-num::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--accent-light);opacity:0;transform:scale(0);transition:transform .4s cubic-bezier(.34,1.2,.64,1),opacity .3s ease}
.faq-glass-title{text-wrap:pretty;transition:transform .4s var(--ease-flex)}
.faq-glass-icon{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(var(--line-rgb),.6);transition:transform .45s var(--ease-flex),background-color .3s ease,border-color .3s ease}
.faq-glass-icon::before,.faq-glass-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;border-radius:2px;background:var(--accent-light);transform:translate(-50%,-50%);transition:background-color .3s ease}
.faq-glass-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-glass-item:not(.is-closed) .faq-glass-num{color:var(--dark)}
.faq-glass-item:not(.is-closed) .faq-glass-num::before{opacity:1;transform:scale(1)}
.faq-glass-item:not(.is-closed) .faq-glass-title{transform:translateX(4px)}
.faq-glass-item:not(.is-closed) .faq-glass-icon{transform:rotate(45deg);background:var(--accent-light);border-color:var(--accent-light)}
.faq-glass-item:not(.is-closed) .faq-glass-icon::before,
.faq-glass-item:not(.is-closed) .faq-glass-icon::after{background:var(--dark)}
@media (hover:hover){
  .faq-glass-item.is-closed .faq-glass-q:hover .faq-glass-num::before{opacity:.14;transform:scale(.85)}
  .faq-glass-item.is-closed .faq-glass-q:hover .faq-glass-title{transform:translateX(4px)}
  .faq-glass-item.is-closed .faq-glass-q:hover .faq-glass-icon{border-color:rgba(var(--line-rgb),.95)}
}
.faq-glass-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease-flex)}
.faq-glass-a-inner{overflow:hidden;min-height:0}
.faq-glass-a-inner > *{margin:0;padding:0 22px 22px 76px;max-width:none;font-size:16px;line-height:1.7;color:var(--ink-2);transition:opacity .3s ease .1s,translate .45s var(--ease-flex)}
.faq-glass-a-inner > p{max-width:calc(68ch + 98px)}
.faq-glass-item.is-closed .faq-glass-a{grid-template-rows:0fr}
.faq-glass-item.is-closed .faq-glass-a-inner > *{opacity:0;translate:0 -8px;transition:opacity .2s ease,translate .45s var(--ease-flex)}
.faq-glass-list:not(.has-until-found) .faq-glass-item.is-closed .faq-glass-a{visibility:hidden;transition:grid-template-rows .45s var(--ease-flex),visibility 0s linear .45s}
.faq-glass-a-inner[hidden="until-found"]{display:block!important}
.faq-glass-list.is-instant :is(*,*::before,*::after){transition:none!important}
.faq-glass--plain .faq-glass-num{display:none}
.faq-glass--plain .faq-glass-q{grid-template-columns:minmax(0,1fr) auto;padding-left:22px}
.faq-glass--plain .faq-glass-a-inner > *{padding-left:22px}
.faq-glass-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin-top:clamp(28px,calc(4vw / var(--z,1)),44px)}
.faq-glass-foot p{font-size:15px;color:var(--ink-2);max-width:none}
/* Variante em duas colunas: cabeçalho fixo à esquerda (pode levar o .contact-glass) */
.faq-glass--split .faq-glass-wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start;gap:clamp(32px,calc(6vw / var(--z,1)),88px)}
.faq-glass--split .faq-glass-aside{position:sticky;top:calc(var(--header-h) + 32px);display:grid;gap:24px}
.faq-glass--split .sec-head{margin-bottom:0}
.faq-glass--split .faq-glass-list{max-width:none;margin:0}
@media (max-width:1099px){
  .faq-glass--split .faq-glass-wrap{grid-template-columns:minmax(0,1fr)}
  .faq-glass--split .faq-glass-aside{position:static}
}
@media (max-width:767px){
  .faq-glass-q{gap:14px;padding:16px 16px 16px 14px}
  .faq-glass-a-inner > *{padding:0 18px 20px 68px;font-size:15.5px}
}
@media (max-width:479px){
  .faq-glass-q{gap:12px}
  .faq-glass-num{width:34px;height:34px;font-size:12px}
  .faq-glass-icon{width:32px;height:32px}
  .faq-glass-a-inner > *{padding:0 16px 18px}
  .faq-glass-item::after{left:16px;right:16px}
}


/* ==========================================================================
   14. Rodapé azul-escuro com mapa (.footer-light; o nome da classe ficou) · mesmo nas 4 páginas
   Feedback 2: degradê azul → azul mais escuro, texto claro, logo do cliente e o mapa dentro.
   Porte do "Footer with Minimal Outline" (@scrollxui, 21st id 29772) + "Agency Footer"
   (@shadcnspace, id 21474) + "Expand Map" (@jatin-yadav05, id 9635), como d15: fundo claro,
   contato com ícones em círculo, mapa em largura total (imagem estática + link, sem iframe:
   LGPD e desempenho) e o nome gigante só com contorno, cortado na base.
   Enquanto assets/img/shared/mapa.jpg não existir, aparece um desenho abstrato de ruas.
   ========================================================================== */
.footer-light{
  --section-bg:var(--deep);
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  padding-top:clamp(64px,calc(7vw / var(--z,1)),104px);
  background:var(--grain-tile) 0 0/160px 160px,linear-gradient(170deg,var(--dark) 0%,var(--dark-2) 45%,var(--deep) 100%);background-blend-mode:overlay,normal;
  color:var(--ink-2);font-size:15px;line-height:1.65;
}
.footer-light-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,calc(5vw / var(--z,1)),72px)}
.footer-light-brand{display:grid;align-content:start;justify-items:start;gap:14px}
.footer-light-logo{display:block;width:auto;height:48px;max-width:100%;image-rendering:auto}   /* TODO: SVG do cliente */
.footer-light-name{font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--on-dark)}
.footer-light-name span{display:block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-light)}
.footer-light-creds{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-variant-numeric:tabular-nums}
.footer-light-about{max-width:40ch;font-size:14.5px}
.footer-light-col{display:grid;align-content:start;gap:16px}
.footer-light-title{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-light)}
.footer-light-title::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.footer-light .footer-light-links{display:grid;gap:4px}
.footer-light-links a{display:inline-flex;align-items:center;gap:8px;padding:5px 0;color:var(--ink-2);transition:color .25s ease}
.footer-light-links a::after{content:"";width:0;height:1px;background:var(--accent-light);transition:width .35s var(--ease-out)}
.footer-light-links a[aria-current]{color:var(--on-dark);font-weight:600}
@media (hover:hover){
  .footer-light-links a:hover{color:var(--on-dark)}
  .footer-light-links a:hover::after{width:18px}
}
.footer-light .footer-light-contact{display:grid;gap:12px}
.footer-light-contact :is(a,.footer-light-row){display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:12px;color:var(--ink-2);transition:color .25s ease}
.footer-light-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(var(--line-rgb),.08);border:1px solid var(--line-dark);color:var(--accent-light);transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.footer-light-ic .ico{width:17px;height:17px}
.footer-light-contact small{display:block;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.footer-light-contact b{font-weight:600;color:var(--ink)}
@media (hover:hover){
  .footer-light-contact a:not([aria-disabled="true"]):hover{color:var(--on-dark)}
  .footer-light-contact a:not([aria-disabled="true"]):hover .footer-light-ic{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
}
.footer-light-map{position:relative;isolation:isolate;overflow:hidden;height:clamp(260px,calc(30vw / var(--z,1)),400px);margin:clamp(40px,calc(5vw / var(--z,1)),64px) 0 0;border-radius:20px;border:1px solid var(--line-dark);background:var(--dark-2);box-shadow:0 24px 50px -28px rgba(var(--shadow-dark-rgb),.8)}
.footer-light-map-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.footer-light-streets{position:absolute;inset:0;width:100%;height:100%;display:block}
.footer-light-streets .fl-block{fill:rgba(var(--line-rgb),.07);stroke:rgba(var(--line-rgb),.14);stroke-width:1}
.footer-light-streets .fl-park{fill:rgba(var(--line-rgb),.12);stroke:none}
.footer-light-streets .fl-road{fill:none;stroke:#0E3A58;stroke-linecap:round;stroke-width:16}
.footer-light-streets .fl-road--main{stroke-width:24}
.footer-light-streets .fl-road--minor{stroke-width:8}
.footer-light-streets .fl-road-edge{fill:none;stroke:var(--line);stroke-linecap:round;stroke-width:26}
.footer-light-streets .fl-road-edge--main{stroke-width:34}
.footer-light-streets .fl-road-edge--minor{stroke-width:12}
.footer-light-map::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 80% at 50% 50%,transparent 55%,color-mix(in srgb,var(--deep) 70%,transparent))}
.footer-light-pin{position:absolute;left:50%;top:50%;z-index:2;width:44px;height:44px;margin:-44px 0 0 -22px;color:var(--on-dark);filter:drop-shadow(0 8px 14px rgba(var(--shadow-dark-rgb),.5))}
.footer-light-pin svg{width:100%;height:100%;display:block}
.footer-light-pin .fl-pin-dot{fill:var(--accent-light)}
.footer-light-pin::before{content:"";position:absolute;left:50%;bottom:-6px;width:36px;height:12px;margin-left:-18px;border-radius:50%;background:rgba(var(--line-rgb),.35);opacity:0}
.footer-light-map.is-pinned .footer-light-pin::before{animation:fl-pulse 1.8s ease-out .2s 2}
@keyframes fl-pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.footer-light-map-img:not(.is-missing) ~ .footer-light-pin{display:none}
.footer-light-map-cap{position:absolute;left:16px;top:16px;z-index:3;display:grid;gap:2px;max-width:calc(100% - 32px);padding:12px 16px;border-radius:14px;background:rgba(0,31,51,.82);border:1px solid var(--line-dark);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.footer-light-map-cap b{font-size:14.5px;font-weight:600;color:var(--on-dark)}
.footer-light-map-btn{position:absolute;right:16px;bottom:16px;z-index:3}
.footer-light-map-btn .ico{width:16px;height:16px}
.footer-light-legal{display:grid;gap:8px;margin-top:clamp(36px,calc(4vw / var(--z,1)),52px);padding-block:26px 30px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink-2)}
.footer-light-legal p{max-width:none}
.footer-light-legal-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.footer-light-legal a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.footer-light-legal a:hover{color:var(--on-dark)}}
.footer-light-mark{
  margin:0;max-width:none;padding-inline:var(--gutter);
  font-size:clamp(40px,calc(11.8vw / var(--z,1)),232px);font-weight:600;line-height:.8;letter-spacing:-.045em;
  text-align:center;white-space:nowrap;color:rgba(var(--line-rgb),.06);
  margin-bottom:-.12em;user-select:none;pointer-events:none;
}
@supports ((-webkit-text-stroke:1px currentColor) or (text-stroke:1px currentColor)){
  .footer-light-mark{color:transparent;-webkit-text-stroke:1.2px rgba(var(--line-rgb),.22)}
}
@media (max-width:1099px){
  .footer-light-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-light-brand{grid-column:1/-1}
}
@media (max-width:767px){
  .footer-light-legal{padding-bottom:calc(30px + 40px + env(safe-area-inset-bottom,0px))}   /* o FAB não cobre CRM/RQE */
  .footer-light-map{height:340px}
  .footer-light-pin{top:60%}
  .footer-light-map-cap{left:12px;top:12px}
  .footer-light-map-btn{right:12px;bottom:12px}
}
@media (max-width:479px){
  .footer-light-grid{grid-template-columns:minmax(0,1fr)}
  .footer-light-map-btn{left:12px;right:12px;white-space:nowrap}
  .footer-light-mark{-webkit-text-stroke-width:1px}
}


/* ==========================================================================
   15. Botão flutuante de WhatsApp em pílula (.fab-pill)
   Porte do "Expand Button" (@balick, 21st id 35286) + "Expanding Icon Button" (@sean0205,
   id 29856): círculo de 56px que abre uma pílula para a esquerda com o texto (grid 0fr → 1fr)
   no hover/foco; no toque, abre uma vez por 3,2s quando aparece. Pulso 3 vezes e para.
   Escondido enquanto a hero aparece (desktop); no celular, depois de 200px de rolagem.
   ========================================================================== */
.fab-pill{
  position:fixed;z-index:var(--z-fab);
  right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  transition:opacity .35s var(--ease-std),transform .35s var(--ease-std),visibility 0s;
}
html.js .fab-pill:not(.is-visible){opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .3s var(--ease-std),transform .3s var(--ease-std),visibility 0s linear .3s}
.fab-pill-btn{display:inline-flex;align-items:center;flex-direction:row-reverse;height:56px;border-radius:var(--r-pill);background:var(--wa-2);color:var(--on-dark);box-shadow:0 12px 28px rgba(var(--shadow-rgb),.3);-webkit-tap-highlight-color:transparent;transition:box-shadow .3s ease}
.fab-pill-icon{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--wa)}
.fab-pill-icon .ico{width:28px;height:28px}
.fab-pill-icon::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--wa);opacity:0;pointer-events:none}
.fab-pill.is-visible:not(.pulse-done) .fab-pill-icon::before{animation:fab-pill-pulse 2.4s ease-out .6s 3}
.fab-pill.is-open .fab-pill-icon::before{animation-play-state:paused}
@keyframes fab-pill-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.6);opacity:0}}
.fab-pill-label{display:grid;grid-template-columns:0fr;transition:grid-template-columns .45s var(--ease-out)}
.fab-pill-label > span{min-width:0;overflow:hidden;white-space:nowrap;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.fab-pill-label-in{display:block;padding:0 6px 0 24px;opacity:0;transition:opacity .25s ease}
.fab-pill.is-open .fab-pill-label,.fab-pill-btn:focus-visible .fab-pill-label{grid-template-columns:1fr}
.fab-pill.is-open .fab-pill-label-in,.fab-pill-btn:focus-visible .fab-pill-label-in{opacity:1;transition-delay:.1s}
@media (hover:hover){
  .fab-pill-btn:hover .fab-pill-label{grid-template-columns:1fr}
  .fab-pill-btn:hover .fab-pill-label-in{opacity:1;transition-delay:.1s}
  .fab-pill-btn:hover{box-shadow:0 16px 34px rgba(var(--shadow-rgb),.36)}
}
.fab-pill-btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}


/* ==========================================================================
   16. Estados iniciais das animações (só com html.js) e trava
   O CSS esconde com visibility:hidden; o GSAP revela com autoAlpha. Os componentes com
   entrada própria são escondidos só pelo JS (gsap.set) e só abaixo da dobra.
   Se o GSAP não carregar, o site.js remove .js. Se nada rodar (ou o ticker do GSAP não andar)
   em 3s com a aba visível, a trava põe .anim-failsafe e tudo aparece pronto.
   ========================================================================== */
html.js :is([data-anim],[data-anim-stagger] > *,[data-lines],.sec-head > *,.hero-eyebrow,.hero-id,.hero-lead,.hero-actions,.hero-foot){visibility:hidden}
html.js .hero-media img{transform:scale(1.06)}
html.js .hero-rule{transform:scaleX(0)}
html.js .img-reveal{clip-path:inset(12% 12% round var(--radius))}
html.js .img-reveal > img{transform:scale(1.12)}
html.js .ribbons .ribbon{clip-path:inset(0 100% 0 0)}
html.js .monogram path{stroke-dashoffset:1.05}
html.js .nav-morph:not(.is-ready) .nav-morph-shell{visibility:hidden}
@media (max-width:767px){html.js .hero-media img{transform:scale(1.04)}}

/* Máscara das linhas do SplitText (folga para acentos, descendentes e itálico) */
.ln-mask{padding:.12em .08em .14em 0;margin:-.12em -.08em -.14em 0}

/* Trava: tudo aparece pronto, inclusive o que o JS escondeu por inline-style */
html.anim-failsafe :is([data-anim],[data-anim-stagger] > *,[data-lines],.sec-head > *,.hero-eyebrow,.hero-id,.hero-lead,.hero-actions,.hero-foot,
  .nav-morph-shell,.nav-morph-shell *,.img-card,.img-card-tag,.img-card-body,.pillar-cards > li,.showcase-item,.journey-step,
  .ch-panel,.ch-icon,.ch-go,.rb-row,.footer-light-pin,.fl-block,.fl-park,.s-photo-bg-layer--deep){visibility:visible!important;opacity:1!important}
html.anim-failsafe :is(.hero-media img,.img-reveal > img,.hero-rule,[data-lines] .ln,.sec-head .ln,.photo-split-frame img,.img-card-img,.showcase-media img,.pillar-orb,.pstrip-item img,.ch-media,.photo-reveal-inner img){transform:none!important}
html.anim-failsafe :is(.img-reveal,.ribbons .ribbon,.photo-split-frame,.img-card,.showcase-media,.pstrip-viewport,.ch-card,.photo-reveal-frame){clip-path:none!important}
html.anim-failsafe :is(.monogram path,.signature path,.chk path,.glass-check path,.pillar-orb *,.fl-road,.fl-road-edge,.invite-rings circle){stroke-dashoffset:0!important}
html.anim-failsafe .glass-check{transform:none!important}
html.anim-failsafe .invite-thread{transform:none!important}
/* Se a animação falhar no meio (o site.js tira .js), as linhas já divididas aparecem no lugar */
html:not(.js) :is([data-lines],.sec-head) .ln{transform:none!important}


/* ==========================================================================
   17. Movimento reduzido: nenhum transform de entrada, nenhum loop, nenhum Ken Burns
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important;
  }
  html.js :is([data-anim],[data-anim-stagger] > *,[data-lines],.sec-head > *,.hero-eyebrow,.hero-id,.hero-lead,.hero-actions,.hero-foot){visibility:visible}
  html.js .hero-media img,html.js .img-reveal > img{transform:none}
  html.js .hero-rule{transform:none}
  html.js .img-reveal{clip-path:none}
  html.js .ribbons .ribbon{clip-path:none}
  html.js .monogram path{stroke-dashoffset:0}
  html.js .nav-morph .nav-morph-shell{visibility:visible}
  .scroll-cue i::after,.check-list.on-dark li::after,.fab-pill-icon::before,.rb-skel-av,.rb-skel-line,.footer-light-map.is-pinned .footer-light-pin::before{animation:none!important}
  .scroll-cue i::after{transform:none}
  .check-list.on-dark li::after,.glass-item::after,.btn::after{display:none}
  .btn:hover,.cards-lift .card:hover,.check-list.on-dark li:hover,.glass-item:hover,.pillar-card:hover,.journey-card:hover,.ch-card:hover,.contact-glass:hover,.rb-badge:hover{translate:none}
  .img-card:is(:hover,:focus-within) .img-card-img,.ch-card:is(:hover,:focus-visible) .ch-media img{transform:none;scale:none}
  .img-cards:has(.img-card:is(:hover,:focus-within)) .img-card:not(:hover,:focus-within){scale:none}
  .showcase-item.is-active .showcase-title,.showcase-trigger:hover .showcase-title{translate:none}
  .faq-glass-title,.faq-glass-item:not(.is-closed) .faq-glass-title,.faq-glass-item.is-closed .faq-glass-q:hover .faq-glass-title{transform:none}
  .faq-glass-a-inner > *,.faq-glass-item.is-closed .faq-glass-a-inner > *{translate:none}
  .menu-curtain-link:hover .menu-curtain-char,.menu-curtain-link:focus-visible .menu-curtain-char{transform:none}
  .nav-morph-shell::before{transform:none}
  .glass-check path,.checkrail-mark path{stroke-dashoffset:0!important}
  .manifesto-w{opacity:1!important}
  .contact-glass::after{display:none}
}


/* ==========================================================================
   18. Impressão
   ========================================================================== */
@media print{
  :root{--bg:#fff}
  :is(.s-dark,.s-dark-2,.hero,.menu-curtain,.faq-glass,.invite--dark,.reviews-band,.s-photo-bg,.footer-light){
    --ink:#0F2A3A; --ink-2:#4A6070; --heading:#004063; --em:#2A7D70; --eyebrow:#236B60; --link:#236B60;
    background:none!important;color:var(--ink);
  }
  .nav-morph,.menu-curtain,.ribbons,.fab-pill,.scroll-cue,.hero-media,.hero-scrim,.hero-grain,.hero-rule,.hero-edgeblur,.hero-exit-veil,.skip-link,
  .monogram,.journey-blobs,.rb-glow,.rb-mark,.rb-skeleton,.rb-corner,.rb-row,.photo-strip,.s-photo-bg-media,.faq-glass-light,
  .invite-deco,.invite-thread,.footer-light-map,.footer-light-mark,.photo-split-blur{display:none!important}
  body{background:#fff}
  .hero{min-height:0;background:none}
  .hero-grid{display:block;padding:0}
  .hero-grid > *{margin-bottom:12px}
  section{padding-block:28px}
  :is([data-anim],[data-anim-stagger] > *,[data-lines],.sec-head > *,.hero-eyebrow,.hero-id,.hero-lead,.hero-actions,.hero-foot){visibility:visible!important;opacity:1!important;transform:none!important}
  .img-reveal{clip-path:none!important}
  .photo-split{display:block;min-height:0}
  .photo-split-media{display:none}
  .photo-split-grid{display:block;margin:0}
  .photo-split-body{max-width:none;padding:0}
  .showcase{grid-template-columns:minmax(0,1fr)}
  .showcase-media{display:none}
  .showcase .showcase-item .showcase-panel{grid-template-rows:1fr!important;visibility:visible!important}
  .faq-glass-item.is-closed .faq-glass-a{grid-template-rows:1fr;visibility:visible}
  .faq-glass-item.is-closed .faq-glass-a-inner > *{opacity:1;translate:none}
  .sticky-story-media,.stack-step{position:static}
  .card,.spot-card,.check-list li,.stack-card,.pillar-card,.journey-card,.glass-item,.img-card,.contact-glass{box-shadow:none;break-inside:avoid;-webkit-backdrop-filter:none;backdrop-filter:none}
  .img-card{min-height:0}
  .img-card-body{opacity:1!important;translate:none!important}
  .img-card-tag{display:none}
  .manifesto-w{opacity:1!important}
  .footer-light{background:none}
}

/* ==========================================================================
   Faixa com o nome SEM fundo próprio (pedido do cliente, 15/10)
   - Logo depois da hero: corre POR CIMA da base da própria hero (sobre a foto).
   - Nas outras posições (antes do FAQ): cruza a divisa entre as duas seções.
   A área transparente não bloqueia cliques; só a fita recebe o mouse (pausa no hover).
   ========================================================================== */
.ribbons{--ribbon-h:92px;background:transparent;margin-block:calc(var(--ribbon-h) / -2);pointer-events:none}
.ribbons--petrol{background:transparent}
.ribbons .ribbon{pointer-events:auto}
.hero + .ribbons{margin-top:calc(-1 * var(--ribbon-h));margin-bottom:0}
/* espaço na base da hero para o rodapé dela (régua, "role para conhecer", fatos) não ficar sob a fita */
.hero:has(+ .ribbons) .hero-grid{padding-bottom:calc(clamp(20px,calc(3.2svh / var(--z,1)),36px) + var(--ribbon-h,92px))}
@media (max-width:767px){
  .ribbons{--ribbon-h:60px}
  .hero:has(+ .ribbons) .hero-grid{padding-bottom:calc(28px + 60px)}
}
/* A fita ocupa a base da hero: a hero ganha a altura da fita para o conteúdo não ficar espremido */
.hero:has(+ .ribbons){min-height:calc(clamp(540px,calc(calc(100svh / var(--z,1)) - var(--header-h) - 48px),860px) + 92px)}
@media (max-width:1099px){
  .hero:has(+ .ribbons){min-height:calc(clamp(540px,calc(82svh / var(--z,1)),760px) + 92px)}
}
@media (max-width:767px){
  .hero:has(+ .ribbons){min-height:0}
}

/* Contraste do texto da hero sobre fotos claras (feedback do cliente, 15/10):
   texto de apoio em branco com sombra difusa + "nuvem" azul translúcida atrás do bloco */
.hero-lead{color:#fff;text-shadow:0 1px 2px rgba(0,20,35,.45),0 0 22px rgba(0,20,35,.6)}
.hero-link,.hero-facts,.hero-eyebrow,.hero-id{text-shadow:0 1px 2px rgba(0,20,35,.5),0 0 18px rgba(0,20,35,.55)}
.hero-side{position:relative}
.hero-side::before{
  content:"";position:absolute;inset:-56px -72px -48px -72px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,26,43,.62),rgba(0,26,43,.34) 55%,transparent);
}
.hero-foot{position:relative}
.hero-foot::after{
  content:"";position:absolute;inset:-24px -40px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,26,43,.45),transparent);
}
@media (max-width:767px){.hero-side::before,.hero-foot::after{display:none}}

/* ==========================================================================
   Seções azuis sem "emenda" (cliente, 15/10)
   Todas as seções escuras usam a MESMA cor nas bordas de cima e de baixo (--dark-base);
   a profundidade vem de luzes radiais que não encostam nas bordas. Assim duas seções azuis
   seguidas (ex.: "Por que escolher" + "Avaliações", "Clínica" + FAQ, FAQ + rodapé) parecem
   um bloco contínuo, sem divisória.
   ========================================================================== */
:root{
  --dark-base:#002438;
  --ocean:
    radial-gradient(55% 42% at 78% 50%,rgba(0,74,116,.50),transparent 100%),
    radial-gradient(45% 40% at 14% 52%,rgba(0,14,26,.40),transparent 100%),
    linear-gradient(var(--dark-base),var(--dark-base));
  --petrol:
    radial-gradient(55% 42% at 20% 50%,rgba(0,74,116,.42),transparent 100%),
    radial-gradient(45% 40% at 86% 52%,rgba(0,14,26,.40),transparent 100%),
    linear-gradient(var(--dark-base),var(--dark-base));
}
.s-dark-2{
  background:var(--grain-tile) 0 0/160px 160px,var(--petrol);
  background-blend-mode:overlay,normal;
}
.faq-glass--navy{background:var(--grain-tile) 0 0/160px 160px,var(--ocean);background-blend-mode:overlay,normal}
/* rodapé: mesma base no topo (encosta no FAQ sem emenda) e escurece só no fim da página */
.footer-light{
  background:
    var(--grain-tile) 0 0/160px 160px,
    linear-gradient(180deg,transparent 55%,rgba(0,12,22,.55) 100%),
    var(--petrol);
  background-blend-mode:overlay,normal,normal;
}

/* ==========================================================================
   Cards de imagem (cliente, 15/10): em repouso só o número e o título;
   a descrição e o "Saiba mais" deslizam no hover/foco. No toque: título + "Saiba mais".
   ========================================================================== */
.img-card .img-card-tag{display:none}
.img-card .img-card-body{opacity:1!important;translate:none!important;gap:0}
.img-card .img-card-veil::after{opacity:0}
.img-card-body h3{margin-top:8px}
.img-card-body > p,.img-card-body .img-card-more{
  max-height:0;opacity:0;overflow:hidden;translate:0 10px;margin:0;
  transition:max-height .55s var(--ease-out),opacity .35s ease,translate .5s var(--ease-out),margin .5s var(--ease-out);
}
.img-card:is(:hover,:focus-within) .img-card-veil::after{opacity:1}
.img-card:is(:hover,:focus-within) .img-card-body > p{max-height:16em;opacity:1;translate:none;margin-top:12px}
.img-card:is(:hover,:focus-within) .img-card-body .img-card-more{max-height:2.5em;opacity:1;translate:none;margin-top:16px}
@media (hover:none){
  .img-card-body .img-card-more{max-height:2.5em;opacity:1;translate:none;margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .img-card-body > p,.img-card-body .img-card-more{transition:none}
}

/* Etapas em fundo claro (cliente, 15/10): com o fundo quase branco os cards de vidro sumiam.
   Card branco, borda azul bem leve e sombra azulada embaixo para destacar. */
.journey-host:not(.s-dark):not(.s-dark-2) .journey-card{
  background:#fff;border-color:rgba(0,64,99,.09);
  box-shadow:0 1px 2px rgba(0,43,68,.06),0 20px 40px -18px rgba(0,43,68,.34);
}
@media (hover:hover){
  .journey-host:not(.s-dark):not(.s-dark-2) .journey-card:hover{
    box-shadow:0 2px 4px rgba(0,43,68,.07),0 28px 52px -20px rgba(0,43,68,.42);
  }
}

/* FAQ → rodapé sem "degrau" (cliente, 15/10): as luzes decorativas do FAQ ficavam encostadas
   na borda de baixo e eram cortadas em linha reta. Agora ficam no miolo da seção e somem
   antes das bordas, então o FAQ encosta no rodapé (e na faixa de cima) sem transição visível. */
.faq-glass-light{
  inset:0;
  background:
    radial-gradient(36% 30% at 16% 34%,rgba(var(--line-rgb),.14),transparent 70%),
    radial-gradient(32% 28% at 84% 56%,rgba(var(--line-rgb),.10),transparent 70%);
}

/* Mapa real no rodapé (Google Maps embutido) em tom escuro, para conversar com o azul do rodapé */
.footer-light-map-frame{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;
  filter:invert(.9) hue-rotate(180deg) grayscale(.25) brightness(.95) contrast(.95);
}
.footer-light-map::after{z-index:2}
@media (prefers-reduced-motion:reduce){.footer-light-map-frame{transition:none}}

/* ==========================================================================
   Menu mais moderno (cliente, 15/10): barra azul-escura mantida; links centralizados
   numa cápsula de vidro com uma pílula que desliza até o link do hover e volta para a
   seção atual (assets/js/nav-pill.js).
   ========================================================================== */
@media (min-width:1100px){
  .nav-morph-links{margin-inline:auto}
  .nav-morph-links ul{
    position:relative;isolation:isolate;gap:2px;padding:5px;border-radius:999px;
    background:rgba(255,255,255,.045);border:1px solid rgba(120,170,210,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .nav-morph-links a{
    padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:500;
    color:rgba(255,255,255,.74);transition:color .3s ease;
  }
  .nav-morph-links a::after{display:none}
  .nav-morph-links a:hover,.nav-morph-links a:focus-visible,
  .nav-morph-links a:is([aria-current="location"],[aria-current="page"]){color:#fff}
  .nav-pill{
    position:absolute;z-index:-1;top:5px;left:0;height:calc(100% - 10px);width:0;border-radius:999px;
    background:linear-gradient(180deg,rgba(169,203,230,.20),rgba(169,203,230,.10));
    border:1px solid rgba(169,203,230,.28);box-shadow:0 6px 18px -8px rgba(0,10,20,.6),inset 0 1px 0 rgba(255,255,255,.10);
    opacity:0;pointer-events:none;
    transition:transform .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1),opacity .3s ease;
  }
  .nav-pill.is-on{opacity:1}
  .nav-morph .nav-morph-cta{padding-inline:1.3rem}
}
@media (prefers-reduced-motion:reduce){.nav-pill{transition:opacity .2s ease}}

/* ==========================================================================
   Menu translúcido com blur (cliente, 15/10): sem a barra de progresso; fundo azul
   mais transparente com desfoque forte. A hero passa a começar por trás da barra,
   para o vidro desfocar a foto (o conteúdo da hero desce a altura da barra).
   ========================================================================== */
.nav-morph-progress{display:none}
.nav-morph{
  background:rgba(0,28,46,.52);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border-bottom-color:rgba(120,170,210,.16);
}
.nav-morph:is(.is-floating,.scrolled){background:rgba(0,28,46,.62)}
.hero{margin-top:0}
.hero-grid{padding-top:calc(var(--header-h) + clamp(20px,calc(3.6svh / var(--z,1)),40px))}
.hero:has(+ .ribbons){min-height:calc(clamp(540px,calc(calc(100svh / var(--z,1)) - var(--header-h) - 48px),860px) + 92px + var(--header-h))}
@media (max-width:1099px){
  .hero:has(+ .ribbons){min-height:calc(clamp(540px,calc(82svh / var(--z,1)),760px) + 92px + var(--header-h))}
}
@media (max-width:767px){
  .hero:has(+ .ribbons){min-height:0}
  .hero-grid{padding-top:0}
}

/* ==========================================================================
   Espaçamentos mais enxutos (cliente, 15/10) — todas as seções, menos a hero
   (a hero tem padding próprio e não usa --section-y).
   ========================================================================== */
:root{--section-y:clamp(48px,calc(6vw / var(--z,1)),88px)}
.sec-head{margin-bottom:clamp(26px,calc(3.4vw / var(--z,1)),44px)}
* + .photo-strip{margin-top:clamp(28px,calc(3.4vw / var(--z,1)),44px)}
:where(:not(.split-content,.split-media-body,.photo-split-body,.prose,.sec-head,.s-photo-bg-close,.stack)) > :is(.trio,.sticky-story,.cards-lift,.timeline,.chips,.check-list,.glass-list,.pillar-cards,.img-cards,.journey,.checkrail,.spot-cards,.stack-steps,.showcase) + :is(.callout,.media,.media-band,p){margin-top:clamp(20px,calc(2.8vw / var(--z,1)),32px)}
.footer-light{padding-top:clamp(44px,calc(5vw / var(--z,1)),72px)}
.section-actions{margin-top:clamp(24px,calc(3vw / var(--z,1)),36px)}

/* ==========================================================================
   Cabeçalho em duas colunas que acompanha o grid de baixo (cliente, 15/10):
   título sobre a 1ª coluna, parágrafo sobre a 2ª, alinhados pela base.
   .split-head--media-left usa as mesmas proporções do .showcase--media-left.
   ========================================================================== */
.split-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,calc(5vw / var(--z,1)),80px);align-items:end;margin-bottom:clamp(28px,calc(3.6vw / var(--z,1)),44px)}
.split-head--media-left{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.split-head > .sec-head{margin:0}
.split-head > .lead{margin:0;max-width:52ch}
@media (max-width:899px){.split-head,.split-head--media-left{grid-template-columns:minmax(0,1fr);align-items:start;gap:18px}}

/* Vitrine: o item ativo não desliza (saía do alinhamento) e os títulos ficam mais contidos */
.showcase-title{font-size:clamp(19px,calc(1.6vw / var(--z,1)),24px);line-height:1.2}
.showcase-item.is-active .showcase-title{translate:none}
@media (hover:hover){.showcase-trigger:hover .showcase-title{translate:none}}
/* cabeçalho em duas colunas: o título usa a largura toda da coluna (sem o limite de 22ch) */
.split-head > .sec-head > h2{max-width:none;font-size:clamp(28px,calc(3vw / var(--z,1)),42px)}
/* Rodapé (igual em todas as páginas): mapa e linha legal mais próximos */
.footer-light-map{margin-top:clamp(28px,calc(3.4vw / var(--z,1)),44px);height:clamp(240px,calc(26vw / var(--z,1)),340px)}
.footer-light-legal{margin-top:clamp(24px,calc(2.8vw / var(--z,1)),36px)}

/* Ritmo compacto aplicado à index e à página de preenchimento peniano. */
.page-compact{
  --section-y:clamp(32px,calc(3.2vw / var(--z,1)),48px);
  --space-head:clamp(20px,calc(2vw / var(--z,1)),28px);
  --space-group:clamp(16px,calc(1.6vw / var(--z,1)),24px);
  --space-copy:16px;
  --space-columns:clamp(24px,calc(3vw / var(--z,1)),48px);
}
.page-compact :is(.sec-head,.section-head){gap:14px;margin-bottom:var(--space-head)}
.page-compact :is(.sec-head--flush,.section-head--flush){margin-bottom:0}
.page-compact .channels-head{margin-bottom:0}
.page-compact :is(.photo-split-body,.split-media-body,.split-content,.stack,.contact-split,.split-head,.nl-split-aside,.home-cf-head) > :is(.sec-head,.section-head){margin-bottom:0}
.page-compact :is(.stack,.photo-split-body,.split-media-body,.split-content){gap:var(--space-copy)}
.page-compact :is(.section-actions,.section-foot,.faq-glass-foot,.s-photo-bg-close){margin-top:var(--space-group)}
.page-compact :is(.photo-split-body,.split-media-body,.split-content,.stack) > .section-actions{margin-top:0}
.page-compact .section-actions{gap:12px 16px}
.page-compact .s-photo-bg-close{gap:16px}
.page-compact .split-head{margin-bottom:var(--space-head);gap:var(--space-columns)}
.page-compact :is(.split,.split-media,.contact-split,.showcase,.channels-grid){column-gap:var(--space-columns);row-gap:var(--space-group)}
.page-compact .nl-split{row-gap:var(--space-group)}
.page-compact :where(:not(.split-content,.split-media-body,.photo-split-body,.prose,.sec-head,.s-photo-bg-close,.stack)) > :is(.trio,.sticky-story,.cards-lift,.timeline,.chips,.check-list,.glass-list,.pillar-cards,.img-cards,.journey,.checkrail,.spot-cards,.stack-steps,.showcase) + :is(.callout,.media,.media-band,p){margin-top:var(--space-group)}

/* A altura acompanha o conteúdo, sem reservar uma tela inteira para cada foto. */
.page-compact .photo-split{min-height:0;--ps-h:100%;--ps-h-m:min(calc(96vw / var(--z,1)),calc(60svh / var(--z,1)),560px)}
.page-compact .checkrail-item{padding-block:12px}
.page-compact .showcase-trigger{padding-block:16px}
.page-compact .showcase-panel-body{padding-bottom:20px}
.page-compact .pillar-card{padding:24px}
.page-compact .pillar-orb{margin-bottom:12px}
.page-compact .nl-split .nl-close{padding:18px 20px 18px 64px}
.page-compact .nl-split .nl-close::before{left:18px;top:18px;width:30px;height:30px}
.page-compact .contact-glass-head{padding:18px 20px 16px}
.page-compact .contact-glass .contact-glass-list{padding:16px 20px 4px}
.page-compact .contact-glass-actions{padding:12px 20px 20px}
.page-compact .journey + .section-actions{margin-top:var(--space-group)}
.page-compact .photo-strip{margin-top:var(--space-head)}
.page-compact .tcols{--tcols-h:min(560px,calc(62svh / var(--z,1)));margin-top:var(--space-group)}
.page-compact .faq-glass-q{padding-block:14px}
.page-compact .faq-glass-foot{gap:12px 16px}
.page-compact .footer-light{padding-top:var(--section-y)}
.page-compact .footer-light-map{margin-top:var(--space-head)}
.page-compact .footer-light-legal{margin-top:var(--space-group);padding-top:20px}

/* A hero inclui as reservas do cabeçalho e da fita dentro da própria altura. */
.page-compact .hero:has(+ .ribbons){min-height:clamp(600px,calc(90svh / var(--z,1)),840px)}
.page-compact .hero-grid{padding-top:calc(var(--header-h) + clamp(16px,calc(2svh / var(--z,1)),24px))}
.page-compact .hero:has(+ .ribbons) .hero-grid{padding-bottom:calc(clamp(16px,calc(2svh / var(--z,1)),24px) + 92px)}
.page-compact :is(.hero-rule,.hero-foot){margin-top:16px}
.page-compact .hero-foot{padding-top:12px}
.page-compact .btn.hero-cta{padding-block:8px}
@media (min-width:1100px){
  .page-compact .journey-card{padding-bottom:28px}
}
@media (max-width:1099px){
  .page-compact .hero:has(+ .ribbons){min-height:clamp(580px,calc(88svh / var(--z,1)),760px)}
  .page-compact .photo-split{--ps-overlap:min(clamp(48px,calc(12vw / var(--z,1)),104px),calc(var(--ps-h-m) - 48px))}
  .page-compact .photo-split:is(.s-dark,.s-dark-2){--ps-overlap:min(clamp(96px,calc(30vw / var(--z,1)),240px),calc(var(--ps-h-m) - 48px))}
}
@media (max-width:767px){
  .page-compact{--section-y:28px;--space-head:20px;--space-group:16px}
  .page-compact .hero:has(+ .ribbons){min-height:0}
  .page-compact .hero-grid{padding-top:0}
  .page-compact .hero:has(+ .ribbons) .hero-grid{padding-bottom:80px}
  .page-compact .hero-side{margin-top:14px}
  .page-compact .hero-lead{margin-bottom:14px}
  .page-compact .hero-id{margin-top:16px;padding-top:12px}
  .page-compact .hero-foot{margin-top:10px;padding-top:0}
  .page-compact .pillar-card{padding:20px}
}
@media print{
  .page-compact .hero:has(+ .ribbons){min-height:0}
  .page-compact .hero-grid,.page-compact .hero:has(+ .ribbons) .hero-grid{padding:0}
}

/* ==========================================================================
   Submenu "Tratamentos" no menu do desktop (cliente, 15/10): liga as 4 páginas.
   Abre no hover e no foco (teclado); o painel é quase opaco porque fica dentro da
   barra com backdrop-filter (um blur aninhado não desfocaria a página por trás).
   No celular/tablet as páginas já estão no menu em cortina (.menu-curtain-pages).
   ========================================================================== */
@media (min-width:1100px){
  .nav-dd{position:relative}
  .nav-morph-links .nav-dd-trigger{display:inline-flex;align-items:center;gap:6px}
  .nav-dd-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .nav-dd:is(:hover,:focus-within) .nav-dd-chev{transform:rotate(180deg)}
  .nav-dd:has([aria-current="page"]) > .nav-dd-trigger{color:#fff}
  .nav-dd-panel{
    position:absolute;top:100%;left:50%;z-index:30;padding-top:14px;
    opacity:0;visibility:hidden;transform:translate(-50%,-6px);
    transition:opacity .22s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s;
  }
  .nav-dd:is(:hover,:focus-within) .nav-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
  .nav-morph-links .nav-dd-menu{
    display:grid;gap:4px;width:330px;margin:0;padding:8px;list-style:none;
    border-radius:20px;background:rgba(0,26,43,.97);border:1px solid rgba(120,170,210,.22);
    box-shadow:0 26px 52px -18px rgba(0,8,16,.75),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .nav-morph-links .nav-dd-menu a{
    display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;
    padding:10px 12px;border-radius:14px;color:#fff;font-size:14px;
    transition:background-color .25s ease;
  }
  .nav-morph-links .nav-dd-menu a:is(:hover,:focus-visible){background:rgba(169,203,230,.10)}
  .nav-morph-links .nav-dd-menu a[aria-current="page"]{background:rgba(169,203,230,.15);box-shadow:inset 0 0 0 1px rgba(169,203,230,.22)}
  .nav-dd-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,.06);border:1px solid rgba(120,170,210,.25);color:var(--accent-light,#7FD1C3)}
  .nav-dd-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .nav-dd-txt{display:grid;gap:2px;line-height:1.25}
  .nav-dd-txt b{font-size:14.5px;font-weight:600;color:#fff}
  .nav-dd-txt small{font-size:12px;color:rgba(255,255,255,.6)}
}
@media (prefers-reduced-motion:reduce){.nav-dd-panel,.nav-dd-chev{transition:none}}

/* ==========================================================================
   Selo do Dr. (cliente, 15/10): círculo com o símbolo da logo no centro e
   "DR. MATHEUS AMARAL • UROLOGISTA" girando em volta. Fica sobre as fotos das
   seções "Por que escolher". O símbolo é recortado do logo (as primeiras 48px de
   assets/img/logo/logo-original.webp, 269×44) até o cliente enviar o SVG.
   ========================================================================== */
.dr-seal{
  --seal:clamp(104px,calc(9vw / var(--z,1)),132px);
  position:absolute;z-index:3;width:var(--seal);height:var(--seal);border-radius:50%;
  display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at 50% 35%,rgba(0,58,92,.92),rgba(0,26,43,.94) 70%);
  border:1px solid rgba(169,203,230,.30);
  box-shadow:0 18px 40px -14px rgba(0,8,16,.7),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.dr-seal::before{ /* anel fino interno */
  content:"";position:absolute;inset:24%;border-radius:50%;border:1px solid rgba(169,203,230,.22);
}
.dr-seal-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:dr-seal-spin 22s linear infinite}
.dr-seal-ring text{font-family:inherit;font-size:9.6px;font-weight:600;letter-spacing:.18em;fill:#fff;text-transform:uppercase}
.dr-seal-core{position:relative;display:grid;place-items:center;width:46%;height:46%;border-radius:50%}
.dr-seal-mark{
  display:block;width:72%;aspect-ratio:48/44;
  background:url("../img/logo/logo-original.webp") 0 0/auto 100% no-repeat;
  animation:dr-seal-breathe 4.8s ease-in-out infinite;
}
@keyframes dr-seal-spin{to{transform:rotate(360deg)}}
@keyframes dr-seal-breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){.dr-seal-ring,.dr-seal-mark{animation:none}}

/* Posição sobre a foto do .photo-split: no canto de baixo, do lado de fora (longe do texto) */
.photo-split > .dr-seal{bottom:clamp(48px,9%,110px);left:clamp(24px,calc(3.4vw / var(--z,1)),56px)}
.photo-split--reverse > .dr-seal{left:auto;right:clamp(24px,calc(3.4vw / var(--z,1)),56px)}
@media (max-width:1099px){
  .photo-split > .dr-seal,.photo-split--reverse > .dr-seal{
    --seal:88px;top:max(16px,calc(var(--ps-h-m) - var(--ps-overlap) - var(--seal) - 8px));bottom:auto;left:auto;right:16px;
  }
}
/* Retrato em card (reposição): o selo sai pela borda direita do card */
.photo-reveal:has(.dr-seal--card){position:relative}
.dr-seal--card{right:-34px;bottom:72px}
@media (max-width:767px){.dr-seal--card{--seal:92px;right:10px;bottom:56px}}

/* ==========================================================================
   Textos no celular (cliente, 15/10): varredura das 4 páginas em 360–390px.
   - Títulos com quebra equilibrada (sem palavra sozinha numa linha) e um pouco menores.
   - Hero: título longo cabia em 5 linhas com "Disfunção", "tratamento" e
     "individualizado" sozinhos; agora fica em 3–4 linhas equilibradas.
   - FAQ: a pergunta ficava numa coluna de ~198px entre o número e o "+"
     (até 6 linhas); no celular o número sai e a pergunta usa a largura toda.
   ========================================================================== */
h1,h2,.hero-title{text-wrap:balance}
@media (max-width:767px){
  .sec-head > h2,.split-head > .sec-head > h2,.photo-split-body h2{font-size:clamp(26px,calc(7.4vw / var(--z,1)),30px);line-height:1.1}
  .hero-title,.hero-title--long,.hero .hero-title{font-size:clamp(30px,calc(8.6vw / var(--z,1)),36px);line-height:1.06}
  .faq-glass-num{display:none}
  .faq-glass-q{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:15px 14px 15px 18px;font-size:16px}
  .faq-glass-icon{width:30px;height:30px}
  .faq-glass-a-inner > *{padding:0 18px 18px}
}

/* ==========================================================================
   Microanimações (cliente, 15/10) — o JS está em assets/js/micro.js
   ========================================================================== */
/* --- Botões: magnético, rótulo que rola, seta em círculo, brilho periódico --- */
.btn{
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:translate .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
.btn.is-magnet{transition-duration:.25s,.25s,.25s,.25s,.25s,.16s}
.btn-roll{position:relative;z-index:2;display:inline-grid;overflow:hidden;vertical-align:middle;
  transform:translate3d(calc(var(--mx,0px) * .35),calc(var(--my,0px) * .35),0);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.btn.is-magnet .btn-roll{transition-duration:.16s}
.btn-roll > span{grid-area:1 / 1;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.btn-roll-b{transform:translateY(110%)}
@media (hover:hover){
  .btn:hover .btn-roll-a{transform:translateY(-110%)}
  .btn:hover .btn-roll-b{transform:translateY(0)}
}
.btn--chip{gap:.85rem;padding:.45rem .45rem .45rem 1.7rem}
.btn-chip{
  position:relative;z-index:2;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--btn-fg) 14%,transparent);color:var(--btn-fg);
  transition:transform .5s cubic-bezier(.22,1,.36,1),background-color .3s ease,color .3s ease;
}
.btn-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .btn:hover .btn-chip{background:var(--btn-fg-h);color:var(--btn-bg-h)}
  .btn:hover .btn-chip svg{transform:rotate(-45deg)}
}
.btn::after{animation:btn-shine 7.5s cubic-bezier(.4,0,.2,1) var(--shine-delay,2s) infinite}
@media (hover:hover){.btn:hover::after{animation:btn-shine-now .75s ease forwards}}
@keyframes btn-shine{0%{transform:translateX(-160%) skewX(-22deg)}13%,100%{transform:translateX(260%) skewX(-22deg)}}
@keyframes btn-shine-now{from{transform:translateX(-160%) skewX(-22deg)}to{transform:translateX(260%) skewX(-22deg)}}

/* --- Botão da hero: vidro escuro com borda de luz girando; no hover o círculo da seta
       se expande e preenche o botão em verde-água --- */
@property --cta-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn.hero-cta{
  --btn-bg:rgba(0,26,43,.45); --btn-fg:#fff; --btn-bg-h:rgba(0,26,43,.45); --btn-fg-h:var(--dark,#002B44);
  --btn-line:transparent; --btn-line-h:transparent;
  --btn-shadow:0 18px 40px -14px rgba(0,8,16,.75); --btn-shadow-h:0 24px 48px -14px rgba(0,8,16,.8);
  --btn-sheen:rgba(169,203,230,.30);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding-right:.45rem;
}
.btn.hero-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--cta-a),rgba(169,203,230,.22) 0deg,rgba(169,203,230,.22) 190deg,#7FD1C3 250deg,#fff 285deg,#A9CBE6 315deg,rgba(169,203,230,.22) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:cta-spin 4.8s linear infinite;
}
@keyframes cta-spin{to{--cta-a:360deg}}
.hero-cta .arr{position:relative;z-index:auto;background:#7FD1C3;color:var(--dark,#002B44)}
.hero-cta .arr::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:50%;background:#7FD1C3;
  transform:scale(1);transition:transform .7s cubic-bezier(.65,0,.35,1);
}
.hero-cta .arr .ico{position:relative;z-index:3;transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .btn.hero-cta:hover{--btn-bg-h:rgba(0,26,43,.45);--btn-fg-h:var(--dark,#002B44);color:var(--dark,#002B44);transition-delay:0s,0s,0s,.36s,0s,0s}
  .btn.hero-cta:hover .arr::before{transform:scale(22)}
  .btn.hero-cta:hover .arr .ico{transform:rotate(-45deg)}
  .hero-cta:hover .arr{transform:none}
}

/* --- Ícones que se desenham ---
   A animação fica toda no micro.js (§3), pela Web Animations API, com o comprimento real de cada
   traço. Ela só esconde o traço enquanto desenha; terminada (ou se não rodar), o ícone fica no
   estado normal, sempre visível. (Até 24/10 era CSS com pathLength="1" + stroke-dasharray:1, e no
   Safari do iPhone os ícones ficavam vazios.) */

/* --- Selo do Google: contador e estrelas acendendo --- */
.rb-badge.is-counting .rb-star{animation:rb-star-pop .5s cubic-bezier(.34,1.5,.64,1) both}
.rb-badge.is-counting .rb-star:nth-child(2){animation-delay:.12s}
.rb-badge.is-counting .rb-star:nth-child(3){animation-delay:.24s}
.rb-badge.is-counting .rb-star:nth-child(4){animation-delay:.36s}
.rb-badge.is-counting .rb-star:nth-child(5){animation-delay:.48s}
@keyframes rb-star-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

/* --- WhatsApp: balão "digitando…" --- */
.fab-typing{
  position:absolute;right:8px;bottom:calc(100% + 12px);display:flex;align-items:center;gap:4px;
  padding:11px 13px;border-radius:16px 16px 4px 16px;background:#fff;
  box-shadow:0 12px 26px -10px rgba(0,26,43,.5);pointer-events:none;
  opacity:0;transform:translateY(6px) scale(.6);transform-origin:100% 100%;
  transition:opacity .25s ease,transform .4s cubic-bezier(.34,1.4,.64,1);
}
.fab-typing i{width:6px;height:6px;border-radius:50%;background:#6B7C88;animation:fab-dot 1.1s ease-in-out infinite}
.fab-typing i:nth-child(2){animation-delay:.15s}
.fab-typing i:nth-child(3){animation-delay:.3s}
.fab-pill.is-typing .fab-typing{opacity:1;transform:none}
@keyframes fab-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* --- Retratos do "Por que escolher": inclinação 3D que segue o mouse --- */
.tilt-3d{transform:perspective(1100px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg));transform-style:preserve-3d;will-change:transform}
.photo-split-frame.tilt-3d{transform:perspective(1100px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg)) scale(1.04);transform-origin:50% 12%}
.rh-why-photo.tilt-3d .dr-seal{transform:translateZ(46px)}

@media (prefers-reduced-motion:reduce){
  .btn,.btn-roll,.btn-roll > span,.btn-chip,.btn-chip svg{transition:none}
  .btn::after,.btn.hero-cta::before,.fab-typing i{animation:none}
  .tilt-3d,.photo-split-frame.tilt-3d{transform:none}
}
/* rede de segurança: modo de falha, movimento reduzido e impressão mostram os ícones prontos */
html.anim-failsafe .draw-icon :is(path,circle,rect,line,polyline,polygon){animation:none!important}
@media print,(prefers-reduced-motion:reduce){.draw-icon :is(path,circle,rect,line,polyline,polygon){animation:none!important}}

/* ==========================================================================
   .pj-cards · cards de etapa com foto (porte do "Project Card" do 21st.dev, React/Tailwind
   → HTML/CSS). Foto 16:9 que aproxima no hover, card que sobe com sombra, título que acende
   e link com seta que desliza. Usado no diagnóstico da reposição hormonal (fundo escuro).
   ========================================================================== */
.pj-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.pj-cards > li{display:flex;min-width:0}
.pj-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(120,170,210,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -26px rgba(0,8,16,.65);
  transition:translate .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,border-color .4s ease;
}
.pj-card-media{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:#0A2A40}
.pj-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.pj-card-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 52%,rgba(0,20,34,.5))}
.pj-card-num{
  position:absolute;left:14px;top:14px;z-index:1;padding:6px 11px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.18em;line-height:1;color:#fff;
  background:rgba(0,26,43,.55);border:1px solid rgba(169,203,230,.3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pj-card-body{display:flex;flex:1;flex-direction:column;padding:clamp(20px,2vw,26px)}
.pj-card h3{margin:0;font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.02em;color:#fff;transition:color .3s ease}
.pj-card p{flex:1;margin:10px 0 0;max-width:none;font-size:15px;line-height:1.65;color:rgba(255,255,255,.74)}
.pj-card-link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--accent-light,#7FD1C3);
}
.pj-card-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.pj-card-link:hover{text-decoration:underline;text-underline-offset:5px}
.pj-card-link:focus-visible{outline:2px solid var(--accent-light,#7FD1C3);outline-offset:4px;border-radius:4px}
@media (hover:hover){
  .pj-card:hover{translate:0 -8px;border-color:rgba(169,203,230,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -26px rgba(0,8,16,.8)}
  .pj-card:hover .pj-card-media img{transform:scale(1.1)}
  .pj-card:hover h3{color:var(--accent-light,#7FD1C3)}
  .pj-card:hover .pj-card-link svg{transform:translateX(4px)}
}
@media (max-width:1023px){
  .pj-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-cards > li:last-child:nth-child(odd){grid-column:1 / -1}
  .pj-cards > li:last-child:nth-child(odd) .pj-card-media{aspect-ratio:21 / 9}
}
@media (max-width:639px){
  .pj-cards{grid-template-columns:minmax(0,1fr)}
  .pj-cards > li:last-child:nth-child(odd) .pj-card-media{aspect-ratio:16 / 9}
}
@media (prefers-reduced-motion:reduce){.pj-card,.pj-card-media img,.pj-card h3,.pj-card-link svg{transition:none}}

/* ==========================================================================
   .ib-list · marcadores azuis com ícone (cliente, 15/10): no lugar da linha do tempo
   (.checkrail) na indicação da reposição. Ícone num quadrado azul-marinho; ao entrar na
   tela os quadrados "estalam" em cascata e o ícone se desenha (assets/js/micro.js).
   ========================================================================== */
.ib-list{list-style:none;margin:4px 0 0;padding:0;display:grid;width:100%}
.ib-list > li{
  display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line-light,#C9D9E6);
}
.ib-list > li:last-child{border-bottom:0}
.ib-ico{
  position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  color:var(--accent-light,#7FD1C3);
  background:linear-gradient(150deg,#0A5482 0%,#004063 55%,#002B44 100%);
  box-shadow:0 12px 22px -12px rgba(0,43,68,.7),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .45s cubic-bezier(.34,1.4,.64,1),box-shadow .35s ease;
}
.ib-ico::after{ /* anel que pulsa uma vez na entrada */
  content:"";position:absolute;inset:-5px;border-radius:18px;border:1.5px solid rgba(0,64,99,.35);opacity:0;pointer-events:none;
}
.ib-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ib-text{font-size:16px;line-height:1.5;color:var(--ink)}
@media (hover:hover){
  .ib-list > li:hover .ib-ico{transform:translateY(-2px) rotate(-6deg) scale(1.06);box-shadow:0 16px 26px -12px rgba(0,43,68,.8),inset 0 1px 0 rgba(255,255,255,.16)}
}
.ib-list.is-in .ib-ico{animation:ib-pop .65s cubic-bezier(.34,1.55,.64,1) both;animation-delay:calc(var(--i,0) * .12s + .1s)}
.ib-list.is-in .ib-ico::after{animation:ib-ring 1s ease-out both;animation-delay:calc(var(--i,0) * .12s + .35s)}
@keyframes ib-pop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ib-ring{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.ib-list.is-in .ib-ico,.ib-list.is-in .ib-ico::after{animation:none}.ib-ico{transition:none}}
html.anim-failsafe .ib-list .ib-ico,html.anim-failsafe .ib-list .ib-ico::after{animation:none!important}

/* ==========================================================================
   Telas grandes (2K/4K) — cliente, 15/10: sem ampliar a página; o conteúdo usa um grid de
   1280px a partir de 1600px de tela e as composições com foto ficam travadas no desenho de
   1920px (centralizadas), para a foto não estourar o grid nem ser cortada demais.
   (As medidas em vw/vh do CSS seguem divididas por --z, que fica sempre 1.)
   ========================================================================== */
@media (min-width:1600px){
  :root{--container:calc(1280px + 2 * 48px)}
  .hero-grid{padding-inline:max(var(--hero-gutter),(100vw - 1280px) / 2)}
}
@media (min-width:1921px){
  /* hero: na proporção da foto (16:9), sem faixa baixa e larga que corta a cabeça */
  .hero:has(+ .ribbons),.page-compact .hero:has(+ .ribbons){min-height:min(100svh,56.25vw)}
}

/* Foto lateral (.photo-split) em telas acima de 1920px: o mesmo desenho de sempre (encostada
   na lateral, metade da seção, esfumando para o texto); a seção fica mais alta (proporção ~4:3 da
   área da foto) para a foto larga não cortar o Dr. (cliente, 15/10). */
@media (min-width:1921px){
  /* vence as alturas das páginas (.page-compact, disfuncao-eretil.css, reposicao-hormonal.css) */
  html body .photo-split,html body.page-compact .photo-split{--ps-h:100%;min-height:min(37.5vw,100svh)}
}


/* ==========================================================================
   Heros: a cabeça do Dr. não fica mais embaixo do menu (cliente, 16/10).
   A hero continua começando atrás da barra, mas a FOTO começa logo abaixo dela
   (como já era no preenchimento) e esfuma no topo para o azul da hero, sem faixa dura.
   ========================================================================== */
.hero .hero-media{background:var(--dark-base,#002438)}
.hero .hero-media img{
  top:var(--header-h);height:calc(100% - var(--header-h));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);
          mask-image:linear-gradient(to bottom,transparent 0,#000 56px);
}
/* recorte da foto da hero só embaixo (o alto da foto, com a cabeça, fica sempre inteiro) */
@media (min-width:1100px){.hero-media img{object-position:62% 0%}}
@media (max-width:767px){.hero-media img{object-position:50% 0%}}


/* ==========================================================================
   Componentes da copy nova (24/10/2026) · vieram da home aprovada e servem às 4 páginas
   - .ap: título centralizado + cards de vidro com ícones animados (grade 4×2 com a pergunta na
     1ª célula a partir de 1100px; faixa lateral no tablet; lista dentro de um card no celular).
     JS em assets/js/micro.js (§7 faixa, §8 gestos; os ícones .ap-ico se desenham pelo §3).
   - .s-ice: terceiro tom claro (gelo).
   - Botões largos no celular: rótulo à esquerda e a seta encostada na borda.
   ========================================================================== */
/* ==========================================================================
   Aumento peniano (copy 24/10) · seção logo depois da hero (.ap)
   Névoa clara (--bg → --bg-2) com luzes azul-claras que derivam devagar: a do topo continua
   a fita da hero e a do centro fica atrás dos cards, para o vidro ter o que desfocar. Nenhuma
   luz encosta na borda de baixo (encontra o petróleo dos Tratamentos com borda reta).
   Título centralizado, sem eyebrow (só texto da copy). Os 7 itens em cards de vidro lado a
   lado: a partir de 1100px em "tijolo" 4 + 3, com o ícone à esquerda do texto; abaixo disso,
   faixa com rolagem lateral nativa, encaixe e barra de progresso (micro.js §7). Fechamento
   solto e centralizado, com o botão embaixo. Sem números: os itens não são uma sequência.
   data-anim-stagger anima os <li>; o hover fica no .ap-card de dentro (o GSAP grava
   translate inline no <li>, que anularia o hover se fosse no mesmo elemento).
   ========================================================================== */
.ap{position:relative;isolation:isolate;overflow:clip;--section-bg:var(--bg);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.ap::before{
  content:"";position:absolute;inset:-10% -6%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(56% 36% at 50% 0%,color-mix(in srgb,var(--pale-blue) 90%,transparent),transparent 72%),
    radial-gradient(44% 34% at 50% 68%,color-mix(in srgb,var(--pale-blue) 80%,transparent),transparent 72%),
    radial-gradient(28% 32% at 6% 34%,rgba(var(--line-rgb),.18),transparent 70%),
    radial-gradient(26% 30% at 95% 84%,rgba(var(--shadow-rgb),.06),transparent 70%);
  animation:ap-drift 26s ease-in-out infinite alternate;
}
@keyframes ap-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,1.5%,0) scale(1.04)}
  100%{transform:translate3d(-1.5%,-1%,0) scale(1.02)}
}
.ap .sec-head{margin-bottom:clamp(24px,calc(2.8vw / var(--z,1)),36px)}
.ap .sec-head > h2{max-width:none;font-size:clamp(30px,calc(3.1vw / var(--z,1)),42px)}
.ap .sec-head .lead{max-width:62ch}
.ap-sub{
  display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;
  margin:0 auto clamp(18px,calc(2.2vw / var(--z,1)),26px);
  font-size:clamp(18px,calc(1.45vw / var(--z,1)),21px);font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--brand);
}
.ap-sub::before,.ap-sub::after{content:"";flex:none;width:clamp(24px,calc(3vw / var(--z,1)),40px);height:1px;background:linear-gradient(90deg,transparent,var(--line-blue))}
.ap-sub::after{transform:scaleX(-1)}
@media (max-width:479px){.ap-sub::before,.ap-sub::after{display:none}}

/* cards: grade 4×2 (cliente, 24/10: o tijolo 4 + 3 formava um losango). A partir de 1100px a
   pergunta ocupa a 1ª célula e os 7 cards completam o retângulo: a lista entra como subgrid
   da .ap-grid e o 1º card começa na 2ª coluna. Sem subgrid, fica a pergunta em cima e 4 + 3
   alinhados à esquerda. A altura iguala pela linha. */
.ap .ap-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ap-cards > li{display:flex}
.ap-sub-arrow{display:none}
@media (min-width:1100px){
  @supports (grid-template-columns:subgrid){
    .ap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:16px}
    .ap-grid > .ap-sub{
      display:block;grid-column:1;grid-row:1;align-self:center;position:relative;z-index:1;
      margin:0;padding:0 20px 0 4px;text-align:left;
      font-size:clamp(22px,calc(1.75vw / var(--z,1)),25px);line-height:1.22;letter-spacing:-.025em;
    }
    .ap .ap-grid > .ap-cards{grid-column:1 / -1;grid-row:1 / span 2;grid-template-columns:subgrid;grid-template-rows:subgrid;pointer-events:none}
    .ap-grid > .ap-cards > li{pointer-events:auto}
    .ap-grid > .ap-cards > li:first-child{grid-column-start:2}
    .ap-sub-arrow{
      display:inline-grid;place-items:center;vertical-align:middle;width:32px;height:32px;margin-left:10px;border-radius:50%;
      border:1px solid var(--line-blue);color:var(--brand);background:color-mix(in srgb,var(--card) 60%,transparent);
    }
    .ap-sub-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:ap-nudge 2.8s ease-in-out infinite}
  }
}
@keyframes ap-nudge{0%,55%,100%{transform:none}25%{transform:translateX(3px)}}
.ap-card{
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  display:grid;grid-template-rows:auto 1fr;align-content:start;gap:18px;
  padding:22px 20px;border-radius:20px;
  background:color-mix(in srgb,var(--card) 66%,transparent);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--glass-polish),0 0 0 1px rgba(var(--shadow-rgb),.05),0 18px 36px -22px rgba(var(--shadow-rgb),.32);
  transition:translate .45s var(--ease-out),box-shadow .45s ease,border-color .45s ease;
}
.ap-card::after{ /* fio verde-água que cresce na base no hover */
  content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--line-blue));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out);
}
.ap-card p{margin:0;max-width:none;font-size:15.5px;line-height:1.45;font-weight:500;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.ap-ico{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:var(--brand);
  background:linear-gradient(150deg,var(--card) 0%,color-mix(in srgb,var(--pale-blue) 70%,var(--card)) 100%);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--card),0 6px 14px -8px rgba(var(--shadow-rgb),.35);
  transition:background .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,transform .5s cubic-bezier(.34,1.4,.64,1);
}
/* desktop: ícone à esquerda do texto, cards baixos */
@media (min-width:1100px){
  .ap-card{grid-template-rows:none;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:20px 22px 20px 18px}
}
@media (hover:hover){
  .ap-card:hover{translate:0 -4px;border-color:var(--line-blue);
    box-shadow:inset 0 1px 0 var(--glass-polish),0 0 0 1px rgba(var(--shadow-rgb),.06),0 28px 48px -24px rgba(var(--shadow-rgb),.45)}
  .ap-card:hover::after{transform:scaleX(1)}
  .ap-card:hover .ap-ico{color:var(--on-dark);border-color:transparent;background:linear-gradient(150deg,var(--brand) 0%,var(--dark) 100%);
    box-shadow:0 12px 24px -10px rgba(var(--dark-rgb),.6);transform:rotate(-4deg) scale(1.06)}
  .ap-card:hover .ap-ico .a{stroke:var(--accent-light)}
}

/* fechamento solto (cliente, 24/10: sem a cápsula): texto centralizado e o botão embaixo */
.ap-foot{
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,calc(2vw / var(--z,1)),24px);
  max-width:760px;margin:clamp(26px,calc(3vw / var(--z,1)),36px) auto 0;text-align:center;
}
.ap-foot p{margin:0;max-width:64ch;font-size:15.5px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}

/* até 1099px: faixa com rolagem lateral nativa (sem prender a seção na tela).
   .ap na frente: a regra global ul[class] zera margem e padding. Sem mask-image na faixa
   (viraria backdrop root e o vidro dos cards perderia o desfoque). */
.ap-track-bar{display:none}
@media (max-width:1099px){
  .ap .ap-cards{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter) 22px;scroll-padding-inline:var(--gutter);scrollbar-width:none;
  }
  .ap .ap-cards::-webkit-scrollbar{display:none}
  .ap-cards > li{flex:0 0 clamp(230px,calc(34vw / var(--z,1)),280px);scroll-snap-align:start}
  .ap-cards:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:24px}
  .ap-track-bar{display:block;position:relative;width:min(200px,50%);height:2px;margin:4px auto 0;border-radius:2px;background:var(--line);overflow:hidden}
  .ap-track-bar i{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--ap-p,.2))}
}
@media (max-width:1099px) and (hover:hover){.ap-cards{cursor:grab}.ap-cards.is-dragging{cursor:grabbing;user-select:none}}
@media (max-width:767px){
  .ap-cards > li{flex-basis:min(76vw,300px)}
  .ap-card{padding:18px 18px 20px;gap:14px}
  .ap-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
@media (max-width:479px){.ap-foot .btn{width:100%}}

/* ==========================================================================
   Aumento peniano · ícones (.ap-ico): traço da marca com um detalhe verde-água (.a)
   Entram se desenhando (micro.js §3, .draw-icon). Depois, um ícone de cada vez faz o seu
   gesto (micro.js §8 passa .is-play só entre os cards visíveis; no hover, o card toca o dele):
   ondas e sol, cabide que balança, calça que aperta, linhas que engrossam, balança que
   nivela, setas que recolhem e anel que se abre. Os gestos ficam só nos <g class="m">:
   o desenho de entrada (micro.js) anima os <path>. Nada de stroke-dasharray no CSS dos ícones.
   ========================================================================== */
.ap-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ap-ico .a{stroke:var(--accent)}
.ap-ico .m{transform-box:view-box}
.ap-card.is-play .m{animation:var(--ap-k) 1.6s cubic-bezier(.45,0,.2,1) var(--ap-d,0s) 1 both}
@media (hover:hover){.ap-card:hover .m{animation:var(--ap-k) 1.6s cubic-bezier(.45,0,.2,1) var(--ap-d,0s) 1 both}}
.ap-sun{--ap-k:ap-sun;transform-origin:12px 13.5px}
.ap-wave{--ap-k:ap-wave;--ap-d:.08s}
.ap-hanger{--ap-k:ap-swing;transform-origin:12px 5.1px}
.ap-pants{--ap-k:ap-squeeze;transform-origin:12px 12px}
.ap-l1{--ap-k:ap-thick;transform-origin:12px 7px}
.ap-l2{--ap-k:ap-thick;--ap-d:.12s;transform-origin:12px 12px}
.ap-l3{--ap-k:ap-thick;--ap-d:.24s;transform-origin:12px 17px}
.ap-beam{--ap-k:ap-tilt;transform-origin:12px 7.5px}
.ap-axis{--ap-k:ap-axis;transform-origin:12px 12px}
.ap-in-l{--ap-k:ap-in-l}
.ap-in-r{--ap-k:ap-in-r}
.ap-ring{--ap-k:ap-ring;transform-origin:12px 12px}
@keyframes ap-sun{0%,100%{transform:none}45%{transform:translateY(-1.4px)}}
@keyframes ap-wave{0%,100%{transform:none}40%{transform:translateX(-1.5px)}70%{transform:translateX(.6px)}}
@keyframes ap-swing{0%,100%{transform:none}20%{transform:rotate(7deg)}45%{transform:rotate(-5deg)}70%{transform:rotate(2.5deg)}}
@keyframes ap-squeeze{0%,100%{transform:none}40%{transform:scaleX(.88)}70%{transform:scaleX(1.03)}}
@keyframes ap-thick{0%,100%{transform:none}40%{transform:scaleY(1.6)}}
@keyframes ap-tilt{0%,100%{transform:none}25%{transform:rotate(-6deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-1.5deg)}}
@keyframes ap-axis{0%,100%{transform:none}45%{transform:scaleY(.82)}}
@keyframes ap-in-l{0%,100%{transform:none}45%{transform:translateX(1.6px)}}
@keyframes ap-in-r{0%,100%{transform:none}45%{transform:translateX(-1.6px)}}
@keyframes ap-ring{0%,100%{transform:none;opacity:1}35%{transform:scale(.86);opacity:.55}70%{transform:scale(1.08);opacity:1}}

/* Aumento peniano no celular (cliente, 24/10): no lugar da faixa lateral, os 7 itens ficam
   numa lista dentro de um card de vidro só, com fios entre os itens (ícone à esquerda, texto à
   direita). Sem rolagem lateral e sem barra de progresso. No tablet continua a faixa. */
@media (max-width:767px){
  .ap .ap-cards{
    display:block;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:6px 18px;
    border-radius:22px;background:color-mix(in srgb,var(--card) 66%,transparent);border:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
    box-shadow:inset 0 1px 0 var(--glass-polish),0 0 0 1px rgba(var(--shadow-rgb),.05),0 18px 36px -22px rgba(var(--shadow-rgb),.32);
    cursor:auto;
  }
  .ap-cards > li{flex:none;scroll-snap-align:none}
  .ap-cards > li + li{border-top:1px solid var(--line)}
  .ap-card{
    grid-template-rows:none;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;
    min-height:0;padding:14px 0;border:0;border-radius:0;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;translate:none!important;
  }
  .ap-card::after{display:none}
  .ap-ico{width:42px;height:42px;border-radius:13px}
  .ap-ico svg{width:23px;height:23px}
  .ap-card p{font-size:15px}
  .ap-track-bar{display:none}
}
/* Na faixa lateral cada card entra sozinho: o desenho do ícone começa logo, sem a cascata
   pensada para o tijolo (o !important da folha vence o --draw-delay inline do micro.js) */
@media (max-width:1099px){.ap-cards .ap-ico svg{--draw-delay:.1s!important}}

/* gelo: terceiro tom claro (Pilares); os cards brancos ganham contraste sobre ele */
.s-ice{
  --section-bg:color-mix(in srgb,var(--pale-blue) 62%,var(--bg));
  background:
    radial-gradient(60% 70% at 50% 0%,color-mix(in srgb,var(--pale-blue) 80%,transparent),transparent 70%),
    color-mix(in srgb,var(--pale-blue) 62%,var(--bg));
}

/* Botões que ocupam a largura toda no celular (cliente, 24/10: "seta fora da borda"): o rótulo
   fica à esquerda e a seta em círculo encosta na borda direita, como no botão da hero, em vez
   de os dois ficarem juntos no meio. Botões estreitos não mudam (não sobra espaço para separar). */
@media (max-width:767px){
  .btn.btn--chip{justify-content:space-between;padding-left:1.6rem}
}

/* .ap: variantes para as landing pages (copy 24/10)
   .ap-cards--fill: 7 cards em duas fileiras cheias (4 em cima e 3 mais largos embaixo), sem
     buraco nem losango, para quando a pergunta já é o título da seção (sem a 1ª célula da home).
   .ap-cards--2: 4 itens em 2×2 (ex.: "Cuidados após o procedimento", ao lado do título).
   .ap--plain: a mesma estrutura do .ap sem a névoa e as luzes (fundo --bg liso). */
@media (min-width:1100px){
  .ap .ap-cards--fill{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ap-cards--fill > li{grid-column:span 3}
  .ap-cards--fill > li:nth-child(n+5){grid-column:span 4}
  .ap .ap-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ap.ap--plain{background:var(--bg)}
.ap.ap--plain::before{display:none}

/* .ap--dark-cards: cards azul-escuros sobre o fundo claro (cliente, 24/10: "Você se identifica" da
   página de preenchimento, com fundo branco para continuar a imagem da seção de cima). Texto
   branco, ícone num quadrado de vidro claro com o detalhe em verde-água; no hover o quadrado
   acende em verde-água. No celular a lista fica dentro de um card azul-escuro só. */
.ap--dark-cards .ap-card{
  background:linear-gradient(150deg,#003252 0%,var(--dark) 55%,var(--deep) 100%);
  border-color:rgba(var(--line-rgb),.2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 40px -24px rgba(var(--shadow-dark-rgb),.7);
}
.ap--dark-cards .ap-card p{color:var(--on-dark)}
.ap--dark-cards .ap-ico{color:var(--on-dark);background:rgba(255,255,255,.07);border-color:rgba(var(--line-rgb),.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.ap--dark-cards .ap-ico .a{stroke:var(--accent-light)}
@media (hover:hover){
  .ap--dark-cards .ap-card:hover{border-color:rgba(var(--accent-rgb),.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 30px 52px -24px rgba(var(--shadow-dark-rgb),.8)}
  .ap--dark-cards .ap-card:hover .ap-ico{background:var(--accent-light);color:var(--dark);border-color:transparent;box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.6)}
  .ap--dark-cards .ap-card:hover .ap-ico .a{stroke:var(--brand)}
}
@media (max-width:767px){
  .ap--dark-cards.ap .ap-cards{
    background:linear-gradient(160deg,#003252 0%,var(--dark) 60%,var(--deep) 100%);border-color:rgba(var(--line-rgb),.2);
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 22px 40px -24px rgba(var(--shadow-dark-rgb),.6);
  }
  .ap--dark-cards .ap-cards > li + li{border-top-color:rgba(var(--line-rgb),.18)}
  .ap--dark-cards .ap-card{background:none;border:0;box-shadow:none}
}