/* ==========================================================================
   Bradesco Saúde MEI - folha de estilo do site público
   Sem framework: o HTML é só semântico e este arquivo o estiliza pela
   estrutura (landmarks, seções com id, listas). Valores copiados do layout
   anterior (Tailwind) para manter o mesmo visual.
   ========================================================================== */

/* ---------- Fontes (Poppins, só a faixa latina) ---------- */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Arial ajustada às métricas da Poppins: o texto não "pula" quando a fonte chega. */
@font-face { font-family: "Poppins Fallback"; src: local(Arial); ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%; }

/* ---------- Cores e medidas ---------- */
:root {
  --primaria: #a30825;
  --primaria-escura: #770000;
  --secundaria: #4e0101;
  --secundaria-escura: #350000;
  --cinza: #4d4d4d;
  --fundo: #fff;
  --superficie: #f7f7f7;
  --texto: #222;
  --texto-suave: #5c5c5c;
  --borda: #e5e5e5;
  --raio: .375rem;
  --raio-card: .5rem;
  --raio-foto: .625rem;
  --margem: 1rem;          /* respiro lateral do conteúdo */
  --largura: 72rem;        /* largura máxima do conteúdo (com o respiro) */
  --transicao: .15s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 40rem) { :root { --margem: 1.5rem; } }

/* ---------- Base ---------- */
/* Pilhas de fonte iguais às do layout anterior (sem genérica no fim): um caractere
   que a Poppins não tem (ex. hífen inseparável, ≥) cai na fonte padrão do navegador, como antes. */
*, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html {
  line-height: 1.5;
  font-family: Poppins, "Poppins Fallback";
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  tab-size: 4;
}
body { display: flex; flex-direction: column; min-height: 100vh; background: var(--fundo); color: var(--texto); }
main { flex: 1; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
picture { display: contents; }
/* <source> só informa arquivos ao <picture>; com o picture em display: contents
   ele viraria item de flex/grid (ocupando um vão), então fica sempre oculto. */
source { display: none; }
button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background: transparent; border-radius: 0; }
::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
textarea { resize: vertical; }
small { font-size: 80%; }
summary { display: list-item; }
[hidden] { display: none !important; }

/* Conteúdo centralizado sem div de "container": o respiro lateral da
   própria seção deixa o conteúdo em --largura, e o fundo segue de ponta a ponta. */
body > header, main > section {
  padding-inline: calc(max(0px, (100% - var(--largura)) / 2) + var(--margem));
}

/* Botões (links de ação) */
#destaque > a, #consultoria > a, #empresariais > a, body > header > a[href="/solicitar-cotacao"], #menu-movel > a {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio); padding: .75rem 1.5rem;
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700;
  text-transform: uppercase; letter-spacing: .025em; color: #fff;
  background: var(--primaria-escura);
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
@media (hover: hover) {
  #destaque > a:hover, #consultoria > a:hover, #empresariais > a:hover { background: var(--primaria); }
}

/* ---------- Cabeçalho ---------- */
body > header {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1.5rem;
  border-bottom: 1px solid var(--borda); background: var(--fundo);
}
/* Logo: caixa fixa de 160x40 (192x40 a partir de 640px); a linha tem 80px. */
body > header > a:first-of-type { position: relative; display: block; flex-shrink: 0; width: 10rem; height: 2.5rem; margin-block: 1.25rem; }
body > header > a:first-of-type img { width: 100%; height: 100%; object-fit: contain; object-position: left; }
@media (min-width: 40rem) { body > header > a:first-of-type { width: 12rem; } }

body > header > nav:not([id]) { display: none; }
body > header > nav:not([id]) > ul { display: flex; align-items: center; gap: 2rem; }
body > header > nav:not([id]) li { display: flex; }
body > header > nav:not([id]) a {
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700;
  text-transform: uppercase; letter-spacing: .025em; color: var(--texto);
  transition: color var(--transicao);
}
@media (hover: hover) { body > header > nav:not([id]) a:hover { color: var(--primaria); } }

body > header > a[href="/solicitar-cotacao"] { display: none; flex-shrink: 0; background: var(--primaria); }
@media (hover: hover) { body > header > a[href="/solicitar-cotacao"]:hover { background: var(--primaria-escura); } }

body > header > button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--raio); color: var(--texto); }
body > header > button svg { width: 1.5rem; height: 1.5rem; }
body > header > button[aria-expanded="false"] svg + svg,
body > header > button[aria-expanded="true"] svg:first-child { display: none; }

/* Menu do celular: linha inteira abaixo, de ponta a ponta. */
#menu-movel {
  flex-basis: calc(100% + 2 * var(--margem)); display: flex; flex-direction: column; gap: .25rem;
  margin-inline: calc(-1 * var(--margem)); /* só existe abaixo de 1024px, onde o recuo é a margem */
  border-top: 1px solid var(--borda); padding: .75rem 1rem;
}
#menu-movel > ul { display: flex; flex-direction: column; gap: .25rem; }
#menu-movel li { display: flex; flex-direction: column; }
#menu-movel li a {
  border-radius: var(--raio); padding: .625rem .5rem;
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700;
  text-transform: uppercase; letter-spacing: .025em; color: var(--texto);
}
@media (hover: hover) { #menu-movel li a:hover { background: var(--superficie); } }
#menu-movel > a { margin-top: .5rem; background: var(--primaria); transition: none; }

@media (min-width: 64rem) {
  body > header { flex-wrap: wrap; } /* Plus: a faixa de atalhos ocupa a primeira linha */
  body > header > nav:not([id]) { display: block; }
  body > header > a[href="/solicitar-cotacao"] { display: inline-flex; }
  body > header > button, #menu-movel { display: none; }
}

/* ---------- Menu do Bradesco Saúde Plus (faixa de atalhos + menu grande) ----------
   Aprovado pelo Guigo em 29/09/2026 no lugar do menu simples do MEI. */
:root { --rosa: #fdf1f3; }
/* Faixa de atalhos: fundo de ponta a ponta sem sair do respiro do cabeçalho. */
#atalhos {
  flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .375rem; font-size: .75rem; color: #fff; background: var(--secundaria-escura);
  box-shadow: 0 0 0 100vmax var(--secundaria-escura); clip-path: inset(0 -100vmax);
}
#atalhos p { opacity: .85; }
#atalhos ul { display: none; gap: 1.5rem; }
#atalhos a { font-weight: 500; opacity: .9; }
@media (hover: hover) { #atalhos a:hover { opacity: 1; text-decoration-line: underline; text-underline-offset: 3px; } }
@media (min-width: 48rem) { #atalhos ul { display: flex; } }
body > header > a:first-of-type { margin-right: auto; }

#menu { display: none; }
#menu > ul { display: flex; align-items: center; gap: .25rem; }
#menu summary {
  display: flex; align-items: center; gap: .25rem; list-style: none; cursor: pointer; border-radius: var(--raio); padding: .5rem .75rem;
  font-size: .875rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: var(--texto);
  transition: color var(--transicao), background-color var(--transicao);
}
#menu summary::-webkit-details-marker, #menu-movel summary::-webkit-details-marker { display: none; }
#menu summary svg, #menu-movel summary svg { width: 1rem; height: 1rem; transition: transform var(--transicao); }
#menu details[open] summary { color: var(--primaria); background: var(--rosa); }
#menu details[open] summary svg, #menu-movel details[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) { #menu summary:hover { color: var(--primaria); } }
/* Painel: de ponta a ponta, logo abaixo do cabeçalho, grupos em colunas. */
#menu details > div {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem;
  padding: 2rem calc(max(0px, (100% - var(--largura)) / 2) + var(--margem));
  background: var(--fundo); border-top: 1px solid var(--borda); border-bottom: 3px solid var(--primaria);
  box-shadow: 0 16px 32px rgb(0 0 0 / .08);
}
#menu section > p { margin-bottom: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primaria); }
#menu section li a { display: block; padding: .375rem 0; font-size: .9375rem; color: var(--texto); border-bottom: 1px solid var(--borda); }
@media (hover: hover) { #menu section li a:hover { color: var(--primaria); } }

/* Menu do celular com os mesmos grupos */
#menu-movel details { display: flex; flex-direction: column; }
#menu-movel summary {
  display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; border-radius: var(--raio); padding: .625rem .5rem;
  font-size: .875rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: var(--texto);
}
#menu-movel details ul { padding: .25rem 0 .5rem .75rem; }
#menu-movel details li a { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--texto-suave); }

@media (min-width: 64rem) {
  #menu { display: block; }
}

/* ---------- Seções da página inicial ---------- */
main > section > header { text-align: center; }
main > section > header > h2 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 800; }

/* Destaque (topo) */
#destaque {
  position: relative; overflow: hidden; background: var(--secundaria);
  padding-block: 5rem;
}
#destaque img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 18%; opacity: .4; }
#destaque::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(to right in oklab, var(--secundaria) 0%, color-mix(in oklab, var(--secundaria) 95%, transparent) 50%, transparent 100%);
}
#destaque > h1, #destaque > p, #destaque > a { position: relative; z-index: 1; }
#destaque > h1, #destaque > p { max-width: 36rem; }
#destaque > h1 { font-size: 1.875rem; line-height: 1.25; font-weight: 800; color: #fff; }
#destaque > p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.75rem; color: rgb(255 255 255 / .9); }
#destaque > a { margin-top: 2rem; }
@media (min-width: 40rem) {
  #destaque { padding-block: 7rem; }
  #destaque > h1 { font-size: 3rem; }
}
/* Topo com banner oficial da operadora (b.banner): a imagem aparece inteira, sem camada escura.
   Abaixo de 80rem, o banner de celular (foto em oval no alto) fica em bloco e o título sobe para o
   vermelho logo abaixo do oval. A partir de 80rem, o banner largo vira fundo, com o texto sobre a curva. */
#destaque.oficial { background: #df0026; padding-top: 0; }
#destaque.oficial::after { display: none; }
#destaque.oficial picture { display: block; margin-inline: calc(50% - 50vw); }
#destaque.oficial img { position: static; height: auto; opacity: 1; aspect-ratio: 750 / 360; object-fit: cover; }
#destaque.oficial > h1 { margin-top: -22vw; max-width: 34rem; }
#destaque.oficial > a { background: #fff; color: #df0026; }
#destaque.oficial > a:hover { background: #fff; color: var(--secundaria); }
@media (min-width: 40rem) { #destaque.oficial > h1 { margin-top: -20vw; } }
@media (min-width: 80rem) {
  #destaque.oficial { padding-block: 3.5rem; }
  #destaque.oficial picture { margin: 0; }
  #destaque.oficial img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 60% center; }
  #destaque.oficial > h1 { margin-top: 0; font-size: 2.5rem; }
  #destaque.oficial > p { max-width: 34rem; }
}

/* Planos */
#planos { --largura: 110rem; padding-block: 5rem; background: var(--fundo); }
@media (min-width: 40rem) { #planos { --margem: 2rem; } }
@media (min-width: 64rem) { #planos { --margem: 4rem; } }
#planos > header > p { max-width: 42rem; margin: .75rem auto 0; color: var(--texto-suave); }
#planos > ul { margin-top: 3rem; display: grid; gap: 1.5rem; }
#planos > ul > li { display: grid; }
#planos article {
  display: flex; flex-direction: column;
  min-height: 28rem; border-radius: var(--raio-card); background: var(--secundaria);
  padding: 3rem 2rem; color: #fff;
}
#planos article > h3 { font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 700; }
#planos article > p { flex: 1; margin-top: 1.5rem; line-height: 1.75rem; color: rgb(255 255 255 / .9); }
/* Ações do card: dois botões lado a lado. */
#planos article > footer { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
#planos article > footer > a {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--raio); padding: .75rem 1rem;
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700;
  text-transform: uppercase; letter-spacing: .025em; color: #fff;
  transition: background-color var(--transicao), color var(--transicao);
}
#planos article > footer > a:first-child { border: 2px solid #fff; }
#planos article > footer > a:last-child { background: rgb(0 0 0 / .25); }
@media (hover: hover) {
  #planos article > footer > a:first-child:hover { background: #fff; color: var(--secundaria); }
  #planos article > footer > a:last-child:hover { background: rgb(0 0 0 / .4); }
}
@media (min-width: 48rem) { #planos > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40rem) { #planos > header > h2 { font-size: 2.25rem; line-height: calc(2.5 / 2.25); } }

/* Consultoria */
#consultoria { --largura: 48rem; padding-block: 4rem; background: var(--cinza); text-align: center; }
#consultoria > h2 { font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 800; color: #fff; }
#consultoria > p { margin-top: .75rem; color: rgb(255 255 255 / .85); }
#consultoria > a { display: flex; width: fit-content; margin: 2rem auto 0; }
@media (min-width: 40rem) { #consultoria > h2 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); } }

/* Listas de itens com ícone (Por que escolher, Benefícios, Rede) */
:is(#por-que, #beneficios, #rede) li > svg { flex-shrink: 0; }
:is(#por-que, #beneficios, #rede) li > h3 { margin-top: .75rem; font-weight: 700; }
:is(#por-que, #beneficios, #rede) li > p { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; }

/* Por que escolher */
#por-que {
  display: grid; align-items: center; gap: 2.5rem;
  padding-block: 5rem; background: var(--fundo);
}
#por-que > header { grid-column: 1 / -1; max-width: 42rem; margin: 0 auto 1rem; }
#por-que > header > p { margin-top: .75rem; color: var(--texto-suave); }
#por-que > ul { display: grid; gap: 2.5rem; }
#por-que li > svg { width: 2rem; height: 2rem; color: var(--primaria); }
#por-que li > p { color: var(--texto-suave); }
#por-que > figure {
  position: relative; margin-inline: auto; width: 16rem; height: 20rem;
  overflow: hidden; border-radius: var(--raio-foto); background: var(--superficie);
}
#por-que > figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 40rem) { #por-que > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  #por-que { grid-template-columns: 1fr auto 1fr; }
  #por-que > ul { grid-template-columns: minmax(0, 1fr); }
}

/* Benefícios e Rede credenciada */
#beneficios, #rede { padding-block: 5rem; }
#beneficios { background: var(--secundaria); color: #fff; }
#rede { background: var(--fundo); }
#beneficios > header, #rede > header { max-width: 42rem; margin-inline: auto; }
#beneficios > header > p, #rede > header > p { margin-top: .75rem; }
#beneficios > header > p { color: rgb(255 255 255 / .85); }
#rede > header > p { color: var(--texto-suave); }
#beneficios > ul, #rede > ul { margin-top: 3.5rem; display: grid; column-gap: 2.5rem; }
#beneficios > ul { row-gap: 3rem; }
#rede > ul { row-gap: 2.5rem; }
#beneficios li > svg, #rede li > svg { width: 1.75rem; height: 1.75rem; }
#beneficios li > svg { color: rgb(255 255 255 / .8); }
#beneficios li > p { color: rgb(255 255 255 / .85); }
#rede li > svg { color: var(--primaria); }
#rede li > p { color: var(--texto-suave); }
@media (min-width: 40rem) { #beneficios > ul, #rede > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #beneficios > ul, #rede > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Perguntas frequentes */
#perguntas { --largura: 48rem; padding-block: 5rem; background: var(--superficie); }
#perguntas > h2 { text-align: center; font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 800; }
#perguntas > details { background: var(--fundo); padding: 1.25rem 1.5rem; }
#perguntas > details:first-of-type { margin-top: 2.5rem; border-top-left-radius: var(--raio-card); border-top-right-radius: var(--raio-card); }
#perguntas > details:last-of-type { border-bottom-left-radius: var(--raio-card); border-bottom-right-radius: var(--raio-card); }
#perguntas > details:not(:last-of-type) { border-bottom: 1px solid rgb(0 0 0 / .1); }
#perguntas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; list-style: none; font-weight: 700;
}
#perguntas summary::-webkit-details-marker { display: none; }
#perguntas summary > span { font-size: 1rem; line-height: 1.5; }
/* "+" decorativo (vira "x" ao abrir): só visual, fora do texto da página. */
#perguntas summary::after {
  content: "+"; font-size: 1.25rem; line-height: 1; color: var(--primaria);
  transition: rotate var(--transicao);
}
#perguntas details[open] summary::after { rotate: 45deg; }
#perguntas details > p:first-of-type { margin-top: .75rem; font-size: .875rem; line-height: 1.5rem; color: var(--texto-suave); }
#perguntas details a {
  display: inline-block; margin-top: .5rem;
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600;
  color: var(--primaria); text-underline-offset: 2px;
}
@media (hover: hover) { #perguntas details a:hover { text-decoration-line: underline; } }

/* Planos empresariais (chamada final) */
#empresariais {
  display: grid; justify-items: start;
  padding-block: 4rem; background: var(--cinza);
}
#empresariais > h2 { font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 800; color: #fff; }
#empresariais > p { margin-top: .5rem; max-width: 36rem; font-size: .875rem; line-height: 1.5rem; color: rgb(255 255 255 / .85); }
#empresariais > a { margin-top: 1.5rem; }
@media (min-width: 40rem) {
  #empresariais { grid-template-columns: 1fr auto; column-gap: 1.5rem; }
  #empresariais > a { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
}

/* ---------- Página inicial: dobras acrescentadas em 2026-09-27 ---------- */
/* Botões de ação das dobras novas */
#beneficios-plano a, #plano-bradesco article > a, #efetivo-plus a, #hospitais-sp > a,
#regioes > aside > a, #calcule > a, #protecao > aside > a:first-of-type {
  display: inline-flex; align-items: center; justify-content: center; width: fit-content;
  border-radius: var(--raio); padding: .75rem 1.5rem;
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700;
  text-transform: uppercase; letter-spacing: .025em; color: #fff;
  background: var(--primaria-escura); transition: background-color var(--transicao), color var(--transicao);
}
@media (hover: hover) {
  #beneficios-plano a:hover, #plano-bradesco article > a:hover, #efetivo-plus a:hover, #hospitais-sp > a:hover,
  #regioes > aside > a:hover, #calcule > a:hover, #protecao > aside > a:first-of-type:hover { background: var(--primaria); }
}
/* "Chapéu" (linha curta + texto em caixa alta) */
#ritmo > header > p:first-child, #regioes > header > p:first-child, #protecao > div > p:first-child {
  display: flex; align-items: center; gap: .75rem;
  font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primaria);
}
:is(#ritmo, #regioes) > header > p:first-child::before, #protecao > div > p:first-child::before {
  content: ""; width: 1.5rem; height: 2px; background: currentColor;
}

/* Promoção */
#promocao { padding-block: 2.5rem 1rem; background: var(--fundo); text-align: center; }
#promocao > p:first-child {
  max-width: 56rem; margin-inline: auto; border-radius: 1rem; padding: 1.5rem 1rem;
  background: linear-gradient(90deg in oklab, var(--primaria), var(--secundaria));
  font-size: 1.125rem; line-height: 1.5; color: #fff;
}
#promocao strong { display: block; font-size: 1.75rem; line-height: 1.2; font-weight: 800; }
#promocao small { display: block; margin-top: .5rem; font-size: .75rem; color: var(--texto-suave); }
@media (min-width: 40rem) { #promocao > p:first-child { font-size: 1.5rem; } #promocao strong { font-size: 2.5rem; } }

/* Formas de contratar */
#linhas { padding-block: 5rem; background: var(--secundaria); color: #fff; }
#linhas > header { max-width: 42rem; margin-inline: auto; }
#linhas > header > p { margin-top: .75rem; color: rgb(255 255 255 / .85); }
#linhas > ul { margin-top: 3rem; display: grid; gap: 1.5rem; }
#linhas > ul > li { display: grid; }
#linhas article { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--raio-card); background: var(--fundo); color: var(--texto); text-align: center; }
#linhas article img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
#linhas article > h3 { margin: 1.5rem 1.5rem 0; font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
#linhas article > p { flex: 1; margin: .75rem 1.5rem 0; font-size: .9375rem; line-height: 1.6; color: var(--texto-suave); }
#linhas article > footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 1.5rem; }
#linhas article > footer > a {
  display: flex; align-items: center; justify-content: center; border-radius: var(--raio); padding: .625rem .75rem;
  font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em;
  border: 2px solid var(--primaria); transition: background-color var(--transicao), color var(--transicao);
}
#linhas article > footer > a:first-child { background: var(--primaria); color: #fff; }
#linhas article > footer > a:last-child { color: var(--primaria); }
@media (hover: hover) {
  #linhas article > footer > a:first-child:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); }
  #linhas article > footer > a:last-child:hover { background: var(--primaria); color: #fff; }
}
@media (min-width: 48rem) { #linhas > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Benefícios de ter um plano de saúde */
#beneficios-plano { display: grid; gap: 2.5rem; align-items: center; padding-block: 5rem; background: var(--fundo); }
#beneficios-plano h2 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 800; }
#beneficios-plano p { margin-top: 1rem; line-height: 1.75rem; color: var(--texto-suave); }
#beneficios-plano a { margin-top: 2rem; }
#beneficios-plano > figure { overflow: hidden; border-radius: var(--raio-foto); background: var(--superficie); }
#beneficios-plano > figure img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 64rem) { #beneficios-plano { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Plano de saúde Bradesco (diferenciais) */
#plano-bradesco { padding-block: 5rem; background: var(--superficie); }
#plano-bradesco > header { max-width: 48rem; margin-inline: auto; }
#plano-bradesco > header > p { margin-top: .75rem; color: var(--texto-suave); }
#plano-bradesco > ul {
  margin-top: 3rem; display: grid; gap: 1px; overflow: hidden;
  border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--borda);
}
#plano-bradesco > ul > li { padding: 1.5rem; background: var(--fundo); }
#plano-bradesco li > svg { width: 1.75rem; height: 1.75rem; color: var(--primaria); }
#plano-bradesco li > h3 { margin-top: .75rem; font-weight: 700; }
#plano-bradesco li > p { margin-top: .375rem; font-size: .875rem; line-height: 1.5rem; color: var(--texto-suave); }
#plano-bradesco > article {
  margin-top: 2.5rem; border-left: 4px solid var(--primaria); border-radius: var(--raio-card);
  padding: 1.75rem 1.5rem; background: var(--fundo);
}
#plano-bradesco > article > h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: var(--primaria); }
#plano-bradesco > article > p { margin-top: .75rem; line-height: 1.75rem; color: var(--texto-suave); }
#plano-bradesco > article > a { margin-top: 1.25rem; }
@media (min-width: 40rem) { #plano-bradesco > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #plano-bradesco > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Categorias */
#categorias { padding-block: 5rem; background: var(--fundo); }
#categorias > header { max-width: 48rem; margin-inline: auto; }
#categorias > header > p { margin-top: .75rem; color: var(--texto-suave); }
#categorias > ul { margin-top: 3rem; display: grid; gap: 1.5rem; }
#categorias > ul > li { display: grid; }
#categorias article {
  display: flex; flex-direction: column; border: 1px solid var(--borda); border-top: 4px solid var(--primaria);
  border-radius: var(--raio-card); padding: 1.75rem 1.5rem;
}
#categorias article > h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
#categorias article > p { flex: 1; margin-top: .75rem; font-size: .9375rem; line-height: 1.6; color: var(--texto-suave); }
#categorias article > ul { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
#categorias article > ul > li {
  border-radius: 999px; padding: .25rem .75rem; background: color-mix(in oklab, var(--primaria) 8%, transparent);
  font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--primaria);
}
#categorias > p { margin-top: 2rem; text-align: center; font-size: .875rem; color: var(--texto-suave); }
@media (min-width: 48rem) { #categorias > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { #categorias > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Principais hospitais em São Paulo */
#hospitais-sp { padding-block: 5rem; background: var(--superficie); text-align: center; }
#hospitais-sp > header { max-width: 48rem; margin-inline: auto; }
#hospitais-sp > header > p { margin-top: .75rem; color: var(--texto-suave); }
#hospitais-sp > ul { margin-top: 3rem; display: grid; gap: 1.5rem; }
#hospitais-sp > ul > li { border: 2px solid var(--primaria); border-radius: var(--raio-card); padding: 1.75rem 1.5rem; background: var(--fundo); }
#hospitais-sp li > h3 { font-size: 1.125rem; line-height: 1.4; font-weight: 700; color: var(--primaria); }
#hospitais-sp li > p { margin-top: .75rem; font-size: .9375rem; line-height: 1.6; color: var(--texto-suave); }
#hospitais-sp > a { margin: 2.5rem auto 0; }
@media (min-width: 48rem) { #hospitais-sp > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #hospitais-sp > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Bradesco Saúde Concierge */
#concierge { position: relative; overflow: hidden; display: grid; gap: 2.5rem; padding-block: 5rem; background: var(--secundaria-escura); color: #fff; }
#concierge > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; }
#concierge > div, #concierge > ul { position: relative; }
#concierge h2 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 800; }
#concierge h2::after { content: ""; display: block; width: 4rem; height: 3px; margin-top: 1rem; background: var(--primaria); }
#concierge p { margin-top: 1.25rem; line-height: 1.75rem; color: rgb(255 255 255 / .88); }
#concierge > ul { display: grid; gap: .875rem; align-content: center; }
#concierge > ul > li { display: flex; align-items: flex-start; gap: .75rem; line-height: 1.5; }
#concierge li > svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: #fff; border-radius: 50%; padding: .1875rem; background: var(--primaria); }
@media (min-width: 64rem) { #concierge { grid-template-columns: 3fr 2fr; gap: 4rem; } }

/* Efetivo Plus */
#efetivo-plus { display: grid; gap: 2.5rem; align-items: center; padding-block: 5rem; background: var(--fundo); }
#efetivo-plus > figure { overflow: hidden; border-radius: var(--raio-foto); background: var(--superficie); }
#efetivo-plus > figure img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
#efetivo-plus h2 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 800; }
#efetivo-plus p { margin-top: 1rem; line-height: 1.75rem; color: var(--texto-suave); }
#efetivo-plus p strong { color: var(--texto); }
#efetivo-plus ul { margin-top: 1.25rem; display: grid; gap: .625rem; }
#efetivo-plus li { position: relative; padding-left: 1.5rem; font-size: .9375rem; line-height: 1.6; color: var(--texto-suave); }
#efetivo-plus li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--primaria); }
#efetivo-plus a { margin-top: 2rem; }
@media (min-width: 64rem) { #efetivo-plus { grid-template-columns: 2fr 3fr; gap: 4rem; } }

/* Um plano que acompanha a empresa */
#ritmo { padding-block: 5rem; background: color-mix(in oklab, var(--primaria) 4%, var(--fundo)); }
#ritmo > header { display: grid; gap: 1rem; text-align: left; }
#ritmo > header > h2 { font-size: 1.875rem; line-height: 1.2; font-weight: 800; }
#ritmo > header > p:last-child { color: var(--texto-suave); line-height: 1.75rem; }
#ritmo > ul { margin-top: 3rem; display: grid; gap: 1.25rem; }
#ritmo > ul > li { border: 1px solid var(--borda); border-radius: 1rem; padding: 1.75rem 1.5rem; background: var(--fundo); }
#ritmo > ul > li:first-child { border-color: transparent; background: linear-gradient(135deg in oklab, var(--primaria), var(--secundaria)); color: #fff; }
#ritmo li > svg { width: 2.5rem; height: 2.5rem; border-radius: .625rem; padding: .5rem; color: var(--primaria); background: color-mix(in oklab, var(--primaria) 10%, transparent); }
#ritmo li:first-child > svg { background: #fff; }
#ritmo li > h3 { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; }
#ritmo li > p { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; color: var(--texto-suave); }
#ritmo li:first-child > p { color: rgb(255 255 255 / .88); }
#ritmo > aside { margin-top: 1.25rem; display: grid; gap: 1rem; align-items: center; border: 1px solid var(--borda); border-radius: 1rem; padding: 1.5rem; background: var(--fundo); }
#ritmo > aside > p { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primaria); }
#ritmo > aside > h3 { font-size: 1.125rem; line-height: 1.4; font-weight: 700; }
#ritmo > aside > ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
#ritmo > aside li { border-radius: .5rem; padding: .375rem .75rem; background: color-mix(in oklab, var(--primaria) 6%, transparent); font-size: .8125rem; font-weight: 600; }
#ritmo > aside li::before { content: "✓ "; color: #1a8d3a; }
@media (min-width: 48rem) { #ritmo > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  #ritmo > header { grid-template-columns: 1fr 1fr; column-gap: 4rem; align-items: end; }
  #ritmo > header > p:first-child { grid-column: 1 / -1; }
  #ritmo > header > h2 { font-size: 2.5rem; }
  #ritmo > aside { grid-template-columns: 1fr auto; }
  #ritmo > aside > p { grid-column: 1 / -1; }
}

/* Proteção para a empresa (oferta) */
#protecao {
  display: grid; gap: 2.5rem; align-items: center; padding-block: 5rem; color: #fff;
  background: linear-gradient(135deg in oklab, var(--secundaria), var(--primaria));
}
#protecao > div > p:first-child { color: #fff; }
#protecao h2 { margin-top: 1rem; font-size: 2rem; line-height: 1.15; font-weight: 800; }
#protecao h2 > span { display: block; color: #ffc9d3; }
#protecao > div > p:not(:first-child) { margin-top: 1.25rem; line-height: 1.75rem; color: rgb(255 255 255 / .9); }
#protecao > div > ul { margin-top: 2rem; display: grid; gap: 1rem; }
#protecao > div li { border: 1px solid rgb(255 255 255 / .2); border-radius: .75rem; padding: 1rem; background: rgb(255 255 255 / .08); font-size: .8125rem; line-height: 1.4; color: rgb(255 255 255 / .85); }
#protecao > div li > svg { display: block; width: 2rem; height: 2rem; border-radius: .5rem; padding: .375rem; margin-bottom: .75rem; color: var(--primaria); background: #fff; }
#protecao > div li > strong { display: block; margin-bottom: .25rem; font-size: .9375rem; color: #fff; }
#protecao > aside { border-radius: 1.25rem; padding: 2rem 1.5rem; background: var(--fundo); color: var(--texto); text-align: center; }
#protecao > aside > p:first-child {
  display: inline-block; border: 1px solid var(--primaria); border-radius: 999px; padding: .25rem .75rem;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primaria);
}
#protecao > aside > p:nth-child(2) { margin-top: 1rem; font-size: 1rem; color: var(--texto-suave); }
#protecao > aside > p:nth-child(2) > strong { display: block; font-size: 3.5rem; line-height: 1; font-weight: 800; color: var(--primaria); }
#protecao > aside > p:nth-child(3) { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; border-block: 1px solid var(--borda); padding-block: .875rem; font-size: .875rem; }
#protecao > aside svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; color: #1a8d3a; }
#protecao > aside > a:first-of-type { display: flex; width: 100%; margin-top: 1.5rem; background: var(--primaria); }
@media (hover: hover) { #protecao > aside > a:first-of-type:hover { background: var(--primaria-escura); } }
#protecao > aside > a + a { display: inline-block; margin-top: .875rem; font-size: .8125rem; color: var(--primaria); text-underline-offset: 3px; }
@media (hover: hover) { #protecao > aside > a + a:hover { text-decoration-line: underline; } }
#protecao > p { grid-column: 1 / -1; text-align: center; font-size: .75rem; line-height: 1.25rem; color: rgb(255 255 255 / .75); }
@media (min-width: 40rem) { #protecao > div > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } #protecao h2 { font-size: 2.75rem; } }
@media (min-width: 64rem) { #protecao { grid-template-columns: 3fr 2fr; gap: 4rem; } }

/* Encontre o Bradesco Saúde na sua região */
#regioes { padding-block: 5rem; background: var(--superficie); }
#regioes > header { display: grid; gap: 1rem; text-align: left; }
#regioes > header > h2 { font-size: 1.875rem; line-height: 1.2; font-weight: 800; }
#regioes > header > p:last-child { color: var(--texto-suave); line-height: 1.75rem; }
#regioes > nav { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; border: 1px solid var(--borda); border-radius: 1rem; padding: 1rem 1.25rem; background: var(--fundo); }
#regioes > nav > p { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
#regioes > nav > ul { display: flex; flex-wrap: wrap; gap: .5rem; }
#regioes > nav a { display: flex; align-items: center; gap: .5rem; border-radius: .5rem; padding: .375rem .75rem .375rem .375rem; background: color-mix(in oklab, var(--primaria) 6%, transparent); font-size: .875rem; }
#regioes > nav abbr { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .375rem; background: var(--primaria); color: #fff; font-size: .6875rem; font-weight: 700; text-decoration: none; }
#regioes > ul { margin-top: 1.25rem; display: grid; gap: 1.25rem; }
#regioes > ul > li { display: grid; }
#regioes article { overflow: hidden; border: 1px solid var(--borda); border-radius: 1rem; background: var(--fundo); }
#regioes article > header { display: grid; grid-template-columns: auto 1fr; column-gap: .875rem; align-items: center; padding: 1rem 1.25rem; background: linear-gradient(90deg in oklab, color-mix(in oklab, var(--primaria) 7%, var(--fundo)), var(--fundo)); border-bottom: 1px solid var(--borda); }
#regioes article > header > svg { grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: .625rem; padding: .5rem; color: #fff; background: linear-gradient(135deg in oklab, var(--primaria), var(--secundaria)); }
#regioes article h3 { font-size: 1rem; font-weight: 700; }
#regioes article > header > p { font-size: .75rem; font-weight: 600; color: var(--texto-suave); }
#regioes article > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; padding: 1rem 1.25rem 1.25rem; }
#regioes article a { display: flex; align-items: center; gap: .625rem; border-radius: .375rem; padding: .375rem .25rem; font-size: .875rem; line-height: 1.25; }
#regioes article a::after { content: "›"; margin-left: auto; color: var(--texto-suave); }
#regioes article abbr { display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border: 1px solid color-mix(in oklab, var(--primaria) 30%, transparent); border-radius: .375rem; color: var(--primaria); font-size: .625rem; font-weight: 700; text-decoration: none; }
@media (hover: hover) {
  #regioes article a:hover, #regioes > nav a:hover { color: var(--primaria); background: color-mix(in oklab, var(--primaria) 6%, transparent); }
}
#regioes > aside {
  margin-top: 1.25rem; display: grid; gap: 1rem; align-items: center; border-radius: 1rem; padding: 1.5rem;
  background: linear-gradient(90deg in oklab, var(--secundaria), var(--primaria)); color: rgb(255 255 255 / .85);
}
#regioes > aside strong { display: block; font-size: 1.125rem; color: #fff; }
#regioes > aside > a { background: var(--fundo); color: var(--primaria); }
@media (hover: hover) { #regioes > aside > a:hover { background: var(--superficie); color: var(--primaria-escura); } }
@media (min-width: 48rem) { #regioes > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } #regioes > aside { grid-template-columns: 1fr auto; } }
@media (min-width: 64rem) {
  #regioes > header { grid-template-columns: 1fr 1fr; column-gap: 4rem; align-items: end; }
  #regioes > header > p:first-child { grid-column: 1 / -1; }
  #regioes > header > h2 { font-size: 2.5rem; }
  #regioes > ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #regioes > ul > li { grid-column: span 2; }
  #regioes > ul > li:nth-child(n + 4) { grid-column: span 3; }
}

/* Calcule seu plano */
#calcule { padding-block: 4.5rem; text-align: center; color: #fff; background: linear-gradient(90deg in oklab, var(--primaria), var(--secundaria)); }
#calcule > h2 { max-width: 40rem; margin-inline: auto; font-size: 1.875rem; line-height: 1.2; font-weight: 800; text-transform: uppercase; }
#calcule > p { max-width: 36rem; margin: 1rem auto 0; font-size: 1.125rem; line-height: 1.6; color: rgb(255 255 255 / .9); }
#calcule > a { margin-top: 2rem; background: var(--fundo); color: var(--primaria); }
@media (hover: hover) { #calcule > a:hover { background: var(--superficie); color: var(--primaria-escura); } }
@media (min-width: 40rem) { #calcule > h2 { font-size: 2.5rem; } }

/* ---------- Rodapé ----------
   Modelo de referência (bradescosaudeconvenio.com.br), aprovado em 29/09/2026:
   faixa de chamada cinza, área escura com borda de cima curva e fio vermelho,
   colunas com título e links separados por fios, aviso legal centralizado. */
body > footer { margin-top: auto; background: #757575; color: #fff; }
body > footer > * { padding-inline: calc(max(0px, (100% - var(--largura)) / 2) + var(--margem)); }

#rodape-chamada { display: grid; gap: 1.5rem; justify-items: start; padding-block: 2.75rem 4rem; }
#rodape-chamada > p { max-width: 34rem; font-size: 1rem; line-height: 1.7; color: rgb(255 255 255 / .95); }
#rodape-chamada > a {
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--raio); padding: .875rem 2.25rem;
  font-size: .875rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em;
  color: #fff; background: var(--primaria); box-shadow: 4px 4px 0 rgb(0 0 0 / .25); transition: background-color var(--transicao);
}
@media (hover: hover) { #rodape-chamada > a:hover { background: var(--primaria-escura); } }
@media (min-width: 48rem) {
  #rodape-chamada { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3rem; }
}

/* Área escura: sobe sobre a faixa cinza com a borda curva e o fio vermelho. */
#rodape-links {
  display: grid; gap: 2.25rem 2.5rem; margin-top: -1.5rem; padding-block: 3.25rem 3rem;
  background: var(--cinza); border-top: 4px solid var(--primaria); border-radius: 5rem 5rem 0 0 / 3rem 3rem 0 0;
}
#rodape-links nav > p { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #fff; }
#rodape-links nav > ul { margin-top: .75rem; max-width: 15rem; }
#rodape-links li a, #rodape-links li button {
  display: block; width: 100%; padding-block: .4375rem; border-bottom: 1px solid rgb(255 255 255 / .12);
  font-size: .875rem; line-height: 1.25rem; text-align: left; color: rgb(255 255 255 / .9); transition: color var(--transicao);
}
#rodape-links li:last-child a, #rodape-links li:last-child button { border-bottom: 0; }
@media (hover: hover) { #rodape-links li a:hover, #rodape-links li button:hover { color: #fff; text-decoration-line: underline; text-underline-offset: 4px; } }
@media (min-width: 40rem) { #rodape-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  #rodape-links { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 8rem 8rem 0 0 / 4rem 4rem 0 0; }
  #rodape-planos { grid-column: 1; grid-row: 1; }
  #rodape-linhas { grid-column: 1; grid-row: 2; }
  #rodape-informacoes { grid-column: 2; grid-row: 1 / span 2; }
  #rodape-estados { grid-column: 3; grid-row: 1 / span 2; }
  #rodape-institucional { grid-column: 4; grid-row: 1 / span 2; }
}

/* Aviso legal: fio na largura do conteúdo e texto centralizado. */
body > footer > p { padding-block: 0 1.75rem; background: var(--cinza); text-align: center; }
body > footer > p > small {
  display: block; max-width: 44rem; margin-inline: auto; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .15);
  font-size: .8125rem; line-height: 1.35rem; color: rgb(255 255 255 / .85);
}

/* ---------- Aviso de cookies ---------- */
#aviso-cookies {
  position: fixed; z-index: 50; inset: auto .75rem .75rem .75rem;
  width: auto; height: auto; max-width: 48rem; margin: 0 auto;
  border: 1px solid var(--borda); border-radius: var(--raio-card);
  background: var(--fundo); color: var(--texto); padding: 1rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
/* Celular: texto em cima, os dois botões dividindo a linha de baixo. */
#aviso-cookies[open] { display: flex; flex-wrap: wrap; column-gap: .5rem; }
#aviso-cookies > svg { display: none; }
#aviso-cookies > p { flex-basis: 100%; font-size: .875rem; line-height: 1.5rem; }
#aviso-cookies > p > a { font-weight: 500; color: var(--primaria); text-decoration-line: underline; text-underline-offset: 2px; }
#aviso-cookies > button {
  flex: 1; margin-top: .75rem; border-radius: 9999px; padding: .5rem 1rem;
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600;
  transition: background-color var(--transicao), border-color var(--transicao);
}
#aviso-cookies > button[value="essential"] { border: 1px solid var(--borda); }
/* +1px em cima e embaixo: mesma altura do botão ao lado, que tem borda. */
#aviso-cookies > button[value="all"] { padding-block: calc(.5rem + 1px); background: var(--primaria); color: #fff; }
@media (hover: hover) {
  #aviso-cookies > button[value="essential"]:hover { border-color: var(--primaria); }
  #aviso-cookies > button[value="all"]:hover { background: var(--primaria-escura); }
}
@media (min-width: 40rem) {
  #aviso-cookies[open] { flex-wrap: nowrap; align-items: center; gap: 1.25rem; padding: 1.25rem; }
  #aviso-cookies > p { flex-basis: auto; }
  #aviso-cookies > svg {
    display: block; flex-shrink: 0; width: 2.5rem; height: 2.5rem; padding: .625rem;
    border-radius: 9999px; color: var(--primaria); background: color-mix(in oklab, var(--primaria) 10%, transparent);
  }
  #aviso-cookies > button { flex: none; margin-top: 0; }
  /* 1.25rem entre os blocos, .5rem entre os dois botões */
  #aviso-cookies > button + button { margin-left: -.75rem; }
}

/* ==========================================================================
   Rede credenciada por estado (article#rede-credenciada)
   ========================================================================== */
#rede-credenciada { --largura: 75rem; }
@media (min-width: 40rem) { #rede-credenciada { --margem: 2rem; } }
#rede-credenciada > :is(header, section, nav) {
  padding-inline: calc(max(0px, (100% - var(--largura)) / 2) + var(--margem));
}

/* Topo com foto de fundo */
#rede-credenciada > header {
  position: relative; overflow: hidden; min-height: 70vh;
  padding-top: 4rem; padding-bottom: 2.5rem; background: var(--secundaria-escura);
}
#rede-credenciada > header img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
#rede-credenciada > header > :is(h1, p) { position: relative; max-width: 35rem; color: #fff; }
#rede-credenciada > header > h1 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 800; }
#rede-credenciada > header > p { margin-top: 1rem; line-height: 1.75rem; color: rgb(255 255 255 / .9); }
@media (min-width: 40rem) {
  #rede-credenciada > header { padding-top: 5rem; }
  #rede-credenciada > header > h1 { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
}

/* Títulos das seções */
#rede-credenciada > section h2 { font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 800; }
@media (min-width: 40rem) { #rede-credenciada > section h2 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); } }

/* Blocos de texto com foto ou lista ao lado.
   No desktop viram duas colunas: o texto (título e parágrafos) desce pela
   da esquerda e a foto/lista ocupa a da direita em todas as linhas; a última
   linha (1fr) absorve a sobra quando a foto é mais alta que o texto. */
:is(#estrutura, #hospital-destaque, #hospitais) {
  display: grid; align-items: start; column-gap: 2.5rem; padding-block: 3rem;
}
:is(#estrutura, #hospital-destaque, #hospitais) > p { margin-top: 1rem; line-height: 1.75rem; color: var(--texto-suave); }
:is(#estrutura, #hospital-destaque) > figure { margin-top: 2.5rem; }
:is(#estrutura, #hospital-destaque) > figure img { width: 100%; height: auto; border-radius: var(--raio-card); object-fit: cover; }
#hospital-destaque { background: var(--secundaria-escura); }
#hospital-destaque > h2 { color: #fff; }
#hospital-destaque > p { color: rgb(255 255 255 / .85); }
@media (min-width: 64rem) {
  :is(#estrutura, #hospital-destaque):has(> figure), #hospitais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(9, auto) 1fr;
  }
  :is(#estrutura, #hospital-destaque, #hospitais) > :is(h2, p) { grid-column: 1; }
  :is(#estrutura, #hospital-destaque) > figure, #hospitais > ul { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}

/* Lista de hospitais (abre e fecha) */
#hospitais > ul { margin-top: 2.5rem; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 64rem) { #hospitais > ul { margin-top: 0; } }
#hospitais summary {
  cursor: pointer; list-style: none; border-radius: var(--raio);
  background: var(--secundaria-escura); padding: 1rem 1.25rem;
  font-weight: 700; color: #fff;
}
#hospitais summary::-webkit-details-marker { display: none; }
#hospitais summary::marker { content: none; }
#hospitais details > p { padding: .75rem .25rem; font-size: .875rem; line-height: 1.5rem; color: var(--texto-suave); }

/* Vantagens e especialidades */
:is(#vantagens, #especialidades) { padding-block: 3rem; }
#vantagens { background: var(--secundaria-escura); }
:is(#vantagens, #especialidades) > header { max-width: 42rem; margin-inline: auto; text-align: center; }
:is(#vantagens, #especialidades) > header > p { line-height: 1.75rem; }
:is(#vantagens, #especialidades) > header > h2 + p { margin-top: 1rem; }
:is(#vantagens, #especialidades) > header > p + p { margin-top: .5rem; }
#vantagens > header > h2 { color: #fff; }
#vantagens > header > p { color: rgb(255 255 255 / .9); }
#especialidades > header > p { color: var(--texto-suave); }
:is(#vantagens, #especialidades) > ul { margin-top: 2rem; display: grid; gap: 1.5rem; }
:is(#vantagens, #especialidades) li { display: flex; flex-direction: column; gap: .5rem; border-radius: var(--raio); padding: 1.5rem; }
:is(#vantagens, #especialidades) li > h3 { font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 700; }
:is(#vantagens, #especialidades) li > p { font-size: .875rem; line-height: 1.5rem; }
#vantagens li { background: rgb(255 255 255 / .05); }
#vantagens li > h3 { color: #fff; }
#vantagens li > p { color: rgb(255 255 255 / .85); }
#especialidades li > p { color: var(--texto-suave); }
@media (min-width: 40rem) { :is(#vantagens, #especialidades) > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { :is(#vantagens, #especialidades) > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Outros estados */
#outros-estados { border-top: 1px solid var(--borda); padding-block: 2.5rem; }
#outros-estados > h2 { font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 800; }
#outros-estados > ul { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: .5rem; }
#outros-estados a { font-size: .875rem; line-height: calc(1.25 / .875); color: var(--texto-suave); text-underline-offset: 4px; }
@media (hover: hover) { #outros-estados a:hover { color: var(--primaria); text-decoration-line: underline; } }
@media (min-width: 40rem) { #outros-estados > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #outros-estados > ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Faixa "Planos Empresariais" (fim das páginas de rede): respiro por fora,
   conteúdo em até 75rem. */
#planos-empresariais {
  display: grid; justify-items: start;
  padding-block: 3rem; background: var(--cinza);
}
#rede-credenciada > #planos-empresariais { padding-inline: max(var(--margem), (100% - var(--largura)) / 2); }
#planos-empresariais > h2 { color: #fff; }
#planos-empresariais > p { margin-top: .75rem; max-width: 42rem; line-height: 1.75rem; color: rgb(255 255 255 / .85); }
#planos-empresariais > a {
  margin-top: 1.5rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: var(--raio); background: var(--secundaria); padding: .75rem 1.5rem;
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700; color: #fff;
  transition: background-color var(--transicao);
}
@media (hover: hover) { #planos-empresariais > a:hover { background: var(--secundaria-escura); } }
@media (min-width: 40rem) {
  #planos-empresariais { grid-template-columns: 1fr auto; column-gap: 1.5rem; }
  #planos-empresariais > a { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
}

/* Seção sem parágrafos no banco: o layout antigo mantinha o espaço (1rem)
   da caixa de texto vazia abaixo do título; aqui o título guarda esse espaço
   (no header, como preenchimento: margem ali se fundiria com a da lista). */
#rede-credenciada > header > h1:not(:has(+ p)),
:is(#estrutura, #hospital-destaque, #hospitais) > h2:not(:has(+ p)),
:is(#vantagens, #especialidades) > header > h2:last-child { padding-bottom: 1rem; }

/* ==========================================================================
   Landings (article#landing) - medidas do layout original (Elementor)
   ========================================================================== */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/open-sans.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans Fallback"; src: local(Arial); ascent-override: 101.65%; descent-override: 27.86%; line-gap-override: 0%; size-adjust: 105.15%; }

#landing {
  --texto-landing: "Open Sans", "Open Sans Fallback";
  --caixa: 1140px;   /* largura máxima do bloco (com o respiro) */
  --respiro: 10px;
}
/* Cada bloco centraliza o conteúdo em --caixa, com 10px de respiro. */
#landing > :is(header, section):not(#planos-empresariais) {
  padding-inline: calc(max(0px, (100% - var(--caixa)) / 2) + var(--respiro));
}

/* ---------- Topo com foto (header do article ou section) ---------- */
#landing > :is(.topo-medio, .topo-alto, .topo-compacto) {
  --caixa: 1314px; --coluna: 583px;
  position: relative; overflow: hidden; background: #000;
  padding-block: 20px; min-height: 558px;
}
#landing > .topo-alto { --caixa: 1252px; --coluna: 560px; }
#landing > .topo-compacto { --caixa: 1140px; --coluna: 50%; min-height: 477px; }
#landing > :is(.topo-medio, .topo-alto, .topo-compacto) img { position: absolute; z-index: 0; }
#landing > :is(.topo-medio, .topo-alto) img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
#landing > .topo-compacto img { left: 0; top: 0; width: 1920px; max-width: none; height: auto; }
/* Véu escuro de 50% sobre a foto (modelos alto e médio). */
#landing > :is(.topo-medio, .topo-alto)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / .5); }
#landing > :is(.topo-medio, .topo-alto, .topo-compacto) > :is(h1, h2, p, a) { position: relative; z-index: 2; color: #fff; }
#landing > :is(.topo-medio, .topo-alto, .topo-compacto) > :is(h1, h2) { font-weight: 700; }
#landing > .topo-medio > :is(h1, h2) { margin-top: 58px; font-size: 24px; line-height: 1.3; }
#landing > .topo-alto > :is(h1, h2) { margin-top: 70px; font-size: 1.875rem; line-height: 1.25; }
#landing > .topo-compacto > :is(h1, h2) { margin-top: 44px; width: 89.815%; font-size: 24px; line-height: 1.3; font-weight: 600; }
#landing > :is(.topo-medio, .topo-alto, .topo-compacto) > p { font-family: var(--texto-landing); font-size: 17px; line-height: 1.5; }
#landing > :is(.topo-medio, .topo-alto, .topo-compacto) > :is(h1, h2) + p { margin-top: 24px; }
#landing > :is(.topo-medio, .topo-alto, .topo-compacto) > p + p { margin-top: 16px; }
#landing > .topo-medio > p { text-align: justify; }
#landing > .texto-grande > p { font-size: 20px; line-height: 30px; }
#landing > :is(.topo-medio, .topo-alto, .topo-compacto) > a {
  margin-top: 24px; display: inline-flex; width: 100%; justify-content: center;
  font-weight: 700; text-transform: uppercase; transition: opacity var(--transicao);
  background: #36040d; padding: 8px 24px; font-size: 17px;
}
#landing > .topo-alto > a { margin-top: 40px; background: #4d4d4d; padding: 12px 0; font-size: .875rem; line-height: calc(1.25 / .875); }
@media (hover: hover) { #landing > :is(.topo-medio, .topo-alto, .topo-compacto) > a:hover { opacity: .9; } }
@media (min-width: 48rem) {
  #landing > .topo-medio > :is(h1, h2) { font-size: 41px; line-height: 50px; width: calc(var(--coluna) * .82348); }
  #landing > .topo-medio.titulo-inteiro > :is(h1, h2) { width: var(--coluna); }
  #landing > .topo-medio.titulo-uma-linha > :is(h1, h2) { width: calc(var(--coluna) * 1.5); }
  #landing > .topo-alto > :is(h1, h2) { font-size: 47px; line-height: 48px; width: var(--coluna); }
  #landing > .topo-compacto > :is(h1, h2) { font-size: 40px; line-height: 1; width: calc(var(--coluna) * .89815); }
  #landing > .topo-medio > p { width: calc(var(--coluna) * .85698); }
  #landing > :is(.topo-alto, .topo-compacto) > p { width: var(--coluna); }
  #landing > .topo-medio > a { width: calc(var(--coluna) * .47558); }
  #landing > .topo-alto > a { width: calc(var(--coluna) * .50646); }
}

/* ---------- Texto + formulário/foto ao lado ---------- */
#landing > .texto-lado {
  --caixa: 1314px;
  display: grid; align-items: start; column-gap: 32px; padding-block: 10px;
}
#landing > .texto-lado > h2 { margin-top: 42px; font-size: 30px; line-height: 1.25; font-weight: 800; color: #4d4d4d; }
#landing > .texto-lado.junto > h2 { margin-top: 24px; }
#landing > .texto-lado > p { font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; color: #4d4d4d; }
#landing > .texto-lado > h2 + p { margin-top: 20px; }
#landing > .texto-lado > p + p { margin-top: 16px; }
#landing > .texto-lado > figure { margin-top: calc(44px + 32px); }
#landing > .texto-lado > #solicitar-carta { margin-top: calc(24px + 32px); }
@media (min-width: 48rem) {
  #landing > .texto-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(9, auto) 1fr; }
  #landing > .texto-lado > :is(h2, p, ul) { grid-column: 1; }
  #landing > .texto-lado > :is(figure, #solicitar-carta) { grid-column: 2; grid-row: 1 / -1; }
  #landing > .texto-lado > figure { margin-top: 44px; }
  #landing > .texto-lado.junto > figure { margin-top: 24px; }
  #landing > .texto-lado > #solicitar-carta { margin-top: 24px; }
}

/* Formulário da Carta de Permanência */
#solicitar-carta {
  margin: 24px auto; width: 100%; max-width: 480px; scroll-margin-top: 96px;
  overflow: hidden; border: 4px solid #450005; border-radius: 14px; background: #fff;
  box-shadow: 0 4px 24px rgb(0 0 0 / .1);
  font-family: "Segoe UI", system-ui, sans-serif;
}
#solicitar-carta > header { padding: 28px 24px 16px; text-align: center; }
#solicitar-carta > header > h3 { margin-bottom: 6px; font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 800; color: #222; }
#solicitar-carta > header > p { font-size: .875rem; line-height: calc(1.25 / .875); color: #666; }
#solicitar-carta form { padding: 8px 24px 24px; }
#solicitar-carta form > p { margin-bottom: 14px; }
#solicitar-carta :is(input, select, textarea) {
  width: 100%; border: 1px solid #ddd; border-radius: 10px; background: #fff;
  padding: 12px 14px; font-size: .875rem; line-height: calc(1.25 / .875); color: #333;
}
#solicitar-carta :is(input, textarea)::placeholder { color: #888; }
#solicitar-carta :is(input, select, textarea):focus { border-color: #450005; box-shadow: 0 0 0 3px #45000522; outline: none; }
#solicitar-carta textarea { min-height: 70px; resize: vertical; }
#solicitar-carta form small { display: block; margin-top: 4px; font-size: .75rem; line-height: 1rem; color: #e53e3e; }
#solicitar-carta button[type="submit"] {
  margin-top: 4px; width: 100%; cursor: pointer; border-radius: 10px; background: #450005;
  padding: 14px; font-size: 1rem; line-height: 1.5; font-weight: 700; color: #fff;
  transition: filter var(--transicao), opacity var(--transicao);
}
@media (hover: hover) { #solicitar-carta button[type="submit"]:hover { filter: brightness(1.1); } }
#solicitar-carta button[type="submit"]:disabled { cursor: not-allowed; opacity: .6; }
/* Confirmação depois do envio (montada pelo site.js) */
#solicitar-carta > [role="status"] { padding: 32px 24px; text-align: center; }
#solicitar-carta > [role="status"] > svg { margin: 0 auto 16px; width: 64px; height: 64px; padding: 16px; border-radius: 9999px; background: #25d366; fill: none; stroke: #fff; stroke-width: 3; }
#solicitar-carta > [role="status"] > h4 { margin-bottom: 8px; font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: #333; }
#solicitar-carta > [role="status"] > p { margin-bottom: 20px; font-size: .875rem; line-height: calc(1.25 / .875); color: #666; }
#solicitar-carta > [role="status"] > a { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; background: #25d366; padding: 12px 24px; font-size: 15px; font-weight: 600; color: #fff; }

/* ---------- Cards de planos ---------- */
#landing > .cards { background: #f5f5f5; padding-top: 10px; padding-bottom: 74px; }
#landing > .cards.branco { background: #fff; }
#landing > .cards > h2 { margin-top: 29px; text-align: center; font-size: 30px; line-height: 1.25; font-weight: 700; color: #4d4d4d; }
#landing > .cards > p { margin: 20px auto 0; font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; color: #4d4d4d; text-align: justify; }
#landing > .cards.intro-larga > p { text-align: center; }
#landing > .cards > ul { margin: 48px -10px 0; display: grid; gap: 20px; }
#landing > .cards > ul > li {
  display: flex; flex-direction: column; min-height: 435px; background: #fff; padding: 10px;
  box-shadow: 0 0 10px rgb(0 0 0 / .05);
}
#landing > .cards > ul > li > h3 { margin: 17px 7px 0; font-size: 21px; line-height: 1.25; font-weight: 800; color: #4d4d4d; }
#landing > .cards > ul > li > h3 + p { margin: 16px 7px 0; font-family: var(--texto-landing); font-size: 1rem; line-height: 1.5rem; color: #4d4d4d; }
#landing > .cards > ul > li > ul { margin-top: 23px; display: flex; flex-direction: column; padding-left: 7px; font-family: var(--texto-landing); font-size: 17px; line-height: 1.5; color: #4d4d4d; }
#landing > .cards > ul > li > ul > li { display: flex; align-items: center; gap: 4px; }
#landing > .cards > ul > li > ul svg { width: 14px; height: 14px; flex-shrink: 0; color: #740316; }
@media (min-width: 48rem) {
  #landing > .cards > p { width: 59%; }
  #landing > .cards.intro-larga > p { width: 95%; }
  #landing > .cards > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Destaques (fundo vermelho) ---------- */
#landing > .destaques {
  display: grid; align-content: center; min-height: 789px;
  background: #740316; padding-block: 74px; color: #fff;
}
#landing > .destaques > h2 { text-align: center; font-size: 31px; line-height: 50px; font-weight: 700; }
#landing > .destaques > p { margin-top: 4px; font-family: var(--texto-landing); font-size: 17px; line-height: 1.5; text-align: justify; }
#landing > .destaques:is(.intro-46, .intro-56) > p { text-align: center; }
#landing > .destaques > ul { margin-top: 40px; display: grid; column-gap: 20px; row-gap: 40px; }
#landing > .destaques > ul > li { border-radius: 8px; background: rgb(255 255 255 / .15); padding: 14px; }
#landing > .destaques > ul > li > svg { margin-bottom: 16px; height: 39px; width: auto; }
#landing > .destaques > ul > li > h3 { margin-bottom: 2px; font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
#landing > .destaques > ul > li.sem-icone > h3 { margin-top: 12px; }
#landing > .destaques > ul > li > p { font-family: var(--texto-landing); font-size: 1rem; line-height: 1.5rem; }
@media (min-width: 48rem) {
  #landing > .destaques > h2 { width: 85.428%; margin-inline: auto; }
  #landing > .destaques > p { width: 86.66%; margin-inline: auto; }
  #landing > .destaques.intro-46 > p { width: 46%; }
  #landing > .destaques.intro-56 > p { width: 56%; }
  #landing > .destaques > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Passos numerados ---------- */
#landing > .passos { background: #f5f5f5; padding-top: 56px; padding-bottom: 96px; }
#landing > .passos.largo { --caixa: 1314px; padding-bottom: 24px; }
#landing > .passos > h2 { text-align: center; font-size: 30px; line-height: 1.25; font-weight: 700; color: #4d4d4d; }
#landing > .passos > p { margin: 20px auto 0; font-family: var(--texto-landing); text-align: center; font-size: 18px; line-height: 1.5; color: #4d4d4d; }
#landing > .passos > ol { margin-top: 56px; display: grid; gap: 20px; }
#landing > .passos > ol > li { border-radius: 8px; background: rgb(255 255 255 / .35); padding: 23px; }
#landing > .passos > ol > li > svg { width: 57px; height: 57px; }
#landing > .passos > ol > li > h3 { margin-top: 24px; font-size: 19px; line-height: 1.25; font-weight: 700; color: #4d4d4d; }
#landing > .passos > ol > li > p { font-family: var(--texto-landing); font-size: 1rem; line-height: 1.5rem; color: #4d4d4d; }
@media (min-width: 40rem) { #landing > .passos > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { #landing > .passos > p { max-width: 80%; } }
@media (min-width: 64rem) { #landing > .passos > ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Vantagens (duas colunas de caixas com foto no meio) ---------- */
#landing > .vantagens { display: grid; align-items: start; column-gap: 40px; padding-top: 10px; padding-bottom: 40px; color: #3a3a3a; }
#landing > .vantagens > :is(h2, p) { grid-column: 1 / -1; text-align: center; }
#landing > .vantagens > h2 { margin-top: 19px; font-size: 33px; line-height: 42px; font-weight: 800; }
#landing > .vantagens > p { margin-top: 20px; font-family: var(--texto-landing); font-size: 1rem; line-height: 1.5rem; }
#landing > .vantagens > :is(ul, figure) { margin-top: 40px; }
#landing > .vantagens > ul { display: flex; flex-direction: column; gap: 40px; }
#landing > .vantagens > ul > li { border-radius: 13px; background: #fafafa; padding: 20px; }
#landing > .vantagens > ul:first-of-type > li:not(:first-child),
#landing > .vantagens > ul:last-of-type > li { text-align: justify; }
#landing > .vantagens > ul > li > svg { height: 50px; width: auto; color: #690303; }
#landing > .vantagens > ul > li > h3 { margin: 16px 0 6px; font-size: 1.25rem; line-height: 1.5rem; font-weight: 700; }
#landing > .vantagens > ul > li > p { font-family: var(--texto-landing); font-size: 1rem; line-height: 1.5rem; }
#landing > .vantagens > figure img { width: 100%; height: auto; border-radius: 3px; }
@media (min-width: 48rem) {
  #landing > .vantagens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #landing > .vantagens > h2 { width: 46%; margin-inline: auto; }
  #landing > .vantagens > p { width: 54.259%; margin-inline: auto; }
}

/* ---------- Perguntas frequentes ---------- */
#landing > .perguntas { background: #f5f5f5; padding-top: 10px; padding-bottom: 42px; }
#landing > .perguntas.branco { background: #fff; }
#landing > .perguntas > h2 { margin-top: 19px; text-align: center; font-size: 25px; line-height: 35px; font-weight: 800; color: #3a3a3a; }
#landing > .perguntas > details { max-width: 650px; margin: 20px auto 0; box-shadow: 0 0 10px rgb(0 0 0 / .05); }
#landing > .perguntas summary {
  display: flex; min-height: 40px; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 8px 10px; font-size: 1rem; line-height: 1.5; font-weight: 700; color: #000;
}
#landing > .perguntas summary::-webkit-details-marker { display: none; }
#landing > .perguntas summary::marker { content: none; }
#landing > .perguntas summary > svg { width: 14px; height: 14px; flex-shrink: 0; }
#landing > .perguntas details[open] > summary > svg:first-child,
#landing > .perguntas details:not([open]) > summary > svg:nth-child(2) { display: none; }
#landing > .perguntas details > p { padding: 0 10px 12px; font-family: var(--texto-landing); font-weight: 500; line-height: 1.5rem; color: #3a3a3a; }
@media (min-width: 48rem) { #landing > .perguntas > h2 { width: 44%; margin-inline: auto; } }

/* ---------- Faixa Planos Empresariais (landings e páginas de rede) ---------- */
#planos-empresariais { --largura: 75rem; --margem: 1rem; padding-inline: max(var(--margem), (100% - var(--largura)) / 2); }
@media (min-width: 40rem) { #planos-empresariais { --margem: 2rem; } }
#planos-empresariais > h2 { font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 800; }
@media (min-width: 40rem) { #planos-empresariais > h2 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); } }

/* ==========================================================================
   Modelo de post (article#post) - o mesmo para todos os posts
   ========================================================================== */
hr { height: 0; color: inherit; border-top-width: 1px; }

/* Faixa cinza de ponta a ponta; texto (730px) + lateral numa caixa de 1140px. */
#post {
  --g: max(10px, (100% - 1140px) / 2);
  display: grid; grid-template-columns: var(--g) minmax(0, 1fr) var(--g); align-items: start;
  padding-bottom: 48px; background: rgb(248 248 248 / .41);
}
#post > header { grid-column: 1 / -1; }
#post > #texto, #post > aside { grid-column: 2; }
#post > aside { margin-top: 32px; }
@media (min-width: 64rem) {
  #post { grid-template-columns: var(--g) 730px 32px minmax(0, 1fr) var(--g); }
  #post > aside { grid-column: 4; grid-row: 2; align-self: stretch; }
}

/* ---------- Topo vermelho com a foto esmaecida ao fundo ---------- */
#post > header {
  position: relative; overflow: hidden; display: grid; align-items: start; column-gap: 40px;
  /* start: a altura mínima (464px) não estica as linhas do texto */
  align-content: start;
  padding: 40px calc(max(0px, (100% - 1160px) / 2) + 20px); background: #a30825;
}
#post > header > picture > img, #post > header > img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#post > header::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #a30825; opacity: .96; }
#post > header > :is(h1, p, figure) { position: relative; z-index: 2; }
#post > header > h1 { font-size: 28px; line-height: 1.15; font-weight: 800; color: #fff; }
#post > header > p {
  margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 8px;
  font-family: "Open Sans", "Open Sans Fallback"; color: #fff;
}
#post > header > p > span { display: flex; align-items: center; gap: 8px; }
#post > header > p svg { width: 14px; height: 14px; fill: currentColor; }
#post > header > figure { margin-top: 32px; width: 100%; }
#post > header > figure img { width: 100%; height: auto; box-shadow: 15px 17px 44px -6px rgb(0 0 0 / .82); }
@media (min-width: 48rem) {
  #post > header { min-height: 464px; padding-block: 45px; }
  #post > header > h1 { margin-top: 11px; font-size: 34px; line-height: 39px; }
  #post:not(.sem-foto) > header { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(9, auto) 1fr; }
  #post > header > :is(h1, p) { grid-column: 1; }
  #post > header > figure { grid-column: 2; grid-row: 1 / -1; margin-top: 0; max-width: 540px; justify-self: end; }
}

/* ---------- Texto do post (vem do Markdown do CMS) ---------- */
#texto { min-width: 0; background: #fff; padding: 24px; color: #252525; }
#texto h2 { margin: 8px 0 16px; font-size: 26px; line-height: 1.2; font-weight: 700; }
#texto h3 { margin: 8px 0 16px; font-size: 1.125rem; line-height: 1.2; font-weight: 700; }
#texto h4 { margin: 8px 0 12px; font-size: 1rem; line-height: 1.5; font-weight: 700; }
#texto p { margin-bottom: 14.4px; font-size: 17px; line-height: 1.5; }
#texto :is(ul, ol) { margin-bottom: 20px; padding-left: 40px; font-size: 17px; line-height: 1.5; }
#texto ul { list-style-type: disc; }
#texto ol { list-style-type: decimal; }
#texto strong { font-weight: 700; }
#texto a { color: #c36; }
@media (hover: hover) { #texto a:hover { text-decoration-line: underline; } }
#texto blockquote { margin: 17px 16px; font-size: 17px; line-height: 1.5; }
#texto blockquote p { margin-bottom: 0; }
#texto figure { margin: 24px 0; overflow-x: auto; }
#texto table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
#texto thead { background: #a30825; color: #fff; }
#texto :is(th, td) { border: 1px solid #e5e5e5; padding: 8px 12px; }
#texto th { font-weight: 600; }
#texto td { vertical-align: top; }
#texto img { display: block; margin: 24px 0; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #f4f4f4; }
@media (min-width: 48rem) {
  #texto h2 { font-size: 30px; }
  #texto blockquote { margin-inline: 32px; }
}

/* ---------- Lateral: Leia também + cotação ---------- */
#post > aside { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 64rem) { #post > aside { margin-top: 32px; } }
#post > aside > nav {
  border: 1px solid rgb(0 0 0 / .05); border-radius: 8px; background: #fff; padding: 20px;
  box-shadow: 0 10px 25px rgb(0 0 0 / .05);
}
#post > aside > nav > h2 { margin-bottom: 12px; font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 700; color: #252525; }
#post > aside > nav > ul { display: flex; flex-direction: column; gap: 12px; }
#post > aside > nav a { display: flex; align-items: center; gap: 12px; }
#post > aside > nav img { width: 72px; height: 48px; flex-shrink: 0; object-fit: cover; }
#post > aside > nav span { font-size: .875rem; line-height: 1.375; font-weight: 500; color: #252525; }
@media (hover: hover) { #post > aside > nav a:hover span { color: #c36; } }

/* Formulário "Faça sua cotação online" */
#cotacao {
  margin-inline: auto; width: 100%; max-width: 480px; scroll-margin-top: 96px;
  border: 1px solid rgb(0 0 0 / .05); border-radius: 8px; background: #fff; padding: 30px;
  box-shadow: 0 10px 25px rgb(0 0 0 / .05);
}
@media (min-width: 64rem) { #post #cotacao { position: sticky; top: 96px; } }
#cotacao > h2 { text-align: center; font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 600; color: #6e0202; }
#cotacao > p, #cotacao form, #cotacao > [role="status"] { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#cotacao > p { margin: 8px 0 20px; text-align: center; font-size: 15px; color: #64748b; }
#cotacao form { display: flex; flex-direction: column; gap: 16px; }
#cotacao label { display: block; margin-bottom: 6px; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; color: #334155; }
#cotacao :is(input, select) {
  height: 48.5px; width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
  padding: 0 12px; font-size: 15px; color: #333;
}
#cotacao input::placeholder { color: #94a3b8; }
#cotacao :is(input, select):focus { border-color: #6e0202; box-shadow: 0 0 0 3px #6e020222; outline: none; }
#cotacao form small { display: block; margin-top: 4px; font-size: .75rem; line-height: 1rem; color: #e53e3e; }
#cotacao button[type="submit"] {
  margin-top: 4px; height: 52px; width: 100%; cursor: pointer; border-radius: 10px; background: #6e0202;
  font-size: 1rem; line-height: 1.5; font-weight: 700; color: #fff;
  transition: filter var(--transicao), opacity var(--transicao);
}
@media (hover: hover) { #cotacao button[type="submit"]:hover { filter: brightness(1.1); } }
#cotacao button[type="submit"]:disabled { cursor: not-allowed; opacity: .6; }
#cotacao > [role="status"] { padding: 24px 0; text-align: center; }
#cotacao > [role="status"] > svg { margin: 0 auto 16px; width: 64px; height: 64px; padding: 16px; border-radius: 9999px; background: #25d366; fill: none; stroke: #fff; stroke-width: 3; }
#cotacao > [role="status"] > h3 { margin-bottom: 8px; font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: #333; }
#cotacao > [role="status"] > p { margin-bottom: 20px; font-size: .875rem; line-height: calc(1.25 / .875); color: #666; }
#cotacao > [role="status"] > a { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; background: #25d366; padding: 12px 24px; font-size: 15px; font-weight: 600; color: #fff; }

/* ---------- Landings: variações dos blocos existentes ---------- */
#landing > .topo-alto > p { font-size: 18px; }

/* Foto ao lado do texto (bloco texto-lado) */
#landing > .texto-lado > figure { justify-self: end; width: 100%; }
#landing > .texto-lado.junto > figure { margin-top: calc(24px + 32px); }
#landing > .texto-lado.foto-580 > figure { max-width: 580px; }
#landing > .texto-lado.foto-590 > figure { max-width: 590px; }
#landing > .texto-lado > figure img { width: 100%; height: auto; }
@media (min-width: 48rem) { #landing > .texto-lado.junto > figure { margin-top: 24px; } }
/* Selos com check abaixo do texto */
#landing > .texto-lado > ul { margin-top: 20px; display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 8px; padding-left: 2px; }
#landing > .texto-lado > ul > li { display: flex; align-items: center; gap: 8px; font-size: 1rem; line-height: 1.5; font-weight: 600; color: #4d4d4d; }
#landing > .texto-lado > ul svg { width: 14px; height: 14px; flex-shrink: 0; color: #740316; }

/* Cards de plano: só o parágrafo de descrição; o botão (p > a) fica no fim do card */
#landing > .cards > ul > li > p:not(:first-of-type) { margin: auto 0 0; }
#landing > .cards > ul > li > ul + p { align-self: center; margin-top: auto; padding: 38px 6px 6px; }
#landing > .cards > ul > li > ul + p > a {
  display: block; text-align: center; font-size: 15px; font-weight: 800; text-transform: uppercase;
  background: #fff; padding: 12px; color: #4d4d4d; box-shadow: 0 0 10px 6px rgb(0 0 0 / .09);
}
#landing > .cards > ul > li > ul + p.destaque > a { background: #740316; padding: 18px; color: #fff; }
@media (min-width: 48rem) { #landing > .cards > ul > li > ul + p { width: 74.422%; } }

/* Introdução centralizada de 80% */
#landing > .destaques.intro-80 > p { text-align: center; }
@media (min-width: 48rem) { #landing > .destaques.intro-80 > p { width: 80%; } }

/* ---------- Cards de recurso (featureCards) ---------- */
#landing > .recursos { background: #f5f5f5; padding-block: 64px; }
#landing > .recursos > h2 { text-align: center; font-size: 30px; line-height: 37px; font-weight: 700; color: #4d4d4d; }
#landing > .recursos > p { margin: 20px auto 0; font-family: var(--texto-landing); text-align: center; font-size: 18px; line-height: 1.5; color: #4d4d4d; }
#landing > .recursos > ul { margin: 64px -10px 0; display: grid; gap: 20px; }
#landing > .recursos.tres > ul { margin-top: 40px; }
#landing > .recursos > ul > li { border-radius: 3px; background: #fff; padding: 23px; }
#landing > .recursos > ul > li > svg { margin: 8px 0 24px; height: 50px; width: auto; color: #740316; }
#landing > .recursos > ul > li > h3 { font-size: 19px; line-height: 1.25; font-weight: 700; color: #4d4d4d; }
#landing > .recursos > ul > li > p { margin-top: 16px; font-family: var(--texto-landing); font-size: 17px; line-height: 1.5; color: #666; }
@media (min-width: 40rem) { #landing > .recursos > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) {
  #landing > .recursos > h2 { max-width: 80%; margin-inline: auto; }
  #landing > .recursos > p { width: 60%; }
}
@media (min-width: 64rem) {
  #landing > .recursos > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #landing > .recursos.tres > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Texto em meia coluna (text) ---------- */
#landing > .texto { min-height: 559px; padding-block: 20px; }
#landing > .texto.cinza { min-height: calc(559px + 64px + 48px); padding-top: 84px; padding-bottom: 68px; background: #f5f5f5; }
#landing > .texto > h2 { margin-top: 42px; font-size: 30px; line-height: 35px; font-weight: 800; color: #4d4d4d; }
#landing > .texto.cinza > h2 { font-size: 36px; line-height: 1.2; color: #333; }
#landing > .texto > p { font-family: var(--texto-landing); text-align: justify; font-size: 17px; line-height: 1.5; color: #4d4d4d; }
#landing > .texto > h2 + p { margin-top: 24px; }
#landing > .texto > p + p { margin-top: 16px; }
#landing > .texto > ul { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; padding-left: 7px; font-family: var(--texto-landing); font-size: 17px; line-height: 1.5; color: #4d4d4d; }
#landing > .texto > ul > li { display: flex; align-items: center; gap: 4px; }
#landing > .texto > ul svg { width: 14px; height: 14px; flex-shrink: 0; color: #740316; }
@media (min-width: 48rem) {
  #landing > .texto > :is(h2, ul) { width: 50%; }
  #landing > .texto > p { width: min(50%, 540px); }
}

/* ---------- Texto + lista de recursos (splitFeatures) ---------- */
#landing > .recursos-lado {
  --caixa: 1350px;
  display: grid; align-items: start; column-gap: 40px; min-height: 842px;
  padding-top: 96px; padding-bottom: 80px;
}
#landing > .recursos-lado > h2 { font-size: 30px; line-height: 1.25; font-weight: 700; color: #4d4d4d; }
#landing > .recursos-lado > p { margin-top: 16px; font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; color: #4d4d4d; }
#landing > .recursos-lado > ul { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
#landing > .recursos-lado > ul > li {
  display: grid; grid-template-columns: 35px minmax(0, 1fr); column-gap: 16px; align-content: center;
  min-height: 120px; background: #f9f9f9; padding: 20px;
}
#landing > .recursos-lado > ul > li > svg { grid-row: 1 / span 2; align-self: center; width: 35px; height: 35px; color: #a30825; }
#landing > .recursos-lado > ul > li > h3 { font-size: 19px; line-height: 1.25; font-weight: 700; color: #4d4d4d; }
#landing > .recursos-lado > ul > li > p { margin-top: 4px; font-family: var(--texto-landing); font-size: 15px; line-height: 1.5; color: #4d4d4d; }
@media (min-width: 48rem) {
  #landing > .recursos-lado { padding-top: 130px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(9, auto) 1fr; }
  #landing > .recursos-lado > :is(h2, p) { grid-column: 1; }
  #landing > .recursos-lado > ul { grid-column: 2; grid-row: 1 / -1; margin-top: 12px; }
}

/* ---------- Comparativo de planos (compareCards) ---------- */
#landing > .comparativo { background: #f9f9f9; padding-top: 64px; padding-bottom: 48px; }
/* caixa 1330px com 10px de respiro por fora = fórmula geral com --caixa 1350px */
#landing > .comparativo { --caixa: 1350px; }
#landing > .comparativo > h2 { text-align: center; font-size: 30px; line-height: 1.25; font-weight: 700; color: #4d4d4d; }
#landing > .comparativo > p { margin: 20px auto 0; font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; color: #4d4d4d; }
#landing > .comparativo > ul { margin-top: 96px; display: grid; gap: 40px; }
#landing > .comparativo > ul > li { display: flex; flex-direction: column; background: #fff; }
#landing > .comparativo > ul > li > header { border-radius: 9px 9px 0 0; padding: 10px; color: #fff; }
#landing > .comparativo > ul > li > header > h3 { font-size: 19px; line-height: 1.25; font-weight: 600; }
#landing > .comparativo > ul > li > header > p { font-family: var(--texto-landing); font-size: 11px; }
#landing > .comparativo > ul > li > p { margin: 20px 20px 0; font-family: var(--texto-landing); font-size: 15px; line-height: 1.5; color: #4d4d4d; }
#landing > .comparativo > ul > li > ul { margin: 40px 20px 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--texto-landing); font-size: 15px; font-weight: 600; color: #4d4d4d; }
#landing > .comparativo > ul > li > ul > li { display: flex; align-items: center; gap: 10px; }
#landing > .comparativo > ul > li > ul svg { width: 18px; height: 18px; flex-shrink: 0; color: #600; }
#landing > .comparativo > ul > li > a {
  display: block; margin: 36px auto 12px; width: calc((100% - 40px) * .81961); padding-block: 10px;
  text-align: center; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700; text-transform: uppercase; color: #fff;
}
#landing > .comparativo .vinho > :is(header, a) { background: #600; }
#landing > .comparativo .cinza > :is(header, a) { background: #4d4d4d; }
@media (min-width: 48rem) {
  #landing > .comparativo > p { width: 67.232%; }
  #landing > .comparativo > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Texto e foto/caixa lado a lado (splitSide) ---------- */
#landing > .lado-a-lado { --caixa: 1350px; display: grid; column-gap: 40px; min-height: 410px; padding-block: 48px; background: #fff; }
#landing > .lado-a-lado.cinza { background: #f9f9f9; }
#landing > .lado-a-lado.pequeno { min-height: 0; }
#landing > .lado-a-lado.com-caixa { min-height: 588px; padding-block: 96px; }
#landing > .lado-a-lado > h2 { margin-left: 10px; font-size: 28px; line-height: 1.25; font-weight: 700; color: #4d4d4d; }
#landing > .lado-a-lado.com-caixa > h2 { line-height: 28px; }
#landing > .lado-a-lado.pequeno > h2 { font-size: 31px; line-height: 33px; }
#landing > .lado-a-lado > p { font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; color: #4d4d4d; }
#landing > .lado-a-lado > h2 + p { margin-top: 36px; }
#landing > .lado-a-lado > p + p { margin-top: 16px; }
#landing > .lado-a-lado.pequeno > p { margin-left: 10px; text-align: justify; font-size: 17px; }
#landing > .lado-a-lado > :is(figure, aside) { margin-top: 40px; align-self: center; }
#landing > .lado-a-lado > figure { margin-inline: auto; width: 100%; }
#landing > .lado-a-lado.foto-409 > figure { max-width: 409px; }
#landing > .lado-a-lado.foto-645 > figure { max-width: 645px; }
#landing > .lado-a-lado > figure img { width: 100%; height: auto; }
#landing > .lado-a-lado.com-sombra > figure img { box-shadow: 6px 12px 10px 0 #acacac; }
#landing > .lado-a-lado > aside { background: #f9f9f9; padding: 24px; }
#landing > .lado-a-lado > aside > h3 { display: flex; align-items: center; gap: 12px; font-size: 24px; line-height: 1.5; font-weight: 700; color: #4d4d4d; }
#landing > .lado-a-lado > aside > h3 > svg { height: 35px; width: auto; flex-shrink: 0; color: #a30825; }
#landing > .lado-a-lado > aside > ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; padding-left: 4px; font-family: var(--texto-landing); font-size: 15px; font-weight: 600; color: #4d4d4d; }
#landing > .lado-a-lado > aside > ul > li { display: flex; align-items: center; gap: 10px; }
#landing > .lado-a-lado > aside > ul svg { width: 18px; height: 18px; flex-shrink: 0; color: #600; }
@media (min-width: 48rem) {
  /* Duas colunas com o texto centralizado na vertical ao lado da foto/caixa:
     linhas 1fr nas pontas repartem a sobra por igual. */
  #landing > .lado-a-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr repeat(8, auto) 1fr; }
  #landing > .lado-a-lado > :is(h2, p) { grid-column: 1; }
  #landing > .lado-a-lado > h2 { grid-row: 2; }
  #landing > .lado-a-lado > p:nth-of-type(1) { grid-row: 3; }
  #landing > .lado-a-lado > p:nth-of-type(2) { grid-row: 4; }
  #landing > .lado-a-lado > p:nth-of-type(3) { grid-row: 5; }
  #landing > .lado-a-lado > p:nth-of-type(4) { grid-row: 6; }
  #landing > .lado-a-lado > p:nth-of-type(5) { grid-row: 7; }
  #landing > .lado-a-lado > p:nth-of-type(6) { grid-row: 8; }
  #landing > .lado-a-lado > p:nth-of-type(7) { grid-row: 9; }
  #landing > .lado-a-lado > :is(figure, aside) { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  #landing > .lado-a-lado.com-caixa > h2 { width: 72%; }
  #landing > .lado-a-lado.pequeno > h2 { width: 81.848%; }
}

/* ---------- Página de texto corrido (article) ---------- */
#landing > .artigo { padding-top: 16px; padding-bottom: 40px; --respiro: 16px; color: #333; }
@media (min-width: 80rem) { #landing > .artigo { --respiro: 0px; } }
#landing > .artigo > :is(h1, h2):first-child { margin-bottom: 16px; font-family: var(--texto-landing); font-size: 32px; line-height: 1.25; font-weight: 400; color: #333; }
@media (min-width: 48rem) { #landing > .artigo > :is(h1, h2):first-child { font-size: 40px; } }
#landing > .artigo > h2:not(:first-child) { margin: 8px 0 20px; font-size: 29px; line-height: 1.25; font-weight: 700; color: #000; }
#landing > .artigo > h3 { margin: 8px 0 20px; font-size: 22px; line-height: 1.25; font-weight: 600; color: #000; }
#landing > .artigo p { margin-bottom: 16px; font-family: var(--texto-landing); font-size: 15px; line-height: 24px; }
#landing > .artigo :is(ul, ol) { margin-bottom: 16px; padding-left: 40px; font-family: var(--texto-landing); font-size: 15px; line-height: 24px; }
#landing > .artigo ul { list-style-type: disc; }
#landing > .artigo ol { list-style-type: decimal; }
#landing > .artigo strong { font-weight: 700; }
#landing > .artigo a { color: #c36; text-decoration-line: underline; }

/* ==========================================================================
   Página de hospital (article#hospital) - /hospital/<slug>
   ========================================================================== */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Fallback"; src: local(Arial); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

#hospital { --inter: Inter, "Inter Fallback"; --respiro: 16px; }
@media (min-width: 80rem) { #hospital { --respiro: 0px; } }
#hospital > :is(header, .texto-e-foto) {
  padding-inline: calc(max(0px, (100% - var(--caixa)) / 2) + var(--respiro));
}

/* Topo: texto à esquerda, formulário de cotação à direita. */
#hospital > header {
  --caixa: 1140px;
  display: grid; align-items: start; padding-block: 56px;
  background-image: linear-gradient(#17181a 0%, #241010 100%);
}
#hospital > header > h1 { font-size: 30px; line-height: 1.25; font-weight: 800; color: #fff; }
#hospital > header > p { font-family: var(--inter); font-size: 17px; line-height: 1.5; color: #d7d2d2; }
#hospital > header > h1 + p { margin-top: 20px; }
#hospital > header > p + p { margin-top: 16px; }
#hospital > :is(header, .chamada) > a {
  margin-top: 20px; display: inline-block; border-radius: 2px; padding: 16px 28px;
  font-family: var(--inter); font-size: 15px; line-height: 1; font-weight: 700;
  transition: filter var(--transicao);
}
#hospital > header > a { justify-self: start; background: #8c1c1c; color: #fff; box-shadow: 0 6px 0 0 #5e0c0c; }
@media (hover: hover) { #hospital > header > a:hover { filter: brightness(1.1); } }
#hospital > header > #cotacao { margin-top: 40px; }
@media (min-width: 48rem) {
  #hospital > header {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px;
    grid-template-rows: repeat(10, auto) 1fr; padding-block: 97px;
  }
  #hospital > header > :not(#cotacao) { grid-column: 1; }
  #hospital > header > h1 { padding-top: 18px; font-size: 40px; line-height: 50px; }
  #hospital > header > #cotacao { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}

/* Linha de apoio acima dos títulos (hgroup). */
#hospital hgroup > p { font-family: var(--inter); font-size: 12.5px; line-height: 1.5; font-weight: 700; text-transform: uppercase; }

/* Texto + foto (lado da foto e fundo cinza variam). */
#hospital > .texto-e-foto { --caixa: 1296px; padding-block: 64px; background: #fff; }
#hospital > .texto-e-foto.cinza { background: #f8f8f8; }
#hospital > .texto-e-foto hgroup > p { margin-bottom: 6px; color: #8c1c1c; }
#hospital > .texto-e-foto h2 { font-size: 28px; line-height: 1.25; font-weight: 700; color: #17181a; }
#hospital > .texto-e-foto > :is(p, ul) { font-family: var(--inter); font-size: 15px; line-height: 1.5; color: #4b4e53; }
#hospital > .texto-e-foto > :is(hgroup, h2) + p { margin-top: 20px; }
#hospital > .texto-e-foto > p + p { margin-top: 16px; }
#hospital > .texto-e-foto > ul { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
#hospital > .texto-e-foto > ul > li { display: flex; align-items: center; gap: 10px; }
#hospital > .texto-e-foto > ul svg { width: 14px; height: 14px; flex-shrink: 0; color: #8c1c1c; }
#hospital > .texto-e-foto > figure { margin-top: 40px; }
#hospital > .texto-e-foto > figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
#hospital > .texto-e-foto.quadrada > figure img { aspect-ratio: auto; object-fit: fill; }
@media (min-width: 48rem) {
  /* Texto centralizado na vertical ao lado da foto: linhas 1fr nas pontas. */
  #hospital > .texto-e-foto {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px;
    grid-template-rows: 1fr repeat(10, auto) 1fr; padding-block: 100px;
  }
  #hospital > .texto-e-foto > :not(figure) { grid-column: 1; }
  #hospital > .texto-e-foto.foto-esquerda > :not(figure) { grid-column: 2; }
  #hospital > .texto-e-foto > :is(hgroup, h2) { grid-row: 2; }
  #hospital > .texto-e-foto > p:nth-of-type(1) { grid-row: 3; }
  #hospital > .texto-e-foto > p:nth-of-type(2) { grid-row: 4; }
  #hospital > .texto-e-foto > p:nth-of-type(3) { grid-row: 5; }
  #hospital > .texto-e-foto > p:nth-of-type(4) { grid-row: 6; }
  #hospital > .texto-e-foto > p:nth-of-type(5) { grid-row: 7; }
  #hospital > .texto-e-foto > p:nth-of-type(6) { grid-row: 8; }
  #hospital > .texto-e-foto > p:nth-of-type(7) { grid-row: 9; }
  #hospital > .texto-e-foto > p:nth-of-type(8) { grid-row: 10; }
  #hospital > .texto-e-foto > ul { grid-row: 11; }
  #hospital > .texto-e-foto > figure { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; }
  #hospital > .texto-e-foto.foto-esquerda > figure { grid-column: 1; }
  #hospital > .texto-e-foto h2 { font-size: 35px; line-height: 43px; }
}

/* Faixa de chamada (degradê vermelho). */
#hospital > .chamada {
  padding: 76px 16px; text-align: center;
  background-image: radial-gradient(circle, #7a1414 0%, #3e0b0b 100%);
}
#hospital > .chamada hgroup > p { color: #eab9b4; }
#hospital > .chamada h2 { margin: 16px auto 0; max-width: 572px; font-size: 28px; line-height: 1.4; font-weight: 700; color: #fff; }
#hospital > .chamada > p { margin: 20px auto 0; max-width: 629px; font-family: var(--inter); font-size: 1rem; line-height: 1.5rem; color: #e7cfce; }
#hospital > .chamada > a { background: #fff; color: #5e0c0c; box-shadow: 0 6px 0 0 rgb(0 0 0 / .25); }
@media (hover: hover) { #hospital > .chamada > a:hover { filter: brightness(.95); } }
@media (min-width: 48rem) { #hospital > .chamada h2 { font-size: 34px; line-height: 49px; } }

/* Perguntas frequentes (a primeira já aberta). */
#hospital > .perguntas { padding: 72px 16px; background: #f8f8f9; }
#hospital > .perguntas > h2 { margin-inline: auto; max-width: 426px; text-align: center; font-size: 26px; line-height: 1.3; font-weight: 700; color: #17181a; }
#hospital > .perguntas > details { margin-inline: auto; max-width: 820px; }
#hospital > .perguntas > h2 + details { margin-top: 20px; }
#hospital > .perguntas > details + details { border-top: 1px solid rgb(0 0 0 / .1); }
#hospital > .perguntas summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 15px; font-size: 1.125rem; line-height: 1.25; font-weight: 700; color: #000;
}
#hospital > .perguntas > details > p { padding: 4px 20px 15px; font-family: var(--inter); font-size: 1rem; line-height: 1.5rem; color: #4b4e53; }
@media (min-width: 48rem) {
  #hospital > .perguntas > h2 { font-size: 32px; line-height: 42px; }
  #hospital > .perguntas summary { font-size: 22px; }
}

/* Ícones +/- das perguntas (hospital e cidade). */
:is(#hospital > .perguntas, #cidade-perguntas) summary::-webkit-details-marker { display: none; }
:is(#hospital > .perguntas, #cidade-perguntas) summary::marker { content: none; }
:is(#hospital > .perguntas, #cidade-perguntas) summary > svg { width: 14px; height: 14px; flex-shrink: 0; }
#hospital > .perguntas summary > svg { color: #8c1c1c; }
:is(#hospital > .perguntas, #cidade-perguntas) details[open] > summary > svg:first-child,
:is(#hospital > .perguntas, #cidade-perguntas) details:not([open]) > summary > svg:nth-child(2) { display: none; }

/* ==========================================================================
   Página de cidade (article#cidade) - /plano-de-saude-em/<slug>
   ========================================================================== */
#cidade { --texto-landing: "Open Sans", "Open Sans Fallback"; --respiro: 16px; }
@media (min-width: 80rem) { #cidade { --respiro: 0px; } }

/* Topo com foto escurecida. */
#cidade > header {
  --caixa: 1140px;
  position: relative; overflow: hidden; min-height: 558px; background: #000;
  padding: 96px calc(max(0px, (100% - var(--caixa)) / 2) + var(--respiro)) 64px;
}
#cidade > header img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .47; }
#cidade > header > :is(p, h1, a) { position: relative; color: #fff; }
#cidade > header > p:first-of-type { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
#cidade > header > p:first-of-type > svg { width: 16px; height: 16px; flex-shrink: 0; }
#cidade > header > h1 { margin-top: 8px; font-size: 32px; line-height: 1; font-weight: 600; }
#cidade > header > h1 + p { margin-top: 20px; font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; }
#cidade > header > a {
  margin-top: 20px; display: inline-block; border-radius: 3px; background: #464646; padding: 12px 24px;
  font-size: 1rem; line-height: 1rem; font-weight: 600; text-transform: uppercase;
  transition: filter var(--transicao);
}
@media (hover: hover) { #cidade > header > a:hover { filter: brightness(1.1); } }
@media (min-width: 48rem) {
  #cidade > header { padding-top: 105px; }
  #cidade > header > :is(p, h1) { width: 540px; }
  #cidade > header > h1 { font-size: 42px; }
}

/* Apresentação: texto + foto. */
#cidade-intro {
  --caixa: 1140px; min-height: 581px; padding-block: 64px;
  padding-inline: calc(max(0px, (100% - var(--caixa)) / 2) + var(--respiro));
}
#cidade-intro > h2 { font-size: 28px; line-height: 1; font-weight: 700; color: #464646; }
#cidade-intro > p { font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; color: #7a7a7a; }
#cidade-intro > h2 + p { margin-top: 20px; }
#cidade-intro > p + p { margin-top: 16px; }
#cidade-intro > figure { margin-top: 40px; }
#cidade-intro > figure img { margin-inline: auto; width: 100%; max-width: 409px; height: auto; }
@media (min-width: 48rem) {
  #cidade-intro {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px;
    grid-template-rows: 1fr repeat(9, auto) 1fr;
  }
  #cidade-intro > :is(h2, p) { grid-column: 1; }
  #cidade-intro > h2 { grid-row: 2; max-width: 450px; font-size: 35px; }
  #cidade-intro > p:nth-of-type(1) { grid-row: 3; }
  #cidade-intro > p:nth-of-type(2) { grid-row: 4; }
  #cidade-intro > p:nth-of-type(3) { grid-row: 5; }
  #cidade-intro > p:nth-of-type(4) { grid-row: 6; }
  #cidade-intro > p:nth-of-type(5) { grid-row: 7; }
  #cidade-intro > p:nth-of-type(6) { grid-row: 8; }
  #cidade-intro > p:nth-of-type(7) { grid-row: 9; }
  #cidade-intro > p:nth-of-type(8) { grid-row: 10; }
  #cidade-intro > figure { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; }
}

/* Títulos e textos de abertura centralizados (planos e vantagens). */
:is(#cidade-planos, #cidade-vantagens) { padding-inline: var(--respiro); }
:is(#cidade-planos, #cidade-vantagens) > h2 { margin-inline: auto; text-align: center; font-size: 28px; line-height: 1; font-weight: 700; }
:is(#cidade-planos, #cidade-vantagens) > p { margin: 20px auto 0; text-align: justify; font-family: var(--texto-landing); line-height: 1.5; }
:is(#cidade-planos, #cidade-vantagens) > ul { margin-inline: auto; max-width: 1140px; display: grid; gap: 20px; }
@media (min-width: 48rem) { :is(#cidade-planos, #cidade-vantagens) > h2 { font-size: 35px; } }

/* Planos: cards com faixa colorida no topo, mesma altura, botão no rodapé.
   3 por linha no desktop; a última linha fica centralizada (5 cards = 3 + 2). */
#cidade-planos { padding-top: 64px; padding-bottom: 64px; background: var(--superficie); }
#cidade-planos > h2 { max-width: 581px; color: #464646; }
#cidade-planos > p { max-width: 935px; font-size: 18px; color: #7a7a7a; }
#cidade-planos > ul { --colunas: 1; margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
#cidade-planos > ul > li {
  --cor: #600; --cor-2: var(--primaria);
  flex: 0 0 calc((100% - (var(--colunas) - 1) * 24px) / var(--colunas));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--borda); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -12px rgb(0 0 0 / .18);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
#cidade-planos > ul > li.cinza { --cor: #4d4d4d; --cor-2: #6b6b6b; }
@media (hover: hover) {
  #cidade-planos > ul > li:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(0 0 0 / .05), 0 18px 36px -16px rgb(0 0 0 / .28); }
}
#cidade-planos > ul > li > h3 {
  padding: 22px 24px; background: linear-gradient(135deg, var(--cor), var(--cor-2));
  font-size: 20px; line-height: 1.25; font-weight: 600; color: #fff;
}
#cidade-planos > ul > li > p { margin: 20px 24px 0; font-family: var(--texto-landing); font-size: 15px; line-height: 1.6; color: #5c5c5c; }
#cidade-planos > ul > li > ul {
  margin: 18px 24px 0; padding-top: 18px; border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--texto-landing); font-size: 15px; line-height: 1.4; font-weight: 500; color: #333;
}
#cidade-planos > ul > li > ul > li { display: flex; align-items: flex-start; gap: 10px; }
#cidade-planos > ul > li > ul svg { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; color: var(--cor); }
#cidade-planos > ul > li > a {
  margin: auto 24px 24px; display: block; border-radius: 8px; padding: 14px 24px;
  background-color: var(--cor); text-align: center; font-size: .875rem; line-height: 1; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: #fff;
  transition: filter var(--transicao);
}
/* Espaço mínimo entre a lista e o botão (o margin-top: auto empurra o botão para o rodapé). */
#cidade-planos > ul > li > ul { margin-bottom: 24px; }
@media (hover: hover) { #cidade-planos > ul > li > a:hover { filter: brightness(1.15); } }
@media (min-width: 48rem) { #cidade-planos > ul { --colunas: 2; } }
@media (min-width: 64rem) { #cidade-planos > ul { --colunas: 3; } }

/* Vantagens: fundo vinho, caixas translúcidas. */
#cidade-vantagens { padding-top: 48px; padding-bottom: 56px; background: #600; color: #fff; }
#cidade-vantagens > h2 { max-width: 661px; }
#cidade-vantagens > p { max-width: 832px; font-size: 19px; }
#cidade-vantagens > hr { margin-top: 48px; border-color: rgb(255 255 255 / .1); }
#cidade-vantagens > ul { margin-top: 10px; }
#cidade-vantagens > ul > li { border-radius: 5px; background: rgb(255 255 255 / .07); padding: 15px; }
#cidade-vantagens > ul svg { height: 47px; width: auto; }
#cidade-vantagens > ul h3 { margin: 12px 0 7px; font-size: 1.25rem; line-height: 1.5rem; font-weight: 600; }
#cidade-vantagens > ul p { font-family: var(--texto-landing); font-size: 1rem; line-height: 1.5rem; }
@media (min-width: 40rem) { #cidade-vantagens > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #cidade-vantagens > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Perguntas frequentes (caixas cinza). */
#cidade-perguntas { padding: 80px 16px; }
#cidade-perguntas > details { margin-inline: auto; max-width: 878px; border-radius: .625rem; background: #d1d1d1; padding: 10px; }
#cidade-perguntas > details + details { margin-top: 20px; }
#cidade-perguntas summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 10px; font-size: 17px; line-height: 1.25; font-weight: 600; color: #000;
}
#cidade-perguntas > details > p { padding: 10px; font-size: 1rem; line-height: 1.5rem; color: #000; }

/* ---------- Página de cidade: blocos opcionais (2026-09-28) ---------- */
/* Título e abertura centralizados, como planos e vantagens. */
:is(#cidade-modalidades, #cidade-rede, #cidade-especialidades, #cidade-cidades, #cidade-acomodacao, #cidade-documentos, #cidade-passos, #cidade-cotacao) {
  padding: 64px var(--respiro);
}
:is(#cidade-modalidades, #cidade-rede, #cidade-especialidades, #cidade-cidades, #cidade-acomodacao, #cidade-documentos, #cidade-passos, #cidade-cotacao) > h2 {
  margin-inline: auto; max-width: 760px; text-align: center; font-size: 28px; line-height: 1.1; font-weight: 700; color: #464646;
}
:is(#cidade-modalidades, #cidade-rede, #cidade-especialidades, #cidade-cidades, #cidade-acomodacao, #cidade-documentos, #cidade-passos, #cidade-cotacao) > h2 + p {
  margin: 20px auto 0; max-width: 860px; text-align: center; font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; color: #7a7a7a;
}
:is(#cidade-modalidades, #cidade-rede, #cidade-especialidades, #cidade-cidades, #cidade-acomodacao, #cidade-documentos, #cidade-passos) > ul,
#cidade-passos > ol { margin: 40px auto 0; max-width: 1140px; display: grid; gap: 20px; }
/* Observação no fim do bloco. */
:is(#cidade-rede, #cidade-especialidades, #cidade-cidades, #cidade-documentos) > ul + p {
  margin: 28px auto 0; max-width: 860px; text-align: center; font-family: var(--texto-landing); font-size: 15px; line-height: 1.6; color: #7a7a7a;
}
/* Botões dos blocos (mesmo botão dos cards de plano). */
:is(#cidade-rede, #cidade-passos, #cidade-cotacao) > a, #cidade-modalidades article > a {
  display: block; width: fit-content; margin: 32px auto 0; border-radius: 3px; background: #600; padding: 12px 24px;
  font-size: .875rem; line-height: 1; font-weight: 700; text-transform: uppercase; color: #fff; transition: filter var(--transicao);
}
@media (hover: hover) { :is(#cidade-rede, #cidade-passos, #cidade-cotacao) > a:hover, #cidade-modalidades article > a:hover { filter: brightness(1.15); } }
@media (min-width: 48rem) {
  :is(#cidade-modalidades, #cidade-rede, #cidade-especialidades, #cidade-cidades, #cidade-acomodacao, #cidade-documentos, #cidade-passos, #cidade-cotacao) > h2 { font-size: 35px; }
}

/* Modalidades: cards com foto. */
#cidade-modalidades > ul > li { display: grid; }
#cidade-modalidades article { display: flex; flex-direction: column; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 2px 12px rgb(0 0 0 / .08); }
#cidade-modalidades article img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
#cidade-modalidades article > h3 { margin: 20px 20px 0; font-size: 20px; line-height: 1.25; font-weight: 600; color: #600; }
#cidade-modalidades article > p { flex: 1; margin: 10px 20px 0; font-family: var(--texto-landing); font-size: 15px; line-height: 1.6; color: #4d4d4d; }
#cidade-modalidades article > a { margin: 20px; width: auto; text-align: center; }
@media (min-width: 48rem) { #cidade-modalidades > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Rede credenciada: cards de hospitais. */
#cidade-rede { background: #fdfdfd; }
#cidade-rede > ul > li { border-left: 4px solid #600; border-radius: 5px; background: #fff; padding: 18px 20px; box-shadow: 0 1px 6px rgb(0 0 0 / .06); }
#cidade-rede > ul svg { width: 28px; height: 28px; color: #600; }
#cidade-rede > ul h3 { margin-top: 10px; font-size: 18px; line-height: 1.3; font-weight: 600; color: #464646; }
#cidade-rede > ul p { margin-top: 6px; font-family: var(--texto-landing); font-size: 15px; line-height: 1.5; color: #7a7a7a; }
@media (min-width: 40rem) { #cidade-rede > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #cidade-rede > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Especialidades e cidades: etiquetas. */
:is(#cidade-especialidades, #cidade-cidades) > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
:is(#cidade-especialidades, #cidade-cidades) > ul > li {
  display: flex; align-items: center; gap: 8px; border: 1px solid #e5e5e5; border-radius: 999px; background: #fff; padding: 8px 16px;
  font-size: 15px; font-weight: 600; color: #464646;
}
:is(#cidade-especialidades, #cidade-cidades) > ul svg { width: 16px; height: 16px; flex-shrink: 0; color: #600; }
#cidade-cidades { background: #f3f3f3; }

/* Acomodação: dois cards lado a lado. */
#cidade-acomodacao > ul { max-width: 900px; }
#cidade-acomodacao > ul > li { border-radius: 9px; background: #600; padding: 24px; color: #fff; }
#cidade-acomodacao > ul svg { width: 40px; height: 40px; }
#cidade-acomodacao > ul h3 { margin-top: 12px; font-size: 20px; font-weight: 600; }
#cidade-acomodacao > ul p { margin-top: 8px; font-family: var(--texto-landing); font-size: 16px; line-height: 1.6; color: rgb(255 255 255 / .9); }
@media (min-width: 48rem) { #cidade-acomodacao > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Documentos: três colunas com lista. */
#cidade-documentos { background: #fdfdfd; }
#cidade-documentos > ul > li { border-radius: 9px; background: #fff; padding: 22px; box-shadow: 0 1px 6px rgb(0 0 0 / .06); }
#cidade-documentos > ul h3 { border-bottom: 2px solid #600; padding-bottom: 10px; font-size: 19px; font-weight: 600; color: #600; }
#cidade-documentos > ul > li > ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
#cidade-documentos > ul > li > ul > li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--texto-landing); font-size: 15px; line-height: 1.5; color: #4d4d4d; }
#cidade-documentos > ul > li > ul svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: #600; }
@media (min-width: 48rem) { #cidade-documentos > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Como contratar: passos numerados. */
#cidade-passos > ol { counter-reset: passo; }
#cidade-passos > ol > li { counter-increment: passo; position: relative; border-radius: 9px; background: #fff; padding: 56px 20px 22px; box-shadow: 0 1px 6px rgb(0 0 0 / .06); }
#cidade-passos > ol > li::before {
  content: counter(passo); position: absolute; top: 16px; left: 20px; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: #600; font-size: 15px; font-weight: 700; color: #fff;
}
#cidade-passos > ol h3 { font-size: 18px; font-weight: 600; color: #464646; }
#cidade-passos > ol p { margin-top: 6px; font-family: var(--texto-landing); font-size: 15px; line-height: 1.5; color: #7a7a7a; }
#cidade-passos { background: #f3f3f3; }
@media (min-width: 40rem) { #cidade-passos > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #cidade-passos > ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cotação: faixa vinho. */
#cidade-cotacao { background: linear-gradient(90deg in oklab, #600, #a30825); }
#cidade-cotacao > h2, #cidade-cotacao > h2 + p { color: #fff; }
#cidade-cotacao > h2 + p { color: rgb(255 255 255 / .9); }
#cidade-cotacao > a { background: #fff; color: #600; }

/* Título opcional das perguntas frequentes. */
/* Quem pode entrar no plano (mesmo desenho dos documentos), rede por cidade, Concierge e outros estados. */
:is(#cidade-elegibilidade, #cidade-rede-completa, #cidade-concierge, #cidade-estados) { padding: 64px var(--respiro); }
:is(#cidade-elegibilidade, #cidade-rede-completa, #cidade-estados) > h2 {
  margin-inline: auto; max-width: 760px; text-align: center; font-size: 28px; line-height: 1.1; font-weight: 700; color: #464646;
}
:is(#cidade-elegibilidade, #cidade-rede-completa, #cidade-estados) > h2 + p {
  margin: 20px auto 0; max-width: 860px; text-align: center; font-family: var(--texto-landing); font-size: 18px; line-height: 1.5; color: #7a7a7a;
}
@media (min-width: 48rem) { :is(#cidade-elegibilidade, #cidade-rede-completa, #cidade-estados, #cidade-concierge) > h2 { font-size: 35px; } }

#cidade-elegibilidade > ul { margin: 40px auto 0; max-width: 900px; display: grid; gap: 20px; }
#cidade-elegibilidade > ul > li { border-radius: 9px; background: #fff; padding: 22px; box-shadow: 0 1px 6px rgb(0 0 0 / .06); }
#cidade-elegibilidade > ul h3 { border-bottom: 2px solid #600; padding-bottom: 10px; font-size: 19px; font-weight: 600; color: #600; }
#cidade-elegibilidade > ul > li > ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
#cidade-elegibilidade > ul > li > ul > li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--texto-landing); font-size: 15px; line-height: 1.5; color: #4d4d4d; }
#cidade-elegibilidade > ul > li > ul svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: #600; }
#cidade-elegibilidade > ul + p { margin: 28px auto 0; max-width: 860px; text-align: center; font-family: var(--texto-landing); font-size: 15px; line-height: 1.6; color: #7a7a7a; }
@media (min-width: 48rem) { #cidade-elegibilidade > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Rede por cidade: cada cidade abre e fecha, com tabela. */
#cidade-rede-completa { background: #fdfdfd; }
#cidade-rede-completa > p:nth-of-type(2) { margin: 12px auto 0; max-width: 860px; text-align: center; font-family: var(--texto-landing); font-size: 14px; color: #7a7a7a; }
#cidade-rede-completa abbr { text-decoration: none; font-weight: 700; color: #600; }
#cidade-rede-completa > details { margin: 12px auto 0; max-width: 900px; border: 1px solid #e5e5e5; border-radius: 9px; background: #fff; }
#cidade-rede-completa > details:first-of-type { margin-top: 36px; }
#cidade-rede-completa summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 14px 18px;
  font-size: 17px; font-weight: 600; color: #464646;
}
#cidade-rede-completa summary::-webkit-details-marker { display: none; }
#cidade-rede-completa summary::after { content: "+"; margin-left: auto; font-size: 20px; line-height: 1; color: #600; }
#cidade-rede-completa details[open] > summary::after { content: "−"; }
#cidade-rede-completa summary > svg { width: 16px; height: 16px; flex-shrink: 0; color: #600; }
#cidade-rede-completa summary > span { font-weight: 400; color: #7a7a7a; }
#cidade-rede-completa table { width: 100%; border-collapse: collapse; font-family: var(--texto-landing); font-size: 15px; }
#cidade-rede-completa caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#cidade-rede-completa thead th { background: #f3f3f3; padding: 10px 18px; text-align: left; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #7a7a7a; }
#cidade-rede-completa tbody th, #cidade-rede-completa tbody td { border-top: 1px solid #eee; padding: 10px 18px; text-align: left; vertical-align: top; color: #4d4d4d; }
#cidade-rede-completa tbody th { font-weight: 600; color: #464646; }
#cidade-rede-completa > h3 { margin: 40px auto 0; max-width: 900px; text-align: center; font-size: 22px; font-weight: 600; color: #464646; }
#cidade-rede-completa > ul { margin: 16px auto 0; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#cidade-rede-completa > ul > li { display: flex; align-items: center; gap: 8px; border: 1px solid #e5e5e5; border-radius: 999px; background: #fff; padding: 8px 16px; font-size: 15px; font-weight: 600; color: #464646; }
#cidade-rede-completa > ul svg { width: 15px; height: 15px; color: #600; }
#cidade-rede-completa > ul + p { margin: 28px auto 0; max-width: 860px; text-align: center; font-family: var(--texto-landing); font-size: 15px; line-height: 1.6; color: #7a7a7a; }

/* Concierge: faixa escura com lista. */
#cidade-concierge {
  display: grid; gap: 24px; color: #fff;
  background: linear-gradient(135deg in oklab, #350000, #600);
  padding-inline: calc(max(0px, (100% - 1140px) / 2) + var(--respiro));
}
#cidade-concierge > h2 { font-size: 28px; line-height: 1.1; font-weight: 700; }
#cidade-concierge > p { font-family: var(--texto-landing); font-size: 17px; line-height: 1.6; color: rgb(255 255 255 / .9); }
#cidade-concierge > ul { display: grid; gap: 12px; }
#cidade-concierge > ul > li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; }
#cidade-concierge > ul svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: #fff; }
@media (min-width: 64rem) {
  #cidade-concierge { grid-template-columns: 3fr 2fr; column-gap: 64px; align-items: start; }
  #cidade-concierge > :is(h2, p) { grid-column: 1; }
  #cidade-concierge > ul { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* Outros estados: links em etiquetas. */
#cidade-estados > ul { margin: 36px auto 0; max-width: 1000px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#cidade-estados a {
  display: flex; align-items: center; gap: 8px; border: 1px solid #e5e5e5; border-radius: 999px; background: #fff; padding: 8px 16px;
  font-size: 15px; font-weight: 600; color: #464646; transition: border-color var(--transicao), color var(--transicao);
}
#cidade-estados a svg { width: 15px; height: 15px; color: #600; }
@media (hover: hover) { #cidade-estados a:hover { border-color: #600; color: #600; } }

#cidade-perguntas > h2 { margin: 0 auto 40px; max-width: 878px; text-align: center; font-size: 28px; line-height: 1.1; font-weight: 700; color: #464646; }
@media (min-width: 48rem) { #cidade-perguntas > h2 { font-size: 35px; } }

/* ==========================================================================
   Listagem do blog (section#blog) - /blog, ?page=N, ?categoria=slug
   ========================================================================== */
/* Cabeçalho, cards (1/2/3 por linha) e paginação numa grade de até 72rem. */
#blog {
  --caixa: 72rem; --respiro: 1rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
  padding: 3rem calc(max(0px, (100% - var(--caixa)) / 2) + var(--respiro));
}
@media (min-width: 40rem) { #blog { --respiro: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #blog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#blog > :is(header, nav, p) { grid-column: 1 / -1; }
#blog > header { margin-bottom: .5rem; text-align: start; }
#blog > header > h1 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 700; }
#blog > header > p { margin-top: .5rem; max-width: 42rem; color: var(--texto-suave); }
#blog > header > a { margin-top: .5rem; display: inline-block; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 500; color: var(--primaria); }
@media (hover: hover) { #blog > header > a:hover { text-decoration-line: underline; } }
#blog > p { margin-top: .5rem; color: var(--texto-suave); }

/* Card: foto 16:9 no topo, textos com 1rem de respiro. */
#blog > article { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borda); border-radius: .625rem; }
#blog > article > a:first-child { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--superficie); }
#blog > article > a:first-child img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#blog > article > :not(:first-child) { margin-inline: 1rem; }
#blog > article > :nth-child(2) { margin-top: 1rem; }
#blog > article > :nth-child(n + 3) { margin-top: .5rem; }
#blog > article > :last-child { margin-bottom: 1rem; }
#blog > article > a:nth-child(2) { font-size: .75rem; line-height: calc(1 / .75); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--primaria); }
#blog > article > h2 { font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 600; }
@media (hover: hover) { #blog > article > h2 > a:hover { color: var(--primaria); } }
#blog > article > p { font-size: .875rem; line-height: calc(1.25 / .875); color: var(--texto-suave); }
#blog > article > p:not(:last-child) { flex: 1; }
#blog > article > p:last-child { font-size: .75rem; line-height: calc(1 / .75); }

/* Paginação (a página atual em destaque). */
#blog > nav { margin-top: .5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
#blog > nav > a { border-radius: .5rem; padding: .375rem .75rem; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 500; }
#blog > nav > a[aria-current] { background: var(--primaria); color: #fff; }
@media (hover: hover) { #blog > nav > a:not([aria-current]):hover { background: var(--superficie); } }

/* ==========================================================================
   Páginas institucionais e 404 (article#institucional): Sobre nós, Contato,
   Termos de Uso, Política de Privacidade - texto numa coluna de 48rem.
   ========================================================================== */
#institucional { margin-inline: auto; max-width: 48rem; padding: 3.5rem 1rem; }
@media (min-width: 40rem) { #institucional { padding: 5rem 1.5rem; } }
#institucional > h1 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 700; letter-spacing: -.025em; }
@media (min-width: 40rem) { #institucional > h1 { font-size: 2.25rem; line-height: calc(2.5 / 2.25); } }
#institucional > h1 + p { margin-top: 1rem; font-size: 1.125rem; line-height: 2rem; color: var(--texto-suave); }
#institucional > h1 + p + p { margin-top: .75rem; font-size: .75rem; line-height: 1rem; color: var(--texto-suave); }
#institucional > h1 + p + :is(section, form), #institucional > h1 + p + p + section { margin-top: 2.5rem; }
#institucional h2 { margin: 2.5rem 0 .75rem; font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 600; }
#institucional section p { margin-top: 1rem; line-height: 1.75rem; }
#institucional section ul { margin-top: .75rem; list-style: disc; padding-left: 1.5rem; line-height: 1.75rem; }
#institucional section li { margin-top: .5rem; }
#institucional strong { font-weight: 700; }
#institucional :is(section, form, h1 + p) a { font-weight: 500; color: var(--primaria); text-decoration-line: underline; text-underline-offset: 2px; }

/* Formulário de contato (3/5 da coluna no desktop, como antes). */
#contato { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { #contato { grid-template-columns: repeat(2, minmax(0, 1fr)); } #contato > :not(:has(> #name, > #email)) { grid-column: 1 / -1; } }
@media (min-width: 48rem) { #contato { width: calc((100% - 8rem) * 3 / 5 + 4rem); } }
#contato label { font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; }
#contato :is(input:not([type="checkbox"]), select, textarea) {
  margin-top: .375rem; display: block; width: 100%;
  border: 1px solid var(--borda); border-radius: calc(.625rem + 4px); background: #fff;
  padding: .75rem 1rem; font-size: 1rem; line-height: 1.5; color: var(--texto);
}
#contato textarea { resize: vertical; }
#contato :is(input, select, textarea):focus { border-color: var(--primaria); outline: none; box-shadow: 0 0 0 2px rgb(163 8 37 / .25); }
#contato [aria-invalid="true"] { border-color: #dc2626; }
#contato p:has([type="checkbox"]) label { display: flex; align-items: flex-start; gap: .75rem; font-weight: 400; line-height: 1.5rem; }
#contato [type="checkbox"] { margin-top: .25rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--primaria); }
#contato small { display: block; margin-top: .375rem; font-size: .875rem; line-height: 1.25rem; color: #dc2626; }
#contato > [role="alert"] { border: 1px solid #fecaca; border-radius: calc(.625rem + 4px); background: #fef2f2; padding: .75rem 1rem; font-size: .875rem; line-height: 1.25rem; color: #991b1b; }
#contato > button {
  justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; background-image: linear-gradient(to right, var(--primaria), var(--secundaria));
  padding: .875rem 2rem; font-size: 1rem; line-height: 1.5; font-weight: 600; color: #fff; cursor: pointer;
  transition: opacity var(--transicao);
}
#contato > button svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) { #contato > button:hover { opacity: .9; } }
#contato > button:disabled { cursor: not-allowed; opacity: .6; }
/* Confirmação no lugar do formulário. */
#institucional > [role="status"] { margin-top: 2.5rem; border: 1px solid var(--borda); border-radius: 1rem; background: var(--superficie); padding: 2rem; text-align: center; }
#institucional > [role="status"] > svg { margin-inline: auto; width: 3rem; height: 3rem; color: var(--primaria); }
#institucional > [role="status"] > h2 { margin: 1rem 0 0; }
#institucional > [role="status"] > p { margin-top: .5rem; color: var(--texto-suave); }
@media (min-width: 48rem) { #institucional > [role="status"] { width: calc((100% - 8rem) * 3 / 5 + 4rem); } }

/* ==========================================================================
   Páginas de silo (template "bsp-pilar", ex. /plano-empresarial) — 30/09/2026
   Mesmas dobras da home + migalhas + bloco "texto" (seções explicativas).
   ========================================================================== */
#migalhas { padding: .75rem calc(max(0px, (100% - var(--largura)) / 2) + var(--margem)); background: var(--superficie); border-bottom: 1px solid var(--borda); }
#migalhas ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .8125rem; line-height: 1.25rem; color: var(--texto-suave); }
#migalhas li + li::before { content: "›"; margin-right: .5rem; color: var(--texto-suave); }
#migalhas a { color: var(--primaria-escura); font-weight: 500; }
#migalhas [aria-current] { color: var(--texto); }
@media (hover: hover) { #migalhas a:hover { text-decoration-line: underline; text-underline-offset: 3px; } }

/* Seções explicativas (refeitas em 30/09/2026 a pedido do Guigo: a versão em
   coluna única, com "Fonte:" em cada bloco, parecia artigo de blog).
   Modelo: páginas de produto da bradescoseguros.com.br — título escuro com
   barra vermelha, muito branco, cartões claros. No computador: título e
   introdução à esquerda (fixos ao rolar), detalhes à direita. */
main > section.texto { padding-block: 4rem; display: grid; gap: 2rem; }
main > section.texto.cinza { background: var(--superficie); }
.texto > header > h2 {
  position: relative; padding-left: 1rem;
  font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--texto); letter-spacing: -.01em;
}
.texto > header > h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: .25rem; border-radius: 1rem; background: var(--primaria); }
.texto p { font-size: 1rem; line-height: 1.7; color: var(--texto-suave); }
.texto > header > p { margin-top: 1rem; }
.texto > header > h2 + p { margin-top: 1.25rem; }
.texto p strong, .texto li strong { color: var(--texto); font-weight: 600; }
.texto p a, .texto li a, .texto figcaption a, .texto aside a { color: var(--primaria); font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.texto > div { display: grid; gap: 1.5rem; align-content: start; }

/* lista simples */
.texto ul:not(.cartoes) { display: grid; gap: .75rem; }
.texto ul:not(.cartoes) > li { display: flex; gap: .625rem; align-items: flex-start; line-height: 1.6; color: var(--texto-suave); }
.texto ul:not(.cartoes) > li > svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .25rem; color: var(--primaria); }

/* "Rótulo: explicação" em cartões */
.texto ul.cartoes { display: grid; gap: 1rem; }
.texto ul.cartoes > li { display: grid; gap: .375rem; align-content: start; padding: 1.25rem 1.25rem 1.375rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
.texto ul.cartoes > li > strong { font-size: 1rem; line-height: 1.4; font-weight: 700; color: var(--texto); }
.texto ul.cartoes > li > span { font-size: .9375rem; line-height: 1.6; color: var(--texto-suave); }
@media (min-width: 40rem) { .texto ul.cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* passo a passo */
.texto ol { display: grid; gap: 0; counter-reset: passo; }
.texto ol > li { counter-increment: passo; position: relative; padding: 0 0 1.5rem 3.25rem; line-height: 1.6; color: var(--texto-suave); }
.texto ol > li::before {
  content: counter(passo); position: absolute; left: 0; top: -.125rem; z-index: 1;
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%;
  background: var(--fundo); border: 2px solid var(--primaria); color: var(--primaria); font-size: .875rem; font-weight: 700;
}
.texto ol > li:not(:last-child)::after { content: ""; position: absolute; left: 1.0625rem; top: 2rem; bottom: 0; width: 2px; translate: -50% 0; background: var(--borda); }
.texto ol > li:last-child { padding-bottom: 0; }

/* subtítulos em blocos separados por fio */
.texto article { display: grid; gap: .875rem; padding-top: 1.5rem; border-top: 1px solid var(--borda); }
.texto > div > article:first-child { padding-top: 0; border-top: 0; }
.texto article > h3 { font-size: 1.125rem; line-height: 1.4; font-weight: 700; color: var(--texto); }

/* observação */
.texto aside { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid color-mix(in oklab, var(--primaria) 18%, #fff); border-radius: var(--raio-card); background: color-mix(in oklab, var(--primaria) 4%, #fff); }
.texto aside > svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: var(--primaria); }
.texto aside p { font-size: .9375rem; line-height: 1.6; color: var(--texto); }

/* botão de chamada (só o parágrafo marcado como .acao) */
.texto p.acao > a {
  display: inline-flex; border-radius: var(--raio); padding: .875rem 1.75rem; text-decoration: none;
  font-size: .875rem; font-weight: 600; color: #fff; background: var(--primaria); transition: background-color var(--transicao);
}
@media (hover: hover) { .texto p.acao > a:hover { background: var(--primaria-escura); } }

/* tabelas: claras, rolam dentro da figura (nunca a página) */
.texto figure { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
.texto figure:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.texto table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.45; }
.texto caption { caption-side: top; padding: 1rem 1.25rem .5rem; text-align: left; font-size: .9375rem; font-weight: 700; color: var(--texto); }
.texto thead th { padding: .75rem 1.25rem; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primaria); border-bottom: 2px solid var(--primaria); white-space: nowrap; }
.texto tbody th, .texto tbody td { padding: .875rem 1.25rem; text-align: left; vertical-align: top; border-top: 1px solid var(--borda); }
.texto tbody tr:first-child > * { border-top: 0; }
.texto tbody th { font-weight: 600; color: var(--texto); }
.texto tbody td { color: var(--texto-suave); }
.texto figcaption { padding: .875rem 1.25rem; font-size: .8125rem; line-height: 1.5; color: var(--texto-suave); background: var(--superficie); border-top: 1px solid var(--borda); }
.texto.cinza figcaption { background: #fafafa; }
.texto figure.larga table { min-width: 46rem; }
.texto figure.larga td { font-variant-numeric: tabular-nums; }
@media (max-width: 39.99rem) {
  .texto figure:not(.larga) table { font-size: .8125rem; }
  .texto figure:not(.larga) :is(th, td) { padding: .75rem .625rem; }
  .texto figure:not(.larga) :is(th, td):first-child { padding-left: .875rem; }
  .texto figure:not(.larga) thead th { white-space: normal; }
}

@media (min-width: 40rem) {
  main > section.texto { padding-block: 5rem; }
  .texto > header > h2 { font-size: 1.875rem; }
}
@media (min-width: 64rem) {
  main > section.texto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; row-gap: 3rem; }
  .texto > header { position: sticky; top: 8rem; align-self: start; }
  .texto > figure.larga { grid-column: 1 / -1; }
}
.texto > header { text-align: left; max-width: none; margin-inline: 0; }
.texto ul.cartoes > li > span::first-letter { text-transform: uppercase; }
.texto:has(> figure.larga) > header { position: static; }

/* Serviços que vêm com o plano (páginas de silo) — foto grande + cartões */
#servicos { display: grid; gap: 2rem; padding-block: 4rem; background: var(--fundo); grid-template-areas: "cab" "foto" "lista"; }
#servicos > header { grid-area: cab; }
#servicos > header > h2 { position: relative; padding-left: 1rem; font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
#servicos > header > h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: .25rem; border-radius: 1rem; background: var(--primaria); }
#servicos > header > p { margin-top: 1rem; line-height: 1.7; color: var(--texto-suave); }
#servicos > figure { grid-area: foto; overflow: hidden; border-radius: var(--raio-foto); background: var(--superficie); aspect-ratio: 4 / 3; }
#servicos > figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#servicos > ul { grid-area: lista; display: grid; gap: 1rem; }
#servicos li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-content: start; padding: 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
#servicos li > span { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in oklab, var(--primaria) 8%, #fff); color: var(--primaria); }
#servicos li > span > svg { width: 1.375rem; height: 1.375rem; }
#servicos li > h3 { align-self: center; font-size: 1rem; line-height: 1.4; font-weight: 700; color: var(--texto); }
#servicos li > p { margin-top: .25rem; font-size: .9375rem; line-height: 1.6; color: var(--texto-suave); }
@media (min-width: 40rem) {
  #servicos { padding-block: 5rem; }
  #servicos > header > h2 { font-size: 1.875rem; }
  #servicos > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #servicos > figure { aspect-ratio: 16 / 9; }
}
@media (min-width: 64rem) {
  #servicos { grid-template-columns: 26rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "foto cab" "foto lista"; column-gap: 4rem; row-gap: 2rem; }
  #servicos > figure { aspect-ratio: auto; height: 100%; min-height: 32rem; }
}
#servicos > header { text-align: left; max-width: none; margin-inline: 0; }
#servicos > figure img { object-position: 50% 15%; }

/* Rede credenciada em PDF (páginas das linhas, /plano-empresarial/<linha>) —
   30/09/2026. Um iframe com o PDF oficial do estado escolhido (site.js troca o
   endereço); a lista completa de links fica num <details> embaixo. */
#rede-pdf { display: grid; gap: 1.5rem; padding-block: 4rem; background: var(--fundo); }
#rede-pdf > header > h2 { position: relative; padding-left: 1rem; font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
#rede-pdf > header > h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: .25rem; border-radius: 1rem; background: var(--primaria); }
#rede-pdf > header { text-align: left; max-width: 48rem; margin-inline: 0; }
#rede-pdf > header > p { margin-top: 1rem; line-height: 1.7; color: var(--texto-suave); }
#rede-pdf > header strong { color: var(--texto); font-weight: 600; }
#rede-pdf > form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.5rem; padding: 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--superficie); }
#rede-pdf > form > label { display: grid; gap: .375rem; flex: 1 1 16rem; font-size: .8125rem; font-weight: 600; color: var(--texto); }
#rede-pdf select { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid #c9c9c9; border-radius: var(--raio); background: var(--fundo); font: inherit; font-size: 1rem; font-weight: 400; color: var(--texto); }
#rede-pdf fieldset { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
#rede-pdf legend { width: 100%; margin-bottom: .375rem; font-size: .8125rem; font-weight: 600; color: var(--texto); }
#rede-pdf fieldset > label { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid #c9c9c9; border-radius: 999px; font-size: .9375rem; color: var(--texto); cursor: pointer; }
#rede-pdf fieldset > label:has(:checked) { border-color: var(--primaria); background: color-mix(in oklab, var(--primaria) 8%, #fff); color: var(--primaria-escura); font-weight: 600; }
#rede-pdf input[type="radio"] { accent-color: var(--primaria); width: 1rem; height: 1rem; }
#rede-pdf :is(select, input):focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
#rede-pdf > figure { overflow: hidden; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
#rede-pdf iframe { display: block; width: 100%; height: 70vh; min-height: 28rem; max-height: 56rem; border: 0; background: #525659; }
#rede-pdf figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding: .875rem 1.25rem; border-top: 1px solid var(--borda); font-size: .875rem; line-height: 1.5; color: var(--texto-suave); }
#rede-pdf figcaption > a { display: inline-flex; border-radius: var(--raio); padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; color: #fff; background: var(--primaria); text-decoration: none; transition: background-color var(--transicao); }
@media (hover: hover) { #rede-pdf figcaption > a:hover { background: var(--primaria-escura); } }
#rede-pdf > aside { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid color-mix(in oklab, var(--primaria) 18%, #fff); border-radius: var(--raio-card); background: color-mix(in oklab, var(--primaria) 4%, #fff); }
#rede-pdf > aside > svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: var(--primaria); }
#rede-pdf > aside p { font-size: .9375rem; line-height: 1.6; color: var(--texto); }
#rede-pdf > details { border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
#rede-pdf summary { padding: 1rem 1.25rem; font-weight: 600; color: var(--texto); cursor: pointer; }
#rede-pdf details ul { display: grid; gap: .25rem 2rem; padding: 0 1.25rem 1.25rem; }
#rede-pdf details li { display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding: .5rem 0; border-top: 1px solid var(--borda); font-size: .9375rem; }
#rede-pdf details li > strong { flex: 1 1 100%; color: var(--texto); font-weight: 600; }
#rede-pdf details a { color: var(--primaria); font-weight: 500; text-decoration-line: underline; text-underline-offset: 3px; }
@media (min-width: 40rem) {
  #rede-pdf { padding-block: 5rem; }
  #rede-pdf > header > h2 { font-size: 1.875rem; }
  #rede-pdf details ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { #rede-pdf details ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* celular: o navegador costuma não desenhar PDF dentro de iframe; o botão vira o caminho principal */
@media (max-width: 47.99rem) { #rede-pdf iframe { height: 60vh; min-height: 22rem; } #rede-pdf figcaption > a { flex: 1 1 100%; justify-content: center; } }

/* cartões de linha com link para a página da linha */
#categorias h3 > a { color: inherit; text-decoration: none; }
#categorias h3 > a::after { content: " ›"; color: var(--primaria); }
#categorias article:has(h3 > a) { position: relative; }
#categorias h3 > a::before { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { #categorias article:has(h3 > a):hover h3 { color: var(--primaria); } }

/* Cartões de hospitais da rede (páginas das linhas) — 30/09/2026.
   Foto real só com licença livre (crédito sobre a foto); sem foto, faixa
   ilustrada com ícone e cidade. */
section.hospitais-cards { display: grid; gap: 2rem; padding-block: 4rem; background: var(--fundo); }
section.hospitais-cards.cinza { background: var(--superficie); }
.hospitais-cards > header { text-align: left; max-width: 48rem; margin-inline: 0; }
.hospitais-cards > header > h2 { position: relative; padding-left: 1rem; font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
.hospitais-cards > header > h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: .25rem; border-radius: 1rem; background: var(--primaria); }
.hospitais-cards > header > p { margin-top: 1rem; line-height: 1.7; color: var(--texto-suave); }
.hospitais-cards > header strong { color: var(--texto); font-weight: 600; }
.hospitais-cards > ul { display: grid; gap: 1.25rem; }
.hospitais-cards article { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: box-shadow var(--transicao), transform var(--transicao); }
@media (hover: hover) { .hospitais-cards article:hover { box-shadow: 0 10px 24px -12px rgb(0 0 0 / .25); transform: translateY(-2px); } }
.hospitais-cards figure { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--superficie); }
.hospitais-cards figure img { width: 100%; height: 100%; object-fit: cover; }
.hospitais-cards figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: .25rem .5rem; border-top-left-radius: var(--raio); font-size: .6875rem; line-height: 1.3; color: #fff; background: rgb(0 0 0 / .55); }
.hospitais-cards figcaption a { color: #fff; text-decoration-line: underline; text-underline-offset: 2px; }
/* sem foto livre: faixa baixa e clara com a cidade (as fotos reais continuam em destaque) */
.hospitais-cards article > div[data-sem-foto] {
  display: flex; align-items: center; gap: .75rem; height: 4.5rem; padding-inline: 1.25rem;
  color: var(--primaria); background: color-mix(in oklab, var(--primaria) 6%, #fff); border-bottom: 1px solid color-mix(in oklab, var(--primaria) 12%, #fff);
}
.hospitais-cards article > div[data-sem-foto] > svg { width: 1.75rem; height: 1.75rem; }
.hospitais-cards article > div[data-sem-foto] > span { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hospitais-cards article > div[data-sem-foto] > span > svg { width: .875rem; height: .875rem; }
.hospitais-cards article > div:not([data-sem-foto]) { display: grid; align-content: start; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem; }
.hospitais-cards article > div > p:first-child { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primaria); }
.hospitais-cards article > div > p:first-child > svg { width: .875rem; height: .875rem; }
.hospitais-cards h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; color: var(--texto); }
.hospitais-cards article p { font-size: .875rem; line-height: 1.55; color: var(--texto-suave); }
.hospitais-cards article p strong { color: var(--texto); font-weight: 600; }
.hospitais-cards article ul { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .25rem; }
.hospitais-cards article ul > li { padding: .25rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--primaria-escura); background: color-mix(in oklab, var(--primaria) 8%, #fff); }
.hospitais-cards > p { font-size: .8125rem; line-height: 1.6; color: var(--texto-suave); }
.hospitais-cards > aside { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid color-mix(in oklab, var(--primaria) 18%, #fff); border-radius: var(--raio-card); background: color-mix(in oklab, var(--primaria) 4%, #fff); }
.hospitais-cards > aside > svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: var(--primaria); }
.hospitais-cards > aside p { font-size: .9375rem; line-height: 1.6; color: var(--texto); }
@media (min-width: 40rem) {
  section.hospitais-cards { padding-block: 5rem; }
  .hospitais-cards > header > h2 { font-size: 1.875rem; }
  .hospitais-cards > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .hospitais-cards > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hospitais-cards > p > small { font-size: .6875rem; color: var(--texto-suave); }
.hospitais-cards > p > small a { color: inherit; text-decoration-line: underline; text-underline-offset: 2px; }
.texto > header > h1 { position: relative; padding-left: 1rem; font-size: 1.75rem; line-height: 1.25; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
.texto > header > h1::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: .25rem; border-radius: 1rem; background: var(--primaria); }
@media (min-width: 40rem) { .texto > header > h1 { font-size: 2.25rem; } }
/* links dentro de tabelas das páginas de silo (ex.: termos "Top" → linha atual) */
.texto td a, .texto th a { color: var(--primaria); font-weight: 600; text-decoration-line: underline; text-underline-offset: 3px; }

/* Endereço e como chegar (páginas de hospital, /rede-credenciada/...) — 01/10/2026.
   Cartão com o endereço (NAP) e botões para Maps/Waze; sem mapa embutido. */
#endereco { display: grid; gap: 1.5rem; padding-block: 4rem; background: var(--superficie); }
#endereco > header { max-width: 48rem; }
#endereco > header > h2 { position: relative; padding-left: 1rem; font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
#endereco > header > h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: .25rem; border-radius: 1rem; background: var(--primaria); }
#endereco > header > p { margin-top: 1rem; line-height: 1.7; color: var(--texto-suave); }
#endereco > header strong { color: var(--texto); font-weight: 600; }
#endereco > div { display: grid; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--borda); border-left: 4px solid var(--primaria); border-radius: var(--raio-card); background: var(--fundo); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
#endereco address { display: grid; gap: .75rem; font-style: normal; }
#endereco address > p:first-child { font-size: 1.125rem; font-weight: 700; color: var(--texto); }
#endereco address > p:not(:first-child) { display: flex; align-items: flex-start; gap: .625rem; line-height: 1.6; color: var(--texto); }
#endereco address svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: var(--primaria); }
#endereco address a { color: var(--primaria); font-weight: 600; text-decoration-line: underline; text-underline-offset: 3px; }
#endereco .acao { display: flex; flex-wrap: wrap; gap: .75rem; }
#endereco .acao > a { display: inline-flex; justify-content: center; flex: 1 1 12rem; border-radius: var(--raio); padding: .75rem 1.25rem; font-weight: 600; text-decoration: none; transition: background-color var(--transicao); }
#endereco .acao > a:first-child { color: #fff; background: var(--primaria); }
#endereco .acao > a:last-child { color: var(--primaria); border: 1px solid var(--primaria); background: var(--fundo); }
@media (hover: hover) { #endereco .acao > a:first-child:hover { background: var(--primaria-escura); } #endereco .acao > a:last-child:hover { background: color-mix(in oklab, var(--primaria) 8%, #fff); } }
#endereco small { font-size: .8125rem; color: var(--texto-suave); }
#endereco > aside { padding: 1.25rem 1.5rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
#endereco > aside > h3 { font-size: 1rem; font-weight: 700; color: var(--texto); }
#endereco > aside li { padding-block: .625rem; border-top: 1px solid var(--borda); line-height: 1.6; color: var(--texto); }
#endereco > aside li:first-child { margin-top: .75rem; }
#endereco > aside li > span { display: block; font-size: .875rem; color: var(--texto-suave); }
@media (min-width: 64rem) {
  #endereco { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; column-gap: 2rem; padding-block: 5rem; }
  #endereco > header { grid-column: 1 / -1; }
  #endereco > header > h2 { font-size: 1.875rem; }
}
#endereco > header { text-align: left; margin-inline: 0; }

/* Fotos do hospital e especialidades (páginas /rede-credenciada/...) — 01/10/2026 */
#galeria-hospital, #especialidades-hospital { display: grid; gap: 2rem; padding-block: 4rem; background: var(--fundo); }
#especialidades-hospital { background: var(--superficie); }
:is(#galeria-hospital, #especialidades-hospital) > header { text-align: left; max-width: 48rem; margin-inline: 0; }
:is(#galeria-hospital, #especialidades-hospital) > header > h2 { position: relative; padding-left: 1rem; font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
:is(#galeria-hospital, #especialidades-hospital) > header > h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: .25rem; border-radius: 1rem; background: var(--primaria); }
:is(#galeria-hospital, #especialidades-hospital) > header > p { margin-top: 1rem; line-height: 1.7; color: var(--texto-suave); }
#galeria-hospital > ul { display: grid; gap: 1rem; }
#galeria-hospital figure { position: relative; height: 100%; overflow: hidden; border-radius: var(--raio-foto); background: var(--superficie); }
#galeria-hospital figure img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
#galeria-hospital figcaption { position: absolute; inset: auto 0 0 0; padding: 2rem 1rem .875rem; font-size: .875rem; line-height: 1.4; font-weight: 500; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .65)); }
@media (min-width: 40rem) { #galeria-hospital > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } #galeria-hospital > ul > li:first-child { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  #galeria-hospital, #especialidades-hospital { padding-block: 5rem; }
  :is(#galeria-hospital, #especialidades-hospital) > header > h2 { font-size: 1.875rem; }
  #galeria-hospital > ul { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: 30rem; }
  #galeria-hospital > ul > li:first-child { grid-column: 1; grid-row: 1 / span 2; }
  #galeria-hospital figure img { aspect-ratio: auto; }
}
#especialidades-hospital > ul { display: grid; gap: 1rem; }
#especialidades-hospital > ul > li { padding: 1.25rem 1.25rem 1.5rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
#especialidades-hospital h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: var(--texto); }
#especialidades-hospital h3 > svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--primaria); }
#especialidades-hospital li li { position: relative; padding: .3125rem 0 .3125rem 1rem; font-size: .9375rem; line-height: 1.5; color: var(--texto-suave); }
#especialidades-hospital li li::before { content: ""; position: absolute; left: 0; top: .8em; width: .375rem; height: .375rem; border-radius: 50%; background: var(--primaria); }
#especialidades-hospital li ul { margin-top: .75rem; }
#especialidades-hospital > aside { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid color-mix(in oklab, var(--primaria) 18%, #fff); border-radius: var(--raio-card); background: color-mix(in oklab, var(--primaria) 4%, #fff); }
#especialidades-hospital > aside > svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: var(--primaria); }
#especialidades-hospital > aside p { font-size: .9375rem; line-height: 1.6; color: var(--texto); }
@media (min-width: 40rem) { #especialidades-hospital > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #especialidades-hospital > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* galeria com só 2 fotos: duas colunas iguais */
@media (min-width: 64rem) {
  #galeria-hospital > ul:has(> li:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 24rem; }
  #galeria-hospital > ul:has(> li:nth-child(2):last-child) > li:first-child { grid-row: auto; }
}
/* cartão de hospital com link para a página do hospital: cartão inteiro clicável */
.hospitais-cards article:has(h3 > a) { position: relative; }
.hospitais-cards h3 > a { color: inherit; text-decoration: none; }
.hospitais-cards h3 > a::after { content: " ›"; color: var(--primaria); }
.hospitais-cards h3 > a::before { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .hospitais-cards article:has(h3 > a):hover h3 { color: var(--primaria); } }

/* Página /solicitar-cotacao (formulário de cotação do Plus) — 01/10/2026 */
#pedir-cotacao { display: grid; gap: 2rem; padding-block: 3rem 4rem; background: var(--superficie); }
#pedir-cotacao > header { max-width: 48rem; }
#pedir-cotacao > header > h1 { font-size: 1.75rem; line-height: 1.25; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
#pedir-cotacao > header > p { margin-top: .875rem; line-height: 1.7; color: var(--texto-suave); }
#pedir-cotacao > form, #pedir-cotacao > [role="status"] { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--borda); border-top: 4px solid var(--primaria); border-radius: var(--raio-card); background: var(--fundo); box-shadow: 0 10px 30px -18px rgb(0 0 0 / .3); }
#pedir-cotacao fieldset { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; margin: 0; padding: 0; }
#pedir-cotacao legend { width: 100%; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; color: var(--texto); }
#pedir-cotacao fieldset > label { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid #c9c9c9; border-radius: 999px; font-size: .9375rem; color: var(--texto); cursor: pointer; }
#pedir-cotacao fieldset > label:has(:checked) { border-color: var(--primaria); background: color-mix(in oklab, var(--primaria) 8%, #fff); color: var(--primaria-escura); font-weight: 600; }
#pedir-cotacao input[type="radio"] { accent-color: var(--primaria); width: 1rem; height: 1rem; }
#pedir-cotacao form > p { display: grid; gap: .375rem; }
#pedir-cotacao form label { font-size: .875rem; font-weight: 600; color: var(--texto); }
#pedir-cotacao form label > span { font-weight: 400; color: var(--texto-suave); }
#pedir-cotacao :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) { width: 100%; min-height: 2.75rem; padding: .625rem .75rem; border: 1px solid #c9c9c9; border-radius: var(--raio); background: var(--fundo); font: inherit; font-size: 1rem; color: var(--texto); }
#pedir-cotacao textarea { resize: vertical; }
#pedir-cotacao :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
#pedir-cotacao [aria-invalid="true"] { border-color: #c62828; }
#pedir-cotacao form small { font-size: .8125rem; line-height: 1.5; color: var(--texto-suave); }
#pedir-cotacao form > p > small { color: #c62828; }
#pedir-cotacao button[type="submit"] { min-height: 3rem; border: 0; border-radius: var(--raio); background: var(--primaria); font: inherit; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer; transition: background-color var(--transicao); }
@media (hover: hover) { #pedir-cotacao button[type="submit"]:hover { background: var(--primaria-escura); } }
#pedir-cotacao button[disabled] { opacity: .7; cursor: wait; }
#pedir-cotacao > [role="status"] { text-align: center; justify-items: center; padding-block: 2.5rem; }
#pedir-cotacao > [role="status"] > svg { width: 64px; height: 64px; padding: 16px; border-radius: 9999px; background: #25d366; fill: none; stroke: #fff; stroke-width: 3; }
#pedir-cotacao > [role="status"] > h3 { font-size: 1.25rem; font-weight: 700; color: var(--texto); }
#pedir-cotacao > [role="status"] > p { color: var(--texto-suave); }
#pedir-cotacao > [role="status"] > a { display: inline-flex; border-radius: var(--raio); background: #25d366; padding: .75rem 1.5rem; font-weight: 600; color: #fff; }
#pedir-cotacao > aside { align-self: start; padding: 1.5rem; border-radius: var(--raio-card); background: var(--secundaria); color: #fff; }
#pedir-cotacao > aside > h2 { font-size: 1.125rem; font-weight: 700; }
#pedir-cotacao > aside li { display: flex; gap: .875rem; padding-top: 1.25rem; }
#pedir-cotacao > aside li > svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .125rem; color: #ffb3c1; }
#pedir-cotacao > aside li strong { display: block; font-weight: 600; }
#pedir-cotacao > aside li p { margin-top: .25rem; font-size: .9375rem; line-height: 1.6; color: rgb(255 255 255 / .82); }
@media (min-width: 48rem) { #pedir-cotacao form { grid-template-columns: 1fr 1fr; } #pedir-cotacao form > :is(fieldset, p:has(textarea), button, small, p:has(#cot-hospital)) { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  #pedir-cotacao { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 2.5rem; padding-block: 4rem 5rem; }
  #pedir-cotacao > header { grid-column: 1 / -1; }
  #pedir-cotacao > header > h1 { font-size: 2.25rem; }
}
#pedir-cotacao > header { text-align: left; margin-inline: 0; }

/* ==========================================================================
   Post do blog (04/10/2026, pedido do Guigo: os posts caíam no modelo genérico
   do CMS). Abertura com linha fina e metadados; no computador, índice "Neste
   artigo" e cartão de cotação fixos à esquerda e o texto em coluna de leitura.
   ========================================================================== */
#artigo-topo { padding-block: 2.25rem 2rem; border-bottom: 1px solid var(--borda); }
#artigo-topo > * { max-width: 52rem; }
#artigo-topo > p:first-child {
  display: inline-flex; padding: .25rem .75rem; border-radius: 999px;
  font-size: .75rem; line-height: 1.25rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primaria); background: color-mix(in oklab, var(--primaria) 8%, #fff);
}
#artigo-topo > h1 { margin-top: 1rem; font-size: 1.875rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--texto); }
#artigo-topo > h1 + p { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.65; color: var(--texto-suave); }
#artigo-topo > div { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); display: grid; gap: 1rem; }
#artigo-topo > div > p { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .875rem; line-height: 1.4; color: var(--texto-suave); }
#artigo-topo > div > p > span { display: inline-flex; align-items: center; gap: .375rem; }
#artigo-topo > div > p svg { flex: none; width: 1rem; height: 1rem; color: var(--primaria); }
#artigo-topo strong { font-weight: 600; color: var(--texto); }
#artigo-topo > figure { margin-top: 2rem; overflow: hidden; border-radius: var(--raio-foto); }
#artigo-topo > figure img { width: 100%; height: auto; }
#compartilhar { display: flex; flex-wrap: wrap; gap: .5rem; }
#compartilhar :is(a, button) {
  display: inline-flex; align-items: center; padding: .375rem .875rem; border: 1px solid var(--borda); border-radius: 999px;
  font: inherit; font-size: .8125rem; font-weight: 500; color: var(--texto); background: var(--fundo); cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}
@media (hover: hover) { #compartilhar :is(a, button):hover { border-color: var(--primaria); color: var(--primaria); } }

#artigo { display: grid; gap: 1.5rem; padding-block: 2rem 4rem; }
#artigo > aside { display: grid; gap: 1.25rem; align-content: start; }
#indice { border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
#indice > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; font-size: .9375rem; font-weight: 700; color: var(--texto); }
#indice > summary::-webkit-details-marker { display: none; }
#indice > summary > svg { width: 1rem; height: 1rem; color: var(--primaria); transition: rotate var(--transicao); }
#indice[open] > summary > svg { rotate: 180deg; }
#indice > ol { display: grid; padding: 0 1.25rem 1.125rem; }
#indice a > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 2.8em; }
#indice a { display: block; padding: .3125rem 0 .3125rem .875rem; border-left: 2px solid var(--borda); font-size: .8125rem; line-height: 1.4; color: var(--texto-suave); transition: color var(--transicao), border-color var(--transicao); }
#indice a[aria-current="true"] { border-left-color: var(--primaria); color: var(--primaria); font-weight: 600; }
@media (hover: hover) { #indice a:hover { color: var(--texto); } }
#chamada-cotacao { margin-top: 3rem !important; display: grid; gap: .625rem; padding: 1.75rem 1.5rem; border-radius: var(--raio-card); color: #fff; background: linear-gradient(135deg, var(--secundaria), var(--primaria-escura)); }
#artigo-texto #chamada-cotacao > p:first-child { font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: #fff; }
#artigo-texto #chamada-cotacao > p + p { margin: 0 !important; font-size: .9375rem; line-height: 1.6; color: rgb(255 255 255 / .88); }
#artigo-texto #chamada-cotacao > a { margin-top: .5rem !important; justify-self: start; display: inline-flex; padding: .8125rem 1.5rem; border-radius: var(--raio); text-decoration: none; font-size: .875rem; font-weight: 600; color: var(--primaria); background: #fff; transition: background-color var(--transicao); }
@media (hover: hover) { #artigo-texto #chamada-cotacao > a:hover { background: #f3e6e8; } }

/* texto do post (Markdown do CMS) */
#artigo-texto { min-width: 0; font-size: 1.0625rem; line-height: 1.75; color: #333; }
#artigo-texto > * + *, #artigo-texto section > * + *, #artigo-texto details > div > * + * { margin-top: 1.25rem; }
#artigo-texto > section { margin-top: 3rem; scroll-margin-top: 8rem; }
#artigo-texto h2 {
  position: relative; padding-left: 1rem;
  font-size: 1.5rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--texto);
}
#artigo-texto h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: .25rem; border-radius: 1rem; background: var(--primaria); }
#artigo-texto section > h3 { margin-top: 2rem; font-size: 1.1875rem; line-height: 1.4; font-weight: 700; color: var(--texto); }
#artigo-texto strong { font-weight: 600; color: var(--texto); }
#artigo-texto a { color: var(--primaria); font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#artigo-texto ul > li { position: relative; padding-left: 1.5rem; }
#artigo-texto ul > li::before { content: ""; position: absolute; left: .3rem; top: .72em; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--primaria); }
#artigo-texto :is(ul, ol) > li + li { margin-top: .625rem; }
#artigo-texto ol { counter-reset: passo; }
#artigo-texto ol > li { counter-increment: passo; position: relative; min-height: 2rem; padding-left: 2.875rem; }
#artigo-texto ol > li::before {
  content: counter(passo); position: absolute; left: 0; top: .125rem;
  display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%;
  border: 2px solid var(--primaria); color: var(--primaria); font-size: .8125rem; line-height: 1; font-weight: 700;
}
#artigo-texto figure { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
#artigo-texto table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
#artigo-texto thead th { padding: .75rem 1.125rem; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primaria); border-bottom: 2px solid var(--primaria); background: color-mix(in oklab, var(--primaria) 3%, #fff); }
#artigo-texto tbody td { padding: .875rem 1.125rem; vertical-align: top; color: var(--texto-suave); border-top: 1px solid var(--borda); }
#artigo-texto tbody tr:first-child > td { border-top: 0; }
#artigo-texto tbody td:first-child { font-weight: 600; color: var(--texto); }
@media (max-width: 39.99rem) {
  #artigo-texto table { font-size: .8125rem; }
  #artigo-texto :is(th, td) { padding: .75rem .625rem; }
}

/* perguntas frequentes em acordeão */
#artigo-texto > section.faq { padding: 1.75rem 1.25rem; border-radius: var(--raio-card); background: var(--superficie); }
#artigo-texto .faq details { padding: 1rem 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); }
#artigo-texto .faq details + details { margin-top: .75rem; }
#artigo-texto .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-size: 1rem; line-height: 1.5; font-weight: 700; color: var(--texto); }
#artigo-texto .faq summary::-webkit-details-marker { display: none; }
#artigo-texto .faq summary::after { content: "+"; flex: none; font-size: 1.375rem; line-height: 1; font-weight: 400; color: var(--primaria); transition: rotate var(--transicao); }
#artigo-texto .faq details[open] summary::after { rotate: 45deg; }
#artigo-texto .faq details > div { margin-top: .75rem; font-size: .9875rem; line-height: 1.7; }

/* leia também */
#leia-tambem { padding-block: 3.5rem 4.5rem; border-top: 1px solid var(--borda); background: var(--superficie); }
#leia-tambem > h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--texto); }
#leia-tambem > ul { margin-top: 1.75rem; display: grid; gap: 1rem; }
#leia-tambem a { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); transition: border-color var(--transicao), box-shadow var(--transicao); }
#leia-tambem a img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio); }
#leia-tambem a > span:first-of-type { font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--texto); }
#leia-tambem a > span:last-child { margin-top: auto; display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--primaria); }
#leia-tambem a > span:last-child svg { width: 1rem; height: 1rem; }
@media (hover: hover) { #leia-tambem a:hover { border-color: color-mix(in oklab, var(--primaria) 35%, #fff); box-shadow: 0 6px 18px rgb(0 0 0 / .06); } }
@media (min-width: 40rem) {
  #artigo-topo > h1 { font-size: 2.25rem; }
  #leia-tambem > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #artigo-texto > section.faq { padding: 2rem 1.75rem; }
}
@media (min-width: 64rem) {
  #artigo-topo { padding-block: 3rem 2.5rem; }
  #artigo-topo > h1 { font-size: 2.625rem; }
  #artigo { grid-template-columns: 17.5rem minmax(0, 46rem); column-gap: 4rem; padding-block: 3rem 5rem; }
  #artigo > aside { position: sticky; top: 8rem; align-self: start; max-height: calc(100vh - 9rem); overflow-y: auto; scrollbar-width: none; }
  #artigo > aside::-webkit-scrollbar { display: none; }
  #indice > summary { cursor: default; pointer-events: none; }
  #indice > summary > svg { display: none; }
  #chamada-cotacao { padding: 2rem; }
  #leia-tambem > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== Listagem do blog (/blog, src/paginas/blog.mjs) ===== */
#blog-lista { padding-block: 2.5rem 4.5rem; }
#blog-lista > ul { display: grid; gap: 1rem; }
#blog-lista a { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--fundo); transition: border-color var(--transicao), box-shadow var(--transicao); }
#blog-lista a img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio); }
#blog-lista a > span:first-of-type { font-size: 1.125rem; line-height: 1.4; font-weight: 700; color: var(--texto); }
#blog-lista a > span:nth-of-type(2):not(:last-child) { font-size: .9375rem; line-height: 1.6; color: var(--texto-suave); }
#blog-lista time { font-size: .8125rem; color: var(--texto-suave); }
#blog-lista a > span:last-child { margin-top: auto; display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--primaria); }
#blog-lista a > span:last-child svg { width: 1rem; height: 1rem; }
@media (hover: hover) { #blog-lista a:hover { border-color: color-mix(in oklab, var(--primaria) 35%, #fff); box-shadow: 0 6px 18px rgb(0 0 0 / .06); } }
@media (min-width: 48rem) { #blog-lista > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { #blog-lista > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Simulador de coparticipação (P113, 05/10/2026) ---------- */
#simulador { display: grid; gap: 1.5rem; padding-block: 3rem 3.5rem; background: var(--superficie); }
#simulador > header { text-align: left; max-width: 48rem; }
#simulador > header > h2 { font-size: 1.75rem; line-height: 1.25; }
#simulador > header > p { margin-top: .75rem; line-height: 1.7; color: var(--texto-suave); }
#simulador > form { display: grid; gap: 1rem; align-content: start; padding: 1.5rem; border: 1px solid var(--borda); border-top: 4px solid var(--primaria); border-radius: var(--raio-card); background: var(--fundo); }
#simulador form > p { display: grid; gap: .375rem; }
#simulador label { display: grid; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--texto); }
#simulador label > span:not(:first-child), #simulador form > p > label > span { font-weight: 400; color: var(--texto-suave); }
#simulador :is(input, select) { width: 100%; min-height: 2.75rem; padding: .625rem .75rem; border: 1px solid #c9c9c9; border-radius: var(--raio); background: #fff; font: inherit; font-size: 1rem; font-weight: 400; color: var(--texto); }
#simulador :is(input, select, button):focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
#simulador [data-itens] { display: grid; gap: .875rem; }
#simulador fieldset { display: grid; gap: .75rem; margin: 0; padding: 1rem; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--superficie); }
#simulador legend { padding-inline: .375rem; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primaria); }
#simulador [hidden] { display: none; }
#simulador [data-remover] { justify-self: start; min-height: 2.25rem; padding: .25rem .75rem; border: 0; background: none; font: inherit; font-size: .875rem; color: var(--primaria); text-decoration: underline; cursor: pointer; }
#simulador [data-adicionar] { justify-self: start; min-height: 2.75rem; padding: .5rem 1rem; border: 1px dashed var(--primaria); border-radius: var(--raio); background: #fff; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--primaria); cursor: pointer; }
#simulador .exemplos > p { font-size: .875rem; font-weight: 600; color: var(--texto); }
#simulador .exemplos ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
#simulador .exemplos button { min-height: 2.5rem; padding: .375rem .875rem; border: 1px solid #c9c9c9; border-radius: 9999px; background: #fff; font: inherit; font-size: .875rem; color: var(--texto); cursor: pointer; }
@media (hover: hover) { #simulador .exemplos button:hover, #simulador [data-adicionar]:hover { border-color: var(--primaria); background: color-mix(in oklab, var(--primaria) 6%, #fff); } }
#simulador [data-resultado] { align-self: start; padding: 1.5rem; border-radius: var(--raio-card); background: var(--secundaria); color: #fff; }
#simulador [data-resultado] h3 { font-size: 1.125rem; font-weight: 700; }
#simulador [data-resultado] > p { margin-top: .75rem; line-height: 1.6; color: rgb(255 255 255 / .85); }
#simulador [data-resultado] table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .9375rem; }
#simulador [data-resultado] :is(th, td) { padding: .625rem 0; border-bottom: 1px solid rgb(255 255 255 / .18); text-align: left; vertical-align: top; }
#simulador [data-resultado] td { padding-left: 1rem; text-align: right; white-space: nowrap; font-weight: 600; }
#simulador [data-resultado] th small { display: block; margin-top: .125rem; font-size: .8125rem; font-weight: 400; color: rgb(255 255 255 / .75); }
#simulador [data-resultado] tfoot :is(th, td) { border-bottom: 0; padding-top: .875rem; font-size: 1.125rem; font-weight: 700; }
#simulador [data-resultado] .compara { padding: .875rem 1rem; border-radius: var(--raio); background: rgb(255 255 255 / .1); color: #fff; }
#simulador > aside { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-left: 4px solid var(--primaria); border-radius: var(--raio); background: #fff; font-size: .9375rem; line-height: 1.6; color: var(--texto-suave); }
#simulador > aside > svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--primaria); }
@media (min-width: 40rem) { #simulador fieldset { grid-template-columns: 1fr 1fr; } #simulador fieldset > [data-remover] { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  #simulador { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 2rem; }
  #simulador > header, #simulador > aside { grid-column: 1 / -1; }
  #simulador [data-resultado] { position: sticky; top: 6rem; }
}

/* Tabela extra-larga (06/10/2026, páginas de região): passa da coluna de texto e usa a largura da tela. */
.texto figure.larga.extra table { min-width: 60rem; }
.texto figure.larga.extra :is(td, thead th:not(:first-child)) { text-align: center; }
.texto figure.larga.extra td:nth-child(2) { text-align: left; white-space: nowrap; }
@media (min-width: 64rem) {
  .texto > figure.larga.extra { width: min(calc(100vw - 4rem), 88rem); max-width: none; justify-self: center; }
}