/* ==========================================================================
   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-child { position: relative; display: block; flex-shrink: 0; width: 10rem; height: 2.5rem; margin-block: 1.25rem; }
body > header > a:first-child img { width: 100%; height: 100%; object-fit: contain; object-position: left; }
@media (min-width: 40rem) { body > header > a:first-child { 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: nowrap; }
  body > header > nav:not([id]) { display: block; }
  body > header > a[href="/solicitar-cotacao"] { display: inline-flex; }
  body > header > button, #menu-movel { display: none; }
}

/* ---------- 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: 75% center; 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; }
}

/* 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; }
}

/* ---------- Rodapé ---------- */
/* Grade de ponta a ponta: as margens laterais são colunas (--g), o conteúdo
   fica no meio (--c) e a faixa do aviso final ocupa a largura toda. */
body > footer {
  --g: calc(max(0px, (100% - var(--largura)) / 2) + var(--margem));
  --c: calc(100% - 2 * var(--g));
  display: grid;
  grid-template-columns: var(--g) minmax(0, 1fr) var(--g);
  grid-template-areas: ". logo ." ". planos ." ". institucional ." ". linha ." ". estados ." ". hospitais ." "aviso aviso aviso";
  margin-top: auto; padding-top: 3.5rem; background: var(--cinza); color: #fff;
}
body > footer > a:first-child { grid-area: logo; position: relative; display: block; width: 11rem; height: 2.5rem; }
body > footer > a:first-child img { width: 100%; height: 100%; object-fit: contain; object-position: left; filter: brightness(0) invert(1); }
#rodape-planos { grid-area: planos; margin-top: 2.5rem; }
#rodape-institucional { grid-area: institucional; margin-top: 2.5rem; }
/* Linha entre as colunas e a rede credenciada (só na largura do conteúdo). */
body > footer::before { content: ""; grid-area: linha; margin-top: 2.5rem; border-top: 1px solid rgb(255 255 255 / .15); }
#rodape-estados { grid-area: estados; margin-top: 2rem; }
#rodape-hospitais { grid-area: hospitais; margin-top: 2rem; }

body > footer nav > p { font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
body > footer nav > ul { margin-top: 1rem; }
#rodape-planos li + li, #rodape-institucional li + li { margin-top: .625rem; }
#rodape-planos a, #rodape-institucional a, #rodape-institucional button {
  font-size: .875rem; line-height: calc(1.25 / .875); color: rgb(255 255 255 / .85);
  text-underline-offset: 4px; text-align: left; transition: color var(--transicao);
}
#rodape-estados ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: .375rem; }
#rodape-hospitais li + li { margin-top: .375rem; }
#rodape-estados a, #rodape-hospitais a { font-size: .75rem; line-height: 1rem; color: rgb(255 255 255 / .75); text-underline-offset: 4px; }
@media (hover: hover) {
  body > footer nav a:hover, body > footer nav button:hover { color: #fff; text-decoration-line: underline; }
}

/* Aviso final: faixa escura de ponta a ponta, texto na largura do conteúdo. */
body > footer > p {
  grid-area: aviso; margin-top: 3.5rem;
  padding: 1rem calc(max(0px, (100% - var(--largura)) / 2) + var(--margem));
  border-top: 1px solid rgb(255 255 255 / .15); background: rgb(0 0 0 / .4);
  text-align: center; font-size: .75rem; line-height: 1.25rem; color: rgb(255 255 255 / .8);
}
body > footer > p > small { font-size: inherit; }

@media (min-width: 40rem) {
  body > footer {
    grid-template-columns: var(--g) calc((var(--c) - 2.5rem) / 2) 2.5rem minmax(0, 1fr) var(--g);
    grid-template-areas:
      ". logo . planos ."
      ". institucional . . ."
      ". linha linha linha ."
      ". estados estados estados ."
      ". hospitais hospitais hospitais ."
      "aviso aviso aviso aviso aviso";
  }
  #rodape-planos { margin-top: 0; }
  #rodape-estados ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  /* Linha 1: três colunas com 2.5rem entre elas; linha 2: 2fr/1fr com 2rem.
     As trilhas abaixo são as fronteiras das duas grades sobrepostas. */
  body > footer {
    grid-template-columns:
      var(--g) calc((var(--c) - 5rem) / 3) 2.5rem calc((var(--c) - 6.5rem) / 3) .5rem 1.5rem 1rem calc((var(--c) - 5rem) / 3) var(--g);
    grid-template-areas:
      ". logo . planos planos . . institucional ."
      ". linha linha linha linha linha linha linha ."
      ". estados estados estados . . hospitais hospitais ."
      "aviso aviso aviso aviso aviso aviso aviso aviso aviso";
  }
  #rodape-institucional { margin-top: 0; }
}

/* ---------- 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. */
#cidade-planos { padding-top: 64px; padding-bottom: 40px; background: #fdfdfd; }
#cidade-planos > h2 { max-width: 581px; color: #464646; }
#cidade-planos > p { max-width: 935px; font-size: 18px; color: #7a7a7a; }
#cidade-planos > ul { margin-top: 48px; align-items: start; }
/* Card: 20px de respiro; o corpo branco começa abaixo dos cantos da faixa. */
#cidade-planos > ul > li { padding: 20px; background: linear-gradient(transparent 9px, #fff 9px) content-box; }
#cidade-planos > ul > li > h3 { border-radius: 9px 9px 0 0; padding: 15px 10px; font-size: 19px; line-height: 1; font-weight: 600; color: #fff; }
#cidade-planos > ul > li > :is(p, ul) { margin: 10px 10px 0; padding: 6px; font-family: var(--texto-landing); font-size: 15px; line-height: 1.5; color: #4d4d4d; }
#cidade-planos > ul > li > ul { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
#cidade-planos > ul > li > ul > li { display: flex; align-items: center; gap: 10px; }
#cidade-planos > ul > li > ul svg { width: 18px; height: 18px; flex-shrink: 0; color: #600; }
#cidade-planos > ul > li > a {
  margin: 20px 10px 10px; display: block; border-radius: 3px; padding: 12px 24px;
  text-align: center; font-size: .875rem; line-height: 1; font-weight: 700; text-transform: uppercase; color: #fff;
  transition: filter var(--transicao);
}
@media (hover: hover) { #cidade-planos > ul > li > a:hover { filter: brightness(1.1); } }
#cidade-planos > ul > li.vinho > :is(h3, a) { background-color: #600; }
#cidade-planos > ul > li.cinza > :is(h3, a) { background-color: #4d4d4d; }
@media (min-width: 48rem) { #cidade-planos > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 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; }

/* ==========================================================================
   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); } }