/* ==========================================================================
   PÁGINAS DE TRATAMENTO (/tratamentos/...)
   Reaproveita o hero dos anéis da home (.hco) numa versão mais baixa.
   ========================================================================== */

/* ---------- hero ---------- */
.hco--trat .trilha ol { margin-bottom: 1.1rem; color: color-mix(in srgb, var(--cor-escuro-texto) 62%, transparent); }
.hco--trat .trilha a:hover { color: var(--cor-escuro-texto); }
.hco--trat .hco__titulo { margin-top: .7rem; }
.hco--trat .hco__anel--video { background: var(--cor-escuro-2); }
.trx__som { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .45rem 1rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--cor-escuro) 72%, transparent); color: var(--cor-escuro-texto); font: 600 .85rem var(--fonte-texto); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .3s, color .3s; }
.trx__som:hover { background: var(--lima); color: var(--cor-acao-texto); }
.trx__som .som-on { opacity: .35; }
.trx__som[aria-pressed="true"] .som-on { opacity: 1; }
@media (min-width: 900px) {
  .hco--trat { min-height: 0; padding: calc(var(--topo-h) + 3rem) 0 4.5rem; }
  .hco--trat .hco__titulo { font-size: clamp(2.6rem, .8rem + 3.1vw, 4.1rem); }
  .hco--trat .hco__par { height: min(38vw, 540px); }
  .hco--trat .hco__anel--video { width: min(31vw, 460px); }
  .hco--trat .hco__anel--cris { width: min(16vw, 230px); }
}

/* ---------- o que é + indicado para ---------- */
.trx__grade { display: grid; gap: var(--e6); }
.trx__lado { align-self: start; padding: 1.6rem; border-radius: var(--raio-g); background: var(--cor-fundo-2); display: grid; gap: 1.1rem; }
.trx__lado-t { font-size: 1.35rem; }
.trx__pilulas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.trx__pilulas li { padding: .45rem .9rem; border-radius: 999px; background: var(--cor-fundo); border: 1px solid var(--cor-linha); font-size: .9rem; }
.trx__nota { margin-top: .9rem; margin-bottom: 0; font-size: .82rem; color: var(--cor-texto-suave); }
.pg-tratamento .numero strong { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
@media (min-width: 900px) {
  .trx__grade { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .trx__lado { position: sticky; top: calc(var(--topo-h) + 1.5rem); }
  .trx__grade--passos { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* ---------- o cuidado da Cris ---------- */
.trx__cuidado { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 1.4rem; padding: clamp(1.6rem, 1rem + 2.4vw, 3rem); border-radius: var(--raio-g); background: var(--cor-escuro); color: var(--cor-escuro-texto); }
.trx__cuidado-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: color-mix(in srgb, var(--lima) 16%, transparent); color: var(--lima); }
.trx__cuidado-ico .i { width: 1.6rem; height: 1.6rem; }
.trx__cuidado-txt { margin: .8rem 0 0; font-family: var(--fonte-titulo); font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); line-height: 1.35; letter-spacing: -.01em; font-feature-settings: 'ss01' 1; max-width: 40em; }

/* ---------- outros tratamentos / índice ---------- */
.trx__todos { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--e5); font-weight: 600; color: var(--cor-destaque); }
.trx__indice { padding-top: 0; background: none; }
.trx__cat + .trx__cat { margin-top: var(--e7); }
.trx__cat-t { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.trx__cat-t span { font-size: 1rem; color: var(--cor-destaque); }