/* Go Bee Zap — página /redacao/ (Correção de Redação, recurso extra para escolas e cursinhos).
   Complementa o site.css: reaproveita os componentes dele e só acrescenta o que a página tem de seu.

   FONTE: servida daqui, não do Google Fonts (licença OFL em assets/fonts/OFL-nunito-sans.txt).
   Os arquivos normais são os MESMOS bytes que a página dos jogos publica no mesmo caminho,
   para as duas PRs entrarem sem conflito. A Avenir Next tem licença só de desktop: NÃO é
   publicada — quem a tem instalada a vê; os demais veem a Nunito Sans. */

@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/nunito-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:italic;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/nunito-sans-latin-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DESIGN SYSTEM GO BEESINESS (colors_and_type.css): pilha Avenir Next → Nunito Sans; pesos
   400/600/700/800; itálico só em destaque e número. Escala do DS: 48/36/28/22/18/16/14/12 —
   nada abaixo de 12. Preto #0B0C0D e amarelo #FFCB05 já são --ink/--fixed-black e --honey;
   o acento do Zap é --zap #30D93B, com --zap-ink #198921 para texto sobre claro.
   A barra de campanha do topo é a mesma da home (CEO, 12/10/2026): --topbar-h vem do site.js. */
html[data-pagina="redacao"]{
  --f:'Avenir Next Cyr','Avenir Next','Avenir','Nunito Sans',system-ui,-apple-system,sans-serif;
  --t-display:clamp(2.25rem,1.6rem + 2.6vw,3rem);  /* 36 → 48 */
  --t-xl:1.75rem;      /* 28 — h2 */
  --t-lg:1.375rem;     /* 22 — h3 */
  --t-md:1.375rem;     /* 22 */
  --t-sm:1.125rem;     /* 18 */
  --t-body:1rem;       /* 16 */
  --t-body-sm:.875rem; /* 14 */
  --t-cap:.75rem;      /* 12 */
  --t-cap-xs:.75rem;   /* 12 — o DS não desce abaixo disso */
}
html[data-pagina="redacao"] .flow__n{font-size:clamp(2.25rem,1.6rem + 2.6vw,3rem)}
html[data-pagina="redacao"] .reveal-line{font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem);max-width:44rem}

/* ---------- Passo 1 · hero ---------- */
.rd-hero h1{max-width:42.5rem}
.rd-hero .lede{max-width:42.5rem}
.rd-folha{display:block;width:48px;max-width:100%;aspect-ratio:210/297;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--wa-line);position:relative;overflow:hidden;margin-bottom:var(--s1)}
.rd-folha i{position:absolute;width:6px;height:6px;background:var(--fixed-black)}
.rd-folha i:nth-child(1){top:4px;left:4px}.rd-folha i:nth-child(2){top:4px;right:4px}
.rd-folha i:nth-child(3){bottom:4px;left:4px}.rd-folha i:nth-child(4){bottom:4px;right:4px}
.rd-folha b{position:absolute;left:9px;right:9px;height:1px;background:#C9CED6}
.rd-folha em{position:absolute;left:10px;height:2px;border-radius:2px;background:#1F2937;opacity:.7}

/* ---------- Passo 2 · prova ---------- */
.rd-prova{display:grid;gap:var(--s4);margin-bottom:var(--s12)}
@media(min-width:900px){.rd-prova{grid-template-columns:1fr 1fr}}
.rd-prova__c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s3)}
.rd-prova__n{font-size:var(--t-xl);font-weight:800;font-style:italic;letter-spacing:-.02em;line-height:1.1;
  color:var(--zap-ink);font-variant-numeric:tabular-nums}
.rd-prova__c p{font-size:var(--t-body);color:var(--ink-2)}
.rd-prova__c small{font-size:var(--t-cap);color:var(--muted);font-weight:700}
.rd-comando{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s8);padding:var(--s4) var(--s6);
  background:var(--zap-subtle);border:1px solid var(--zap-line);border-radius:var(--r-md);
  font-size:var(--t-body);color:var(--ink-2)}
.rd-comando svg{flex:0 0 auto;margin-top:3px;color:var(--zap-ink)}
.rd-comando b{color:var(--ink)}

/* ---------- Passo 3 · mecanismo ---------- */
.rd-mec{display:grid;gap:var(--s4)}
@media(min-width:768px){.rd-mec{grid-template-columns:repeat(2,1fr)}}
.rd-mec__c{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r-md);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s3)}
.rd-mec__c h3{font-size:var(--t-sm);font-weight:800;color:var(--on-dark)}
.rd-mec__c p{font-size:var(--t-body-sm);color:var(--on-dark-2)}
.rd-mec__c .ic-hex{background:var(--zap)}

/* ---------- Passo 5 · micro-história ---------- */
.rd-hist{display:grid;gap:var(--s8);align-items:start}
/* imagem sozinha à esquerda, título e texto à direita (CEO 12/10) */
@media(min-width:1024px){.rd-hist{grid-template-columns:5fr 7fr;gap:var(--s16);align-items:center}}
.rd-hist__aviso{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-cap);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--honey-900);background:var(--honey-50);
  border:1px solid var(--honey-300);padding:var(--s1) var(--s3);border-radius:var(--r-full);margin-bottom:var(--s4)}
.rd-hist__txt p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;margin-bottom:var(--s4);max-width:var(--read)}
.rd-hist__txt p:last-child{margin-bottom:0}
.rd-hist__txt b{color:var(--ink)}

/* ---------- Passo 6 · antes e depois + devolutiva ---------- */
.rd-trans{display:grid;gap:var(--s8);align-items:start}
@media(min-width:1024px){.rd-trans{grid-template-columns:6fr 5fr;gap:var(--s12)}}
.rd-ad{display:grid;gap:var(--s4)}
@media(min-width:640px){.rd-ad{grid-template-columns:1fr 1fr}}
.rd-ad__col{border-radius:var(--r-md);padding:var(--s6);border:1px solid var(--line);background:var(--surface)}
.rd-ad__col--depois{border-color:var(--zap);box-shadow:0 0 0 1px var(--zap)}
.rd-ad__t{font-size:var(--t-cap);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s4)}
.rd-ad__col--depois .rd-ad__t{color:var(--zap-ink)}
.rd-ad ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.rd-ad li{display:flex;gap:var(--s2);font-size:var(--t-body-sm);color:var(--ink-3);line-height:1.5}
.rd-ad li svg{flex:0 0 auto;margin-top:3px}
.rd-ad__col--antes li svg{color:var(--muted)}
.rd-ad__col--depois li svg{color:var(--zap-ink)}
.rd-ad__col--depois li{color:var(--ink-2)}

/* a maquete da devolutiva — desenho em HTML, sem foto e sem redação real */
.rd-dev{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e3);
  overflow:hidden}
.rd-dev__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);background:var(--surface-2);border-bottom:1px solid var(--line)}
.rd-dev__bar b{font-size:var(--t-body-sm);font-weight:800}
.rd-dev__body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
@media(min-width:480px){.rd-dev__body{padding:var(--s6)}}
.rd-dev__nota{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.rd-dev__nota strong{font-size:var(--t-xl);font-weight:800;font-style:italic;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.rd-dev__nota span{font-size:var(--t-cap);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rd-dev__ressalva{font-size:var(--t-cap);color:var(--ink-3);background:var(--honey-50);border:1px solid var(--honey-300);
  border-radius:var(--r);padding:var(--s2) var(--s3)}
.rd-dev__c{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s3);align-items:start;
  padding-block:var(--s2);border-top:1px solid var(--line)}
.rd-dev__c:first-of-type{border-top:0}
.rd-dev__c i{font-style:normal;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--zap-subtle);color:var(--zap-ink);font-weight:800;font-size:var(--t-cap);grid-row:span 2}
.rd-dev__c b{font-size:var(--t-body-sm);font-weight:800;line-height:1.35}
.rd-dev__c span{font-size:var(--t-cap);color:var(--ink-3);line-height:1.5}
.rd-dev__c q{font-style:normal;background:var(--zap-subtle);border-radius:var(--r-sm);padding:0 var(--s1);color:var(--ink-2)}
.rd-dev__chip{display:inline-block;font-size:var(--t-cap);font-weight:800;padding:0 var(--s2);border-radius:var(--r-full);
  margin-left:var(--s1);white-space:nowrap}
.rd-dev__chip--ok{background:var(--zap-subtle);color:var(--zap-ink);border:1px solid var(--zap-line)}
.rd-dev__chip--ver{background:var(--honey-50);color:var(--honey-900);border:1px solid var(--honey-300)}
.rd-dev__pe{font-size:var(--t-cap);color:var(--muted);text-align:center;margin-top:var(--s3)}

/* ---------- Passo 7 · curiosidade ---------- */
.rd-cur{text-align:center}
.rd-cur p.lede{margin:var(--s8) auto 0;text-align:center}
.rd-cur .btn{margin-top:var(--s8)}

/* ---------- Passo 8 · o que acontece depois ---------- */
.rd-depois{list-style:none;margin:var(--s8) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s4);counter-reset:passo}
.rd-depois li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);font-size:var(--t-body-sm);color:var(--on-dark-2)}
.rd-depois li::before{counter-increment:passo;content:counter(passo);width:28px;height:28px;display:grid;place-items:center;
  border-radius:var(--r-sm);background:var(--zap);color:var(--fixed-black);font-weight:800;font-size:var(--t-cap)}
.rd-depois b{color:var(--on-dark);display:block}
.rd-estudante{margin-top:var(--s8);font-size:var(--t-body-sm);color:var(--on-dark-2)}
.rd-estudante a{color:var(--honey);font-weight:800}

/* links dentro do texto sempre sublinhados (DS: cor sozinha não basta) */
.rd-link{color:var(--zap-ink);font-weight:800;text-decoration:underline;text-underline-offset:2px}

/* o telefone não pode estourar a largura em 320 px */
@media(max-width:380px){.phone{--bezel:8px}}

/* A opção mais longa do <select> dava ao formulário 405 px de largura mínima, e a faixa escura
   (overflow:hidden) cortava o conteúdo em 320–375 px sem mostrar rolagem. A coluna pode encolher. */
html[data-pagina="redacao"] .cta__grid>*{min-width:0}
html[data-pagina="redacao"] .field select,html[data-pagina="redacao"] .field input{width:100%;max-width:100%}

/* com movimento reduzido o site.js mostra todas as mensagens de uma vez: o "digitando" sai */
@media(prefers-reduced-motion:reduce){ html[data-pagina="redacao"] #feed .msg:has(.typing){display:none} }
/* a foto da folha fica ao lado do texto, para a conversa caber inteira na tela do telefone */
.rd-msg-foto{display:grid;grid-template-columns:auto auto;column-gap:var(--s2);align-items:center}
.rd-msg-foto .rd-folha{grid-row:span 2;margin:0}

/* ============================================================
   IMAGENS DAS SEÇÕES (R1–R8 do roteiro do estúdio)
   Cada <figure class="rd-img"> reserva o espaço da proporção certa (sem pular layout).
   Enquanto o arquivo não existe, o <img> falha, o onerror remove o <picture> e fica o
   marcador neutro "R? · imagem em produção". Quando o arquivo chega, a foto cobre tudo.
   ============================================================ */
.rd-img{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);
  box-shadow:var(--e2)}
.rd-img--16x9{aspect-ratio:16/9}
.rd-img--4x5{aspect-ratio:4/5}
/* no celular a 4:5 vira 4:3; o recorte sobe para 25% porque os rostos ficam no terço de cima */
@media(max-width:767px){.rd-img--4x5{aspect-ratio:4/3}.rd-img--4x5 img{object-position:50% 25%}}
.rd-img picture,.rd-img img{position:absolute;inset:0;width:100%;height:100%}
.rd-img img{object-fit:cover;display:block}
.rd-img:not(:has(picture)){border:1px dashed var(--line-2);box-shadow:none}
.rd-img:not(:has(picture))::before{content:attr(data-id) " · imagem em produção";position:absolute;inset:0;
  display:grid;place-items:center;padding:var(--s4);text-align:center;font-size:var(--t-cap);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sec--dark .rd-img{background:var(--dark-2)}
.sec--dark .rd-img:not(:has(picture)){border-color:var(--dark-line)}
.sec--dark .rd-img:not(:has(picture))::before{color:var(--on-dark-2)}
.rd-img--larga{margin-bottom:var(--s12)}
.rd-img--centro{max-width:60rem;margin:var(--s12) auto 0}

/* par imagem + texto, alternando o lado de seção em seção */
.rd-par{display:grid;gap:var(--s8);align-items:center}
@media(min-width:900px){
  .rd-par--img-esq{grid-template-columns:5fr 7fr;gap:var(--s12)}
  .rd-par--img-dir{grid-template-columns:7fr 5fr;gap:var(--s12)}
  .rd-par--topo{align-items:start}
  .rd-img--fixa{position:sticky;top:calc(var(--topbar-h,44px) + 72px + var(--s8))}
}
.rd-par .rd-prova{margin-bottom:0;grid-template-columns:1fr}
.rd-par + .flow,.rd-par ~ .flow{margin-top:var(--s12)}
.rd-hero .rd-img{box-shadow:var(--e3)}

/* o telefone desceu para o "como funciona" */
.rd-fone{margin-top:var(--s8)}

/* passo 8 · principal — lista do que acontece depois, em fundo claro */
.rd-depois--claro li{color:var(--ink-3)}
.rd-depois--claro b{color:var(--ink)}