/* =========================================================================
   PÁGINAS DE APOIO — a médica, a clínica, contato
   ========================================================================= */

/* ---------------------------------------------------------- CABEÇA DE PÁGINA */
.pg-cabeca { padding: clamp(150px, 20vh, 220px) 0 clamp(50px, 7vw, 90px); }
.pg-cabeca .migalha { position: static; padding: 0; margin-bottom: 26px; }
.pg-titulo { font-size: clamp(2.1rem, 5.2vw, 4.2rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 17ch; }
.pg-lead { margin-top: 28px; color: var(--tinta-2); font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.85; max-width: 50ch; }

/* -------------------------------------------------------------- TRAJETÓRIA */
.trajetoria { padding: 0 0 var(--secao); }
.tj-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(34px, 6vw, 96px); align-items: start; }
.tj-lista { position: relative; border-left: 1px solid var(--fio); padding-left: clamp(26px, 3vw, 44px); }
.tj-item { position: relative; padding-bottom: clamp(34px, 4vw, 54px); }
.tj-item:last-child { padding-bottom: 0; }
.tj-item::before {
  content: ''; position: absolute; left: calc(clamp(26px, 3vw, 44px) * -1 - 1px); top: 10px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--mineral);
  border: 1px solid var(--champanhe); transform: translateX(-4px);
}
.tj-fase { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--champanhe-3); }
.tj-item h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 10px 0 10px; }
.tj-item p { color: var(--tinta-2); font-size: .97rem; line-height: 1.85; max-width: 46ch; }
.tj-validar {
  display: inline-block; margin-top: 12px; padding: 5px 11px;
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--champanhe-3); border: 1px solid var(--fio);
}
.tj-aviso { margin-top: clamp(34px, 4vw, 52px); padding-top: 22px; font-size: .78rem; line-height: 1.85; color: var(--tinta-3); max-width: 62ch; }

/* ------------------------------------------------------------- A CLÍNICA */
.espaco { padding: 0 0 var(--secao); }
.es-larga { width: 100%; aspect-ratio: 16 / 9; }
.es-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); margin-top: clamp(14px, 2vw, 26px); }
.es-dupla .chapa { aspect-ratio: 4 / 5; }
.es-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: clamp(14px, 2vw, 26px); }
.es-trio .chapa { aspect-ratio: 1 / 1; }
.es-texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); margin-top: clamp(44px, 6vw, 80px); align-items: start; }
.es-dados li { display: flex; gap: 18px; padding: 15px 0; font-size: .92rem; color: var(--tinta-2); }
.es-dados span { flex: none; width: 8.5ch; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--champanhe-3); padding-top: 4px; }
.es-acoes { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }

/* ---------------------------------------------------------------- CONTATO */
.contato-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(38px, 6vw, 100px); align-items: start; padding-bottom: var(--secao); }
.ct-canal { display: block; padding: clamp(18px, 2.2vw, 26px) 0; transition: padding-left .5s var(--curva); }
.ct-canal:hover { padding-left: 12px; }
.ct-canal span { display: block; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--champanhe-3); margin-bottom: 7px; }
.ct-canal strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.65rem); color: var(--tinta); }
.ct-canal em { display: block; font-style: normal; font-size: .8rem; color: var(--tinta-3); margin-top: 5px; }

.formulario { background: var(--branco, #FBF9F5); border: 1px solid var(--fio); padding: clamp(26px, 3.4vw, 46px); }
.formulario h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 10px; }
.formulario > p { color: var(--tinta-2); font-size: .92rem; line-height: 1.8; margin-bottom: 26px; }
.campo { display: block; margin-bottom: 20px; }
.campo span { display: block; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 8px; }
.campo input, .campo select {
  width: 100%; padding: 13px 2px; background: transparent; color: var(--tinta);
  border: none; border-bottom: 1px solid var(--fio); font-family: var(--sans);
  font-size: .98rem; font-weight: 300; transition: border-color .4s;
}
.campo input:focus, .campo select:focus { outline: none; border-bottom-color: var(--champanhe); }
.campo select { cursor: pointer; }
.formulario .btn { width: 100%; margin-top: 8px; }
.form-nota { margin-top: 18px; font-size: .72rem; line-height: 1.75; color: var(--tinta-3); }

.mapa-faixa { padding: 0 0 var(--secao); }
.mapa-chapa { width: 100%; aspect-ratio: 21 / 9; position: relative; }
.mapa-chapa .mapa-selo {
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(251, 249, 245, .92); border: 1px solid var(--fio); padding: 22px 30px; text-align: center;
  backdrop-filter: blur(8px);
}
.mapa-selo strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.mapa-selo em { display: block; font-style: normal; font-size: .74rem; color: var(--tinta-3); margin: 8px 0 16px; }

@media (max-width: 980px) {
  .tj-grade, .es-texto, .contato-grade { grid-template-columns: 1fr; }
  .es-dupla, .es-trio { grid-template-columns: 1fr; }
  .mapa-chapa { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   CONTATO — segunda etapa: mais ar, menos formulário
   ========================================================================= */
.ct-imagem { padding-bottom: clamp(56px, 8vw, 104px); }
.ct-chapa { width: 100%; aspect-ratio: 21 / 9; }
.contato-grade { gap: clamp(48px, 8vw, 130px); padding-bottom: calc(var(--secao) * 1.1); }
.ct-canal { padding: clamp(22px, 2.8vw, 34px) 0; }
.formulario { padding: clamp(30px, 3.8vw, 54px); }
.formulario h2 { margin-bottom: 14px; }
.formulario > p { margin-bottom: 34px; }
.campo { margin-bottom: 26px; }
.pg-contato .pg-cabeca { padding-bottom: clamp(62px, 8vw, 110px); }
@media (max-width: 980px) { .ct-chapa { aspect-ratio: 4 / 3; } }