/* cr · Correspondência — as opiniões (noite) */

/* a luz da luminária sobre a mesa */
.cr-luz {
  position: absolute; z-index: -1; pointer-events: none;
  left: 30%; top: -30vmax; width: 120vmax; aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(in oklab circle closest-side, color-mix(in oklab, var(--lampada) 14%, transparent), color-mix(in oklab, var(--lampada) 5%, transparent) 55%, transparent);
}

/* ---------- cabeçalho: a conta, larga; embaixo, o apoio e a nota honesta ---------- */
.cr-titulo {
  font-size: clamp(2.75rem, 8.4vw, 8.25rem); line-height: .96; letter-spacing: -.035em;
  display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: .24em; align-items: baseline;
}
.cr-linha, .cr-linha-2 > b { display: contents; }
.cr-titulo .wf-numero { color: inherit; text-align: right; }
.cr-linha:first-child .wf-numero { font-weight: 300; }
.cr-linha-2 .wf-numero, .cr-linha-2 .cr-pal { color: var(--lampada); font-weight: 700; }
.cr-cabeca-b {
  margin-top: clamp(28px, 3.6vw, 52px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start;
}
.cr-lead { margin-top: 0; max-width: 25em; color: var(--papel); }
.cr-nota { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid rgba(243, 237, 228, .16); }
.cr-nota-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.cr-nota-val { font-family: var(--f-titulo); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: -.02em; }
.cr-nota-txt { color: var(--noite-suave); }
.cr-estrelas { color: var(--lampada); letter-spacing: .06em; }
.cr-dist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.cr-dist li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr) 3.4em; align-items: center; gap: 12px; font-size: 1rem; color: var(--noite-suave); }
.cr-dist-b { height: 6px; border-radius: 3px; background: rgba(243, 237, 228, .1); overflow: hidden; }
.cr-dist-b i { display: block; height: 100%; width: calc(var(--n) / 1049 * 100%); min-width: 4px; background: var(--lampada); border-radius: 3px; transform-origin: 0 50%; transition: transform 1.4s .3s var(--curva); }
.js .cr-cabeca-b:not(.visto) .cr-dist-b i { transform: scaleX(0); }
.cr-dist-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--papel); font-weight: 600; }

/* ---------- a opinião e a resposta ---------- */
.cr-op { margin: 0; }
.cr-op p { font-family: var(--f-titulo); font-weight: 300; font-size: clamp(1.3rem, 1.75vw, 1.625rem); line-height: 1.36; letter-spacing: -.012em; color: var(--papel); text-wrap: pretty; }
.cr-op footer { margin-top: 12px; font-size: .9375rem; color: var(--noite-suave); }
.cr-op footer b { color: var(--papel); font-weight: 600; }
.cr-op footer .cr-estrelas { margin-right: 4px; }
.cr-resp {
  --recuo: clamp(28px, 4vw, 56px);
  position: relative; margin: 34px 0 0 var(--recuo); max-width: 430px;
  transform: rotate(var(--rot, -.7deg)); transform-origin: 0 0;
}
.cr-resp .wf-resposta-texto { font-size: 1.1875rem; }
/* o fio de tinta que sai da opinião e entra na resposta */
.cr-resp::before {
  content: ""; position: absolute; left: calc(var(--recuo) * -1 + 10px); top: -30px; width: calc(var(--recuo) - 10px); height: 58px;
  border: solid color-mix(in oklab, var(--lampada) 55%, transparent); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 14px;
  transform-origin: 0 0; transition: clip-path 1s .25s var(--curva);
  clip-path: inset(0 0 0 0);
}
.js [data-rev]:not(.visto) .cr-resp::before { clip-path: inset(0 100% 100% 0); }

/* ---------- o destaque: uma frase grande e a resposta ao lado ---------- */
.cr-destaque {
  margin-top: clamp(72px, 9vw, 136px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: end;
  padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid rgba(243, 237, 228, .12);
}
.cr-destaque .cr-op p { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.12; letter-spacing: -.025em; }
.cr-destaque .cr-op p::first-letter { color: var(--lampada); }
.cr-destaque .cr-resp { margin: 0 0 8px; --rot: 1deg; max-width: 460px; }
.cr-destaque .cr-resp::before {
  left: -36px; top: auto; bottom: 50%; width: 30px; height: 1.5px; border-width: 1.5px 0 0 0; border-radius: 0;
}

/* ---------- as cartas: duas colunas desencontradas, como papéis na mesa ---------- */
.cr-cartas {
  position: relative; margin-top: clamp(64px, 8vw, 112px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 104px);
}
.cr-cartas:focus-visible { outline: 2.5px solid var(--lampada); outline-offset: 8px; border-radius: 6px; }
.cr-col { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 7vw, 104px); align-content: start; }
.cr-col-2 { padding-top: clamp(80px, 12vw, 200px); }
.cr-par { position: relative; display: grid; }
.cr-par:nth-child(even) .cr-resp { --rot: .6deg; }
.cr-par-g .cr-op p { font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.26; }
.cr-nav { display: none; }

/* ---------- os temas: cada número pesa o que conta ---------- */
.cr-temas { margin-top: clamp(80px, 10vw, 150px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(243, 237, 228, .14); }
.cr-h3 { margin: 0 0 22px; font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--noite-suave); }
.cr-temas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px clamp(22px, 3vw, 44px); }
.cr-temas-lista li { display: inline-flex; align-items: baseline; gap: .4em; }
.cr-temas-lista b {
  font-family: var(--f-titulo); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  font-size: calc(1.25rem + var(--n) / 597 * clamp(1.5rem, 4.4vw, 4.25rem));
  color: color-mix(in oklab, var(--lampada) calc(var(--n) / 597 * 100%), var(--papel));
}
.cr-temas-lista span { font-size: 1.0625rem; color: var(--noite-suave); }
.cr-temas-pe { margin-top: 22px; font-size: .875rem; color: var(--noite-suave); }

.cr-acoes { margin-top: clamp(48px, 6vw, 72px); display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .cr-destaque { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cr-destaque .cr-resp { margin: 8px 0 0 48px; }
  .cr-destaque .cr-resp::before { left: -38px; top: -30px; bottom: auto; width: 28px; height: 58px; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 14px; }
}

/* ---------- celular: o título empilhado e as cartas de lado, no dedo ---------- */
@media (max-width: 760px) {
  .cr-titulo { grid-template-columns: auto; font-size: clamp(2.6rem, 12.4vw, 4rem); line-height: 1; row-gap: 0; }
  .cr-titulo .wf-numero { text-align: left; }
  .cr-pal { margin-top: -.06em; }
  .cr-linha-2 .wf-numero { margin-top: .2em; }
  .cr-cabeca-b { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cr-nota { padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(243, 237, 228, .16); }

  .cr-destaque { margin-top: 56px; padding-bottom: 0; border-bottom: 0; }
  .cr-destaque .cr-op p { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .cr-destaque .cr-resp { margin-left: 26px; }
  .cr-destaque .cr-resp::before { left: -16px; width: 16px; }

  .cr-cartas {
    display: flex; gap: 16px; margin: 56px calc(var(--margem) * -1) 0; padding: 12px var(--margem) 28px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); overscroll-behavior-x: contain;
    scrollbar-width: none; align-items: flex-start;
  }
  .cr-cartas::-webkit-scrollbar { display: none; }
  .cr-col, .cr-col-2 { display: contents; }
  .cr-par { flex: 0 0 min(84vw, 380px); scroll-snap-align: start; }
  .cr-par .cr-op p, .cr-par-g .cr-op p { font-size: 1.25rem; }
  .cr-resp { --recuo: 22px; }
  .cr-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
  .cr-seta {
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.25rem;
    color: var(--papel); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(243, 237, 228, .4);
    -webkit-tap-highlight-color: transparent; transition: opacity .25s, box-shadow .25s;
  }
  .cr-seta:disabled { opacity: .35; cursor: default; }
  .cr-seta:focus-visible { outline: 2.5px solid var(--lampada); outline-offset: 3px; }
  .cr-pos { color: var(--noite-suave); font-variant-numeric: tabular-nums; }
  .cr-pos b { color: var(--papel); font-family: var(--f-titulo); font-size: 1.25rem; }

  .cr-temas { margin-top: 64px; }
  .cr-temas-lista { gap: 12px 22px; }
  .cr-temas-lista b { font-size: calc(1.125rem + var(--n) / 597 * 1.75rem); }
  .cr-temas-lista span { font-size: 1rem; }
  .cr-acoes .botao, .cr-acoes .botao-sec { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cr-cabeca-b:not(.visto) .cr-dist-b i { transform: none; }
  .js [data-rev]:not(.visto) .cr-resp::before { clip-path: none; }
}