/* ==========================================================================
   Home (index.html) — medidas do PSD HOME.psd (1920 px). Percentuais = px / 1920.
   ========================================================================== */

/* ---------- Hero (y 99–1080) — PSD "HOME - Alternativa" (16/10) ----------
   Grade em % de 1920: atalhos em x 158,5–905 (8,26 % + 38,88 %), texto em x 1034,6 (53,89 %).
   Medidas dos atalhos em vw: a proporção do PSD se mantém em qualquer computador. */
.hero {
  position: relative;
  min-height: clamp(520px, 51.1vw, 981px);
  display: grid;
  grid-template-columns: 8.26% 38.88% 6.75% 1fr;
  align-items: center;
  overflow: hidden;
  background: #F6F6F6;                /* fundo do PSD (um tom mais claro que o da página: a emenda não aparece) */
}
/* Foto em x 0–1300, já espelhada, clareada e esmaecendo para #F6F6F6 (como a máscara e a Cor Seletiva do PSD) */
.hero__fundo { position: absolute; top: 0; bottom: 0; left: 0; width: 67.7%; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.hero__conteudo {
  position: relative;
  grid-column: 4;
  grid-row: 1;
  padding-right: var(--margem-lateral);
}

/* Atalhos: caixas só com contorno #DBDBDB, texto Sofia Pro 23,8 px, ▶ a 34,6 px da borda direita */
.hero__atalhos { position: relative; grid-column: 2; grid-row: 1; }
.hero__atalhos ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6vw; }          /* 11,5 px */
.hero__atalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6vw;
  height: 4.74vw;                                       /* 91 px */
  padding: 0 1.75vw 0 1.44vw;                           /* texto a 28,7 px da borda esquerda */
  border: 1px solid #DBDBDB;
  font-family: var(--fonte-texto);
  font-size: max(13px, 1.24vw);                         /* 23,8 px */
  line-height: 0.92;                                    /* 22 px entre as linhas de "Programa de acompanhamento" */
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
  white-space: nowrap;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s;
}
.hero__atalho::after {                                  /* ▶ 10,5 × 12,1 px */
  content: '';
  flex: none;
  width: max(7px, 0.547vw);
  height: max(8px, 0.632vw);
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 0.35s var(--anim-curva);
}
.hero__atalho:hover, .hero__atalho:focus-visible {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}
.hero__atalho:hover::after, .hero__atalho:focus-visible::after { transform: translateX(4px); }
.hero__titulo { max-width: 720px; }
.hero__subtitulo { margin-top: clamp(20px, 2.4vw, 46px); max-width: 540px; }
.hero__indicador { margin-top: clamp(20px, 2.1vw, 40px); }

/* ---------- Seção 2: consulta com dúvidas (y 1151–2100) ---------- */
.consulta { padding-top: clamp(40px, 3.7vw, 71px); }
.consulta__grid {
  display: grid;
  grid-template-columns: 43% 1fr;       /* foto 826 px */
  gap: clamp(32px, 7.3vw, 141px);
  align-items: center;
  padding-left: clamp(16px, 5.05vw, 97px);
  padding-right: clamp(16px, 6.3vw, 121px);
}
.consulta__foto { aspect-ratio: 826 / 949; }
.consulta__texto { max-width: 740px; }
.consulta__titulo { line-height: 1.05; }
@media (min-width: 1200px) {
  .consulta__titulo { white-space: nowrap; }   /* no PSD o título passa da coluna (até x 1799) */
}

/* ---------- Seção 3: a Clínica ELOS nasceu... (y 2315–3360) ---------- */
.nasceu { padding-top: clamp(64px, 11.2vw, 215px); }
.nasceu__grid {
  display: grid;
  grid-template-columns: 649fr 674fr;
  gap: clamp(32px, 9vw, 173px);
  align-items: start;
  padding-left: clamp(16px, 12.6vw, 242px);
  padding-right: clamp(16px, 9.5vw, 182px);
}
.nasceu__foto { aspect-ratio: 674 / 1011; margin-top: 34px; }
.nasceu__texto .botao { margin-top: var(--espaco-texto-botao); }

/* ---------- Seção 4: o cuidado é contínuo (y 3053–4084; sobe 307 px sobre a seção 3) ---------- */
.continuo { margin-top: -307px; }
.continuo__grid {
  display: grid;
  grid-template-columns: 687fr 676fr;
  gap: clamp(32px, 7vw, 134px);
  align-items: end;
  padding-left: clamp(16px, 12.65vw, 243px);
  padding-right: clamp(16px, 9.4vw, 180px);
}
.continuo__foto { aspect-ratio: 687 / 1031; }
.continuo__texto { padding-bottom: clamp(24px, 4.5vw, 86px); }
.continuo__texto .texto { max-width: 613px; margin-left: auto; }

/* ---------- Seção 5: faixa "Faça dos 40+" (y 4319–5402; foto sobe 31 px na faixa) ---------- */
.faixa-40 { margin-top: clamp(80px, 12.2vw, 235px); }
.faixa-40__grid {
  display: grid;
  grid-template-columns: 629fr 675fr;
  gap: clamp(32px, 10.6vw, 204px);
  align-items: start;
  padding-left: clamp(16px, 12vw, 231px);
  padding-right: clamp(16px, 9.4vw, 181px);
}
.faixa-40__texto { padding-top: clamp(56px, 14.9vw, 286px); padding-bottom: clamp(56px, 13.4vw, 258px); }
.faixa-40__texto .texto { max-width: 604px; }
.faixa-40__foto { aspect-ratio: 675 / 1011; margin-top: -31px; }

/* ---------- Seção 6: existe muito que pode ser feito (y 5530–6612) ---------- */
.muito { margin-top: clamp(48px, 6.7vw, 128px); }
.muito__grid {
  display: grid;
  grid-template-columns: 43.75% 1fr;    /* foto esquerda 840 px */
  column-gap: 11.3%;                    /* até x 1057 */
}
.muito__foto-esq { aspect-ratio: 840 / 1080; }
.muito__coluna { display: flex; flex-direction: column; padding-top: clamp(40px, 12.2vw, 234px); }
.muito__texto .texto { max-width: 575px; }
.muito__foto-dir { margin-top: auto; padding-top: clamp(40px, 9.3vw, 178px); background: none; }
.muito__foto-dir img { aspect-ratio: 863 / 383; }

/* ---------- Seção 7: o objetivo + cards (y 6813–7560) ---------- */
.objetivo { margin-top: clamp(64px, 10.5vw, 201px); }
.objetivo__texto { max-width: 880px; margin-inline: auto; }
.objetivo__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  max-width: 1402px;
  box-sizing: content-box;              /* 1402 px de cards + padding lateral */
  margin: clamp(40px, 4vw, 78px) auto 0;
  padding-inline: var(--margem-lateral);
}
.objetivo__card { aspect-ratio: 345 / 415; }

/* ---------- Seção 8: o primeiro passo é uma conversa (y 7771–8855) ---------- */
.primeiro { margin-top: clamp(64px, 11vw, 211px); }
.primeiro__grid {
  display: grid;
  grid-template-columns: 706fr 866fr;
  gap: clamp(32px, 7.5vw, 144px);
  align-items: center;
  padding-left: clamp(16px, 10.6vw, 204px);
}
.primeiro__texto .texto { max-width: 700px; }
.primeiro__foto { aspect-ratio: 866 / 1084; }

/* ---------- Responsivo ---------- */
@media (max-width: 1400px) {
  .continuo { margin-top: -18vw; }
}
@media (max-width: 992px) {
  /* Hero empilhado: título e atalhos sobre a foto clara (que cobre o hero inteiro, com o rosto da Dra. em cima) */
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 28px; min-height: 0; padding: 40px var(--margem-lateral) 48px; }
  .hero__fundo { width: 100%; }
  .hero__fundo img { object-position: 35% top; }
  .hero__conteudo { padding: 0 0 4px; }                                 /* folga para a seta flutuar sem ser cortada */
  .hero__titulo br, .hero__subtitulo br { display: none; }
  .hero__atalhos ul { gap: 8px; }
  .hero__atalho { height: auto; min-height: 56px; padding: 10px 16px; gap: 12px; font-size: 1rem; line-height: 1.15; white-space: normal; }
  .hero__atalho br { display: none; }
  .consulta__grid, .nasceu__grid, .continuo__grid, .faixa-40__grid, .primeiro__grid {
    grid-template-columns: 1fr;
    padding-inline: var(--margem-lateral);
    gap: 32px;
  }
  .consulta__foto, .nasceu__foto, .continuo__foto, .faixa-40__foto, .primeiro__foto { max-width: 560px; }
  .nasceu__foto { margin-top: 0; }
  .continuo { margin-top: clamp(48px, 8vw, 80px); }
  .continuo__foto { order: -1; }
  .continuo__texto { padding-bottom: 0; }
  .continuo__texto .texto { margin-left: 0; }
  .faixa-40 { margin-top: clamp(48px, 8vw, 80px); }
  .faixa-40__texto { padding-top: clamp(48px, 8vw, 96px); padding-bottom: 32px; }
  .faixa-40__foto { margin-top: 0; margin-bottom: clamp(48px, 8vw, 96px); }
  .muito__grid { grid-template-columns: 1fr; }
  .muito__foto-esq { max-width: 100%; aspect-ratio: 4 / 3; }
  .muito__coluna { padding: 40px var(--margem-lateral) 0; }
  .muito__foto-dir { padding-top: 40px; }
  .objetivo__cards { grid-template-columns: repeat(2, 1fr); }
  .primeiro__foto { max-width: 100%; }
}
@media (max-width: 576px) {
  .hero { padding-top: 32px; }
  .hero__atalho { padding: 8px 12px; font-size: 0.9375rem; }           /* 15 px; nomes longos quebram em 2 linhas */
  .objetivo__cards { gap: 6px; }
}
@media (min-width: 993px) {
  /* Com a Branch real, "SUA MELHOR FASE." passava alguns px da coluna e ia para 3 linhas; quebra só nos <br> */
  .faixa-40__texto .titulo { white-space: nowrap; }
}