/* ==========================================================================
   Dra. Rafaela Marques — Cirurgia Plástica
   Design system: "clínico editorial". A identidade (28/09/2026) segue a
   logo da médica: oliva profundo #474036, marrom #a37d5a, bege #D7C4B3 e
   creme #F9F2E8 — o marrom é acento, nunca dominante.

   Tipografia: Marcellus nos títulos (peso único 400, serifada clássica,
   próxima das letras da logo) e Manrope no resto — 400 no corpo, 600 nos
   links e rótulos, 700 nos botões e sobretítulos em caixa alta.

   Superfícies alternadas: branco → creme (#F9F2E8) → oliva.

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

/* ---- Marcellus — 400, servida localmente, só nos títulos ----
   Um peso só: a fonte não tem negrito. Ver font-synthesis no body — sem ele o
   navegador engrossaria à força qualquer título que pedisse 600/700.
   Dois arquivos por unicode-range (como no Google Fonts): o latin cobre o
   português inteiro; o latin-ext só baixa se aparecer caractere de fora. */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/marcellus-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/marcellus-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---- Manrope — 400/500/600/700/800, servida localmente ----
   500 (QA 29/09/2026): o rodapé usa o peso e, sem a declaração, o navegador
   caía no 400 ou no 600 mais próximo. */
@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:500;font-display:swap;src:url('fontes/manrope-500.woff2') format('woff2'),url('fontes/manrope-500.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 ---
     Oliva + marrom + bege, aplicados em 28/09/2026.
     Os NOMES dos tokens foram mantidos para não tocar em centenas de regras,
     mas não descrevem mais a cor:
       --azul-*  é a família OLIVA (tinta, faixas escuras, botão em fundo claro);
       --teal-*  é a família MARROM/BEGE (acento, fio, sobretítulo, bege no escuro).
     Contrastes medidos pela fórmula da WCAG (branco / creme #F9F2E8):

       --azul-500 #474036  tinta escura, estrutura e títulos 10,2 / 9,2
     29/09/2026: o oliva #343726 e a família dele viraram #474036 (marrom-
     acinzentado quente), escolha do Marco, inclusive rodapé e faixas escuras.
       --teal-500 #a37d5a  marrom de PREENCHIMENTO         3,72 / 3,35
       --teal-700 #a37d5a  marrom QUANDO É TEXTO           (o mesmo tom)
     29/09/2026: o marrom passou de #815123 (6,7:1) para #a37d5a, escolha do
     Marco para o site inteiro. Como texto ele só passa no AA em tamanho
     grande (24px, ou 18,7px em negrito); em texto pequeno fica abaixo.
       --teal-400 #D7C4B3  bege, acento sobre o oliva      7,2 sobre #474036

     Sobre o oliva o marrom #a37d5a rende 2,7:1 (QA 29/09/2026: abaixo dos
     3:1 de ícone e fio; só sobre a faixa #312c25 ele chega a 3,72:1). Em
     bloco escuro o acento de texto é o bege (7,2; 9,0 sobre a
     faixa #312c25). O cinza-oliva da marca, #898675, dá 3,7 no branco:
     só borda, ícone ou texto de 24px para cima. */
  --brand-escuro:#474036;--brand-turquesa:#a37d5a;--brand-turquesa-claro:#D7C4B3;

  /* família oliva: 50/100 tingidos claros, 300 = cinza-oliva da marca,
     500 tinta, 600 hover do botão escuro (branco 9,1), 700 fim de
     gradiente, 900 a faixa de credenciais (bege 9,0) */
  --azul-50:#f1efeb;--azul-100:#e0dbd4;--azul-200:#bab2a7;--azul-300:#898675;--azul-400:#6c6356;
  --azul-500:#474036;--azul-600:#564e43;--azul-700:#3a342c;
  --azul-800:var(--azul-500);--azul-900:#312c25;
  /* família marrom/bege: 50/100/200 fundos e bordas claros, 400 o bege
     (só sobre escuro), 500/700 o marrom, 800 hover e fim de gradiente */
  --teal-50:#f3eadf;--teal-100:#eadccd;--teal-200:#dccab8;--teal-400:#D7C4B3;
  --teal-500:#a37d5a;--teal-700:#a37d5a;--teal-800:#8c6a4b;
  /* 300 e 600 são apelidos do marrom 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 marrom QUANDO É TEXTO (3,72:1 no branco, 3,35:1 no
     creme, 3,13:1 no --teal-50). Em bloco ESCURO o token é redefinido para
     --teal-400 (bege #D7C4B3, 7,2:1) — ver .tone-deep e o bloco de CTA. */
  --teal-acao:#a37d5a;
  /* botão de AGENDAR (29/09/2026, tom escolhido pelo Marco): branco sobre
     #a37d5a = 3,72:1, só passa como texto grande; hover #8c6a4b = 4,9:1 */
  --agendar:#a37d5a;--agendar-hover:#8c6a4b;

  /* --- creme: o contraponto ao oliva --- */
  --papel:#F9F2E8;--papel-2:#f4ece0;--papel-3:#ebe1d3;

  /* neutros quentes (puxados para o oliva): um cinza frio ao lado do creme
     lê como sujeira */
  --gray-0:#fff;--gray-50:#f7f5f0;--gray-100:#efece5;--gray-200:#e4ddd1;--gray-300:#cfc6b6;
  /* QA 29/09/2026: família do oliva antigo. O texto secundário é #777777
     (--text-muted) e os pontos do carrossel passaram para --azul-400/500;
     o único uso restante é o --gray-500 (#898675, o mesmo cinza-oliva da
     marca, --azul-300) na borda dos campos de partials/form-contato.php. */
  --gray-400:#a9a595;--gray-500:#898675;--gray-600:#6b675a;--gray-700:#4d4b3c;--gray-800:#37312a;
  --tinta:#474036;

  --success:#a37d5a;--info:#a37d5a;--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);
  /* texto que não é título: #777777 no corpo e no secundário (29/09/2026,
     pedido do Marco). 4,48:1 no branco; no creme ele escurece (ver "CINZA
     SOBRE CREME", logo depois deste bloco). O que não é texto (pontos do
     carrossel) usa --azul-400/500 (QA 29/09/2026). */
  --text-strong:var(--tinta);--text-body:#777777;--text-muted:#777777;
  --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 creme: cinza puro fica sujo, este acompanha o tom (oliva) */
  --linha:rgba(71,64,54,.10);--linha-forte:rgba(71,64,54,.18);
  --focus-ring:rgba(163,125,90,.42);

  /* --- tipografia ---
     --font-display é a dos TÍTULOS (Marcellus, peso 400). Sobretítulo em
     caixa alta, botão, menu, pergunta de acordeão, formulário e texto
     corrido ficam em --font-sans (Manrope). O fallback serifado segura a
     troca de fonte (font-display:swap) sem o título pular de família. */
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Marcellus',Georgia,'Times New Roman',serif;
  /* ESCALA (valores atuais, 1440/375px):
       display 47,8/28 · h1 40,5/25 · h2 32,7/22 · h3 19/16 ·
       lead 17,4/15,5 · texto 15,5/15
     - Delicada desde 25/09/2026 (Marco), no site todo; o piso de leitura
       foi relaxado de 16px para 15px a pedido dele.
     - Recalibrada para a Marcellus (28/09/2026): display e h1 a 0,92× e h2
       a 0,95× do que eram em Manrope 600, nos três termos do clamp — a
       serifada é mais larga.
     - Para mexer no celular, mexa no TERMO DO MEIO: em clamp(min, preferido,
       max) o mínimo só entra quando o preferido cai abaixo dele. Fixe os
       dois extremos (o valor a 375 e o a 1440) e resolva a reta. */
  --fs-display:clamp(1.75rem,1.15rem + 2.25vw,2.99rem);
  --fs-h1:clamp(1.56rem,1.06rem + 1.75vw,2.53rem);
  --fs-h2:clamp(1.38rem,1rem + 1.14vw,2.04rem);
  --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;
  /* Entrelinha e espaçamento dos títulos calibrados para a Marcellus: ela
     pede um pouco mais de ar entre as linhas que o Manrope (1.03/1.1 →
     1.08/1.14) e NENHUM espaçamento negativo — os -.028em/-.022em eram
     ajuste do Manrope e colam as serifas. --ls-display e --ls-tight só
     servem a títulos. */
  --lh-display:1.08;--lh-heading:1.14;--lh-snug:1.45;--lh-body:1.72;
  --ls-display:.005em;--ls-tight:0;--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 (oliva) --- */
  --shadow-xs:0 1px 2px rgba(36,32,27,.05);
  --shadow-sm:0 1px 2px rgba(36,32,27,.05),0 3px 8px -3px rgba(36,32,27,.08);
  --shadow-md:0 2px 4px rgba(36,32,27,.04),0 10px 26px -10px rgba(36,32,27,.14);
  --shadow-lg:0 4px 8px rgba(36,32,27,.04),0 22px 48px -18px rgba(36,32,27,.20);
  --shadow-xl:0 6px 12px rgba(36,32,27,.05),0 38px 76px -28px rgba(36,32,27,.28);
  --shadow-brand:0 10px 24px -10px rgba(71,64,54,.55);
  --shadow-teal:0 10px 24px -10px rgba(163,125,90,.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: marrom muito diluído — profundidade sem sujar o texto.
     --glow-navy (nome mantido) é o contra-halo em oliva. */
  --glow-teal:radial-gradient(58% 68% at 80% 18%,rgba(163,125,90,.14) 0%,rgba(163,125,90,0) 66%);
  --glow-navy:radial-gradient(52% 58% at 6% 94%,rgba(71,64,54,.09) 0%,rgba(71,64,54,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");
}

/* CINZA SOBRE CREME (30/09/2026, aprovado pelo Marco). O #777777 do texto
   dá 4,03:1 no creme (#F9F2E8, --papel) e 3,76:1 no bege da faixa de
   destaque (#F3EADF), abaixo do AA (4,5:1). Só nesses fundos o token
   escurece: #6f6f6f no creme (4,52:1) e #6a6a6a no bege (4,54:1). Lista
   tirada do mapa de fundos (dev/qa/mapa-cinza.sh): seções e caixas creme,
   e os heróis, cujo degradê termina no creme. Um cartão branco dentro de
   uma seção creme herda o token e fica com 5,0:1 — a diferença para o #777
   não se vê. Fundo novo em creme com texto cinza: incluir aqui. */
.tone-paper,.sec-areas,.lp-sec-tinta,.sb-caixa,.cond,.tabs,.lp-urgencia,.fluxo,.cx,
.hero,.lp-hero,.phero,.card.un .mapa{--text-body:#6f6f6f;--text-muted:#6f6f6f}
.lp-destaque{--text-body:#6a6a6a;--text-muted:#6a6a6a}

/* ==========================================================================
   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;
  /* Sem negrito FALSO. A Marcellus só tem o peso 400: um título que peça
     600/700 (regra antiga de página, <strong> dentro de h2) seria engrossado
     à força pelo navegador, com as serifas borradas. Assim ele fica no 400
     verdadeiro. O Manrope não é afetado (tem 400/600/700/800 reais) e o
     itálico sintético continua permitido. */
  font-synthesis:style;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;}
/* TÍTULOS DE CONTEÚDO em Marcellus 400, sem espaçamento negativo. As regras
   de componente mais abaixo repetem a família de propósito (quem lê a regra
   vê a fonte), mas esta base cobre qualquer h1–h3 sem classe própria. */
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:var(--ls-display);}
h4,h5,h6{margin:0;font-weight:600;}
/* h2/h3 que, por semântica, carregam RÓTULO ou PERGUNTA — não título —
   seguem em Manrope: a pergunta do acordeão (<h3 class="acc-h"> com um
   <button class="acc-btn"> que herda a fonte) e os rótulos em caixa alta
   das colunas do rodapé. O botão é nomeado com 0,2,0 porque dentro de
   .article-block o "h3" de lá (0,1,1) venceria o .acc-h e o botão herdaria
   a Marcellus. Peso e espaçamento continuam os de cada componente. */
.acc-h,.acc-item .acc-btn,.bbf h2{font-family:var(--font-sans);}
p{margin:0;}
/* seleção em bege claro com texto oliva (7,7:1) */
::selection{background:var(--teal-200);color:var(--tinta);}

/* foco visível e consistente em todo o site */
/* Foco em --teal-700 (marrom #a37d5a): 3,72:1 no branco e 3,35:1 no creme,
   acima dos 3:1 de indicador de foco (WCAG 1.4.11). Na faixa
   escura (.tone-deep) o marrom cairia para 2,7:1: lá o anel é bege (7,2:1),
   logo abaixo. Rodapé e CTA escuro 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);
}
.tone-deep :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline-color:var(--teal-400);}

/* 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 → creme → oliva 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 acento inverte: o marrom #a37d5a sobre o oliva
   cai para 2,7:1. Por isso os DOIS tokens do acento são redefinidos aqui:
   --teal-acao e --color-secondary. Só o primeiro não bastava — o
   --color-secondary é resolvido no :root (vira o marrom lá) e desce já
   pronto, então quem o usa (.eyebrow, .btn-ghost, .crumbs a, rótulos)
   continuaria marrom sobre o oliva. Assim qualquer acento aninhado herda o
   bege (#D7C4B3, 7,2:1) sem regra extra. Texto corrido em branco a 84%
   (9,1:1 sobre o oliva). */
.tone-deep{--teal-acao:var(--teal-400);--color-secondary: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;}
/* halo bege bem diluído no canto: profundidade sem imagem */
.tone-deep::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(68% 88% at 84% 6%,rgba(215,196,179,.13) 0%,rgba(215,196,179,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:400;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;
  /* balance (QA2 01/10/2026, C15): quando o olho não cabe numa linha (320),
     as duas linhas saem equilibradas, sem "PARTICULAR" sozinho embaixo */
  text-wrap:balance;}
.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;}
/* Compensação óptica do olho CENTRALIZADO (QA 29/09/2026): o fio (24px) e o
   vão (11px) ficam só à esquerda, e o texto saía 17px à direita do eixo do
   título. O mesmo 35px à direita devolve o texto ao centro. No celular
   (≤560) o fio encolhe e a compensação sai. O cabeçalho da coluna da
   consulta (lp.css) é alinhado à esquerda: sem compensação. */
@media (min-width:561px){
  .sh.center .eyebrow,.lp-sh .eyebrow,.areas-mais-sh .eyebrow{padding-right:35px;}
  .lp-consulta .lp-sh .eyebrow{padding-right:0;}
}
.sh .eyebrow{margin-bottom:var(--space-4);}
.sh h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);
  line-height:var(--lh-heading);letter-spacing:var(--ls-display);color:var(--text-strong);text-wrap:balance;}
/* balance (QA 29/09/2026): com pretty sobrava palavra sozinha na última
   linha do lead centralizado */
.sh .lead{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:var(--lh-snug);
  color:var(--text-muted);text-wrap:balance;}

/* 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 — o "01", "02"... das etapas.
   Em Manrope 600, NÃO na Marcellus: nela o zero é um O redondo e o 1 tem
   serifas de I, e "01" lia "OI" (conferido na tela, 28/09/2026). Número de
   etapa precisa ser lido de relance.
   Usa --teal-acao (marrom #a37d5a): 3,35:1 no creme e 3,72:1 no branco. */
.numeral{font-family:var(--font-sans);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums lining-nums;
  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%;}

/* BOTÃO EM FUNDO CLARO (os dois: .btn-primary e o de agendar, .btn-secondary).
   Oliva #474036 com rótulo branco (12,2:1; 9,1:1 no hover #564e43) e um fio
   interno bege, a assinatura do botão da marca. Branco sobre o bege daria
   1,7:1 e não carrega rótulo — por isso o bege fica só no fio. Em fundo
   ESCURO o papel inverte: botão bege com rótulo oliva (CTA e rodapé). */
.btn-primary{background:var(--azul-500);color:#fff;box-shadow:inset 0 0 0 1px rgba(215,196,179,.55),var(--shadow-brand);}
.btn-primary:hover{background:var(--azul-600);box-shadow:inset 0 0 0 1px rgba(215,196,179,.85),0 16px 34px -12px rgba(71,64,54,.62);}
/* .btn-secondary = botão de AGENDAR: --agendar #a37d5a com rótulo branco
   (3,7:1; 4,9:1 no hover #8c6a4b), tom escolhido pelo Marco em 29/09/2026. */
.btn-secondary{background:var(--agendar);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 24px -10px rgba(163,125,90,.55);}
.btn-secondary:hover{background:var(--agendar-hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 16px 34px -12px rgba(140,106,75,.6);}
.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);}
/* .btn-whatsapp saiu (QA2 01/10/2026, H10): o site não tem mais link de
   WhatsApp e nenhuma página usava a classe. */
/* sobre faixa escura: contorno claro, rótulo branco, fio bege (borda bege a
   50% sobre o oliva: 3,0:1, o mínimo de contorno de componente) */
.tone-deep .btn-outline{color:#fff;border-color:rgba(215,196,179,.5);box-shadow:none;}
.tone-deep .btn-outline:hover{background:rgba(215,196,179,.1);border-color:var(--teal-400);}
/* Botão CHEIO em faixa escura: o papel inverte. Oliva sobre o oliva
   sumiria, então vira bege #D7C4B3 com rótulo oliva (7,2:1; 8,4:1 no hover
   #e3d4c6) — o mesmo desenho do botão do CTA escuro e do rodapé. Esta regra
   vem depois de .btn-secondary:hover (mesma especificidade) de propósito:
   no hover vale o bege claro da linha de baixo, nunca o oliva do fundo claro. */
.tone-deep .btn-primary{background:var(--teal-400);color:var(--tinta);
  box-shadow:0 16px 38px -14px rgba(0,0,0,.55);}
.tone-deep .btn-primary:hover{background:#e3d4c6;
  box-shadow:0 26px 50px -16px rgba(0,0,0,.6);}
/* agendar em faixa escura: o mesmo --agendar com rótulo branco (3,72:1);
   o botão contra o oliva dá 2,7:1, e o fio bege reforça o contorno */
.tone-deep .btn-secondary{background:var(--agendar);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(215,196,179,.7),0 16px 38px -14px rgba(0,0,0,.55);}
.tone-deep .btn-secondary:hover{background:var(--agendar-hover);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(215,196,179,.9),0 26px 50px -16px rgba(0,0,0,.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 no marrom --teal-700 (3,72:1 no branco, 3,35:1 no creme) */
.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 marrom na borda superior
   ========================================================================== */
/* --card-pad (QA 29/09/2026): o padding fixo de 36px deixava a coluna de
   texto do cartão com 167–276px no celular. Agora vai de 20px (até 364px
   de tela; 20,6 a 390) a 36px (a partir de 1090). Capa que sangra até a
   borda usa o MESMO token na margem negativa (calc(-1 * var(--card-pad))),
   para nunca descasar do padding. */
.card{
  --card-pad:clamp(1.25rem,.75rem + 2.2vw,2.25rem);
  position:relative;background:var(--surface-card);border:1px solid var(--linha);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--card-pad);
  /* 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(71,64,54,.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(163,125,90,.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 — Marcellus 400, como os títulos */
.pull{font-family:var(--font-display);font-weight:400;font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem);
  line-height:1.34;letter-spacing:0;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:400;
  font-size:clamp(1.15rem,1rem + .5vw,1.35rem);
  letter-spacing:0;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);}
/* Fachada do mapa (QA 30/09/2026, COD23): a mesma ideia da miniatura do
   rodapé (.bbf .mapa-face), em versão clara sobre o creme do cartão. Malha
   de ruas girada, duas avenidas, o alfinete no marrom de agendar com o raio
   tracejado e, embaixo, a faixa "Ver no mapa". Ocupa o bloco inteiro
   (min-height do .mapa), para a troca pelo iframe não mexer no layout. O
   reveal.js troca o botão pelo <iframe> no clique.
   .card.un, não .un: o mapa do RODAPÉ também fica dentro de um div.un, e
   com .un estas regras vazavam para ele (min-height de 300px no rodapé). */
.card.un .mapa{overflow:hidden;}
/* min-height 300px = a do iframe (abaixo): no celular o .mapa tem 250px de
   mínimo, e sem isto o bloco crescia 51px quando o mapa entrava */
.card.un .mapa-face{position:relative;flex:1;display:flex;flex-direction:column;width:100%;min-height:300px;
  padding:0;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;}
.card.un .mapa-face::before{content:"";position:absolute;inset:-30%;pointer-events:none;transform:rotate(-22deg);
  background-image:repeating-linear-gradient(90deg,rgba(71,64,54,.07) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(0deg,rgba(71,64,54,.07) 0 1px,transparent 1px 46px);}
.card.un .mapa-face .mv{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;min-height:180px;}
.card.un .mapa-face .mv::before,.card.un .mapa-face .mv::after{content:"";position:absolute;background:#fff;
  box-shadow:0 0 0 1px rgba(71,64,54,.07);}
.card.un .mapa-face .mv::before{left:-10%;right:-10%;top:60%;height:10px;transform:rotate(-7deg);}
.card.un .mapa-face .mv::after{top:-20%;bottom:-20%;left:63%;width:8px;transform:rotate(16deg);}
.card.un .mapa-face .raio{position:absolute;width:128px;height:128px;border-radius:50%;
  border:1px dashed rgba(163,125,90,.55);transition:transform .6s var(--ease-out-quart),border-color .3s ease;}
.card.un .mapa-face .pin{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;
  border-radius:50%;background:var(--agendar,#a37d5a);color:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.7),0 14px 28px -10px rgba(71,64,54,.5);
  transition:transform .3s var(--ease-out-quart);}
.card.un .mapa-face .pin svg{width:22px;height:22px;display:block;}
.card.un .mapa-face .mr{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 20px;
  background:rgba(255,255,255,.9);border-top:1px solid var(--linha);}
.card.un .mapa-face .tx{flex:1;min-width:0;}
.card.un .mapa-face .tx b{display:block;font-size:.95rem;font-weight:700;color:var(--text-strong);line-height:1.35;}
.card.un .mapa-face .tx small{display:block;font-size:.84rem;color:var(--text-body);line-height:1.4;}
.card.un .mapa-face .seta{flex-shrink:0;width:16px;height:16px;color:var(--color-secondary);
  transition:transform .3s var(--ease-out-quart);}
@media (hover:hover){
  .card.un .mapa-face:hover .pin{transform:translateY(-3px);}
  .card.un .mapa-face:hover .raio{transform:rotate(45deg) scale(1.06);border-color:rgba(163,125,90,.85);}
  .card.un .mapa-face:hover .seta{transform:translateX(3px);}
}
.card.un .mapa-face:focus-visible{outline:2px solid var(--color-secondary);outline-offset:-4px;}
@media (prefers-reduced-motion:reduce){.card.un .mapa-face .pin,.card.un .mapa-face .raio,.card.un .mapa-face .seta{transition:none;}}
@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 da médica: 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 1200×675 (16/9), o mesmo formato do slot: o object-fit:
   cover não corta nada. Imagem de outra proporção perde as bordas — manter o
   assunto centrado. */
.area-card .capa{margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 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:400;font-size:1.12rem;letter-spacing:0;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.9 IMAGEM ILUSTRATIVA — saída de bb_ilustrativa() (partials/boot.php).
   A <img> sai sempre com a classe .ilustrativa: o reset (img{max-width:100%})
   estreita a imagem na coluna, mas sem height:auto a altura ficaria presa ao
   atributo height e a foto sairia achatada.
   Sem o arquivo, sai o ESPAÇO RESERVADO (.capa.capa-pendente): papel
   creme-marrom (#f3eadf) com o rótulo em #6b675a (4,75:1), tracejado para
   ler como marcador de produção, e não como imagem que falhou. Proporção
   16/9 por padding no ::before, não por aspect-ratio: dentro de item de
   grade esticado o aspect-ratio pode alargar a caixa além da coluna.
   min-width:100% dá largura quando o pai é flex centrado (sem isso a caixa,
   sem conteúdo em fluxo, encolheria a zero).
   ========================================================================== */
.ilustrativa{height:auto;}
.capa-pendente{position:relative;display:block;min-width:100%;overflow:hidden;
  background:var(--teal-50);color:var(--text-muted);}
.capa-pendente::before{content:"";display:block;padding-top:56.25%;}   /* 16/9 */
.capa-pendente>span{position:absolute;inset:10px;display:flex;align-items:center;justify-content:center;
  padding:6px;border:1px dashed var(--linha-forte);border-radius:var(--radius-md);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;
  text-align:center;color:var(--text-muted);}

/* LEGENDA VISÍVEL "Imagem ilustrativa" (28/09/2026). As fotos definitivas
   serão geradas por IA e mostram "pacientes": o aviso não fica só no alt.
   bb_ilustrativa() embrulha a <img> em <span class="ilus"> quando o slot já
   não é provisório (partials/ilustrativas-provisorias.php) e a chave
   $BB['ilustrativas_legenda'] está ligada.
   - .ilus é bloco posicionado SEM medida própria: a <img> (display:block e
     largura explícita em todo contexto) define a caixa, e o invólucro fica
     do tamanho exato dela. Contextos em que a <img> era filha direta num
     seletor com ">" ou tinha position:absolute ganham a regra do .ilus
     junto da regra da imagem (lp.css: .lp-reg .fig, .lp-caminho .capa e
     .lp-outros-card; index.php: .areas-mini).
   - Pílula no canto INFERIOR ESQUERDO (o assunto das fotos fica no centro;
     a legenda de .lp-reg fica no canto superior esquerdo). Tinta #474036
     sobre papel rgba(249,242,232,.9): 11,1:1 sobre branco, 10,8:1 sobre o
     creme dos marcadores, 9,9:1 sobre cinza médio e 8,8:1 sobre preto puro
     (pior caso; ainda AAA). Para passar de 10:1 sobre QUALQUER foto, subir
     o alfa para .96 (10,1:1 sobre preto).
   - Sem backdrop-filter (cria bloco de contenção) e sem sombra forte: só um
     fio de sombra para destacar a pílula de fundos claros.
   - aria-hidden no HTML (o alt já diz "Imagem ilustrativa: …");
     pointer-events:none para não roubar clique de cartão/link.
   - Miniatura (≤ ~140px) não leva legenda: lp.css §11 a esconde nos cartões
     compactos do celular.
   - Corpo de 12px (.75rem, QA 29/09/2026): os 10,5px de antes ficavam
     abaixo do piso de 12px dos rótulos do site. */
.ilus{position:relative;display:block;}
.ilus-tag{position:absolute;left:10px;bottom:10px;z-index:1;display:block;max-width:calc(100% - 20px);
  padding:4px 9px;border-radius:var(--radius-pill);background:rgba(249,242,232,.9);color:#474036;
  font-family:var(--font-sans);font-size:.75rem;font-weight:600;line-height:1.25;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;user-select:none;
  box-shadow:0 1px 2px rgba(36,32,27,.14);}
@media (max-width:600px){.ilus-tag{left:8px;bottom:8px;max-width:calc(100% - 16px);}}

/* ==========================================================================
   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 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;}
/* Legenda visível "Imagem ilustrativa" (§10.9, QA 29/09/2026): com a <img>
   absoluta, o .ilus sem medida própria ficaria com altura 0 e a imagem
   sumiria. Ele ocupa a capa inteira, como .lp-caminho .capa>.ilus no lp.css. */
.post-card .capa>.ilus{position:absolute;inset:0;}
/* min-width:0 é obrigatório: sem ele a coluna de texto não encolhe abaixo do
   conteúdo e uma palavra longa ("biorremodeladores") empurra o cartão para
   fora da grade.
   flex-start (QA 29/09/2026): centrado na altura, o miolo de cartões
   vizinhos começava em alturas diferentes; o .go desce ao pé (margin-top:auto). */
.post-card .body{padding:16px 24px;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-start;}
/* 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:400;font-size:1.04rem;letter-spacing:0;
  line-height:1.28;color:var(--text-strong);margin:0 0 10px;
  /* 4 linhas (QA 29/09/2026): com 3, o título mais longo do blog ("…define o
     procedimento para cada queixa") saía cortado no desktop */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word;hyphens:manual;text-wrap:pretty;}
/* hyphens:manual (QA 29/09/2026): o hifenizador automático partia nomes
   próprios ("Ribei-rão"); break-word só quebra palavra que não cabe inteira. */
/* 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:auto;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. */
/* QA 29/09/2026 (opção A): a capa com 45% espremia o título, que ainda era
   cortado a 320. A coluna da capa cai para min(34%,120px) e o título sai
   INTEIRO, sem line-clamp: no celular a altura passa a vir do texto quando
   ele é mais alto que a capa (a imagem cobre a caixa, object-fit:cover). */
@media (max-width:640px){
  .post-card{grid-template-columns:min(34%,120px) 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;margin:0 0 8px;
    display:block;-webkit-line-clamp:unset;overflow:visible;}
  .post-card .go{font-size:.78rem;}
  /* Capa de 94–120px: numa linha só a legenda saía cortada ("Imagem
     ilus…"). Ela quebra em duas linhas, como no cartão do blog. */
  .post-card .ilus-tag{white-space:normal;width:min-content;border-radius:8px;padding:3px 6px;}
}
@media (max-width:360px){
  .post-card .capa::before{padding-top:133.333%;}   /* 3/4 */
  .post-card h3{font-size:.87rem;}
  .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). Entre 861 e 1080 o .slider-4 mostra 3 e o .slider-3
   continua com 3; as duas caem para 2 a partir de 860; 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 (QA2 01/10/2026: o .slider-3 vive hoje só na frontoplastia e
   nos minimamente invasivos, os dois na largura cheia).
   ========================================================================== */
.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);}
/* .slider-4 entre 861 e 1080 (QA 29/09/2026): 3 por vista, e não 2 — com
   2, a 1024 os cartões ficavam largos e vazios. O slider.js calcula a
   paginação pela largura do cartão, então as bolinhas acompanham (8
   cartões = 3 páginas; 4 cartões = 2). Abaixo de 861 volta a 2.
   .slider-3 (QA2 01/10/2026, TB4): também fica em 3 até 861 — caía para 2
   já em 1080 e, a 1024, mostrava cartões maiores e em menor número que o
   .slider-4 da mesma página (464px, metade vazios). */
@media (max-width:1080px){
  .slider-4 .slider-track{grid-auto-columns:calc((100% - 32px)/3);}
}
@media (max-width:860px){
  .slider-4 .slider-track,.slider-3 .slider-track{grid-auto-columns:calc((100% - 16px)/2);}
}
/* Grades de 4 cartões no desktop (QA 29/09/2026): com 36px de cada lado a
   coluna de texto ficava em 189px. Padding 28px 24px: o --card-pad fica com
   os 24px dos lados (a capa sangra até as bordas pela margem dele, lp.css), e
   a capa que abre o cartão anula os 28px de cima. */
@media (min-width:1100px){
  .slider-4 .card,.val-card{--card-pad:24px;padding:28px var(--card-pad);}
  .slider-4 .card>.capa{margin-top:-28px;}
}
@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.
   --azul-400 #6c6356 (5,9:1 no branco, 5,3:1 no creme; QA 29/09/2026 —
   antes --gray-600, do oliva antigo), hover --azul-500, e --teal-700 no
   ativo (marrom, 3,72:1 no branco, 3,35:1 no creme): 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(--azul-400);transition:background var(--dur);}
.slider-dot:hover::before{background:var(--azul-500);}
.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(71,64,54,.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 da medica traz 4 fotos; as demais, 3 */
/* Quarta coluna quando a tira tem 4 fotos (só a página da médica 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}
/* O separador ">" é decorativo (aria-hidden), mas precisa ser visto: com um
   cinza claro a trilha lia como uma palavra só. Vai em --text-muted, que dá
   5,1:1 no creme e 5,7: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:400;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)}
/* h2 a 0,95× do tamanho do Manrope (mesma régua do --fs-h2); h3 5% MAIOR
   que o --fs-h3: no lugar do Manrope 700, a Marcellus 400 é mais leve e tem
   olho menor, e no tamanho antigo o subtítulo perdia a hierarquia. */
.article-block h2{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.43rem,1.19rem + 1.05vw,1.9rem);line-height:1.2;letter-spacing:var(--ls-tight);
  color:var(--text-strong);margin-bottom:var(--space-4);text-wrap:balance}
.article-block h3{font-family:var(--font-display);font-size:calc(var(--fs-h3) * 1.05);font-weight:400;
  line-height:1.26;letter-spacing:var(--ls-tight);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.
   Numeral em Manrope 600, como o .numeral (na Marcellus "01" lê "OI"),
   marrom: 3,35:1 no creme. */
.etapas-lista li::before{content:counter(et,decimal-leading-zero);flex-shrink:0;
  font-family:var(--font-sans);font-weight:600;font-size:1.3rem;line-height:1;font-variant-numeric:tabular-nums;
  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 --- */
/* Algarismos dos títulos numerados ("1.", "10.", "2.1."): na Marcellus o 1
   é igual a um I maiúsculo e o 0 a um O, então "10. Links" lia "IO. Links"
   e "11." lia "II.". Esta família só cobre os dígitos (unicode-range) e usa
   o Manrope 400; letras e pontuação continuam na Marcellus. */
@font-face{font-family:'Algarismos 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');unicode-range:U+0030-0039;}
.legal-doc h2{font-family:'Algarismos Manrope',var(--font-display);font-weight:400;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}
/* 1.08rem e não 1.02: a Marcellus 400 no lugar do Manrope 700 precisa de um
   pouco mais de corpo para o subtítulo continuar se destacando do texto */
.legal-doc h3{font-family:'Algarismos Manrope',var(--font-display);font-size:1.08rem;font-weight:400;letter-spacing:var(--ls-tight);
  color:var(--text-strong);margin:var(--space-5) 0 8px}
/* QA 29/09/2026: os títulos herdavam a entrelinha de texto (1.72) e as
   linhas de leitura tinham 85–88 caracteres. A coluna (o mesmo elemento do
   .article, com o padding da calha) fica em 680px. */
.legal-doc{max-width:680px}
.legal-doc h2,.legal-doc h3{line-height:1.25;text-wrap:balance}
.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ó). */
/* text-wrap:balance (QA 29/09/2026): sem ele o rótulo quebrado deixava uma
   palavra sozinha na segunda linha. */
@media (max-width:620px){
  .btn{white-space:normal;text-align:center;line-height:1.35;max-width:100%;text-wrap:balance;}
}

/* ==========================================================================
   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. */
/* .un .badge-un e .un dt (QA 29/09/2026): as regras do cartão de unidade
   (0,2,0) venciam o .badge-un deste piso e ficavam em 11,2px. */
@media (max-width:620px){
  .eyebrow,.hero-cred .sp,.cat,.olho,.badge-un,.post-byline,.crumbs,.un .badge-un,.un dt{font-size:12px}
}

/* ==========================================================================
   FAIXA DE CREDENCIAIS (.lp-cred) — home e páginas de área (desde 25/09/2026)
   Oliva mais fundo (#312c25, --lp-tinta no lp.css; a home não carrega o
   lp.css e usa o fallback), halo marrom diluído no topo, ícones em bege.
   ========================================================================== */
.lp-cred{background:var(--lp-tinta,#312c25);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(163,125,90,.22) 0%,rgba(163,125,90,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. */
/* stretch (QA 29/09/2026): com start cada item tinha a altura do próprio
   texto, e os fios verticais entre as colunas saíam de alturas diferentes. */
.lp-cred .in{align-items:stretch}
.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}
}
/* Ícone em bege #D7C4B3: é gráfico, pede 3:1 — dá 9,0:1 sobre a faixa e
   7,1:1 sobre o próprio chip (bege a 10%). O marrom aqui daria 3,72:1, bem abaixo do bege. */
.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(215,196,179,.1);color:var(--teal-400);font-size:20px}
.lp-cred b{display:block;font-size:.92rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px}
/* sem palavra sozinha na 2ª linha do título do item (QA 29/09/2026) */
.lp-cred .it b{text-wrap:balance}
/* branco a 62% sobre #312c25: 6,7:1 */
.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}
/* sigla com hífen dentro do texto do item: sem isto "(HC-FMRP-USP)" partia
   em "(HC- / FMRP-USP)" a 1280 e a 360. inline: o .lp-cred span acima é block */
.lp-cred span.nw{display:inline;white-space:nowrap}

/* ============ CARDS FLUTUANTES DE NOTA (Doctoralia e Google) ============
   Componente único (partials/nota-selo.php) no retrato da home e das
   páginas de área. Desde 29/09/2026 o visual E a posição moram aqui
   (.nota-pos-esq, .nota-pos-dir, mais abaixo); a página da médica usa a
   própria posição (.sb-nota). 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 17px;background:#fff;border:1px solid var(--linha);border-radius:var(--radius-lg);
  box-shadow:0 2px 4px rgba(36,32,27,.06),0 18px 36px -14px rgba(36,32,27,.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(36,32,27,.06),0 22px 40px -14px rgba(36,32,27,.4)}
@keyframes nd-flutua{50%{transform:translateY(-6px)}}
/* Sem ícone da marca (retirado a pedido do Marco em 29/09/2026): a
   plataforma se lê pelo nome na 2ª linha. Respiro igual dos dois lados. */
.nota-doc .hn-txt{display:flex;flex-direction:column;gap:3px}
/* selo de interface (nota + estrelas): fica em Manrope, não na fonte dos títulos */
.nota-doc .hn-l1{display:flex;align-items:center;gap:7px;font-family:var(--font-sans);font-weight:700;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}
/* Google: flutua na fase oposta à do Doctoralia, para os dois não subirem juntos */
.nota-google{animation-delay:-3s}
/* POSIÇÃO padrão no retrato do herói (home e páginas de área, 29/09/2026):
   Doctoralia saindo pela borda ESQUERDA, no terço de baixo; Google saindo
   pela borda DIREITA, montado na quina de cima (metade fora da foto): assim
   não encosta no cabelo nem no rosto em nenhuma das fotos 4:5 da médica.
   No celular os dois entram na foto, empilhados no canto de baixo à
   esquerda (ver a media query de 560px logo abaixo). No topo o card cobria
   a cabeça, e no meio da altura (testado em 29/09/2026) caía sobre a mão
   no queixo e o pescoço em 4 das 7 fotos. */
.nota-pos-esq{left:-26px;bottom:17%}
.nota-pos-dir{right:-26px;top:-18px}
/* retrato em coluna única (tablet): a foto encosta na calha, e os 26px de
   saída furavam a tela entre 561 e ~620px */
@media (max-width:940px){.nota-pos-esq{left:-14px}.nota-pos-dir{right:-14px}}
/* Celular (30/09/2026): o retrato virou uma faixa 4:3 de borda a borda
   (lp.css e index.php), mais baixa, e em diagonal o card do Google caía
   sobre o queixo ou a bochecha em 4 das 7 fotos. Os dois EMPILHAM no canto
   de baixo à ESQUERDA, onde as fotos têm fundo, cabelo ou ombro, alinhados
   à margem do texto (--gutter), como o card da página da médica. Padding
   vertical de 5px (card de 45px) para a pilha não subir até o queixo; o
   de cima sobe a altura de um card + 5px de vão. */
@media (max-width:560px){
  .nota-doc{padding:5px 13px}
  .nota-pos-esq{left:var(--gutter);bottom:12px}
  .nota-pos-dir{left:var(--gutter);right:auto;top:auto;bottom:62px}
}
@media (prefers-reduced-motion:reduce){.nota-doc{animation:none}}

/* ============ DEPOIMENTOS (partials/depoimentos.php, 25/09/2026) ============
   Faixa oliva (.tone-deep) com cartões brancos rolando sem parar. Na faixa,
   texto claro e destaques em bege (#D7C4B3, 7,2:1 sobre o oliva); dentro
   dos cartões brancos, estrelas no marrom (3,72:1). 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(215,196,179,.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)}
/* a nota "5,0" é selo de interface, junto das estrelas: Manrope */
.dep-nota{font-family:var(--font-sans);font-weight:700;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)}
/* bege sobre bege a 12% por cima do oliva: 5,5:1 */
.dep-tags em{font-style:normal;padding:5px 12px;border-radius:var(--radius-pill);
  background:rgba(215,196,179,.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, na serifada dos títulos */
.dep-card figure::before{content:"\201C";position:absolute;top:6px;right:20px;font-family:var(--font-display);
  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}
  /* QA 29/09/2026: quebrada em duas linhas, a pílula virava um oval */
  .dep-fonte{border-radius:var(--radius-lg)}
}
/* 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(36,32,27,.05),0 14px 30px -18px rgba(36,32,27,.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.
   O recuo lateral acompanha a borda da grade (.wrap: 1180px com a calha
   dentro), e não só a calha: acima de 1180px o 1º cartão começava fora do
   alinhamento do título (QA 29/09/2026). A faixa ocupa a seção inteira,
   então o 100% é a largura da tela. */
@media (prefers-reduced-motion:reduce){
  .dep-mask{--dep-recuo:max(var(--gutter),calc((100% - var(--container)) / 2 + var(--gutter)));
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;
    padding-inline:var(--dep-recuo);scroll-padding-inline:var(--dep-recuo)}
  .dep-trilho{animation:none}
  .dep-copia{display:none}
  .dep-card{scroll-snap-align:start}
}