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

/* ---------- Hero (y 96–1080) ---------- */
.hero {
  position: relative;
  min-height: clamp(520px, 51.25vw, 984px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__fundo { position: absolute; inset: 0; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.hero__conteudo {
  position: relative;
  width: 100%;
  padding-left: 49.85%;               /* texto em x 957 */
  padding-right: var(--margem-lateral);
}
.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 { min-height: 0; display: block; }
  .hero__fundo { position: relative; aspect-ratio: 5 / 4; }            /* quadro mais alto: a Dra. perto do centro, sem sobra de fundo */
  .hero__fundo img { object-position: 0% center; }
  .hero__conteudo { padding: 32px var(--margem-lateral) 12px; }         /* folga para a seta flutuar sem ser cortada */
  .hero__titulo br, .hero__subtitulo 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__fundo { aspect-ratio: 1 / 1; }
  .hero__fundo img { object-position: 8% center; }                     /* Dra. centralizada no quadro */
  .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; }
}