/* =================================================================
   CRMA — Folha de estilos partilhada dos protótipos
   v2.0 (2026-05-06) — alinhada com linguagem visual do design standalone
   Tokens: tokens.css v1.0 + componentes derivados
   ================================================================= */

/* ---------- 1. TOKENS ------------------------------------------- */
:root{
  /* Cores da marca */
  --crma-petroleo-50:#E6ECEC; --crma-petroleo-100:#C2CDCE; --crma-petroleo-200:#7C9698;
  --crma-petroleo-400:#2A5A5E; --crma-petroleo-600:#003034; --crma-petroleo-800:#002326;
  --crma-petroleo-900:#001719;
  --crma-turquesa-50:#E5FAF6; --crma-turquesa-100:#A6EFE2; --crma-turquesa-200:#62E1CD;
  --crma-turquesa-400:#15CCB6; --crma-turquesa-600:#0A8074; --crma-turquesa-800:#075F56;
  --crma-menta-50:#F2FEFF; --crma-menta-100:#DDFCFF; --crma-menta-200:#BAFBFF;
  --crma-menta-400:#7DE2E8; --crma-menta-600:#4FC0C7;
  --crma-neutro-0:#FFFFFF; --crma-neutro-50:#F7F8F8; --crma-neutro-100:#EDEEEE;
  --crma-neutro-200:#D6D9D9; --crma-neutro-400:#8A9091; --crma-neutro-600:#565B5C;
  --crma-neutro-800:#2A2D2E; --crma-neutro-900:#1A1D1D;
  --crma-info-bg:#E5F4FB; --crma-info-text:#0B4A6F; --crma-info-border:#6BB1D9;
  --crma-aviso-bg:#FFF4E0; --crma-aviso-text:#7A4A00; --crma-aviso-border:#E0AA5C;
  --crma-sucesso-bg:#E6FAEF; --crma-sucesso-text:#0A5731; --crma-sucesso-border:#7AC9A1;

  /* Papéis */
  --crma-cor-fundo:var(--crma-neutro-0);
  --crma-cor-fundo-suave:var(--crma-neutro-50);
  --crma-cor-fundo-secao:var(--crma-menta-50);
  --crma-cor-fundo-escuro:var(--crma-petroleo-600);
  --crma-cor-texto:var(--crma-petroleo-600);
  --crma-cor-texto-suave:var(--crma-neutro-600);
  --crma-cor-texto-fraco:var(--crma-neutro-400);
  --crma-cor-texto-inverso:var(--crma-neutro-0);
  --crma-cor-link:var(--crma-turquesa-800);
  --crma-cor-link-inverso:var(--crma-turquesa-200);
  --crma-cor-cta-fundo:var(--crma-turquesa-400);
  --crma-cor-cta-texto:var(--crma-petroleo-600);
  --crma-cor-cta-fundo-hover:var(--crma-turquesa-600);
  --crma-cor-cta-texto-hover:var(--crma-neutro-0);
  --crma-cor-borda:var(--crma-neutro-200);
  --crma-cor-borda-forte:var(--crma-petroleo-200);
  --crma-cor-foco:var(--crma-turquesa-400);

  /* Tipografia (Montserrat) */
  --crma-fonte-base:"Montserrat", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --crma-fonte-titulos:var(--crma-fonte-base);

  /* Escala fluida (clamp) — alinhada com o design */
  --tam-h1:clamp(2.75rem, 1.8rem + 4vw, 4.25rem);     /* 44 → 68px */
  --tam-h2:clamp(2rem, 1.4rem + 2.6vw, 3rem);         /* 32 → 48px */
  --tam-h3:clamp(1.0625rem, 1rem + 0.6vw, 1.375rem);  /* 17 → 22px */
  --tam-lead:1.1875rem;                                /* 19px */
  --tam-corpo:1rem;                                    /* 16px */

  /* Espaçamento */
  --esp-1:.25rem; --esp-2:.5rem; --esp-3:.75rem; --esp-4:1rem; --esp-5:1.25rem;
  --esp-6:1.5rem; --esp-8:2rem; --esp-10:2.5rem; --esp-12:3rem; --esp-14:3.5rem;
  --esp-16:4rem; --esp-20:5rem; --esp-24:6rem;

  /* Raios */
  --raio-sm:6px;   /* nav links, badges */
  --raio-md:8px;   /* botões pequenos */
  --raio-lg:10px;  /* botões CTA, fields */
  --raio-xl:12px;  /* cards padrão */
  --raio-2xl:14px; /* service cards, sidebar */
  --raio-3xl:16px; /* CTA card final */
  --raio-4xl:20px; /* foto grande hero */
  --raio-pill:9999px;

  /* Sombras (calibradas para fundo claro com matiz petróleo) */
  --crma-sombra-sm:0 1px 2px rgba(0,48,52,.05);
  --crma-sombra-md:0 4px 14px rgba(0,48,52,.08);
  --crma-sombra-lg:0 16px 40px rgba(0,48,52,.12);
  --crma-sombra-foco:0 0 0 3px rgba(21,204,182,.35);

  /* Movimento */
  --dur-rapida:160ms; --dur:200ms; --dur-lenta:300ms;
  --curva:cubic-bezier(0.2, 0, 0.2, 1);

  /* Layout */
  --lar-conteudo:72ch;
  --lar-container:1280px;
  --lar-prose:720px;
}

/* ---------- 2. RESET LEVE --------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--crma-cor-fundo); color:var(--crma-cor-texto);
  font:400 var(--tam-corpo)/1.6 var(--crma-fonte-base);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--crma-cor-link); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--crma-petroleo-600)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--crma-petroleo-600,#0d4f56); outline-offset:2px; box-shadow:0 0 0 5px rgba(21,204,182,.55); border-radius:var(--raio-md)}
.skip-link{position:absolute; left:-9999px; top:0; z-index:1000; background:var(--crma-petroleo-600,#0d4f56); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; font-weight:600}
.skip-link:focus{left:0}


.container{max-width:var(--lar-container); margin:0 auto; padding:0 var(--esp-8)}
@media(max-width:639px){.container{padding:0 var(--esp-5)}}

/* ---------- 3. HEADER + TOPBAR ---------------------------------- */
.topbar{
  background:var(--crma-petroleo-600); color:rgba(255,255,255,0.78);
  font-size:.8125rem; letter-spacing:.2px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .row{
  display:flex; flex-wrap:wrap; gap:var(--esp-4);
  /* flex-start: o texto (horário/contactos) fica à ESQUERDA. Era flex-end porque o
     antigo seletor de línguas (.lang, margin-left:auto) empurrava o resto para a
     esquerda; removido o seletor (2026-07-10), o texto caía para a direita. Quando
     o .lang voltar (multilingue), o margin-left:auto repõe-no à direita sozinho. */
  justify-content:flex-start; align-items:center;
  padding:var(--esp-2) var(--esp-8); min-height:36px;
}
.topbar a{color:var(--crma-turquesa-200); text-decoration:none}
.topbar a:hover{color:var(--crma-cor-texto-inverso)}
.topbar .sep{opacity:.4}
.topbar .lang{margin-left:auto; display:inline-flex; gap:.4rem; padding-left:.6rem; border-left:1px solid rgba(255,255,255,.15)}
.topbar .lang a{font-weight:500}
.topbar .lang .ativa{color:var(--crma-cor-texto-inverso); font-weight:700}

/* HEADER ESCURO (padrão do design — darkHeader: true) */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(0, 35, 38, 0.92);              /* petróleo-800 com transparência */
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header .row{
  max-width:var(--lar-container); margin:0 auto;
  padding:14px var(--esp-8);
  display:flex; align-items:center; gap:var(--esp-6);
}
.brand{display:inline-flex; align-items:center; text-decoration:none; padding:0; background:none; border:0; cursor:pointer}
.brand img{
  /* Logo crop75. height aumentada com margin-block negativa para o logo
     transbordar visualmente o header SEM aumentar a altura calculada do header
     (o flex layout subtrai as margens do cálculo de altura). */
  height:64px; width:auto; display:block;
  margin-block:-10px;            /* compensa: 64 - 20 = 44 (mesma altura efetiva) */
  transition:height var(--dur) var(--curva), margin-block var(--dur) var(--curva);
}
@media(min-width:640px){ .brand img{ height:72px; margin-block:-12px } }   /* 72 - 24 = 48 */
@media(min-width:1024px){ .brand img{ height:80px; margin-block:-14px } }  /* 80 - 28 = 52 */
.brand:hover{filter:drop-shadow(0 2px 6px rgba(98, 225, 205, .25))}

.nav{display:none; gap:2px; margin-left:auto; align-items:center}
@media(min-width:1024px){.nav{display:flex}}
.nav a{
  padding:8px 12px; border-radius:var(--raio-sm);
  font-size:14px; font-weight:500; text-decoration:none;
  color:rgba(255,255,255,.85);
  white-space:nowrap; /* evita itens em duas linhas (ex.: "A Clínica") */
  transition:background var(--dur-rapida), color var(--dur-rapida);
}
/* Com 7 itens no menu (inclui Prevenção), apertar ligeiramente até 1280px */
@media(min-width:1024px) and (max-width:1280px){
  .nav a{padding:8px 9px; font-size:13.5px}
  .nav-mega > a{padding-right:13px}   /* respiração da seta (ver .nav-mega > a) */
  .header-actions .btn{padding-left:14px; padding-right:14px}
}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a.is-active{
  background:rgba(98, 225, 205, .12);
  color:var(--crma-turquesa-200);
  font-weight:600;
}

.header-actions{display:flex; gap:10px; align-items:center; margin-left:auto}
@media(min-width:1024px){.header-actions{margin-left:0}}

/* Botão "telefone" no header escuro — outline branco subtil */
.header .btn-secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.2);
  font-weight:500;
}
.header .btn-secondary:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.4);
}
/* Botão "Marcar exame" no header — mantém turquesa (CTA) sobre fundo escuro */
.header .btn-primary{font-weight:700}

.btn-mobile{
  display:inline-flex; padding:.55rem .9rem;
  border:1px solid rgba(255,255,255,.2); background:transparent;
  border-radius:var(--raio-md); cursor:pointer; color:#fff; font-size:.95rem;
}
.btn-mobile:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.4)}
@media(min-width:1024px){.btn-mobile{display:none}}

/* MODIFIER: .header.claro — variante clara (usada na homepage com hero editorial branco) */
.header.claro{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--crma-cor-borda);
}
.header.claro .nav a{color:var(--crma-cor-texto)}
.header.claro .nav a:hover{background:var(--crma-neutro-50); color:var(--crma-cor-texto)}
.header.claro .nav a.is-active{background:var(--crma-menta-50); color:var(--crma-turquesa-800)}
.header.claro .btn-secondary{
  background:transparent; color:var(--crma-cor-texto); border-color:var(--crma-cor-borda);
}
.header.claro .btn-secondary:hover{background:var(--crma-neutro-50); border-color:var(--crma-cor-borda-forte)}
.header.claro .btn-mobile{border-color:var(--crma-cor-borda); color:var(--crma-cor-texto)}
.header.claro .btn-mobile:hover{background:var(--crma-neutro-50); border-color:var(--crma-cor-borda-forte)}
.header.claro .brand:hover{filter:drop-shadow(0 2px 6px rgba(0,48,52,.12))}

/* ---------- 3b. MEGA-MENU «Exames» (desktop ≥1024px) — «mestre-detalhe» -------
   Rail de modalidades à esquerda (por área); ao percorrer uma modalidade, o
   detalhe surge à direita — sem saltos diagonais. TC/RM mostram a lista de
   exames + «Ver tudo sobre X» + foto do equipamento; as restantes mostram o
   painel-resumo. Sem abreviaturas nem descrições. Só desktop; o drawer móvel
   ignora estas ligações (ver assets/crma-mobile.js). Detalhe trocado por JS. */
.header .row{position:relative}
.nav-mega{display:flex; align-items:center}
/* padding-right maior que o dos restantes itens: equilibra a seta (a tinta do
   chevron acaba ~4px antes da caixa do SVG e parecia colada à margem direita) */
.nav-mega > a{display:inline-flex; align-items:center; gap:6px; padding-right:16px}
.mega-chev{width:15px; height:15px; flex-shrink:0; display:block; transition:transform .2s var(--curva)}
.nav-mega:hover > a .mega-chev,
.nav-mega:focus-within > a .mega-chev{transform:rotate(180deg)}
.mega{
  position:absolute; top:calc(100% - 34px); left:50%;
  transform:translateX(-50%) translateY(10px);
  z-index:60; width:min(900px, calc(100vw - 24px));
  padding-top:34px;            /* ponte invisível: liga o link ao painel */
  color:var(--crma-cor-texto);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--curva), transform .22s var(--curva), visibility 0s linear .2s;
}
.nav-mega:hover > .mega,
.nav-mega:focus-within > .mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(6px);
  transition:opacity .18s var(--curva), transform .22s var(--curva), visibility 0s;
}
/* cartão (topo turquesa + sombra forte).
   Ecrãs BAIXOS (portáteis 768p): o cartão nunca desce além do viewport — altura
   limitada ao espaço sob o header (sticky; pior caso = topo da página com topbar)
   e o RAIL (a coluna longa) ganha scroll interno; o detalhe fica sempre visível. */
.mega-inner{
  position:relative; display:grid; grid-template-columns:300px 1fr;
  grid-template-rows:minmax(0,1fr);
  max-height:calc(100vh - 132px); max-height:calc(100dvh - 132px);
  background:var(--crma-neutro-0);
  border:1px solid var(--crma-neutro-200); border-top:3px solid var(--crma-turquesa-400);
  border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,48,52,.18);
}
/* RAIL (mestre) */
.mega-rail{background:var(--crma-neutro-50); border-right:1px solid var(--crma-neutro-100); padding:10px; overflow-y:auto; overscroll-behavior:contain}
.mega-rail__lbl{
  font:600 9.5px/1 var(--crma-fonte-base); text-transform:uppercase; letter-spacing:1.1px;
  color:var(--crma-neutro-400); padding:14px 12px 5px;     /* subtil + mais ar entre grupos */
}
.mega-rail__lbl:first-child{padding-top:4px}
.mega .mega-mod{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:7px 12px; border-radius:10px; text-decoration:none;
  color:var(--crma-cor-texto); white-space:normal;
  transition:background var(--dur-rapida);
}
.mega .mega-mod:hover{background:var(--crma-neutro-100)}
.mega .mega-mod.is-active{background:var(--crma-menta-50)}
.mega-mod__nome{flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--crma-petroleo-600); line-height:1.25}
.mega-mod__arr{flex-shrink:0; font-size:15px; line-height:1; color:var(--crma-neutro-400); font-weight:700}
.mega .mega-mod.is-active .mega-mod__nome{color:var(--crma-petroleo-800)}
.mega .mega-mod.is-active .mega-mod__arr{color:var(--crma-turquesa-800)}
/* DETALHE (cada bloco preenche a coluna; só o ativo é visível) */
.mega-detail{position:relative; min-height:330px}
.mega-det{position:absolute; inset:0; padding:24px 26px; display:none; flex-direction:column; justify-content:center}
.mega-det.is-shown{display:flex}
/* TC/RM — cabeçalho + lista de exames + «Ver tudo» + foto (estilo anterior) */
.mega-det__hd{
  font:700 11px/1.3 var(--crma-fonte-base); text-transform:uppercase; letter-spacing:1px;
  color:var(--crma-petroleo-600); padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px solid var(--crma-cor-borda);
}
.mega-det__links{display:grid; grid-template-columns:1fr 1fr; gap:1px 14px}
.mega .mega-det__links a{
  display:block; padding:7px 11px; border-radius:6px; text-decoration:none;
  color:var(--crma-cor-texto); font-size:13.5px; line-height:1.3;
  transition:background var(--dur-rapida), color var(--dur-rapida);
}
.mega .mega-det__links a:hover{background:var(--crma-menta-50); color:var(--crma-turquesa-800)}
/* «Ver tudo sobre X» — botão (coerente com o painel-resumo e o resto do site) */
.mega .mega-det__more{align-self:flex-start; margin-top:16px; padding:11px 20px; font-size:13.5px; white-space:nowrap}
.mega-det__foto{display:block; width:100%; height:120px; margin-top:16px; object-fit:cover; object-position:center; border-radius:11px; border:1px solid var(--crma-neutro-200)}
/* Painel-resumo (modalidades simples) */
.mega-det--default{gap:10px; align-items:flex-start}
.mega-det__eyebrow{font:700 11px/1 var(--crma-fonte-base); text-transform:uppercase; letter-spacing:1.6px; color:var(--crma-turquesa-800)}
.mega-det__titulo{font-size:21px; line-height:1.2; font-weight:700; color:var(--crma-petroleo-600); max-width:22ch}
.mega-det__lead{font-size:13.5px; line-height:1.6; color:var(--crma-neutro-600); margin:2px 0 10px; max-width:42ch}
.mega .mega-det__btn{align-self:flex-start; padding:11px 20px; font-size:13.5px; white-space:nowrap}
/* Os botões turquesa do mega são <a> dentro de .nav, por isso as regras
   ".nav a"/".nav a:hover" (header escuro) sobrepunham-se e, no hover, deixavam
   o botão quase transparente (texto branco invisível). Repõe o estilo do botão. */
.mega .btn-primary{background:var(--crma-cor-cta-fundo); color:var(--crma-cor-cta-texto)}
.mega .btn-primary:hover{background:var(--crma-cor-cta-fundo-hover); color:var(--crma-cor-cta-texto-hover)}
@media (prefers-reduced-motion: reduce){
  .mega{transition:opacity .12s, visibility 0s linear .12s; transform:translateX(-50%)}
  .nav-mega:hover > .mega,.nav-mega:focus-within > .mega{transform:translateX(-50%)}
  .mega-chev{transition:none}
}

/* ---------- 4. BOTÕES ------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:16px 26px; border-radius:var(--raio-lg);
  font:700 15px/1.4 var(--crma-fonte-base); letter-spacing:.2px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background var(--dur) var(--curva), color var(--dur) var(--curva), border-color var(--dur) var(--curva), transform var(--dur) var(--curva);
  white-space:nowrap;
}
.btn-primary{background:var(--crma-cor-cta-fundo); color:var(--crma-cor-cta-texto)}
.btn-primary:hover{background:var(--crma-cor-cta-fundo-hover); color:var(--crma-cor-cta-texto-hover); transform:translateY(-1px)}
.btn-secondary{background:var(--crma-cor-fundo); color:var(--crma-cor-texto); border-color:var(--crma-cor-borda)}
.btn-secondary:hover{background:var(--crma-neutro-50); border-color:var(--crma-cor-borda-forte)}
.btn-outline-dark{background:transparent; color:var(--crma-cor-texto); border-color:var(--crma-cor-texto); font-weight:600}
.btn-outline-dark:hover{background:var(--crma-cor-texto); color:var(--crma-cor-texto-inverso)}
.btn-outline-light{background:transparent; color:var(--crma-cor-texto-inverso); border-color:rgba(255,255,255,.3); font-weight:600}
.btn-outline-light:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5)}
.btn-sm{padding:9px 16px; font-size:14px; font-weight:500}
.btn-lg{padding:18px 28px; font-size:16px}

/* Botão "ghost" para ler mais (texto + seta) */
.btn-ghost{
  background:none; border:0; padding:0;
  color:var(--crma-turquesa-800); font-weight:600; font-size:14px;
  cursor:pointer; text-decoration:none; display:inline-flex; gap:.4rem; align-items:center;
}
.btn-ghost:hover{color:var(--crma-petroleo-600)}

/* ---------- 5. BREADCRUMB --------------------------------------- */
.breadcrumb{font-size:.8125rem; color:var(--crma-cor-texto-suave); padding:var(--esp-6) 0 0}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:var(--esp-2); margin:0; padding:0}
.breadcrumb li{display:flex; align-items:center; gap:var(--esp-2)}
.breadcrumb li + li::before{content:"›"; color:var(--crma-cor-texto-suave); opacity:.6}
.breadcrumb a{color:var(--crma-cor-texto-suave); text-decoration:none}
.breadcrumb a:hover{color:var(--crma-cor-link); text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--crma-cor-texto); font-weight:600}

/* ---------- 6. SECÇÃO + EYEBROW + H1/H2/H3 ---------------------- */
section{padding:80px var(--esp-8)}
@media(max-width:767px){section{padding:56px var(--esp-5)}}
section.alt{background:var(--crma-cor-fundo-suave)}
section.menta{background:var(--crma-cor-fundo-secao)}
section.escuro{background:var(--crma-cor-fundo-escuro); color:var(--crma-cor-texto-inverso)}
section.escuro h1, section.escuro h2, section.escuro h3{color:var(--crma-cor-texto-inverso)}
section.escuro p, section.escuro .lead-sec{color:rgba(255,255,255,.82)}

.eyebrow{
  display:inline-block;
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.6px; color:var(--crma-turquesa-800);
  margin:0 0 14px;
}
.eyebrow.light{color:var(--crma-turquesa-200)}

h1{
  font:700 var(--tam-h1)/1.05 var(--crma-fonte-base);
  letter-spacing:-0.02em; margin:0 0 24px;
  color:var(--crma-petroleo-600);
  text-wrap:balance;
}
h1 .accent{color:var(--crma-turquesa-800)}

h2{
  font:700 var(--tam-h2)/1.1 var(--crma-fonte-base);
  letter-spacing:-0.02em; margin:0 0 8px;
  color:var(--crma-petroleo-600);
  text-wrap:balance;
}
h2 .accent{color:var(--crma-turquesa-800)}
section.escuro h2 .accent{color:var(--crma-turquesa-200)}

h3{
  font:700 var(--tam-h3)/1.3 var(--crma-fonte-base);
  margin:0 0 10px;
  color:var(--crma-petroleo-600);
}

h4{font:700 1rem/1.4 var(--crma-fonte-base); margin:0 0 8px}

.lead{
  font-size:var(--tam-lead); line-height:1.6;
  color:var(--crma-cor-texto-suave);
  max-width:560px; margin:0 0 36px;
  text-wrap:pretty;
}
.lead-sec{
  font-size:1.0625rem; line-height:1.65;
  color:var(--crma-cor-texto-suave);
  max-width:var(--lar-conteudo); margin:0 0 var(--esp-8);
}

.prose{max-width:var(--lar-prose)}
.prose h2{font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); margin:48px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px; color:var(--crma-cor-texto-suave); line-height:1.65}
.prose strong{color:var(--crma-cor-texto); font-weight:700}
.prose ul{margin:16px 0; padding-left:22px}
.prose ul li{margin-bottom:8px; color:var(--crma-cor-texto-suave); line-height:1.6}

/* Cabeçalho de secção (eyebrow + h2 + lead lado a lado, design editorial) */
.sec-head{margin-bottom:40px}
.sec-head-grid{display:grid; gap:24px; align-items:end; margin-bottom:40px}
@media(min-width:768px){.sec-head-grid{grid-template-columns:1fr 1fr; gap:48px}}
.sec-head-grid .lead{justify-self:end; max-width:460px; margin:0}

/* ---------- 7. HERO EDITORIAL (texto + foto) -------------------- */
.hero{
  position:relative; overflow:hidden;
  padding:64px var(--esp-8) 80px;
  background:var(--crma-cor-fundo);
}
.hero .container{position:relative; z-index:2}
.hero-grid{
  display:grid; gap:40px; align-items:center;
}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1.1fr; gap:64px}}
.hero h1{margin-bottom:24px}
.hero .lead{margin-bottom:36px}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px}
.hero-figure{
  position:relative; border-radius:var(--raio-4xl); overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--crma-sombra-lg);
  background:var(--crma-petroleo-100);
}
.hero-figure img{width:100%; height:100%; object-fit:cover}
.hero-figure .motif-overlay{
  position:absolute; right:-30px; bottom:-30px;
  width:220px; height:220px; opacity:.55; mix-blend-mode:screen;
  pointer-events:none;
}

/* Hero "split" (foto à esquerda full-bleed + bloco escuro à direita) */
.hero-split{
  background:var(--crma-petroleo-600); color:var(--crma-cor-texto-inverso);
  position:relative; overflow:hidden; padding:0;
}
.hero-split-grid{
  display:grid; min-height:560px;
}
@media(min-width:768px){.hero-split-grid{grid-template-columns:1.2fr 1fr}}
.hero-split-photo{background-size:cover; background-position:center; min-height:320px; position:relative}
.hero-split-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,35,38,0) 60%, rgba(0,35,38,0.6) 100%);
}
.hero-split-content{
  padding:64px 32px; display:flex; flex-direction:column; justify-content:center;
  position:relative;
}
@media(min-width:1024px){.hero-split-content{padding:100px 64px}}
.hero-split-content h1{color:var(--crma-cor-texto-inverso)}
.hero-split-content .lead{color:rgba(255,255,255,.82); max-width:480px; font-size:18px}
.hero-split-content .motif-overlay{
  position:absolute; top:40px; right:32px; width:180px; height:180px;
  opacity:.25; pointer-events:none;
}

/* Faixa de confiança no hero (acordos, ERS etc.) */
.hero-faixa-confianca{
  display:flex; flex-wrap:wrap; gap:16px 32px; padding:24px 0 0;
  border-top:1px solid var(--crma-cor-borda);
  font-size:13px; color:var(--crma-cor-texto-suave);
}
.hero-faixa-confianca .item{}
.hero-faixa-confianca .item .lbl{
  display:block; text-transform:uppercase; letter-spacing:1.2px;
  font-size:12px; margin-bottom:4px;
}
.hero-faixa-confianca .item .val{font-size:15px; font-weight:600; color:var(--crma-cor-texto)}

/* ---------- 8. KPIs (faixa de números) -------------------------- */
.kpis{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  border-top:1px solid var(--crma-cor-borda);
  border-bottom:1px solid var(--crma-cor-borda);
  padding:32px 0;
}
.kpi .valor{
  display:block; font-size:44px; font-weight:700; line-height:1;
  color:var(--crma-petroleo-600); letter-spacing:-0.02em;
}
.kpi .rotulo{
  display:block; margin-top:8px; font-size:14px; line-height:1.4;
  color:var(--crma-cor-texto-suave);
}

/* ---------- 9. CARTÕES DE SERVIÇO (foto + texto, horizontal) ---- */
.service-cards{display:grid; gap:20px}
@media(min-width:768px){.service-cards{grid-template-columns:repeat(2, 1fr)}}
.service-card{
  display:grid; grid-template-columns:160px 1fr; overflow:hidden;
  background:var(--crma-cor-fundo); border:1px solid var(--crma-cor-borda);
  border-radius:var(--raio-2xl);
  text-decoration:none; color:var(--crma-cor-texto);
  box-shadow:var(--crma-sombra-sm);
  transition:transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
@media(max-width:639px){.service-card{grid-template-columns:1fr}}
.service-card:hover{transform:translateY(-2px); box-shadow:var(--crma-sombra-lg)}
.service-card .foto{background-size:cover; background-position:center; min-height:160px; background-color:var(--crma-petroleo-100)}
.service-card .corpo{padding:28px}
.service-card .badge{
  display:block; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.4px;
  color:var(--crma-turquesa-800); margin-bottom:8px;
}
.service-card h3{font-size:22px; margin:0 0 10px}
.service-card p{font-size:14px; line-height:1.6; color:var(--crma-cor-texto-suave); margin:0 0 16px}
.service-card .seta{font-size:13px; font-weight:600; color:var(--crma-turquesa-800)}

/* ---------- 10. VANTAGEM CARDS (numerados, fundo menta) --------- */
.vantagens-grid{display:grid; gap:24px}
@media(min-width:768px){.vantagens-grid{grid-template-columns:repeat(2, 1fr)}}
.vantagem{
  background:var(--crma-menta-50);
  border:1px solid var(--crma-menta-200);
  border-radius:var(--raio-xl);
  padding:28px;
}
.vantagem .num{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--raio-md);
  background:var(--crma-petroleo-600); color:var(--crma-turquesa-200);
  font-size:14px; font-weight:700; margin-bottom:18px;
}
.vantagem h3{font-size:17px; line-height:1.3; margin:0 0 10px}
.vantagem p{font-size:14px; line-height:1.6; color:var(--crma-cor-texto-suave); margin:0}

/* Layout "porquê CRMA" — esq sticky + dir grid */
.porque-grid{display:grid; gap:48px; align-items:start}
@media(min-width:1024px){.porque-grid{grid-template-columns:1fr 1.4fr; gap:80px}}
.porque-grid .esq{position:sticky; top:120px}
.porque-grid .esq .lead-sec{margin-top:24px; margin-bottom:28px}

/* ---------- 11. PASSOS (numerados decimais) --------------------- */
.passos{display:grid; gap:16px; counter-reset:passo}
@media(min-width:768px){.passos{grid-template-columns:repeat(2,1fr)}}
.passo{
  background:var(--crma-cor-fundo); border:1px solid var(--crma-cor-borda);
  border-radius:var(--raio-xl); padding:24px 28px;
  transition:transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.passo:hover{transform:translateY(-1px); box-shadow:var(--crma-sombra-md)}
.passo::before{
  counter-increment:passo; content:counter(passo, decimal-leading-zero);
  display:block; font:700 13px/1 var(--crma-fonte-base);
  color:var(--crma-turquesa-800); letter-spacing:1.4px; margin-bottom:8px;
}
.passo h4{font-size:17px; margin:0 0 8px; color:var(--crma-petroleo-600)}
.passo p{font-size:14px; line-height:1.6; color:var(--crma-cor-texto-suave); margin:0}

/* ---------- 12. BLOCO RM DESTAQUE (full-bleed petróleo+foto) ---- */
.bloco-destaque{
  background:var(--crma-petroleo-600); color:var(--crma-cor-texto-inverso);
  padding:0; position:relative; overflow:hidden;
}
.bloco-destaque-grid{display:grid; min-height:540px}
@media(min-width:768px){.bloco-destaque-grid{grid-template-columns:1fr 1fr}}
.bloco-destaque-foto{background-size:cover; background-position:center; min-height:300px}
.bloco-destaque-corpo{
  padding:64px 32px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
@media(min-width:1024px){.bloco-destaque-corpo{padding:80px 64px}}
.bloco-destaque-corpo .motif-overlay{
  position:absolute; top:-40px; right:-40px; width:240px; height:240px;
  opacity:.15; pointer-events:none;
}
.bloco-destaque h2{color:var(--crma-cor-texto-inverso); margin-bottom:20px}
.bloco-destaque p{color:rgba(255,255,255,.85); font-size:17px; line-height:1.65; margin:0 0 32px; max-width:460px}
/* Variante: média (imagem ou vídeo) no painel de destaque — fundo preto, média inteira visível. */
.bloco-destaque-media{background:#000; min-height:300px; display:flex; align-items:center; justify-content:center}
.bloco-destaque-media img,.bloco-destaque-media video{width:100%; height:100%; object-fit:contain; display:block; background:#000}
/* Variante compacta: secção de destaque mais baixa, com a média mais pequena. */
.bloco-destaque--compacto .bloco-destaque-grid{min-height:0}
.bloco-destaque--compacto .bloco-destaque-corpo{padding:36px 32px}
@media(min-width:1024px){.bloco-destaque--compacto .bloco-destaque-corpo{padding:44px 52px}}
.bloco-destaque--compacto .bloco-destaque-media{min-height:0; padding:26px}
.bloco-destaque--compacto .bloco-destaque-media img,.bloco-destaque--compacto .bloco-destaque-media video{width:auto; height:auto; max-width:100%; max-height:260px}

/* ---------- 13. CTA CARD FINAL (branco em fundo menta) ---------- */
.cta-card{
  background:var(--crma-cor-fundo);
  border:1px solid var(--crma-cor-borda);
  border-radius:var(--raio-3xl);
  padding:48px;
  display:grid; gap:32px; align-items:center;
}
@media(min-width:768px){.cta-card{padding:56px; grid-template-columns:1.2fr 1fr; gap:48px}}
.cta-card h2{margin-bottom:16px}
.cta-card p{font-size:17px; line-height:1.65; color:var(--crma-cor-texto-suave); margin:0}
.cta-card .acoes{display:flex; flex-direction:column; gap:12px}

/* CTA banner escuro (alternativa, full-width) */
.cta-banner{
  background:var(--crma-cor-fundo-escuro); color:var(--crma-cor-texto-inverso);
  padding:80px var(--esp-8); position:relative; overflow:hidden;
}
.cta-banner h2{color:var(--crma-cor-texto-inverso); margin-bottom:16px}
.cta-banner p{color:rgba(255,255,255,.82); font-size:17px; margin:0 0 28px}
.cta-banner .actions{display:flex; gap:12px; flex-wrap:wrap}
.cta-banner .grid{display:grid; gap:32px; align-items:center}
@media(min-width:768px){.cta-banner .grid{grid-template-columns:1.4fr 1fr}}
.cta-banner .motif-overlay{
  position:absolute; top:50%; right:-100px; width:300px; height:300px;
  opacity:.12; transform:translateY(-50%);
}

/* ---------- 14. FACTBLOCK (label uppercase + value bold) -------- */
.factblock-list{
  display:flex; flex-wrap:wrap; gap:24px;
  border-top:1px solid var(--crma-cor-borda);
  padding-top:24px; margin-top:32px;
}
.factblock .lbl{
  display:block; font-size:13px; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--crma-cor-texto-suave); margin-bottom:4px;
}
.factblock .val{display:block; font-size:15px; font-weight:600}

/* ---------- 15. SIDEBAR DE MARCAÇÃO (sticky, branco) ------------ */
.sidebar-marcar{
  background:var(--crma-cor-fundo);
  border:1px solid var(--crma-cor-borda);
  border-radius:var(--raio-2xl);
  padding:28px;
  box-shadow:var(--crma-sombra-md);
}
@media(min-width:1024px){.sidebar-marcar{position:sticky; top:100px}}
.sidebar-marcar .titulo{
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.4px; color:var(--crma-turquesa-800); margin-bottom:12px;
}
.sidebar-marcar label{
  display:block; font-size:13px; color:var(--crma-cor-texto-suave);
  margin:14px 0 6px;
}
.sidebar-marcar select, .sidebar-marcar input{
  width:100%; padding:11px 12px;
  border:1px solid var(--crma-cor-borda); border-radius:var(--raio-md);
  font-family:inherit; font-size:14px; color:var(--crma-cor-texto);
  background:var(--crma-cor-fundo);
}
.sidebar-marcar select:focus, .sidebar-marcar input:focus{
  outline:0; border-color:var(--crma-turquesa-400);
  box-shadow:0 0 0 3px rgba(21,204,182,.15);
}
.sidebar-marcar .nota-vaga{
  font-size:12px; color:var(--crma-cor-texto-suave);
  margin:12px 0 0; text-align:center;
}
.sidebar-marcar .nota-vaga strong{color:var(--crma-cor-texto)}

/* ---------- 16. SUMÁRIO LATERAL "Nesta página" ------------------ */
.sumario{font-size:14px}
@media(min-width:1024px){.sumario{position:sticky; top:100px}}
.sumario .titulo{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.4px; color:var(--crma-cor-texto-suave); margin-bottom:14px;
}
.sumario a{
  display:block; padding:8px 0 8px 14px;
  color:var(--crma-cor-texto-suave); font-weight:500;
  text-decoration:none; border-left:2px solid transparent;
  transition:color var(--dur-rapida);
}
.sumario a:hover{color:var(--crma-cor-texto)}
.sumario a.ativo{
  color:var(--crma-petroleo-600); font-weight:600;
  border-left-color:var(--crma-turquesa-400);
}

/* Layout artigo + sumário */
.artigo-grid{display:grid; gap:48px; align-items:start}
@media(min-width:1024px){.artigo-grid{grid-template-columns:1fr 2fr; gap:80px}}
/* O aside estica à altura da faixa (o align-items:start encolhia-o à altura do
   conteúdo e o sticky do .sumario ficava SEM CURSO — nunca chegava a colar):
   assim o sumário acompanha o scroll ao longo de todo o artigo. */
.artigo-grid > aside{align-self:stretch}

/* ---------- 17. FAQ ACCORDION ----------------------------------- */
.faq{display:grid; gap:8px; max-width:var(--lar-prose)}
.faq details{
  background:var(--crma-cor-fundo); border:1px solid var(--crma-cor-borda);
  border-radius:var(--raio-md);
  transition:border-color var(--dur) var(--curva);
}
.faq details[open]{border-color:var(--crma-turquesa-400)}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 24px;
  font-weight:600; color:var(--crma-cor-texto);
  position:relative; padding-right:48px; font-size:15px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:24px; top:50%;
  transform:translateY(-50%); font-size:20px; font-weight:400;
  color:var(--crma-turquesa-800);
  transition:transform var(--dur);
}
.faq details[open] summary::after{content:"−"}
.faq summary::after{transition:transform var(--dur), content var(--dur)}
.faq .resposta{padding:0 24px 20px; color:var(--crma-cor-texto-suave); font-size:14px; line-height:1.65}
.faq .resposta p{margin:0 0 12px}
.faq .resposta p:last-child{margin-bottom:0}
/* movimento suave ao abrir (o conteúdo desliza+esbate); reduced-motion já anulado globalmente */
.faq details[open] .resposta{animation:acc-abre .28s var(--curva)}
@keyframes acc-abre{from{opacity:0; transform:translateY(-7px)} to{opacity:1; transform:none}}

/* ---------- 18. INFO BLOCK (preparação, segurança) -------------- */
.bloco-info{
  background:var(--crma-info-bg); color:var(--crma-info-text);
  border:1px solid var(--crma-info-border);
  border-left:4px solid var(--crma-info-border);
  border-radius:var(--raio-lg);
  padding:20px 24px;
}
.bloco-info.menta{
  background:var(--crma-menta-50); color:var(--crma-cor-texto);
  border-color:var(--crma-menta-200); border-left-color:var(--crma-turquesa-400);
}
.bloco-info.aviso{
  background:var(--crma-aviso-bg); color:var(--crma-aviso-text);
  border-color:var(--crma-aviso-border); border-left-color:var(--crma-aviso-border);
}
.bloco-info h3{margin-top:0; color:inherit; font-size:18px}

/* ---------- 19. TABELA (preparação, etc.) ----------------------- */
.tabela{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--crma-cor-borda); border-radius:var(--raio-xl);
  overflow:hidden; background:var(--crma-cor-fundo); font-size:14px;
}
.tabela th, .tabela td{padding:16px 20px; text-align:left; vertical-align:top}
.tabela tr + tr th, .tabela tr + tr td{border-top:1px solid var(--crma-cor-borda)}
.tabela th{
  width:30%; background:var(--crma-cor-fundo-suave); color:var(--crma-cor-texto);
  font-weight:700; font-size:13px;
}
.tabela td{color:var(--crma-cor-texto-suave); line-height:1.65}
@media(max-width:639px){
  .tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td{display:block; width:100%}
  .tabela th{background:var(--crma-cor-fundo-suave); border-bottom:1px solid var(--crma-cor-borda)}
  .tabela tr + tr th{border-top:0}
}

/* ---------- 20. CARDS GENÉRICOS (relacionados, modalidades) ----- */
.cards{display:grid; gap:20px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2, 1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3, 1fr)}}
.card{
  background:var(--crma-cor-fundo); border:1px solid var(--crma-cor-borda);
  border-radius:var(--raio-xl); padding:24px;
  display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:var(--crma-cor-texto);
  transition:transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva), border-color var(--dur);
}
.card:hover{transform:translateY(-2px); box-shadow:var(--crma-sombra-md); border-color:var(--crma-turquesa-200)}
.card h4{font-size:17px; margin:0; line-height:1.3}
.card p{font-size:14px; line-height:1.6; color:var(--crma-cor-texto-suave); margin:0; flex:1}
.card .seta{color:var(--crma-turquesa-800); font-weight:600; font-size:13px}

/* Cartões de exame — «Realce no hover» (design CRMA «Fundo de Exame», opção 6).
   Escopo .cards--exame; NÃO afeta o .card global (~40 páginas).
   Repouso: cartão claro, imagem do exame como marca-d'água ténue (10%).
   Hover: o cartão escurece (petróleo), a imagem ganha presença + leve zoom,
   surge um scrim escuro, o texto fica claro e a borda turquesa.
   Imagens decorativas (alt="" aria-hidden); o ImageObject vive nas subpáginas. */
.cards--exame .card{
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva),
             border-color var(--dur) var(--curva), background-color var(--dur-lenta) var(--curva);
}
.cards--exame .card > h4,
.cards--exame .card > p,
.cards--exame .card > .seta{position:relative; z-index:2; transition:color var(--dur-lenta) var(--curva)}
/* imagem do exame — marca-d'água ténue em repouso */
.cards--exame .exame-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0; pointer-events:none;
  opacity:.10; transform:scale(1);
  transition:opacity .45s var(--curva), transform .7s var(--curva);
}
/* scrim escuro — invisível em repouso, surge no hover para legibilidade */
.cards--exame .card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .45s var(--curva);
  background:linear-gradient(180deg, rgba(0,23,25,.50) 0%, rgba(0,23,25,.32) 42%, rgba(0,23,25,.82) 100%);
}
/* hover — cartão escurece, imagem ganha presença + zoom, texto claro, borda turquesa */
.cards--exame .card:hover{
  transform:translateY(-2px); background:var(--crma-petroleo-800);
  border-color:var(--crma-turquesa-400);
  box-shadow:0 0 0 1.5px var(--crma-turquesa-400), 0 24px 54px -24px rgba(0,48,52,.55);
}
.cards--exame .card:hover .exame-bg{opacity:.62; transform:scale(1.06)}
.cards--exame .card:hover::before{opacity:1}
.cards--exame .card:hover > h4{color:var(--crma-neutro-0)}
.cards--exame .card:hover > p{color:var(--crma-petroleo-100)}
.cards--exame .card:hover > .seta{color:var(--crma-turquesa-200)}
/* sem hover (telemóvel/touch): mostra a imagem como marca-d'água suave, já que não há reveal */
@media (hover:none){ .cards--exame .exame-bg{opacity:.30} }
@media (prefers-reduced-motion: reduce){
  .cards--exame .card, .cards--exame .exame-bg, .cards--exame .card::before,
  .cards--exame .card > h4, .cards--exame .card > p, .cards--exame .card > .seta{transition:none}
  .cards--exame .card:hover .exame-bg{transform:none}
}

/* Cartões de modalidade com FOTO do equipamento (página de Exames).
   Variação do tratamento «Realce no hover»: herda .cards--exame mas afina para
   fotos de sala — mais claras e «cheias» que as imagens de TC das subpáginas.
   Repouso a 18% (em vez de 10%) + scrim de hover reforçado. Escopo .cards--equip,
   por isso NÃO altera as subpáginas que usam .cards--exame com imagens de TC. */
.cards--equip .card{min-height:172px}
.cards--equip .exame-bg{opacity:.18}
.cards--equip .card::before{
  background:linear-gradient(180deg, rgba(0,23,25,.60) 0%, rgba(0,23,25,.50) 42%, rgba(0,23,25,.88) 100%);
}
@media (hover:none){ .cards--equip .exame-bg{opacity:.32} }

/* Cards de modalidade (com cabeçalho colorido) */
.cards.modalidades{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.card-mod{
  display:flex; flex-direction:column; min-height:160px; overflow:hidden;
  border:1px solid var(--crma-cor-borda); border-radius:var(--raio-xl);
  background:var(--crma-cor-fundo); text-decoration:none; color:var(--crma-cor-texto);
  transition:transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva), border-color var(--dur);
}
.card-mod .topo{
  padding:18px 22px;
  background:linear-gradient(135deg, var(--crma-menta-100), var(--crma-menta-200));
  border-bottom:1px solid var(--crma-menta-400);
  font-weight:700; color:var(--crma-petroleo-600); font-size:16px;
}
.card-mod .corpo{padding:20px 22px; flex:1; display:flex; flex-direction:column; gap:12px}
.card-mod p{margin:0; color:var(--crma-cor-texto-suave); font-size:14px; flex:1}
.card-mod .seta{color:var(--crma-turquesa-800); font-weight:700; font-size:13px}
.card-mod:hover{transform:translateY(-2px); box-shadow:var(--crma-sombra-md); border-color:var(--crma-turquesa-200)}

/* Áreas agrupadas */
.area{margin-bottom:48px}
.area:last-child{margin-bottom:0}
.area-titulo{
  display:flex; align-items:center; gap:12px;
  margin-bottom:20px;
  font:700 16px/1 var(--crma-fonte-base);
  text-transform:uppercase; letter-spacing:1.6px;
  color:var(--crma-petroleo-600);
}
.area-titulo::after{content:""; flex:1; height:1px; background:var(--crma-cor-borda)}

/* News card */
.news-card{
  background:var(--crma-cor-fundo); border:1px solid var(--crma-cor-borda);
  border-radius:var(--raio-xl); overflow:hidden;
  transition:transform var(--dur), box-shadow var(--dur);
}
.news-card:hover{transform:translateY(-2px); box-shadow:var(--crma-sombra-md)}
.news-card .foto{aspect-ratio:16/10; background-size:cover; background-position:center}
.news-card .corpo{padding:24px}
.news-card .meta{
  display:flex; gap:12px; font-size:12px; color:var(--crma-cor-texto-suave);
  margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; font-weight:600;
}
.news-card .meta .cat{color:var(--crma-turquesa-800)}
.news-card h3{font-size:18px; margin:0 0 10px; line-height:1.3}
.news-card p{font-size:14px; line-height:1.6; color:var(--crma-cor-texto-suave); margin:0}

/* Checklist */
ul.checklist{list-style:none; padding:0; margin:0; display:grid; gap:12px; max-width:var(--lar-conteudo)}
ul.checklist li{position:relative; padding:0 0 0 28px; color:var(--crma-cor-texto-suave); line-height:1.6}
ul.checklist li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:14px; height:14px; border-radius:50%;
  background:var(--crma-turquesa-200); border:2px solid var(--crma-turquesa-400);
}

/* Logos (acordos, parceiros) */
.logos{display:flex; flex-wrap:wrap; gap:12px}
.logo-pill{
  background:var(--crma-cor-fundo); border:1px solid var(--crma-cor-borda);
  border-radius:var(--raio-pill); padding:8px 16px;
  font-size:13px; font-weight:600; color:var(--crma-cor-texto-suave);
  text-decoration:none; transition:border-color var(--dur);
}
.logo-pill:hover{border-color:var(--crma-cor-borda-forte); color:var(--crma-cor-texto)}

/* ---------- 21. CRONOLOGIA (A Clínica) -------------------------- */
.cronologia{position:relative; max-width:var(--lar-conteudo); padding-left:24px}
.cronologia::before{
  content:""; position:absolute; left:6px; top:.5rem; bottom:.5rem;
  width:2px; background:var(--crma-turquesa-200);
}
.cron-item{position:relative; margin-bottom:32px}
.cron-item:last-child{margin-bottom:0}
.cron-item::before{
  content:""; position:absolute; left:-24px; top:.4rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--crma-turquesa-400); box-shadow:0 0 0 4px var(--crma-menta-50);
}
.cron-ano{display:block; font:700 14px/1 var(--crma-fonte-base); color:var(--crma-turquesa-800); letter-spacing:1px; margin-bottom:6px}
.cron-titulo{margin:0 0 4px; font:700 18px/1.3 var(--crma-fonte-base); color:var(--crma-petroleo-600)}
.cron-corpo{margin:0; color:var(--crma-cor-texto-suave); font-size:14px; line-height:1.65}

/* ---------- 22. FOOTER ------------------------------------------ */
.footer{
  background:var(--crma-petroleo-600); color:rgba(255,255,255,.78);
  padding:64px var(--esp-8) 32px; margin-top:80px;
}
.footer .grid{
  max-width:var(--lar-container); margin:0 auto;
  display:grid; gap:48px; align-items:start;
  grid-template-columns:1fr;
}
@media(min-width:768px){.footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer h5{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color:var(--crma-turquesa-200); margin:0 0 14px;
}
.footer p{font-size:14px; line-height:1.6; margin:0; color:rgba(255,255,255,.7)}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer a{color:rgba(255,255,255,.78); text-decoration:none; font-size:14px}
.footer a:hover{color:var(--crma-cor-texto-inverso); text-decoration:underline}
.footer .legal{
  max-width:var(--lar-container); margin:48px auto 0;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-size:12px; color:rgba(255,255,255,.5);
}
.footer .legal a{color:inherit; font-size:12px}

/* ---------- 23. AVISO DE PROTÓTIPO ------------------------------ */
.aviso-prot{
  background:var(--crma-aviso-bg); color:var(--crma-aviso-text);
  border-bottom:1px solid var(--crma-aviso-border);
  padding:.6rem var(--esp-5); font-size:.8125rem; text-align:center;
}
.aviso-prot strong{color:var(--crma-aviso-text)}
.aviso-prot a{color:var(--crma-aviso-text); text-decoration:underline}

/* ---------- 24. UTILS ------------------------------------------- */
.h-meta{font-size:12px; text-transform:uppercase; letter-spacing:1.4px; font-weight:700; color:var(--crma-cor-texto-suave); margin:24px 0 8px}
.mt-6{margin-top:24px} .mt-8{margin-top:32px} .mt-10{margin-top:40px} .mt-12{margin-top:48px}
.center{text-align:center}
.divider{border:0; border-top:1px solid var(--crma-cor-borda); margin:48px 0}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}

/* ---------- 25. ÍCONES SVG (traço, herdam cor) — v2.1 (2026-06-08) ---------- */
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-lg{width:28px;height:28px}

/* ---------- 26. STAT CARDS (factos rápidos com ícone) ---------- */
.stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--crma-cor-borda);padding-top:28px;margin-top:32px}
.stat{background:var(--crma-cor-fundo);border:1px solid var(--crma-cor-borda);border-radius:var(--raio-2xl);padding:18px}
.stat .ico{width:42px;height:42px;border-radius:11px;background:var(--crma-menta-50);color:var(--crma-turquesa-800);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.stat .v{display:block;font-size:18px;font-weight:700;color:var(--crma-petroleo-600);line-height:1.15}
.stat .l{display:block;font-size:12.5px;color:var(--crma-cor-texto-suave);margin-top:3px}

/* ---------- 27. TIMELINE (passo a passo do exame) ---------- */
.tl{position:relative;margin:8px 0 0;padding:0;list-style:none}
.tl::before{content:"";position:absolute;left:21px;top:6px;bottom:6px;width:2px;background:var(--crma-turquesa-200)}
.tl li{position:relative;padding:0 0 22px 56px}
.tl li:last-child{padding-bottom:0}
.tl .dot{position:absolute;left:8px;top:0;width:30px;height:30px;border-radius:50%;background:var(--crma-petroleo-600);color:var(--crma-turquesa-200);display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--crma-fonte-base);box-shadow:0 0 0 4px var(--crma-menta-50)}
.tl h4{margin:0 0 3px;font-size:15px;color:var(--crma-petroleo-600)}
.tl p{margin:0;font-size:13.5px;line-height:1.55;color:var(--crma-cor-texto-suave)}
.tl .dur{display:inline-block;font-size:11px;font-weight:700;color:var(--crma-turquesa-800);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}

/* ---------- 28. SIDEBAR MARCAÇÃO RÁPIDA — v2.2 (2026-06-10) ---------- */
.sidebar-marcar .titulo{font-size:16px;letter-spacing:1.2px}
.sidebar-marcar .mr-quick{padding:17px 24px;font-size:16px;font-weight:700;cursor:pointer}
.sidebar-ok{text-align:center;padding:10px 4px}
.sidebar-ok .ic{width:54px;height:54px;border-radius:50%;background:var(--crma-menta-50);border:2px solid var(--crma-turquesa-400);color:var(--crma-turquesa-800);font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.sidebar-ok h4{color:var(--crma-petroleo-600);font-size:18px;margin:0 0 8px}
.sidebar-ok p{color:var(--crma-cor-texto-suave);font-size:14px;line-height:1.55;margin:0}

/* ---------- 29. SIDEBAR — exame em destaque (cartão-CTA) v2.3 ---------- */
.sidebar-exame{background:var(--crma-menta-50);border:1px solid var(--crma-menta-200);border-radius:var(--raio-md);padding:12px 14px}
.sidebar-exame .lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--crma-cor-texto-suave);margin-bottom:3px}
.sidebar-exame .val{display:block;font-size:15px;font-weight:600;color:var(--crma-petroleo-600);line-height:1.3}

/* ---------- 30. Âncoras "Nesta página" — compensar header sticky (2026-06-10) ---------- */
.prose h2{scroll-margin-top:100px}


/* ---------- HERO-FOTO (banda escura com foto — subpáginas e hubs) ----------
   Substitui o antigo style inline "height:540px" das imagens de hero.
   Desktop mantém o impacto visual; o comportamento mobile está em crma-mobile.css. */
.hero-foto{
  width:100%;
  height:540px;            /* desktop: banda alta */
  object-fit:cover;
  object-position:center;  /* afinável por página se o foco não estiver ao centro */
  display:block;
}


/* ---------- FIGURA DE EXAME — slot de exemplo de imagem ----------
   Componente reutilizável para as subpáginas de RM e TC.
   Slot para um exemplo de imagem real do exame (anonimizada e com consentimento).
   Vive dentro de <article class="prose">, por isso os seletores internos são
   prefixados com .exame-figura. Mobile em crma-mobile.css. */
.exame-figura{margin:36px 0 8px; padding:0}
.exame-figura .exame-figura__quadro{
  position:relative; border-radius:var(--raio-2xl); overflow:hidden;
  min-height:320px; display:flex; align-items:center; justify-content:center; padding:26px;
}
.exame-figura .exame-figura__quadro--exemplo{
  background:#0A0E0F; border:1px dashed rgba(98,225,205,.4);  /* fundo escuro tipo negatoscópio */
}
.exame-figura .exame-figura__rotulo{
  position:absolute; top:12px; left:14px; z-index:1;
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--crma-turquesa-200); background:rgba(0,35,38,.55);
  border-radius:var(--raio-pill); padding:4px 11px;
}
.exame-figura .exame-figura__img{width:100%; height:100%; max-height:420px; object-fit:contain; display:block}
.exame-figura .exame-figura__placeholder{
  text-align:center; color:rgba(255,255,255,.55); font-size:13px; line-height:1.55; max-width:280px;
}
.exame-figura .exame-figura__placeholder svg{
  width:42px; height:42px; display:block; margin:0 auto 10px;
  stroke:rgba(98,225,205,.7); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
/* variante para montagens largas (axial/coronal/sagital): sem min-height, altura natural — evita letterbox */
.exame-figura .exame-figura__quadro--montagem{min-height:0; padding:14px}
.exame-figura .exame-figura__quadro--montagem .exame-figura__img{height:auto; max-height:none}

/* ===== Showcase de tecnologia (TC tórax) ====================================
   Grelha de molduras "negatoscópio" para mostrar exemplos do software avançado
   (quantificação do enfisema, caracterização de nódulos) e o vídeo da
   broncoscopia virtual. Cada cartão é um <figure> com moldura escura + legenda.
   Imagens reais: anonimizadas e com consentimento (slot pronto a trocar). */
.tec-showcase__grid{display:grid; gap:26px; grid-template-columns:1fr; margin-top:8px}
@media(min-width:680px){.tec-showcase__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.tec-showcase__grid{grid-template-columns:repeat(3,1fr)}}
.tec-card{margin:0}
.tec-card__quadro{
  position:relative; border-radius:var(--raio-2xl); overflow:hidden; background:#0A0E0F;
  aspect-ratio:3/2; display:flex; align-items:center; justify-content:center;  /* molduras uniformes na grelha */
}
.tec-card__quadro--slot{border:1px dashed rgba(98,225,205,.4); padding:24px}  /* slot vazio: imagem por colocar */
.tec-card__quadro--video{border:1px solid rgba(98,225,205,.22)}
.tec-card__rotulo{
  position:absolute; top:12px; left:14px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--crma-turquesa-200); background:rgba(0,35,38,.6);
  border-radius:var(--raio-pill); padding:4px 11px;
}
.tec-card__img,.tec-card__video{width:100%; height:100%; object-fit:contain; display:block; background:#0A0E0F}
.tec-card__placeholder{text-align:center; color:rgba(255,255,255,.55); font-size:13px; line-height:1.55; max-width:240px}
.tec-card__placeholder svg{
  width:40px; height:40px; display:block; margin:0 auto 10px;
  stroke:rgba(98,225,205,.7); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.tec-card figcaption{margin-top:13px; font-size:13.5px; line-height:1.6; color:var(--crma-cor-texto-suave)}
.tec-card figcaption strong{display:block; margin-bottom:3px; color:var(--crma-cor-texto); font-weight:600}

/* ===== Variante "destaque" da showcase (fundo petróleo, como o bloco-destaque) ===== */
.tec-destaque{background:var(--crma-petroleo-600); color:var(--crma-cor-texto-inverso); padding:64px 32px 72px; position:relative; overflow:hidden}
.tec-destaque .sec-head{margin-bottom:32px}
.tec-destaque h2{color:var(--crma-cor-texto-inverso)}
.tec-destaque .lead{color:rgba(255,255,255,.85)}
.tec-destaque .tec-card__quadro{border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.32)}
.tec-destaque .tec-card figcaption{color:rgba(255,255,255,.78)}
.tec-destaque .tec-card figcaption strong{color:#fff}
.tec-destaque__acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:36px}
.tec-destaque .sec-head h2{margin-top:0}
/* variante contida (embebida no artigo): cantos arredondados, sem ser full-bleed */
.tec-destaque--card{border-radius:var(--raio-2xl); padding:32px 28px 36px; margin:8px 0 28px}
.tec-destaque--card .sec-head{margin-bottom:24px}
.tec-destaque--card .tec-destaque__acoes{margin-top:28px}

/* ===== Zona unificada de diferenciação tecnológica (hub TC): cabeçalho + 2 features ===== */
.tec-zona{background:var(--crma-petroleo-600); color:var(--crma-cor-texto-inverso); padding:64px 32px 72px}
.tec-zona h2,.tec-zona h3{color:var(--crma-cor-texto-inverso)}
.tec-zona .lead{color:rgba(255,255,255,.85)}
.tec-zona__div{border:0; border-top:1px solid rgba(255,255,255,.14); margin:48px 0}
.tec-feature--split{display:grid; gap:28px; align-items:center}
@media(min-width:860px){.tec-feature--split{grid-template-columns:1fr 1fr; gap:52px}}
.tec-feature__foto{background-size:cover; background-position:center; min-height:280px; border-radius:var(--raio-2xl)}
.tec-feature__corpo{display:flex; flex-direction:column; justify-content:center}
.tec-feature .eyebrow.light{display:block; margin-bottom:12px}
.tec-feature h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem); margin:0 0 14px}
.tec-feature p{color:rgba(255,255,255,.85); line-height:1.65; margin:0 0 24px; max-width:580px}
.tec-feature .tec-showcase{margin-top:8px}
.tec-feature .tec-destaque__acoes{margin-top:28px}
/* média claras sobre o petróleo (igual à variante destaque) */
.tec-zona .tec-card__quadro{border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.32)}
.tec-zona .tec-card figcaption{color:rgba(255,255,255,.78)}
.tec-zona .tec-card figcaption strong{color:#fff}