/* =============================================================================
   Página de vendas do Radar de Marcas (20/09/2026)

   Só esta página carrega este arquivo. Ele traz duas coisas:

   1. O hero desta página, que é o padrão .hero--with-visual do site com uma
      diferença: no lugar da imagem entra a ANIMAÇÃO, que é interativa. O
      .hero__visual do styles.css é uma camada de fundo (position:absolute,
      pointer-events:none) e serve pra imagem, não pra uma peça em que se
      clica. Por isso aqui o hero vira grade: texto na esquerda, animação na
      direita, e uma coluna só abaixo do ponto de quebra do hero (1100px, o
      mesmo que o styles.css já usa).

   2. A animação portada do artefato "Radar em Quatro Semanas" (aprovado em
      20/09/2026). O arreio de revisão do artefato ficou de fora; as duas
      encenações viraram media query na MESMA peça, no ponto de quebra acima.

   Cor: a animação é SEMPRE escura, em qualquer tema, sobre o #010102 do hero
   (decisão de 10/09, "animação de vendas filmada no escuro"). Os tokens da
   peça saem do styles.css quando existem lá; os que não existem (--d-ok,
   --d-atencao, --d-bezel e os tingimentos) ficam declarados no escopo da
   própria peça, nunca no :root, pra não vazarem pro resto do site.
   ========================================================================== */

/* ---------- Hero ---------- */

.hero--with-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
.hero--with-demo .hero__title {
  max-width: 24ch;
}
.hero--with-demo .hero__aside {
  gap: 20px;
}
/* Ordem no celular: título, apoio e preço, e a animação na largura toda
   embaixo. O styles.css já dá order:1 ao título e order:3 ao apoio (regra do
   hero empilhado); sem uma ordem explícita aqui, a animação herdaria order:0
   e subiria pra ANTES do título. */
.hero--with-demo .hero__title { order: 1; }
.hero--with-demo .hero__aside { order: 2; }
.hero--with-demo .hero__demo { order: 3; }

/* A animação e o texto do bloco 3 da copy (título e legenda) andam juntos. */
.hero__demo {
  min-width: 0;
}
.hero__demo-titulo {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-on-dark);
  margin: 0 0 10px;
}
.hero__demo-legenda {
  font-family: var(--font-body);
  font-size: clamp(13.5px, 1.4vw, 15px);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
  margin: 12px 0 0;
  max-width: 62ch;
}

@media (min-width: 1101px) {
  .hero--with-demo {
    /* 440px, e não os 400px do hero padrão: com o botão na dobra (decisão de
       20/09) a coluna de texto ganhou mais uma peça, e a 400px o título e o
       apoio quebravam em tantas linhas que o botão caía abaixo da dobra em
       tela de 800px de altura. Medido: a 440px o botão fica inteiro na
       primeira tela tanto em 1440x900 quanto em 1280x800. */
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: 24px;
  }
  .hero--with-demo .hero__title { grid-column: 1; grid-row: 1; }
  .hero--with-demo .hero__aside { grid-column: 1; grid-row: 2; }
  .hero__demo { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- A peça ---------- */

.radar-demo-quadro {
  /* o palco: fundo do hero, sem moldura clara. container-type liga as
     unidades cqi que dimensionam texto e barras por dentro da peça. */
  background: #010102;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  container-type: inline-size;
  overflow: hidden;
  position: relative;
}
@media (min-width: 1101px) {
  /* No desktop o palco tem proporção fixa. O artefato usava 16/10, mas lá ele
     tinha 772px de largura; aqui a coluna do texto divide o hero e sobram
     ~654px. O celular do aviso não encolhe junto (o que manda na altura dele
     é a quantidade de linhas do e-mail, não a largura do palco): em 16/10 ele
     passava a ocupar 77% da altura e tapava o contador, contra 57% no
     artefato. Em 4/3 a peça volta à mesma proporção aprovada. Medido, não
     estimado, com o artefato aberto do lado.

     1,29 e não 4/3 (1,333) por causa do recorte 1:1 de 20/09: em 4/3 o topo do
     celular passava 7px POR CIMA da linha "pedidos lidos e comparados com
     LUMIVA". O celular é ancorado no pé do corpo, então palco mais alto empurra
     o topo dele pra baixo sem mexer em mais nada: 15px a mais de palco viram
     8px de folga. Descer o celular em vez disso não servia, porque o pé dele
     já fica a 2px da linha da legenda. */
  .radar-demo-quadro { aspect-ratio: 1.29; }
}

.radar-demo {
  /* tokens da peça: escuros sempre, sem depender do tema do visitante */
  --d-fundo: #010102;
  --d-fundo-2: var(--bg-dark);
  --d-superficie: var(--surface-dark);
  --d-veu-4: rgba(255, 255, 255, 0.04);
  --d-veu-8: rgba(255, 255, 255, 0.08);
  --d-veu-14: rgba(255, 255, 255, 0.14);
  --d-cortina: rgba(1, 1, 2, 0.72);
  --d-texto: var(--text-on-dark);
  --d-texto-suave: var(--text-on-dark-muted);
  --d-texto-fraco: var(--text-on-dark-faint);
  /* os que o styles.css não tem: estado do produto e moldura do celular
     desenhado. Mesmos valores do artefato aprovado. */
  --d-ok: #4ADE80;
  --d-atencao: #D9A441;
  --d-bezel: #3A3A3A;
  --d-ok-tint: rgba(74, 222, 128, 0.12);
  --d-atencao-tint: rgba(217, 164, 65, 0.12);
  --d-accent-tint: rgba(92, 147, 255, 0.14);

  position: relative;
  color: var(--d-texto);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Algarismo de largura fixa SÓ onde tem número que muda (o contador sobe a
   cada quadro, e sem isto a linha dança). No artefato a regra valia pra peça
   inteira, e nesta fonte o `tnum` também alarga o PONTO FINAL: "Com som.
   Meio minuto." saía com um vão antes de cada ponto. Medido no print 1:1. */
.radar-demo .contador,
.radar-demo .semana { font-variant-numeric: tabular-nums; }
@media (min-width: 1101px) {
  .radar-demo { position: absolute; inset: 0; }
}

.radar-demo *,
.radar-demo *::before,
.radar-demo *::after { box-sizing: border-box; }

.radar-demo .barra-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--d-veu-8);
  background: var(--d-fundo-2);
}
@media (min-width: 1101px) {
  .radar-demo .barra-topo { padding: 12px 16px; }
}
.radar-demo .lockup { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Lockup REDUZIDO (escudo + BENASSI, sem a linha "Proteção de Marcas"), e só
   aqui: no lockup inteiro a 18px a linha de baixo virava um traço. Mesmo sem
   ela, o nome é 37% da altura da peça, então a peça precisa de 24px pro nome
   ficar do tamanho do texto do lado. */
.radar-demo .lockup__marca {
  display: block;
  height: 24px;
  width: auto;
}
.radar-demo .lockup__produto {
  font-size: 12.5px;
  color: var(--d-texto-suave);
  white-space: nowrap;
  padding-left: 9px;
  border-left: 1px solid var(--d-veu-14);
}
.radar-demo .semana {
  margin-left: auto;
  font-size: 12px;
  color: var(--d-texto-fraco);
  white-space: nowrap;
}
/* Barra de cima em tela estreita. No artefato a peça mobile tinha 380px; no
   celular de verdade ela tem ~342px, e aí o nome do produto, a semana e o
   botão de som deixam de caber e se montam um em cima do outro (visto no
   print 1:1 de 390). A medida é do PALCO, não da janela, por isso é container
   query: a peça também encolhe em coluna estreita de tablet. */
@container (max-width: 430px) {
  .radar-demo .barra-topo { gap: 7px; padding: 9px 12px; }
  .radar-demo .lockup { gap: 7px; }
  .radar-demo .lockup__marca { height: 20px; }
  .radar-demo .lockup__produto { font-size: 11px; padding-left: 7px; }
  .radar-demo .semana { font-size: 11px; }
  .radar-demo .som { font-size: 10.5px; padding: 4px 7px; }
}
@container (max-width: 360px) {
  /* mais estreito que isto, sai o nome do produto: a seção inteira em volta
     já diz que isto é o Radar, e a marca no canto é o que não pode faltar */
  .radar-demo .lockup__produto { display: none; }
}
.radar-demo .semana b { color: var(--d-texto); font-weight: 600; }
.radar-demo .som {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--d-texto-suave);
  background: var(--d-veu-8);
  border: 1px solid var(--d-veu-14);
  border-radius: var(--radius);
  padding: 4px 9px;
  cursor: pointer;
}
.radar-demo .som:hover { color: var(--d-texto); }
.radar-demo .som:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.radar-demo .som[aria-pressed="true"] { color: var(--d-texto); }

.radar-demo .corpo {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 12px 14px;
  position: relative;
}
@media (min-width: 1101px) {
  .radar-demo .corpo { padding: 14px 16px 16px; }
}

.radar-demo .card {
  background: var(--d-superficie);
  border: 1px solid var(--d-veu-14);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-width: 0;
}
@media (min-width: 1101px) {
  .radar-demo .card { padding: 14px 16px; }
}
.radar-demo .marca__rotulo {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-texto-fraco);
  font-weight: 600;
  margin: 0 0 4px;
}
.radar-demo .marca__nome {
  font-size: clamp(22px, 7cqi, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0;
}
@media (min-width: 1101px) {
  .radar-demo .marca__nome { font-size: clamp(20px, 5cqi, 30px); }
}
.radar-demo .marca__meta { font-size: 12.5px; color: var(--d-texto-suave); margin: 4px 0 10px; }

.radar-demo .selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border-radius: var(--radius);
  background: var(--d-ok-tint);
  color: var(--d-ok);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.5s ease, color 0.5s ease;
}
/* o ponto do selo virou o escudo de ondas do Radar (LEIA-ME, item 4): mesma
   cor por currentColor, e o pulso em volta só enquanto a vigilância está em
   dia. Em "Atenção" o pulso some, como no artefato. */
.radar-demo .selo .escudo {
  width: 13px;
  height: 13px;
  flex: none;
  position: relative;
  color: inherit;
}
.radar-demo .selo .escudo svg { display: block; width: 100%; height: 100%; }
.radar-demo .selo .escudo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.45;
  animation: radarPulso 1.8s ease-out infinite;
}
.radar-demo .selo[data-estado="atencao"] { background: var(--d-atencao-tint); color: var(--d-atencao); }
.radar-demo .selo[data-estado="atencao"] .escudo::after { animation: none; opacity: 0; }
@keyframes radarPulso {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.radar-demo .achado {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--d-atencao);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.radar-demo .achado.is-on { opacity: 1; transform: none; }
.radar-demo .achado .quad {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: var(--radius-xs);
  flex: none;
}

.radar-demo .leitura { display: grid; align-content: start; gap: 2px; }
.radar-demo .leitura__fase {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-texto-fraco);
  font-weight: 600;
  min-height: 1.4em;
  transition: color 0.4s;
}
.radar-demo .leitura__fase.is-lida { color: var(--d-ok); }
.radar-demo .leitura__fase.is-achado { color: var(--d-atencao); }
.radar-demo .contador {
  font-size: clamp(32px, 11cqi, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}
@media (min-width: 1101px) {
  .radar-demo .contador { font-size: clamp(30px, 8cqi, 48px); }
}
.radar-demo .leitura__sub { font-size: 12.5px; color: var(--d-texto-suave); }

.radar-demo .grafico { display: grid; gap: 8px; align-content: end; }
.radar-demo .barras {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  height: clamp(52px, 20cqi, 84px);
}
@media (min-width: 1101px) {
  .radar-demo .barras { height: clamp(56px, 16cqi, 96px); }
}
.radar-demo .barra {
  position: relative;
  height: 100%;
  background: var(--d-veu-4);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.radar-demo .barra i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  transition: height 0.35s ease;
}
.radar-demo .barra.is-achado i { background: var(--d-atencao); }
.radar-demo .grafico__rotulos {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  font-size: 10.5px;
  color: var(--d-texto-fraco);
  text-align: center;
}

/* --- o aviso que chega --- */
.radar-demo .email {
  background: var(--d-superficie);
  border: 1px solid var(--d-veu-14);
  border-radius: var(--radius);
  overflow: hidden;
}
.radar-demo .email__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 0;
  font-size: 12px;
}
.radar-demo .email__de { font-weight: 700; }
.radar-demo .email__hora { color: var(--d-texto-fraco); }
.radar-demo .email__assunto { padding: 4px 12px 8px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.radar-demo .email__corpo {
  border-top: 1px solid var(--d-veu-8);
  padding: 10px 12px 12px;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
}
.radar-demo .email__linha { display: flex; justify-content: space-between; gap: 12px; }
.radar-demo .email__linha .k { color: var(--d-texto-fraco); }
.radar-demo .email__linha .v { font-weight: 600; }
.radar-demo .email__prazo {
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--d-accent-tint);
  color: var(--d-texto);
  font-weight: 500;
}
.radar-demo .email__botao { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--accent-light); }

.radar-demo .aviso {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
}
.radar-demo .aviso.is-on { opacity: 1; }

/* --- legenda falada, texto de verdade, centralizada abaixo do palco --- */
.radar-demo .narracao {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  padding: 6px 14px 14px;
  min-height: calc(2.8em + 24px);
}
@media (min-width: 1101px) {
  .radar-demo .narracao { padding: 10px 16px 14px; }
}
.radar-demo .narracao__linha {
  display: inline-block;
  max-width: 52ch;
  padding: 7px 14px;
  border-radius: var(--radius);
  background: var(--d-accent-tint);
  border: 1px solid var(--d-veu-14);
  color: var(--d-texto);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
}
@media (min-width: 1101px) {
  .radar-demo .narracao__linha { font-size: clamp(13px, 2cqi, 15.5px); }
}
.radar-demo .narracao__linha:empty { opacity: 0; }
.radar-demo .narracao__linha.is-in { animation: radarNarrIn 0.45s ease forwards; }
@keyframes radarNarrIn { to { opacity: 1; transform: none; } }

/* --- cartaz (antes do clique) e "ver de novo" (depois do fim) --- */
.radar-demo .cartaz {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--d-cortina);
  padding: 16px;
  text-align: center;
  transition: opacity 0.4s ease;
}
.radar-demo .cartaz[hidden] { display: none; }
.radar-demo .cartaz.is-off { opacity: 0; pointer-events: none; }
.radar-demo .btn-play {
  font: inherit;
  font-weight: 700;
  font-size: clamp(14px, 2.4cqi, 17px);
  color: var(--white);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 20px 12px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.radar-demo .btn-play:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.radar-demo .btn-play:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.radar-demo .btn-play svg { width: 14px; height: 14px; flex: none; }
.radar-demo .cartaz__dica { font-size: 12.5px; color: var(--d-texto-suave); margin: 0; }
.radar-demo .btn-replay {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--d-texto);
  background: var(--d-veu-8);
  border: 1px solid var(--d-veu-14);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.radar-demo .btn-replay:hover { background: var(--d-veu-14); }
.radar-demo .btn-replay:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.radar-demo .btn-replay svg { width: 13px; height: 13px; }

/* ===== Encenação MOBILE (até 1100px, o ponto de quebra do hero) =====
   Largura toda, altura do conteúdo. Ordem: leitura, marca, gráfico, legenda.
   O aviso desce como notificação por cima do corpo. */
.radar-demo .corpo {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
}
.radar-demo .leitura { order: 1; }
.radar-demo .card--marca { order: 2; }
.radar-demo .grafico { order: 3; padding-top: 2px; }
/* A notificação mede pelo QUADRO, não pelo corpo, e por isso desce por cima da
   barra de cima, como no artefato aprovado. No porte ela media pelo corpo e
   nascia 41px mais embaixo (a altura da barra), o que a fazia cobrir o nome da
   marca: no recorte 1:1 de 20/09 o LUMIVA sumia atrás dela. Tirar o
   position:relative do corpo aqui faz o aviso subir esses 41px. */
.radar-demo .corpo { position: static; }
.radar-demo .aviso {
  left: 10px;
  right: 10px;
  top: 8px;
  transform: translateY(-130%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
}
.radar-demo .aviso.is-on { transform: translateY(0); }
.radar-demo .aviso .email { border-color: var(--border-dark); }
/* No artefato aprovado a notificação do celular NÃO tem o "Ver no painel":
   quem tem é o celular desenhado do desktop. Além de fiel, isso encurta a
   notificação o bastante pro nome da marca voltar a aparecer embaixo dela,
   junto com o "Atenção". */
.radar-demo .aviso .email__botao { display: none; }

/* ===== Encenação DESKTOP (do ponto de quebra do hero pra cima) =====
   Esquerda: a marca em cima, o gráfico embaixo. Direita: a leitura em cima e,
   embaixo, o vazio onde o celular sobe. O celular fica dentro do corpo, por
   isso nunca invade a faixa da legenda. */
@media (min-width: 1101px) {
  .radar-demo .corpo {
    /* no desktop o celular desenhado é ancorado no corpo, e é isso que o
       mantém fora da faixa da legenda */
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .radar-demo .card--marca { grid-column: 1; grid-row: 1; align-self: start; order: 0; }
  .radar-demo .grafico { grid-column: 1; grid-row: 2; order: 0; padding-top: 0; }
  .radar-demo .leitura { grid-column: 2; grid-row: 1; order: 0; }
  .radar-demo .aviso {
    left: auto;
    top: auto;
    right: clamp(12px, 3cqi, 28px);
    bottom: -8px;
    width: clamp(186px, 29cqi, 228px);
    transform: translateY(112%);
    background: var(--d-fundo-2);
    border: 2px solid var(--d-bezel);
    border-radius: 26px;
    padding: 12px 9px 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  }
  .radar-demo .aviso.is-on { transform: translateY(0); }
  .radar-demo .aviso::before {
    content: "";
    display: block;
    width: 38%;
    height: 5px;
    margin: 0 auto 9px;
    border-radius: 999px;
    background: var(--d-bezel); /* recorte do celular, ilustração */
  }
  /* O celular desenhado mede pela LARGURA do palco (cqi), não em pixel fixo.
     No artefato o palco tinha 772px e o celular ficava com 29% da largura e
     57% da altura do quadro. Aqui o palco é menor (a coluna do texto divide o
     hero), e com pixel fixo por dentro o mesmo celular chegava a 77% da
     altura: tapava o contador. Em cqi, os dois quadros desenham a mesma
     proporção, que é o que foi aprovado no olho. */
  .radar-demo .aviso {
    padding: clamp(8px, 1.55cqi, 12px) clamp(6px, 1.17cqi, 9px) clamp(11px, 2.07cqi, 16px);
    border-radius: clamp(19px, 3.4cqi, 26px);
  }
  .radar-demo .aviso .email { font-size: clamp(9px, 1.49cqi, 11.5px); border-color: var(--d-veu-14); }
  .radar-demo .aviso .email__botao { display: block; }
  .radar-demo .aviso .email__topo { padding: clamp(7px, 1.3cqi, 10px) clamp(8px, 1.55cqi, 12px) 0; }
  .radar-demo .aviso .email__assunto {
    font-size: clamp(10px, 1.62cqi, 12.5px);
    padding: clamp(3px, 0.52cqi, 4px) clamp(8px, 1.55cqi, 12px) clamp(6px, 1.04cqi, 8px);
  }
  .radar-demo .aviso .email__corpo {
    padding: clamp(7px, 1.3cqi, 10px) clamp(8px, 1.55cqi, 12px) clamp(8px, 1.55cqi, 12px);
    gap: clamp(4px, 0.78cqi, 6px);
  }
  .radar-demo .aviso .email__prazo { padding: clamp(6px, 1.04cqi, 8px) clamp(7px, 1.3cqi, 10px); }
}

/* acessibilidade */
.radar-demo .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Com movimento reduzido a peça continua tocando, em cenas discretas: só as
   transições somem. O styles.css já desliga transition/animation no site
   inteiro nesse modo; isto aqui garante que a legenda não fique invisível
   quando a animação que a revela não roda. */
@media (prefers-reduced-motion: reduce) {
  .radar-demo .selo .escudo::after { animation: none; opacity: 0; }
  .radar-demo .aviso,
  .radar-demo .achado,
  .radar-demo .barra i,
  .radar-demo .selo,
  .radar-demo .leitura__fase,
  .radar-demo .cartaz { transition: none; }
  .radar-demo .narracao__linha,
  .radar-demo .narracao__linha.is-in { animation: none; opacity: 1; transform: none; }
}

/* ---------- Texto das seções desta página ----------
   As outras páginas resolvem isto com style="" no próprio parágrafo. Aqui
   virou classe, porque são sete blocos de copy aprovada e o tamanho do texto
   não pode variar de bloco pra bloco por descuido de cópia. */

.hero__preco {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
  margin: 0;
}
/* a linha do preço vem logo abaixo do botão, no hero e no bloco 7 */
.btn + .hero__preco { margin-top: 12px; }

.texto-secao {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.1vw, 23px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
  margin: 0;
}
.texto-secao--onaccent { color: #DCE6FF; }
.texto-secao--ondark { color: var(--text-on-dark-muted); }
.section--dark .texto-secao + .btn,
.section--dark .section-title + .texto-secao { margin-top: 22px; }