/* LP 4 "Brazil": banca de jornal + lambe-lambe + azulejo.
   Regra de neutralidade: uma cor brasileira por seção, nunca juntas num mesmo bloco. */
:root{
  --papel:#F3E8D2; --papel2:#FBF4E3; --carvao:#171B1A;
  --verde:#234A3A; --azul:#31566F; --amarelo:#D4A83F;
  --head:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Noto Sans",system-ui,sans-serif;
  --ruido:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09  0 0 0 0 .1  0 0 0 0 .1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 1.0625rem/1.55 var(--body);color:var(--carvao);background:var(--papel) var(--ruido);-webkit-font-smoothing:antialiased;padding-bottom:84px}
a{color:inherit}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--carvao);color:var(--papel);padding:8px 12px;z-index:99}
:focus-visible{outline:3px solid var(--carvao);outline-offset:3px}
h1,h2,h3{font-family:var(--head);font-weight:900;line-height:.95;letter-spacing:-.005em}
h2{font-size:clamp(2.3rem,6.4vw,4.2rem);max-width:18ch}
h3{font-size:1.7rem;font-weight:800}
.sub{font-size:1.15rem;margin-top:14px;max-width:46ch}
.peq{font-size:.9rem;opacity:.85}

/* masthead: cabeçalho de jornal */
.masthead{border-bottom:4px double var(--carvao);background:var(--papel2)}
.masthead .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0}
.nome{font:800 1.5rem/1 var(--head);text-decoration:none;letter-spacing:.01em}
.ed{font:600 .95rem/1 var(--head);letter-spacing:.06em;text-transform:uppercase}

/* faixa de lambe-lambe */
.faixa{display:inline-block;transform:rotate(-2deg);background:var(--amarelo);color:var(--carvao);padding:7px 20px 8px;font:800 1.25rem/1 var(--head);letter-spacing:.07em;text-transform:uppercase;
  clip-path:polygon(0 8%,3% 0,97% 6%,100% 0,99% 92%,100% 100%,3% 94%,0 100%);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.faixa-clara{background:var(--amarelo)}

/* botões */
.btn{display:block;text-align:center;text-decoration:none;font:800 1.45rem/1.05 var(--head);letter-spacing:.03em;text-transform:uppercase;background:var(--carvao);color:var(--papel);padding:18px 24px;border:3px solid var(--carvao);box-shadow:6px 6px 0 var(--amarelo);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--amarelo)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--amarelo)}

/* ===== BLOCO 1: hero (amarelo queimado) ===== */
.hero{padding:42px 0 64px}
.hero-grid{display:grid;gap:40px}
.hero h1{font-size:clamp(3.3rem,13vw,5.9rem);line-height:.86;margin-top:22px;text-wrap:balance}
.corte{display:inline-block;white-space:nowrap;margin-top:.1em;padding:.03em .16em .08em;background:var(--amarelo);transform:rotate(-1.2deg);
  clip-path:polygon(0 6%,2% 0,98% 4%,100% 0,100% 94%,98% 100%,2% 95%,0 100%)}
.lead{font-size:1.25rem;margin-top:26px;max-width:36ch}
.lead2{margin-top:14px;max-width:44ch}
.compra{margin-top:28px;max-width:440px}
.preco-nota{font-size:.92rem;margin-top:16px;font-weight:500}
.fatos{margin-top:18px;font:700 1.05rem/1.3 var(--head);letter-spacing:.05em;text-transform:uppercase;border-top:2px solid var(--carvao);padding-top:12px;max-width:440px}

/* Janela de Recorte: a demo é o retângulo "tirado" da página */
.janela{position:relative;align-self:start}
.abas{display:flex;gap:6px;margin-left:14px}
.abas button{font:800 1.15rem/1 var(--head);letter-spacing:.08em;text-transform:uppercase;padding:11px 20px 9px;border:3px solid var(--carvao);border-bottom:0;background:var(--papel);color:var(--carvao);cursor:pointer}
.abas button[aria-selected=true]{background:var(--carvao);color:var(--papel)}
.vidro{border:4px solid var(--carvao);background:var(--papel2);box-shadow:12px 12px 0 var(--carvao);min-height:340px;padding:26px;position:relative;
  background-image:radial-gradient(rgba(23,27,26,.16) 1.1px,transparent 1.2px);background-size:7px 7px}
.janela[data-view=contexto] .vidro{background-color:var(--azul);background-image:
  radial-gradient(circle at 50% 50%,transparent 0 17%,rgba(243,232,210,.20) 18% 22%,transparent 23%),
  linear-gradient(45deg,transparent 46%,rgba(243,232,210,.14) 47% 53%,transparent 54%),
  linear-gradient(-45deg,transparent 46%,rgba(243,232,210,.14) 47% 53%,transparent 54%);background-size:64px 64px}
.painel{animation:revela .38s ease-out}
@keyframes revela{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){.painel{animation:none}.btn{transition:none}html{scroll-behavior:auto}}
.mini{font:700 .95rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase}
.cit{font:700 1.5rem/1.25 var(--body);margin-top:14px}
.dica{margin-top:20px;font-size:.95rem;border-top:2px dashed var(--carvao);padding-top:12px}
.ctx{background:var(--papel2);border:3px solid var(--carvao);padding:20px;box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.veredito{margin-bottom:12px}
.sel{display:inline-block;font:800 1.2rem/1 var(--head);letter-spacing:.07em;text-transform:uppercase;border:3px solid var(--carvao);padding:6px 12px 5px;background:var(--papel)}
.cit2{font-size:1.02rem;line-height:1.5}
.fonte{margin-top:14px;font-size:.88rem}
.fonte a{font-weight:700}
.rodape-janela{margin:22px 0 0 4px;font:600 .9rem/1 var(--head);letter-spacing:.08em;text-transform:uppercase}

/* ===== BLOCO 2: mecanismo (verde mata) ===== */
.mec,.prova,.oferta{position:relative;padding:84px 0 76px}
.mec::before,.prova::before,.oferta::before,.faq::before{content:"";position:absolute;inset:-1px 0 auto 0;height:14px;
  background:linear-gradient(135deg,var(--prev) 25%,transparent 25%) 0 0/22px 14px,linear-gradient(225deg,var(--prev) 25%,transparent 25%) 0 0/22px 14px}
.mec{background:var(--verde);color:var(--papel);--prev:var(--papel)}
.mec h2{max-width:16ch}
.quatro{list-style:none;padding:0;margin-top:40px;display:grid;gap:18px}
.quatro li{background:var(--papel);color:var(--carvao);padding:22px 22px 24px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.quatro p{margin-top:8px}
.nome-mec{font:800 clamp(1.8rem,4.6vw,2.8rem)/1 var(--head);margin-top:44px}
.assin{font:700 1.3rem/1.2 var(--head);letter-spacing:.04em;text-transform:uppercase;margin-top:12px;border-top:3px solid var(--papel);padding-top:14px;display:inline-block}

/* ===== BLOCO 3: prova + Filtro 3C (azul azulejo) ===== */
.prova{background:var(--azul);color:var(--papel);--prev:var(--verde);
  background-image:linear-gradient(45deg,transparent 46%,rgba(243,232,210,.07) 47% 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,rgba(243,232,210,.07) 47% 53%,transparent 54%);background-size:56px 56px}
.tres{list-style:none;padding:0;margin-top:34px;display:grid;gap:14px;counter-reset:c}
.tres li{counter-increment:c;display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:start;border-top:3px solid var(--papel);padding-top:14px}
.tres li::before{content:counter(c);font:900 3.2rem/.9 var(--head)}
.tres h3{grid-column:2}.tres p{grid-column:2;margin-top:4px}
.card{background:var(--papel2);color:var(--carvao);margin-top:48px;border:4px solid var(--carvao);box-shadow:12px 12px 0 var(--carvao);padding:26px 22px}
.card header .cat{font:700 .95rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase}
.card header h3{font-size:clamp(1.8rem,5vw,2.5rem);margin:8px 0 14px;line-height:1}
.card dl{display:grid;gap:4px}
.card dt{font:800 1.05rem/1 var(--head);letter-spacing:.09em;text-transform:uppercase;margin-top:16px;border-bottom:2px solid var(--carvao);padding-bottom:4px}
.card dd{margin:6px 0 0;font-size:1rem}
.card .fala{font-weight:700;border-left:5px solid var(--carvao);padding-left:12px}
.evid{list-style:none;padding:0;display:grid;gap:8px}
.evid b{display:inline-block;font:800 .9rem/1 var(--head);letter-spacing:.06em;text-transform:uppercase;background:var(--carvao);color:var(--papel);padding:3px 7px 2px;margin-right:8px}
.evid a{font-weight:500}
.card footer{margin-top:20px;font-size:.85rem;opacity:.8}
.prova-txt{margin-top:40px;font-size:1.15rem;max-width:56ch}
.prova .btn{margin-top:28px;max-width:440px;background:var(--papel);color:var(--carvao);border-color:var(--carvao);box-shadow:6px 6px 0 var(--carvao)}
.prova .btn:hover{box-shadow:3px 3px 0 var(--carvao)}

/* ===== BLOCO 4: oferta (carvão e papel) ===== */
.oferta{background:var(--carvao);color:var(--papel);--prev:var(--azul);background-image:var(--ruido)}
.oferta-grid{display:grid;gap:44px}
.oferta h2{max-width:20ch}
.lista{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.lista li{padding-left:34px;position:relative}
.lista li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:14px;border-left:4px solid var(--papel);border-bottom:4px solid var(--papel);transform:rotate(-45deg) scale(.7);transform-origin:left bottom}
.como{margin-top:34px;font-size:1.5rem}
.passos{margin:12px 0 0;padding-left:1.3em;display:grid;gap:4px}
.caixa{background:var(--papel);color:var(--carvao);padding:30px 26px 28px;align-self:start;box-shadow:12px 12px 0 rgba(243,232,210,.25);border:4px solid var(--papel)}
.valor{font:900 clamp(4rem,12vw,6rem)/.9 var(--head);margin:22px 0 6px}
.caixa .btn{margin:22px 0 18px;box-shadow:6px 6px 0 var(--amarelo)}
.caixa .peq{border-top:2px dashed var(--carvao);padding-top:14px}

/* ===== BLOCO 5: garantia + FAQ ===== */
.faq{position:relative;padding:84px 0 70px;--prev:var(--carvao)}
.faq-grid{display:grid;gap:40px}
.garantia .sete{font:900 clamp(8rem,34vw,15rem)/.75 var(--head);color:var(--verde)}
.garantia h2{margin:6px 0 16px;max-width:14ch}
.perguntas details{border-top:3px solid var(--carvao);padding:14px 0}
.perguntas details:last-child{border-bottom:3px solid var(--carvao)}
.perguntas summary{font:800 1.5rem/1.1 var(--head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";font-weight:900}
.perguntas details[open] summary::after{content:"−"}
.perguntas details p{margin-top:10px;max-width:60ch}
.final{margin-top:48px}.final .btn{max-width:520px}

.rodape{background:var(--carvao);color:var(--papel);padding:34px 0 40px;font-size:.92rem}
.rodape .wrap{display:grid;gap:8px}
.rodape a{text-underline-offset:3px}

/* barra fixa no celular */
.sticky{position:fixed;inset:auto 0 0 0;z-index:40;background:var(--carvao);padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:4px solid var(--amarelo);transform:translateY(110%);transition:transform .2s}
.sticky.on{transform:none}
.sticky .btn{background:var(--papel);color:var(--carvao);box-shadow:none;padding:15px 16px;font-size:1.3rem;border-color:var(--papel)}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}

/* páginas legais */
.legal .texto{padding:40px 0 70px;max-width:720px}
.legal h1{font-size:3rem;margin-bottom:20px}
.legal p{margin-top:14px}

@media (min-width:900px){
  body{padding-bottom:0}
  .sticky{display:none}
  .hero{padding:56px 0 90px}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
  .janela{margin-top:84px}
  .quatro{grid-template-columns:repeat(4,1fr)}
  .tres{grid-template-columns:repeat(3,1fr);gap:28px}
  .oferta-grid{grid-template-columns:1.2fr .8fr;gap:64px}
  .faq-grid{grid-template-columns:.8fr 1.2fr;gap:70px}
}
.hero-grid>*,.oferta-grid>*,.faq-grid>*{min-width:0}
h1,h2,h3,p,li,dd{overflow-wrap:break-word}

/* botões que abrem pop-up (parecem link, não saem da página) */
.ev{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;cursor:pointer}
.ev:hover{text-decoration-color:var(--amarelo)}
.ev-claro{color:var(--papel)}
dialog#pop{width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:4px solid var(--carvao);background:var(--papel2);color:var(--carvao);padding:26px 24px 24px;box-shadow:12px 12px 0 var(--carvao)}
dialog#pop::backdrop{background:rgba(23,27,26,.72)}
dialog#pop .fechar{position:sticky;top:0;float:right;font:800 1.05rem/1 var(--head);letter-spacing:.06em;text-transform:uppercase;background:var(--carvao);color:var(--papel);border:0;padding:10px 14px;cursor:pointer}
dialog#pop .pop-k{font:700 .95rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase}
dialog#pop h3{font-size:clamp(1.7rem,5vw,2.3rem);margin:8px 0 14px;line-height:1}
dialog#pop p{margin-top:10px}
dialog#pop .pop-n{font-size:.85rem;opacity:.8;margin-top:16px;border-top:2px dashed var(--carvao);padding-top:12px}