/* Klini Saúde Convênio - estilo do site público (escrito à mão, sem classes:
   os seletores seguem a estrutura do HTML). Visual de referência:
   klinisaude.com.br (verde-petróleo, laranja e grafite). Tipografia padronizada:
   só Poppins, com a escala --t-* abaixo (o oficial mistura Merriweather no texto). Os tons de verde e laranja dos botões são um pouco mais
   escuros que os do site oficial para o texto branco passar no contraste AA. */

@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
  --verde: #259591;
  --verde-claro: #51aaa7;
  --verde-botao: #1f7f7b;
  --verde-escuro: #17615e;
  --verde-fundo: #e3f1f0;
  --laranja: #cd7925;
  --laranja-botao: #b1621a;
  --laranja-fundo: #fbeedd;
  --rosa-fundo: #fbe3e5;
  --rosa: #c2414d;
  --grafite: #2b2f33;
  --grafite-2: #1f2327;
  --texto: #2b2f33;
  --texto-2: #5b6570;
  --fundo: #f7f9fb;
  --branco: #fff;
  --borda: #e6eaee;
  --raio: 16px;
  --largura: 1240px;
  --titulo: "Poppins", system-ui, sans-serif;
  --corpo: "Poppins", system-ui, sans-serif;
  /* escala tipográfica (única fonte de tamanhos do site) */
  --t-xs: 13px;   /* selos, chips, legendas */
  --t-sm: 14px;   /* texto de cards e listas */
  --t-md: 15px;   /* texto base e botões */
  --t-lg: 17px;   /* texto de destaque e títulos de card */
  --t-xl: 20px;   /* subtítulos (h3 de seção) */
  --t-2xl: 28px;  /* nome dos planos, números */
  --t-h2: clamp(28px, 4vw, 40px);
  --t-h2-longo: clamp(24px, 2.8vw, 32px); /* H2 de texto longo (acesso rápido, planos) */
  --t-h1: clamp(32px, 4.4vw, 56px);
  --sombra: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px rgb(16 24 40 / 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--branco); color: var(--texto); font: 400 var(--t-md)/1.7 var(--corpo); }
h1, h2, h3, h4 { margin: 0; font-family: var(--titulo); line-height: 1.2; color: var(--texto); }
p, ul, ol, address, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--verde-botao); }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
[hidden] { display: none !important; }
section[id], [id$="-titulo"] { scroll-margin-top: 96px; }

/* ---------- botões (links de ação) ---------- */
[data-destaque] > div > p:last-of-type a, body > header > div > a:last-child, #atalhos li > a,
#unidades > div:nth-of-type(2) > p:last-child a, #cotacao button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 26px; border: 2px solid transparent; border-radius: 999px;
  font: 600 var(--t-md)/1.2 var(--titulo); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

/* ---------- sliders (topo, planos e unidades) ----------
   Sem JS: uma faixa com rolagem horizontal (arrastar no celular). O site.js
   liga setas, bolinhas e autoplay. */
[data-slider] { position: relative; min-width: 0; }
[data-trilho] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
[data-trilho]::-webkit-scrollbar { display: none; }
[data-trilho] > li { flex: 0 0 100%; scroll-snap-align: start; }
[data-pontos] { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
[data-pontos] button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
[data-pontos] button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c9cfd4; transition: background-color .2s, transform .2s; }
[data-pontos] button[aria-current="true"]::before { background: var(--laranja); transform: scale(1.15); }
[data-controles] button { display: grid; place-items: center; padding: 0; cursor: pointer; }
[data-controles] svg { width: 22px; height: 22px; }

/* ---------- pular para o conteúdo ---------- */
body > a:first-child { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--grafite); color: var(--branco); font: 600 var(--t-sm) var(--titulo); }
body > a:first-child:focus { top: 12px; }

/* ---------- cabeçalho ---------- */
body > header { position: sticky; top: 0; z-index: 20; background: var(--branco); box-shadow: 0 1px 0 var(--borda), 0 6px 16px rgb(16 24 40 / 0.05); }
body > header > aside { display: flex; justify-content: space-between; gap: 16px; padding: 9px max(20px, calc((100% - var(--largura)) / 2)); background: var(--grafite); color: #d9dde1; font: 500 var(--t-xs)/1.4 var(--titulo); }
body > header > aside p { display: flex; align-items: center; gap: 6px; }
body > header > aside svg { width: 14px; height: 14px; }
body > header > aside strong { color: var(--branco); font-weight: 600; }
body > header > aside a { color: var(--branco); text-decoration: none; font-weight: 600; }
body > header > aside a:hover { text-decoration: underline; }
body > header > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; padding: 0 max(20px, calc((100% - var(--largura)) / 2)); }
body > header > div > a:last-child { background: var(--laranja-botao); color: var(--branco); min-height: 42px; padding: 8px 22px; font-size: var(--t-sm); }
body > header > div > a:last-child:hover { background: #95520f; }

/* marca em texto (cabeçalho e rodapé) */
body > header > div > a:first-child, footer > section:first-child > a { display: inline-flex; flex-direction: column; align-items: flex-end; text-decoration: none; line-height: 1; }
body > header > div > a:first-child b, footer > section:first-child > a b { font: 700 34px/0.9 var(--titulo); letter-spacing: -0.02em; color: var(--verde); }
body > header > div > a:first-child span, footer > section:first-child > a span { margin-top: 3px; font: 600 11px/1 var(--titulo); letter-spacing: .02em; color: var(--verde-escuro); }

/* ---------- títulos de seção ---------- */
main > section > header, #atalhos > h2 { max-width: 760px; }
main > section h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.01em; }
main > section > header > p, #app > div > p:first-of-type { margin-top: 16px; color: var(--texto-2); font-size: var(--t-lg); }
main > section { padding: 88px max(20px, calc((100% - var(--largura)) / 2)); }

/* ---------- 1. destaque (home e páginas internas: mesmo componente, mesma altura) ---------- */
/* Foto ao fundo; verde bem escuro do lado do texto, e a foto aparecendo à direita num degradê. */
[data-destaque] { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 760px); align-content: center;
  min-height: 560px; padding-top: 64px; padding-bottom: 64px; background: var(--verde-escuro); color: var(--branco); }
[data-destaque] > picture { position: absolute; inset: 0; z-index: -2; }
[data-destaque] > picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
[data-destaque][data-foco="center 50%"] > picture img { object-position: center 50%; }
[data-destaque][data-foco="center 45%"] > picture img { object-position: center 45%; }
[data-destaque]::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(12 58 56 / 0.97) 0%, rgb(20 88 85 / 0.93) 38%, rgb(28 115 111 / 0.62) 70%, rgb(37 149 145 / 0.3) 100%); }
[data-destaque] nav ol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; font: 500 var(--t-xs) var(--titulo); }
[data-destaque] nav li + li::before { content: "›"; margin-right: 6px; opacity: .7; }
[data-destaque] nav a { color: rgb(255 255 255 / 0.9); text-decoration: none; }
[data-destaque] nav a:hover { text-decoration: underline; }
[data-destaque] nav a[aria-current] { color: var(--branco); font-weight: 600; }
[data-destaque] > div > p:first-of-type { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.16); font: 500 var(--t-xs)/1.3 var(--titulo); letter-spacing: .02em; }
[data-destaque] h1 { margin-top: 16px; color: var(--branco); font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.015em; }
[data-destaque] > div > p:nth-of-type(2) { max-width: 600px; margin-top: 18px; font-size: var(--t-lg); line-height: 1.75; color: rgb(255 255 255 / 0.95); }
[data-destaque] > div > p:last-of-type { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
[data-destaque] > div > p:last-of-type a:first-child { background: var(--laranja-botao); color: var(--branco); }
[data-destaque] > div > p:last-of-type a:first-child:hover { background: #95520f; }
[data-destaque] > div > p:last-of-type a:last-child { border-color: var(--branco); color: var(--branco); }
[data-destaque] > div > p:last-of-type a:last-child:hover { background: var(--branco); color: var(--verde-escuro); }
#topo-pagina h1 { font-size: clamp(30px, 3.8vw, 48px); }

/* ---------- 2. acesso rápido ---------- */
#atalhos { background: var(--fundo); padding-top: 64px; }
#atalhos > h2 { margin: 0 auto 36px; text-align: center; font-size: var(--t-h2-longo); }
#atalhos > ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#atalhos li { display: flex; flex-direction: column; align-items: center; padding: 32px 22px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); text-align: center; box-shadow: var(--sombra); }
#atalhos li > svg { width: 62px; height: 62px; padding: 19px; border-radius: 14px; background: var(--verde-fundo); color: var(--verde-botao); }
#atalhos li:nth-child(2) > svg, #atalhos li:nth-child(4) > svg { background: var(--laranja-fundo); color: var(--laranja-botao); }
#atalhos li:nth-child(3) > svg { background: var(--rosa-fundo); color: var(--rosa); }
#atalhos h3 { margin-top: 24px; font-size: var(--t-lg); font-weight: 600; }
#atalhos li > p { flex: 1; margin-top: 12px; color: var(--texto-2); font-size: var(--t-sm); line-height: 1.7; }
#atalhos li > a { margin-top: 24px; background: var(--verde-botao); color: var(--branco); }
#atalhos li > a:hover { background: var(--verde-escuro); }

/* ---------- 3. planos ---------- */
#planos { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 48px; align-items: start; background: var(--fundo); padding-top: 24px; }
#planos [data-trilho] { gap: 20px; padding-bottom: 4px; }
#planos [data-trilho] > li { flex-basis: calc((100% - 20px) / 2); display: flex; flex-direction: column; min-height: 420px; padding: 32px; border-radius: 28px; color: var(--branco);
  background: linear-gradient(160deg, var(--verde) 0%, var(--verde-escuro) 100%); }
#planos [data-trilho] > li:nth-child(1) { background: linear-gradient(160deg, #6aa8ad 0%, #4c9994 100%); }
#planos [data-trilho] > li:nth-child(4) { background: linear-gradient(160deg, #3a4047 0%, var(--grafite-2) 100%); }
#planos [data-trilho] > li:nth-child(5) { background: linear-gradient(160deg, #cd7925 0%, #9a5313 100%); }
#planos li > picture { display: grid; place-items: center; align-self: flex-start; width: 90px; height: 84px; border-radius: 12px; background: rgb(255 255 255 / 0.14); }
#planos li > picture img { width: 70px; height: auto; }
#planos > header h2 { font-size: var(--t-h2-longo); }
#planos > header p a { display: inline-flex; align-items: center; gap: 6px; color: var(--verde-botao); font-weight: 600; text-decoration: none; }
#planos > header p a:hover { text-decoration: underline; }
#planos > header p a svg { width: 16px; height: 16px; }
#planos h3 { margin-top: 32px; color: var(--branco); font-size: var(--t-2xl); font-weight: 300; }
#planos h3 b { font-weight: 500; }
#planos li > p { margin-top: 20px; max-width: 330px; font-size: var(--t-md); line-height: 1.8; color: rgb(255 255 255 / 0.95); }
#planos li > ul { flex: 1; display: grid; align-content: start; gap: 8px; margin-top: 18px; font: 500 var(--t-sm)/1.4 var(--titulo); }
#planos li > ul li { display: flex; align-items: center; gap: 8px; }
#planos li > ul svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgb(255 255 255 / 0.2); }
#planos li > a { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.3); color: var(--branco); font: 600 var(--t-md) var(--titulo); text-decoration: none; }
#planos li > a svg { width: 18px; height: 18px; transition: transform .15s; }
#planos li > a:hover svg { transform: translateX(4px); }
#planos [data-controles] { display: flex; gap: 12px; margin-top: 20px; }
#planos [data-controles][hidden] { display: none; }
#planos [data-controles] button { width: 44px; height: 44px; border: 1px solid #d6dbe0; border-radius: 50%; background: var(--branco); color: var(--texto); }
#planos [data-controles] button:hover { border-color: var(--verde-botao); color: var(--verde-botao); }
#planos [data-controles] svg { width: 18px; height: 18px; }

/* ---------- 4. aplicativo ---------- */
#app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
#app > div > p { max-width: 480px; margin-top: 16px; color: var(--texto-2); font-size: var(--t-lg); }
#app > div > ul:first-of-type { display: grid; gap: 26px; margin-top: 40px; max-width: 480px; }
#app > div > ul:first-of-type li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
#app > div > ul:first-of-type svg { grid-row: span 2; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--verde-fundo); color: var(--verde-botao); }
#app > div > ul:first-of-type h3 { font-size: var(--t-lg); font-weight: 600; }
#app > div > ul:first-of-type p { color: var(--texto-2); font-size: var(--t-sm); line-height: 1.7; }
#app > div > ul:last-of-type { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
#app > div > ul:last-of-type a { display: block; border-radius: 8px; transition: transform .15s; }
#app > div > ul:last-of-type a:hover { transform: translateY(-2px); }
#app > div > ul:last-of-type img { display: block; width: auto; height: 42px; }
#app > figure { justify-self: center; }
#app > figure img { display: block; width: 300px; height: auto; filter: drop-shadow(0 30px 40px rgb(16 24 40 / 0.18)); }

/* ---------- 5. unidades ---------- */
#unidades { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 64px; align-items: center; }
#unidades figure { position: relative; }
#unidades figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
#unidades figcaption { position: absolute; left: 16px; bottom: 16px; padding: 6px 14px; border-radius: 999px; background: rgb(31 35 39 / 0.72); color: var(--branco); font: 500 var(--t-xs)/1.3 var(--titulo); }
#unidades [data-controles] { position: absolute; inset: 0 0 34px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
#unidades [data-controles][hidden] { display: none; }
#unidades [data-controles] button { width: 44px; height: 44px; border: 0; background: none; color: var(--branco); filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.6)); pointer-events: auto; }
#unidades [data-controles] svg { width: 30px; height: 30px; }
#unidades [data-pontos] button[aria-current="true"]::before { background: var(--grafite); }
#unidades > div:nth-of-type(2) > p:first-of-type { margin: 16px 0 28px; color: var(--texto-2); font-size: var(--t-lg); }
#unidades > div:nth-of-type(2) h3 { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: var(--t-lg); font-weight: 600; }
#unidades > div:nth-of-type(2) h3 svg { width: 22px; height: 22px; color: var(--verde-botao); }
#unidades > div:nth-of-type(2) :is(address, h3 + p) { margin: 4px 0 0 34px; color: var(--texto-2); font-size: var(--t-sm); line-height: 1.7; }
#unidades > div:nth-of-type(2) > p:last-child { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#unidades > div:nth-of-type(2) > p:last-child a:first-child { background: var(--verde-botao); color: var(--branco); }
#unidades > div:nth-of-type(2) > p:last-child a:first-child:hover { background: var(--verde-escuro); }
#unidades > div:nth-of-type(2) > p:last-child a:last-child { border-color: var(--verde-botao); color: var(--verde-botao); }
#unidades > div:nth-of-type(2) > p:last-child a:last-child:hover { background: var(--verde-botao); color: var(--branco); }
/* lista completa (aberta por "Ver unidades") */
#lista-unidades { grid-column: 1 / -1; border-top: 1px solid var(--borda); }
#lista-unidades > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font: 600 var(--t-xl) var(--titulo); cursor: pointer; list-style: none; scroll-margin-top: 110px; }
#lista-unidades > summary::-webkit-details-marker { display: none; }
#lista-unidades > summary::after, #perguntas summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--verde-botao) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform .2s; }
#lista-unidades[open] > summary::after { transform: rotate(45deg); }
#lista-unidades > section + section { margin-top: 36px; }
#lista-unidades h3 { font-size: var(--t-lg); font-weight: 600; }
#lista-unidades h3 small { color: var(--texto-2); font-weight: 400; font-size: var(--t-md); }
#lista-unidades ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 16px; }
#lista-unidades li { display: flex; flex-direction: column; padding: 20px 22px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo); }
#lista-unidades h4 { display: flex; align-items: center; gap: 8px; font-size: var(--t-md); font-weight: 600; }
#lista-unidades h4::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); }
#lista-unidades address { flex: 1; margin-top: 8px; color: var(--texto-2); font-size: var(--t-sm); line-height: 1.65; }
#lista-unidades li > a, #lista-unidades > p a { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--verde-botao); font: 600 var(--t-sm) var(--titulo); text-decoration: none; }
#lista-unidades li > a:hover, #lista-unidades > p a:hover { text-decoration: underline; }
#lista-unidades a svg { width: 15px; height: 15px; }
#lista-unidades > p { margin: 28px 0 8px; }

/* ---------- 6. canais ---------- */
#canais > header { margin: 0 auto; text-align: center; }
#canais > header a { font-weight: 700; }
#canais > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
#canais li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-content: start; padding: 32px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); }
#canais li > svg { width: 56px; height: 56px; padding: 15px; border-radius: 10px; background: var(--verde-fundo); color: var(--verde-botao); }
#canais li:nth-child(4) > svg { background: var(--laranja-fundo); color: var(--laranja-botao); }
#canais li:nth-child(5) > svg { background: var(--rosa-fundo); color: var(--rosa); }
#canais h3 { align-self: center; font-size: var(--t-xl); font-weight: 600; }
#canais li > :is(p, address) { grid-column: 1 / -1; margin-top: 12px; color: var(--texto-2); font-size: var(--t-sm); }
#canais li > p a { font: 600 var(--t-lg) var(--titulo); color: var(--texto); text-decoration: none; }
#canais li > p a:hover { color: var(--verde-botao); text-decoration: underline; }
#canais li > p:last-child { justify-self: start; margin-top: 22px; padding: 6px 16px; border-radius: 999px; background: var(--verde-botao); color: var(--branco); font: 500 var(--t-xs) var(--titulo); }
#canais li:nth-child(5) > p:last-child { background: none; padding: 0; }
#canais li:nth-child(5) > p:last-child a { display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--verde-botao); color: var(--branco); font-size: var(--t-sm); text-decoration: none; }

/* ---------- 7. perguntas ---------- */
#perguntas { background: var(--fundo); }
#perguntas > h2 { max-width: 760px; margin-bottom: 32px; }
#perguntas details { max-width: 900px; border-bottom: 1px solid #dde2e7; }
#perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; }
#perguntas summary::-webkit-details-marker { display: none; }
#perguntas summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--verde-botao) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform .2s; }
#perguntas details[open] summary::after { transform: rotate(45deg); }
#perguntas summary h3 { font-size: var(--t-lg); font-weight: 600; }
#perguntas details p { padding: 0 44px 24px 0; color: var(--texto-2); }

/* ---------- 8. cotação ---------- */
#cotacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; align-items: center; background: linear-gradient(150deg, var(--grafite) 0%, var(--grafite-2) 100%); color: var(--branco); }
#cotacao h2 { color: var(--branco); }
#cotacao > div > p { margin-top: 16px; font-size: var(--t-lg); color: #d4d9de; }
#cotacao > div > ul { display: grid; gap: 12px; margin-top: 28px; font: 500 var(--t-md) var(--titulo); }
#cotacao > div li { display: flex; align-items: center; gap: 10px; }
#cotacao > div li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--verde-botao); }
#cotacao form { display: grid; gap: 16px; padding: 32px; border-radius: 20px; background: var(--branco); color: var(--texto); }
#cotacao label { display: block; margin-bottom: 6px; font: 600 var(--t-sm) var(--titulo); }
#cotacao label span { color: var(--texto-2); font-weight: 400; }
#cotacao :is(input, select) { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #cfd6dc; border-radius: 10px; background: var(--branco); color: var(--texto); font: 400 var(--t-md) var(--titulo); }
#cotacao :is(input, select):focus { border-color: var(--verde-botao); outline: 2px solid var(--verde-fundo); }
#cotacao [aria-invalid="true"] { border-color: #b42318; }
#cotacao form small { display: block; margin-top: 6px; color: #b42318; font: 500 var(--t-xs) var(--titulo); }
#cotacao button { width: 100%; margin-top: 4px; background: var(--laranja-botao); color: var(--branco); }
#cotacao button:hover { background: #95520f; }
#cotacao button:disabled { opacity: .7; cursor: wait; }
#cotacao [role="status"], #cotacao [role="alert"] { padding: 32px; border-radius: 20px; background: var(--branco); color: var(--texto); }
#cotacao [role="status"] h3 { font-size: var(--t-xl); }
#cotacao [role="status"] p { margin-top: 8px; color: var(--texto-2); }
#cotacao form > [role="alert"] { padding: 12px 16px; background: #fef3f2; color: #b42318; font: 500 var(--t-sm) var(--titulo); }

/* ---------- rodapé ---------- */
footer { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding: 64px max(20px, calc((100% - var(--largura)) / 2)) 32px; background: var(--grafite); color: #c4cacf; font-size: var(--t-sm); }
footer > section:first-child > a b { color: var(--branco); }
footer > section:first-child > a span { color: #c4cacf; }
footer > section:first-child > p { max-width: 320px; margin-top: 18px; line-height: 1.7; }
footer > section:first-child > ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
footer > section:first-child > ul a { display: block; }
footer > section:first-child > ul img { display: block; width: auto; height: 40px; }
footer > :is(nav, section:not(:first-child)) > p { margin-bottom: 18px; color: var(--branco); font: 600 var(--t-sm) var(--titulo); text-transform: uppercase; letter-spacing: .03em; }
footer > :is(nav, section:not(:first-child)) li { margin-bottom: 12px; font-family: var(--titulo); }
footer > :is(nav, section) a { color: #dfe3e6; text-decoration: none; }
footer > :is(nav, section:not(:first-child)) a:hover { color: var(--branco); text-decoration: underline; }
footer > p { grid-column: 1 / -1; }
footer > p:nth-last-of-type(2) { padding-top: 28px; border-top: 1px solid #41474d; }
footer > p small { font: 400 var(--t-xs)/1.7 var(--titulo); }

/* ---------- página: tabela de preços ---------- */
main > aside > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 26px; border: 2px solid transparent; border-radius: 999px;
  font: 600 var(--t-md)/1.2 var(--titulo); text-decoration: none; cursor: pointer;
}
main > section > h2 + p { max-width: 780px; margin-top: 12px; color: var(--texto-2); font-size: var(--t-md); }

#introducao > div { display: grid; gap: 14px; max-width: 820px; margin-top: 20px; font-size: var(--t-md); line-height: 1.8; color: var(--texto-2); }
#introducao strong { color: var(--texto); }

#resumo, #lista-planos { background: var(--fundo); }
#resumo > ul, #lista-planos > ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
#resumo > ul > li, #lista-planos > ul > li { display: flex; flex-direction: column; padding: 24px 20px; border-radius: 20px; color: var(--branco); background: linear-gradient(160deg, var(--verde) 0%, var(--verde-escuro) 100%); }
#resumo > ul > li:nth-child(2), #lista-planos > ul > li:nth-child(2) { background: linear-gradient(160deg, #6aa8ad 0%, #4c9994 100%); }
#resumo > ul > li:nth-child(4), #lista-planos > ul > li:nth-child(4) { background: linear-gradient(160deg, #3a4047 0%, var(--grafite-2) 100%); }
#resumo > ul > li:nth-child(5), #lista-planos > ul > li:nth-child(5) { background: linear-gradient(160deg, #cd7925 0%, #9a5313 100%); }
#resumo li > picture, #lista-planos li > picture { display: grid; place-items: center; align-self: flex-start; width: 72px; height: 66px; border-radius: 12px; background: rgb(255 255 255 / 0.14); }
#resumo li > picture img, #lista-planos li > picture img { width: 56px; height: auto; }
#resumo h3, #lista-planos h3 { margin-top: 18px; color: var(--branco); font-size: var(--t-lg); font-weight: 600; }
#resumo li > p:first-of-type, #lista-planos li > p:first-of-type { margin-top: 10px; font: 400 var(--t-sm)/1.3 var(--titulo); }
#resumo li > p:first-of-type strong, #lista-planos li > p:first-of-type strong { display: block; font: 700 var(--t-2xl)/1.1 var(--titulo); }
#resumo li > p:first-of-type span, #lista-planos li > p:first-of-type span { font-size: var(--t-xs); opacity: .9; }
#resumo li > p:nth-of-type(2), #lista-planos li > p:nth-of-type(2) { flex: 1; margin-top: 12px; font-size: var(--t-sm); line-height: 1.6; color: rgb(255 255 255 / 0.92); }
#resumo li > a, #lista-planos li > a { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 0.3); color: var(--branco); font: 600 var(--t-sm) var(--titulo); text-decoration: none; }
#resumo li > a svg, #lista-planos li > a svg { width: 16px; height: 16px; }

#como-ler dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 28px 0 0; }
#como-ler dl > div { padding: 22px; border: 1px solid var(--borda); border-radius: var(--raio); border-top: 4px solid var(--verde); }
#como-ler dt { font: 600 var(--t-lg) var(--titulo); }
#como-ler dd { margin: 8px 0 0; font-size: var(--t-sm); color: var(--texto-2); }

/* seções de preço (sem / com coparticipação) com abas PME I / PME II */
#sem-coparticipacao, #titularidade, #como-escolher, #area, #como-contratar { background: var(--fundo); }
#com-coparticipacao > h2 { color: var(--texto); }
#sem-coparticipacao > h2::before, #com-coparticipacao > h2::before { content: ""; display: block; width: 56px; height: 5px; margin-bottom: 14px; border-radius: 3px; background: var(--verde); }
#com-coparticipacao > h2::before { background: var(--laranja); }
[data-abas] [role="tablist"] { display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 999px; background: var(--branco); border: 1px solid var(--borda); }
[data-abas] [role="tab"] { min-height: 42px; padding: 8px 20px; border: 0; border-radius: 999px; background: none; color: var(--texto-2); font: 600 var(--t-sm) var(--titulo); cursor: pointer; }
[data-abas] [role="tab"][aria-selected="true"] { background: var(--verde-botao); color: var(--branco); }
#com-coparticipacao [role="tab"][aria-selected="true"] { background: var(--laranja-botao); }
[data-abas] [role="tabpanel"] > h3 { margin-top: 26px; font-size: var(--t-lg); font-weight: 600; }
[data-abas].com-js [role="tabpanel"] > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* tabelas */
main [role="region"] { margin-top: 18px; overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); }
main table { width: 100%; border-collapse: collapse; font: 400 var(--t-sm)/1.4 var(--titulo); }
main caption { padding: 14px 18px; text-align: left; font: 600 var(--t-sm) var(--titulo); color: var(--texto); border-bottom: 1px solid var(--borda); }
main th, main td { padding: 12px 14px; border-bottom: 1px solid var(--borda); text-align: center; white-space: nowrap; }
main thead th { background: var(--verde-botao); color: var(--branco); font-weight: 600; vertical-align: bottom; }
@media (min-width: 1024px) {
  :is(#sem-coparticipacao, #com-coparticipacao, #titularidade) thead th { white-space: normal; }
  :is(#sem-coparticipacao, #com-coparticipacao, #titularidade) :is(th, td) { padding: 11px 7px; }
}
main thead th small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--t-xs); color: rgb(255 255 255 / 0.85); }
#com-coparticipacao thead th { background: #9a5313; }
main tbody th { text-align: left; font-weight: 600; background: var(--branco); }
main tbody tr:nth-child(even) :is(td, th) { background: #f6f9f9; }
main tbody tr:hover :is(td, th) { background: var(--verde-fundo); }
main tfoot small { font-size: inherit; }
main tfoot td { white-space: normal; line-height: 1.3; }
main tfoot :is(th, td) { background: var(--fundo); color: var(--texto-2); font-size: var(--t-xs); border-bottom: 0; }
main td { font-variant-numeric: tabular-nums; }
:is(#sem-coparticipacao, #com-coparticipacao, #titularidade, #rede) :is(tbody th, thead th:first-child, tfoot th) { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--borda); }
:is(#sem-coparticipacao, #com-coparticipacao, #titularidade, #rede) thead th:first-child { background: var(--verde-escuro); }
#com-coparticipacao thead th:first-child { background: #7c420e; }
main section > p > small { display: block; margin-top: 12px; color: var(--texto-2); font-size: var(--t-xs); }
#coparticipacao > ul { display: grid; gap: 8px; margin-top: 16px; font-size: var(--t-sm); color: var(--texto-2); }
#coparticipacao > ul li { display: flex; gap: 8px; }
#coparticipacao > ul svg { width: 18px; height: 18px; flex: none; color: var(--verde-botao); }

main > aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px max(20px, calc((100% - var(--largura)) / 2)); background: var(--grafite); color: #d4d9de; }
main > aside p { max-width: 720px; font-size: var(--t-md); }
main > aside strong { color: var(--branco); }
main > aside > a { background: var(--laranja-botao); color: var(--branco); }
main > aside > a:hover { background: #95520f; }

#titularidade > h3 { margin-top: 28px; font-size: var(--t-lg); font-weight: 600; }
#simulacao > p:last-child { margin-top: 14px; font-size: var(--t-sm); color: var(--texto-2); }
#simulacao tbody th { white-space: normal; min-width: 240px; }

#como-escolher > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
#como-escolher > ul > li { display: flex; gap: 14px; padding: 22px; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--borda); }
#como-escolher > ul svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: var(--verde-fundo); color: var(--verde-botao); }
#como-escolher h3 { font-size: var(--t-lg); font-weight: 600; }
#como-escolher li p { margin-top: 6px; font-size: var(--t-sm); color: var(--texto-2); }

/* rede: fotos da Rede Casa + matriz hospital x plano */
#rede > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
#rede figure { position: relative; overflow: hidden; border-radius: var(--raio); }
#rede figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
#rede figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(31 35 39 / 0.75); color: var(--branco); font: 500 var(--t-xs)/1.3 var(--titulo); }
#rede tbody th small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--texto-2); }
#rede tbody th[scope="colgroup"] { position: static; background: var(--verde-fundo); color: var(--verde-escuro); font: 600 var(--t-xs) var(--titulo); text-transform: uppercase; letter-spacing: .04em; box-shadow: none; }
#rede td svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--verde-botao); color: var(--branco); vertical-align: middle; }
#rede td > span[aria-hidden] { color: #b8c0c7; }
#rede td { position: relative; }
#rede td > span:last-child { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#area dl { display: grid; gap: 12px; margin: 24px 0 0; }
#area dl > div { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 16px; padding: 18px 22px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
#area dt { font: 600 var(--t-md) var(--titulo); }
#area dd { margin: 0; color: var(--texto-2); font-size: var(--t-sm); }

#quem-pode > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
#quem-pode > div > section { padding: 24px; border: 1px solid var(--borda); border-radius: var(--raio); }
#quem-pode h3 { font-size: var(--t-lg); font-weight: 600; }
#quem-pode > div p { margin-top: 10px; font-size: var(--t-sm); color: var(--texto-2); }
#quem-pode > div ul { display: grid; gap: 8px; margin-top: 12px; font-size: var(--t-sm); color: var(--texto-2); }
#quem-pode > div li { display: flex; gap: 8px; }
#quem-pode > div li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--verde-botao); }
#quem-pode > div > section:last-child li svg { color: var(--rosa); }

#como-contratar > ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
#como-contratar > ol > li { padding: 24px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
#como-contratar > ol span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--verde-botao); color: var(--branco); font: 700 var(--t-md) var(--titulo); }
#como-contratar h3 { margin-top: 14px; font-size: var(--t-lg); font-weight: 600; }
#como-contratar > ol p { margin-top: 8px; font-size: var(--t-sm); color: var(--texto-2); }
#como-contratar > p { margin-top: 20px; font-size: var(--t-sm); color: var(--texto-2); }

#beneficios > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
#beneficios > ul > li { display: flex; gap: 14px; padding: 22px; border: 1px solid var(--borda); border-radius: var(--raio); }
#beneficios > ul svg { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--verde-fundo); color: var(--verde-botao); flex: none; }
#beneficios > ul p { font-size: var(--t-sm); color: var(--texto-2); }

@media (max-width: 1100px) {
  #resumo > ul, #lista-planos > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #como-contratar > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #como-escolher > ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  [data-destaque] { min-height: 440px; padding-top: 48px; padding-bottom: 56px; }
  #topo-pagina h1 { font-size: 28px; }
  [data-destaque]::before { background: linear-gradient(180deg, rgb(12 58 56 / 0.94) 0%, rgb(20 88 85 / 0.86) 100%); }
}
@media (max-width: 760px) {
  #resumo > ul, #lista-planos > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rede > ul { grid-template-columns: minmax(0, 1fr); }
  #quem-pode > div, #beneficios > ul, #como-contratar > ol { grid-template-columns: minmax(0, 1fr); }
  #area dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  [data-abas] [role="tablist"] { display: flex; }
  [data-abas] [role="tab"] { flex: 1; padding: 8px 10px; }
}
@media (max-width: 480px) {
  #resumo > ul, #lista-planos > ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  [data-destaque] { min-height: 580px; }
  #topo-pagina h1 { font-size: 26px; }
  #topo-pagina > div > p:nth-of-type(2) { font-size: var(--t-md); line-height: 1.65; }
  #topo-pagina nav ol { margin-bottom: 10px; }
}
@media (max-width: 380px) {
  #topo-pagina h1 { font-size: 24px; }
  #topo-pagina > div > p:nth-of-type(2) { font-size: var(--t-sm); }
  #rede tbody th[scope="row"] { white-space: normal; min-width: 120px; max-width: 140px; }
  #rede :is(th, td) { padding: 10px 8px; }
}

/* ---------- página: tabela de preços — celular (decisões do Jev) ---------- */
/* altura medida do cabeçalho fixo: o índice "ir para" encosta logo abaixo dele */
@media (max-width: 760px) { :root { --altura-cabecalho: 114px; } }
@media (max-width: 640px) { :root { --altura-cabecalho: 102px; } }
#ir-para, [data-planos] { display: none; }
@media (max-width: 760px) {
  /* índice "ir para", fixo logo abaixo do cabeçalho */
  #ir-para { display: block; position: sticky; top: var(--altura-cabecalho, 100px); z-index: 15; padding: 6px 8px; background: rgb(255 255 255 / 0.97); border-bottom: 1px solid var(--borda); box-shadow: 0 4px 10px rgb(16 24 40 / 0.05); }
  #ir-para ul { display: flex; justify-content: space-between; gap: 0; }
  #ir-para a { display: grid; place-items: center; min-height: 44px; padding: 0 6px; border-radius: 999px; color: var(--verde-escuro); font: 600 var(--t-xs) var(--titulo); text-decoration: none; white-space: nowrap; }
  #ir-para a:active, #ir-para a:hover { background: var(--verde-fundo); }
  main section[id] { scroll-margin-top: calc(var(--altura-cabecalho, 100px) + 64px); }

  /* tabelas de preço: botões de plano + só a coluna escolhida (sem rolagem) */
  [data-planos] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  [data-planos] button { min-height: 44px; padding: 8px 14px; border: 1px solid #cfd6dc; border-radius: 999px; background: var(--branco); color: var(--texto); font: 600 var(--t-xs) var(--titulo); cursor: pointer; }
  [data-planos] button[aria-pressed="true"] { border-color: var(--verde-botao); background: var(--verde-botao); color: var(--branco); }
  #com-coparticipacao [data-planos] button[aria-pressed="true"] { border-color: var(--laranja-botao); background: var(--laranja-botao); }
  [data-seletor] { overflow-x: visible; }
  [data-seletor] [data-fora] { display: none; }
  [data-seletor] table { font-size: var(--t-md); }
  [data-seletor] :is(th, td) { padding: 12px 16px; white-space: normal; }
  [data-seletor] tbody th, [data-seletor] thead th:first-child { position: static; box-shadow: none; }
  [data-seletor] td { text-align: right; font-weight: 600; }
  [data-seletor] thead th:not(:first-child) { text-align: right; }
  [data-seletor] caption { font-size: var(--t-xs); }

  /* coparticipação, simulação e rede viram cards */
  :is(#coparticipacao, #simulacao, #rede) [role="region"] { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  :is(#coparticipacao, #simulacao, #rede) :is(table, tbody, tr, th, td) { display: block; }
  :is(#coparticipacao, #simulacao, #rede) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(#coparticipacao, #simulacao, #rede) caption { display: block; padding: 0 0 4px; border: 0; }
  :is(#coparticipacao, #simulacao, #rede) tbody tr :is(th, td) { background: none; }
  :is(#coparticipacao, #simulacao) tbody tr { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); }
  :is(#coparticipacao, #simulacao) tbody th { position: static; padding: 0 0 8px; border: 0; box-shadow: none; font-size: var(--t-md); white-space: normal; }
  :is(#coparticipacao, #simulacao) td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--borda); font-size: var(--t-md); font-weight: 600; white-space: normal; }
  :is(#coparticipacao, #simulacao) td::before { content: attr(data-label); color: var(--texto-2); font-weight: 400; text-align: left; }
  :is(#coparticipacao, #simulacao) td:last-child { border-bottom: 0; }
  #coparticipacao td[data-vazio] { display: none; }
  #simulacao td:last-child { color: var(--verde-escuro); }

  #rede tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 4px; border-bottom: 1px solid var(--borda); }
  #rede tbody th[scope="row"] { position: static; flex: 1 1 100%; max-width: none; padding: 0; border: 0; box-shadow: none; font-size: var(--t-md); white-space: normal; }
  #rede tbody th[scope="colgroup"] { flex: 1 1 100%; margin: 18px 0 0; padding: 8px 12px; border: 0; border-radius: 8px; }
  #rede tbody tr:has(th[scope="colgroup"]) { padding: 0; border: 0; }
  #rede td { padding: 4px 12px; border: 0; border-radius: 999px; background: var(--verde-fundo) !important; color: var(--verde-escuro); font: 600 var(--t-xs) var(--titulo); }
  #rede td::before { content: attr(data-label); }
  #rede td > * { display: none; }
  #rede td[data-vazio] { display: none; }

  #rede figure img { aspect-ratio: 16 / 9; }

  /* "como ler" mais compacto */
  #como-ler dl { gap: 0; margin-top: 16px; }
  #como-ler dl > div { padding: 14px 0; border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; }

  /* alvos de toque com 44 px */
  [data-destaque] nav a { display: inline-block; padding: 12px 2px; }
  [data-abas] [role="tab"] { min-height: 44px; }
  #resumo li > a, #lista-planos li > a { min-height: 44px; }
  footer :is(nav, section) li a { display: inline-block; padding: 10px 0; }
  footer :is(nav, section:not(:first-child)) li { margin-bottom: 2px; }
}

/* ---------- página: plano (/planos/<slug>) ---------- */
#resumo-plano { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
#resumo-plano > div > picture { display: grid; place-items: center; width: 96px; height: 80px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(160deg, var(--verde) 0%, var(--verde-escuro) 100%); }
#resumo-plano > div > picture img { width: 72px; height: auto; }
#resumo-plano > div > p { margin-top: 14px; color: var(--texto-2); font-size: var(--t-md); line-height: 1.8; }
#resumo-plano > div > p:last-child { margin-top: 20px; padding: 14px 18px; border-radius: 12px; background: var(--verde-fundo); color: var(--verde-escuro); }
#resumo-plano > div > p:last-child strong { font-size: var(--t-xl); }
#resumo-plano > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#resumo-plano > ul > li { display: flex; gap: 12px; padding: 18px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); }
#resumo-plano > ul svg { width: 28px; height: 28px; flex: none; padding: 5px; border-radius: 50%; background: var(--verde-fundo); color: var(--verde-botao); }
#resumo-plano h3 { font-size: var(--t-md); font-weight: 600; }
#resumo-plano li p { margin-top: 4px; font-size: var(--t-sm); color: var(--texto-2); }

#precos { background: var(--fundo); }
#precos > section > h3 { margin-top: 28px; font-size: var(--t-lg); font-weight: 600; }
#precos > p { max-width: 820px; margin-top: 16px; font-size: var(--t-sm); color: var(--texto-2); }
#precos > p a { display: inline-flex; align-items: center; gap: 6px; color: var(--verde-botao); font-weight: 600; text-decoration: none; }
#precos > p a:hover { text-decoration: underline; }
#precos > p a svg { width: 16px; height: 16px; }
#precos :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--borda); }
#precos thead th:first-child { background: var(--verde-escuro); }
:is(#precos, #comparacao) thead th { white-space: normal; }
:is(#precos, #comparacao) :is(th, td) { padding: 11px 10px; }
#precos td { font-variant-numeric: tabular-nums; }

#rede > ul > li:has(> svg) { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
#rede > ul > li:has(> svg) svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--verde-botao); }
#rede > ul > li:has(> svg) strong { display: block; font: 600 var(--t-sm) var(--titulo); }
#rede > ul > li:has(> svg) small { font-size: var(--t-xs); color: var(--texto-2); }
#rede > figure { position: relative; margin-top: 24px; overflow: hidden; border-radius: var(--raio); }
#rede > figure img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: center 35%; }
#rede > figure figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 14px; border-radius: 999px; background: rgb(31 35 39 / 0.75); color: var(--branco); font: 500 var(--t-xs)/1.3 var(--titulo); }
main > section#rede > div:not([role]) { columns: 260px 4; column-gap: 16px; margin-top: 24px; }
#rede > div:not([role]) > section { break-inside: avoid; margin-bottom: 16px; padding: 20px 22px; border: 1px solid var(--borda); border-radius: var(--raio); }
#rede > div h3 { font: 600 var(--t-xs) var(--titulo); text-transform: uppercase; letter-spacing: .04em; color: var(--verde-escuro); }
#rede > div ul { display: grid; gap: 8px; margin-top: 12px; font-size: var(--t-sm); }
#rede > div li { display: flex; flex-direction: column; padding-left: 14px; border-left: 3px solid var(--verde-fundo); font-weight: 600; }
#rede > div li small { font-weight: 400; font-size: var(--t-xs); color: var(--texto-2); }
#rede > p:last-child { margin-top: 20px; font-size: var(--t-sm); color: var(--texto-2); }

#exclusivos { background: var(--fundo); }
#exclusivos > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 24px; }
#exclusivos li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
#exclusivos li svg { width: 36px; height: 36px; flex: none; padding: 8px; border-radius: 10px; background: var(--laranja-fundo); color: var(--laranja-botao); }
#exclusivos li strong { display: block; font: 600 var(--t-sm) var(--titulo); }
#exclusivos li small { font-size: var(--t-xs); color: var(--texto-2); }
#area > ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
#area > ul li { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: var(--branco); border: 1px solid var(--borda); font: 600 var(--t-sm) var(--titulo); }
#area > ul svg { width: 16px; height: 16px; color: var(--verde-botao); }

#cobertura { background: var(--fundo); }
#cobertura > p { max-width: 820px; margin-top: 12px; color: var(--texto-2); font-size: var(--t-md); }
#cobertura > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
#cobertura > div > section { padding: 24px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--branco); }
#cobertura > div > section:first-child { border-top: 4px solid var(--verde); }
#cobertura > div > section:last-child { border-top: 4px solid var(--rosa); }
#cobertura h3 { font-size: var(--t-lg); font-weight: 600; }
#cobertura ul { display: grid; gap: 10px; margin-top: 14px; font-size: var(--t-sm); color: var(--texto-2); }
#cobertura li { display: flex; gap: 10px; }
#cobertura li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--verde-botao); }
#cobertura > div > section:last-child li svg { color: var(--rosa); }
#e-bom > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
#e-bom > div > section { padding: 24px; border-radius: var(--raio); border: 1px solid var(--borda); }
#e-bom > div > section:first-child { border-top: 4px solid var(--verde); }
#e-bom > div > section:last-child { border-top: 4px solid var(--laranja); }
#e-bom h3 { font-size: var(--t-lg); font-weight: 600; }
#e-bom ul { display: grid; gap: 10px; margin-top: 14px; font-size: var(--t-sm); color: var(--texto-2); }
#e-bom li { display: flex; gap: 10px; }
#e-bom li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--verde-botao); }
#e-bom > div > section:last-child li svg { color: var(--laranja-botao); }
#e-bom > p { margin-top: 18px; padding: 16px 20px; border-radius: 12px; background: var(--verde-fundo); font-size: var(--t-md); }

#comparacao { background: var(--fundo); }
#comparacao tbody th { white-space: normal; min-width: 150px; }
#comparacao tbody tr[aria-current] :is(th, td) { background: var(--verde-fundo); font-weight: 700; }

#siglas dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; }
#siglas dl > div { padding: 20px; border: 1px solid var(--borda); border-radius: var(--raio); }
#siglas dt { font: 700 var(--t-2xl)/1 var(--titulo); color: var(--verde-botao); }
#siglas dd { margin: 10px 0 0; font-size: var(--t-sm); color: var(--texto-2); }

@media (max-width: 1100px) {
  #siglas dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #resumo-plano { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  #resumo-plano > ul, #e-bom > div, #cobertura > div, #siglas dl { grid-template-columns: minmax(0, 1fr); }
  #comparacao [role="region"] { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #comparacao :is(table, tbody, tr, th, td) { display: block; }
  #comparacao thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #comparacao caption { display: block; padding: 0 0 4px; border: 0; }
  #comparacao tbody tr { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
  #comparacao tbody th { padding: 0 0 8px; border: 0; font-size: var(--t-md); }
  #comparacao td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--borda); white-space: normal; }
  #comparacao td::before { content: attr(data-label); color: var(--texto-2); font-weight: 400; }
  #comparacao td:last-child { border-bottom: 0; }
  #comparacao tbody tr[aria-current] { border-color: var(--verde-botao); }
  #comparacao tbody tr :is(th, td) { background: none !important; }
}

/* ---------- página: hub de planos (/planos) ---------- */
/* cards: mesmo visual do resumo da tabela (seletores compartilhados acima) */
#lista-planos li > ul { display: grid; gap: 6px; margin-top: 14px; font: 500 var(--t-xs)/1.4 var(--titulo); }
#lista-planos li > ul li { display: flex; align-items: flex-start; gap: 8px; }
#lista-planos li > ul svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: rgb(255 255 255 / 0.2); }
#lista-planos > p:last-child { max-width: 820px; margin-top: 24px; font-size: var(--t-sm); color: var(--texto-2); }

#perfis > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
#perfis > ul > li { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--borda); border-top: 4px solid var(--verde); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); }
#perfis > ul > li:nth-child(2) { border-top-color: var(--laranja); }
#perfis > ul > li:nth-child(3) { border-top-color: var(--grafite); }
#perfis h3 { font-size: var(--t-lg); font-weight: 600; }
#perfis li > p:first-of-type { flex: 1; margin-top: 10px; font-size: var(--t-sm); color: var(--texto-2); }
#perfis li > p:last-child { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); font: 500 var(--t-sm) var(--titulo); }
#perfis li > p:last-child a { font-weight: 600; }

#comparacao > p:last-child { margin-top: 18px; }
#comparacao > p:last-child a { display: inline-flex; align-items: center; gap: 6px; color: var(--verde-botao); font-weight: 600; text-decoration: none; }
#comparacao > p:last-child a:hover { text-decoration: underline; }
#comparacao > p:last-child a svg { width: 16px; height: 16px; }
#comparacao tbody th a { color: inherit; }
#comparacao td { white-space: normal; }

#beneficios > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
#beneficios > ul > li { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
#beneficios > ul svg { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--verde-fundo); color: var(--verde-botao); }
#beneficios h3 { font-size: var(--t-md); font-weight: 600; }
#beneficios li p { margin-top: 4px; font-size: var(--t-sm); color: var(--texto-2); }

#quem-pode { background: var(--fundo); }
#quem-pode dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 24px 0 0; }
#quem-pode dl > div { padding: 20px; border: 1px solid var(--borda); border-top: 4px solid var(--verde); border-radius: var(--raio); background: var(--branco); }
#quem-pode dt { font: 600 var(--t-md) var(--titulo); }
#quem-pode dd { margin: 8px 0 0; font-size: var(--t-sm); color: var(--texto-2); }
#quem-pode > p:last-child { margin-top: 18px; }
#quem-pode > p:last-child a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
#quem-pode > p:last-child a:hover { text-decoration: underline; }
#quem-pode > p:last-child a svg { width: 16px; height: 16px; }

#cidades [role="region"] { max-width: 860px; }
#cidades abbr { text-decoration: none; }
#cidades tbody th { text-align: left; font-weight: 600; }
#cidades td svg { width: 20px; height: 20px; color: var(--verde-botao); vertical-align: middle; }
#cidades td > span[aria-hidden] { color: #aab3bc; }
#cidades td > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1100px) {
  #beneficios > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* comparação dos 5 planos (11 colunas): vira cards abaixo de 1100 px, sem rolagem */
  #comparacao [data-largo] { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #comparacao [data-largo] :is(table, tbody, tr, th, td) { display: block; }
  #comparacao [data-largo] tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  #comparacao [data-largo] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #comparacao [data-largo] caption { display: block; padding: 0 0 4px; border: 0; }
  #comparacao [data-largo] tbody tr { padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
  #comparacao [data-largo] tbody th { padding: 0 0 8px; border: 0; font-size: var(--t-md); text-align: left; }
  #comparacao [data-largo] td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--borda); text-align: right; }
  #comparacao [data-largo] td::before { content: attr(data-label); color: var(--texto-2); font-weight: 400; text-align: left; }
  #comparacao [data-largo] td:last-child { border-bottom: 0; }
}
@media (max-width: 900px) {
  #perfis > ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  #beneficios > ul { grid-template-columns: minmax(0, 1fr); }
  #cidades :is(th, td) { padding: 10px 4px; }
  #cidades thead th { white-space: normal; font-size: var(--t-xs); }
  #cidades tbody th { white-space: normal; }
}

/* ---------- página: unidade (/unidades/<slug>) ---------- */
/* cards dos planos: mesmo componente do hub (#lista-planos), 4 planos e cor fixa por plano */
#lista-planos > ul > li[data-plano="klini-ambulatorial"] { background: linear-gradient(160deg, #6aa8ad 0%, #4c9994 100%); }
#lista-planos > ul > li[data-plano="klini-200"] { background: linear-gradient(160deg, var(--verde) 0%, var(--verde-escuro) 100%); }
#lista-planos > ul > li[data-plano="klini-400"] { background: linear-gradient(160deg, #3a4047 0%, var(--grafite-2) 100%); }
#lista-planos > ul > li[data-plano="klini-600"] { background: linear-gradient(160deg, #cd7925 0%, #9a5313 100%); }
@media (min-width: 1101px) { #lista-planos > ul:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { #lista-planos > ul:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#lista-planos > p:last-child a { display: inline-flex; align-items: center; gap: 6px; color: var(--verde-botao); font-weight: 600; text-decoration: none; }
#lista-planos > p:last-child a:hover { text-decoration: underline; }
#lista-planos > p:last-child a svg { width: 16px; height: 16px; }

#endereco > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
#endereco > div > section { padding: 24px; border: 1px solid var(--borda); border-top: 4px solid var(--verde); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); }
#endereco > div > section + section { border-top-color: var(--laranja); }
#endereco h3 { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); font-weight: 600; }
#endereco h3 + * { margin: 6px 0 0 32px; color: var(--texto-2); font-size: var(--t-md); }
#endereco address + h3 { margin-top: 18px; }
#endereco h3 svg { width: 22px; height: 22px; color: var(--verde-botao); }
#endereco section > p:last-child { margin: 18px 0 0; }
#endereco section > p:last-child a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
#endereco section > p:last-child a:hover { text-decoration: underline; }
#endereco section > p:last-child a svg { width: 16px; height: 16px; }
#endereco ul { display: grid; gap: 12px; margin-left: 32px; }
#endereco li strong { display: block; font: 600 var(--t-md) var(--titulo); color: var(--texto); }
#endereco li small { font-size: var(--t-sm); color: var(--texto-2); }

#perto, #outras-unidades { background: var(--fundo); }
:is(#perto, #outras-unidades) > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 24px; }
:is(#perto, #outras-unidades) li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
:is(#perto, #outras-unidades) li svg { width: 36px; height: 36px; flex: none; padding: 8px; border-radius: 10px; background: var(--verde-fundo); color: var(--verde-botao); }
:is(#perto, #outras-unidades) li strong { display: block; font: 600 var(--t-sm) var(--titulo); }
:is(#perto, #outras-unidades) li small { font-size: var(--t-xs); color: var(--texto-2); }
#outras-unidades { background: var(--branco); }

#copart-unidade dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; }
#copart-unidade dl > div { padding: 20px; border: 1px solid var(--borda); border-top: 4px solid var(--verde); border-radius: var(--raio); }
#copart-unidade dt { font: 600 var(--t-md) var(--titulo); }
#copart-unidade dd { margin: 8px 0 0; font-size: var(--t-sm); color: var(--texto-2); }

@media (max-width: 900px) {
  #endereco > div, #copart-unidade dl { grid-template-columns: minmax(0, 1fr); }
}
/* fim: unidade */

/* ---------- página: rede credenciada ---------- */
#rc-resumo, #rc-laboratorios, #rc-buscados { background: var(--fundo); }
#rc-resumo > ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
#rc-resumo > ul > li { display: flex; flex-direction: column; padding: 22px 20px; border: 1px solid var(--borda); border-radius: 20px; background: var(--branco); box-shadow: var(--sombra); }
#rc-resumo li > picture { display: grid; place-items: center; align-self: flex-start; width: 72px; height: 62px; border-radius: 12px; background: linear-gradient(160deg, var(--verde) 0%, var(--verde-escuro) 100%); }
#rc-resumo li > picture img { width: 54px; height: auto; }
#rc-resumo h3 { margin-top: 14px; font-size: var(--t-lg); font-weight: 600; }
#rc-resumo dl { flex: 1; display: grid; gap: 6px; margin: 12px 0 0; font-size: var(--t-sm); }
#rc-resumo dl > div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--borda); }
#rc-resumo dt { color: var(--texto-2); }
#rc-resumo dd { margin: 0; font: 700 var(--t-md) var(--titulo); color: var(--verde-escuro); }
#rc-resumo li > a { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--verde-botao); font: 600 var(--t-sm) var(--titulo); text-decoration: none; }
#rc-resumo li > a:hover { text-decoration: underline; }
#rc-resumo li > a svg { width: 16px; height: 16px; }

#rc-hospitais > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
#rc-hospitais figure { position: relative; overflow: hidden; border-radius: var(--raio); }
#rc-hospitais figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
#rc-hospitais figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(31 35 39 / 0.75); color: var(--branco); font: 500 var(--t-xs)/1.3 var(--titulo); }
:is(#rc-hospitais, #rc-laboratorios) > p:last-child { margin-top: 14px; color: var(--texto-2); }

[data-filtro] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
[data-filtro][hidden] { display: none; }
[data-filtro] > span { margin-right: 4px; font: 600 var(--t-sm) var(--titulo); }
[data-filtro] button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--borda); border-radius: 999px; background: var(--branco); color: var(--texto); font: 600 var(--t-sm) var(--titulo); cursor: pointer; }
[data-filtro] button:hover { border-color: var(--verde-botao); color: var(--verde-botao); }
[data-filtro] button[aria-pressed="true"] { border-color: var(--verde-botao); background: var(--verde-botao); color: var(--branco); }
[data-filtro] > p { flex: 1 1 100%; min-height: 1.5em; color: var(--texto-2); font-size: var(--t-sm); }

:is(#rc-tabela-hospitais, #rc-tabela-labs) tbody th[scope="row"] { text-align: left; font-weight: 600; white-space: normal; }
:is(#rc-tabela-hospitais, #rc-tabela-labs) tbody th small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--texto-2); }
:is(#rc-tabela-hospitais, #rc-tabela-labs) thead th:first-child { text-align: left; }
:is(#rc-tabela-hospitais, #rc-tabela-labs) abbr { text-decoration: none; }
#rc-tabela-hospitais tbody th[scope="colgroup"] { background: var(--verde-fundo); color: var(--verde-escuro); text-align: left; font: 600 var(--t-xs) var(--titulo); text-transform: uppercase; letter-spacing: .04em; }
:is(#rc-tabela-hospitais, #rc-tabela-labs) td { position: relative; width: 12%; }
:is(#rc-tabela-hospitais, #rc-tabela-labs) td svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--verde-botao); color: var(--branco); vertical-align: middle; }
:is(#rc-tabela-hospitais, #rc-tabela-labs) td > span[aria-hidden] { color: #b8c0c7; }
:is(#rc-tabela-hospitais, #rc-tabela-labs) td > span:last-child { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#rc-centros > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 24px; }
#rc-centros li { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
#rc-centros li svg { width: 20px; height: 20px; margin-top: 2px; color: var(--verde-botao); }
#rc-centros li strong { display: block; font: 600 var(--t-sm) var(--titulo); }
#rc-centros li small { font-size: var(--t-xs); color: var(--texto-2); }

#rc-buscados dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 24px 0 0; }
#rc-buscados dl > div { padding: 20px; border: 1px solid var(--borda); border-top: 4px solid var(--verde); border-radius: var(--raio); background: var(--branco); }
#rc-buscados dl > div[data-fora] { border-top-color: var(--laranja); }
#rc-buscados dt { font: 600 var(--t-md) var(--titulo); }
#rc-buscados dt small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--texto-2); }
#rc-buscados dd { display: flex; gap: 8px; margin: 10px 0 0; font-size: var(--t-sm); color: var(--texto-2); }
#rc-buscados dd svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--verde-botao); }

#rc-consultar > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
#rc-consultar > ul > li { display: flex; gap: 14px; padding: 22px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); }
#rc-consultar > ul svg { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--verde-fundo); color: var(--verde-botao); }
#rc-consultar h3 { font-size: var(--t-md); font-weight: 600; }
#rc-consultar li p { margin-top: 6px; font-size: var(--t-sm); color: var(--texto-2); }
#rc-consultar li p a { font-weight: 600; }

@media (max-width: 1100px) {
  #rc-resumo > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #rc-consultar > ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #rc-resumo > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rc-hospitais > ul { grid-template-columns: minmax(0, 1fr); }
  /* matriz vira lista: nome do local + chips dos planos que atendem */
  :is(#rc-tabela-hospitais, #rc-tabela-labs) { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) :is(table, tbody, tr, th, td, caption) { display: block; }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) caption { padding: 0 0 4px; border: 0; }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 4px; border-bottom: 1px solid var(--borda); }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) tbody th[scope="row"] { flex: 1 1 100%; padding: 0; border: 0; font-size: var(--t-md); }
  #rc-tabela-hospitais tbody tr:has(th[scope="colgroup"]) { padding: 0; border: 0; }
  #rc-tabela-hospitais tbody th[scope="colgroup"] { flex: 1 1 100%; margin: 18px 0 0; padding: 8px 12px; border: 0; border-radius: 8px; }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) td { width: auto; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--verde-fundo); color: var(--verde-escuro); font: 600 var(--t-xs) var(--titulo); }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) td::before { content: attr(data-label); }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) td > * { display: none; }
  :is(#rc-tabela-hospitais, #rc-tabela-labs) td[data-vazio] { display: none; }
}
@media (max-width: 480px) {
  #rc-resumo > ul { grid-template-columns: minmax(0, 1fr); }
}
/* fim: rede credenciada */

/* ---------- página: artigo (/blog/<slug>) e blog (/blog) ---------- */
#artigo { max-width: calc(760px + 2 * max(20px, calc((100% - var(--largura)) / 2))); padding-top: 56px; padding-bottom: 72px; }
#artigo { padding-left: max(20px, calc((100% - var(--largura)) / 2)); padding-right: max(20px, calc((100% - var(--largura)) / 2)); }
#artigo > * + * { margin-top: 18px; }
#artigo p, #artigo li { color: var(--texto); font-size: 16px; line-height: 1.8; }
#artigo h2 { margin-top: 48px; font-size: var(--t-h2-longo); font-weight: 700; letter-spacing: -0.01em; }
#artigo h3 { margin-top: 32px; font-size: var(--t-xl); font-weight: 600; }
#artigo h2 + *, #artigo h3 + * { margin-top: 14px; }
#artigo ul, #artigo ol { display: grid; gap: 8px; padding-left: 22px; }
#artigo ul { list-style: disc; }
#artigo ol { list-style: decimal; }
#artigo li::marker { color: var(--verde-botao); font-weight: 600; }
#artigo a { color: var(--verde-botao); font-weight: 600; text-underline-offset: 3px; }
#artigo a:hover { color: var(--verde-escuro); }
#artigo strong { font-weight: 600; }
#artigo [role="region"] { margin-top: 22px; }
#artigo table { font-size: var(--t-sm); }
#artigo :is(th, td) { white-space: normal; text-align: left; vertical-align: top; }
#artigo td:not(:first-child) { white-space: nowrap; }
#artigo tbody tr:nth-child(even) :is(th, td) { background: var(--fundo); }

#leia-tambem { padding: 88px max(20px, calc((100% - var(--largura)) / 2)); background: var(--fundo); }
#leia-tambem > h2 { font-size: var(--t-h2-longo); font-weight: 700; letter-spacing: -0.01em; }
#leia-tambem > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 28px; }
#leia-tambem li { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--borda); border-top: 4px solid var(--verde); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); }
#leia-tambem li:first-child { border-top-color: var(--laranja); }
#leia-tambem li > p:first-child { color: var(--verde-botao); font: 600 var(--t-xs) var(--titulo); text-transform: uppercase; letter-spacing: .04em; }
#leia-tambem h3 { margin-top: 10px; font-size: var(--t-lg); font-weight: 600; line-height: 1.35; }
#leia-tambem h3 a { color: var(--texto); text-decoration: none; }
#leia-tambem h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); }
#leia-tambem h3 a:focus-visible { outline: none; }
#leia-tambem li:has(a:focus-visible) { outline: 3px solid var(--laranja); outline-offset: 2px; }
#leia-tambem li:hover h3 a { color: var(--verde-botao); }
#leia-tambem li > p:nth-of-type(2) { flex: 1; margin-top: 10px; font-size: var(--t-sm); color: var(--texto-2); }
#leia-tambem li > p:last-child { display: flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--verde-botao); font: 600 var(--t-sm) var(--titulo); }
#leia-tambem li > p:last-child svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  #artigo { padding-top: 40px; }
  #leia-tambem { padding-top: 64px; padding-bottom: 64px; }
  #artigo td:not(:first-child) { white-space: normal; }
  #artigo p, #artigo li { font-size: var(--t-md); }
  /* tabelas do texto viram cards no celular (sem rolagem) */
  #artigo [role="region"] { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #artigo :is(table, tbody, tr, td) { display: block; }
  #artigo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #artigo tbody tr { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
  #artigo tbody tr :is(th, td) { background: none !important; }
  #artigo td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--borda); text-align: right; }
  #artigo td:first-child { display: block; padding-top: 0; font-weight: 600; text-align: left; }
  #artigo td:not(:first-child)::before { content: attr(data-label); color: var(--texto-2); text-align: left; }
  #artigo td:last-child { border-bottom: 0; }
}
/* fim: artigo */

/* ---------- página: cidade (/plano-de-saude-klini-<cidade>) ---------- */
/* cards dos planos vendidos: 2 ou 3 colunas conforme a cidade */
@media (min-width: 1101px) {
  #lista-planos > ul:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #lista-planos > ul:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  #lista-planos > ul:has(> li:nth-child(3):last-child), #lista-planos > ul:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#lista-planos > aside { margin-top: 24px; padding: 16px 20px; border-left: 4px solid var(--laranja); border-radius: 12px; background: var(--laranja-fundo); font-size: var(--t-sm); color: var(--texto); }
#lista-planos > aside p { max-width: 900px; }

#rede-cidade { background: var(--fundo); }
#rede-cidade > h3 { margin-top: 28px; font-size: var(--t-lg); font-weight: 600; }
#rede-cidade > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
#rede-cidade > h2 + p + ul { margin-top: 24px; }
#rede-cidade li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
#rede-cidade li svg { width: 36px; height: 36px; flex: none; padding: 8px; border-radius: 10px; background: var(--verde-fundo); color: var(--verde-botao); }
#rede-cidade li strong { display: block; font: 600 var(--t-sm) var(--titulo); }
#rede-cidade li small { font-size: var(--t-xs); color: var(--texto-2); }
#rede-cidade > h3 + p { margin-top: 10px; font-size: var(--t-sm); color: var(--texto-2); }
#rede-cidade > p:last-child { margin-top: 20px; }
#rede-cidade > p:last-child a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
#rede-cidade > p:last-child a:hover { text-decoration: underline; }
#rede-cidade > p:last-child a svg { width: 16px; height: 16px; }

/* sem centro médico na cidade: lista das unidades Klini */
#endereco > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; }
#endereco > ul > li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
#endereco > ul > li svg { width: 22px; height: 22px; flex: none; color: var(--verde-botao); }
#endereco > ul > li strong { display: block; font: 600 var(--t-sm) var(--titulo); }
#endereco > ul > li small { font-size: var(--t-xs); color: var(--texto-2); }
#endereco > div > section > p { margin: 6px 0 0; }
#endereco > div > section > p + p { margin-top: 14px; }
@media (max-width: 1100px) { #copart-unidade dl:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { #copart-unidade dl:has(> div:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }
/* fim: cidade */

/* ---------- botão flutuante ---------- */
body > a[href="#cotacao"] { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 12px; background: var(--verde-botao); color: var(--branco); font: 600 var(--t-md) var(--titulo); text-decoration: none; box-shadow: 0 8px 24px rgb(16 24 40 / 0.22); }
body > a[href="#cotacao"]:hover { background: var(--verde-escuro); }
body > a[href="#cotacao"] svg { width: 22px; height: 22px; }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  #atalhos > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #canais > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  main > section { padding-top: 64px; padding-bottom: 64px; }
  #planos, #app, #unidades, #cotacao { grid-template-columns: minmax(0, 1fr); }
  #planos { gap: 28px; padding-top: 8px; }
  #unidades { gap: 36px; }
  #app > figure { display: none; }
      }
@media (max-width: 640px) {
  body > header > aside p:first-child { display: none; }
  body > header > aside { justify-content: center; }
  body > header > div { min-height: 66px; }
  body > header > div > a:first-child b { font-size: var(--t-2xl); }
  body > header > div > a:last-child { padding: 8px 16px; font-size: var(--t-xs); }
  #atalhos > ul { grid-template-columns: minmax(0, 1fr); }
  #atalhos li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 20px; text-align: left; }
  #atalhos li > svg { grid-row: span 3; width: 52px; height: 52px; padding: 15px; }
  #atalhos h3 { margin-top: 0; }
  #atalhos li > p { margin-top: 4px; }
  #atalhos li > a { justify-self: start; margin-top: 12px; min-height: 40px; padding: 8px 20px; font-size: var(--t-sm); }
  #planos [data-trilho] > li { flex-basis: 86%; min-height: 360px; padding: 26px; }
  body > a[href="#cotacao"] { right: 12px; bottom: 12px; padding: 10px 16px; font-size: var(--t-sm); }
  #canais > ul { grid-template-columns: minmax(0, 1fr); }
  #canais li { padding: 24px; }
  #cotacao form { padding: 24px; }
  footer { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}