/* ══════════════════════════════════════════════════════════════
   Início — assistência médica
════════════════════════════════════════════════════════════════ */

/* ─── Capa ────────────────────────────────────────────────────── */
/* A capa sangra até a borda, mas o texto tem de nascer na mesma coluna
   do .shell. `cqw` mede a largura da própria seção — sem barra de rolagem
   no meio da conta, o que `100vw` não garante. */
.capa {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  --calha: max(var(--pad-x), calc((100cqw - var(--shell)) / 2 + var(--pad-x)));
}
/* A coluna de texto precisa caber o título em duas linhas e os dois botões
   em uma. Abaixo de ~1.2fr o título quebra em três linhas. */
.capa__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  min-height: min(76vh, 40rem);
}
.capa__texto {
  padding: clamp(2rem, 3.6vw, 3rem) clamp(2rem, 3.5vw, 3.5rem) clamp(2rem, 3.2vw, 2.75rem) var(--calha);
  display: grid;
  align-content: center;
  gap: var(--s-6);
}
.capa__lead { max-width: 52ch; }

.capa__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

.capa__estado {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-body);
  color: var(--paper-84);
}
.capa__estado a {
  font-variant-numeric: var(--num-tabular);
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 1px;
}
.capa__estado a:hover { border-bottom-color: var(--amber); }
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.capa__estado:has([data-aberto="false"]) .pulso { background: var(--paper-38); }
@media (prefers-reduced-motion: no-preference) {
  .capa__estado:has([data-aberto="true"]) .pulso { animation: bater 2.4s var(--ease) infinite; }
}
@keyframes bater {
  0%, 72%, 100% { opacity: 1; }
  84% { opacity: 0.25; }
}

/* Prova em rotação */
.prova {
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s-5);
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-4);
  max-width: 44ch;
}
.prova__pager { display: flex; gap: 2px; }
.prova__pager button {
  position: relative;
  width: 2.75rem;
  padding-block: var(--s-2) var(--s-3);
  font-family: var(--face-display);
  font-size: var(--t-caption);
  font-variant-numeric: var(--num-tabular);
  color: var(--paper-58);
  text-align: left;
  transition: color var(--t-fast) var(--ease);
}
.prova__pager button::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--rule-dark-soft);
}
.prova__pager button:hover { color: var(--paper-84); }
.prova__pager button[aria-selected="true"] { color: var(--white); }
.prova__pager button[aria-selected="true"]::after {
  background: var(--amber);
  transform-origin: left;
  animation: correr 5600ms linear both;
}
.prova[data-pausa="true"] .prova__pager button[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes correr { from { scale: 0 1; } to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) {
  .prova__pager button[aria-selected="true"]::after { animation: none; }
}

.prova__texto {
  font-size: var(--t-body-l);
  color: var(--paper-84);
  min-height: calc(var(--lh-text) * 2em);
}

/* Foto */
.capa__foto { position: relative; border-left: 1px solid var(--rule-dark); }
.capa__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 26%;
}

/* ─── Faixa de indicadores ──────────────────────────────────────
   Sem fio entre as colunas: a separação é o vão. Fio vertical em quatro
   colunas de texto curto virava grade de tabela e pesava a leitura.      */
.faixa { border-bottom: 1px solid var(--rule); }
.faixa__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8);
}
.faixa__item {
  padding-block: var(--s-6);
  display: grid;
  align-content: start;
  gap: var(--s-2);
}
.faixa__num { font-size: var(--t-h1); line-height: 1.1; }
.faixa__rot { color: var(--ink-76); max-width: 26ch; }

/* ─── 01 · Dados ──────────────────────────────────────────────── */
.dados {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8);
  border-top: 1px solid var(--rule);
}
.dado { padding-block: var(--s-6); }
.dado__num { font-size: var(--t-display); line-height: 1; }
.dado__rot {
  font-family: var(--face-display);
  font-size: var(--t-body);
  margin-top: var(--s-4);
}
.dado__txt { color: var(--ink-76); margin-top: var(--s-2); }

.fonte {
  margin-top: var(--s-10);
  font-size: var(--t-caption);
  line-height: 1.6;
  color: var(--ink-66);
  max-width: 84ch;
}
.fonte--dark { color: var(--paper-58); }

/* ─── 02 · Produtos ───────────────────────────────────────────── */
/* Dois painéis lado a lado, um claro e um Azul Principal: a diferença de
   fundo separa a natureza dos dois produtos sem precisar de enfeite. */
/* Subgrid: as cinco faixas (selo, nome, texto, itens, link) são declaradas
   no pai, e cada painel as herda. Assim título, lista e link ficam na mesma
   linha nos dois lados, mesmo com textos de tamanhos diferentes.
   O fio entre eles é borda do primeiro painel, não `gap` sobre fundo — com
   `row-gap` o fundo do pai apareceria como faixa cinza atravessando tudo. */
.produtos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr auto;
  row-gap: var(--s-4);
}
.produto {
  position: relative;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  background: var(--paper);
  border-top: 3px solid var(--cor);
  padding: var(--s-6) var(--s-6) var(--s-8);
  transition: background var(--t-mid) var(--ease);
}
.produtos > .produto:first-child { border-right: 1px solid var(--rule); }
.produto:hover { background: var(--field); }
.produto--integra { background: var(--navy); color: var(--white); }
.produto--integra:hover { background: #0a2545; }

.produto__num {
  position: absolute;
  top: var(--s-6);
  right: var(--s-8);
  font-size: var(--t-caption);
  color: var(--ink-66);
}
.produto--integra .produto__num { color: var(--paper-58); }

.produto__selo { width: 4.5rem; height: auto; align-self: center; }
.produto__nome { padding-right: var(--s-8); }
.produto--integra .produto__nome { color: var(--white); }
.produto__txt { color: var(--ink-76); max-width: 42ch; }
.produto--integra .produto__txt { color: var(--paper-84); }

.produto__itens {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.produto--integra .produto__itens { border-top-color: var(--rule-dark); }
.produto__itens li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--ink-76);
}
.produto--integra .produto__itens li { color: var(--paper-84); }
.produto__itens li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 10px; height: 1px;
  background: var(--cor);
}
.produto--integra .produto__itens li::before { background: var(--amber); }
.produto__itens b {
  font-family: var(--face-display);
  font-weight: 700;
  color: var(--ink);
  margin-right: var(--s-2);
}
.produto--integra .produto__itens b { color: var(--white); }

.produto__ir {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: end;
  justify-self: start;
  color: var(--cor);
  font-size: var(--t-body);
  transition: gap var(--t-fast) var(--ease);
}
.produto--integra .produto__ir { color: var(--amber); }
.produto:hover .produto__ir { gap: calc(var(--s-2) + 5px); }

/* ─── 03 · O que está incluso ─────────────────────────────────── */
.item__q { padding-block: var(--s-5); }
.item__cab {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
}
.item__n { font-size: var(--t-body); color: var(--ink-66); }
.item__t { display: grid; gap: var(--s-1); }
.item__mini {
  font-family: var(--face-text);
  font-size: var(--t-body);
  letter-spacing: 0;
  color: var(--ink-66);
}
.item__a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s-8);
  padding: 0 0 var(--s-6) calc(2.75rem + var(--s-4));
  align-items: start;
}
.item__txt { display: grid; gap: var(--s-4); color: var(--ink-76); max-width: 52ch; }
.item__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ─── 04 · Coparticipação ─────────────────────────────────────── */
.tabela { border-top: 1px solid var(--rule-dark); }
.tabela__cab, .tabela__linha {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule-dark-soft);
  align-items: baseline;
}
.tabela__cab {
  font-size: var(--t-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--paper-58);
  padding-block: var(--s-3);
}
.tabela__cab > :not(:first-child),
.tabela__linha > :not(:first-child) { text-align: right; }
.tabela__item small {
  display: block;
  font-size: var(--t-caption);
  color: var(--paper-58);
  margin-top: 2px;
}
.tabela__linha .num { font-size: var(--t-body-l); }
.tabela__linha .num small {
  font-family: var(--face-text);
  font-size: var(--t-caption);
  color: var(--paper-58);
  margin-left: 2px;
}
.tabela__forte { color: var(--amber); }

/* Régua 40/60 — mesma lógica de divisor em coluna que a faixa de dados
   acima (borda entre colunas, não gap solto), para manter o mesmo ritmo
   visual nas duas seções de informação lado a lado da página. */
.regua {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-10);
  margin-top: var(--s-10);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule-dark);
  align-items: start;
}
.regua__saida { padding-left: var(--s-10); border-left: 1px solid var(--rule-dark); }
.regua__entrada { display: grid; gap: var(--s-4); }
.regua__campo { margin-top: var(--s-2); max-width: 20rem; }
.regua__input {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 3.75rem;
  padding-inline: var(--s-4);
  background: var(--field-dark);
  border: 1px solid var(--rule-dark);
  transition: border-color var(--t-fast) var(--ease);
}
.regua__input:focus-within { border-color: var(--amber); }
.regua__input i { font-style: normal; color: var(--paper-58); }
.regua__input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--face-display);
  font-size: var(--t-h1);
  font-variant-numeric: var(--num-tabular);
  color: var(--white);
}
.regua__input input:focus { outline: none; }
.regua__input input::-webkit-outer-spin-button,
.regua__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.regua__input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.regua__barra {
  display: flex;
  height: 3.25rem;
  border: 1px solid var(--rule-dark);
}
.regua__parte {
  display: grid;
  place-items: center;
  flex: var(--frac);
  font-family: var(--face-display);
  font-size: var(--t-caption);
  font-style: normal;
  letter-spacing: var(--track-caption);
}
.regua__parte--colab { background: var(--amber); color: var(--navy); }
.regua__parte--pn { background: rgb(247 244 239 / 0.14); color: var(--white); }

.regua__valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin: var(--s-5) 0 0;
}
.regua__valores dt {
  font-size: var(--t-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--paper-58);
  margin-bottom: var(--s-2);
}
.regua__valores dd { margin: 0; font-size: var(--t-h1); }
.regua__valores div:first-child dd { color: var(--amber); }

/* A régua carrega informação, não enfeite: nada de revelação ligada ao
   scroll, que a deixaria pela metade justamente na hora da leitura. */

/* ─── 05 · Implantação ────────────────────────────────────────── */
.passos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.passo {
  position: relative;
  padding: var(--s-6) var(--s-6) var(--s-8) 0;
  display: grid;
  align-content: start;
  gap: var(--s-3);
}
.passo::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
}
.passo__quando { color: var(--accent); }
.passo__txt { color: var(--ink-76); }

@media (prefers-reduced-motion: no-preference) {
  /* Uma vez só, como as entradas: ligada ao scroll a barra se desfazia
     quando o visitante subia a página. */
  .passo::before { scale: 0 1; transition: scale var(--t-slow) var(--ease-out); }
  .passo.is-in::before { scale: 1 1; }
}
.passo::before { transform-origin: left; }

/* ─── 06 · Relatos ────────────────────────────────────────────── */
.relatos { border-top: 1px solid var(--rule); padding-top: var(--s-8); }
.relato__fala {
  font-family: var(--face-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  max-width: 38ch;
  text-wrap: pretty;
}
.relato__pe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-8);
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.relato__quem strong { display: block; }
.relato__quem span { font-size: var(--t-body); }
.relato__nav { display: flex; align-items: center; gap: var(--s-3); }
.relato__nav button {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.relato__nav button:hover { border-color: var(--navy); background: var(--field); }

/* ─── 07 · Dúvidas ────────────────────────────────────────────── */
.duvidas {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--s-16);
  align-items: start;
}
.duvidas__trilhos {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--rule);
  position: sticky;
  top: calc(var(--nav-h) + var(--s-8));
}
.duvidas__trilhos button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  text-align: left;
  color: var(--ink-66);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.duvidas__trilhos button:hover { color: var(--ink); }
.duvidas__trilhos button.is-ativo { color: var(--ink); border-left-color: var(--accent); }
.duvidas__lista { border-top: 1px solid var(--rule); }

/* ─── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 64rem) {
  .capa__grade { grid-template-columns: 1fr; min-height: 0; }
  .capa__texto { padding-inline: var(--calha) var(--calha); }
  .capa__foto { border-left: 0; border-top: 1px solid var(--rule-dark); aspect-ratio: 16 / 9; }
  .capa__foto img { position: static; height: 100%; }
  .prova { max-width: none; }

  .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .produtos { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .produtos > .produto:first-child { border-right: 0; }
  .produto {
    grid-row: auto;
    grid-template-rows: none;
    align-content: start;
    gap: var(--s-4);
  }
  .item__a { grid-template-columns: 1fr; padding-left: 0; }
  .item__foto { max-width: 32rem; }

  .regua { grid-template-columns: 1fr; gap: var(--s-8); }
  .regua__saida { padding-left: 0; border-left: 0; padding-top: var(--s-8); border-top: 1px solid var(--rule-dark); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo:nth-child(n + 3) { border-top: 1px solid var(--rule); padding-top: var(--s-6); }

  .duvidas { grid-template-columns: 1fr; gap: var(--s-8); }
  .duvidas__trilhos {
    position: static;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-top: 0;
    border-bottom: 1px solid var(--rule);
    scrollbar-width: none;
    /* Esmaece a borda direita para avisar que a trilha continua */
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    scroll-snap-type: x proximity;
  }
  .duvidas__trilhos button { scroll-snap-align: start; }
  .duvidas__trilhos::-webkit-scrollbar { display: none; }
  .duvidas__trilhos button {
    border-bottom: 2px solid transparent;
    border-left: 0;
    padding: var(--s-3) var(--s-5) var(--s-3) 0;
    white-space: nowrap;
  }
  .duvidas__trilhos button.is-ativo { border-bottom-color: var(--accent); }
  .duvidas__lista { border-top: 0; }
}

@media (max-width: 40rem) {
  /* A capa perde a prova rotativa: os mesmos quatro fatos aparecem logo
     abaixo, na faixa de indicadores, e ali ficam todos visíveis de uma vez. */
  .prova { display: none; }
  .capa__acoes { gap: var(--s-2); }
  .capa__acoes .btn { flex: 1 1 100%; }
  .capa__foto { aspect-ratio: 4 / 3; }

  /* Painéis de largura cheia perdem o recuo lateral: no celular todo o
     conteúdo nasce na mesma coluna do resto da página. O painel escuro do
     Integra mantém o seu, porque o fundo precisa respirar. */
  .produto { padding-inline: 0; }
  .produto__num { right: 0; }
  .produto__nome { padding-right: var(--s-10); }
  .produto--integra { padding-inline: var(--s-5); }
  .produto--integra .produto__num { right: var(--s-5); }

  .faixa__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }

  /* Cada dado vira uma linha compacta: número à esquerda, leitura à direita */
  .dados { grid-template-columns: 1fr; }
  .dado {
    display: grid;
    /* Coluna fixa: cada .dado é uma grade própria, então min-content mediria
       cada linha isolada e o texto ficaria desalinhado entre elas.
       5.75rem cabe o maior valor da série ("R$ 3,20" = 88px). */
    grid-template-columns: 5.75rem minmax(0, 1fr);
    gap: var(--s-1) var(--s-5);
    padding-block: 0;
  }
  .dado__num {
    grid-row: span 2;
    font-size: var(--t-h1);
    white-space: nowrap;
  }
  .dado__rot { margin-top: 0; }
  .dado__txt { margin-top: 0; }

  .passos { grid-template-columns: 1fr; }
  .passo { padding-right: 0; }
  .passo:not(:first-child) { border-top: 1px solid var(--rule); padding-top: var(--s-6); }

  .regua__valores { grid-template-columns: 1fr; gap: var(--s-4); }

  /* Tabela vira lista rotulada */
  .tabela__cab { display: none; }
  .tabela__linha {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding-block: var(--s-5);
  }
  /* Rótulo à esquerda; valor e sufixo permanecem juntos à direita.
     `space-between` espalharia os três em pontos diferentes da linha. */
  .tabela__linha > :not(:first-child) {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    text-align: left;
    font-size: var(--t-body);
  }
  .tabela__linha > :not(:first-child)::before {
    content: attr(data-rot);
    margin-right: auto;
    font-family: var(--face-text);
    font-weight: 500;
    font-size: var(--t-caption);
    letter-spacing: var(--track-caption);
    text-transform: uppercase;
    color: var(--paper-58);
  }
  .tabela__item { margin-bottom: var(--s-2); }
}