/* ==========================================================================
   Plano de Cuidado (plano-de-cuidado.html) — medidas do PSD PLANO DE CUIDADO.psd (1920 px).
   Percentuais = px / 1920. Faixas de y citadas nos comentários são as do PSD.
   ========================================================================== */

/* Respiros desta página (menores que na Home): título → texto ≈ 31 px; texto → botão ≈ 24 px.
   Só redefinem as variáveis lidas por .titulo + .texto e .texto + .botao do style.css. */
.processo, .mapa, .caminho { --espaco-titulo-texto: clamp(16px, 1.65vw, 32px); }
.caminho { --espaco-texto-botao: clamp(16px, 1.25vw, 24px); }

/* ---------- Hero: "Não é uma consulta. É um processo." (y 95–1069; foto 210–970) ---------- */
.processo {
  padding-top: clamp(48px, 6vw, 115px);       /* cabeçalho → topo da foto (115 px) */
  padding-bottom: clamp(40px, 5.15vw, 99px);  /* base da foto → faixa marrom (99 px) */
}
.processo__grid {
  display: grid;
  grid-template-columns: 507fr 828fr;         /* foto 507 px | bloco de texto 828 px (x 217–1685) */
  gap: clamp(32px, 6.9vw, 133px);
  align-items: center;
  padding-left: clamp(16px, 11.3vw, 217px);
  padding-right: clamp(16px, 12.24vw, 235px);
}
.processo__foto { aspect-ratio: 507 / 760; }
.processo__texto { padding-top: clamp(0px, 3.2vw, 62px); }   /* bloco de texto fica 31 px abaixo do centro da foto */
.processo__titulo { line-height: 1.2; }                       /* Branch 76 px → 91 px (entrelinha automática do PSD) */
/* Os títulos acompanham a largura da coluna (76 px = 3.96vw; 67.4 px = 3.51vw) para manter as
   quebras de linha do PSD em 1440/1200; abaixo de 992 voltam ao token compartilhado. */
.processo__titulo, .mapa__titulo { font-size: min(var(--tam-titulo-g), 3.96vw); }
.caminho__titulo { font-size: min(var(--tam-titulo), 3.51vw); }
.processo__texto .texto { max-width: 828px; margin-left: auto; }
.processo__indicador { margin-top: clamp(24px, 2.65vw, 51px); }

/* ---------- Faixa marrom: "Você recebe um mapa." (faixa y 1069–2016; foto 1034–2038) ---------- */
.mapa { position: relative; z-index: 1; }     /* a foto sobrepõe as seções vizinhas */
.mapa__grid {
  display: grid;
  grid-template-columns: 615fr 669fr;         /* texto 615 px (x 219–834) | foto 669 px (x 1035–1704) */
  gap: clamp(32px, 10.45vw, 201px);
  align-items: center;
  padding-left: clamp(16px, 11.4vw, 219px);
  padding-right: clamp(16px, 11.25vw, 216px);
}
.mapa__foto {
  aspect-ratio: 669 / 1004;
  margin-top: -1.823vw;                        /* vaza 35 px acima da faixa… */
  margin-bottom: -1.146vw;                     /* …e 22 px abaixo (a foto define a altura da faixa: 947 px) */
}
.mapa__titulo { line-height: 1.2; }           /* Branch 76 px → 92 px */
.mapa__texto .texto { max-width: 615px; }

/* ---------- Programas de acompanhamento (y 2016–2720; título 2195–2317; logos 2458–2595) ---------- */
.programas {
  --u: calc(100vw / 1920);                     /* 1 px do PSD em unidades de viewport (escala dos logos) */
  padding-top: clamp(64px, 8.85vw, 170px);     /* base da faixa → caixa do título */
  padding-bottom: clamp(56px, 8.2vw, 157px);   /* "Exclusivo…" → foto da seção seguinte */
}
.programas__titulo { max-width: 820px; margin-inline: auto; }   /* 800 px no PSD; com a Branch real "ACOMPANHAMENTO ELOS" passava 1 px e ia para 3 linhas */
.programas__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);       /* logo central em x 960; laterais em ≈ 470 e 1450 (PSD: 482 / 1462) */
  align-items: start;
  width: 100%;
  max-width: calc(1470px + 2 * var(--margem-lateral));
  margin: clamp(40px, 6.55vw, 126px) auto 0;   /* título → topo dos logos */
  padding-inline: var(--margem-lateral);
}
.programas__item { display: flex; flex-direction: column; align-items: center; }
.programas__logo { width: auto; max-width: 100%; height: auto; }
/* Tamanhos e deslocamentos verticais dos logos (topos em y 2481 / 2461 / 2458 no PSD) */
.programas__item--cuidado .programas__logo { width: min(calc(272 * var(--u)), 272px); margin-top: min(calc(23 * var(--u)), 23px); }
.programas__item--essencial .programas__logo { width: min(calc(433 * var(--u)), 433px); margin-top: min(calc(3 * var(--u)), 3px); }
.programas__item--diamante .programas__logo { width: min(calc(413 * var(--u)), 413px); }
.programas__nota { max-width: 280px; margin-top: clamp(8px, 0.75vw, 14px); text-align: center; }

/* ---------- CTA final: "O cuidado é contínuo." (foto 2803–3696; texto 3009–3489) ---------- */
.caminho { padding-bottom: clamp(48px, 5.1vw, 98px); }   /* base da foto → rodapé (98 px) */
.caminho__grid {
  display: grid;
  grid-template-columns: 594fr 596fr;          /* foto 594 px (x 276–870) | texto 596 px (até x 1619) */
  gap: clamp(32px, 7.97vw, 153px);
  align-items: center;
  padding-left: clamp(16px, 14.375vw, 276px);
  padding-right: clamp(16px, 15.68vw, 301px);
}
.caminho__foto { aspect-ratio: 594 / 893; }
.caminho__texto .texto { max-width: 596px; margin-left: auto; }
.caminho__botao { min-height: 53px; padding: 0.48em 1.1em; }   /* pílula 425 × 53, padding ≈ 13 / 30 px */

/* ---------- Responsivo ---------- */
@media (max-width: 992px) {
  .processo__grid, .mapa__grid, .caminho__grid {
    grid-template-columns: 1fr;
    padding-inline: var(--margem-lateral);
    gap: 32px;
  }
  .processo__foto, .mapa__foto, .caminho__foto { max-width: 560px; }
  .processo { padding-bottom: clamp(56px, 8vw, 80px); }
  .processo__texto { padding-top: 0; }
  .processo__titulo, .mapa__titulo { font-size: var(--tam-titulo-g); }
  .caminho__titulo { font-size: var(--tam-titulo); }
  .processo__texto .texto, .caminho__texto .texto { margin-left: 0; }
  .mapa__foto { order: -1; margin: -24px 0 0; }     /* foto antes do texto; mantém um leve "vazamento" no topo */
  .mapa__texto { padding-bottom: clamp(40px, 8vw, 72px); }
  .programas { --u: calc(100vw / 1440); }
}
@media (max-width: 768px) {
  .programas { --u: calc(100vw / 620); }
  .programas__lista { grid-template-columns: 1fr; gap: clamp(32px, 8vw, 56px); }
  .programas__item--cuidado .programas__logo, .programas__item--essencial .programas__logo { margin-top: 0; }
}