/* Resultados reais: texto à esquerda (fundo branco), funil dentro de um "Mac" com o relatório Trínomo. Legível sem JS. */
.tn-rs { background: #fff; color: #0b0b0c; padding-block: clamp(4rem, 8vw, 8rem); }
.tn-rs__layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.tn-rs__text { max-inline-size: 32rem; }
.tn-rs__eyebrow { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8c6b14; }
.tn-rs__title { margin: 0; font-family: var(--tn-font-display, inherit); font-weight: 600; font-size: clamp(2rem, 1rem + 3.2vw, 3.75rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; color: #0b0b0c; }
.tn-rs__title em { font-style: normal; color: #b8901d; white-space: nowrap; }
.tn-rs__lead { margin: 1.25rem 0 0; font-size: 1.0625rem; line-height: 1.45; color: rgba(11, 11, 12, 0.72); }
.tn-rs__cta { margin: 1.75rem 0 0; }
.tn-rs .tn-rs__cta .tn-btn { background: #0b0b0c; color: #fff; }
.tn-rs__note { margin: 1.5rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: rgba(11, 11, 12, 0.66); }

/* Mac 15": tela 16:10 que escala com a largura (container query); no celular vira coluna sem proporção fixa. */
.tn-rs__mac { inline-size: 100%; filter: drop-shadow(0 30px 40px rgba(11, 11, 12, 0.25)) drop-shadow(0 6px 8px rgba(11, 11, 12, 0.18)); }
.tn-rs__bezel { background: #0b0b0c; border-radius: 1.1rem 1.1rem 0.25rem 0.25rem; padding: 0.7rem 0.7rem 0.9rem; border: 1px solid #2a2a2d; }
.tn-rs__screen { container-type: inline-size; aspect-ratio: 16 / 10; display: flex; flex-direction: column; background: #151517; border-radius: 0.4rem; padding: 0 4cqw 2.6cqw; color: #fff; overflow: hidden; }
.tn-rs__bar { display: flex; align-items: center; gap: 0.8cqw; margin-inline: -4cqw; padding: 1.3cqw 2cqw; background: #1f1f22; border-block-end: 1px solid rgba(255, 255, 255, 0.08); margin-block-end: 2.4cqw; flex: none; }
.tn-rs__bar i { inline-size: 1.4cqw; block-size: 1.4cqw; border-radius: 50%; background: #ff5f57; }
.tn-rs__bar i:nth-child(2) { background: #febc2e; }
.tn-rs__bar i:nth-child(3) { background: #28c840; }
.tn-rs__rephead { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-block-end: 2.6cqw; flex: none; }
.tn-rs__reptitle { margin: 0; font-family: var(--tn-font-display, inherit); font-weight: 600; font-size: 3.2cqw; line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.tn-rs .tn-rs__logo { inline-size: auto; block-size: 4cqw; max-inline-size: none; display: block; }
/* Valor investido na semana, em destaque */
.tn-rs__invested { margin: 0 0 2.6cqw; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.2cqw 2.6cqw; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 1.4cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.tn-rs__invested strong { font-family: var(--tn-font-display, inherit); font-weight: 600; font-size: 6cqw; line-height: 1; letter-spacing: -0.02em; text-transform: none; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Três blocos: impressões, cliques, leads gerados */
.tn-rs__funnel { flex: 1; min-block-size: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.tn-rs__step { min-inline-size: 0; display: grid; align-content: center; justify-items: center; gap: 0.8cqw; padding: 1.4cqw 1cqw; text-align: center; color: #0b0b0c; }
.tn-rs__step--1 { background: #fff; }
.tn-rs__step--2 { background: #e9e5d8; }
.tn-rs__step--3 { background: #d2a833; }
.tn-rs__label { font-size: 1.3cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.tn-rs__value { font-family: var(--tn-font-display, inherit); font-weight: 600; font-size: 5.2cqw; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tn-rs__cost { font-size: 1.3cqw; line-height: 1.25; opacity: 0.75; }
.tn-rs__repfoot { margin: 2cqw 0 0; padding-block-start: 1.4cqw; border-block-start: 1px solid rgba(255, 255, 255, 0.12); font-size: 1.05cqw; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58); flex: none; }
.tn-rs__base { block-size: 0.85rem; margin-inline: -4%; background: #c9c9cc; border-radius: 0 0 1.2rem 1.2rem / 0 0 0.9rem 0.9rem; position: relative; }
.tn-rs__base::before { content: ""; position: absolute; inset-inline: 38% 38%; inset-block-start: 0; block-size: 0.3rem; background: #9d9da1; border-radius: 0 0 0.4rem 0.4rem; }

@media (max-width: 899px) { .tn-rs__layout { grid-template-columns: 1fr; } .tn-rs__text { max-inline-size: none; } .tn-rs .tn-rs__cta .tn-btn { inline-size: 100%; justify-content: center; } }

/* Celular: o Mac vira um iPhone (retrato, Dynamic Island, botões laterais); o conteúdo escala com a largura da tela do aparelho. */
@media (max-width: 599px) {
  .tn-rs__mac { max-inline-size: 19rem; margin-inline: auto; }
  .tn-rs__base { display: none; }
  .tn-rs__bezel { position: relative; padding: 0.55rem; border-radius: 3rem; border: 2px solid #2a2a2d; background: #0b0b0c; }
  .tn-rs__bezel::before, .tn-rs__bezel::after { content: ""; position: absolute; inline-size: 3px; background: #2a2a2d; border-radius: 2px; }
  .tn-rs__bezel::before { inset-inline-start: -5px; inset-block-start: 6.5rem; block-size: 3rem; box-shadow: 0 4rem 0 #2a2a2d; }
  .tn-rs__bezel::after { inset-inline-end: -5px; inset-block-start: 8rem; block-size: 4.5rem; }
  .tn-rs__screen { position: relative; aspect-ratio: 9 / 19.5; border-radius: 2.5rem; padding: 0 7cqw 8cqw; }
  .tn-rs__bar { margin: 0 -7cqw; padding: 4cqw 0 0; background: transparent; border: 0; justify-content: center; block-size: 14cqw; margin-block-end: 3cqw; }
  .tn-rs__bar i { display: none; }
  .tn-rs__bar::before { content: ""; inline-size: 30cqw; block-size: 8.5cqw; border-radius: 999px; background: #000; }
  .tn-rs__screen::after { content: ""; position: absolute; inset-inline: 35cqw; inset-block-end: 2.6cqw; block-size: 1.2cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.45); }
  .tn-rs__rephead { flex-direction: column-reverse; align-items: flex-start; gap: 2.5cqw; margin-block-end: 5cqw; }
  .tn-rs__reptitle { font-size: 6.6cqw; }
  .tn-rs .tn-rs__logo { block-size: 6cqw; }
  .tn-rs__invested { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2cqw; padding: 5cqw; margin-block-end: 4cqw; font-size: 2.9cqw; }
  .tn-rs__invested strong { font-size: 12.5cqw; }
  .tn-rs__funnel { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); gap: 3cqw; }
  .tn-rs__step { padding: 3cqw; gap: 1.5cqw; }
  .tn-rs__label { font-size: 2.9cqw; }
  .tn-rs__value { font-size: 12cqw; }
  .tn-rs__cost { font-size: 3cqw; }
  .tn-rs__repfoot { margin-block-start: 4cqw; padding-block-start: 3cqw; font-size: 2.4cqw; text-align: center; }
}