/* ==========================================================================
   Protocolos e Tratamentos (protocolos-e-tratamentos.html)
   Medidas do PSD PROTOCOLOS E TRATAMENTOS.psd (1920 px). Percentuais = px / 1920.
   ========================================================================== */

/* ---------- Hero (y 88–856: foto já tintada + título centralizado) ---------- */
.hero {
  position: relative;
  min-height: clamp(420px, 39.6vw, 760px);       /* 760 px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.hero__fundo { position: absolute; inset: 0; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Véu marrom sobre a foto: fundo menos transparente para o título claro ficar legível (reunião de 15/09) */
.hero__fundo::after { content: ''; position: absolute; inset: 0; background: rgba(72, 38, 16, 0.45); }
.hero__conteudo {
  position: relative;
  width: 100%;
  max-width: 1000px;
  padding: clamp(48px, 5vw, 96px) var(--margem-lateral);
}
.hero__titulo {
  font-size: clamp(2.4rem, 1.4rem + 3.95vw, 5.48rem);   /* 87.7 px */
  line-height: 1.02;                                    /* ≈ 89 px por linha */
  color: #EFECE5;                                       /* branco quente do hero (não é o #F5F5F5 padrão) */
}
.hero__subtitulo {
  margin-top: clamp(16px, 1.7vw, 33px);
  color: #EFECE5;
}

/* ---------- Seção 2: faixa bege "Na Clínica Elos," (y 856–1253) ---------- */
.na-clinica {
  padding-top: clamp(40px, 3.9vw, 75px);
  padding-bottom: clamp(40px, 3.65vw, 70px);
}
.na-clinica__grid {
  display: grid;
  grid-template-columns: 453fr 902fr;              /* título x 297–697 (+ vão até 750) | parágrafo x 750–1652 */
  align-items: center;
  padding-left: clamp(16px, 15.47vw, 297px);
  padding-right: clamp(16px, 13.96vw, 268px);
}
.na-clinica .titulo { color: var(--cor-primaria); }   /* a faixa herdaria a cor do texto; aqui o título é marrom */
.na-clinica .texto p { color: var(--cor-primaria); line-height: 1.22; }

/* ---------- Seção 3: consulta com a Dra. (y 1253–2254; foto 602×831 à esquerda) ---------- */
.consulta { padding-top: clamp(40px, 4.27vw, 82px); }
.consulta__grid {
  display: grid;
  grid-template-columns: 602fr 773fr;
  gap: clamp(32px, 6.8vw, 131px);
  align-items: center;
  padding-left: clamp(16px, 10.1vw, 194px);
  padding-right: clamp(16px, 11.46vw, 220px);
}
.consulta__foto { aspect-ratio: 602 / 831; }
.consulta__texto { padding-top: clamp(0px, 3.8vw, 73px); }   /* título 186 px abaixo do topo da foto; botão 113 px acima da base */
.consulta__sobretitulo {
  margin-top: clamp(24px, 2.6vw, 50px);
  margin-bottom: clamp(16px, 1.7vw, 32px);
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.4375rem);     /* 39 px */
}
.consulta__texto .texto + .botao { margin-top: clamp(24px, 2.6vw, 50px); }

/* ---------- Seção 4: "O cuidado continua a partir daqui:" + cards (y 2254–3524) ---------- */
.cuidado {
  padding-top: clamp(64px, 9.2vw, 176px);
  padding-bottom: clamp(56px, 5.8vw, 112px);
}
.cuidado__subtitulo { margin-top: clamp(16px, 1.3vw, 25px); }
.protocolos__lista {
  display: grid;
  grid-template-columns: 378fr 433fr 378fr;        /* laterais 378 px, meio 433 px */
  gap: clamp(24px, 3.6vw, 69px);
  align-items: center;                             /* os três alinham pelo centro vertical */
  width: min(1327px, 100% - 2 * var(--margem-lateral));
  margin: clamp(40px, 4.2vw, 81px) auto 0;
}
.protocolos__card {
  position: relative;
  overflow: hidden;
  border-radius: 55px;
  background: var(--cor-primaria);
  aspect-ratio: 378 / 519;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 27px 43px;
  text-align: center;
}
.protocolos__card--destaque { aspect-ratio: 433 / 595; padding-bottom: 60px; }
.protocolos__foto { position: absolute; top: 0; left: 0; right: 0; z-index: 0; }
.protocolos__foto img { width: 100%; height: auto; }
/* Degradê marrom por cima da foto (pontos medidos nas máscaras do PSD, convertidos para a altura da foto) */
.protocolos__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(133, 65, 21, 0) var(--grad-a), var(--cor-primaria) var(--grad-b));
}
.protocolos__card--1 { --grad-a: 18%; --grad-b: 58%; }      /* foto cobre o card inteiro */
.protocolos__card--2 { --grad-a: 25.5%; --grad-b: 96%; }    /* foto até 66,5 % do card (17 % → 64 % do card) */
.protocolos__card--3 { --grad-a: 16.7%; --grad-b: 79%; }    /* foto até 72 % do card (12 % → 57 % do card) */
.protocolos__conteudo { position: relative; z-index: 1; }
.protocolos__titulo {
  font-size: clamp(1.5rem, 1rem + 0.95vw, 2.13rem);        /* 34.1 px */
  line-height: 0.89;                                       /* 30.3 px */
  letter-spacing: -0.06em;
}
.protocolos__card--destaque .protocolos__titulo { font-size: clamp(1.7rem, 1.1rem + 1.15vw, 2.5rem); }   /* 40.1 px */
.protocolos__card .protocolos__texto { margin-top: clamp(20px, 1.9vw, 36px); font-size: var(--tam-texto-p); }
.protocolos__card--destaque .protocolos__texto { margin-top: clamp(24px, 2vw, 39px); font-size: var(--tam-texto); }
.protocolos__card .protocolos__pill {
  margin-top: 23px;
  min-height: 47px;
  padding: 0.45em 1.35em;                          /* 47 px de altura (55 no card de destaque), como no PSD */
  font-size: var(--tam-texto-p);
  max-width: 100%;                                 /* o card tem overflow:hidden — a pill nunca pode passar da área útil */
  white-space: normal;
  line-height: 1.15;
}
.protocolos__card--destaque .protocolos__pill { margin-top: 45px; min-height: 55px; font-size: var(--tam-texto); }
.cuidado .cuidado__fechamento { max-width: 900px; margin: clamp(32px, 3.2vw, 61px) auto 0; }
.cuidado .texto + .botao { margin-top: clamp(24px, 2.8vw, 54px); }

/* ---------- Seção 5: faixa marrom "Procedimentos & Terapias" (y 3524–4173) ---------- */
.procedimentos {
  padding-top: clamp(56px, 6.2vw, 119px);
  padding-bottom: clamp(56px, 5.8vw, 111px);
}
.procedimentos .procedimentos__texto {
  max-width: 896px;
  margin: clamp(24px, 2.7vw, 52px) auto 0;
}

/* ---------- Seção 6: terapias injetáveis + imunoinjetáveis (y 4173–5179; foto 540×890 à direita) ---------- */
.terapias { padding-top: clamp(48px, 6.2vw, 119px); }
.terapias__grid {
  display: grid;
  grid-template-columns: 753fr 540fr;
  gap: clamp(32px, 10.2vw, 196px);
  align-items: start;
  padding-left: clamp(16px, 11.1vw, 213px);
  padding-right: clamp(16px, 11.35vw, 218px);
}
.terapias__texto {
  padding-top: clamp(0px, 1vw, 20px);
  padding-bottom: clamp(32px, 4vw, 80px);          /* em larguras menores o texto fica mais alto que a foto; evita encostar na faixa escura */
}
.terapias__texto .titulo + .texto { margin-top: clamp(20px, 2.25vw, 43px); }
.terapias__divisoria {
  width: 86%;                                      /* 648 px de 753 */
  margin-top: clamp(32px, 3.1vw, 60px);
  margin-bottom: clamp(32px, 3.75vw, 72px);
}
.terapias__foto {
  aspect-ratio: 540 / 887;                         /* a faixa escura cobre os 3 px finais no PSD */
  align-self: end;                                 /* se o texto ficar mais alto (≤ 1200 px), a foto continua encostada na faixa escura */
}

/* ---------- Seção 7: faixa escura "Ozonioterapia / Laser" (y 5179–6083; foto 601×727 à esquerda) ---------- */
.ozonio {
  padding-top: clamp(48px, 4.5vw, 87px);
  padding-bottom: clamp(48px, 4.7vw, 90px);
}
.ozonio__grid {
  display: grid;
  grid-template-columns: 601fr 696fr;
  gap: clamp(32px, 10.9vw, 210px);
  align-items: start;
  padding-left: clamp(16px, 10.1vw, 194px);
  padding-right: clamp(16px, 11.4vw, 219px);
}
.ozonio__foto { aspect-ratio: 601 / 727; }
.ozonio__texto { padding-top: clamp(0px, 3vw, 58px); }
.ozonio__texto .titulo + .texto { margin-top: clamp(20px, 2.4vw, 46px); }
.ozonio__divisoria {
  width: 70.5%;                                    /* 491 px de 696, encostada à direita */
  margin-left: auto;
  margin-top: clamp(32px, 3.1vw, 60px);
  margin-bottom: clamp(32px, 3.2vw, 61px);
}

/* ---------- Seção 8: implantes + estética (y 6083–6974; foto 599×737 encostada na faixa escura) ---------- */
.implantes__grid {
  display: grid;
  grid-template-columns: 666fr 599fr;
  gap: clamp(32px, 11.5vw, 221px);
  align-items: start;
  padding-left: clamp(16px, 10.68vw, 205px);
  padding-right: clamp(16px, 11.93vw, 229px);
  padding-bottom: clamp(56px, 8vw, 154px);
}
.implantes__foto { aspect-ratio: 599 / 737; }
.implantes__texto { padding-top: clamp(40px, 6.8vw, 130px); }
.implantes__titulo { line-height: 0.99; }          /* 67 px no PSD (os demais usam 73) */
.implantes__texto .titulo + .texto { margin-top: clamp(20px, 1.8vw, 35px); }
.implantes__divisoria {
  width: 79.7%;                                    /* 531 px de 666 */
  border-top-color: var(--cor-primaria-clara);     /* #8B4D26 */
  margin-top: clamp(28px, 2.35vw, 45px);
  margin-bottom: clamp(28px, 2.65vw, 51px);
}

/* ---------- Seção 9: CTA final (y 6974–8020; foto full-width, texto sobre a parede lisa) ---------- */
.cta {
  position: relative;
  min-height: clamp(560px, 54.5vw, 1046px);        /* 1046 px = mesma proporção da foto */
  background: #CBC3BA url(../img/protocolos-cta-fundo.jpg) center top / cover no-repeat;
}
.cta__conteudo {
  width: min(800px, 41.7vw);                       /* texto x 255–1039; a modelo começa em x ≈ 1000 */
  padding-top: clamp(64px, 10.2vw, 195px);
  padding-bottom: clamp(48px, 6vw, 120px);
  padding-left: clamp(16px, 13.28vw, 255px);
  box-sizing: content-box;
}
.cta__titulo {
  font-size: clamp(2.2rem, 4.77vw, 5.72rem);       /* 91.5 px, proporcional para não invadir a modelo */
  line-height: 0.95;                               /* 86.8 px */
}
.cta .cta__texto { max-width: 615px; margin-top: clamp(24px, 2.65vw, 51px); }
.cta .texto + .botao { margin-top: clamp(24px, 2.85vw, 55px); }
.cta__foto { display: none; }                      /* só aparece no mobile (ver abaixo) */

/* ---------- Responsivo ---------- */
@media (max-width: 1650px) {
  /* Abaixo de ~1600 px "ESTÉTICA FACIAL E" já não cabe na coluna e o <br> do PSD deixava um "E" sozinho na linha */
  .implantes__titulo--estetica br { display: none; }
}
@media (max-width: 1200px) {
  /* Os 3 cards continuam lado a lado até 993 px e ficam estreitos: menos respiro lateral para as pills caberem */
  .protocolos__card { padding-inline: 16px; }
  .protocolos__card .protocolos__pill { padding-inline: 0.75em; }
}
@media (max-width: 992px) {
  .hero__conteudo { padding-block: 64px; }
  .na-clinica__grid, .consulta__grid, .terapias__grid, .ozonio__grid, .implantes__grid {
    grid-template-columns: 1fr;
    padding-inline: var(--margem-lateral);
    gap: 32px;
  }
  .na-clinica__grid { gap: 20px; }
  .consulta__foto, .terapias__foto, .ozonio__foto, .implantes__foto { max-width: 560px; }
  .terapias__foto, .implantes__foto { order: -1; }   /* foto antes do texto */
  .consulta__texto, .terapias__texto, .ozonio__texto, .implantes__texto { padding-top: 0; }
  .ozonio__divisoria { margin-left: 0; }
  .implantes__grid { padding-top: 40px; }
  .protocolos__lista { grid-template-columns: 1fr; justify-items: center; gap: 24px; }
  .protocolos__card { width: 100%; max-width: 378px; }
  .protocolos__card--destaque { max-width: 433px; }
  /* CTA empilhado: texto em cima, foto embaixo (abaixo de 993 px o texto cairia sobre a modelo do fundo) */
  .cta { background-image: none; min-height: 0; }
  .cta__conteudo { width: auto; max-width: none; padding: 56px var(--margem-lateral) 40px; }
  .cta__conteudo .cta__titulo { font-size: clamp(2.2rem, 1.3rem + 5vw, 4rem); }
  .cta .cta__texto { max-width: 560px; }
  .cta__foto { display: block; aspect-ratio: 4 / 3; background: none; }
  .cta__foto img { object-position: 72% center; }
}
@media (max-width: 576px) {
  .protocolos__card { border-radius: 44px; }
  .hero__subtitulo br { display: none; }
  .cta__foto { aspect-ratio: 1 / 1; }              /* no celular a foto quadrada mostra a modelo maior */
}

/* ---------- Interações: ao passar o mouse só o card inteiro dá zoom (classe .cartao do style.css).
   O zoom da foto por dentro foi retirado: nos cards 2 e 3 a foto não cobre o card e abria um vão no meio. ---------- */