/* ==========================================================================
   Tecnologias (tecnologias.html) — medidas do PSD TECNOLOGIAS.psd (1920 px). Percentuais = px / 1920.
   ========================================================================== */

/* ---------- Hero (y 93–1030; texto à esquerda em x 279–908, Dra. à direita na própria foto) ---------- */
.hero {
  position: relative;
  min-height: clamp(520px, 48.65vw, 934px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #B4A796;                  /* tom médio do fundo da foto (telas > 1920) */
}
.hero__fundo { position: absolute; inset: 0; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__conteudo {
  position: relative;
  width: 100%;
  padding-left: 14.53%;                 /* texto em x 279 */
  padding-right: var(--margem-lateral);
  padding-top: clamp(0px, 3.96vw, 76px); /* bloco fica 38 px abaixo do centro (281 acima / 205 abaixo) */
}
.hero__coluna { width: 40.3%; max-width: 630px; min-width: 300px; } /* 630 px em 1920 (PSD: x 279–908) */
.hero__titulo {
  font-size: clamp(2.5rem, 4.16vw, 4.9875rem);   /* 79.8 px; escala junto com a coluna para manter 2 linhas */
  line-height: 0.965;                             /* 77 px */
}
.hero .titulo + .texto { margin-top: clamp(24px, 3.07vw, 59px); }

/* ---------- Ciência, inovação e tecnologia de ponta (y 1030–2194; texto x 177–977, foto 605×942 à direita) ---------- */
.ciencia { padding-top: clamp(64px, 8.18vw, 157px); padding-bottom: clamp(40px, 3.39vw, 65px); }
.ciencia__grid {
  display: grid;
  grid-template-columns: 800fr 605fr;
  gap: clamp(32px, 7.24vw, 139px);
  align-items: center;
  padding-left: clamp(16px, 9.22vw, 177px);
  padding-right: clamp(16px, 10.36vw, 199px);
}
.ciencia__texto { max-width: 800px; padding-top: clamp(0px, 2vw, 38px); } /* bloco 19 px abaixo do centro da foto */
.ciencia__titulo { line-height: 0.965; }                                    /* 70 px */
.ciencia .titulo + .texto { margin-top: clamp(24px, 2.76vw, 53px); }
.ciencia__foto { aspect-ratio: 605 / 942; }

/* ---------- Faixa marrom ELOS Diagnóstico (y 2194–3369; foto 605×943 à esquerda, logo + texto à direita) ---------- */
.diagnostico { padding-top: clamp(56px, 5.83vw, 112px); padding-bottom: clamp(56px, 6.25vw, 120px); }
.diagnostico__grid {
  display: grid;
  grid-template-columns: 605fr 788fr;
  gap: clamp(32px, 10vw, 192px);
  align-items: center;
  padding-left: clamp(16px, 10.47vw, 201px);
  padding-right: clamp(16px, 6.98vw, 134px);
}
.diagnostico__foto { aspect-ratio: 605 / 941; }
.diagnostico__logo { margin: 0; }
.diagnostico__logo img { width: 767px; max-width: 100%; height: auto; margin-left: auto; }
.diagnostico__texto { max-width: 788px; margin-left: auto; margin-top: clamp(32px, 3.44vw, 66px); }
.diagnostico .texto, .diagnostico .texto p { color: #E3E1E1; }            /* cor real do render sobre o marrom */

/* ---------- ELOS Bem-estar + ELOS Corpo (y 3369–~4425; textos x 187–910, 2 fotos 356×712 escalonadas) ---------- */
.bem-estar { padding-top: clamp(56px, 7.14vw, 137px); }
.bem-estar__grid {
  display: grid;
  grid-template-columns: 723fr 719fr;
  gap: clamp(32px, 6.2vw, 119px);
  align-items: start;
  padding-left: clamp(16px, 9.74vw, 187px);
  padding-right: clamp(16px, 8.96vw, 172px);
}
.bem-estar__texto { margin-top: clamp(0px, 1.15vw, 22px); }               /* logo 22 px abaixo do topo da foto direita */
.bem-estar__bloco { padding-left: clamp(0px, 1.77vw, 34px); }              /* a divisória começa 34 px antes do texto */
.bem-estar__logo { margin: 0; }
.bem-estar__logo img { max-width: 100%; height: auto; }
.bem-estar__logo--bem-estar img { width: 658px; }
.bem-estar__logo--corpo img { width: 586px; }
.bem-estar__logo--bem-estar + .texto { margin-top: clamp(20px, 2.03vw, 39px); max-width: 690px; }
.bem-estar__logo--corpo + .texto { margin-top: clamp(20px, 2.4vw, 46px); max-width: 560px; }
.bem-estar__divisoria { margin: clamp(32px, 3.02vw, 58px) 0 clamp(32px, 3.54vw, 68px); }
.bem-estar__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: start; }
.bem-estar__foto { aspect-ratio: 356 / 712; }
.bem-estar__foto--esq { margin-top: 24.7%; }                               /* 88 px de 356 (escalonamento) */

/* ---------- ELOS Força (y ~4425–5689; foto 660×1028 à esquerda, logo + texto alinhados à direita em x 1607) ---------- */
.forca { margin-top: clamp(64px, 8.9vw, 171px); padding-bottom: clamp(64px, 7.97vw, 153px); }
.forca__grid {
  display: grid;
  grid-template-columns: 660fr 567fr;
  gap: clamp(32px, 9.69vw, 186px);
  align-items: center;
  padding-left: clamp(16px, 10.1vw, 194px);
  padding-right: clamp(16px, 16.3vw, 313px);
}
.forca__foto { aspect-ratio: 660 / 1024; }
.forca__logo { margin: 0; }
.forca__logo img {
  /* o PNG (682×176) tem ≈115 px transparentes à direita de FORÇA: exibe só os 567 px visíveis do PSD */
  width: 567px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 567 / 176;
  object-fit: cover;
  object-position: left center;
  margin-left: auto;
}
.forca__texto { max-width: 502px; margin-left: auto; margin-top: clamp(16px, 1.4vw, 27px); }

/* ---------- CTA final em faixa bege (y 5689–6230; 2 colunas 549 | 57 | 614, alinhadas pela base) ---------- */
.cta-final { padding-top: clamp(64px, 7.55vw, 145px); padding-bottom: clamp(64px, 6.93vw, 133px); }
.cta-final__grid {
  display: grid;
  grid-template-columns: 549fr 614fr;
  gap: clamp(24px, 2.97vw, 57px);
  align-items: end;
  padding-left: clamp(16px, 18.33vw, 352px);
  padding-right: clamp(16px, 18.13vw, 348px);
}
.cta-final__titulo { line-height: 1; }                                     /* 2 linhas em 115 px */
.cta-final .titulo + .texto { margin-top: clamp(16px, 1.46vw, 28px); }
.cta-final__esq .texto { max-width: 549px; margin-left: auto; }
.cta-final__dir .texto { max-width: 614px; }
.cta-final .botao { color: var(--cor-bege); }                              /* texto do botão #E5E1D6 no render */

/* ---------- Responsivo ---------- */
@media (max-width: 1400px) {
  .cta-final__grid { padding-inline: clamp(16px, 12vw, 352px); }           /* dá espaço ao botão sem quebrar */
}
@media (max-width: 992px) {
  .hero { min-height: 0; display: block; background: none; }
  .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: 100% center; }
  .hero__conteudo { padding: 32px var(--margem-lateral) 0; }
  .hero__coluna { width: 100%; max-width: none; min-width: 0; }
  .hero__titulo { font-size: var(--tam-titulo-g); }
  .hero__titulo br { display: none; }
  .ciencia__grid, .diagnostico__grid, .bem-estar__grid, .forca__grid, .cta-final__grid {
    grid-template-columns: 1fr;
    padding-inline: var(--margem-lateral);
    gap: 32px;
  }
  .ciencia__foto, .diagnostico__foto, .forca__foto, .bem-estar__fotos { max-width: 560px; }
  .ciencia__foto, .bem-estar__fotos { order: -1; }                         /* foto antes do texto */
  .ciencia__texto { padding-top: 0; max-width: none; }
  .bem-estar__texto { margin-top: 0; }
  .bem-estar__bloco { padding-left: 0; }
  .diagnostico__logo img, .forca__logo img, .diagnostico__texto, .forca__texto, .cta-final__esq .texto { margin-left: 0; }
  .diagnostico__texto, .forca__texto, .cta-final__esq .texto, .cta-final__dir .texto { max-width: none; }
  .forca { margin-top: clamp(48px, 8vw, 80px); }
  .cta-final__grid { align-items: start; }
}
@media (max-width: 576px) {
  .hero__fundo { aspect-ratio: 1 / 1; }
  .hero__fundo img { object-position: 95% center; }                    /* Dra. centralizada no quadro */
  .bem-estar__fotos { gap: 6px; }
}