/* Idade Mídia — Comunicação para Cidadania — redesign 2026
   Identidade: xilogravura / cordel amazônida. Tinta, papel e vermelho. */
:root{
  --paper:#f1ead9; --paper-2:#e7dcc2; --ink:#191410; --ink-2:#2a211a;
  --red:#c1272d; --red-2:#9d1b20; --line:#191410;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --disp:"Oswald","Arial Narrow",Impact,sans-serif;
  --hatch:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 9px);
  --hatch-red:repeating-linear-gradient(45deg,var(--red) 0 2px,transparent 2px 9px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red-2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em}
.stars{color:var(--red);letter-spacing:.6em;font-size:.8em}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);border-bottom:4px solid var(--red)}
.sitebar{display:flex;align-items:center;gap:14px;padding:10px 22px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none}
.brand img{width:44px;height:44px;border-radius:50%;background:#000;border:2px solid var(--paper)}
.brand .t1{font-family:var(--disp);font-size:19px;text-transform:uppercase;letter-spacing:.06em;line-height:1.05}
.brand .t2{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:#cbbf9f}
nav.main{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
nav.main a{color:var(--paper);text-decoration:none;font-family:var(--disp);text-transform:uppercase;font-size:13.5px;letter-spacing:.09em;padding:8px 11px;border:1px solid transparent}
nav.main a:hover{border-color:var(--paper);color:#fff}
nav.main a.on{background:var(--red);color:#fff}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--paper);color:var(--paper);font-family:var(--disp);text-transform:uppercase;letter-spacing:.12em;font-size:13px;padding:7px 12px;cursor:pointer}
@media(max-width:900px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);flex-direction:column;padding:10px 0;border-bottom:4px solid var(--red)}
  nav.main.open{display:flex}
  nav.main a{padding:12px 22px;border:0;border-top:1px solid #3a3025}
  .burger{display:block}
}

/* ---------- live strip ---------- */
.livestrip{background:var(--red);color:#fff;overflow:hidden;border-bottom:3px solid var(--ink)}
.livestrip .mq{display:flex;white-space:nowrap;animation:mq 26s linear infinite;font-family:var(--disp);text-transform:uppercase;letter-spacing:.22em;font-size:13px;padding:8px 0}
.livestrip .mq span{padding-right:60px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 30%,rgba(193,39,45,.28),transparent 55%),repeating-radial-gradient(circle at 82% 30%,rgba(241,234,217,.05) 0 2px,transparent 2px 26px)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding:76px 22px 84px}
.kicker{display:inline-block;background:var(--red);color:#fff;font-family:var(--disp);text-transform:uppercase;letter-spacing:.24em;font-size:12.5px;padding:6px 14px;border:2px solid var(--paper)}
.hero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(42px,6.2vw,78px);line-height:.98;margin:22px 0 18px}
.hero h1 em{font-style:normal;color:var(--red);text-shadow:3px 3px 0 rgba(241,234,217,.25)}
.hero p.lede{font-size:19px;max-width:56ch;color:#e6dcc3}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.sealbox{position:relative;text-align:center}
.sealbox img{width:min(360px,78%);border-radius:50%;margin:0 auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;padding:54px 22px 64px}.sealbox img{width:min(260px,64%)}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-size:14px;padding:13px 22px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);color:var(--ink)}
.btn.red{background:var(--red);color:#fff;border-color:var(--ink)}
.btn.red:hover{color:#fff}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:5px 5px 0 rgba(241,234,217,.35)}
.btn.ghost:hover{color:#fff}

/* ---------- sections ---------- */
section.band{padding:72px 0}
section.band.inv{background:var(--ink);color:var(--paper)}
section.band.alt{background:var(--paper-2)}
h2.sec{font-family:var(--disp);text-transform:uppercase;font-size:clamp(28px,3.6vw,44px);line-height:1.05;margin-bottom:8px}
h2.sec::after{content:"";display:block;width:120px;height:10px;margin-top:14px;background:var(--hatch-red)}
.sec-intro{max-width:68ch;margin-bottom:38px}
.inv .sec-intro{color:#d8cdb2}
.grid{display:grid;gap:22px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}

/* cards */
.card{border:2px solid var(--ink);background:var(--paper);padding:26px 24px;box-shadow:6px 6px 0 var(--ink);position:relative}
.card h3{font-family:var(--disp);text-transform:uppercase;font-size:21px;margin-bottom:10px}
.card .num{position:absolute;top:-16px;left:18px;background:var(--red);color:#fff;font-family:var(--disp);padding:3px 12px;font-size:14px;letter-spacing:.12em;border:2px solid var(--ink)}
.card p{font-size:15.5px}
.inv .card{background:var(--ink-2);border-color:var(--paper);box-shadow:6px 6px 0 rgba(241,234,217,.35);color:var(--paper)}
.inv .card p{color:#d8cdb2}
.card.link{transition:transform .12s,box-shadow .12s;display:block;text-decoration:none;color:inherit}
.card.link:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.inv .card.link:hover{box-shadow:9px 9px 0 rgba(241,234,217,.35)}
.card .go{font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--red);margin-top:14px;display:inline-block}
.inv .card .go{color:#ff6b70}

/* radio panel */
.panel{border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--red)}
.panel .bar{background:var(--ink);color:var(--paper);font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:13px;padding:10px 16px;display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.panel iframe{width:100%;border:0;display:block;height:560px}
@media(max-width:640px){.panel iframe{height:520px}}

/* video grid */
.video{position:relative;padding-top:56.25%;border:2px solid var(--ink);background:#000;box-shadow:6px 6px 0 var(--ink)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* posts */
.post{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.post .ph{padding:20px 22px;border-bottom:2px solid var(--ink);background:var(--paper-2)}
.post .ph .cat{font-family:var(--disp);text-transform:uppercase;font-size:12px;letter-spacing:.18em;color:var(--red)}
.post .ph h3{font-family:var(--disp);text-transform:uppercase;font-size:20px;margin-top:6px}
.post .pb{padding:18px 22px;font-size:15.5px}
.post time{font-family:var(--disp);text-transform:uppercase;font-size:12.5px;letter-spacing:.14em;color:#6b5f4c}

/* lists & text pages */
.page-head{background:var(--ink);color:var(--paper);padding:64px 0 54px;position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;inset:auto 0 0 0;height:12px;background:var(--hatch-red)}
.page-head h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(34px,5vw,58px);line-height:1}
.page-head p{margin-top:12px;max-width:70ch;color:#e6dcc3}
.prose{max-width:78ch}
.prose p{margin-bottom:18px}
.prose ul{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.prose h2{font-family:var(--disp);text-transform:uppercase;font-size:26px;margin:34px 0 12px}
.prose h2::after{content:"";display:block;width:90px;height:8px;margin-top:10px;background:var(--hatch-red)}
.fig{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--red);margin:26px 0}
.fig figcaption{background:var(--ink);color:var(--paper);font-family:var(--disp);text-transform:uppercase;font-size:12px;letter-spacing:.16em;padding:8px 14px}

/* apoio / pix */
.pix{border:2px solid var(--ink);background:var(--paper);padding:22px;box-shadow:6px 6px 0 var(--ink)}
.pix h4{font-family:var(--disp);text-transform:uppercase;font-size:17px;margin-bottom:8px;color:var(--red-2)}
.pix code{display:block;background:var(--ink);color:var(--paper);padding:10px 14px;font-size:15px;margin-top:8px;word-break:break-all}

/* contact form */
form.contact{display:grid;gap:16px;max-width:560px}
form.contact label{font-family:var(--disp);text-transform:uppercase;font-size:13px;letter-spacing:.14em;display:block;margin-bottom:6px}
form.contact input,form.contact textarea{width:100%;border:2px solid var(--ink);background:#fbf7ec;padding:12px 14px;font-family:var(--serif);font-size:16px;color:var(--ink)}
form.contact input:focus,form.contact textarea:focus{outline:3px solid var(--red)}
.contactinfo{border-left:10px solid var(--red);padding:6px 0 6px 22px}
.contactinfo p{margin-bottom:10px}
.contactinfo strong{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;display:block;color:#6b5f4c}

/* footer */
footer.site{background:var(--ink);color:#cfc4a8;border-top:6px solid var(--red);margin-top:0}
footer.site::before{content:"";display:block;height:10px;background:var(--hatch);opacity:.35}
.fwrap{max-width:1120px;margin:0 auto;padding:52px 22px 30px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
.fwrap img.seal{width:86px;border-radius:50%;border:2px solid var(--paper);margin-bottom:14px}
.fwrap h4{font-family:var(--disp);text-transform:uppercase;color:var(--paper);letter-spacing:.16em;font-size:14px;margin-bottom:12px}
.fwrap a{color:#e6dcc3;text-decoration:none}
.fwrap a:hover{color:var(--red)}
.fwrap ul{list-style:none}
.fwrap li{margin-bottom:7px;font-size:15px}
.fbot{border-top:1px solid #3a3025;margin-top:34px;padding:18px 22px;text-align:center;font-size:13px;letter-spacing:.06em}
@media(max-width:800px){.fwrap{grid-template-columns:1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.sealbox img,.livestrip .mq,.dot{animation:none}}