/* ==========================================================================
   Clínica ELOS (clinica-elos.html) — medidas do PSD CLINICA ELOS.psd (1920 px).
   Percentuais/vw = px / 1920. Tokens e classes compartilhadas vêm de style.css.
   ========================================================================== */

/* ---------- Hero (y 96–761; a foto já traz o degradê escuro, sem overlay) ---------- */
.hero-clinica {
  position: relative;
  min-height: clamp(460px, 34.64vw, 665px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--cor-escura);
  color: var(--cor-clara);
}
.hero-clinica__fundo { position: absolute; inset: 0; }
.hero-clinica__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-clinica__conteudo {
  position: relative;
  width: 100%;
  max-width: calc(982px + 2 * var(--margem-lateral));   /* texto em x 469–1451 */
  margin-inline: auto;
  padding: clamp(48px, 8.75vw, 168px) var(--margem-lateral) clamp(48px, 5.9vw, 113px);
  text-align: center;
}
.hero-clinica__titulo {
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 6.05625rem);  /* 96.9 px */
  line-height: 0.8;                                        /* entrelinha 74 px */
}
.hero-clinica__texto { margin-top: clamp(20px, 2.45vw, 47px); }

/* ---------- Faixa escura: "Aqui, cada detalhe importa." (y 761–1260) ---------- */
.chamada__grid {
  --vao: clamp(32px, 3.6vw, 69px);               /* vão entre as colunas (860 → 929) */
  display: grid;
  grid-template-columns: 487fr 577fr;            /* título x 373–860 · texto x 929–1506 */
  gap: var(--vao);
  align-items: center;
  padding: clamp(56px, 6.04vw, 116px) clamp(16px, 21.56vw, 414px) clamp(56px, 5.73vw, 110px) clamp(16px, 19.43vw, 373px);
}
.chamada__texto { max-width: 577px; }
.chamada__texto .botao { min-height: 54px; margin-top: clamp(20px, 1.6vw, 31px); }

/* ---------- Sobre a Clínica ELOS (y 1392–2231) ---------- */
.sobre { margin-top: clamp(56px, 6.875vw, 132px); }
.sobre__grid {
  display: grid;
  grid-template-columns: 658fr 778fr;            /* texto x 175–833 · fotos x 934–1712 */
  gap: clamp(32px, 5.26vw, 101px);
  align-items: start;
  padding-left: clamp(16px, 9.11vw, 175px);
  padding-right: clamp(16px, 10.83vw, 208px);
}
.sobre__texto { align-self: end; padding-bottom: clamp(0px, 5.36vw, 103px); }   /* base do texto = base da foto A */
.sobre__titulo { line-height: 1; }                                               /* entrelinha 76.3 px */
.sobre__texto .titulo + .texto { margin-top: clamp(24px, 3.44vw, 66px); }
.sobre__fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.sobre__foto--a { aspect-ratio: 380 / 736; }
.sobre__foto--b { aspect-ratio: 380 / 735; margin-top: clamp(40px, 5.42vw, 104px); }   /* degrau de 104 px */

/* ---------- Diferencial 360º (y 2414–3418; foto sangrada à esquerda, texto à direita) ---------- */
.diferencial { margin-top: clamp(64px, 9.53vw, 183px); }
.diferencial__grid {
  --vao: clamp(32px, 10.94vw, 210px);            /* vão entre a foto e o texto (832 → 1042) */
  display: grid;
  grid-template-columns: 832fr 574fr;            /* foto x 0–832 · texto x 1042–1616 (832 + 210 + 574 + 304 = 1920) */
  column-gap: var(--vao);
  align-items: start;
  padding-right: clamp(16px, 15.83vw, 304px);
}
/* A foto tem 832 × 1005 no PSD (52.34vw de altura) e a faixa marrom encosta na base dela. Quando a coluna de
   texto fica mais alta que isso (telas menores), a foto estica junto para a faixa continuar encostada. */
.diferencial__foto { align-self: stretch; min-height: 52.34vw; }
.diferencial__foto img { position: absolute; inset: 0; }
.diferencial__texto { padding-top: clamp(32px, 5.16vw, 99px); }
.diferencial__texto .texto { max-width: 574px; margin-left: auto; }
.diferencial__texto .titulo + .texto { margin-top: clamp(20px, 1.77vw, 34px); }
.diferencial__destaque {
  color: var(--cor-primaria);
  border-right: 1px solid var(--cor-primaria);   /* filete vertical de 1 px à direita */
  padding-right: 14px;
}
.diferencial__texto .botao { min-height: 50px; margin-top: clamp(24px, 2.14vw, 41px); }

/* ---------- Faixa marrom: "Para quem quer potência, não declínio." (y 3418–4021) ---------- */
.potencia {
  padding: clamp(64px, 7.76vw, 149px) var(--margem-lateral) clamp(56px, 6.67vw, 128px);
  text-align: center;
}
.potencia__inner { max-width: 976px; margin-inline: auto; }
.potencia .titulo + .texto { margin-top: clamp(24px, 2.24vw, 43px); }

/* ---------- "Não se trata apenas de viver mais..." (y 4182–4776) ---------- */
.viver {
  margin-top: clamp(64px, 8.39vw, 161px);
  padding-inline: var(--margem-lateral);
  text-align: center;
}
.viver__inner { max-width: 1174px; margin-inline: auto; }
.viver__titulo { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 6.4875rem); }   /* 103.8 px, o maior da página */
.viver .titulo + .texto { margin-top: clamp(24px, 2.81vw, 54px); }
.viver .botao { min-height: 53px; margin-top: clamp(24px, 2.92vw, 56px); }

/* ---------- O que torna a Clínica ELOS diferente (y 5024–6569) ---------- */
.lista { margin-top: clamp(80px, 12.92vw, 248px); }
.lista__grid {
  display: grid;
  grid-template-columns: 955fr 540fr;            /* divisórias x 149–1104 · foto x 1215–1755 */
  gap: clamp(32px, 5.78vw, 111px);
  align-items: start;
  padding-left: clamp(16px, 7.76vw, 149px);
  padding-right: clamp(16px, 8.59vw, 165px);
}
.lista__coluna { padding-left: 22px; }           /* texto começa 22 px depois das divisórias */
.lista__itens { margin: clamp(28px, 3.23vw, 62px) 0 0 -22px; }
.lista__item {
  padding: clamp(24px, 2vw, 38px) clamp(0px, 3vw, 57px) clamp(18px, 1.5vw, 28px) 22px;
  border-bottom: 1px solid var(--cor-etiqueta);  /* divisória 1 px #C2BBB0 */
}
.lista__item:first-child { padding-top: 0; }
.lista__item:last-child { border-bottom: 0; padding-bottom: 0; }
.lista__subtitulo {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: var(--tam-texto);
  line-height: var(--lh-texto);
  letter-spacing: var(--ls-padrao);
  text-transform: uppercase;
  color: var(--cor-primaria-clara);
}
.lista__descricao { margin-top: clamp(8px, .75vw, 14px); }
.lista__fechamento { max-width: 764px; margin-top: clamp(32px, 3.23vw, 62px); }
.lista__fechamento p + p { margin-top: 0.5em; }
.lista__coluna .botao { min-height: 48px; margin-top: var(--espaco-texto-botao); }
.lista__foto { margin-top: 8px; align-self: stretch; }     /* topo alinha com o título, base com o botão */
.lista__foto img { position: absolute; inset: 0; }

/* ---------- Protocolos e Tratamentos (y 6788–7690; 112 px até o rodapé) ---------- */
.protocolos {
  margin-top: clamp(72px, 11.4vw, 219px);
  padding-bottom: clamp(56px, 5.83vw, 112px);
}
.protocolos__grid {
  display: grid;
  grid-template-columns: 562fr 987fr;            /* foto x 140–702 · texto x 774–1761 */
  gap: clamp(32px, 3.75vw, 72px);
  align-items: start;
  padding-left: clamp(16px, 7.29vw, 140px);
  padding-right: clamp(16px, 8.28vw, 159px);
}
.protocolos__foto { align-self: stretch; min-height: 46.98vw; }   /* 562 × 902; estica se o texto ficar mais alto */
.protocolos__foto img { position: absolute; inset: 0; }
.protocolos__texto { padding-top: clamp(24px, 3.02vw, 58px); }
.protocolos__titulo { color: var(--cor-primaria-clara); line-height: 1.04; }   /* #8B4D26, entrelinha 70 px */
.protocolos__texto .titulo + .texto { margin-top: clamp(24px, 2.66vw, 51px); }
.protocolos__texto .botao { min-height: 48px; margin-top: clamp(24px, 2.45vw, 47px); }

/* ---------- Desktop (≥ 993 px): títulos proporcionais à tela ----------
   As colunas desta página são proporcionais à largura (fr + paddings em vw). Para os títulos quebrarem nas
   mesmas linhas do PSD em 1920, 1440 e 1024, eles também escalam em vw (px do PSD ÷ 1920), com teto no
   tamanho do PSD. Abaixo de 992 px as seções empilham e valem os clamp() compartilhados. */
@media (min-width: 993px) {
  .hero-clinica__titulo { font-size: clamp(2.6rem, 5.047vw, 6.05625rem); }        /* 96.9 px */
  .chamada__titulo,
  .diferencial__texto .titulo,
  .potencia .titulo,
  .protocolos__titulo { font-size: clamp(2.2rem, 3.51vw, 4.2125rem); }             /* 67.4 px */
  .sobre .etiqueta { font-size: clamp(0.95rem, 1.344vw, 1.6125rem); }             /* 25.8 px */
  .sobre__titulo { font-size: clamp(2.4rem, 4vw, 4.75rem); }                       /* 76.8 px */
  .viver__titulo { font-size: clamp(2.6rem, 5.406vw, 6.4875rem); margin-inline: -3%; }  /* 103.8 px */
  .lista__titulo { font-size: clamp(2.3rem, 3.734vw, 4.5rem); }                    /* 71.7 px */
  /* Folga para a fonte substituta (Italiana é ~1 % mais larga que a Branch: "Aqui, cada detalhe" mede 488 px
     numa coluna de 487; "Nosso diferencial está" 572 em 574). O título pode avançar sobre o vão entre as
     colunas, que é vazio — à direita na faixa escura (título à esquerda) e à esquerda no diferencial (título
     à direita). Sem isso esses títulos viram 3 linhas em vez de 2. */
  .chamada__titulo { margin-right: calc(-1 * var(--vao)); }
  .diferencial__texto .titulo { margin-left: calc(-1 * var(--vao)); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1200px) {
  .chamada__grid { padding-inline: clamp(16px, 12vw, 373px) clamp(16px, 10vw, 414px); }
  .diferencial__grid { --vao: clamp(32px, 6vw, 210px); padding-right: clamp(16px, 8vw, 304px); }
}
@media (max-width: 992px) {
  .hero-clinica { min-height: 0; }
  .hero-clinica__conteudo { padding-block: clamp(56px, 12vw, 96px); }
  .hero-clinica__titulo br { display: none; }
  .chamada__grid, .sobre__grid, .diferencial__grid, .lista__grid, .protocolos__grid {
    grid-template-columns: 1fr;
    padding-inline: var(--margem-lateral);
    gap: 32px;
  }
  .chamada__grid { padding-block: clamp(48px, 8vw, 72px); }
  .chamada__texto { max-width: 100%; }
  .sobre__fotos { order: -1; max-width: 560px; }
  .sobre__foto--b { margin-top: clamp(24px, 6vw, 48px); }
  .sobre__texto { align-self: auto; padding-bottom: 0; }
  .diferencial__foto { max-width: 560px; align-self: auto; min-height: 0; aspect-ratio: 832 / 1005; }
  .diferencial__texto { padding-top: 0; }
  .diferencial__texto .texto { margin-left: 0; }
  .diferencial__destaque {
    border-right: 0;
    padding-right: 0;
    border-left: 1px solid var(--cor-primaria);   /* filete acompanha o alinhamento à esquerda */
    padding-left: 14px;
  }
  .lista__coluna { padding-left: 0; }
  .lista__itens { margin-left: 0; }
  .lista__item { padding-left: 0; padding-right: 0; }
  .lista__foto { order: -1; align-self: auto; margin-top: 0; max-width: 560px; aspect-ratio: 3 / 4; }
  .protocolos__foto { max-width: 560px; align-self: auto; min-height: 0; aspect-ratio: 562 / 902; }
  .protocolos__texto { padding-top: 0; }
}
@media (max-width: 768px) {
  /* Só no celular: leve escurecimento extra para o texto branco continuar legível sobre a foto recortada */
  .hero-clinica__fundo::after { content: ''; position: absolute; inset: 0; background: rgba(54, 48, 40, 0.3); }
}
@media (max-width: 576px) {
  .sobre__fotos { gap: 12px; }
  .hero-clinica__titulo { line-height: 0.9; }
}

/* ---------- Interações: itens da lista de diferenciais deslizam e o subtítulo escurece ao passar o mouse ---------- */
.lista__item { transition: transform 0.45s var(--anim-curva); }
.lista__item:hover { transform: translateX(10px); }
.lista__item .lista__subtitulo { transition: color 0.35s; }
.lista__item:hover .lista__subtitulo { color: var(--cor-primaria); }