/* RETRO POP · família legal — nível 3 de 4 (PLANO-APLICACAO.md 1.4, etapa 5)
   7 páginas de pages/legal/*.html (about, contact, dmca, editorial-policy, faq, privacy-policy,
   terms-of-service). Cada uma traz o seu <style> inline com 0% de token: a ponte NÃO alcança nada aqui.
   Esqueleto comum: body > div.container > [a.back-link (faq)] header (.logo .h1 .tagline|.last-updated)
   main (section h2 h3 p ul/ol li a + caixas) footer (p a). FAQ sem <main>: .faq-category > details.faq-item.
   Caixas por página: .feature-box .stats-grid>.stat-box(.stat-number .stat-label) .console-icons (about);
   .response-time(span) .contact-grid>.contact-card(.contact-icon h3 p .contact-link) .faq-section>.faq-item (contact);
   .info-box .highlight-box .warning-box .email-link (dmca, privacy, terms); .note (editorial-policy).

   1. VARREDURA DE INVERSÃO — os 71 textos claros escritos à mão (body #e0e0e0, h1/h3 #fff, p/li .8, footer .4,
      .tagline .6, .back-link/.contact-link/.email-link white, .response-time span #00ff64, summary #fff,
      .faq-answer .8…) viram regra explícita, uma por seletor real. Também os acentos que o papel reprova:
      h2/a/.faq-item h3 #FF2D55 (3,3:1), .faq-answer strong #FFD700 (1,3:1), editorial h3 #ffd166.
      Tudo escopado em .container: os seletores da página são de elemento puro (p, li, h3, footer) e não
      podem vazar para os widgets de site inteiro (retro/_shared.css), que vivem fora dele.
   2. COMPOSIÇÃO — "página de expediente" de revista: tarja amarela estática no cabeçalho (não há nav nestas
      páginas, plano 3.1 — nada é inventado), folha de papel couché com fita, intertítulos em faixa,
      caixas como recortes com tarja de cor (vermelho alerta, amarelo aviso, ciano informação), FAQ em fichas,
      números como etiqueta de preço, colofão escuro. Zero loop. */

/* ═══════════ 0 · TOKENS DA FAMÍLIA ═══════════ */
html.retro-pop{
  --lg-ink:#17131f; --lg-ink2:#3b3348; --lg-ink3:#5d5470; --lg-cream:#f5ebd7; --lg-cream2:#dccfb2; --lg-white:#fffaf0;
  --lg-dots:radial-gradient(circle,rgba(23,19,31,.28) 1.3px,transparent 1.5px);
  --lg-dots-cream:radial-gradient(circle,rgba(245,235,215,.2) 1.6px,transparent 1.8px);
  --lg-rule:3px dashed rgba(23,19,31,.28);
}


/* ═══════════ 1 · VARREDURA DE INVERSÃO (inline <style> das 7 páginas) ═══════════ */
html.retro-pop body > .container{color:var(--lg-ink)}
/* cabeçalho: logo em gradiente recortado (texto transparente), h1 #fff, linha fina .6/.5 */
html.retro-pop body > .container > header{color:var(--lg-ink)}
html.retro-pop body > .container > header .logo{color:var(--lg-ink);background:var(--lg-white);-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
html.retro-pop body > .container > header h1{color:var(--lg-ink)}
html.retro-pop body > .container > header .tagline,
html.retro-pop body > .container > header .last-updated{color:var(--lg-ink)}
/* corpo */
html.retro-pop body > .container h2{color:var(--lg-white)}
html.retro-pop body > .container h3{color:var(--lg-ink)}
html.retro-pop body > .container p,
html.retro-pop body > .container li,
html.retro-pop body > .container ul,
html.retro-pop body > .container ol{color:var(--lg-ink2)}
html.retro-pop body > .container strong{color:var(--lg-ink)}
html.retro-pop body > .container a{color:var(--lg-ink)}
html.retro-pop body > .container .back-link,
html.retro-pop body > .container .contact-link,
html.retro-pop body > .container .email-link{color:var(--lg-ink);background:var(--rp-red)}
/* about */
html.retro-pop body > .container .feature-box{color:var(--lg-ink);background:var(--lg-white)}
html.retro-pop body > .container .stat-box{color:var(--lg-ink);background:var(--lg-white)}
html.retro-pop body > .container .stat-number{color:var(--lg-ink);background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
html.retro-pop body > .container .stat-label{color:var(--lg-ink2)}
/* contact */
html.retro-pop body > .container .contact-card{color:var(--lg-ink);background:var(--lg-white)}
html.retro-pop body > .container .contact-card h3{color:var(--lg-ink)}
html.retro-pop body > .container .faq-item{color:var(--lg-ink);background:var(--lg-white)}
html.retro-pop body > .container .faq-item h3{color:var(--lg-ink)}
html.retro-pop body > .container .response-time{color:var(--lg-ink);background:var(--lg-white)}
html.retro-pop body > .container .response-time span{color:var(--lg-ink);background:var(--rp-yellow)}
/* dmca / privacy / terms / editorial */
html.retro-pop body > .container .highlight-box,
html.retro-pop body > .container .warning-box,
html.retro-pop body > .container .info-box,
html.retro-pop body > .container .note{color:var(--lg-ink);background:var(--lg-white)}
html.retro-pop body > .container > main{color:var(--lg-ink);background:var(--lg-white)}
/* faq */
html.retro-pop body > .container .faq-item summary{color:var(--lg-ink)}
html.retro-pop body > .container .faq-item summary:hover{background:var(--rp-paper-2)}
html.retro-pop body > .container .faq-item summary::after{color:var(--rp-red-deep)}
html.retro-pop body > .container .faq-answer{color:var(--lg-ink2)}
html.retro-pop body > .container .faq-answer strong{color:var(--lg-ink);background:var(--rp-yellow)}
/* rodapé: colofão escuro — creme sobre tinta */
html.retro-pop body > .container > footer{color:var(--lg-cream2);background-color:var(--lg-ink)}
html.retro-pop body > .container > footer p{color:var(--lg-cream2)}
html.retro-pop body > .container > footer a{color:var(--lg-cream)}
html.retro-pop body > .container > footer a:hover{color:var(--rp-yellow)}


/* ═══════════ 2 · COMPOSIÇÃO ═══════════ */

/* 2.1 tarja de expediente: faixa amarela com retícula, corte diagonal embaixo, estática (sem sticky, sem nav) */
html.retro-pop body > .container{padding-top:32px}
html.retro-pop body > .container > header{
  position:relative;margin-bottom:46px;padding:26px clamp(18px,4vw,40px) 40px;border:3px solid var(--lg-ink);border-bottom:0;
  background-color:var(--rp-yellow);
  background-image:linear-gradient(178.6deg,transparent 0 calc(100% - 16px),var(--lg-ink) calc(100% - 16px)),var(--lg-dots);
  background-size:auto,8px 8px;box-shadow:var(--rp-sh-2)}
html.retro-pop body > .container > header .logo{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px 7px;border:3px solid var(--lg-ink);
  box-shadow:var(--rp-sh-2);transform:rotate(-1.6deg);text-decoration:none;
  font:400 clamp(16px,1.6vw,21px)/1 var(--rp-ff-display);letter-spacing:-.01em;text-transform:uppercase}
html.retro-pop body > .container > header h1{
  margin:4px 0 14px;font:400 clamp(34px,5.4vw,64px)/.95 var(--rp-ff-display);letter-spacing:var(--rp-tr-display);
  text-transform:uppercase;text-shadow:4px 4px 0 var(--rp-red);overflow-wrap:anywhere}
html.retro-pop body > .container > header .tagline{max-width:52ch;margin:0 auto;font:600 clamp(16px,1.3vw,19px)/1.45 var(--rp-ff-body)}
html.retro-pop body > .container > header .last-updated{
  display:inline-block;padding:4px 10px;border:2px solid var(--lg-ink);background:var(--lg-white);box-shadow:var(--rp-sh-1);
  font:700 var(--rp-fs-micro)/1.3 var(--rp-ff-mono);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-1deg)}

/* 2.2 folha de papel couché colada na mesa, com fita; medida de leitura de revista */
html.retro-pop body > .container > main{
  position:relative;padding:clamp(24px,4.4vw,52px);border:3px solid var(--lg-ink);border-radius:0;box-shadow:var(--rp-sh-3)}
html.retro-pop body > .container > main::before{
  content:"";position:absolute;right:30px;top:-16px;width:118px;height:36px;z-index:3;pointer-events:none;
  transform:rotate(7deg);background:var(--rp-art-tape) center/100% 100% no-repeat}
html.retro-pop body > .container > main :is(p,ul,ol){max-width:70ch}
html.retro-pop body > .container p,
html.retro-pop body > .container li{font-family:var(--rp-ff-body);font-size:clamp(16px,1.1vw,17px);line-height:1.75}
html.retro-pop body > .container li::marker{color:var(--rp-red-deep);font-weight:800}
/* intertítulo: faixa vermelha sem giro (prosa) */
/* intertítulo em bloco de tinta (rp-blockh2), não em faixa vermelha: os títulos daqui abrem com emoji, e o
   emoji colorido só se lê sobre tinta (sobre o vermelho ou o papel ele cai abaixo de 3:1) */
html.retro-pop body > .container h2{
  display:inline-block;margin:38px 0 16px;padding:7px 16px;border:0;border-bottom:0;background:var(--lg-ink);color:var(--lg-white);
  box-shadow:4px 5px 0 var(--rp-red);
  font:400 clamp(19px,1.9vw,25px)/1.2 var(--rp-ff-display);letter-spacing:var(--rp-tr-display);text-transform:uppercase;transform:skewX(var(--rp-skew))}
html.retro-pop body > .container > main h2:first-child,
html.retro-pop body > .container > main > section:first-child > h2:first-child{margin-top:0}
html.retro-pop body > .container h3{
  display:table;margin:26px 0 10px;font:400 clamp(16px,1.3vw,19px)/1.2 var(--rp-ff-display);text-transform:uppercase;
  background:linear-gradient(transparent 62%,var(--rp-yellow) 62% 92%,transparent 92%)}
/* links de texto: tinta, sublinhado ciano grosso */
html.retro-pop body > .container > :not(footer) a:not(.logo):not(.back-link):not(.contact-link):not(.email-link){
  font-weight:700;text-decoration:underline;text-decoration-color:var(--rp-cyan);text-decoration-thickness:3px;text-underline-offset:3px}
html.retro-pop body > .container > :not(footer) a:not(.logo):not(.back-link):not(.contact-link):not(.email-link):hover{background:var(--rp-yellow);text-decoration-color:var(--lg-ink)}
/* botões: vermelho de banca, borda de 3px, sombra de papel */
html.retro-pop body > .container .back-link,
html.retro-pop body > .container .contact-link,
html.retro-pop body > .container .email-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:3px solid var(--lg-ink);border-radius:var(--rp-r-1);
  box-shadow:var(--rp-sh-2);font:800 var(--rp-fs-small)/1.15 var(--rp-ff-body);letter-spacing:var(--rp-tr-sticker);text-transform:uppercase;text-decoration:none;
  transition:var(--rp-pop)}
html.retro-pop body > .container .back-link:hover,
html.retro-pop body > .container .contact-link:hover,
html.retro-pop body > .container .email-link:hover{transform:translate(-2px,-3px);box-shadow:var(--rp-sh-3);text-decoration:none}
html.retro-pop body > .container > .back-link{margin:0 0 26px}

/* 2.3 caixas: recortes com tarja lateral de cor (vermelho = alerta, amarelo = aviso, ciano = informação) */
html.retro-pop body > .container .feature-box,
html.retro-pop body > .container .highlight-box,
html.retro-pop body > .container .warning-box,
html.retro-pop body > .container .info-box,
html.retro-pop body > .container .note,
html.retro-pop body > .container .response-time{
  position:relative;margin:26px 0;padding:20px 22px 18px;border:3px solid var(--lg-ink);border-left-width:12px;border-radius:0;box-shadow:var(--rp-sh-2)}
html.retro-pop body > .container .highlight-box{border-left-color:var(--rp-red)}
html.retro-pop body > .container .warning-box,
html.retro-pop body > .container .note,
html.retro-pop body > .container .feature-box{border-left-color:var(--rp-yellow)}
html.retro-pop body > .container .info-box,
html.retro-pop body > .container .response-time{border-left-color:var(--rp-cyan)}
html.retro-pop body > .container .feature-box{transform:rotate(-.5deg)}
html.retro-pop body > .container .feature-box::before{
  content:"";position:absolute;left:-18px;top:-15px;width:104px;height:32px;z-index:3;pointer-events:none;
  transform:rotate(-14deg);background:var(--rp-art-tape) center/100% 100% no-repeat}
html.retro-pop body > .container :is(.feature-box,.highlight-box,.warning-box,.info-box,.note) > :last-child{margin-bottom:0}
html.retro-pop body > .container .response-time{text-align:left;font:600 16px/1.6 var(--rp-ff-body)}
html.retro-pop body > .container .response-time span{padding:0 6px;font-weight:800}

/* 2.4 about: números como etiqueta de preço */
html.retro-pop body > .container .stats-grid{gap:20px 18px}
html.retro-pop body > .container .stat-box{
  position:relative;padding:14px 16px 14px 28px;border:3px solid var(--lg-ink);border-radius:0;box-shadow:var(--rp-sh-2);text-align:left;
  background-image:linear-gradient(90deg,var(--lg-ink) 0 10px,transparent 10px);background-repeat:no-repeat;transform:rotate(var(--rp-tilt))}
html.retro-pop body > .container .stat-box:nth-child(4n+1){--rp-tilt:-1.6deg}
html.retro-pop body > .container .stat-box:nth-child(4n+2){--rp-tilt:1.2deg}
html.retro-pop body > .container .stat-box:nth-child(4n+3){--rp-tilt:-.6deg}
html.retro-pop body > .container .stat-box:nth-child(4n){--rp-tilt:1.6deg}
html.retro-pop body > .container .stat-number{font:700 clamp(28px,3vw,40px)/1 var(--rp-ff-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html.retro-pop body > .container .stat-label{margin-top:6px;font:700 var(--rp-fs-micro)/1.3 var(--rp-ff-mono);letter-spacing:.1em;text-transform:uppercase}

/* 2.5 contact: cartões de contato colados, perguntas como fichas */
html.retro-pop body > .container .contact-grid{gap:26px 22px}
html.retro-pop body > .container .contact-card{
  padding:26px 22px;border:3px solid var(--lg-ink);border-radius:0;box-shadow:var(--rp-sh-2);transform:rotate(var(--rp-tilt));transition:var(--rp-pop)}
html.retro-pop body > .container .contact-card:nth-child(odd){--rp-tilt:-.6deg}
html.retro-pop body > .container .contact-card:nth-child(even){--rp-tilt:.5deg}
html.retro-pop body > .container .contact-card:hover{transform:rotate(var(--rp-tilt)) translate(-3px,-4px);box-shadow:var(--rp-sh-3)}
html.retro-pop body > .container .contact-card h3{display:block;background:none;font:400 18px/1.15 var(--rp-ff-display);text-transform:uppercase}
html.retro-pop body > .container .contact-card p{font-size:15px}
/* ícones emoji: adesivo redondo de tinta — o emoji colorido some no papel claro (2,2:1) e se lê sobre tinta */
html.retro-pop body > .container .contact-icon{display:inline-grid;place-items:center;width:76px;height:76px;margin:0 auto 14px;border-radius:50%;background:var(--lg-ink);box-shadow:4px 5px 0 var(--rp-yellow);font-size:2.4rem;line-height:1}
html.retro-pop body > .container .console-icons > *{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--lg-ink);box-shadow:3px 4px 0 var(--rp-yellow);font-size:1.7rem;line-height:1}
html.retro-pop body > .container .faq-section{margin:46px 0 30px}
html.retro-pop body > .container .faq-section .faq-item{padding:18px 20px;border:3px solid var(--lg-ink);border-radius:0;box-shadow:var(--rp-sh-1)}
html.retro-pop body > .container .faq-section .faq-item h3{margin:0 0 8px;display:block;background:none;font:400 16px/1.2 var(--rp-ff-display)}

/* 2.6 faq: categorias com intertítulo em faixa, perguntas como fichas destacáveis */
html.retro-pop body > .container .faq-category{margin-bottom:44px}
html.retro-pop body > .container details.faq-item{margin-bottom:14px;border:3px solid var(--lg-ink);border-radius:0;box-shadow:var(--rp-sh-2);overflow:visible}
html.retro-pop body > .container details.faq-item[open]{box-shadow:var(--rp-sh-3)}
html.retro-pop body > .container .faq-item summary{min-height:44px;font:800 16px/1.4 var(--rp-ff-body)}
html.retro-pop body > .container .faq-item summary::after{font:800 24px/1 var(--rp-ff-body)}
html.retro-pop body > .container details.faq-item[open] summary{border-bottom:var(--lg-rule)}
html.retro-pop body > .container .faq-answer{padding-top:14px;font:400 16px/1.7 var(--rp-ff-body)}
html.retro-pop body > .container .faq-answer strong{padding:0 3px}

/* 2.7 colofão: tinta com retícula creme, borda rasgada em cima, faixa de bala embaixo */
html.retro-pop body > .container > footer{
  position:relative;margin-top:70px;padding:34px 22px calc(30px + 10px);border-top:0;
  background-image:var(--rp-pat-candy),var(--lg-dots-cream);background-size:100% 10px,10px 10px;
  background-position:left bottom,0 0;background-repeat:no-repeat,repeat;font:500 14px/1.6 var(--rp-ff-body)}
html.retro-pop body > .container > footer::before{
  content:"";position:absolute;left:0;right:0;top:-19px;height:20px;pointer-events:none;
  background:var(--rp-edge-torn) repeat-x 0 0/240px 20px;transform:scaleY(-1)}
html.retro-pop body > .container > footer p{font-size:14px;line-height:1.6}
html.retro-pop body > .container > footer a{
  display:inline-flex;align-items:center;min-height:32px;margin:0 6px;border-bottom:2px solid transparent;font-weight:700;text-decoration:none}
html.retro-pop body > .container > footer a:hover{border-bottom-color:var(--rp-yellow);background:none}


/* ═══════════ 3 · LARGURAS ═══════════ */
@media (max-width:767px){
  html.retro-pop body > .container > header{padding:20px 16px 32px;background-image:var(--lg-dots);background-size:8px 8px;border-bottom:5px solid var(--lg-ink)}
  html.retro-pop body > .container > main::before{right:14px;width:90px;height:28px}
  html.retro-pop body > .container .stat-box,
  html.retro-pop body > .container .contact-card,
  html.retro-pop body > .container .feature-box{transform:none}
  html.retro-pop body > .container .contact-card:hover{transform:translate(-2px,-3px)}
  html.retro-pop body > .container h2{margin-left:-4px;padding:7px 14px 7px 26px}
}
@media (prefers-reduced-motion:reduce){
  html.retro-pop body > .container .back-link,html.retro-pop body > .container .contact-link,html.retro-pop body > .container .email-link,
  html.retro-pop body > .container .contact-card{transition-duration:1ms}
}