/* 1 · Tratamentos — lista editorial; as respostas dele presas na margem, ao lado do tratamento */
.tr .tr-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.tr .tr-cabeca > .wf-rotulo, .tr .tr-titulo, .tr .tr-lead { grid-column: 1 / span 7; }
.tr .tr-queixas { grid-column: 8 / span 5; grid-row: 2 / span 2; align-self: end; padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--linha); }
.tr-queixas-rot { font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--texto-suave); }
.tr-queixas-frase { margin-top: 10px; font-family: var(--f-titulo); font-weight: 300; font-size: var(--t-sub); line-height: 1.22; letter-spacing: -.015em; color: var(--tinta); text-wrap: pretty; }
.tr-q { white-space: nowrap; }
.tr-queixas-frase i { display: inline-block; width: .2em; height: .2em; margin: 0 .2em 0 .12em; border-radius: 50%; background: var(--tinta-molhada); vertical-align: .22em; }

.tr-lista { margin-top: clamp(48px, 7vw, 104px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.tr-item {
  grid-column: 1 / -1; position: relative;
  display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; align-items: start;
  padding: clamp(28px, 3.4vw, 44px) 0;
}
.tr-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: color-mix(in oklab, var(--texto) 22%, transparent); transform-origin: 0 50%; }
.js .tr-item::before { transform: scaleX(0); transition: transform 1.2s var(--curva) .15s; }
.js .tr-item.visto::before { transform: none; }
.tr-num {
  grid-column: 1 / span 2; grid-row: 1 / span 2;
  font-family: var(--f-titulo); font-weight: 200; font-size: clamp(3rem, 6.2vw, 6.25rem); line-height: .78; letter-spacing: -.04em;
  color: var(--madeira); font-variant-numeric: tabular-nums;
}
.tr-nome { grid-column: 3 / span 5; margin: 0; font-family: var(--f-titulo); font-weight: 300; font-size: clamp(1.875rem, 3.3vw, 3.125rem); line-height: 1.04; letter-spacing: -.025em; color: var(--tinta); text-wrap: balance; }
.tr-nome b { font-weight: 700; }
.tr-texto { grid-column: 8 / span 5; font-size: var(--t-apoio); line-height: 1.5; color: var(--texto); padding-top: .35em; }
.tr-cita { margin: 22px 0 0; padding-left: 18px; border-left: 2px solid var(--madeira); }
.tr-cita p { font-family: var(--f-titulo); font-weight: 380; font-size: 1.25rem; line-height: 1.4; color: var(--tinta); }
.tr-cita footer { margin-top: 6px; font-size: .9375rem; color: var(--texto-suave); }
.tr-tambem { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tr-tambem li { padding: 7px 15px; border-radius: 999px; background: color-mix(in oklab, var(--papel-claro) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tinta) 20%, transparent); font-size: 1.0625rem; }

/* linhas com resposta: o tratamento e a pergunta do paciente à esquerda; a resposta dele presa na margem direita */
.tr-com { grid-template-rows: auto auto 1fr; }
.tr-com .tr-texto { grid-column: 3 / span 5; grid-row: 2; padding-top: 18px; max-width: 30em; }
.tr-folha { display: contents; }
.tr-resposta { grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: start; position: relative; z-index: 2; padding-top: 22px; }
.tr-pergunta {
  grid-column: 3 / span 5; grid-row: 3; justify-self: start; align-self: start;
  position: relative; max-width: 25em; margin-top: 30px; padding: 14px 18px 16px;
  background: var(--papel-claro); border-radius: 10px; rotate: -1.6deg;
  box-shadow: 0 10px 22px -12px rgba(40, 33, 24, .4), inset 0 0 0 1px rgba(37, 35, 31, .08);
  font-size: 1.1875rem; line-height: 1.42; color: var(--texto);
}
.tr-pergunta::after {
  content: ""; position: absolute; left: calc(100% + 8px); top: 50%; width: 70px; height: 44px; translate: 0 -70%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 44' fill='none' stroke='%233f6795' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 38 C 20 40, 40 30, 62 8'/%3E%3Cpath d='M51 9 L 63 7 L 61 19'/%3E%3C/svg%3E") no-repeat center / contain;
}
.js .tr-com .tr-pergunta { opacity: 0; translate: 0 10px; rotate: -5deg; transition: opacity .7s var(--curva) .35s, translate .9s var(--curva) .35s, rotate .9s var(--curva) .35s; }
.js .tr-com.visto .tr-pergunta { opacity: 1; translate: none; rotate: -1.6deg; }
.tr-pergunta-rot { display: block; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--texto-suave); margin-bottom: 3px; }
.tr-clipe { position: absolute; z-index: 3; left: 26px; top: -26px; filter: drop-shadow(0 1px 1px rgba(30, 25, 20, .25)); }
.tr-fonte { color: var(--texto-suave); }

.tr-ponte { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid color-mix(in oklab, var(--texto) 22%, transparent); }
.tr-ponte a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3em .6em; min-height: 48px; font-size: var(--t-apoio); color: var(--texto); text-decoration: none; }
.tr-ponte b { font-weight: 600; color: var(--tinta); border-bottom: 1.5px solid color-mix(in oklab, var(--tinta) 30%, transparent); transition: border-color .25s; }
.tr-seta { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tinta); color: var(--papel-claro); font-size: 1.25rem; transition: transform .25s; }
.tr-ponte a:hover b { border-color: var(--tinta); }
.tr-ponte a:hover .tr-seta { transform: translateY(3px); }
.tr-ponte a:focus-visible { outline: 2.5px solid var(--tinta-molhada); outline-offset: 4px; border-radius: 6px; }

@media (max-width: 1100px) {
  .tr .tr-cabeca > .wf-rotulo, .tr .tr-titulo, .tr .tr-lead { grid-column: 1 / span 9; }
  .tr .tr-queixas { grid-column: 1 / span 9; grid-row: auto; margin-top: 32px; }
  .tr-num { grid-column: 1 / span 2; }
  .tr-nome { grid-column: 3 / span 7; }
  .tr-texto, .tr-com .tr-texto { grid-column: 3 / span 9; grid-row: 2; padding-top: 14px; }
  .tr-pergunta { grid-column: 3 / span 8; grid-row: 3; margin-top: 30px; }
  .tr-pergunta::after { display: none; }
  .tr-resposta { grid-column: 4 / span 9; grid-row: 4; margin-top: 14px; }
}
@media (max-width: 760px) {
  .tr .tr-cabeca, .tr-lista { display: block; }
  .tr .tr-queixas { padding-left: 14px; }
  .tr-item { display: block; }
  .tr-num { display: block; font-size: 2.5rem; line-height: 1; margin-bottom: 10px; }
  .tr-texto, .tr-com .tr-texto { padding-top: 14px; }
  .tr-pergunta { max-width: 94%; margin: 28px 0 0 4px; font-size: 1.0625rem; }
  .tr-resposta { margin-top: 18px; padding: 26px 18px 14px; }
  .tr-resposta .wf-resposta-texto { font-size: 1.125rem; }
  .tr-clipe { left: auto; right: 22px; }
  .tr-cita p { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tr-item::before { transform: none; transition: none; }
  .js .tr-com .tr-pergunta { opacity: 1; translate: none; rotate: -1.6deg; transition: none; }
}