/* 2 · Tratamentos (tr-) — "Um problema, um procedimento" */

.tr-cabeca, .tr-quadro, .tr-fecho { max-width: 84rem; margin: 0 auto; }
.tr-intro { margin: clamp(1.2rem, 2vw, 1.8rem) 0 0; }

/* ---------- quadro: queixas × painel ---------- */
.tr-quadro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.6rem, 5vw, 4.5rem);
  align-items: start;
}
.tr-queixas { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgb(27 23 20 / .14); }
.tr-item { border-top: 1px solid rgb(27 23 20 / .14); }
.tr-queixa {
  width: 100%;
  min-height: 4.6rem;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 2.6rem;
  align-items: center;
  gap: .6rem;
  padding: .5rem .2rem;
  border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--d-tinta);
  font: inherit;
}
.tr-num { font-family: var(--d-f-forte); font-size: 1.05rem; color: var(--d-tinta-2); letter-spacing: .04em; }
.tr-q {
  font-family: var(--d-f-script);
  font-size: clamp(1.95rem, 1.1vw + 1.35rem, 2.55rem);
  line-height: 1.1;
  padding: .08em .28em .08em .06em;
  transition: color .35s, transform .45s var(--d-ease);
}
.tr-seta { width: 2.4rem; height: 1.5rem; overflow: visible; fill: none; stroke: var(--d-terracota); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-seta path { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .5s var(--d-ease); }
.tr-queixa:hover .tr-q { transform: translateX(.35rem); }
.tr-queixa { position: relative; border-radius: .9rem; transition: background-color .35s; }
.tr-queixa::before {
  content: ""; position: absolute; left: -.9rem; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  background: var(--d-terracota); transform: scaleY(0); transition: transform .45s var(--d-ease);
}
.tr-queixa[aria-expanded="true"] { background: rgb(233 220 203 / .7); }
.tr-queixa[aria-expanded="true"]::before { transform: none; }
.tr-queixa[aria-expanded="true"] .tr-q { color: var(--d-terracota-tinta); }
.tr-queixa[aria-expanded="true"] .tr-num { color: var(--d-terracota-tinta); }
.tr-queixa[aria-expanded="true"] .tr-seta path { stroke-dashoffset: 0; }
.tr-queixa[aria-expanded="true"] .tr-seta path + path { transition-delay: .3s; }

/* painel terracota: a resposta */
.tr-painel {
  position: relative;
  border-radius: var(--d-raio);
  padding: clamp(1.6rem, 3.4vw, 3rem);
  box-shadow: var(--wf-sombra);
}
.tr-painel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgb(255 236 214 / .05) 0 2px, transparent 2px 1.6rem),
    radial-gradient(60% 50% at 85% 10% in oklab, rgb(240 170 110 / .35), rgb(240 170 110 / 0));
}
.tr-resp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
}
.js .tr-resp:not(.is-ativa) { display: none; }
.tr-para {
  margin: 0; display: flex; align-items: center; gap: .5rem;
  font-family: var(--d-f-script); font-size: clamp(1.9rem, 1vw + 1.4rem, 2.4rem); line-height: 1.1;
  color: #fde3cf;
}
.tr-para span { padding: 0 .28em 0 .06em; }
.tr-para svg { width: 2.2rem; height: 1.3rem; flex: none; overflow: visible; fill: none; stroke: #fde3cf; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-proc { margin: .5rem 0 0; font-weight: 400; }
.tr-proc-nome {
  display: block;
  font-family: var(--d-f-forte);
  font-size: min(clamp(2.8rem, 4.2vw + .4rem, 5.8rem), 17cqi);
  line-height: .93;
  text-transform: uppercase;
  color: var(--d-creme);
  text-wrap: balance;
}
.tr-risco { display: block; width: min(100%, 6.2em); height: .9rem; margin-top: .35rem; overflow: visible; fill: none; stroke: #fde3cf; stroke-width: 5; stroke-linecap: round; font-size: clamp(2.7rem, 3.6vw + .6rem, 4.9rem); }
.tr-risco path { stroke-dasharray: 600; stroke-dashoffset: 0; }
.tr-sub {
  display: block; margin-top: .2rem;
  font-family: var(--d-f-script); font-size: clamp(1.9rem, 1.3vw + 1.3rem, 2.5rem); line-height: 1.15;
  color: #fde3cf; padding: 0 .28em 0 .06em;
}
.tr-porque { margin-top: 1.2rem; max-width: 34rem; }
.tr-resp-texto { container-type: inline-size; min-width: 0; }
.tr-porque p { margin: 0 0 .8rem; font-size: var(--d-t-corpo); line-height: 1.55; color: var(--d-creme); }
.tr-porque .tr-fala { font-size: clamp(1.2rem, .5vw + 1.05rem, 1.45rem); font-weight: 500; line-height: 1.4; text-indent: -.4em; }
.tr-btn { margin-top: .8rem; }
.tr-foto { margin: 0; position: relative; }
.tr-foto figcaption { margin-top: .9rem; font-size: .9rem; line-height: 1.35; color: #f6dccb; text-align: center; }
.tr-foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: calc(var(--d-raio) * .8);
  border: 5px solid var(--d-creme);
  transform: rotate(2.5deg);
  box-shadow: 0 26px 36px -24px rgb(40 14 4 / .7);
}

/* troca de resposta */
.tr-resp.is-entra .tr-para,
.tr-resp.is-entra .tr-proc-nome,
.tr-resp.is-entra .tr-sub,
.tr-resp.is-entra .tr-porque,
.tr-resp.is-entra .tr-btn { animation: tr-sobe .7s var(--d-ease) both; }
.tr-resp.is-entra .tr-proc-nome { animation-delay: .06s; }
.tr-resp.is-entra .tr-sub {
  animation: d-escreve 1s cubic-bezier(.45,.1,.35,1) .3s both;
  -webkit-mask-image: linear-gradient(90deg, #000 0 44%, transparent 56% 100%); mask-image: linear-gradient(90deg, #000 0 44%, transparent 56% 100%);
  -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.tr-resp.is-entra .tr-porque { animation-delay: .24s; }
.tr-resp.is-entra .tr-btn { animation-delay: .3s; }
.tr-resp.is-entra .tr-risco path { animation: tr-risca .8s .35s cubic-bezier(.6, 0, .3, 1) both; }
.tr-resp.is-entra .tr-foto img { animation: tr-foto .8s var(--d-ease) both; }
@keyframes tr-sobe { from { opacity: 0; transform: translateY(14px); } }
@keyframes tr-risca { from { stroke-dashoffset: 600; } }
@keyframes tr-foto { from { opacity: 0; transform: rotate(7deg) translateY(16px) scale(.96); } }

/* ---------- fecho: qual desses é o seu caso? ---------- */
.tr-fecho {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: clamp(4rem, 8vw, 7.5rem);
  align-items: end;
}
.tr-polegar { position: relative; margin: 0; justify-self: center; width: min(100%, 30rem); }
.tr-polegar-fundo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 66%;
  border-radius: var(--d-raio);
  transform: rotate(-2.2deg);
  background:
    radial-gradient(70% 60% at 30% 20% in oklab, rgb(244 222 186 / .55), rgb(244 222 186 / 0)),
    linear-gradient(165deg in oklab, #d9b07a, #cb9d5e 55%, #b07d43);
  box-shadow: var(--wf-sombra);
}
.tr-polegar img { position: relative; width: 100%; height: auto; border-radius: 0 0 var(--d-raio) var(--d-raio); }
.tr-pergunta {
  margin: 0;
  font-family: var(--d-f-forte); font-weight: 400;
  font-size: clamp(2.6rem, 4.4vw + .3rem, 5rem); line-height: .98;
  text-transform: uppercase;
}
.tr-chave { position: relative; display: inline-block; white-space: nowrap; color: var(--d-terracota-tinta); }
.tr-chave .wf-risco { position: absolute; left: 0; right: 0; bottom: -.14em; height: .16em; }
.tr-criterio {
  margin: 1.6rem 0 0; max-width: 36rem;
  font-size: var(--wf-t-sub); font-weight: 500; line-height: 1.38; color: var(--d-tinta);
  text-indent: -.42em;
}
.tr-tambem { margin: 1.2rem 0 0; font-size: var(--d-t-corpo); color: var(--d-tinta-2); }
.tr-tambem span {
  display: inline-block; margin-right: .6rem;
  font-size: .9rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-terracota-tinta);
}
.tr-acoes { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.tr-pilulas { list-style: none; margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; max-width: 44rem; }
.tr-pilulas a {
  display: inline-flex; align-items: center; min-height: 2.9rem; padding: .45rem 1.1rem;
  border-radius: 999px; border: 1.5px solid rgb(154 67 33 / .38);
  background: rgb(251 244 232 / .7);
  font-weight: 600; font-size: 1rem; line-height: 1.15; color: var(--d-tinta); text-decoration: none;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--d-ease);
}
.tr-pilulas a:hover { background: var(--d-terracota-tinta); border-color: var(--d-terracota-tinta); color: var(--d-creme); transform: translateY(-2px); }

/* ---------- celular: o painel abre embaixo da queixa tocada ---------- */
@media (max-width: 980px) {
  .tr-titulo .wf-forte { font-size: clamp(3.3rem, 13vw, 5rem); line-height: .92; }
  .tr-item .tr-painel { margin: .4rem 0 1.4rem; }
  .tr-painel { margin-inline: calc(var(--d-margem) * -.5); }
  .tr-foto { order: -1; }
  .tr-foto img { aspect-ratio: 16 / 10; object-position: 50% 36%; transform: rotate(1.5deg); }
  .tr-foto figcaption { display: none; }
  .tr-para { display: none; }
  .tr-fecho { gap: 0; }
  .tr-polegar { width: min(88%, 24rem); }
  .tr-fecho-texto { padding-top: 2rem; }
}

/* ---------- notebook e desktop ---------- */
@media (min-width: 981px) {
  .tr-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
  .tr-cabeca .wf-kicker { grid-column: 1 / -1; }
  .tr-titulo .wf-forte { font-size: clamp(4rem, 7.4vw, 8rem); line-height: .9; }
  .tr-intro { margin: 0 0 1.4rem; max-width: 24rem; padding-left: 1.4rem; border-left: 2px solid rgb(154 67 33 / .4); }
  .tr-quadro { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); }
  .tr-painel {
    position: sticky; top: 1.5rem;
    margin-right: calc(var(--d-margem) * -1);
    border-radius: var(--d-raio) 0 0 var(--d-raio);
    min-height: 34rem;
    display: grid; align-items: center;
  }
  .tr-foto { align-self: start; margin-top: calc(clamp(1.6rem, 3.4vw, 3rem) * -1 - 3.2rem); margin-right: -.6rem; }
  .tr-painel { margin-top: 3.4rem; }
  .tr-resp { grid-template-columns: minmax(0, 1fr) minmax(0, 18.5rem); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
  .tr-fecho { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
  .tr-polegar { justify-self: stretch; }
  .tr-fecho-texto { padding-bottom: 2rem; }
}
@media (min-width: 1500px) {
  .tr-painel { margin-right: 0; border-radius: var(--d-raio); }
}
/* notebook estreito (981–1359): a resposta empilha, a foto fica baixa em cima */
@media (min-width: 981px) and (max-width: 1359px) {
  .tr-painel { margin-top: 0; }
  .tr-resp { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .tr-foto { order: -1; margin: 0; }
  .tr-foto img { aspect-ratio: 16 / 10; object-position: 50% 36%; transform: rotate(1.5deg); }
  .tr-foto figcaption { display: none; }
}