/* =====================================================================
   SITE — Dr. Antonio Soares · Dor crônica em Aracaju
   Studio Connecta · SC26
   ---------------------------------------------------------------------
   Linha criativa: 09_SITES/design-system (tokens, reveal revealFlow,
   shiny-cta, ambient-glow, grid-lines, grain, selo giratório,
   diagnostic-rail-glow, blueprint do monograma).
   Copy: 06_OUTPUTS/copy-site-dr-antonio-soares-v3-final.json
   Regras de compliance que o CSS garante:
   - bloco de identificação com a MESMA fonte, corpo e cor do parágrafo
     vizinho (.hero__text / .foot-text), sem negrito e sem redução;
   - nada de vermelho ou rosa; alerta ganha destaque pelo navy;
   - tudo respeita prefers-reduced-motion.
   ===================================================================== */

/* ============================ 1. TOKENS ============================= */
:root{
  /* marca (logomarca) */
  --brand-navy-900:#022c5b;
  --brand-navy-800:#013a6b;
  --danger:#c62828;             /* vermelho de alerta de erro no formulário (AA sobre branco) */
  --brand-navy-700:#02467f;
  --brand-navy-600:#024e84;
  --brand-blue-500:#0398ba;
  --brand-petrol-600:#027d9f;   /* azul-petróleo: acento legível sobre claro (AA) */
  --brand-teal-500:#0ba9ae;
  --brand-cyan-500:#03c7d0;
  --brand-cyan-200:#8fe6ea;
  --brand-cyan-050:#e6fbfc;

  /* superfícies */
  --bg-ink:#04182e;
  --bg-deep:#08243f;
  --bg-slate:#0e3357;
  --surface-white:#ffffff;
  --surface-cream:#eef4f8;
  --surface-stone:#dde9f1;

  /* texto */
  --text-dark:#0e2740;
  --text-body:#334f66;
  --text-muted:#56738a;
  --text-light:#eef6fb;
  --text-muted-dark:#a9c2d4;

  /* semânticos */
  --accent:var(--brand-teal-500);
  --accent-ink:var(--brand-petrol-600);

  /* bordas */
  --border-light:rgba(14,39,64,.12);
  --border-strong:rgba(14,39,64,.22);
  --border-dark:rgba(255,255,255,.12);
  --border-cyan:rgba(3,199,208,.38);

  /* tipografia */
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* raios */
  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:28px;
  --radius-blob:40px;
  --radius-pill:9999px;

  /* movimento */
  --d-fast:150ms;
  --d-base:220ms;
  --d-slow:500ms;
  --d-cine:1100ms;
  --e-smooth:cubic-bezier(.4,0,.2,1);
  --e-out:cubic-bezier(.2,.6,.2,1);
  --e-cine:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  /* sombras */
  --shadow-1:0 10px 15px -3px rgba(4,24,46,.10), 0 4px 6px -4px rgba(4,24,46,.10);
  --shadow-2:0 18px 35px rgba(4,24,46,.16);
  --shadow-3:0 24px 60px rgba(4,24,46,.22);
  --shadow-card:0 8px 30px rgba(4,24,46,.07);
  --shadow-float:0 30px 60px -18px rgba(4,24,46,.35);
  --shadow-glow-cyan:0 0 8px rgba(3,199,208,.85);
  --shadow-glow-teal:0 0 22px rgba(11,169,174,.5);

  /* gradientes oficiais */
  --grad-brand:linear-gradient(135deg,#022c5b 0%,#02467f 38%,#0398ba 70%,#03c7d0 100%);
  --grad-brand-soft:linear-gradient(135deg,#02467f,#0ba9ae);
  --grad-shine:linear-gradient(90deg,#0398ba,#03c7d0);
  --grad-paper:radial-gradient(120% 120% at 50% 0%,#f5f9fc 0%,#eef4f8 55%,#e4eef4 100%);
  --grad-ink:linear-gradient(180deg,#06203a 0%,#04182e 100%);

  /* camadas */
  --z-raise:10;
  --z-nav:50;
  --z-menu:60;
  --z-skip:70;

  /* layout */
  --container:1200px;
  --container-wide:1320px;
  --gutter:max(clamp(18px,4vw,48px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --d-rail:3.8s;
  --nav-h:112px;
}

/* ============================ 2. RESET ============================= */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  font-family:var(--font-sans);font-size:16px;line-height:1.65;
  color:var(--text-body);background:var(--surface-white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-dark);line-height:1.1;font-weight:600}
:focus-visible{outline:3px solid var(--brand-navy-800);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 7px rgba(3,199,208,.45)}
.on-dark :focus-visible,.hero :focus-visible,.site-footer :focus-visible,.steps-band :focus-visible,.menu-panel :focus-visible,#navbar:not(.is-light) :focus-visible,.skip-link:focus-visible{outline-color:#fff;box-shadow:0 0 0 7px rgba(3,199,208,.6)}
::selection{background:var(--brand-cyan-500);color:var(--brand-navy-900)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:10px;z-index:var(--z-skip);background:var(--brand-navy-900);color:#fff;padding:.75em 1.2em;border-radius:10px;font-weight:600}
.skip-link:focus{left:16px}

/* ============================ 3. TIPOGRAFIA ======================== */
.h2{font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.02em;line-height:1.08}
.h2--long{font-size:clamp(1.8rem,3.3vw,2.9rem);line-height:1.12}
.body-lg{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.7;color:var(--text-body)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-sans);font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;color:var(--accent-ink);
}
.eyebrow.on-dark{color:var(--brand-cyan-200)}
em.accent{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  color:var(--accent-ink);padding-right:.02em;
}
.accent--strong{font-weight:700!important}
.on-dark em.accent,.hero em.accent{color:var(--brand-teal-500)}
.outline-text{-webkit-text-fill-color:currentColor;-webkit-text-stroke:0;color:var(--text-light)}  /* sólido/preenchido em todas as telas (pedido do usuário 2026-10-06) */
.text-link{
  color:var(--accent-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.28em;text-decoration-color:rgba(2,125,159,.45);
  transition:text-decoration-color var(--d-base),color var(--d-base);
}
.text-link:hover{text-decoration-color:currentColor;color:var(--brand-navy-700)}
.text-link svg{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-left:.3em;transition:transform var(--d-base) var(--e-out)}
.text-link:hover svg{transform:translate(2px,-2px)}

/* ============================ 4. LAYOUT ============================ */
.container{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}
.container-wide{width:min(100% - var(--gutter)*2,var(--container-wide));margin-inline:auto}
.section{position:relative;padding:clamp(72px,9vw,140px) 0;overflow:clip}
.section>.container,.section>.container-wide{position:relative;z-index:1}
.section-head{max-width:820px;margin-bottom:clamp(40px,5vw,68px)}
.section-head .eyebrow{margin-bottom:20px}
.section-head .body-lg{margin-top:20px;max-width:60ch}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .body-lg{margin-inline:auto}

/* superfícies */
.surface--white{background:var(--surface-white)}
.surface--paper{background:var(--grad-paper);--accent-ink:#026d8b}
.surface--dark{background:var(--grad-ink);color:var(--text-light)}
.paper-grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.dark-grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.06;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ambient-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ambient-glow span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:breathe 9s var(--e-smooth) infinite alternate}
.ambient-glow .g1{width:44vw;height:44vw;left:-10vw;top:-12vw;background:radial-gradient(circle,rgba(3,199,208,.40),transparent 65%)}
.ambient-glow .g2{width:36vw;height:36vw;left:22vw;top:30vh;background:radial-gradient(circle,rgba(2,70,127,.55),transparent 65%);animation-delay:-3s}
.ambient-glow .g3{width:30vw;height:30vw;left:6vw;bottom:-14vw;background:radial-gradient(circle,rgba(11,169,174,.32),transparent 65%);animation-delay:-5s}

/* ---------- Depoimentos (prova social · avaliações reais do Google) · fundo azul claro ---------- */
#depoimentos{--depo-star:#fbbc04;background:linear-gradient(180deg,#eef5fd 0%,#dde9f9 100%)}   /* fundo azul claro · estrelas douradas (Google) */
#depoimentos .container{position:relative;z-index:1}
#depoimentos .h2 em.accent{color:var(--brand-petrol-600)}
.depo-score{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:12px 22px;border-radius:999px;
  background:#fff;border:1px solid rgba(2,70,127,.16);text-decoration:none;color:var(--text-body);
  box-shadow:0 10px 26px -18px rgba(2,44,91,.4);
  transition:border-color .2s var(--e-out),transform .2s var(--e-out),box-shadow .2s var(--e-out)}
.depo-score:hover{border-color:var(--brand-petrol-600);transform:translateY(-1px);box-shadow:0 14px 30px -16px rgba(2,44,91,.45)}
.depo-score__num{font-family:var(--font-display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--brand-navy-900)}
.depo-score__stars{display:inline-flex;gap:2px;color:var(--depo-star)}
.depo-score__stars svg{width:20px;height:20px;display:block;fill:currentColor}
.depo-score__meta{font-family:var(--font-sans);font-size:.92rem;font-weight:600;color:var(--brand-petrol-600);letter-spacing:.01em}
/* Layout dinâmico (referência): 2 colunas, coluna direita deslocada p/ baixo; card com avatar + nome + estrelas no topo */
.depo-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:clamp(18px,2.2vw,26px);margin-top:clamp(28px,4vw,50px)}
.depo-col{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px)}
.depo-card{display:flex;flex-direction:column;padding:24px 26px;border-radius:18px;
  background:#fff;border:1px solid rgba(2,70,127,.1);box-shadow:0 20px 46px -30px rgba(2,44,91,.4);
  transition:transform .25s var(--e-out),box-shadow .25s var(--e-out)}
.depo-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -28px rgba(2,44,91,.5)}
.depo-card__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.depo-card__avatar{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:#fff;
  background:linear-gradient(145deg,var(--brand-petrol-600) 0%,var(--brand-navy-700) 100%)}
.depo-card__id{display:flex;flex-direction:column;gap:5px;min-width:0}
.depo-card__name{font-style:normal;font-weight:700;font-size:1rem;color:var(--brand-navy-900);line-height:1.2}
.depo-card__stars{display:flex;gap:2px;color:var(--depo-star)}
.depo-card__stars svg{width:16px;height:16px;display:block;fill:currentColor}
.depo-card__text{margin:0;font-family:var(--font-sans)}
.depo-card__text p{margin:0;font-size:1rem;line-height:1.6;color:var(--text-body)}
.depo-card__foot{margin:16px 0 0;font-family:var(--font-sans);font-size:.8rem;font-weight:600;color:var(--brand-petrol-600)}
.depo-cta{margin-top:clamp(28px,4vw,42px);text-align:center}
.depo-cta a{display:inline-flex;align-items:center;gap:.5em;min-height:52px;padding:14px 28px;border-radius:999px;
  font-family:var(--font-sans);font-weight:600;font-size:1rem;color:#fff;text-decoration:none;
  background:var(--brand-petrol-600);transition:background .2s var(--e-out),transform .2s var(--e-out)}
.depo-cta a:hover{background:var(--brand-navy-700);transform:translateY(-1px)}
.depo-cta a svg{width:18px;height:18px;display:block}
.depo-note{margin-top:clamp(26px,3.5vw,40px);text-align:center;font-family:var(--font-sans);font-size:.82rem;color:rgba(2,44,91,.55)}
@media (max-width:640px){.depo-grid{grid-template-columns:1fr}}
@keyframes breathe{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,3%,0) scale(1.12)}}
.grid-lines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(3,199,208,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(3,199,208,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 30% 45%,#000,transparent 70%);mask-image:radial-gradient(circle at 30% 45%,#000,transparent 70%);
}

/* ========================= 5. REVEAL-ON-SCROLL ==================== */
.js .reveal-item{opacity:0}
.js .reveal-item.reveal-active{opacity:1}
.reveal-active{animation:revealFlow var(--d-cine) var(--e-out) backwards}
.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}
.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.delay-600{animation-delay:.6s}
.delay-700{animation-delay:.7s}.delay-800{animation-delay:.8s}
@keyframes revealFlow{
  0%{opacity:0;transform:translateY(34px) scale(.985);filter:blur(10px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.reveal-left.reveal-active{animation-name:revealLeft}
.reveal-right.reveal-active{animation-name:revealRight}
@keyframes revealLeft{0%{opacity:0;transform:translateX(-46px)}100%{opacity:1;transform:none}}
@keyframes revealRight{0%{opacity:0;transform:translateX(46px)}100%{opacity:1;transform:none}}
/* cortina: quem dispara é o ancestral revelado (o clip zera a interseção do próprio elemento) */
.js .clip-reveal{clip-path:inset(0 100% 0 0)}
.reveal-active .clip-reveal,.clip-reveal.reveal-active{animation:clipReveal 1.25s var(--e-cine) .1s both}
@keyframes clipReveal{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}

/* ======================= 6. PROGRESSO + NAVBAR ===================== */
#reading-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:calc(var(--z-nav) + 2);
  background:var(--grad-shine);box-shadow:var(--shadow-glow-cyan);
  transform-origin:0 50%;transform:scaleX(0);
}
#navbar{
  position:fixed;top:0;left:0;width:100%;z-index:var(--z-nav);
  background:linear-gradient(180deg,rgba(4,24,46,.55),rgba(4,24,46,0));
  border-bottom:1px solid transparent;
  transition:background var(--d-slow) var(--e-smooth),box-shadow var(--d-slow) var(--e-smooth),border-color var(--d-slow);
}
#navbar.is-scrolled{
  background:rgba(4,24,46,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:rgba(255,255,255,.08);
}
#navbar.is-light{
  background:rgba(255,255,255,.9);
  box-shadow:0 16px 50px rgba(4,24,46,.10);
  border-bottom-color:var(--border-light);
}
.nav-shell{
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:min(100% - var(--gutter)*2,var(--container-wide));margin-inline:auto;
  transition:height var(--d-base) var(--e-smooth);
}
#navbar.is-scrolled .nav-shell{height:92px}
.nav-logo{position:relative;display:block;height:84px;aspect-ratio:1275.59/425.2;transition:height var(--d-base) var(--e-smooth);flex:none}
#navbar.is-scrolled .nav-logo{height:68px}
.nav-logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity var(--d-slow) var(--e-smooth)}
.nav-logo .logo-color{opacity:0}
/* !important: vence o estado final (forwards) da intro logoIn, para a troca branco→cor continuar ao rolar */
#navbar.is-light .nav-logo .logo-white{opacity:0!important}
#navbar.is-light .nav-logo .logo-color{opacity:1}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;padding:.6em .9em;white-space:nowrap;border-radius:var(--radius-pill);
  font-size:.92rem;font-weight:500;color:rgba(255,255,255,.82);
  transition:color var(--d-base) var(--e-smooth);
}
.nav-links a::after{
  content:"";position:absolute;left:.9em;right:.9em;bottom:.3em;height:2px;border-radius:2px;
  background:var(--grad-shine);transform:scaleX(0);transform-origin:left;transition:transform var(--d-base) var(--e-out);
}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
#navbar.is-light .nav-links a{color:var(--text-body)}
#navbar.is-light .nav-links a:hover,#navbar.is-light .nav-links a.active{color:var(--brand-navy-800)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-toggle{
  display:flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:14px;color:#fff;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);
  transition:background var(--d-base),color var(--d-base),border-color var(--d-base);
}
.nav-toggle{display:none}
/* CTA da navbar: shiny-cta compacto, como na navbar do design system */
.shiny-cta.nav-cta{min-height:48px;height:48px;padding:0 1.45em;font-size:.74rem;letter-spacing:.12em}
.nav-cta svg{width:1.35em;height:1.35em}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle:hover{border-color:rgba(3,199,208,.5);color:var(--brand-cyan-200)}
#navbar.is-light .nav-toggle{color:var(--text-dark);border-color:var(--border-light);background:#fff}
#navbar.is-light .nav-toggle:hover{color:var(--accent-ink);border-color:rgba(2,125,159,.45)}

/* menu mobile em tela cheia */
.menu-panel{
  position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;
  background:var(--grad-ink);color:var(--text-light);padding:22px var(--gutter) 32px;
  visibility:hidden;opacity:0;transition:opacity .35s var(--e-smooth),visibility 0s .35s;
  overflow:hidden auto;
}
.menu-panel.open{visibility:visible;opacity:1;transition:opacity .35s var(--e-smooth),visibility 0s}
/* 2026-10-05: no menu mobile aberto, a logomarca fica com 70px de altura (a wordmark é 3:1 → ~210px de largura,
   cabe ao lado do botão fechar em qualquer telefone; min-height garante a linha quando o logo fosse menor). */
.menu-panel__top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.menu-panel__top img{height:70px;width:auto}
.menu-close{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-dark);color:#fff}
.menu-close svg{width:22px;height:22px}
.menu-panel nav{margin-top:auto;margin-bottom:auto;padding:40px 0}
.menu-panel li{border-bottom:1px solid var(--border-dark)}
.menu-panel li a{
  display:flex;align-items:baseline;gap:18px;padding:18px 0;
  font-family:var(--font-display);font-size:clamp(1.7rem,7vw,2.4rem);color:#fff;line-height:1.1;
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--e-out),transform .5s var(--e-out),color var(--d-base);
}
.menu-panel li a span{font-family:var(--font-mono);font-size:.78rem;color:var(--brand-cyan-200);letter-spacing:.08em}
.menu-panel li a:hover{color:var(--brand-cyan-200)}
.menu-panel.open li a{opacity:1;transform:none}
.menu-panel.open li:nth-child(1) a{transition-delay:.08s}
.menu-panel.open li:nth-child(2) a{transition-delay:.14s}
.menu-panel.open li:nth-child(3) a{transition-delay:.2s}
.menu-panel.open li:nth-child(4) a{transition-delay:.26s}
.menu-panel.open li:nth-child(5) a{transition-delay:.32s}
.menu-panel .ambient-glow .g1{width:90vw;height:90vw}

/* ============================ 7. BOTÕES =========================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:52px;
  font-family:var(--font-sans);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  padding:1em 1.75em;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;text-align:center;
  transition:transform var(--d-base) var(--e-spring),box-shadow var(--d-base) var(--e-smooth),background var(--d-base) var(--e-smooth),color var(--d-base);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--brand-navy-800);color:#fff;box-shadow:0 10px 24px -8px rgba(2,70,127,.6)}
.btn--primary:hover{background:var(--brand-navy-900);transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(2,70,127,.7)}
.btn--ghost{background:transparent;color:var(--brand-navy-800);box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent-ink);color:var(--accent-ink);transform:translateY(-2px)}
.btn--on-dark.btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.btn--on-dark.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand-cyan-500),0 0 28px -6px rgba(3,199,208,.5);color:var(--brand-cyan-200)}
/* foco: o box-shadow do botão vencia o halo ciano do :focus-visible (mesma especificidade, regra posterior) */
.btn--ghost:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent-ink),0 0 0 7px rgba(3,199,208,.45)}
.btn--on-dark.btn--ghost:focus-visible{box-shadow:inset 0 0 0 1.5px var(--brand-cyan-500),0 0 0 7px rgba(3,199,208,.6)}
.btn .arrow{transition:transform var(--d-base) var(--e-out)}
.btn:hover .arrow--down{transform:translateY(3px)}
.btn:hover .arrow--right{transform:translateX(3px)}

/* shiny-cta: borda de gradiente giratória + glow ciano (assinatura do DS) */
.shiny-cta{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:54px;
  padding:1.05em 2em;border-radius:var(--radius-pill);
  font-family:var(--font-sans);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;
  color:#fff;background:var(--brand-navy-900);border:1px solid transparent;
  box-shadow:0 12px 34px -10px rgba(2,70,127,.7);
  transition:transform var(--d-base) var(--e-spring),translate var(--d-fast) var(--e-out),box-shadow var(--d-base);
  --shiny-angle:0deg;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.shiny-cta svg{width:1.2em;height:1.2em;flex:none}
.shiny-cta::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;padding:2px;
  background:conic-gradient(from var(--shiny-angle),transparent 0deg,#03c7d0 60deg,#0398ba 120deg,transparent 180deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:shinyspin 4s linear infinite;
}
.shiny-cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
  background:radial-gradient(120% 120% at 50% 120%,rgba(3,199,208,.6),transparent 60%);
  transition:opacity var(--d-base);
}
.shiny-cta:hover{box-shadow:0 18px 44px -12px rgba(3,199,208,.7),0 0 0 6px rgba(3,199,208,.08)}
.shiny-cta:hover::after{opacity:1}
.shiny-cta:active{transform:scale(.97)}
.shiny-cta .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none}
.shiny-cta .shine::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-150%) skewX(-18deg);animation:sweep 5.5s var(--e-smooth) 2.2s infinite;
}
@property --shiny-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes shinyspin{to{--shiny-angle:360deg}}
@keyframes sweep{0%{transform:translateX(-150%) skewX(-18deg)}28%,100%{transform:translateX(325%) skewX(-18deg)}}
.magnetic{will-change:translate}

/* ============================ 8. HERO ============================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 48px) 0 110px;background:var(--bg-ink);color:var(--text-light);
  overflow:clip;isolation:isolate;
}
.hero__media{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:0;overflow:hidden}
.hero__media picture{position:absolute;inset:0 0 -16% 0}
.hero__img{
  width:100%;height:100%;object-fit:cover;object-position:52% 30%;
  filter:saturate(1.04) contrast(1.03);will-change:transform;
}
.js .hero__img{animation:heroIn 2.4s var(--e-cine) both}
@keyframes heroIn{0%{opacity:0;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.hero__media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg-ink) 0%,rgba(4,24,46,.9) 10%,rgba(4,24,46,.45) 32%,rgba(4,24,46,.08) 56%,rgba(4,24,46,0) 70%),
    linear-gradient(180deg,rgba(4,24,46,.5) 0%,rgba(4,24,46,0) 22%,rgba(4,24,46,0) 66%,rgba(4,24,46,.78) 100%);
}
.hero .ambient-glow .g2{left:18vw;top:36vh}
.hero__spot{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s var(--e-smooth);
  background:radial-gradient(520px circle at var(--mx,30%) var(--my,40%),rgba(3,199,208,.13),transparent 62%);
}
.hero:hover .hero__spot{opacity:1}
.hero .container-wide{position:relative;z-index:3}
.hero__copy{max-width:min(780px,60vw)}
.hero__title{
  font-family:var(--font-display);font-weight:600;color:var(--text-light);
  font-size:clamp(2.6rem,5vw,4.9rem);line-height:1;letter-spacing:-.03em;margin-top:26px;
}
.hero__title .ln{display:block;padding-bottom:.06em}
.hero__title em.accent{
  background:linear-gradient(100deg,var(--brand-teal-500) 0%,var(--brand-teal-500) 38%,#c9fbfd 50%,var(--brand-teal-500) 62%,var(--brand-teal-500) 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand-teal-500);
}
.js .hero__title em.accent{animation:accentSweep 2.2s var(--e-smooth) 1.5s both}
@keyframes accentSweep{0%{background-position:100% 0}100%{background-position:0 0}}
/* parágrafos do hero: subtítulo e identificação usam A MESMA regra (CFM / CODAME) */
.hero__text{font-family:var(--font-sans);font-size:1.0625rem;line-height:1.65;font-weight:400;color:var(--text-muted-dark);max-width:47ch}
.hero__lede{margin-top:18px}
.hero__title + .hero__lede{margin-top:28px}
.hero__id{
  position:relative;margin-top:28px;padding-left:20px;
  border-left:1px solid rgba(3,199,208,.3);
}
.hero__id::before{
  content:"";position:absolute;left:-2px;top:0;width:3px;height:34%;border-radius:3px;
  background:linear-gradient(180deg,transparent,var(--brand-cyan-500),transparent);box-shadow:0 0 14px rgba(3,199,208,.7);
  transform:translateY(-100%);animation:railDown var(--d-rail) linear 1.6s infinite;opacity:0;
}
@keyframes railDown{0%{transform:translateY(-100%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(294%);opacity:0}}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
/* chips do hero: componente .chip do design system */
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:.5em;padding:.5em .95em;border-radius:var(--radius-pill);
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  background:rgba(255,255,255,.06);color:var(--text-light);border:1px solid var(--border-dark);
  transition:transform var(--d-base) var(--e-spring),background var(--d-base),border-color var(--d-base);
}
.chip svg{width:1em;height:1em;color:var(--brand-cyan-500);flex:none}
.chip:hover{transform:translateY(-2px);border-color:var(--border-cyan);background:rgba(3,199,208,.08)}
.hero__micro{display:flex;align-items:center;gap:.55em;margin-top:18px;font-size:.9rem;color:var(--text-muted-dark)}
.hero__micro svg{width:1.05em;height:1.05em;color:var(--brand-cyan-500);flex:none}

/* selo giratório sobre a foto */
.seal{position:relative;width:132px;height:132px;flex:none}
.seal__spin{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite;overflow:visible}
.seal__spin text{font-family:var(--font-mono);font-size:8.6px;font-weight:600;fill:currentColor;letter-spacing:1.4px}
.seal__core{
  position:absolute;inset:25%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);box-shadow:var(--shadow-glow-teal),inset 0 2px 6px rgba(255,255,255,.25);
}
.seal__core img{width:64%;height:auto}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .seal{position:absolute;z-index:3;right:clamp(28px,4vw,72px);bottom:clamp(40px,8vh,90px);color:var(--brand-cyan-200);border-radius:50%;background:rgba(8,30,54,.55);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 20px 40px -12px rgba(0,0,0,.5)}
.hero .seal::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(143,230,234,.22)}

.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted-dark);font-size:.66rem;text-transform:uppercase;letter-spacing:.24em}
.scroll-cue .mouse{width:24px;height:38px;border:1.5px solid rgba(255,255,255,.2);border-radius:14px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--brand-cyan-500);transform:translateX(-50%);animation:scrolldot 1.8s var(--e-out) infinite}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ===================== 9. MARQUEE (dobra 02) ===================== */
.marquee{
  position:relative;z-index:1;overflow:hidden;padding:22px 0;border-bottom:1px solid var(--border-light);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  display:inline-flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap;
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--brand-navy-700);opacity:.78;
}
.marquee__track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-cyan-500);box-shadow:0 0 10px rgba(3,199,208,.8)}
@keyframes marquee{to{transform:translateX(-25%)}}
#dor-cronica{padding-top:0}
#dor-cronica .def-grid{margin-top:clamp(64px,8vw,120px)}

/* ================= 10. DOBRA 02 · DEFINIÇÃO + GRADE =============== */
.def-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:stretch}
.def-copy .h2 em.accent{color:var(--brand-petrol-600)}
.def-copy .body-lg{margin-top:22px;max-width:52ch}
.def-photo{position:relative;border-radius:var(--radius-blob) 0 0 var(--radius-blob);overflow:hidden;min-height:520px;margin-right:calc(var(--gutter)*-1 - max(0px,(100vw - var(--container) - var(--gutter)*2)/2));box-shadow:var(--shadow-3)}
.def-photo picture,.def-photo img{position:absolute;inset:0;width:100%;height:100%}
.def-photo img{object-fit:cover;object-position:56% 34%;filter:saturate(.92) contrast(1.02)}
.def-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,24,46,0) 55%,rgba(4,24,46,.45)),linear-gradient(90deg,rgba(4,24,46,.25),transparent 40%);pointer-events:none}

/* gráfico aguda × crônica */
.curve-card{
  position:relative;margin-top:36px;padding:26px 26px 22px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 50px -24px rgba(4,24,46,.28),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.curve-card svg{width:100%;height:auto;overflow:visible}
.curve-axis,.curve-grid,.curve-mark{fill:none}
.curve-axis{stroke:rgba(14,39,64,.2);stroke-width:1}
.curve-grid{stroke:rgba(14,39,64,.07);stroke-width:1}
.curve-mark{stroke:var(--brand-petrol-600);stroke-width:1.2;stroke-dasharray:4 5}
.curve-mark-bg{fill:rgba(3,199,208,.07)}
.curve-mark-label{font-family:var(--font-mono);font-size:12px;font-weight:600;fill:var(--accent-ink);letter-spacing:.06em}
.curve-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.curve-acute{stroke:#8fa6b8;stroke-width:2.2}
.curve-chronic{stroke:url(#chronic-grad);stroke-width:3.2}
.js .curve-draw{stroke-dashoffset:1;stroke-dasharray:1}
.reveal-active .curve-draw{animation:drawLine 2.2s var(--e-cine) .35s forwards}
.reveal-active .curve-acute.curve-draw{animation-delay:.15s}
@keyframes drawLine{to{stroke-dashoffset:0}}
.curve-dot{fill:var(--brand-cyan-500);filter:drop-shadow(0 0 6px rgba(3,199,208,.9));opacity:0;transition:opacity .6s var(--e-out)}
.curve-dot.on{opacity:1}
.curve-legend{display:grid;gap:12px;margin-top:18px}
.curve-legend p{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;font-size:1rem;line-height:1.55;color:var(--text-body)}
.curve-legend i{display:block;height:3px;border-radius:2px;transform:translateY(-4px)}
.curve-legend .k-acute{background:#8fa6b8}
.curve-legend .k-chronic{background:var(--grad-shine);box-shadow:0 0 8px rgba(3,199,208,.6)}

/* grade das sete condições + cartão de escopo: oito cartões iguais (4 × 2) */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:18px;margin-top:clamp(56px,7vw,96px)}
.cond{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;min-height:230px;
  padding:28px 28px 30px;border-radius:var(--radius-md);
  background:var(--surface-white);border:1px solid rgba(2,53,104,.12);box-shadow:var(--shadow-card);
  transition:translate var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-smooth),border-color var(--d-base);
}
.cond::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--d-slow) var(--e-smooth);
  background:radial-gradient(360px circle at var(--x,50%) var(--y,0%),rgba(3,199,208,.13),transparent 60%);
}
.cond::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--x,50%) var(--y,0%),rgba(3,199,208,.9),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity var(--d-slow) var(--e-smooth);
}
.cond:hover{translate:0 -5px;box-shadow:var(--shadow-2)}
.cond:hover::before,.cond:hover::after{opacity:1}
.cond__icon{
  position:relative;width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(3,199,208,.10),rgba(2,70,127,.06));border:1px solid rgba(2,70,127,.10);
  color:var(--brand-navy-700);transition:transform var(--d-base) var(--e-spring),background var(--d-base);
}
.cond:hover .cond__icon{transform:rotate(-4deg) scale(1.05)}
.cond__icon svg{width:34px;height:34px;overflow:visible}
.cond__icon .ic{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cond__icon .pt{fill:var(--brand-cyan-500);stroke:none;transform-box:fill-box;transform-origin:center}
.cond__icon .pt-halo{fill:none;stroke:var(--brand-cyan-500);stroke-width:1;transform-box:fill-box;transform-origin:center;opacity:0}
.cond:hover .pt-halo,.cond:focus-within .pt-halo{animation:ping 1.6s var(--e-out) infinite}
@keyframes ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.cond h3{font-size:clamp(1.3rem,1.8vw,1.55rem);letter-spacing:-.01em;margin-top:6px}
.cond p{font-size:1rem;line-height:1.6;color:var(--text-body);max-width:46ch}
/* 8º cartão: limite do escopo (copy da dobra 02), visualmente distinto das condições */
.cond--scope{background:transparent;border:1px dashed rgba(2,125,159,.45);box-shadow:none;justify-content:center}
.cond--scope .cond__icon{color:var(--brand-petrol-600)}
.cond--scope .cond__icon svg{width:28px;height:28px}
.cond--scope p{font-family:var(--font-display);font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.3;color:var(--text-dark);font-weight:500}
.cond--scope:hover{background:rgba(255,255,255,.5)}
/* ícones 3D (Remotion · 09_SITES/icones-3d): pôster WebP + vídeo com alfa (WebM VP9 / HEVC no Safari).
   data-icons="2d" na .bento volta aos ícones de linha sem apagar nada. */
.bento[data-icons="3d"] .cond__icon{width:84px;height:84px;border-radius:24px;overflow:hidden}
/* o 3D só assume quando o pôster carrega (JS põe .is-3d); sem arquivo ou sem JS, fica o ícone de linha */
.bento[data-icons="3d"] .cond__icon.is-3d > svg{display:none}
.cond__3d-poster,.cond__3d{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:transparent}
.cond__icon:not(.is-3d) .cond__3d-poster,.cond__icon:not(.is-3d) .cond__3d{opacity:0!important}
.cond__3d{opacity:0;transition:opacity .35s var(--e-out)}
.cond__icon.is-live .cond__3d{opacity:1}
.cond__icon.is-live .cond__3d-poster{opacity:0;transition:opacity .2s linear .15s}
.bento:not([data-icons="3d"]) .cond__3d-poster,.bento:not([data-icons="3d"]) .cond__3d{display:none}
/* ícones 2D sem moldura (2026-10-02): só o símbolo, sem fundo nem borda, alinhado ao título e maior (34 -> 44 px).
   Só no modo 2D; o modo 3D mantém o ladrilho. */
.bento:not([data-icons="3d"]) .cond__icon{width:auto;height:auto;border:0;border-radius:0;background:none;justify-content:flex-start;align-self:flex-start;transform-origin:left center}
.bento:not([data-icons="3d"]) .cond__icon svg{width:44px;height:44px}
.bento:not([data-icons="3d"]) .cond--scope .cond__icon svg{width:36px;height:36px}

/* ============ 10b. DOBRA 02b · ÁREA DE ATUAÇÃO EM DOR (copy original, dobra 04) ============ */
/* filete superior em azul-petróleo (direção de arte da copy) */
.area::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:min(1120px,86%);height:2px;background:linear-gradient(90deg,transparent,var(--brand-petrol-600) 22%,var(--brand-cyan-500) 50%,var(--brand-petrol-600) 78%,transparent)}
.area-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.area-copy .eyebrow{margin-bottom:20px}
.area-sub{margin-top:20px;max-width:56ch}
.area-body{margin-top:28px;display:grid;gap:16px;max-width:62ch}
.area-body p{font-size:clamp(1.02rem,1.2vw,1.1rem);line-height:1.65;color:var(--text-body)}
.area-fig{position:relative;margin:0;justify-self:center;width:min(100%,440px)}
/* halo ciano em volta do painel escuro do holograma */
.area-fig::before{content:"";position:absolute;inset:-6% -10% 4%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 46% at 50% 46%,rgba(3,199,208,.16),rgba(3,199,208,.05) 58%,transparent 74%)}
/* sem card, o halo de fundo some: a silhueta fica direto sobre o branco */
.area-fig:not(:has(.holo--card))::before{display:none}
/* ---- holograma (referência: holograma-humano-design.json) ----
   Sem card (pedido de 2026-10-02): a figura fica direto na dobra branca. Como a referência é luz clara sobre
   escuro, a imagem usada no claro é a variante "tinta" (holograma-humano-claro.webp: mesmos traços e partículas
   em petróleo/navy, sem névoa) e os efeitos usam multiply em vez de screen. Dentro, um palco na proporção da
   imagem (667 × 1000) com: sombra/brilho do chão, a figura, uma camada de bloom que respira (5 s) e os pontos de
   dor. As partículas são um <canvas> sobre a caixa inteira (site.js; cores em --dust-rgb/--dust-bright-rgb).
   Para voltar ao painel navy: classe .holo--card + src holograma-humano.webp. */
.holo{position:relative;z-index:1;aspect-ratio:667/1000;container-type:inline-size;
  /* claro, versão limpa (2026-10-02): brilho, bloom, chão e partículas difusas bem discretos para a silhueta ler limpa */
  --fig-glow:drop-shadow(0 0 3px rgba(3,199,208,.12));
  --ground-bg:radial-gradient(ellipse at center,rgba(2,125,159,.14),rgba(3,199,208,.04) 45%,transparent 70%);
  --bloom-blend:multiply;
  --bloom-bg:radial-gradient(22% 14% at 50% 25%,rgba(3,199,208,.09),transparent 70%),radial-gradient(16% 7% at 49% 89%,rgba(2,125,159,.1),transparent 70%);
  --halo-blend:multiply;
  --halo-bg:radial-gradient(circle,rgba(3,199,208,.38) 0%,rgba(3,199,208,.18) 32%,rgba(3,199,208,.06) 55%,transparent 70%);
  --core-ring:rgba(2,68,100,.7);--ring-color:rgba(2,125,159,.9);--ring-glow:rgba(3,199,208,.45);
  --dust-rgb:2,125,159;--dust-bright-rgb:2,44,91;--dust-soft:.3;
  --tip-bg:var(--brand-navy-900);--tip-fg:#fff;--tip-line:rgba(255,255,255,.08);
  --wash-color:rgba(3,199,208,.55);--wash-mask:url(../img/holograma-humano-claro.webp)}
.holo--card{aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  background:radial-gradient(62% 52% at 50% 46%,#0b2f52 0%,#06213d 48%,#03142a 82%);
  border:1px solid rgba(143,230,234,.22);box-shadow:var(--shadow-float),inset 0 0 0 1px rgba(255,255,255,.04);
  --fig-glow:drop-shadow(0 0 6px rgba(63,224,224,.5)) drop-shadow(0 0 18px rgba(63,224,224,.28));
  --ground-bg:radial-gradient(ellipse at center,rgba(161,225,224,.55),rgba(63,224,224,.18) 45%,transparent 70%);
  --bloom-blend:screen;
  --bloom-bg:radial-gradient(22% 14% at 50% 25%,rgba(63,224,224,.34),transparent 70%),radial-gradient(16% 7% at 49% 89%,rgba(161,225,224,.5),transparent 70%);
  --halo-blend:screen;
  --halo-bg:radial-gradient(circle,rgba(246,255,255,.5) 0%,rgba(63,224,224,.36) 32%,rgba(63,224,224,.12) 55%,transparent 70%);
  --core-ring:rgba(3,20,42,.55);--ring-color:rgba(220,252,255,.95);--ring-glow:rgba(63,224,224,.7);
  --dust-rgb:161,225,224;--dust-bright-rgb:246,255,255;--dust-soft:.8;
  --tip-bg:#fff;--tip-fg:var(--brand-navy-900);--tip-line:rgba(2,44,91,.12);
  --wash-color:rgba(161,240,244,.9);--wash-mask:url(../img/holograma-humano.webp)}
/* sem z-index nas camadas: a ordem do DOM manda (canvas -> chão -> figura -> bloom -> pontos) e multiply/screen
   misturam com figura, partículas e, no card, o navy; z-index aqui isolaria o blend */
.holo__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.holo__stage{position:absolute;inset:0;margin:auto;height:100%;aspect-ratio:667/1000;max-width:100%}
.holo__figure{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:var(--fig-glow)}
/* chão: elipse de luz/sombra sob os pés (pés em y≈90 % do quadro) */
.holo__ground{position:absolute;left:50%;top:90.5%;width:40%;aspect-ratio:4/1;translate:-50% -50%;border-radius:50%;opacity:.55;
  background:var(--ground-bg);filter:blur(8px);animation:holoBreath 5s var(--e-smooth) infinite}
/* bloom: respira sobre o peito e os pés (multiply no claro, screen no card) */
.holo__bloom{position:absolute;inset:0;pointer-events:none;mix-blend-mode:var(--bloom-blend);opacity:.55;
  background:var(--bloom-bg);animation:holoBreath 5s var(--e-smooth) infinite}
@keyframes holoBreath{0%,100%{opacity:.55}50%{opacity:1}}
/* pontos de dor: o núcleo fica sempre visível (marca a região) e, a cada 2,5 s, um deles acende:
   halo ciano na região, núcleo cresce e dois anéis de sonar se expandem. Ciclo de 10 s.
   Com movimento reduzido as animações terminam no estado de repouso (núcleo aceso, anéis e halo apagados). */
/* 5 pontos, um a cada 2,5 s. As regras .holo__wash e .holo-chip abaixo ficaram sem uso (botões comentados no HTML em 2026-10-02). */
.area-fig,.holo{--holo-cycle:12.5s}
/* corpo inteiro aceso: camada ciano recortada pela própria figura (máscara = WebP com alfa) */
.holo__wash{position:absolute;inset:0;pointer-events:none;background:var(--wash-color);mix-blend-mode:var(--bloom-blend);
  -webkit-mask:var(--wash-mask) center/100% 100% no-repeat;mask:var(--wash-mask) center/100% 100% no-repeat;
  opacity:0;animation:holoWash var(--holo-cycle) var(--e-smooth) infinite;animation-delay:var(--d);transition:opacity 200ms var(--e-out)}
/* dor oncológica: acendimento mais suave que o do corpo todo, para não sugerir dor espalhada pelo corpo (Res. CFM 2.336/2023, sem tom alarmista) */
.holo .holo__wash--onco{background:rgba(3,199,208,.3)}
.holo--card .holo__wash--onco{background:rgba(161,240,244,.5)}
.area-fig:has(.holo-chip[data-wash="corpo"]:is(:hover,:focus-visible,.is-tip)) .holo__wash--corpo,
.area-fig:has(.holo-chip[data-wash="onco"]:is(:hover,:focus-visible,.is-tip)) .holo__wash--onco{animation:none;opacity:1}
/* botões das dores sem ponto único (abaixo da figura) */
.holo-chips{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.holo-chip{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px 10px 14px;border-radius:var(--radius-pill);
  border:1px solid rgba(2,125,159,.28);background:var(--surface-white);color:var(--text-dark);font:600 .92rem/1.2 var(--font-sans);letter-spacing:.005em;
  cursor:help;box-shadow:0 6px 18px -10px rgba(2,44,91,.35);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color 200ms var(--e-out),background-color 200ms var(--e-out),box-shadow 200ms var(--e-out)}
.holo-chip::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--brand-cyan-500);box-shadow:0 0 16px rgba(3,199,208,.45);
  opacity:0;pointer-events:none;animation:holoWash var(--holo-cycle) var(--e-smooth) infinite;animation-delay:var(--d)}
.holo-chip__dot{position:relative;width:10px;height:10px;flex:none;border-radius:50%;background:var(--brand-cyan-500);
  box-shadow:0 0 0 3px rgba(3,199,208,.18),0 0 10px rgba(3,199,208,.55)}
.holo-chip:hover,.holo-chip:focus-visible,.holo-chip.is-tip{border-color:var(--brand-petrol-600);background:rgba(3,199,208,.08);box-shadow:0 8px 22px -10px rgba(2,125,159,.55)}
.holo-chip:focus-visible{border-radius:var(--radius-pill)}
.holo-pts{position:absolute;inset:0;pointer-events:none}
/* cada ponto é um botão de 44 px (alvo de toque) centrado no ponto. Sem transform/translate no botão: ele não pode
   criar contexto de empilhamento, senão o multiply/screen do halo deixa de misturar com a figura. */
.holo-pt{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;
  background:none;color:inherit;font:inherit;cursor:help;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.holo-pt:focus-visible{border-radius:50%}
/* tamanhos em cqi (largura do painel): núcleo 3,2 %, anéis 14 %, halo 24 %; px fixos como reserva */
.holo-pt::before,.holo-pt::after,.holo-pt i{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;pointer-events:none}
.holo-pt::after{width:100px;height:100px;width:24cqi;height:24cqi;mix-blend-mode:var(--halo-blend);background:var(--halo-bg);
  opacity:0;transform:scale(.6);animation:holoHalo var(--holo-cycle) var(--e-smooth) infinite;animation-delay:var(--d)}
.holo-pt::before{width:14px;height:14px;width:3.2cqi;height:3.2cqi;z-index:1;
  background:radial-gradient(circle,#ffffff 0%,#ffffff 36%,#b9f7fb 60%,#3fe0e0 100%);
  box-shadow:0 0 0 3px var(--core-ring),0 0 0 4.5px rgba(178,246,250,.8),0 0 16px 5px rgba(63,224,224,.7),0 0 36px 12px rgba(63,224,224,.3);
  box-shadow:0 0 0 .7cqi var(--core-ring),0 0 0 1cqi rgba(178,246,250,.8),0 0 3.6cqi 1.1cqi rgba(63,224,224,.7),0 0 8cqi 2.7cqi rgba(63,224,224,.3);
  opacity:.62;transform:scale(.7);animation:holoCore var(--holo-cycle) var(--e-smooth) infinite;animation-delay:var(--d)}
.holo-pt i{width:60px;height:60px;width:14cqi;height:14cqi;border:2px solid var(--ring-color);
  box-shadow:0 0 14px var(--ring-glow),inset 0 0 10px var(--ring-glow);opacity:0;transform:scale(.25);
  animation:holoRing var(--holo-cycle) var(--e-out) infinite;animation-delay:var(--d)}
.holo-pt i:nth-child(2){animation-delay:calc(var(--d) + .55s)}
@keyframes holoCore{0%,21.7%,100%{opacity:.62;transform:scale(.7)}4.2%,15.4%{opacity:1;transform:scale(1.25)}}
@keyframes holoRing{0%{opacity:0;transform:scale(.25)}2%{opacity:.95}12%{opacity:0;transform:scale(2.1)}12.1%,100%{opacity:0;transform:scale(.25)}}
@keyframes holoHalo{0%,22.4%,100%{opacity:0;transform:scale(.6)}4.8%,14.4%{opacity:1;transform:scale(1)}}
@keyframes holoWash{0%,16%,100%{opacity:0}3.4%,10.3%{opacity:1}}
/* ponto em destaque (hover, foco ou toque): núcleo e halo acesos e parados enquanto o tooltip está aberto */
.holo-pt:hover::before,.holo-pt:focus-visible::before,.holo-pt.is-tip::before{animation:none;opacity:1;transform:scale(1.2)}
.holo-pt:hover::after,.holo-pt:focus-visible::after,.holo-pt.is-tip::after{animation:none;opacity:.85;transform:scale(.85)}
/* tooltip com o nome da região: acima do ponto, com seta; continua aberto com o ponteiro sobre ele (WCAG 1.4.13) */
.holo-pt__tip{position:absolute;left:50%;bottom:calc(50% + 16px);z-index:5;white-space:nowrap;
  padding:7px 12px 8px;border-radius:10px;background:var(--tip-bg);color:var(--tip-fg);
  font-family:var(--font-sans);font-size:.875rem;font-weight:600;line-height:1.2;letter-spacing:.01em;
  box-shadow:0 10px 24px -8px rgba(2,44,91,.45),0 0 0 1px var(--tip-line);
  opacity:0;transform:translate(-50%,6px) scale(.96);transform-origin:50% 100%;pointer-events:none;
  transition:opacity 160ms var(--e-out),transform 200ms var(--e-out)}
.holo-pt__tip::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;margin:-5px 0 0 -5px;
  background:inherit;transform:rotate(45deg);border-radius:0 0 3px 0;box-shadow:1px 1px 0 0 var(--tip-line)}
.holo-pt:hover .holo-pt__tip,.holo-pt:focus-visible .holo-pt__tip,.holo-pt.is-tip .holo-pt__tip{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
/* tooltip automático, em sincronia com o piscar do ponto (JS: classe is-tip--auto). Mostra o nome sem
   capturar o ponteiro e sem parar o pulso; hover/foco/toque continuam mandando. */
.holo-pt.is-tip--auto .holo-pt__tip{opacity:1;transform:translate(-50%,0) scale(1)}
.holo-pt.tip-off .holo-pt__tip{opacity:0;transform:translate(-50%,6px) scale(.96);pointer-events:none}
@supports not (aspect-ratio:1/1){
  /* Safari/iOS <= 14: altura por padding (1000/667 = 149,925 %; card 3/4) */
  .holo{height:0;padding-top:149.925%}
  .holo--card{padding-top:133.333%}
  .holo__ground{height:0;padding-top:10%}
}
/* quatro blocos com marcador discreto, sem cartão fechado */
.area-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(32px,5vw,72px);margin-top:clamp(52px,6vw,84px)}
.area-points li{position:relative;padding-top:22px;border-top:1px solid var(--border-light)}
.area-points li::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:2px;border-radius:2px;background:var(--grad-shine)}
.area-points h3{font-size:clamp(1.25rem,1.6vw,1.45rem);letter-spacing:-.01em;color:var(--text-dark)}
.area-points p{margin-top:10px;font-size:1.02rem;line-height:1.65;color:var(--text-body);max-width:58ch}
.area-notes{margin-top:clamp(40px,5vw,60px);display:grid;gap:12px;max-width:74ch}
.area-note{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:14px;background:rgba(3,199,208,.06);border:1px solid rgba(2,125,159,.16);font-size:1rem;line-height:1.6;color:var(--text-dark)}
.area-note svg{width:19px;height:19px;flex:none;margin-top:.2em;color:var(--brand-petrol-600)}
.area-disclaimer{font-size:.88rem;line-height:1.55;color:var(--text-muted)}

/* ===================== 11. DOBRA 03 · TRATAMENTO ================== */
/* faixa .steps-band removida em 2026-10-01 (backup em 09_SITES/_versoes); a dobra volta ao padding padrão */
/* foto em faixa (ribbon) igual à da dobra Definição e escopo, espelhada (2026-10-02): maior, sangra até a borda
   esquerda da tela e acompanha a altura das duas colunas de tratamento. No celular volta a ser cartão (ver media 1024). */
.treat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(32px,5vw,72px);align-items:stretch}
.treat-photo{position:relative;margin:0 0 0 calc(var(--gutter)*-1 - max(0px,(100vw - var(--container) - var(--gutter)*2)/2));
  min-height:560px;border-radius:0 var(--radius-blob) var(--radius-blob) 0;overflow:hidden;box-shadow:var(--shadow-3)}
.treat-photo .clip-reveal{position:absolute;inset:0}
.treat-photo picture{position:absolute;inset:0;height:100%}
/* foto 0J4A5054 (retrato 2:3): enquadra do rosto aos braços cruzados */
.treat-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;filter:saturate(.92) contrast(1.02)}
.treat-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,24,46,0) 55%,rgba(4,24,46,.45)),linear-gradient(270deg,rgba(4,24,46,.25),transparent 40%);pointer-events:none}
.treat-cols{display:grid;grid-template-columns:1fr 1fr;position:relative}
.treat-cols::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(2,125,159,.3),rgba(2,125,159,.3) 80%,transparent)}
.treat-col{padding:6px clamp(20px,3vw,40px) 0}
.treat-col:first-child{padding-left:0}
.treat-col:last-child{padding-right:0}
.treat-col h3{
  display:flex;align-items:center;gap:.7em;font-family:var(--font-sans);font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--brand-petrol-600);padding-bottom:18px;margin-bottom:6px;
  border-bottom:1px solid var(--border-light);
}
.treat-col h3 b{font-family:var(--font-mono);font-weight:600;letter-spacing:.04em;color:var(--brand-navy-700)}
.treat-item{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--border-light)}
.treat-item:last-child{border-bottom:0}
.treat-item__ic{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(3,199,208,.09);color:var(--brand-navy-700);transition:background var(--d-base),color var(--d-base),box-shadow var(--d-base);
}
.treat-item:hover .treat-item__ic{background:var(--brand-navy-800);color:#fff;box-shadow:0 0 0 6px rgba(3,199,208,.12)}
.treat-item__ic svg{width:22px;height:22px}
.treat-item h4{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--text-dark);line-height:1.2}
.treat-item p{margin-top:6px;font-size:1rem;line-height:1.6;color:var(--text-body)}
.treat-item--risk .treat-item__ic{background:rgba(2,70,127,.10)}

/* faixa dos quatro marcos (navy) */
.steps-band{position:relative;margin-top:clamp(64px,8vw,110px);padding:clamp(56px,7vw,96px) 0;overflow:clip;background:var(--grad-ink);color:var(--text-light)}
.steps-band .container{position:relative;z-index:1}
.steps-wrap{position:relative}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.5vw,32px)}
.steps__rail{position:absolute;left:24px;right:24px;top:24px;height:1px;background:linear-gradient(90deg,rgba(3,199,208,.45),rgba(3,199,208,.18));overflow:hidden;container-type:inline-size}
.steps__rail::after{
  content:"";position:absolute;top:-1px;left:0;width:120px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(3,199,208,.95),transparent);box-shadow:0 0 16px rgba(3,199,208,.7);
  transform:translateX(-120px);animation:railRight var(--d-rail) linear infinite;
}
@keyframes railRight{0%{transform:translateX(-120px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(100cqw);opacity:0}}
.step{position:relative}
.step__n{
  position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:#fff;
  background:var(--bg-deep);border:1px solid rgba(3,199,208,.55);box-shadow:0 0 0 6px rgba(4,24,46,1),0 0 24px -4px rgba(3,199,208,.55);
}
.step p{margin-top:22px;font-size:1rem;line-height:1.6;color:var(--text-muted-dark)}
.step__t{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:1.28rem;font-weight:600;color:#fff;line-height:1.2}
.step__d{display:block}

/* ======================= 12. DOBRA 04 · O MÉDICO (hero editorial) ================== */
/* a foto ocupa a dobra; a formação é o destaque; os registros ficam em badges .chip, iguais aos da hero (2026-10-01) */
.doc-hero{
  position:relative;display:flex;flex-direction:column;min-height:clamp(780px,100svh,1060px);
  padding:calc(var(--nav-h) + 36px) 0 clamp(44px,5vw,72px);
  scroll-margin-top:calc(-1 * (var(--nav-h) + 16px)); /* o padding-top já livra a navbar: a âncora #o-medico para rente ao topo */
  background:var(--bg-ink);color:var(--text-light);overflow:clip;isolation:isolate;
}
.doc-hero__media{position:absolute;top:0;right:0;bottom:0;width:64%;margin:0;z-index:0;overflow:hidden}
.js .doc-hero__media.reveal-item{opacity:1}
.doc-hero__media.reveal-active{animation:none}
.doc-hero__clip{position:absolute;inset:0}
/* sobra de 9% em cima e embaixo para o parallax (o JS move o <picture> até ±8% da altura da moldura) */
.doc-hero__media picture{position:absolute;inset:-9% 0;will-change:transform}
.doc-hero__img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:saturate(.96) contrast(1.04);transform-origin:60% 35%}
/* entrada em 1,1 s (era 2,4 s: lida como "foto demorando para carregar") */
.reveal-active .doc-hero__img{animation:docImgIn 1.1s var(--e-cine) both}
@keyframes docImgIn{0%{transform:scale(1.06)}100%{transform:scale(1)}}
.doc-hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg-ink) 0%,rgba(4,24,46,.88) 12%,rgba(4,24,46,.4) 34%,rgba(4,24,46,.05) 58%,rgba(4,24,46,0) 72%),
    linear-gradient(180deg,rgba(4,24,46,.6) 0%,rgba(4,24,46,0) 22%,rgba(4,24,46,0) 50%,rgba(4,24,46,.74) 74%,var(--bg-ink) 100%);
}

.doc-hero__inner{
  position:relative;z-index:3;flex:1;display:grid;width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;
}
.doc-hero__head{grid-column:1;grid-row:1;max-width:min(640px,50vw)}
.doc-hero__title{
  margin-top:24px;font-family:var(--font-display);font-weight:600;color:var(--text-light);
  font-size:clamp(2.5rem,4.6vw,4.4rem);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;
}
.doc-hero__title em.accent{
  color:var(--brand-cyan-200);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:rgba(143,230,234,.55);
}
/* registros em badges, o mesmo .chip da hero */
.doc-hero__chips{margin-top:28px}
.doc-hero__chips abbr{text-decoration:none;cursor:help}
/* formação: o destaque da dobra, faixa horizontal no pé */
.doc-tl{grid-column:1 / -1;grid-row:3;margin-top:clamp(40px,5vw,64px)}
.doc-tl__label{font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brand-cyan-200);margin-bottom:22px}
.doc-tl__track{position:relative;container-type:inline-size}
/* Linha única no topo do trilho só vale no mobile (vira vertical lá). No desktop a linha é desenhada por item (li::after), para acompanhar cada linha da grade quando os 5 marcos quebram em 2 linhas (2026-10-06). */
.doc-tl__track::before{content:"";display:none;position:absolute;left:0;right:0;top:7px;height:1px;background:linear-gradient(90deg,rgba(143,230,234,.55),rgba(143,230,234,.18))}
.doc-tl__rail{position:absolute;left:0;right:0;top:5px;height:5px;overflow:hidden;pointer-events:none}
.doc-tl__rail::after{content:"";position:absolute;top:0;left:0;width:120px;height:5px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(3,199,208,.95),transparent);box-shadow:0 0 16px rgba(3,199,208,.6);transform:translateX(-120px);animation:railRight var(--d-rail) linear infinite}
.doc-tl__list{--doc-tl-gap:clamp(24px,4vw,64px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--doc-tl-gap)}
.doc-tl__list li{position:relative;padding-top:34px}
/* Cada item estende sua linha até o ponto seguinte (cobre o gap) para o trilho ficar contínuo; o último de cada linha para na própria borda, sem vazar. */
.doc-tl__list li::after{content:"";position:absolute;left:0;right:calc(var(--doc-tl-gap) * -1);top:7px;height:1px;background:linear-gradient(90deg,rgba(143,230,234,.55),rgba(143,230,234,.18));pointer-events:none}
.doc-tl__list li:nth-child(5n)::after,.doc-tl__list li:last-child::after{right:0}
.doc-tl__list li::before{content:"";position:absolute;z-index:1;left:0;top:0;width:15px;height:15px;border-radius:50%;background:var(--bg-ink);border:3px solid var(--brand-cyan-500);box-shadow:0 0 0 5px rgba(3,199,208,.14)}
.doc-tl__list li:last-child::before{background:var(--brand-cyan-500);box-shadow:0 0 0 5px rgba(3,199,208,.18),0 0 18px rgba(3,199,208,.7)}
@media (min-width:761px) and (max-width:1279px){
  .doc-tl__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doc-tl__list li:nth-child(3n)::after{right:0}
}
.doc-tl__year{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,4.4vw,4.2rem);font-weight:600;line-height:.95;letter-spacing:-.02em;color:#fff}
.doc-tl__list p{margin-top:12px;max-width:34ch;font-size:1rem;line-height:1.6;color:var(--text-muted-dark)}

/* ============ 13. DOBRA 05 · A CONSULTA (2026-10-02 · ficha editorial em 2026-10-05) ============ */
/* Linha 1 (grade em Z a partir de 1024 px): título + FICHA das clínicas + faixa de cálculo à esquerda (5/12);
   mapa vetorial do Jardins (7/12) e, sob ele, o CTA "Agendar consulta" à direita. Abaixo de 1024 px empilha:
   título → ficha → mapa → faixa → CTA.
   Ficha (2026-10-05, conceito A "Ficha editorial", júri de 3 protótipos em 09_SITES/_versoes/2026-10-05_layout-clinicas/):
   as clínicas deixaram de ser cartões (rejeitados sobre o mapa e abaixo dele) e viraram duas entradas tipográficas separadas
   por filetes: numeral mono em disco navy (o mesmo "1 · QualiDor" / "2 · Vida Ampla" da etiqueta e da cabeça do pin),
   dia/período em mono (1ª leitura), nome em Playfair, endereço em duas linhas (rua em 1,125rem/600) e a linha de ações
   "Como chegar · Google Maps · Waze" com alvos de 44 px. Hover/foco na entrada e no pin trocam .is-hot (consulta.js);
   clicar no pin rola até a entrada e pulsa o numeral (.is-pulse, 600 ms, só transform). O cálculo de distância é UMA faixa
   (.clinics-calc, seção 20) e o resultado volta como chip ao lado do nome. Escala de espaço 4/8 px.
   Linha 2: "Como é a consulta" em linha do tempo horizontal (a foto 0J4A4935 e os blocos Contato/Atendimento
   saíram em 2026-10-02 e estão comentados no HTML; as regras deles continuam aqui para poder voltar).
   Mapa: 09_SITES/mapa-aracaju/posicoes.json. Tudo sobre o mapa fica em % do quadro 5:4 (o pin pela ponta); a proporção
   e as % não mudaram em 2026-10-05. Camadas (contexto isolado): 2 rótulos, localizador e atribuição · 3 pins · 5 pin em destaque.
   Versão anterior (.week, .consult-*, .info-*, .visit*): 09_SITES/_versoes/2026-10-02_dobra-consulta/. */
.consulta-top{display:grid;gap:0}
.consulta-head .eyebrow{margin-bottom:20px}
.consulta-head .body-lg{margin-top:20px;max-width:46ch}
.consulta-top>.cmap{margin-top:36px}
.consulta-top>.consulta-info{margin-top:32px}

/* contato e atendimento (lista de definição: rótulo + valor) */
.consulta-facts{max-width:56ch}
.fact{position:relative;padding:14px 0 14px 60px;min-height:72px;border-bottom:1px solid var(--border-light)}
.fact:first-child{padding-top:2px;min-height:60px}
.fact:first-child .fact__ic{top:2px}
.fact:last-child{border-bottom:0}
.fact__ic{position:absolute;left:0;top:14px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(3,199,208,.10);color:var(--brand-navy-700)}
.fact__ic svg{width:20px;height:20px}
.fact dt{font-family:var(--font-display);font-size:1.15rem;font-weight:600;line-height:1.3;color:var(--text-dark)}
.fact dd{margin-top:3px;font-size:1rem;line-height:1.55;color:var(--text-body)}
.fact dd a{color:var(--brand-navy-700);font-weight:600;text-decoration:underline;text-decoration-color:rgba(2,70,127,.3);text-underline-offset:.2em}
.fact dd a:hover{text-decoration-color:currentColor}
.consulta-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.consulta-cta>*{flex:1 1 auto}
.consulta-micro{margin-top:18px;max-width:60ch;font-size:.95rem;line-height:1.6;color:var(--text-body);display:flex;gap:10px}
.consulta-micro svg{width:18px;height:18px;color:var(--brand-petrol-600);flex:none;margin-top:.2em}
/* marcador de conteúdo pendente (usado no rodapé) */
.pending{
  display:inline-block;margin-top:4px;padding:.1em .55em;border-radius:6px;font-family:var(--font-mono);font-size:.78rem;
  color:var(--brand-navy-700);background:rgba(3,199,208,.08);border:1px dashed rgba(2,125,159,.45);
}

/* ---- mapa ---- */
.cmap{
  position:relative;isolation:isolate;container-type:inline-size;container-name:cmap;
  --map-ink:var(--text-body);   /* rótulos: 8,6:1 no branco e >= 6:1 sobre quarteirões e verde */
  --map-water:#1d5a73;          /* rótulo do rio: 5,9:1 sobre a água (#cfe6ef) */
}
.cmap__frame{position:relative;margin:0;aspect-ratio:5/4;overflow:hidden;border-radius:var(--radius-lg);background:#eef4f8;box-shadow:0 0 0 1px var(--border-light),var(--shadow-2)}
@supports not (aspect-ratio:1/1){.cmap__frame{height:0;padding-top:80%}}
.cmap__base{position:absolute;inset:0;width:100%;height:100%}
/* rótulos dos marcos (centro do rótulo = posição do posicoes.json) */
.cmap__mark{
  position:absolute;left:var(--x);top:var(--y);z-index:2;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;
  padding:3px 9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.94);box-shadow:0 0 0 1px rgba(14,39,64,.10),0 2px 6px rgba(4,24,46,.06);
  font-family:var(--font-sans);font-size:12px;font-weight:500;line-height:1.35;color:var(--map-ink);
}
.cmap__mark--road,.cmap__mark--water{padding:0;background:none;box-shadow:none}
.cmap__mark--road{display:none;transform:translate(-50%,-50%) rotate(var(--r,0deg));font-weight:600;letter-spacing:.02em;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 4px #fff,0 0 6px #fff}
.cmap__mark--water{display:none;font-style:italic;color:var(--map-water);text-shadow:0 0 3px rgba(220,239,238,.95),0 0 6px rgba(220,239,238,.8)}
/* pins: gota navy com o numeral da ficha na cabeça; a ponta fica exatamente na coordenada */
.cmap__pin{
  --pin-w:28px;--pin-h:36px;
  position:absolute;left:var(--x);top:var(--y);z-index:3;width:var(--pin-w);height:var(--pin-h);
  margin:calc(var(--pin-h) * -1) 0 0 calc(var(--pin-w) / -2);
}
.cmap__drop{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%;filter:drop-shadow(0 5px 5px rgba(4,24,46,.32));transition:transform var(--d-base) var(--e-spring)}
.cmap__drop path{fill:var(--brand-navy-800);stroke:#fff;stroke-width:2;transition:fill var(--d-base) var(--e-smooth)}
.cmap__pulse{
  position:absolute;left:50%;bottom:-5px;width:30px;height:12px;margin-left:-15px;border-radius:50%;pointer-events:none;   /* decorativo: o anel crescendo não rouba o toque da área do outro pin */
  border:2px solid rgba(3,199,208,.9);background:rgba(3,199,208,.16);opacity:0;transform:scale(.35);
  animation:pinPulse 3s var(--e-out) infinite;
}
.cmap__pin--late .cmap__pulse{animation-delay:-1.5s}
@keyframes pinPulse{0%{opacity:.95;transform:scale(.35)}70%{opacity:.25}100%{opacity:0;transform:scale(1.9)}}
.cmap__pin.is-hot{z-index:5}
.cmap__pin.is-hot .cmap__drop{transform:scale(1.18)}
.cmap__pin.is-hot .cmap__drop path{fill:var(--brand-navy-900)}
.cmap__pin.is-hot .cmap__pulse{border-color:var(--brand-cyan-500)}
/* numeral na cabeça do pin (no lugar do ponto branco): a correspondência lista <-> mapa sobrevive mesmo com a etiqueta cortada.
   Escala junto com a gota no .is-hot (origem na ponta: 133% da caixa do numeral = 100% do pin). */
.cmap__pin{cursor:pointer}
/* alvo de toque de 44 px (2026-10-05b): área invisível centrada um pouco abaixo do meio no pin 1 e acima no pin 2, para as duas
   áreas não se sobreporem no celular (os pins ficam a ~40 px um do outro em 375 px); o clique continua chegando ao próprio pin */
.cmap__pin::before{content:"";position:absolute;left:50%;top:65%;z-index:0;width:44px;height:44px;transform:translate(-50%,-50%)}
.cmap__pin[data-clinic="vida-ampla"]::before{top:35%}
.cmap__pin-n{
  position:absolute;left:0;right:0;top:0;height:75%;z-index:2;display:grid;place-items:center;pointer-events:none;
  font-family:var(--font-mono);font-weight:700;font-size:calc(var(--pin-w) * .4);line-height:1;color:#fff;
  transform-origin:50% 133%;transition:transform var(--d-base) var(--e-spring);
}
.cmap__pin.is-hot .cmap__pin-n{transform:scale(1.18)}
/* etiqueta numerada do pin ("1 · QualiDor" à esquerda, "2 · Vida Ampla" à direita: sem colidir com os rótulos) */
.cmap__tag{
  position:absolute;top:11px;z-index:2;white-space:nowrap;padding:4px 9px 4px 8px;border-radius:var(--radius-pill);
  background:var(--brand-navy-800);color:#fff;font-family:var(--font-sans);font-size:12.5px;font-weight:600;line-height:1.2;
  box-shadow:0 4px 10px -4px rgba(4,24,46,.45);
}
.cmap__tag-n{font-family:var(--font-mono);font-weight:600;color:var(--brand-cyan-200);margin-right:.55em}
.cmap__tag-n::after{content:"·";margin-left:.55em;color:rgba(255,255,255,.55)}
.cmap__pin[data-clinic="vida-ampla"] .cmap__tag{left:calc(100% + 2px)}
.cmap__pin[data-clinic="qualidor"] .cmap__tag{right:calc(100% + 2px)}
/* mapa estreito (<= 400 px de contêiner): a etiqueta "1 · QualiDor" à esquerda saía do quadro em 360 px e, à direita, cobria o rótulo
   "Parque da Sementeira"; abaixo da ponta, centrada, fica em área livre e dentro do quadro em 375/360/320 px (2026-10-05b) */
@container cmap (max-width:400px){
  .cmap__pin[data-clinic="qualidor"] .cmap__tag{right:auto;left:50%;top:calc(100% + 6px);transform:translateX(-50%)}
}
/* a mais perta (rota.js, .is-near): gota, numeral e etiqueta em ciano com texto navy-ink (8,6:1) */
.cmap__pin.is-near{z-index:4}
.cmap__pin.is-near .cmap__drop path{fill:var(--brand-cyan-500);stroke:#fff}
.cmap__pin.is-near .cmap__pin-n{color:var(--bg-ink)}
.cmap__pin.is-near .cmap__pulse{border-color:var(--brand-cyan-500)}
.cmap__pin.is-near .cmap__tag{background:var(--brand-cyan-500);color:var(--bg-ink)}
.cmap__pin.is-near .cmap__tag-n{color:var(--bg-ink)}
.cmap__pin.is-near .cmap__tag-n::after{color:rgba(4,24,46,.45)}
/* localizador de Aracaju (canto superior esquerdo, área livre do mapa) */
.cmap__loc{
  display:none;position:absolute;left:3%;top:4%;z-index:2;width:clamp(104px,15%,124px);padding:6px 6px 5px;border-radius:12px;
  background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(14,39,64,.10),0 10px 22px -12px rgba(4,24,46,.35);
}
.cmap__loc img{width:100%;height:auto}
.cmap__loc span{display:block;margin-top:2px;text-align:center;white-space:nowrap;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-body)}
/* atribuição obrigatória do OpenStreetMap (ODbL) */
.cmap__attr{position:absolute;right:0;bottom:0;z-index:2;font-size:12px;line-height:1.3;color:var(--map-ink);background:rgba(255,255,255,.9);border-top-left-radius:10px}
.cmap__attr a{display:block;padding:6px 10px;text-decoration:underline;text-decoration-color:rgba(51,79,102,.35);text-underline-offset:2px}
.cmap__attr a:hover{color:var(--brand-navy-800);text-decoration-color:currentColor}
.cmap__attr a:focus-visible{outline-offset:-3px;box-shadow:none;border-radius:10px 0 0 0}

/* ---- ficha editorial das clínicas (fonte única do endereço; chips, faixa de cálculo e estados: seção 20) ---- */
.clinics{margin-top:32px}
/* eyebrow em mono que dá nome ao bloco (petróleo escurecido com navy: o --accent-ink puro fica em 4,0:1 sobre o papel) */
.clinics__eyebrow{margin:0 0 10px;font-family:var(--font-mono);font-size:.75rem;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-navy-700);color:color-mix(in srgb,var(--accent-ink) 78%,var(--brand-navy-800))}
.clinics__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-strong)}
.clinic{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:start;padding:20px 0 8px;border-bottom:1px solid var(--border-light)}
/* numeral: o mesmo "1 / 2" da etiqueta e da cabeça do pin (disco navy, mono); anel ciano no hover/foco; ciano cheio na mais perta */
.clinic__n{
  position:relative;width:28px;height:28px;margin-top:-6px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--brand-navy-800);color:#fff;font:600 13px/1 var(--font-mono);
  transition:transform var(--d-base) var(--e-spring),background-color var(--d-base) var(--e-smooth),color var(--d-base);
}
.clinic__n::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--brand-cyan-500);opacity:0;transition:opacity var(--d-base) var(--e-smooth)}
.clinic.is-hot .clinic__n{transform:scale(1.06)}
.clinic.is-hot .clinic__n::after{opacity:1}
.clinic.is-pulse .clinic__n{animation:clinicPulse .6s var(--e-out)}
@keyframes clinicPulse{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.clinic__body{min-width:0}
/* dia · período: a 1ª leitura (mono, maiúsculas; mesma tinta do eyebrow: 4,9:1 sobre o papel) */
.clinic__day{font-family:var(--font-mono);font-size:.8rem;font-weight:600;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-navy-700);color:color-mix(in srgb,var(--accent-ink) 78%,var(--brand-navy-800))}
/* nome e, abaixo dele, o chip do resultado (2026-10-05b: numa linha própria nas duas entradas; ao lado do nome, o chip da mais perta
   + "mais perto de você" não cabia e só uma das entradas quebrava). Grade sem row-gap: a .clinic__eta vazia não ocupa nada. */
.clinic__head{display:grid;row-gap:0;margin-top:6px}
.clinic__name{margin:0;font-family:var(--font-display);font-size:1.45rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--text-dark);transition:color var(--d-base)}
.clinic.is-hot .clinic__name{color:var(--brand-navy-700)}
/* endereço: rua + número + sala em 1,125rem/600 (legível para 60+), bairro · cidade · CEP em 1rem regular */
.clinic__addr{margin-top:6px;font-size:1rem;line-height:1.5;color:var(--text-body)}
.clinic__addr>span{display:block}
.clinic__addr-l1{font-size:1.125rem;font-weight:600;line-height:1.4;color:var(--text-dark)}
.nw{white-space:nowrap}
/* linha de ações: rótulo + dois links com 44 px de alvo e 8 px de padding (os alvos não se tocam); ícones de linha do sprite */
.clinic__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;margin:2px 0 0 -8px;font-size:.92rem;line-height:1.3}
.clinic__links-label{padding:0 10px 0 8px;color:var(--text-body);font-weight:500}
.clinic__sep{padding:0 4px;color:var(--text-muted)}
.clinic__link{
  display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:0 8px;border-radius:8px;font-weight:600;color:var(--brand-navy-700);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:rgba(2,70,127,.35);
  transition:color var(--d-base),text-decoration-color var(--d-base),transform var(--d-fast) var(--e-out);
}
.clinic__link svg{width:1.05em;height:1.05em;flex:none}
.clinic__link:hover{color:var(--accent-ink);text-decoration-color:currentColor}
.clinic__link:active{transform:scale(.98)}
.clinic__link:focus-visible{outline-offset:-2px;box-shadow:0 0 0 4px rgba(3,199,208,.45)}
/* celular estreito: "Como chegar" numa linha própria, para os dois links nunca se separarem */
@media (max-width:420px){
  .clinic__links{margin-top:6px}
  .clinic__links-label{flex-basis:100%;margin-bottom:-8px}
}
/* mapa estreito (< 480 px): sem localizador e sem o rótulo do rio, que encostaria na atribuição */
@container cmap (min-width:480px){
  .cmap__loc,.cmap__mark--water{display:block}
}
@media (min-width:769px){
  /* mapa largo: pins maiores, rótulo da avenida e rótulos um pouco maiores */
  @container cmap (min-width:640px){
    .cmap__pin{--pin-w:34px;--pin-h:44px}
    .cmap__pulse{width:36px;height:14px;margin-left:-18px;bottom:-6px}
    .cmap__mark--road{display:block}
    .cmap__mark{font-size:12px;font-size:clamp(12px,1.85cqi,14px)}
    .cmap__mark--road{font-size:11.5px;font-size:clamp(11.5px,1.75cqi,13px)}
  }
}

/* ---- linha 2: como é a consulta ---- */
.consulta-how{display:grid;gap:clamp(36px,5vw,56px);margin-top:clamp(72px,8vw,120px)}
.consulta-how__title{font-size:clamp(1.65rem,2.6vw,2.2rem);letter-spacing:-.015em}
.journey{position:relative;margin-top:clamp(24px,3vw,36px);--jg:clamp(18px,2.4vw,32px)}
.journey__step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;padding-bottom:30px}
.journey__step:last-child{padding-bottom:0}
.journey__step::after{content:"";position:absolute;left:27.5px;top:66px;bottom:8px;width:1px;background:linear-gradient(180deg,rgba(2,125,159,.45),rgba(2,125,159,.15))}
.journey__step:last-child::after{display:none}
.journey__n{
  grid-row:span 2;position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.9rem;font-weight:600;color:var(--brand-petrol-600);
  background:#fff;border:1px solid rgba(2,125,159,.35);box-shadow:0 0 0 6px var(--surface-cream);
  transition:background var(--d-base),color var(--d-base),box-shadow var(--d-base);
}
.journey__step:hover .journey__n{background:var(--brand-navy-800);color:#fff;box-shadow:0 0 0 6px var(--surface-cream),0 0 22px rgba(3,199,208,.55)}
.journey__t{grid-column:2;margin-top:6px;font-size:1.3rem;line-height:1.2}
.journey__step p{grid-column:2;margin-top:6px;max-width:40ch;font-size:1rem;line-height:1.6;color:var(--text-body)}
.consulta-photo{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:4/3;box-shadow:var(--shadow-2)}
.consulta-photo picture{height:100%}
.consulta-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
@media (min-width:769px){
  .consulta-photo{aspect-ratio:2/1}
  .consulta-photo img{object-position:50% 18%}
}
@media (min-width:1024px){
  /* linha do tempo horizontal com 5 passos (abaixo de 1024 px fica vertical, como no celular) */
  .journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--jg)}
  .journey__step{display:block;padding:0}
  .journey__step::after{left:68px;right:calc(12px - var(--jg));top:28px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,rgba(2,125,159,.45),rgba(2,125,159,.18))}
  .journey__t{margin-top:22px}
  .consulta-top{
    /* grade em Z: título e ficha à esquerda, mapa à direita; a faixa de cálculo (secundária) e o CTA (primário) dividem a última linha.
       O mapa alinha pela base com o fim da ficha (o vão que sobra fica ao lado do título); entre 1024 e 1279 px, onde a ficha é
       bem mais alta que o mapa, ele alinha pelo topo e o vão fica embaixo, junto do CTA. */
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head map" "list map" "calc info";grid-template-rows:auto auto auto;
    column-gap:clamp(40px,4.5vw,72px);row-gap:0;align-items:start;
  }
  .consulta-head{grid-area:head}
  .clinics{grid-area:list}
  .consulta-top>.cmap{grid-area:map;align-self:end;margin-top:0}
  .clinics-calc{grid-area:calc;margin-top:28px}
  .consulta-top>.consulta-info{grid-area:info;margin-top:28px}
  .consulta-info .consulta-cta{margin-top:0}
  .consulta-info .consulta-cta>*{flex:0 1 auto}
  /* com a foto (hoje comentada no HTML) a linha 2 vira foto + passos; sem ela, os passos ocupam a largura toda */
  .consulta-how:has(.consulta-photo){grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"photo body";column-gap:clamp(40px,4.5vw,72px);align-items:center}
  .consulta-how:has(.consulta-photo) .consulta-how__body{grid-area:body}
  .consulta-photo{grid-area:photo;aspect-ratio:6/5}
  .consulta-photo img{object-position:50% 26%}
}
@media (min-width:1024px) and (max-width:1279px){
  .consulta-top>.cmap{align-self:start}
}
@media (max-width:768px){
  .consulta-cta{flex-direction:column;align-items:stretch}
  .consulta-cta>*{flex:none;width:100%}
}
@media (max-width:400px){
  .consulta-cta .shiny-cta,.consulta-cta .btn{white-space:normal}
}

/* ============ 13b. MODAL DE AGENDAMENTO (lead → WhatsApp · 2026-10-02) ============ */
/* <dialog> nativo (camada superior do navegador: não usa a escala de z-index). consulta.js abre, fecha e envia.
   Entrada: fade + escala de 220 ms a partir do botão (transform-origin vem do JS); saída: 150 ms. Sem animação com movimento reduzido.
   Erro de campo em navy (borda + ícone + texto), nunca em vermelho. */
html.lead-open,html.lead-open body{overflow:hidden}
.lead{
  margin:auto;padding:0;border:0;width:min(100% - 24px,520px);max-width:none;max-height:calc(100% - 24px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  border-radius:var(--radius-lg);background:#fff;color:var(--text-body);
  box-shadow:0 30px 80px -20px rgba(4,24,46,.55),0 0 0 1px rgba(14,39,64,.08);
}
/* ::backdrop não herda variáveis em todos os navegadores: valores literais */
.lead::backdrop{background:rgba(4,24,46,.55)}
.lead.is-opening{animation:leadIn var(--d-base) var(--e-out)}
.lead.is-opening::backdrop{animation:leadFadeIn 220ms cubic-bezier(.2,.6,.2,1)}
.lead.is-closing{animation:leadOut 150ms var(--e-smooth) forwards}
.lead.is-closing::backdrop{animation:leadFadeOut 150ms cubic-bezier(.4,0,.2,1) forwards}
@keyframes leadIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes leadOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.96)}}
@keyframes leadFadeIn{from{opacity:0}to{opacity:1}}
@keyframes leadFadeOut{from{opacity:1}to{opacity:0}}
.lead__top{position:sticky;top:0;z-index:2;height:0;display:flex;justify-content:flex-end}
.lead__close{
  flex:none;width:44px;height:44px;margin:12px 12px 0 0;display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--text-dark);background:rgba(255,255,255,.94);box-shadow:inset 0 0 0 1px var(--border-light);
  transition:background var(--d-fast),color var(--d-fast),box-shadow var(--d-fast);touch-action:manipulation;
}
.lead__close svg{width:22px;height:22px}
.lead__close:hover{background:var(--surface-cream);color:var(--brand-navy-800);box-shadow:inset 0 0 0 1px var(--border-strong)}
.lead__close:focus-visible{border-radius:50%}
.lead__body{padding:clamp(28px,6vw,40px) clamp(20px,5.5vw,40px) clamp(24px,5vw,36px)}
.lead__title{padding-right:44px;font-size:clamp(1.65rem,5vw,2.05rem);letter-spacing:-.015em;line-height:1.12}
.lead__lede{margin-top:10px;font-size:1.02rem;line-height:1.6;color:var(--text-body)}
.lead__view.is-entering{animation:leadView 200ms var(--e-out)}
.lead__view.is-leaving{animation:leadViewOut 120ms var(--e-smooth) forwards}
@keyframes leadView{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes leadViewOut{from{opacity:1}to{opacity:0}}
/* formulário */
.lead-form{margin-top:18px}
.lead-form__req{font-size:.88rem;line-height:1.4;color:var(--text-muted)}
.field{margin-top:16px}
.field__label{display:block;font-size:.95rem;font-weight:600;line-height:1.35;color:var(--text-dark)}
.field__req{margin-left:3px;font-weight:700;color:var(--brand-petrol-600)}
.field__input{
  display:block;width:100%;min-height:52px;margin-top:6px;padding:12px 16px;
  font-family:var(--font-sans);font-size:1.0625rem;line-height:1.4;color:var(--text-dark);
  background:#fff;border:1.5px solid var(--border-strong);border-radius:14px;-webkit-appearance:none;appearance:none;
  transition:border-color var(--d-fast) var(--e-smooth),background var(--d-fast);
}
/* bordas finas como no Design System (.input): 1,5 px em todos os estados; o foco troca a cor e ganha halo suave de 4 px.
   Cor do foco em azul-petróleo (4,6:1 sobre branco) em vez do teal do DS (2,8:1), para o indicador passar de 3:1. */
.field__input:hover{border-color:var(--brand-blue-500)}
.field__input:focus,.field__input:focus-visible{outline:none;border-color:var(--brand-petrol-600);box-shadow:0 0 0 4px rgba(3,199,208,.18)}
.field__select{padding-right:46px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23022c5b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px 20px}
.field__select:required:invalid{color:var(--text-muted)}
.field__select option{color:var(--text-dark)}
.field__help{margin-top:6px;font-size:.88rem;line-height:1.4;color:var(--text-muted)}
.field__error{font-size:.92rem;font-weight:600;line-height:1.4;color:var(--danger)}
.field__error:not(:empty){display:flex;gap:8px;align-items:flex-start;margin-top:8px}
.field__error svg{flex:none;width:18px;height:18px;margin-top:1px}
.field.is-invalid .field__input{border-color:var(--danger);background:#fdf2f2;box-shadow:0 0 0 4px rgba(198,40,40,.14)}
/* caixa de consentimento: a área inteira é clicável (alvo bem acima de 44 px) */
.check{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;cursor:pointer;
  font-size:.95rem;line-height:1.5;color:var(--text-dark);background:rgba(3,199,208,.06);border:1px solid rgba(2,125,159,.22);
  transition:border-color var(--d-fast),background var(--d-fast);
}
.check:hover{border-color:rgba(2,125,159,.5)}
.check__input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--brand-navy-800);cursor:pointer}
.field--check.is-invalid .check{border-color:var(--danger);background:#fdf2f2;box-shadow:0 0 0 4px rgba(198,40,40,.14)}
.lead__lgpd{margin-top:10px;font-size:.86rem;line-height:1.5;color:var(--text-muted)}
.lead__lgpd a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.lead__lgpd a:hover{text-decoration-thickness:2px}
/* armadilha para robôs: fora da tela, fora da ordem de tabulação */
.lead__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.lead .shiny-cta,.lead .btn{line-height:1.3}
.lead__submit,.lead__wide{white-space:normal}
@media (max-width:359px){.lead__actions>*{white-space:normal}}
.lead__submit{width:100%;margin-top:22px;min-height:56px}
.lead__submit:disabled{cursor:progress;opacity:.85}
.lead__submit:disabled .shine{display:none}
.lead__spinner{display:none;flex:none;width:1.15em;height:1.15em;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:leadSpin .8s linear infinite}
.lead-form[aria-busy="true"] .lead__spinner{display:inline-block}
.lead-form[aria-busy="true"] .lead__submit-ic{display:none}
@keyframes leadSpin{to{transform:rotate(360deg)}}
/* telas de sucesso e de falha */
.lead__badge{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:18px;border-radius:50%;color:var(--brand-navy-800);background:rgba(3,199,208,.14);box-shadow:0 0 0 6px rgba(3,199,208,.07)}
.lead__badge svg{width:28px;height:28px}
.lead__badge--alert{color:#fff;background:var(--brand-navy-800);box-shadow:0 0 0 6px rgba(1,58,107,.10)}
.lead__wide{width:100%;margin-top:24px}
.lead__note{display:flex;gap:10px;margin-top:16px;font-size:.95rem;line-height:1.5;color:var(--text-body)}
.lead__note svg{flex:none;width:18px;height:18px;margin-top:.15em;color:var(--brand-petrol-600)}
.lead__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.lead__actions>*{flex:1 1 auto;white-space:nowrap}
.lead__actions .shiny-cta{flex-grow:2}
.lead__retry{
  display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin-top:12px;padding:0 4px;
  font-size:.95rem;font-weight:600;color:var(--brand-navy-700);text-decoration:underline;text-underline-offset:.25em;text-decoration-color:rgba(2,70,127,.35);
  transition:color var(--d-base),text-decoration-color var(--d-base);touch-action:manipulation;
}
.lead__retry:hover{color:var(--accent-ink);text-decoration-color:currentColor}
.lead__retry svg{width:1.05em;height:1.05em;flex:none}

/* ============================ 14. FAQ ============================= */
.faq{max-width:640px;margin-inline:auto;display:grid;gap:12px}
.faq-item{
  position:relative;border-radius:var(--radius-md);background:#fff;border:1px solid var(--border-light);
  transition:border-color var(--d-base),box-shadow var(--d-base) var(--e-smooth);
}
.faq-item::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--grad-shine);transform:scaleY(0);transition:transform var(--d-base) var(--e-out)}
.faq-item:hover{border-color:rgba(2,125,159,.35)}
.faq-item:hover::before,.faq-item.is-open::before{transform:scaleY(1)}
.faq-item.is-open{border-color:var(--border-cyan);box-shadow:0 18px 40px -18px rgba(3,120,160,.35)}
.faq-q{margin:0;font:inherit}
.faq-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  padding:22px 24px;min-height:64px;font-family:var(--font-sans);font-size:1.08rem;font-weight:600;line-height:1.4;color:var(--brand-navy-800);
  border-radius:var(--radius-md);
}
.faq-btn .plus{
  position:relative;flex:none;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(2,125,159,.35);color:var(--brand-petrol-600);
  transition:transform var(--d-fast) var(--e-smooth),background var(--d-base),color var(--d-base),border-color var(--d-base);
}
.faq-btn .plus::before,.faq-btn .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.faq-btn .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.is-open .plus{transform:rotate(45deg);background:var(--brand-navy-800);border-color:var(--brand-navy-800);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .32s var(--e-smooth),visibility 0s .32s}
.faq-item.is-open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .32s var(--e-smooth),visibility 0s}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 24px 24px;max-width:31em;font-size:1rem;line-height:1.65;color:var(--text-body)}
.no-js .faq-a{grid-template-rows:1fr;visibility:visible}

/* ============================ 15. RODAPÉ (refeito em 2026-10-02 · revisto em 2026-10-04) ===========================
   Faixa 1 (.foot-top): marca (logomarca 2x + peça-assinatura por cima) + registros | atendimento (clínicas, rotas
   Google Maps/Waze e botão Agendar) | navegação | Instagram só ícone (4 colunas a partir de 1360 px,
   2 × 2 entre 680 e 1359 px, empilhado abaixo disso, sempre na ordem do DOM: o foco segue a leitura).
   Faixa 2 (.foot-notices): avisos legais em grade (comentada no HTML). Faixa 3 (.foot-bottom): Política de Privacidade à esquerda e crédito à direita (2026-10-04, v2).
   Todo .foot-text usa a MESMA regra (fonte, corpo, peso e cor): a identificação legal é igual ao texto vizinho (CODAME). */
.site-footer{position:relative;background:var(--bg-ink);color:rgba(255,255,255,.85);padding:clamp(64px,7vw,104px) 0 32px;overflow:hidden;isolation:isolate}
.site-footer .ambient-glow span{opacity:.22}
/* marca-d'agua do rodape: texto longo ("Medicina da Dor", ~15 caracteres) exige corpo menor que o antigo 19vw (calibrado p/ "SOARES", 6 letras); clamp 9vw atravessa o rodape de forma elegante, centralizado, sem rolagem horizontal (o .site-footer tem overflow:hidden) e com opacidade bem baixa p/ nao brigar com o conteudo. */
.footer-watermark{position:absolute;bottom:-5%;left:0;width:100%;text-align:center;font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,9vw,9.5rem);line-height:1;color:rgba(255,255,255,.028);white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
.site-footer .container-wide{position:relative;z-index:1}

/* texto do rodapé: identificação e blocos com a MESMA regra (CODAME) */
.foot-text{font-family:var(--font-sans);font-size:.875rem;line-height:1.6;font-weight:400;color:rgba(255,255,255,.85);max-width:60ch}
.foot-text a{color:#fff;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color var(--d-base),color var(--d-base)}
.foot-text a:hover{color:var(--brand-cyan-200);text-decoration-color:currentColor}
.foot-text .pending{color:var(--brand-cyan-200);background:rgba(3,199,208,.08);border-color:rgba(143,230,234,.45);font-size:.78rem}

/* ---- faixa 1: quatro colunas ---- */
.foot-top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1.4fr) minmax(0,.62fr) minmax(0,.78fr);gap:40px clamp(28px,3vw,48px);padding-bottom:clamp(40px,4.5vw,56px);border-bottom:1px solid var(--border-dark)}
.foot-col{min-width:0}
.foot-col__title{font-family:var(--font-sans);font-size:.875rem;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.18em;color:var(--brand-cyan-200);margin-bottom:16px}

/* marca + registros (o mesmo .chip da hero e da dobra do médico) */
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
/* logomarca 2x (128 px de altura; 112 no celular): o link trava a proporção do viewBox (1275,59 × 425,2 = 3:1) e a
   largura vem dela, para a geometria do blueprint por cima ser toda em % do link (ver .blueprint--logo) */
.foot-brand__logo{position:relative;display:block;width:min(100%,384px);aspect-ratio:1275.59/425.2;border-radius:8px}
.foot-brand__logo img{display:block;width:100%;height:100%;object-fit:contain}
.foot-chips{display:flex;flex-wrap:wrap;gap:10px}
.foot-chips .chip>span{min-width:0}
.foot-chips .chip{font-size:.8rem}
.foot-chips .chip:hover{transform:none;background:rgba(255,255,255,.06);border-color:var(--border-dark)}
.foot-chips abbr{text-decoration:none;cursor:help}
/* 2026-10-04: CRM em texto, sem badge, no estilo "Body small · legendas e textos de apoio" do DS (.body-sm: .875rem / 1.6 / texto apagado); no fundo navy o apagado é --text-muted-dark (≈ 9:1) */
.body-sm{font-size:.875rem;line-height:1.6;font-weight:400;color:var(--text-muted)}
.site-footer .body-sm{color:var(--text-muted-dark)}
.foot-reg{margin:0;letter-spacing:.02em}
@media print{.site-footer .body-sm{color:#000}}

/* atendimento */
.foot-clinics{display:grid;gap:20px}
.foot-clinic{padding-left:16px;border-left:2px solid var(--border-cyan)}
.foot-clinic__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.foot-clinic__name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;line-height:1.3;color:#fff}
.foot-clinic__day{font-size:.875rem;font-weight:600;color:var(--brand-cyan-200)}
.foot-clinic__addr{margin-top:4px;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.85)}
/* Como chegar (2026-10-04): rótulo pequeno + duas pílulas ghost on-dark (Google Maps / Waze), 40 px de altura e alvo de
   44 px (o ::before estende 2 px acima e abaixo; com 8 px de vão os alvos não se tocam). Borda a .42 de branco: 3:1 sobre o navy. */
.foot-route{margin-top:12px}
.foot-route__label{display:block;margin-bottom:8px;font-size:.75rem;font-weight:600;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted-dark)}
.foot-route__btns{display:flex;flex-wrap:wrap;gap:8px}
.foot-route__btn{position:relative;display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:0 16px 0 13px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);color:#fff;font-size:.8125rem;font-weight:600;line-height:1;white-space:nowrap;transition:box-shadow var(--d-base),background var(--d-base),color var(--d-base),transform var(--d-base) var(--e-out)}
.foot-route__btn::before{content:"";position:absolute;inset:-2px 0}
.foot-route__btn svg{width:1.1em;height:1.1em;flex:none;color:var(--brand-cyan-500);transition:color var(--d-base)}
.foot-route__btn:hover{box-shadow:inset 0 0 0 1.5px var(--brand-cyan-500),0 0 24px -8px rgba(3,199,208,.5);background:rgba(3,199,208,.08);color:var(--brand-cyan-200);transform:translateY(-1px)}
.foot-route__btn:hover svg{color:var(--brand-cyan-200)}
.foot-route__btn:focus-visible{box-shadow:inset 0 0 0 1.5px var(--brand-cyan-500),0 0 0 7px rgba(3,199,208,.6);border-radius:var(--radius-pill)}
.foot-contact{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border-dark)}
.foot-tel{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font-size:1.125rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;transition:color var(--d-base)}
.foot-tel svg{width:20px;height:20px;flex:none;color:var(--brand-cyan-500)}
.foot-tel:hover{color:var(--brand-cyan-200)}
/* 2026-10-04: botão de agendamento no fim do Atendimento, abaixo das duas clínicas */
.foot-cta{margin-top:0} /* 2026-10-04: na coluna da marca, abaixo da logomarca; o espaço vem do gap de 24 px da .foot-brand */
.foot-social{display:flex;flex-direction:column;align-items:flex-start}

/* navegação */
.foot-nav ul{display:flex;flex-direction:column}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:.25em;text-decoration-color:transparent;transition:color var(--d-base),text-decoration-color var(--d-base)}
.foot-nav a:hover{color:#fff;text-decoration-color:var(--brand-cyan-500)}

/* Instagram (2026-10-04): só o ícone de linha do sprite num círculo de 56 px (sem logotipo colorido); o @ fica no aria-label */
.foot-social__link{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--border-dark);background:rgba(3,199,208,.1);color:var(--brand-cyan-200);transition:border-color var(--d-base),background var(--d-base),color var(--d-base),transform var(--d-base) var(--e-out)}
.foot-social__link svg{width:26px;height:26px}
.foot-social__link:hover{border-color:var(--brand-cyan-500);background:rgba(3,199,208,.16);color:#fff;transform:translateY(-2px)}
.foot-social__link:focus-visible{border-radius:50%;border-color:var(--brand-cyan-500)}

/* ---- faixa 2: avisos legais ---- */
.foot-notices{padding:clamp(36px,4vw,48px) 0;border-bottom:1px solid var(--border-dark)}
.foot-notices__title{margin-bottom:22px}
/* 2 avisos visíveis desde 2026-10-02 (WhatsApp e Publicidade médica); os outros três estão comentados no HTML */
.foot-notices__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(28px,3.5vw,48px)}
.foot-block--lgpd{grid-column:3;grid-row:1 / span 2}
.foot-block h4{font-family:var(--font-sans);font-size:.875rem;font-weight:600;line-height:1.35;color:#fff;margin-bottom:6px}

/* ---- faixa 3 (2026-10-04, v2, pedido do usuário): Política de Privacidade à esquerda | crédito à direita | nada no centro ----
   A identificação legal + © e "Aviso Legal" saíram do HTML (comentados; pendência de compliance no README).
   .foot-bottom__legal segue estilizado para voltar; para as três zonas, a grade era
   grid-template-columns:minmax(0,1fr) auto minmax(0,1fr). No celular o crédito quebra para a linha de baixo, à esquerda. */
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;padding-top:24px}
.foot-bottom__legal{display:grid;gap:4px;justify-items:start}
.foot-bottom__legal .foot-text{max-width:none} /* a largura já é a da zona; sem o teto de 60ch a identificação cabe em 2 linhas */
.footer-links{display:flex;flex-wrap:wrap;gap:0 24px}
/* crédito como no Design System (.footer-bottom .credit): .82rem, texto apagado, link cyan-200 em 600 */
.credit{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 .3em;min-height:44px;font-size:.82rem;line-height:1.4;color:var(--text-muted-dark);text-align:right}
.credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--brand-cyan-200);font-weight:600;text-decoration:underline;text-underline-offset:.22em;text-decoration-color:transparent;transition:color var(--d-base),text-decoration-color var(--d-base)}
.credit a:hover{color:#fff;text-decoration-color:currentColor}
.footer-links a,.footer-links__pending{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;color:#fff;padding:6px 0}
.footer-links a{text-decoration:underline;text-underline-offset:.22em;text-decoration-color:rgba(255,255,255,.45);transition:text-decoration-color var(--d-base),color var(--d-base)}
.footer-links__pending{color:rgba(255,255,255,.7)}
.footer-links a:hover{color:var(--brand-cyan-200);text-decoration-color:currentColor}
/* Home só (classe .foot-top--artigos): 5ª coluna "Entenda sua dor" (artigos) ao lado da Navegação.
   Ordem das colunas = ordem no HTML: marca, atendimento, navegação, artigos, social. As demais páginas
   usam .foot-top (4 colunas) e ficam intactas. A coluna .foot-articles reaproveita .foot-nav. */
.foot-top--artigos{grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,.6fr) minmax(0,.78fr) minmax(0,.6fr)}

@media (max-width:1359px){
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"brand care" "nav care" "social care";grid-template-rows:auto auto 1fr}
  /* na home, a coluna de artigos entra como mais uma linha da pilha esquerda, abaixo da Navegação */
  .foot-top--artigos{grid-template-areas:"brand care" "nav care" "artigos care" "social care";grid-template-rows:auto auto auto 1fr}
  .foot-brand{grid-area:brand}
  .foot-care{grid-area:care}
  .foot-nav{grid-area:nav}
  .foot-articles{grid-area:artigos}
  .foot-social{grid-area:social}
  .foot-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:32px}
  .foot-notices__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-block--lgpd{grid-column:1 / -1;grid-row:auto}
  .foot-block--lgpd .foot-text{max-width:none;columns:2 28ch;column-gap:clamp(28px,3.5vw,48px)}
}
@media (max-width:679px){
  .foot-top{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:none;gap:40px}
  .foot-brand,.foot-care,.foot-nav,.foot-social{grid-area:auto}
  .foot-block--lgpd .foot-text{columns:auto;max-width:60ch}
  .foot-brand__logo{width:min(100%,336px)}
  .foot-notices__grid{grid-template-columns:minmax(0,1fr)}
  .credit{text-align:left}
  .foot-cta{width:100%}
}

/* blueprint do monograma (peça-assinatura do DS) */
.blueprint{position:relative;width:112px;flex:none;aspect-ratio:1/1}
/* 2026-10-04: blueprint EXATAMENTE sobre o monograma da logomarca do rodapé. Geometria medida: o monograma dentro da
   logomarca (viewBox 1275,59 × 425,2) é a mesma arte do blueprint (425,2 × 425,2) deslocada 11,19 un. para a esquerda.
   Logo, com o link travado na proporção da logomarca: caixa = quadrado de lado H (425,2/1275,59 da largura), top 0,
   left = −11,19/1275,59 da largura (= −2,632 % de H). Tudo em % do link: vale para qualquer tamanho renderizado. */
.blueprint--logo{position:absolute;top:0;left:calc(100% * -11.19 / 1275.59);width:calc(100% * 425.2 / 1275.59);height:auto;pointer-events:none}
/* sequência: logomarca invisível, o blueprint desenha (keyframes abaixo) e, depois do último traço assentar (~3,9 s),
   a logomarca completa aparece em fade de 1 s enquanto o blueprint some no mesmo intervalo ("o desenho vira a logomarca") */
.js .foot-brand__logo img{opacity:0}
/* foco por teclado antes do fim da sequência: a logomarca aparece na hora e o blueprint some (o anel de foco nunca contorna uma caixa vazia) */
.foot-brand__logo:focus-visible img{opacity:1}
.foot-brand__logo:focus-visible .blueprint--logo{opacity:0}
.foot-brand__logo.run img{animation:logoIn 1s var(--e-out) 3.9s forwards}
.foot-brand__logo.run .blueprint--logo{animation:bpOut 1s var(--e-out) 3.9s forwards}
@keyframes logoIn{to{opacity:1}}
@keyframes bpOut{to{opacity:0}}
/* NAVBAR: mesma sequência do rodapé, mas só na logomarca BRANCA (a troca branco→cor ao rolar continua valendo).
   A branca começa invisível (só com JS); o blueprint do monograma desenha e, aos ~3,9 s, a branca aparece em fade
   enquanto o blueprint some. O site.js (loop .blueprint) mede os traços e dá .run ao host [data-bp-host] — no topo, no load. */
.js .nav-logo .logo-white{opacity:0}
.nav-logo:focus-visible .logo-white{opacity:1}
.nav-logo:focus-visible .blueprint--logo{opacity:0}
.nav-logo.run .logo-white{animation:logoIn 1s var(--e-out) 3.9s forwards}
.nav-logo.run .blueprint--logo{animation:bpOut 1s var(--e-out) 3.9s forwards}
/* o monograma da navbar é pequeno (~56-84px): o traço de 4.4 un. renderiza <1px (some). Engrossa p/ ~1-1,8px,
   mantendo o peso visual do rodapé em escala. (O desenho só precisa disso na fase de traço; depois vêm preenchimento/pop.) */
.nav-logo .bp-draw{stroke-width:9}
/* sem JS: logomarca visível, blueprint oculto */
html:not(.js) .blueprint--logo{display:none}
.blueprint svg{width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}
.bp-draw{fill:none;stroke:rgba(143,230,234,.75);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.js .bp-draw{stroke:#fff;stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400)}
.blueprint .bp-fill{display:none}
.blueprint.run .bp-draw{animation:bpDraw 2.4s var(--e-cine) forwards,bpGhost .9s ease forwards}
.blueprint.run .bp-draw.bp-a{animation-delay:.3s,3.2s}
.blueprint.run .bp-draw.bp-s{animation-delay:.8s,3.45s}
.blueprint.run .bp-draw.bp-orbit{animation-delay:1.3s,3.7s}
@keyframes bpDraw{to{stroke-dashoffset:0}}
@keyframes bpGhost{to{stroke:rgba(143,230,234,.75);stroke-width:4.4}}
.bp-pop{transform-box:fill-box;transform-origin:center}
.js .bp-pop{opacity:0;transform:scale(.2)}
.blueprint.run .bp-pop{animation:bpPop .55s var(--e-spring) forwards}
.blueprint.run .bp-pop.bp-head{animation-delay:2.2s}
.blueprint.run .bp-pop.d1{animation-delay:2.32s}.blueprint.run .bp-pop.d2{animation-delay:2.365s}
.blueprint.run .bp-pop.d3{animation-delay:2.41s}.blueprint.run .bp-pop.d4{animation-delay:2.455s}
.blueprint.run .bp-pop.d5{animation-delay:2.5s}.blueprint.run .bp-pop.d6{animation-delay:2.545s}
.blueprint.run .bp-pop.d7{animation-delay:2.59s}.blueprint.run .bp-pop.d8{animation-delay:2.635s}
@keyframes bpPop{to{opacity:1;transform:scale(1)}}
.js .bp-fill{opacity:0}
.blueprint.run .bp-fill{animation:bpFill 1s var(--e-out) forwards}
.blueprint.run .bp-fill.bp-a{animation-delay:2.7s}
.blueprint.run .bp-fill.bp-s{animation-delay:2.95s}
.blueprint.run .bp-fill.bp-orbit{animation-delay:3.2s}
.blueprint.run .bp-fill.bp-accent,.blueprint.run .bp-fill.bp-micro{animation-delay:3.4s}
@keyframes bpFill{to{opacity:1}}

/* identificação legal: cada RQE preso à sua titulação (art. 4º, II) */
.id-pair{white-space:nowrap}
@media (min-width:1025px){.hero__id{max-width:60ch}}


/* ============================ 16. RESPONSIVO ======================= */
/* navbar: com a logo do DS (84px) e o CTA, os links só cabem acima de 1280px */
@media (max-width:1280px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
}
@media (max-width:1180px){
  .doc-hero__media{width:70%}
  .doc-hero__head{max-width:min(560px,52vw)}
}
@media (max-width:1024px){
  :root{--nav-h:84px}
  .doc-hero{display:block;min-height:0;padding:0 0 64px;scroll-margin-top:0}
  .doc-hero__media{position:relative;width:100%;height:auto;aspect-ratio:4/5;max-height:88svh}
  .doc-hero__img{object-position:50% 22%}
  .doc-hero__media::after{background:linear-gradient(180deg,rgba(4,24,46,.35) 0%,rgba(4,24,46,0) 18%,rgba(4,24,46,0) 52%,rgba(4,24,46,.8) 80%,var(--bg-ink) 100%)}
  /* a sobreposição do título acompanha a altura real da foto (4:5 limitada a 88svh): no celular deitado o texto não cai no rosto */
  .doc-hero__inner{display:block;margin-top:clamp(-240px,-26vw,-110px);margin-top:max(-240px,calc(min(125vw,88svh) * -.26))}
  .doc-hero__head{max-width:none}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-logo{height:56px}
  #navbar.is-scrolled .nav-shell{height:76px}
  #navbar.is-scrolled .nav-logo{height:52px}

  .hero .seal,.scroll-cue,.hero__spot{display:none}
  .hero__copy{max-width:min(640px,72vw)}

  .def-grid{grid-template-columns:1fr}
  .def-photo{order:-1;min-height:0;aspect-ratio:16/8;margin-right:0;border-radius:var(--radius-lg)}
  .def-photo img{object-position:55% 24%}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area-grid{grid-template-columns:1fr}
  .area-fig{width:min(100%,380px)}

  .treat-grid{grid-template-columns:1fr}
  .treat-photo{min-height:0;aspect-ratio:16/8;margin-left:0;border-radius:var(--radius-lg)}
  .treat-photo img{object-position:50% 12%}

  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .steps__rail{display:none}


}
/* hero empilhado: foto no topo, texto sobre o fade (identificação na 1ª tela em 360px). Em paisagem de tablet o split de desktop cabe melhor. */
@media (max-width:1024px) and (orientation:portrait),(max-width:760px){
  .hero{display:block;min-height:100svh;padding:max(44svh,260px) 0 56px;--hero-stacked:1}   /* --hero-stacked: o site.js (marca d'água) lê esta variável para usar a MESMA condição de empilhamento do CSS */
  .hero__media{inset:0 0 auto 0;width:100%;height:max(68svh,420px)}
  .hero__media picture{inset:0 0 -12% 0}
  .hero__img{object-position:50% 16%}
  .hero__media::before{
    background:linear-gradient(180deg,rgba(4,24,46,.55) 0%,rgba(4,24,46,.05) 20%,rgba(4,24,46,.12) 42%,rgba(4,24,46,.86) 70%,var(--bg-ink) 100%);
  }
  .hero__copy{max-width:640px}
  .hero__title{font-size:clamp(2rem,6.4vw,3.4rem);margin-top:18px}
  .hero__title .outline-text{-webkit-text-fill-color:currentColor;-webkit-text-stroke:0}   /* mobile: "Aracaju" sólido/preenchido (pedido do usuário 2026-10-06) */
  .hero__id{margin-top:20px}
  .hero__lede{margin-top:14px}
  .hero__title + .hero__lede{margin-top:20px}
}
@media (max-width:760px){
  .doc-tl__track::before{display:block;left:7px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:linear-gradient(180deg,rgba(143,230,234,.55),rgba(143,230,234,.18))}
  .doc-tl__rail{display:none}
  .doc-tl__list{grid-template-columns:1fr;gap:30px}
  .doc-tl__list li{padding:0 0 0 38px}
  .doc-tl__list li::after{display:none}
  .doc-tl__year{font-size:clamp(2.3rem,9vw,3rem)}
  .treat-cols{grid-template-columns:1fr}
  .treat-cols::before{display:none}
  .treat-col{padding:0}
  .treat-col+.treat-col{margin-top:36px}
}
@media (max-width:640px){
  .shiny-cta.nav-cta{width:48px;padding:0;gap:0}
  .nav-cta__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .bento{grid-template-columns:1fr}
  .area-points{grid-template-columns:1fr}
  .cond{min-height:0}
  .bento[data-icons="3d"] .cond__icon{width:76px;height:76px;border-radius:22px}
  .steps{grid-template-columns:1fr;row-gap:0}
  .step{display:grid;grid-template-columns:48px 1fr;gap:18px;padding-bottom:30px}
  .step::before{content:"";position:absolute;left:24px;top:48px;bottom:0;width:1px;background:rgba(3,199,208,.3)}
  .step:last-child::before{display:none}
  .step p{margin-top:8px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta>*{width:100%}
  .curve-card{padding:20px 18px 18px}
  .curve-mark-label{font-size:24px}
  .curve-lbl{display:none}
  .def-photo{aspect-ratio:16/9}
  .foot-text{font-size:1rem}
}
@media (max-width:400px){
  .hero{padding-top:max(40svh,236px)}
  .hero__title{font-size:1.95rem}
  .hero__text{font-size:1rem;line-height:1.6}
  .hero__id{padding-left:16px}
  .hero__title .outline-text{-webkit-text-fill-color:currentColor;-webkit-text-stroke:0}
  .shiny-cta,.btn{padding-inline:1.3em;letter-spacing:.1em}
}
@media (hover:none){
  .hero__spot{display:none}
}

/* ==================== 17. MOVIMENTO REDUZIDO / IMPRESSÃO ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .reveal-item{opacity:1!important}
  .reveal-active,.reveal-active .clip-reveal,.clip-reveal.reveal-active,.reveal-active .curve-draw,.hero__img,.hero__title em.accent{animation:none!important}
  .js .clip-reveal{clip-path:none!important}
  .ambient-glow span,.seal__spin,.shiny-cta::before,.shiny-cta .shine::before,.scroll-cue .mouse::after,
  .marquee__track,.steps__rail::after,.doc-tl__rail::after,.hero__id::before,.holo-pt::after,.holo-pt i,.holo__wash,.holo-chip::before,.doc-hero__img{animation:none!important}
  .hero__id::before,.doc-tl__rail,.steps__rail::after,.shiny-cta .shine{display:none}
  .cmap__pulse{animation:none!important;opacity:.55;transform:none}
  .lead.is-opening,.lead.is-closing,.lead.is-opening::backdrop,.lead.is-closing::backdrop,.lead__view.is-entering,.lead__view.is-leaving{animation:none!important}
  .js .curve-draw{stroke-dashoffset:0!important}
  .js .curve-draw{stroke-dasharray:none!important}
  .bp-draw{stroke-dashoffset:0!important;stroke:rgba(3,199,208,.38)!important}
  .bp-fill,.bp-pop{opacity:1!important;transform:none!important;animation:none!important}
  /* rodapé: logomarca visível de cara, blueprint oculto */
  .foot-brand__logo img{opacity:1!important;animation:none!important}
  /* navbar: logomarca branca visível de cara, intro desativada (opacity sem !important para a troca is-light continuar) */
  .js .nav-logo .logo-white{opacity:1;animation:none!important}
  .blueprint--logo{display:none!important}
}
@media print{
  #navbar,#reading-progress,.scroll-cue,.ambient-glow,.hero__spot,.marquee,.menu-panel,.lead,.cmap__pulse{display:none!important}
  .hero{min-height:0;padding:40px 0;background:#fff;color:#000}
  .hero__media{display:none}
  .hero__title,.hero__text{color:#000}
  .section{padding:28px 0}
  .faq-a{grid-template-rows:1fr;visibility:visible}
  .js .reveal-item{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
  .doc-hero{display:block;min-height:0;padding:28px 0;background:#fff;color:#000}
  .doc-hero__inner{margin-top:0}
  .doc-hero__title em.accent{color:#000!important;text-decoration-color:currentColor!important}
  .doc-hero__media,.doc-tl__rail{display:none}
  .doc-hero__title,.doc-hero .chip,.doc-tl__year,.doc-tl__list p,.doc-tl__label,.doc-hero .eyebrow{color:#000!important;text-shadow:none}
  .js .clip-reveal{clip-path:none!important;animation:none!important}
  .js .curve-draw{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .js .bp-draw{stroke-dasharray:none!important}
  .js .bp-pop{opacity:1!important;transform:none!important}
  .hero__title em.accent,.outline-text{-webkit-text-fill-color:#000!important;-webkit-text-stroke:0!important;background:none!important;color:#000!important}
  .hero .eyebrow,.hero__micro,.hero .seal{color:#000!important}
  .site-footer{background:#fff;color:#000}
  .site-footer .foot-text,.site-footer .foot-text a,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer .eyebrow,.footer-links a,.footer-links__pending,.foot-col__title,.foot-clinic__name,.foot-clinic__day,.foot-clinic__addr,.foot-route__label,.foot-route__btn,.foot-tel,.foot-nav a,.foot-social__link,.credit,.credit a,.site-footer .chip{color:#000!important}
  .site-footer .footer-watermark,.site-footer .ambient-glow,.foot-cta,.foot-brand__logo{display:none}
  .foot-route__btn{box-shadow:inset 0 0 0 1.5px #000}
  .site-footer .chip{border-color:#000;background:none}
  .steps-band{background:#fff;color:#000}
  .step__t,.step p,.step__n{color:#000!important}
}


/* ============ 18. PÁGINA POLÍTICA DE PRIVACIDADE (2026-10-02) ============
   politica-de-privacidade.html (classe .page-legal no <html>): cabeçalho simples (.legal-bar: logomarca + "Voltar ao site"),
   hero curto (.legal-hero: eyebrow, h1, versão e resumo em 3 itens), sumário (.legal-toc, um <details>: recolhível no celular,
   coluna fixa com a seção ativa a partir de 1024 px, via assets/js/legal.js) e corpo com largura de leitura (.legal-body, ~68
   caracteres por linha: 34em). O rodapé é o mesmo do index.html (seção 15). Só tokens da seção 1; nada de vermelho, rosa ou laranja. */
.page-legal{scroll-padding-top:24px}
/* coluna da página: cabeçalho, hero e texto alinhados (960 px no desktop, 600 px abaixo de 1024 px) */
.legal-wrap{width:min(100% - var(--gutter)*2,960px);margin-inline:auto}

/* cabeçalho */
.legal-bar{position:relative;z-index:var(--z-raise);background:var(--surface-white);border-bottom:1px solid var(--border-light)}
.legal-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px;padding-block:12px}
.legal-bar__logo{display:inline-flex;align-items:center;flex:none;min-height:44px;border-radius:8px}
.legal-bar__logo img{height:60px;width:auto}
.legal-bar__back{min-height:48px;padding:.8em 1.4em}
.legal-bar__back svg{transition:transform var(--d-base) var(--e-out)}
.legal-bar__back:hover svg{transform:translateX(-3px)}

/* hero curto */
.legal-hero{position:relative;overflow:clip;background:var(--grad-paper);--accent-ink:#026d8b;padding:clamp(48px,7vw,96px) 0 clamp(48px,6vw,80px);border-bottom:1px solid var(--border-light)}
.legal-hero .grid-lines{-webkit-mask-image:radial-gradient(circle at 85% 20%,#000,transparent 60%);mask-image:radial-gradient(circle at 85% 20%,#000,transparent 60%)}
.legal-hero__inner{position:relative;z-index:1}
.legal-hero__title{margin-top:16px;font-size:clamp(2.4rem,5.6vw,4rem);letter-spacing:-.02em;line-height:1.05}
.legal-hero__version{margin-top:16px;font-family:var(--font-mono);font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--text-body)}
.legal-summary__title{margin-top:clamp(36px,4.5vw,56px);font-family:var(--font-sans);font-size:.8125rem;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.2em;color:var(--accent-ink)}
.legal-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:18px}
.legal-summary__item{padding:26px 26px 24px;border-radius:var(--radius-md);background:var(--surface-white);border:1px solid var(--border-light);box-shadow:var(--shadow-card)}
.legal-summary__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--brand-cyan-050);color:var(--brand-petrol-600)}
.legal-summary__icon svg{width:22px;height:22px}
.legal-summary__item h3{margin-top:16px;font-size:1.3rem;line-height:1.25}
.legal-summary__item p{margin-top:8px;font-size:.98rem;line-height:1.65;color:var(--text-body);overflow-wrap:anywhere}

/* links do texto (resumo e corpo) */
.legal-summary a,.legal-body a{color:var(--brand-navy-700);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(2,70,127,.45);transition:color var(--d-base),text-decoration-color var(--d-base)}
.legal-summary a:hover,.legal-body a:hover{color:var(--brand-navy-900);text-decoration-color:currentColor}
/* marcador [A PREENCHER] no meio do texto: quebra junto com a linha */
.legal-summary .pending,.legal-body .pending{display:inline;margin:0;line-height:inherit;font-size:.8em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* sumário + corpo */
.legal-layout{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start;padding-block:clamp(48px,6vw,88px) clamp(72px,8vw,120px)}
.legal-toc{position:sticky;top:14px;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
  padding:10px 12px;margin:-10px -12px} /* folga para o anel de foco (o overflow cortaria o contorno) */
.legal-toc__summary{display:none}
.legal-toc__title{font-family:var(--font-sans);font-size:.8125rem;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.2em;color:var(--accent-ink);margin-bottom:12px}
.legal-toc ol{border-left:1px solid var(--border-light)}
.legal-toc a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:11px 12px 11px 18px;margin-left:-1px;border-left:2px solid transparent;font-size:.92rem;line-height:1.35;color:var(--text-body);transition:color var(--d-base),border-color var(--d-base),background-color var(--d-base)}
.legal-toc__n{flex:none;min-width:2ch;font-family:var(--font-mono);font-size:.72rem;color:var(--text-body)}
.legal-toc a:hover{color:var(--brand-navy-800);background:rgba(3,199,208,.06)}
.legal-toc a.is-active{color:var(--brand-navy-900);font-weight:600;border-left-color:var(--brand-teal-500);background:linear-gradient(90deg,rgba(3,199,208,.12),rgba(3,199,208,0))}
.legal-toc a.is-active .legal-toc__n{color:var(--accent-ink)}

.legal-body{max-width:34em;font-size:1.0625rem;line-height:1.75;color:var(--text-body)}
.legal-lede{font-size:clamp(1.12rem,1.5vw,1.25rem);line-height:1.7;color:var(--text-dark);padding-bottom:clamp(28px,3vw,40px)}
.legal-sec{padding-block:clamp(36px,4vw,52px);border-top:1px solid var(--border-light)}
.legal-sec:last-of-type{padding-bottom:0}
.legal-sec__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.legal-sec h2{padding-top:4px;font-size:clamp(1.55rem,2.6vw,2.05rem);letter-spacing:-.01em;line-height:1.2}
/* alvos de foco programático (skip-link → main; sumário do celular → título da seção): sem anel, não são controles */
main[tabindex="-1"]:focus,main[tabindex="-1"]:focus-visible,.legal-sec h2[tabindex="-1"]:focus,.legal-sec h2[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}
.legal-anchor{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--text-muted);transition:color var(--d-base),background-color var(--d-base)}
.legal-anchor svg{width:18px;height:18px}
.legal-anchor:hover,.legal-anchor:focus-visible{color:var(--accent-ink);background:rgba(3,199,208,.1)}
.legal-sec h3{margin-top:32px;font-size:1.25rem;line-height:1.3}
.legal-body p{margin-top:16px}
.legal-body strong{font-weight:600;color:var(--text-dark)}
.legal-body ul{display:grid;gap:10px;margin-top:16px}
.legal-body ul>li{position:relative;padding-left:24px}
.legal-body ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--brand-teal-500)}
.legal-body dl{margin-top:20px}
.legal-body dt{margin-top:18px;padding-top:18px;border-top:1px dashed var(--border-strong);font-weight:600;line-height:1.45;color:var(--text-dark)}
.legal-body dt:first-child{margin-top:0}
.legal-body dd{margin:4px 0 0}
.legal-body dd+dd{margin-top:10px}
.legal-body dd a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:1023px){
  .legal-wrap{width:min(100% - var(--gutter)*2,600px)}
  .legal-summary{grid-template-columns:minmax(0,1fr);gap:14px}
  .legal-summary__item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:20px}
  .legal-summary__icon{grid-row:span 2}
  .legal-summary__item h3{margin-top:0;align-self:center}
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:32px}
  .legal-toc{position:static;max-height:none;overflow:visible;padding:0;margin:0;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--surface-cream)}
  .legal-toc__summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 20px;border-radius:var(--radius-md);list-style:none;cursor:pointer;font-weight:600;color:var(--text-dark);-webkit-tap-highlight-color:transparent}
  .legal-toc__summary::-webkit-details-marker{display:none}
  .legal-toc__summary svg{width:20px;height:20px;flex:none;color:var(--accent-ink);transition:transform var(--d-base) var(--e-out)}
  .legal-toc[open] .legal-toc__summary svg{transform:rotate(180deg)}
  .legal-toc__title{display:none}
  .legal-toc__nav{padding:0 8px 10px}
  .legal-toc ol{border-left:0;border-top:1px solid var(--border-light);padding-top:6px}
  .legal-toc a{margin-left:0;padding-left:12px;border-left:0;border-radius:10px}
  .legal-body{max-width:none}
}
@media (max-width:640px){
  .legal-bar__inner{min-height:72px}
  .legal-bar__logo img{height:44px}
  .legal-bar__back{padding:.7em 1.1em;letter-spacing:.08em}
  .legal-body{font-size:1rem;line-height:1.7}
  .legal-sec h3{margin-top:28px}
}
@media (max-width:380px){
  .legal-bar__logo img{height:38px}
  .legal-bar__back{padding-inline:.9em}
}
@media print{
  .legal-bar__back,.legal-toc,.legal-anchor,.legal-hero .grid-lines{display:none!important}
  .legal-hero{padding:24px 0;background:#fff}
  .legal-summary__item{box-shadow:none}
  .legal-layout{display:block;padding:24px 0}
  .legal-body{max-width:none;color:#000}
  .legal-body a{color:#000}
}


/* === 19. MARCA D'ÁGUA (peça-assinatura esfregada pela rolagem) ===
   Blueprint do monograma em duas instâncias (.wm--hero dentro da .hero e .wm--dobra dentro de #dor-cronica), que o
   site.js (bloco "marca d'água") põe nas mesmas coordenadas de página e esfrega com a rolagem: desce avança, sobe volta.
   Coreografia, segmentos e cores: 09_SITES/marca-dagua/timeline.json. Por frame só mudam opacity, transform e
   stroke-dashoffset. Sem JS fica só a instância da hero, parada no estado final. Classes .wm-* próprias: o CSS do
   blueprint do rodapé (.bp-*) não vaza para cá. Escala de camadas: hero (isolation:isolate) fundos 0-1 · marca 2 ·
   conteúdo e selo 3 · scroll-cue 4; dobra 02: grão 0 · marca 0 (pintada depois do grão) · marquee e conteúdo 1. */
.wm{
  position:absolute;left:-32%;top:16%;width:min(96vw,1300px);aspect-ratio:1/1;pointer-events:none;opacity:.16;
  --wm-ghost:rgba(143,230,234,.55);--wm-light:#fff;             /* sobre o navy: traço-fantasma ciano, traço de luz branco */
}
.wm svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}
.wm-ghost path{fill:none;stroke:var(--wm-ghost);stroke-width:1.1px;vector-effect:non-scaling-stroke}
.wm-light{stroke:var(--wm-light)}   /* a cor fica no GRUPO e os paths herdam: o site.js escreve o inline do grupo ao assentar (um path com stroke próprio venceria a herança e o traço ficaria branco puro no final) */
.wm-light path{fill:none;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wm-pop{transform-box:fill-box;transform-origin:center}
.hero .wm{z-index:2}
#dor-cronica .wm{z-index:0;--wm-ghost:rgba(2,70,127,.45);--wm-light:#027d9f}   /* sobre o papel: navy e petróleo */
/* antes do is-ready: invisível. O JS mede, posiciona e grava o estado de abertura (p = progresso.inicio do timeline.json, hoje 0,5: A, S e parte da órbita; opacidade 0,13) antes de mostrar, então nenhum quadro sai em p 0 nem com o traço inteiro */
.js .wm{visibility:hidden;opacity:.10}
.js .wm.is-ready{visibility:visible}
.js .wm-fill,.js .wm-pop{opacity:0}
.js .wm-pop{transform:scale(.2)}
/* sem JS: estado final (p=1) parado, só na hero. Restrito a :not(.is-ready): se o site.js chegar depois do fallback de 3 s do <head>, o html fica no-js com o JS rodando, e estas regras não podem brigar com o estado que o script escreve */
.no-js .wm:not(.is-ready) .wm-ghost{opacity:0}
.no-js .wm:not(.is-ready) .wm-light{stroke:var(--wm-ghost)}
.no-js .wm--dobra:not(.is-ready){display:none}
@media print{.wm{display:none!important}}

/* === 20. DISTÂNCIA E TEMPO (faixa única sob a ficha das clínicas · 2026-10-04, faixa em 2026-10-05) ===
   rota.js: UM botão ([data-rota-calc-all], na faixa .clinics-calc) lê a localização (só depois do toque), mostra a linha reta
   na hora e pede ao api/rota.php a rota de carro das DUAS clínicas. Espera e erros saem em UMA região viva na faixa
   ([data-rota-status]: .clinics-calc__status--wait | --err); o resultado de cada clínica vai para a .clinic__eta da entrada
   (role=status) como chip ao lado do nome: .clinic__eta--reta ("≈ 1,8 km em linha reta") → --ok ("≈ 4 min de carro · 1,8 km")
   | --fallback. A mais perta recebe .is-near (numeral e pin em ciano) e a etiqueta .clinic__near (tinta ciano + navy 7,8:1; nunca vermelho).
   A nota "Estimativa sem trânsito · rota OSRM · dados © OpenStreetMap" sai UMA vez, em [data-rota-note], abaixo do aviso de
   privacidade (.has-note); os dois ficam ligados ao botão por aria-describedby (rota.js acrescenta o id da nota com o resultado).
   Botão: aria-disabled + aria-busy enquanto calcula (sem disabled, para o foco ficar nele); vira "Recalcular" / "Tentar de novo".
   O rota.js marca html.has-rota ao achar a faixa e as entradas: sem ela (sem JS, ou arquivo não carregado) a faixa some
   e os links Google Maps/Waze ficam. As regiões vivas ficam sempre renderizadas, mesmo vazias (nunca display:none). */
.clinics-calc{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:20px;padding:18px 20px 20px;border-radius:var(--radius-md);background:rgba(2,70,127,.05);container-type:inline-size}
.clinics-calc__q{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:600;line-height:1.3;color:var(--text-dark)}
.clinics-calc__btn{
  display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:10px 20px;
  border:0;border-radius:var(--radius-pill);background:#fff;color:var(--brand-navy-800);box-shadow:inset 0 0 0 1.5px var(--border-strong);
  font:600 .9rem/1.2 var(--font-sans);letter-spacing:.005em;text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:color var(--d-base) var(--e-smooth),box-shadow var(--d-base) var(--e-smooth),background-color var(--d-base) var(--e-smooth),transform var(--d-fast) var(--e-out);
}
.clinics-calc__btn:hover{color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent-ink)}
.clinics-calc__btn:active{transform:scale(.98)}
.clinics-calc__btn:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent-ink),0 0 0 7px rgba(3,199,208,.45)}   /* 2026-10-05b: sem anular o outline navy global (o halo sozinho dava 1,3:1 na faixa e era igual ao hover) */
.clinics-calc__btn[aria-busy="true"]{cursor:progress;color:var(--text-body);background:var(--surface-cream);box-shadow:inset 0 0 0 1.5px var(--border-light);transform:none}
.clinics-calc__btn[aria-busy="true"]:focus-visible{box-shadow:inset 0 0 0 1.5px var(--border-light),0 0 0 7px rgba(3,199,208,.45)}   /* o anel de foco não some enquanto calcula (o foco é mantido no botão) */
.clinics-calc__ic{width:18px;height:18px;flex:none}
.clinics-calc__spin,.clinics-calc__status-spin{
  display:none;flex:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(2,70,127,.2);border-top-color:var(--brand-navy-800);animation:spin .8s linear infinite;
}
.clinics-calc__btn[aria-busy="true"] .clinics-calc__ic{display:none}
.clinics-calc__btn[aria-busy="true"] .clinics-calc__spin{display:block}
@container (min-width:440px){
  .clinics-calc__btn{width:auto;align-self:flex-start}
}
/* aviso de privacidade (sempre) e, depois do resultado, a nota "Estimativa sem trânsito · fonte" como 2ª linha (2026-10-05b).
   A versão anterior trocava um pelo outro na mesma linha e trazia o aviso de volta no :hover/:focus-visible do botão: isso escondia
   a nota — e a atribuição OSRM/OSM — para teclado (Enter mantém o foco), toque (hover pegajoso) e cursor parado sobre o botão. */
.clinics-calc__foot{display:flex;flex-direction:column;gap:4px}
.clinics-calc__foot>*{margin:0;font-size:.8125rem;line-height:1.45;color:var(--text-body)}   /* --text-body: 7,2:1 na faixa tingida (o muted dava 4,1:1) */
.clinics-calc__note{display:none}   /* não é região viva: pode sumir de vez enquanto está vazia */
.clinics-calc.has-note .clinics-calc__note{display:block}
/* região viva única: "Obtendo sua localização…" / "Calculando o tempo de carro…" / erros */
.clinics-calc__status{margin:0;font-size:.88rem;line-height:1.45;color:var(--text-body)}
.clinics-calc__status:empty{margin-top:-12px;min-height:0}   /* vazia não ocupa a linha do gap, mas segue na árvore de acessibilidade */
.clinics-calc__status--wait{display:flex;align-items:center;gap:8px}
.clinics-calc__status--wait .clinics-calc__status-spin{display:block}
.clinics-calc__status--err{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(2,70,127,.06);color:var(--brand-navy-800);font-size:.84rem}
.clinics-calc__status--err svg{width:18px;height:18px;flex:none;margin-top:1px}
/* resultado por clínica: chip pílula ao lado do nome (tempo antes da distância) + etiqueta "mais perto de você" */
.clinic__eta{margin:0;font-size:.86rem;line-height:1.3;color:var(--text-body)}
.clinic__eta:not(:empty){margin-top:8px}
.clinic__eta-main{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:.86rem;font-weight:600;line-height:1.3;color:var(--brand-navy-800)}
.clinic__eta-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--radius-pill);background:var(--brand-cyan-050);box-shadow:inset 0 0 0 1px var(--border-cyan);font-variant-numeric:tabular-nums;white-space:nowrap}
.clinic__eta-chip .approx--sym{margin-right:.3em;font-weight:500;color:var(--text-body)}
.clinic__eta--reta .clinic__eta-chip{background:#fff;box-shadow:inset 0 0 0 1px var(--border-light);color:var(--text-body)}   /* parcial (linha reta): neutro até chegar o tempo de carro */
.clinic__eta-note{margin:4px 0 0;font-size:.8125rem;font-weight:400;line-height:1.45;color:var(--text-body)}   /* só no modo legado (sem faixa) */
.clinic__eta--err{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(2,70,127,.06);color:var(--brand-navy-800);font-size:.84rem;line-height:1.45}
.clinic__eta--err svg,.clinic__eta--wait .clinic__eta-spin{width:18px;height:18px;flex:none;margin-top:1px}
.clinic__eta--wait{display:inline-flex;align-items:center;gap:8px}
.clinic__eta-spin{display:block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(2,70,127,.2);border-top-color:var(--brand-navy-800);animation:spin .8s linear infinite}
.clinic__near{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:var(--radius-pill);background:rgba(3,199,208,.14);
  color:var(--brand-navy-700);font-family:var(--font-mono);font-size:.75rem;font-weight:600;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.clinic__near::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-cyan-500);box-shadow:0 0 0 3px rgba(3,199,208,.22)}
.clinic.is-near .clinic__n{background:var(--brand-cyan-500);color:var(--bg-ink)}
html:not(.has-rota) .clinics-calc{display:none}
@media (prefers-reduced-motion:reduce){
  .clinics-calc__spin,.clinics-calc__status-spin,.clinic__eta-spin{animation:none!important;border-color:rgba(2,70,127,.2);border-top-color:var(--brand-navy-800)}
  .clinics-calc__btn:active,.clinic__link:active{transform:none}
  .clinic.is-pulse .clinic__n{animation:none!important}
}
/* impressão: a ficha sai inteira em texto (numeral, dia, nome, endereço e os links); some só a ferramenta de cálculo */
@media print{
  .clinics-calc{display:none!important}
  .clinics__list{border-top-color:#000}
  .clinic{border-bottom-color:#000;break-inside:avoid}
  .clinic__n{background:none!important;color:#000!important;box-shadow:inset 0 0 0 1px #000}
  .clinics__eyebrow,.clinic__day,.clinic__name,.clinic__addr,.clinic__addr-l1,.clinic__links-label,.clinic__link{color:#000!important}
  .clinic__eta-chip{background:none;box-shadow:inset 0 0 0 1px #000}
}