/* ==========================================================================
   Dr. Diogo Smith — Urologia
   Design system: "clínico editorial", com layout herdado sem mudança.
   Só a paleta foi trocada (24/09/2026), seguindo a
   direção visual definida para o médico: azul-marinho profundo,
   off-white, grafite e dourado champagne discreto — nunca dominante.

   Tipografia: Manrope em toda a interface — 400 no corpo, 600 nos links,
   rótulos e títulos (os títulos eram 800 até 24/09/2026) e 700 nos botões.
   Uma família só, hierarquia por peso.

   Superfícies alternadas: branco → off-white quente (#f3f1ec) → marinho.

   Assinatura visual: o FIO — 2px de dourado que marca o início de seção, o
   item ativo do menu e a borda superior dos cards no hover.
   ========================================================================== */

/* ---- Manrope — 400/600/700/800, servida localmente ---- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/manrope-400.woff2') format('woff2'),url('fontes/manrope-400.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fontes/manrope-600.woff2') format('woff2'),url('fontes/manrope-600.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fontes/manrope-700.woff2') format('woff2'),url('fontes/manrope-700.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fontes/manrope-800.woff2') format('woff2'),url('fontes/manrope-800.ttf') format('truetype');}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* --- marca ---
     Marinho #14213d + dourado, aplicados em 24/09/2026.
     O layout foi herdado sem mudança; os NOMES dos tokens (--azul-*, --teal-*)
     foram mantidos para não tocar em centenas de regras — --teal-* hoje é
     a família DOURADA. Contrastes medidos (branco / off-white #f3f1ec):

       --azul-500 #14213d  marinho, estrutura e títulos   15,97 / 14,15
       --teal-500 #9c7b3e  dourado de PREENCHIMENTO        3,95 /  3,50
                           (ícone, fio, borda: exigência 3:1 — passa)
       --teal-700 #7f6230  dourado QUANDO É TEXTO          5,69 /  5,04
       --teal-400 #d9c08f  champagne, texto sobre marinho  9,04 sobre #14213d

     O champagne #d9c08f NUNCA vai para texto em fundo claro: rende 1,77:1
     no branco e reprova até os 3:1 de ícone. Ele só aparece como
     acento sobre o marinho, onde passa com folga. */
  --brand-escuro:#14213d;--brand-turquesa:#9c7b3e;--brand-turquesa-claro:#d9c08f;

  --azul-50:#eef1f6;--azul-100:#d9dfea;--azul-200:#b5c0d5;--azul-300:#8796b4;--azul-400:#4f628b;
  --azul-500:#14213d;--azul-600:#22335a;--azul-700:#101a31;
  --azul-800:var(--azul-500);--azul-900:#0a1224;
  --teal-50:#f8f4ec;--teal-100:#efe6d3;--teal-200:#e2d2b0;--teal-400:#d9c08f;
  --teal-500:#9c7b3e;--teal-700:#7f6230;--teal-800:#664e26;
  /* 300 e 600 são apelidos do dourado de preenchimento (borda de acordeão
     e ícone), para não existirem três fontes de verdade para a mesma cor. */
  --teal-300:var(--teal-500);--teal-600:var(--teal-500);

  /* --teal-acao — o dourado QUANDO É TEXTO (5,69:1 no branco, 5,04:1 no
     off-white). Em bloco ESCURO o raciocínio inverte: sobre o marinho o
     #7f6230 cai para 2,81:1. Lá o token é redefinido para --teal-400
     (champagne #d9c08f, 9,04:1) — ver .tone-deep e o bloco de CTA. */
  --teal-acao:#7f6230;

  /* --- off-white quente: o contraponto ao marinho --- */
  --papel:#f3f1ec;--papel-2:#f1ede6;--papel-3:#e7e1d6;

  --gray-0:#fff;--gray-50:#f6f7f8;--gray-100:#eef1f4;--gray-200:#dfe4ea;--gray-300:#c6cdd6;
  /* --gray-600 é o texto secundário: 5,33:1 no branco e 4,72:1 no
     off-white #f3f1ec. Não clarear daqui sem medir de novo no off-white. */
  --gray-400:#a2abb6;--gray-500:#8F8F8F;--gray-600:#6b6b6b;--gray-700:#4b5563;--gray-800:#313842;
  --tinta:#14213d;

  --success:#9c7b3e;--info:#9c7b3e;--warning:#b8801f;--danger:#c0392f;

  --color-primary:var(--azul-500);--color-primary-hover:var(--azul-600);
  --color-secondary:var(--teal-acao);--color-accent:var(--teal-500);
  --text-strong:var(--tinta);--text-body:var(--gray-700);--text-muted:var(--gray-600);
  --text-on-brand:#fff;--text-link:var(--azul-500);
  --surface-card:#fff;--surface-page:var(--papel);--surface-brand-soft:var(--azul-50);--surface-teal-soft:var(--teal-50);
  --border-subtle:var(--gray-200);--border-default:var(--gray-300);--border-brand:var(--azul-500);
  /* contorno sobre off-white: cinza puro fica sujo, este acompanha o tom */
  --linha:rgba(20,33,61,.10);--linha-forte:rgba(20,33,61,.18);
  --focus-ring:rgba(156,123,62,.42);

  /* --- tipografia --- */
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* ESCALA CALIBRADA PARA O CELULAR.
     O topo da escala NÃO mudou: os valores a 1440px são os do desenho.
     Só a ponta estreita desceu.

       token          390px antes → depois     1440px
       --fs-display   37,6 → 31,0              65,6 (igual)
       --fs-h1        33,6 → 28,0              54,4 (igual)
       --fs-h2        29,0 → 24,0              44,0 (igual)
       --fs-h3        18,6 → 16,8              21,6 (igual)
       --fs-lead      17,5 → 16,0              20,5 (igual)
       --fs-body      17,0 → 16,0              17,0 (igual)
       --fs-eyebrow   12,0 → 11,0              12,0 (igual)

     Não bastava baixar o MÍNIMO do clamp: em clamp(min, preferido, max) o
     mínimo só entra quando o preferido cai abaixo dele, e no h2 o preferido
     a 390px já valia 28,97px contra um mínimo de 28,8. Quem manda no celular
     é o termo do meio — e é ele que foi recalculado, fixando os dois
     extremos (o valor novo a 390 e o atual a 1440) e resolvendo a reta.

     O CORPO PARA EM 16px. É o piso de leitura confortável, e o público da
     Urologia tem muita gente de 50 anos para cima: abaixo disso o ganho
     estético sai do bolso de quem precisa ler. */
  /* ESCALA MAIS DELICADA (Marco, 25/09/2026), no site todo. 1440/375px:
     display 52/30 · h1 44/27 · h2 34/23 · h3 19/16 · lead 17,4/15,5 ·
     texto 15,5/15. O piso de leitura de 16px foi relaxado para 15px a
     pedido dele. */
  --fs-display:clamp(1.9rem,1.25rem + 2.45vw,3.25rem);
  --fs-h1:clamp(1.7rem,1.15rem + 1.9vw,2.75rem);
  --fs-h2:clamp(1.45rem,1.05rem + 1.2vw,2.15rem);
  --fs-h3:clamp(1rem,.93rem + .3vw,1.2rem);
  --fs-lead:clamp(.97rem,.9rem + .25vw,1.09rem);
  --fs-body:clamp(.94rem,.9rem + .15vw,.97rem);
  /* fixo: quem governa o .eyebrow é a regra de piso de 12px mais abaixo,
     e um clamp aqui seria um token morto. */
  --fs-eyebrow:.72rem;
  --lh-display:1.03;--lh-heading:1.1;--lh-snug:1.45;--lh-body:1.72;
  --ls-display:-.028em;--ls-tight:-.022em;--ls-eyebrow:.16em;

  /* --- ritmo --- */
  --space-3:.875rem;--space-4:1.25rem;--space-5:1.75rem;--space-6:2.25rem;--space-7:3rem;
  --space-8:3.75rem;--space-9:4.5rem;
  --sec-y:clamp(4.25rem,3rem + 5.2vw,8rem);
  --container:1180px;--container-narrow:730px;--container-wide:1320px;
  --gutter:clamp(1.25rem,.9rem + 1.8vw,3rem);

  /* --- forma --- */
  --radius-xs:6px;--radius-sm:9px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;
  --radius-2xl:28px;--radius-pill:999px;

  /* --- sombra: empilhada, baixa opacidade, com tom da marca --- */
  --shadow-xs:0 1px 2px rgba(12,20,38,.05);
  --shadow-sm:0 1px 2px rgba(12,20,38,.05),0 3px 8px -3px rgba(12,20,38,.08);
  --shadow-md:0 2px 4px rgba(12,20,38,.04),0 10px 26px -10px rgba(12,20,38,.14);
  --shadow-lg:0 4px 8px rgba(12,20,38,.04),0 22px 48px -18px rgba(12,20,38,.20);
  --shadow-xl:0 6px 12px rgba(12,20,38,.05),0 38px 76px -28px rgba(12,20,38,.28);
  --shadow-brand:0 10px 24px -10px rgba(20,33,61,.55);
  --shadow-teal:0 10px 24px -10px rgba(156,123,62,.5);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --dur-fast:150ms;--dur:260ms;--dur-slow:480ms;

  --gradient-brand:linear-gradient(115deg,var(--azul-500) 0%,var(--teal-600) 62%,var(--teal-500) 100%);
  --gradient-paper:linear-gradient(180deg,#fff 0%,var(--papel) 100%);
  /* halo do hero: dourado muito diluído — profundidade sem sujar o texto */
  --glow-teal:radial-gradient(58% 68% at 80% 18%,rgba(156,123,62,.14) 0%,rgba(156,123,62,0) 66%);
  --glow-navy:radial-gradient(52% 58% at 6% 94%,rgba(20,33,61,.09) 0%,rgba(20,33,61,0) 70%);
  /* grão sutil nas faixas escuras — evita o "banding" do degradê chapado */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
/* o cabeçalho é sticky: âncoras precisam parar abaixo dele */
/* smooth só DEPOIS do load (classe .pronto, reveal.js): com ele ativo desde
   o início, abrir um link com âncora (/pagina#duvidas) virava rolagem
   animada no carregamento, e o Chrome não registrava o Largest Contentful
   Paint nessa visita. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px;}
html.pronto{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-body);background:var(--surface-card);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;}
p{margin:0;}
::selection{background:var(--teal-200);color:var(--tinta);}

/* foco visível e consistente em todo o site */
/* Foco em --teal-700 (#7f6230): 5,69:1 no branco e 5,04:1 no off-white, com
   folga sobre os 3:1 de indicador de foco (WCAG 1.4.11). O dourado de
   preenchimento #9c7b3e ficaria em 3,50:1 no off-white, perto demais do
   limite. Superfícies escuras (rodapé, faixa) têm regra própria. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--teal-700);outline-offset:3px;border-radius:var(--radius-xs);
}

/* pular para o conteúdo */
.bb-skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--azul-500);color:#fff;
  padding:14px 22px;border-radius:0 0 var(--radius-md) 0;font-weight:700;text-decoration:none;font-size:.9rem;}
.bb-skip:focus{left:0;}

/* ==========================================================================
   3. MOTION — entrada ao rolar
   O CSS só esconde quando <html> tem .js-rv, marcado por reveal.js ANTES da
   pintura. Sem JS, ou com prefers-reduced-motion, nada fica oculto.
   ========================================================================== */
/* sem will-change no estado oculto (23/09/2026): opacity/transform ja sao
   compostos, e com a rede de seguranca restrita os blocos longe da tela
   ficariam segurando camada indefinidamente */
html.js-rv [data-rv]{opacity:0;
  transition:opacity .62s var(--ease-out-quart),transform .62s var(--ease-out-quart);
  transition-delay:calc(var(--rv-i,0) * 78ms);}
html.js-rv [data-rv="up"]   {transform:translate3d(0,26px,0);}
html.js-rv [data-rv="left"] {transform:translate3d(-30px,0,0);}
html.js-rv [data-rv="right"]{transform:translate3d(30px,0,0);}
html.js-rv [data-rv="scale"]{transform:scale(.965);}
html.js-rv [data-rv="fade"] {transform:none;}
html.js-rv [data-rv].rv-in{opacity:1;transform:none;}
/* impressão / "Salvar como PDF": o IntersectionObserver não roda, então nada
   que dependa dele pode sair oculto no papel */
@media print{
  html.js-rv [data-rv],html.js-rv .rule[data-rv]{opacity:1!important;transform:none!important;transition:none!important;}
}

/* o fio de seção desenha-se da esquerda */
.rule{display:block;width:56px;height:2px;background:var(--teal-500);border-radius:2px;transform-origin:left center;}
html.js-rv .rule[data-rv]{opacity:1;transform:scaleX(0);
  transition:transform .7s var(--ease-out-quart);transition-delay:calc(var(--rv-i,0) * 78ms);}
html.js-rv .rule[data-rv].rv-in{transform:scaleX(1);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js-rv [data-rv],html.js-rv .rule[data-rv]{opacity:1!important;transform:none!important;transition:none!important;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter);}
.sec{padding-block:var(--sec-y);position:relative;}
.sec-tight{padding-block:calc(var(--sec-y) * .62);}

/* tons de superfície — o ritmo branco → papel → escuro dá hierarquia à página */
.tone-paper{background:var(--surface-page);}
.tone-paper-soft{background:var(--gradient-paper);}
.tone-brand-soft{background:var(--azul-50);}
/* Dentro de bloco escuro o dourado de ação inverte: o #7f6230 sobre o
   marinho cai para 2,81:1. Redefinir o token faz qualquer sobretítulo
   aninhado herdar a variante clara sem regra extra. */
.tone-deep{--teal-acao:var(--teal-400);background:var(--azul-800);color:rgba(255,255,255,.84);position:relative;isolation:isolate;}
.tone-deep::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);
  background-size:140px;opacity:.15;mix-blend-mode:overlay;pointer-events:none;}
.tone-deep::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(68% 88% at 84% 6%,rgba(217,192,143,.13) 0%,rgba(217,192,143,0) 62%);}
.tone-deep h1,.tone-deep h2,.tone-deep h3,.tone-deep strong{color:#fff;}
.tone-deep .eyebrow{color:var(--teal-400);}
.tone-deep .sh .lead{color:rgba(255,255,255,.76);}
/* fio de separação entre faixas de mesmo tom */
.edge-top{border-top:1px solid var(--linha);}
.edge-bottom{border-bottom:1px solid var(--linha);}

/* ==========================================================================
   5. TIPOGRAFIA
   ========================================================================== */
.display{font-family:var(--font-display);font-weight:600;font-size:var(--fs-display);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--text-strong);text-wrap:balance;}

/* olho / eyebrow — sempre acompanhado do fio */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--color-secondary);line-height:1;}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px;flex-shrink:0;opacity:.85;}
/* O olho em UMA linha no celular. A quebra não era o tamanho da fonte: há uma
   regra de PISO mais abaixo nesta folha — ".eyebrow,.cat,.crumbs,… {font-size:
   12px}" — que vence o token e existe de propósito, para rótulo pequeno não
   encolher. Medido com a fonte real, a 390px (347px úteis):
     12px + .16em  → 365 + 27 de fio e vão = 392   quebra
     12px + .10em  → 339 + 27 = 366                quebra
     12px + .055em → 316 + 22 = 338                cabe, 9px de folga
   Então o que cede é o espaçamento e o fio, não o corpo da letra. */
@media (max-width:560px){
  .eyebrow{letter-spacing:.055em;gap:8px;}
  .eyebrow::before{width:14px;}
}
.eyebrow.no-rule::before{display:none;}

/* cabeçalho de seção */
.sh{max-width:64ch;}
.sh.center{text-align:center;max-width:58ch;margin-inline:auto;}
.sh.center .eyebrow{justify-content:center;}
.sh .eyebrow{margin-bottom:var(--space-4);}
.sh h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);
  line-height:var(--lh-heading);letter-spacing:var(--ls-display);color:var(--text-strong);text-wrap:balance;}
.sh .lead{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:var(--lh-snug);
  color:var(--text-muted);text-wrap:pretty;}

/* corpo de leitura longa */
.prose p{color:var(--text-body);line-height:var(--lh-body);text-wrap:pretty;}
.prose p + p{margin-top:1.05em;}
.prose strong{color:var(--text-strong);font-weight:700;}
.prose ul{margin:1.1em 0 0;padding-left:1.15em;}
.prose li{color:var(--text-body);line-height:var(--lh-body);margin-bottom:.6em;}
.prose li::marker{color:var(--teal-500);}
.prose li:last-child{margin-bottom:0;}
.prose ul + p{margin-top:1.1em;}

/* numeral editorial.
   Usa --teal-acao, nao o dourado de preenchimento: em 38px ele conta como
   texto grande, que exige 3:1, e o #9c7b3e sobre o off-white entrega 3,50:1 —
   com a opacidade de 90% aplicada em .step .numeral, cai para 3,01:1.
   Com #7f6230 sao 5,04:1, margem que aguenta a opacidade sem reprovar. */
.numeral{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  color:var(--teal-acao);line-height:1;}

/* ==========================================================================
   6. BOTÕES
   Raio de 12px (não pílula): lê como "considerado", não como template.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:700;line-height:1;letter-spacing:-.005em;
  border-radius:var(--radius-md);cursor:pointer;text-decoration:none;border:1.5px solid transparent;
  position:relative;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn .ico,.btn svg{transition:transform var(--dur) var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:hover .ico{transform:translateX(3px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn-sm{padding:9px 16px;font-size:.85rem;min-height:40px;}
.btn-md{padding:12px 22px;font-size:.92rem;min-height:46px;}
.btn-lg{padding:15px 28px;font-size:.96rem;min-height:54px;}
.btn-block{width:100%;}

.btn-primary{background:var(--azul-500);color:#fff;box-shadow:var(--shadow-brand);}
.btn-primary:hover{background:var(--azul-600);box-shadow:0 16px 34px -12px rgba(20,33,61,.62);}
/* BOTÃO DE AGENDAR. Marinho com rótulo branco (15,97:1) e um fio interno
   champagne, que o distingue do .btn-primary sem pôr o dourado em todo CTA —
   o dossiê pede o dourado discreto, nunca dominante. Branco sobre champagne
   (#d9c08f) rende 1,77:1 e não carrega rótulo; por isso o dourado fica só
   no fio. */
.btn-secondary{background:var(--azul-500);color:#fff;box-shadow:inset 0 0 0 1px rgba(217,192,143,.55),var(--shadow-brand);}
.btn-secondary:hover{background:var(--azul-600);box-shadow:inset 0 0 0 1px rgba(217,192,143,.85),0 16px 34px -12px rgba(20,33,61,.62);}
.btn-outline{background:transparent;color:var(--azul-500);border-color:var(--linha-forte);box-shadow:var(--shadow-xs);}
.btn-outline:hover{border-color:var(--azul-500);background:var(--azul-50);box-shadow:var(--shadow-sm);}
.btn-ghost{background:transparent;color:var(--color-secondary);border-color:transparent;padding-inline:10px;}
.btn-ghost:hover{color:var(--teal-700);background:var(--teal-50);}
/* Verde OFICIAL do WhatsApp (#25D366) com tipografia ESCURA.
   O branco rendia 1,98:1 em repouso — reprovava o WCAG AA com folga. Com o
   marinho da marca o rótulo passa, sem tocar no verde, que é o sinal de
   reconhecimento do canal. */
.btn-whatsapp{background:#25D366;color:#14213d;box-shadow:0 10px 24px -12px rgba(37,211,102,.75);}
.btn-whatsapp:hover{background:#1fbe5b;color:#14213d;}
.btn-whatsapp .ico,.btn-whatsapp svg{color:#14213d;}
/* sobre faixa escura */
.tone-deep .btn-outline{color:#fff;border-color:rgba(255,255,255,.32);}
.tone-deep .btn-outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.6);}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}.btn:hover .ico{transform:none;}}

/* link com seta — microinteração padrão do site */
.go{display:inline-flex;align-items:center;gap:7px;min-height:28px;font-size:.9rem;font-weight:700;
  color:var(--color-primary);text-decoration:none;transition:color var(--dur);}
.go .ico{transition:transform var(--dur) var(--ease);}
/* hover em --teal-700 (5,69:1); o --teal-600 = #9c7b3e dá 3,95:1 e reprova como texto */
.go:hover{color:var(--teal-700);}
.go:hover .ico{transform:translateX(4px);}
/* Alvo de toque: nos cards em que o .go é o ÚNICO link, ele cobre o card inteiro.
   O texto continua sendo o rótulo acessível, mas a área clicável passa de ~25px
   de altura para o card todo — o padrão "stretched link". Só é aplicado nas
   variantes de card que não têm outros links dentro. */
.area-card .go::after,.post-card .go::after,
.area-mini .go::after,.proc-box .go::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
}

/* link de texto com sublinhado que cresce */
.link-underline{color:var(--color-primary);font-weight:600;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;
  background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .32s var(--ease-out-quart),color var(--dur);}
.link-underline:hover{background-size:100% 1.5px;}

/* ==========================================================================
   7. CARDS — hover: elevação + fio dourado na borda superior
   ========================================================================== */
.card{
  position:relative;background:var(--surface-card);border:1px solid var(--linha);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--space-6);
  /* overflow:hidden prende o fio do hover DENTRO do contorno arredondado —
     sem ele, a linha reta vazava para fora dos cantos de 22px. A box-shadow
     não é afetada (sombras não são recortadas pelo overflow do próprio elemento). */
  overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur);
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--teal-500);transform:scaleX(0);transform-origin:left center;
  transition:transform .42s var(--ease-out-quart);
}
.card-interactive:hover,.card-interactive:focus-within{
  transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--teal-200);
}
.card-interactive:hover::before,.card-interactive:focus-within::before{transform:scaleX(1);}
.card-flat{box-shadow:none;}
.card-paper{background:var(--surface-page);}
.tone-paper .card{border-color:rgba(20,33,61,.09);}
@media (prefers-reduced-motion:reduce){
  .card-interactive:hover{transform:none;}
  .card::before{display:none;}
}

/* ==========================================================================
   8. LADRILHOS DE ÍCONE
   ========================================================================== */
/* min-* e não width/height: reserva a caixa do ícone ANTES do icons.js
   injetar o SVG (senão o texto do botão pula ~16px quando ele chega),
   mas não atropela os .itile, que são o mesmo elemento com tamanho
   próprio bem maior. */
.ico{display:inline-flex;align-items:center;justify-content:center;line-height:0;
  min-width:1em;min-height:1em;}
.ico svg{width:1em;height:1em;display:block;}
.itile{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);
  flex-shrink:0;transition:transform var(--dur) var(--ease),background var(--dur),color var(--dur);}
.itile-azul{background:var(--azul-50);color:var(--azul-500);}
.itile-teal{background:var(--teal-50);color:var(--teal-600);}
.itile-line{background:transparent;border:1.5px solid var(--linha-forte);color:var(--teal-600);}
.card-interactive:hover .itile{transform:scale(1.06) rotate(-3deg);}
.card-interactive:hover .itile-teal{background:var(--teal-100);}
@media (prefers-reduced-motion:reduce){.card-interactive:hover .itile{transform:none;}}

/* ==========================================================================
   9. AVISOS E DESTAQUES
   ========================================================================== */
.alert{display:flex;gap:15px;align-items:flex-start;border-radius:var(--radius-lg);padding:18px 20px;}
.alert-care{background:var(--teal-50);border:1px solid var(--teal-100);}
.alert .ai{color:var(--teal-600);flex-shrink:0;font-size:20px;margin-top:2px;}
.alert .at{font-weight:700;color:var(--teal-700);margin-bottom:4px;font-size:.95rem;}
.alert .ad{color:var(--text-body);font-size:.93rem;line-height:1.62;}

/* resposta rápida (AEO) — bloco de abertura das páginas de conteúdo */
.ex-tldr{position:relative;background:var(--surface-page);border:1px solid var(--linha);
  border-radius:var(--radius-lg);padding:22px 24px 22px 27px;margin:0 0 32px;overflow:hidden;}
.ex-tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal-500);}
.ex-tldr .ex-tldr-lbl{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-secondary);margin-bottom:9px;}
.ex-tldr p{font-size:var(--fs-body);line-height:1.66;color:var(--text-body);}

/* CTA no meio do conteúdo longo */
.ex-cta-mid{margin:38px 0;padding:24px 26px;background:var(--azul-50);
  border:1px solid var(--azul-100);border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;
  position:relative;overflow:hidden;}
.ex-cta-mid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 130% at 100% 0%,rgba(156,123,62,.14),transparent 70%);}
.ex-cta-mid p{margin:0;font-weight:700;color:var(--text-strong);font-size:var(--fs-body);line-height:1.4;
  position:relative;max-width:44ch;}
.ex-cta-mid .btn{flex-shrink:0;position:relative;}

/* citação editorial */
.pull{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem);
  line-height:1.34;letter-spacing:-.02em;color:var(--text-strong);border-left:2px solid var(--teal-500);
  padding-left:clamp(1.1rem,2.2vw,1.75rem);margin:0;text-wrap:pretty;}

/* ==========================================================================
   10. GRADES E LISTAS
   ========================================================================== */
.grid-auto{display:grid;gap:clamp(14px,1.5vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));}
.grid-2{display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:1fr 1fr;align-items:center;}
.grid-2>*{min-width:0;}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;}}
/* Grade determinística para conjuntos de 4 cards: 4 → 2×2 → 1.
   O auto-fill encaixava 3 colunas no desktop e largava o 4º card órfão
   numa linha sozinha — nunca mais. */
.grid-4{display:grid;gap:clamp(14px,1.5vw,20px);grid-template-columns:repeat(4,1fr);}
@media (max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-4{grid-template-columns:1fr;}}
/* Par de cards largos (hub das áreas): 2×2 no desktop, 1 coluna no mobile. */
.grid-2x2{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(2,1fr);}
.grid-2x2>*{min-width:0;}
@media (max-width:760px){.grid-2x2{grid-template-columns:1fr;}}

/* ==========================================================================
   10.8 CARTÃO DE UNIDADE — informação à esquerda, mapa à direita.
   Usado em /agendamento. Mora aqui, e não no <style> da página, pelo mesmo
   motivo do cartão de artigo (§10.6) e do de área (§10.7): cartão definido
   dentro de uma página não existe para a outra.
   O nome da unidade pode ser <h2> (quando é o título do bloco) ou <h3>
   (quando a seção já tem o seu <h2>): o seletor cobre os dois, para a ordem
   dos títulos ficar certa em qualquer página que use o cartão.
   ========================================================================== */
.un{overflow:hidden;padding:0;}
.un + .un{margin-top:clamp(1.5rem,2.5vw,2rem);}
.un .grid{display:grid;grid-template-columns:1.1fr .9fr;}
.un .info{padding:clamp(1.6rem,3.2vw,2.35rem);}
.un .badge-un{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--color-secondary);margin-bottom:12px;}
.un h2,.un h3{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.15rem,1rem + .5vw,1.35rem);
  letter-spacing:-.022em;color:var(--text-strong);line-height:1.22;margin-bottom:var(--space-3);}
.un .end{margin:0;font-size:.94rem;line-height:1.62;color:var(--text-body);}
.un dl{margin:var(--space-5) 0 0;padding:var(--space-5) 0 0;border-top:1px solid var(--linha);}
.un dt{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:12px;}
.un dd{margin:0;}
.un .hor{display:grid;}
.un .hor .l{display:flex;justify-content:space-between;gap:16px;font-size:.94rem;padding:10px 0;
  color:var(--text-body);}
.un .hor .l + .l{border-top:1px solid var(--linha);}
.un .hor .l b{color:var(--text-strong);font-weight:700;}
/* Frase que entra no lugar da tabela enquanto os dias reais não chegam. */
.un .hor-aviso{margin:0;font-size:.94rem;line-height:1.6;color:var(--text-body);}
.un .tels{display:flex;flex-wrap:wrap;gap:10px;}
.un .tels a{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;
  color:var(--color-primary);text-decoration:none;background:var(--surface-page);
  border:1px solid var(--linha);border-radius:var(--radius-md);padding:11px 17px;
  transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease);}
.un .tels a:hover{border-color:var(--teal-300);background:var(--teal-50);transform:translateY(-2px);}
.un .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-6);}
.un .mapa{position:relative;min-height:300px;background:var(--surface-page);
  border-left:1px solid var(--linha);display:flex;flex-direction:column;}
.un .mapa iframe{width:100%;height:100%;min-height:300px;border:0;display:block;flex:1;
  filter:saturate(.92);}
@media (max-width:900px){
  .un .grid{grid-template-columns:1fr;}
  .un .mapa{border-left:0;border-top:1px solid var(--linha);min-height:250px;}
}
@media (max-width:520px){.un .acoes .btn{width:100%;}.un .tels a{width:100%;justify-content:center;}}

/* ==========================================================================
   10.7 CARTÃO DE ÁREA — foto no topo, texto embaixo.
   Usado pela home e pela página do médico: cartão definido dentro de uma
   página não existe para a outra. Mesma consolidação feita no cartão de
   artigo (§10.6).
   ========================================================================== */
.areas-grid{margin-top:var(--space-8);}
.area-card{display:flex;flex-direction:column;}
.area-card .itile{width:54px;height:54px;font-size:26px;margin-bottom:var(--space-4);}
/* Capa sangrando até a borda do cartão: a margem negativa anula o padding do
   .card, e o overflow:hidden que ele já tem recorta a imagem no canto
   arredondado.
   Os arquivos são 400×300 (4/3) e o slot é 16/9: o object-fit:cover mantém
   100% da LARGURA e corta 25% da altura, 12,5% em cima e 12,5% embaixo.
   Imagem nova precisa ter o assunto centrado, fora dessas duas faixas. */
.area-card .capa{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  background:var(--surface-page);}
.area-card .capa img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.area-card h3{font-family:var(--font-display);font-weight:600;font-size:1.12rem;letter-spacing:-.02em;text-wrap:balance;
  color:var(--text-strong);line-height:1.24;margin-bottom:9px;}
.area-card p{color:var(--text-muted);line-height:1.58;font-size:var(--fs-body);flex-grow:1;
  margin-bottom:var(--space-5);}

/* ==========================================================================
   10.6 CARTÃO DE ARTIGO — capa à esquerda, conteúdo à direita.

   O mesmo componente do blog (blog-includes/card.php), trazido para o site
   para que a home e as quatro páginas de área mostrem os artigos no mesmo
   cartão do blog, e não num cartão vertical à parte.

   Antes disto havia TRÊS cópias do mesmo cartão — uma no <style> do
   index.php, uma no lp.css e a do blog. As duas primeiras saíram; esta é a
   única do site.

   A CAPA MANDA NA ALTURA. Sem aspect-ratio declarado, a altura da caixa vem
   do texto, que muda conforme o título tem 2 ou 3 linhas — e aí a proporção
   do recorte varia de cartão para cartão NA MESMA TELA. Com a proporção
   declarada, o corte vira um número escolhido: 9/10 sobre uma capa 16:9
   mantém 51% da largura, igual em todos.
   ========================================================================== */
.posts-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(2,1fr);
  margin-top:var(--space-8);}
.posts-grid>*{min-width:0;}
/* .card.post-card e não .post-card: o .card define padding:var(--space-6) com
   a mesma especificidade, e um empate se resolveria pela ordem no arquivo —
   frágil demais para uma regra que zera o padding. */
.card.post-card{padding:0;}
.post-card{display:grid;grid-template-columns:40% 1fr;align-items:stretch;}
/* A PROPORÇÃO DA CAPA MORA NO ::before, NÃO EM aspect-ratio.

   Item de grade com aspect-ratio é esticado nos dois eixos: quando a linha
   cresce por causa do texto, o navegador aplica a proporção e AUMENTA A
   LARGURA junto, passando da coluna. Medido com aspect-ratio, já com
   min-width:0: coluna de 155,33px e capa de 156,84px, invadindo o padding do
   texto — 11px de folga à esquerda contra 13 à direita. No desktop era pior:
   coluna 214, capa 231, folga de 5 contra 23.

   Porcentagem de padding resolve contra a LARGURA do bloco que a contém.
   Então a altura continua saindo da largura, igual ao aspect-ratio, mas a
   caixa perde a regra de dimensionamento que a alargava: a capa passa a ter
   a largura da coluna, ponto.

   A imagem vira absoluta para que, no caso extremo em que o texto ainda seja
   mais alto que a proporção, ela preencha a caixa inteira em vez de deixar
   sobra embaixo. */
.post-card .capa{margin:0;background:var(--surface-page);overflow:hidden;
  position:relative;min-width:0;}
.post-card .capa::before{content:"";display:block;padding-top:111.111%;}  /* 9/10 */
.post-card .capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* min-width:0 é obrigatório: sem ele a coluna de texto não encolhe abaixo do
   conteúdo e uma palavra longa ("ureterorrenolitotripsia") empurra o cartão para
   fora da grade. */
.post-card .body{padding:16px 24px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;}
/* Artigo sem capa: o texto ocupa as duas colunas em vez de deixar 40% em branco. */
.post-card .body:only-child{grid-column:1/-1;}
/* letter-spacing curto e uma linha só: um nome de categoria longo, em duas
   linhas, empurrava o texto além da altura da capa — era isso que fazia
   cartões vizinhos terem recortes diferentes. */
.post-card .cat{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-secondary);margin:0 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--linha);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.post-card h3{font-family:var(--font-display);font-weight:600;font-size:1.04rem;letter-spacing:-.02em;
  line-height:1.28;color:var(--text-strong);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;hyphens:auto;}
/* 2 linhas, não 3. O orçamento de altura é o da capa: 214,27 × 10/9 = 238px.
   Com 3 linhas o texto pedia 257 e passava a mandar na linha da grade — e aí
   a proporção declarada da capa era ignorada calada, com o recorte mudando
   conforme os títulos tivessem 1, 2 ou 3 linhas. Com 2, o pior caso fica em
   231 e a CAPA volta a mandar, que é o que mantém o recorte igual em todos.
   (O blog segue com 3 porque o cartão dele é 14px mais largo e cabe.) */
.post-card p{font-size:.84rem;line-height:1.58;color:var(--text-muted);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post-card .go{margin-top:0;font-size:.86rem;}
/* Uma coluna já em 1100px: em duas, abaixo disso, a coluna de texto cai para
   menos de 240px e o título volta a ser cortado. Aqui a capa passa a ter
   largura FIXA — a altura do cartão é praticamente a mesma em toda a faixa, e
   é a LARGURA que precisa ser estável para o recorte não oscilar. */
@media (max-width:1099px){
  .posts-grid{grid-template-columns:1fr;}
  .post-card{grid-template-columns:300px 1fr;}
  .post-card .capa::before{padding-top:80%;}        /* 5/4 */
  .post-card .body{padding:20px 26px;}
}
/* Celular — a maior parte dos acessos. O resumo sai: numa coluna de ~160px
   ele daria um toco, e a altura extra ainda pioraria o recorte da capa. Ficam
   capa, categoria, título inteiro e o convite explícito — quem lê é leigo e
   precisa ser orientado, não só receber um cartão clicável. */
@media (max-width:640px){
  .post-card{grid-template-columns:min(45%,168px) 1fr;}
  .post-card .capa::before{padding-top:116.667%;}   /* 6/7 */
  .post-card .body{padding:12px 13px;}
  .post-card p{display:none;}
  .post-card .cat{white-space:normal;overflow:visible;font-size:.75rem;letter-spacing:.03em;
    line-height:1.16;margin-bottom:6px;padding-bottom:6px;}
  .post-card h3{font-size:.94rem;line-height:1.3;-webkit-line-clamp:5;margin:0 0 8px;}
  .post-card .go{font-size:.78rem;}
}
@media (max-width:360px){
  .post-card{grid-template-columns:min(42%,140px) 1fr;}
  .post-card .capa::before{padding-top:133.333%;}   /* 3/4 */
  .post-card h3{font-size:.87rem;-webkit-line-clamp:5;}
  .post-card .cat{font-size:.75rem;letter-spacing:.02em;}
}

/* ==========================================================================
   10.5 SLIDER — fileiras longas de cards viram páginas deslizáveis.
   Scroll-snap nativo: o arrasto/swipe é do navegador; o slider.js só cuida
   das setas e das bolinhas. Sem JS, vira uma fileira com scroll horizontal —
   nada fica escondido.
   Variantes: .slider-4 (4 por vista), .slider-3 (3 por vista) e .slider-2
   (2 por vista). As duas primeiras caem para 2 no tablet; todas caem para
   86% (com espiada do próximo) no celular.
   A variante é escolhida pela largura da VIEWPORT, não do container — um
   slider dentro de meia coluna precisa da variante menor para não espremer
   os cartões. É o caso do .ag-info em agendamento.php.
   ========================================================================== */
.slider{margin-top:var(--space-8);}
/* O padding/margin negativos dão ar para a sombra e o lift do hover DENTRO do
   scrollport — um scroll container recorta overflow vertical dos filhos. */
.slider-track{display:grid;grid-auto-flow:column;gap:16px;overflow-x:auto;
  /* SEM scroll-behavior:smooth: com snap obrigatorio e o
     padding de 4px, o track rolava SOZINHO de 0 a 4px no carregamento — de
     forma suave — e o Chrome encerrava a medicao do Largest Contentful
     Paint antes do primeiro candidato: a pagina ficava sem essa metrica.
     As setas e
     bolinhas continuam suaves: o slider.js pede behavior:'smooth' no
     scrollTo; o swipe/snap nativo tambem continua animado. */
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:8px 4px 30px;margin:-8px -4px -30px;}
.slider-track::-webkit-scrollbar{display:none;}
/* o track tem 4px de respiro lateral (sombra dos cartões); sem este
   scroll-padding o snap assentava os cartões 4px fora da coluna de texto */
.slider-track{scroll-padding-inline:4px;}
.slider-track>*{scroll-snap-align:start;}
.slider-4 .slider-track{grid-auto-columns:calc((100% - 48px)/4);}
.slider-3 .slider-track{grid-auto-columns:calc((100% - 32px)/3);}
.slider-2 .slider-track{grid-auto-columns:calc((100% - 16px)/2);}
@media (max-width:1080px){
  .slider-4 .slider-track,.slider-3 .slider-track{grid-auto-columns:calc((100% - 16px)/2);}
}
@media (max-width:640px){
  .slider-4 .slider-track,.slider-3 .slider-track,
  .slider-2 .slider-track{grid-auto-columns:86%;}
}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:var(--space-5);}
.slider-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--linha-forte);
  background:var(--surface-card);color:var(--azul-500);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;
  transition:border-color var(--dur),background var(--dur),color var(--dur),opacity var(--dur);}
.slider-btn svg{width:18px;height:18px;}
.slider-btn:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--teal-500);background:var(--teal-50);color:var(--teal-700);}
.slider-btn:disabled{opacity:.32;cursor:default;}
/* no limite o foco FICA na seta (aria-disabled): esmaece so o desenho e a
   borda — opacity no botao inteiro levava o anel de foco a 1,6:1 */
.slider-btn[aria-disabled="true"]{cursor:default;border-color:var(--linha);}
.slider-btn[aria-disabled="true"] svg{opacity:.32;}
/* min-width:0 + wrap: como item de flex, a fila de bolinhas não encolhe abaixo
   do conteúdo e estouraria a tela se houvesse muitas páginas. */
.slider-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-width:0;}
/* O ponto mede 8px, mas o BOTÃO precisa de área de toque: 8px de altura
   reprova o mínimo de 24px da WCAG 2.2 (2.5.8) e é difícil de acertar no
   celular. O padding cria a área; o background-clip mantém o ponto
   visualmente pequeno. */
/* padding lateral so para o ALVO: o ponto continua com 8px visuais por causa
   do background-clip:content-box, mas a area clicavel vai a 24px, que e o
   minimo do WCAG 2.5.8. */
.slider-dot{position:relative;width:8px;height:8px;border:none;padding:9px 8px;box-sizing:content-box;
  background:transparent;cursor:pointer;transition:width var(--dur) var(--ease-out-quart);}
/* O ponto visível é o ::before, centrado no botão. Antes era o background do
   próprio botão recortado no content-box — mas o toque (hover:none) sobe o
   padding para 18px, o botão fica mais alto que largo, o border-radius
   deixa de alcançar o miolo de 8px e as bolinhas viravam QUADRADOS no
   celular (Marco, 25/09/2026). Assim o padding pode mudar à vontade.
   --gray-600 (4,72:1) e --teal-700 no ativo (5,04:1): o ponto é o único
   sinal visual do botão e precisa de 3:1 (WCAG 1.4.11). */
.slider-dot::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:8px;margin-top:-4px;
  border-radius:var(--radius-pill);background:var(--gray-600);transition:background var(--dur);}
.slider-dot:hover::before{background:var(--gray-700);}
.slider-dot.active{width:24px;}
.slider-dot.active::before{background:var(--teal-700);}
/* TRILHO (23/09/2026): quando as bolinhas não cabem numa linha entre as setas
   — 8 páginas no celular quebravam em 6 + 2 —, o slider.js põe .slider--rail
   e elas dão lugar a um trilho fino cujo cursor acompanha o dedo em tempo
   real. Decorativo (aria-hidden): setas e swipe seguem sendo a navegação. */
.slider-rail{display:none;position:relative;flex:0 1 200px;min-width:72px;height:4px;
  border-radius:var(--radius-pill);background:rgba(20,33,61,.12);overflow:hidden;}
.slider-rail span{position:absolute;left:0;top:0;height:100%;width:24px;
  border-radius:inherit;background:var(--teal-700);will-change:transform;}
.slider--rail .slider-dots{display:none;}
.slider--rail .slider-rail{display:block;}
@media (prefers-reduced-motion:reduce){.slider-track{scroll-behavior:auto;}.slider-dot{transition:none;}}

/* lista de checagem — padrão do site para enumerar condições/itens */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
/* 16px (23/09/2026): texto de leitura, piso do publico mais velho */
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-body);line-height:1.52;
  color:var(--text-body);margin:0;}
.checklist li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--teal-500);
  stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
/* régua entre itens (coluna única): linha sob todos, menos o último */
.checklist-ruled{gap:0;}
.checklist-ruled li{margin:0;padding:11px 0;border-bottom:1px solid var(--linha);}
.checklist-ruled li:first-child{padding-top:0;}
.checklist-ruled li:last-child{border-bottom:0;padding-bottom:0;}
.checklist-boxed li{background:var(--surface-card);border:1px solid var(--linha);
  border-radius:var(--radius-md);padding:13px 16px;
  transition:border-color var(--dur),transform var(--dur) var(--ease),box-shadow var(--dur);}
.checklist-boxed li:hover{border-color:var(--teal-200);transform:translateX(3px);box-shadow:var(--shadow-xs);}
/* Duas colunas por CSS columns, não por grid: no grid cada linha herdava a
   altura do item mais alto do par e criava "buracos" de espaçamento quando um
   item de 1 linha ficava ao lado de um de 2. Columns mantém o ritmo contínuo.
   Fio entre os itens: régua sutil sob TODOS (inclusive os últimos de cada
   coluna — o CSS não enxerga quebras de coluna, e o padding uniforme é o que
   mantém o topo das duas colunas alinhado). */
.checklist-cols{display:block;columns:2;column-gap:36px;}
.checklist-cols li{break-inside:avoid;margin-bottom:0;padding:11px 0;
  border-bottom:1px solid var(--linha);}
@media (max-width:640px){.checklist-cols{columns:1;}}
@media (prefers-reduced-motion:reduce){.checklist-boxed li:hover{transform:none;}}

/* ==========================================================================
   11. PADRÕES DE PÁGINA INTERNA
   Herói, migalhas e coluna de leitura: usados por todas as páginas internas,
   para que nenhuma delas precise reinventar o próprio cabeçalho.
   ========================================================================== */

/* Tira de fotos: tres retratos lado a lado, cada um em ~1/3 da largura —
   dentro dos 600px nativos do arquivo (600x800), entao nao ha upscale.
   A ALTURA e travada (nao o aspect-ratio): com 3/4 a tira viraria um bloco de
   600px de altura no desktop. O object-position sobe o corte ate o rosto. */
/* max-width: acima de ~1560px a altura travada em 380px transformava a tira
   numa faixa horizontal, com menos de 45% de cada retrato visivel. */
.lp-tira{margin:0 auto;max-width:1600px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--linha);overflow:hidden}
.lp-tira img{width:100%;height:clamp(240px,26vw,380px);object-fit:cover;
  object-position:50% 20%;display:block}
/* Nenhuma regra de object-position por arquivo, de proposito: enquadramento
   afinado numa foto sobrevive a troca dela e passa a cortar a foto nova no
   lugar errado. Fica so o 50% 20% generico da regra acima. Ao trocar uma
   foto, conferir o recorte e so entao criar excecao, se precisar. */

/* a tira da pagina do medico traz 4 fotos; as demais, 3 */
/* Quarta coluna quando a tira tem 4 fotos (só a página do médico tem).
   O min-width é obrigatório: :has() herda a especificidade do argumento, então
   este seletor vale 0,2,1 — e media query NÃO soma especificidade, então sem
   ele esta regra vencia a de 2 colunas do celular. Resultado até 19/08/2026: a
   tira de 4 fotos ficava com 4 colunas no celular e só as fotos 1 e 4 visíveis,
   ou seja, duas fotos estreitas e duas colunas em branco. */
/* complemento exato de max-width:760px — min-width:761px deixava as larguras
   fracionarias entre 760 e 761 (Windows a 125%, zoom) sem nenhuma das duas. */
@media not all and (max-width:760px){
  .lp-tira:has(img:nth-child(4)){grid-template-columns:repeat(4,1fr)}
}

/* Tablet e celular: 2 colunas com as duas primeiras fotos.
   Duas colunas dão o recorte mais fiel — o slot fica quase na proporção
   nativa do arquivo (600x800), então quase nada é cortado. Em 375px a foto
   aparece praticamente inteira.
   Uma regra só para esconder, nth-child(n+3): antes havia uma media query
   escondendo a 3ª e outra escondendo a 2ª, e abaixo de 480px as duas valiam
   ao mesmo tempo — sobrava UMA foto, esticada num slot deitado. */
@media (max-width:760px){
  .lp-tira{grid-template-columns:repeat(2,1fr)}
  .lp-tira img:nth-child(n+3){display:none}
  .lp-tira img{height:clamp(250px,56vw,330px)}
}

/* --- migalhas --- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 2px;font-size:.8rem;
  color:var(--text-muted);margin-bottom:var(--space-5)}
.crumbs a{color:var(--color-secondary);text-decoration:none;font-weight:600;
  padding:2px 0;transition:color var(--dur)}
.crumbs a:hover{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px}
/* --gray-300 rendia 1,4:1 sobre o off-white: o ">" praticamente sumia e a
   trilha lia como uma palavra só. É decorativo (aria-hidden), mas precisa
   ser visto. */
/* o separador e texto: #8F8F8F dava 2,87:1 no off-white. --text-muted da
   4,72:1 no off-white e 5,33:1 no branco. */
.crumbs .sep{margin:0 8px;color:var(--text-muted)}
.crumbs [aria-current]{color:var(--text-body)}

/* --- herói de página interna --- */
.phero{position:relative;isolation:isolate;overflow:hidden;background:var(--gradient-paper);
  border-bottom:1px solid var(--linha)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--glow-teal)}
.phero .in{max-width:var(--container);margin:0 auto;padding:clamp(2.25rem,1.6rem + 2.6vw,3.75rem) var(--gutter) clamp(2.75rem,2rem + 3vw,4.5rem)}
.phero .tile{width:58px;height:58px;font-size:28px;margin-bottom:var(--space-5)}
.phero .eyebrow{margin-bottom:var(--space-4)}
.phero h1{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h1);
  line-height:var(--lh-heading);letter-spacing:var(--ls-display);color:var(--text-strong);
  max-width:19ch;text-wrap:balance}
.phero .lead{margin-top:var(--space-5);font-size:var(--fs-lead);line-height:1.56;
  color:var(--text-body);max-width:60ch;text-wrap:pretty}
.phero .stack-cta{margin-top:var(--space-6)}
/* variante centrada (agendamento, páginas legais) */
.phero.center-hero .in{text-align:center}
.phero.center-hero .crumbs{justify-content:center}
.phero.center-hero .eyebrow{justify-content:center}
.phero.center-hero h1{margin-inline:auto;max-width:22ch}
.phero.center-hero .lead{margin-inline:auto}
.phero.center-hero .stack-cta{justify-content:center}

/* --- coluna de leitura longa --- */
.article{max-width:var(--container-narrow);margin-inline:auto;padding:var(--sec-y) var(--gutter);}
.article-block + .article-block{margin-top:clamp(2.5rem,4vw,3.5rem)}
.article-block h2{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,1.25rem + 1.1vw,2rem);line-height:1.18;letter-spacing:var(--ls-tight);
  color:var(--text-strong);margin-bottom:var(--space-4);text-wrap:balance}
.article-block h3{font-size:var(--fs-h3);font-weight:700;color:var(--text-strong);
  margin:var(--space-5) 0 var(--space-3)}
.article-block p{color:var(--text-body);line-height:var(--lh-body);text-wrap:pretty}
.article-block p + p{margin-top:1.05em}
.article-block strong{color:var(--text-strong);font-weight:700}
.article-block ul{margin:1.15em 0 0;padding-left:1.2em}
.article-block li{color:var(--text-body);line-height:var(--lh-body);margin-bottom:.65em}
.article-block li::marker{color:var(--teal-500)}
.article-block li:last-child{margin-bottom:0}
.article-block ul + p{margin-top:1.15em}
.article-block .alert{margin-top:var(--space-6)}

/* --- bloco de condições atendidas --- */
.cond-box{background:var(--surface-page);border:1px solid var(--linha);border-radius:var(--radius-xl);
  padding:clamp(1.6rem,3vw,2.35rem)}
.cond-box h2{margin-bottom:6px}
.cond-box .nota{margin:0 0 var(--space-5);font-size:.9rem;color:var(--text-muted);line-height:1.6}
/* só neutraliza o fundo; borda e padding ficam com a régua do .checklist-cols
   (esta regra tem especificidade maior e estava anulando as linhas) */
.cond-box .checklist li{background:transparent}

/* --- lista de etapas numeradas (avaliação cirúrgica) --- */
.etapas-lista{list-style:none;margin:var(--space-6) 0 0;padding:0;counter-reset:et;display:grid;gap:12px}
.etapas-lista li{counter-increment:et;display:flex;gap:16px;align-items:flex-start;margin:0;
  background:var(--surface-page);border:1px solid var(--linha);border-radius:var(--radius-lg);
  padding:18px 20px;transition:border-color var(--dur),transform var(--dur) var(--ease)}
.etapas-lista li:hover{border-color:var(--teal-200);transform:translateX(4px)}
/* line-height:1 + margin-top alinham o topo do numeral com o do título ao lado */
.etapas-lista li::before{content:counter(et,decimal-leading-zero);flex-shrink:0;
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1;
  color:var(--teal-500);min-width:1.7em;margin-top:2px}
.etapas-lista b{display:block;font-size:.95rem;color:var(--text-strong);margin-bottom:4px}
.etapas-lista span{font-size:.9rem;line-height:1.6;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.etapas-lista li:hover{transform:none}}

/* --- páginas legais --- */
.legal-doc h2{font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:var(--ls-tight);
  color:var(--text-strong);margin:clamp(2.25rem,4vw,2.75rem) 0 var(--space-3)}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-size:1.02rem;font-weight:700;color:var(--text-strong);margin:var(--space-5) 0 8px}
.legal-doc p{margin:0 0 .95em;color:var(--text-body);line-height:var(--lh-body)}
.legal-doc ul{margin:0 0 1em;padding-left:1.2em}
.legal-doc li{color:var(--text-body);line-height:var(--lh-body);margin-bottom:.5em}
.legal-doc li::marker{color:var(--teal-500)}
.legal-doc a{color:var(--color-primary);font-weight:600;overflow-wrap:anywhere}
.legal-doc .cx{background:var(--surface-page);border:1px solid var(--linha);
  border-left:3px solid var(--teal-500);border-radius:var(--radius-lg);
  padding:22px 24px;margin:0 0 var(--space-6)}
.legal-doc .cx p:last-child{margin-bottom:0}

/* ==========================================================================
   12. UTILITÁRIOS
   ========================================================================== */
.mt-3{margin-top:var(--space-3);}.mt-4{margin-top:var(--space-4);}.mt-5{margin-top:var(--space-5);}
.mt-6{margin-top:var(--space-6);}.mt-7{margin-top:var(--space-7);}
.center{text-align:center;}
.stack-cta{display:flex;flex-wrap:wrap;gap:12px;}
.stack-cta.center{justify-content:center;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* CTAs empilham em largura total no celular: alvo de toque generoso */
@media (max-width:520px){
  .stack-cta{flex-direction:column;align-items:stretch;}
  .stack-cta .btn{width:100%;}
}
/* No celular, rótulo longo quebra linha em vez de estourar a viewport — o .btn
   tem white-space:nowrap por padrão, e rótulo de CTA em português é comprido
   ("Entender qual caminho pode ser considerado" dá 431px numa linha só). */
@media (max-width:620px){
  .btn{white-space:normal;text-align:center;line-height:1.35;max-width:100%;}
}

/* ==========================================================================
   TOQUE — o que so quebra no Safari do iPhone

   Nada aqui aparece no Chrome nem no painel de preview: sao comportamentos do
   motor do iOS. Agrupado em (hover:none) para valer no dedo e nao no mouse.
   ========================================================================== */
@media (hover:none){
  /* O iOS pinta um retangulo cinza atras de CADA toque. Num site claro isso
     le como falha de renderizacao. Tirar o retangulo obriga a devolver o
     retorno de toque, senao o botao fica mudo no dedo — e o que faz o
     :active logo abaixo. */
  a,button,summary,label,[role="button"]{-webkit-tap-highlight-color:transparent}
  .btn:active{transform:scale(.985)}
  .card-interactive:active{transform:translateY(1px)}

  /* Toque-e-segure em elemento decorativo abria o menu de copiar do iOS. */
  .ico,.itile,.slider-dot,.bbh-burger span{-webkit-user-select:none;user-select:none}

  /* Alvo minimo. A WCAG 2.2 pede 24px; a Apple recomenda 44. Os pontos do
     slider ja tem 24px de area por padding — aqui vao aos 44 no dedo, sem
     mudar os 8px visuais (o background-clip:content-box cuida disso). */
  .slider-dot{padding:18px 8px}
  .crumbs a,.blog-crumbs a{min-height:24px;display:inline-flex;align-items:center}
}

/* O iOS INFLA a fonte sozinho ao girar para paisagem sem esta linha, e o
   layout se desmonta. Reafirmado aqui porque o valor precisa existir tambem
   com o prefixo -webkit-, que o autoprefixer nao roda neste projeto. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Piso de tamanho de fonte no celular. Havia rotulo em 10,4px — no iPhone,
   com a tela a um palmo do rosto, isso e ilegivel para quem tem mais de 40
   anos, que e boa parte do publico deste site. */
@media (max-width:620px){
  .eyebrow,.hero-cred .sp,.cat,.olho,.badge-un,.post-byline,.crumbs{font-size:12px}
}

/* ==========================================================================
   FAIXA DE CREDENCIAIS (.lp-cred) — home e as 4 páginas de área (desde 25/09/2026)
   ========================================================================== */
.lp-cred{background:var(--lp-tinta,#0a1224);position:relative;isolation:isolate;overflow:hidden}
.lp-cred::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,rgba(156,123,62,.22) 0%,rgba(156,123,62,0) 68%)}
.lp-cred .in{max-width:var(--container);margin:0 auto;padding:clamp(2.25rem,3.4vw,3rem) var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px)}
.lp-cred .it{display:flex;gap:15px;align-items:flex-start;position:relative}
.lp-cred .it + .it::before{content:"";position:absolute;left:calc(-1 * clamp(10px,1.2vw,17px));
  top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.13)}
/* Réguas finas entre os itens em todas as larguras (Marco, 25/09/2026):
   desktop = fio vertical entre colunas; 2 colunas = fio vertical só entre
   o par + fio horizontal entre as fileiras; celular = fio horizontal entre
   cada item, ícone e texto alinhados no topo. */
.lp-cred .in{align-items:start}
.lp-cred .reg{display:block}
@media (max-width:940px){
  .lp-cred .in{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,40px);row-gap:0;
    padding-block:clamp(1.25rem,3vw,1.75rem)}
  .lp-cred .it{padding:20px 0}
  .lp-cred .it:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .lp-cred .it:nth-child(odd)::before{display:none}
  .lp-cred .it + .it::before{top:20px;bottom:20px;left:calc(-1 * clamp(12px,2.5vw,20px))}
}
@media (max-width:520px){
  .lp-cred .in{grid-template-columns:minmax(0,1fr);row-gap:0;padding-block:.5rem}
  .lp-cred .it{gap:14px;padding:18px 0}
  .lp-cred .it + .it{border-top:1px solid rgba(255,255,255,.12)}
  .lp-cred .it::before{display:none!important}
  .lp-cred .ic{width:38px;height:38px;font-size:18px}
  .lp-cred b{margin-bottom:5px}
}
.lp-cred .ic{width:42px;height:42px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);background:rgba(156,123,62,.18);color:#9c7b3e;font-size:20px}
.lp-cred b{display:block;font-size:.92rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px}
.lp-cred span{font-size:.84rem;line-height:1.55;color:rgba(255,255,255,.62);display:block}
/* registro: uma linha por item (CRM / RQE / RQE) em vez de quebrar no meio */
.lp-cred .reg span{display:block;white-space:nowrap;font-size:.78rem;letter-spacing:.02em}

/* ============ CARD FLUTUANTE DA NOTA (Doctoralia) ============
   Mesmo componente no retrato da home e das páginas de área (25/09/2026).
   Só o VISUAL mora aqui; a posição fica em cada página (.hero-nota na
   home, .lp-retrato .nota-doc no lp.css). Nota e total vêm de
   partials/depoimentos-dados.php. */
.nota-doc{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;
  padding:10px 16px 10px 11px;background:#fff;border:1px solid var(--linha);border-radius:var(--radius-lg);
  box-shadow:0 2px 4px rgba(12,20,38,.06),0 18px 36px -14px rgba(12,20,38,.32);text-decoration:none;
  animation:nd-flutua 6s ease-in-out infinite;transition:box-shadow var(--dur),border-color var(--dur)}
.nota-doc:hover{border-color:var(--teal-200);box-shadow:0 2px 4px rgba(12,20,38,.06),0 22px 40px -14px rgba(12,20,38,.4)}
@keyframes nd-flutua{50%{transform:translateY(-6px)}}
/* marca: círculo na cor do Doctoralia, para ser reconhecido de relance */
.nota-doc .hn-logo{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#00b39b;color:#fff;font-weight:700;font-size:1rem;line-height:1;padding-bottom:2px}
.nota-doc .hn-txt{display:flex;flex-direction:column;gap:3px}
.nota-doc .hn-l1{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:.9rem;
  color:var(--text-strong);letter-spacing:-.01em;line-height:1.2}
.nota-doc .hn-est{display:flex;gap:2px}
.nota-doc .hn-est svg{width:12px;height:12px;fill:var(--teal-500)}
.nota-doc .hn-l2{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);line-height:1.2}
@media (max-width:560px){.nota-doc{padding:8px 13px 8px 9px}}
@media (prefers-reduced-motion:reduce){.nota-doc{animation:none}}

/* ============ DEPOIMENTOS (partials/depoimentos.php, 25/09/2026) ============
   Faixa marinho com cartões brancos rolando sem parar. Duas listas iguais
   lado a lado; cada uma anda a própria largura + o vão, então a 2ª ocupa o
   lugar exato da 1ª e o laço não pula. Velocidade: 9s por cartão. */
.dep{overflow:hidden}
/* .sh h2 (mais abaixo na folha, mesma especificidade) vencia o branco do .tone-deep */
.dep .sh h2{color:#fff}
.dep-resumo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:var(--space-6)}
.dep-fonte{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;padding:11px 20px;
  border-radius:var(--radius-pill);border:1px solid rgba(217,192,143,.38);background:rgba(255,255,255,.05);
  color:#fff;text-decoration:none;font-size:.88rem;transition:background var(--dur),border-color var(--dur)}
.dep-fonte:hover{background:rgba(255,255,255,.1);border-color:var(--teal-400)}
.dep-nota{font-family:var(--font-display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.dep-est{display:flex;gap:3px}
.dep-est svg{width:15px;height:15px;fill:var(--teal-500)}
.dep-est-sm svg{width:14px;height:14px;fill:var(--teal-400)}
.dep-tot{color:rgba(255,255,255,.8)}
.dep-ver{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--teal-400)}
.dep-ver .ico{font-size:13px}
.dep-tags{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0;
  font-size:.8rem;color:rgba(255,255,255,.66)}
.dep-tags em{font-style:normal;padding:5px 12px;border-radius:var(--radius-pill);
  background:rgba(217,192,143,.12);color:var(--teal-400);font-weight:600}
.dep-mask{--gap:20px;display:flex;gap:var(--gap);margin-top:clamp(2.25rem,4vw,3.25rem);padding-block:6px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.dep-trilho{list-style:none;margin:0;padding:0;display:flex;gap:var(--gap);flex-shrink:0;
  animation:dep-rolar calc(var(--dep-n,10) * 9s) linear infinite}
@keyframes dep-rolar{to{transform:translateX(calc(-100% - var(--gap)))}}
.dep-mask:hover .dep-trilho,.dep-mask:focus-within .dep-trilho{animation-play-state:paused}
.dep-card{flex:0 0 auto;width:340px;display:flex}
.dep-card figure{position:relative;margin:0;width:100%;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--radius-xl);padding:24px 24px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 40px -22px rgba(0,0,0,.55)}
/* aspas decorativas no canto */
.dep-card figure::before{content:"\201C";position:absolute;top:6px;right:20px;font-family:Georgia,serif;
  font-size:64px;line-height:1;color:var(--teal-100);pointer-events:none}
.dep-card blockquote{margin:14px 0 0;flex:1}
.dep-card blockquote p{margin:0;font-size:.92rem;line-height:1.65;color:var(--text-body)}
.dep-card figcaption{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--linha)}
.dep-av{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--azul-50);color:var(--azul-500);font-weight:700;font-size:.88rem}
.dep-quem b{display:block;font-size:.88rem;font-weight:700;color:var(--text-strong);line-height:1.3}
.dep-quem small{display:block;font-size:.75rem;color:var(--text-muted);margin-top:2px}
.dep-nota-rodape{margin:var(--space-5) auto 0;max-width:60ch;text-align:center;font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.62)}
@media (max-width:600px){
  .dep-card{width:282px}
  .dep-card figure{padding:20px 20px 18px}
  .dep-mask{--gap:14px}
}
/* versão clara (papel) */
.dep-claro .sh h2{color:var(--text-strong)}
.dep-claro .dep-fonte{color:var(--text-strong);background:#fff;border-color:var(--linha-forte);box-shadow:var(--shadow-xs)}
.dep-claro .dep-fonte:hover{background:#fff;border-color:var(--teal-500)}
.dep-claro .dep-tot{color:var(--text-muted)}
.dep-claro .dep-ver{color:var(--teal-acao)}
.dep-claro .dep-est-sm svg{fill:var(--teal-500)}
.dep-claro .dep-tags{color:var(--text-muted)}
.dep-claro .dep-tags em{background:var(--teal-50);color:var(--teal-700)}
.dep-claro .dep-card figure{box-shadow:0 1px 2px rgba(12,20,38,.05),0 14px 30px -18px rgba(12,20,38,.22);border:1px solid var(--linha)}
.dep-claro .dep-nota-rodape{color:var(--text-muted)}
/* sem animação: vira faixa rolável com encaixe, e a cópia some */
@media (prefers-reduced-motion:reduce){
  .dep-mask{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;
    padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .dep-trilho{animation:none}
  .dep-copia{display:none}
  .dep-card{scroll-snap-align:start}
}