/* ============================================================
   Marcus Sodré 16 — PSTU Santa Catarina
   Paleta e tipografia vêm do material impresso da campanha.
   ============================================================ */

@font-face{font-family:'Anton';src:url('../fonts/anton-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo Black';src:url('../fonts/archivo-black-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --tinta:#0B0B0B;
  --tinta-2:#151515;
  --vermelho:#E01F26;
  --vermelho-esc:#A0141A;
  --amarelo:#F5C400;
  --creme:#EFEDE6;
  --marinho:#17294C;
  --marinho-esc:#0E1B35;
  --branco:#FFFFFF;

  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --corpo:'Barlow',system-ui,-apple-system,sans-serif;
  --util:'Barlow Condensed','Barlow',sans-serif;

  --caixa:1180px;
  --gutter:clamp(1.15rem,4vw,2.6rem);
  --secao:clamp(3.6rem,9vw,6.4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--tinta);color:var(--creme);
  font-family:var(--corpo);font-size:clamp(1rem,.96rem + .3vw,1.16rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px;border-radius:2px}

.pular{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--amarelo);color:#101010;padding:.8rem 1.2rem;font-weight:700;
}
.pular:focus{left:.6rem;top:.6rem}

.caixa{width:min(100% - var(--gutter)*2,var(--caixa));margin-inline:auto}

/* ---------- tipografia de exibição ---------- */
.mostruario{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.7rem,1.1rem + 7.2vw,5.4rem);line-height:1.07;letter-spacing:-.005em;
}
.mostruario em{font-style:normal;color:var(--amarelo)}
.t2{font-size:clamp(2.1rem,1rem + 4.6vw,3.7rem)}
.mostruario.mr{color:var(--marinho)}
.mostruario.mr em{color:var(--vermelho)}

.sobrancelha{
  font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.86rem;margin:0 0 .9rem;
}
.am{color:var(--amarelo)} .vm{color:var(--vermelho)}

.apoio{max-width:46ch;color:#BFBBB2;margin-top:1.1rem}
.destaque{font-size:1.12em;font-weight:600}

/* ---------- botões ---------- */
.btn{
  display:inline-block;font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:1.02rem;padding:.85rem 1.6rem;text-decoration:none;
  border:3px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-am{background:var(--amarelo);color:#101010;border-color:var(--amarelo)}
.btn-am:hover{background:#FFD426}
.btn-vazado{background:transparent;color:var(--creme);border-color:currentColor}
.btn-vazado:hover{background:var(--creme);color:#101010}

/* ============ TOPO ============ */
.topo{position:sticky;top:0;z-index:60;background:rgba(11,11,11,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(239,237,230,.12)}
.faixa{width:min(100% - var(--gutter)*2,var(--caixa));margin-inline:auto;
  display:flex;align-items:center;gap:1rem;min-height:64px}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.marca img{width:44px;height:auto}
.marca-txt{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em}
.marca-txt b{background:var(--amarelo);color:#101010;padding:.1em .4em;margin-left:.45em}
.menu{display:flex;gap:1.4rem;align-items:center}
.menu a{font-family:var(--util);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:.92rem;text-decoration:none;color:#CFCBC2;padding:.4rem 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a.ativo{color:var(--creme);border-bottom-color:var(--vermelho)}
.menu .menu-cta{background:var(--vermelho);color:#fff;padding:.5rem 1rem;border-bottom:none}
.menu .menu-cta:hover{background:#F02A31;border-bottom:none}
.abrir-menu{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.abrir-menu span{display:block;width:24px;height:2.5px;background:var(--creme);margin:5px 0;transition:.2s}
.abrir-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.abrir-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.abrir-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding:clamp(2.6rem,7vw,5rem) 0 clamp(4.6rem,10vw,7.5rem)}
/* cunha de transicao no pe do hero: marca a virada de secao
   e fica abaixo da foto, sem lavar a manga clara do Sodre */
.hero-luz{position:absolute;left:0;right:0;bottom:0;height:clamp(46px,7vw,92px);pointer-events:none;
  background:var(--vermelho);clip-path:polygon(100% 0,100% 100%,0 100%)}
.hero-luz::after{content:"";position:absolute;right:0;bottom:0;width:52%;height:100%;
  background:var(--vermelho-esc);clip-path:polygon(100% 0,100% 100%,0 100%)}
/* o 16 passa por cima da foto com mistura clareadora, entao nao e recortado por ela */
.hero-16{position:absolute;right:-.06em;top:-.14em;z-index:2;font-family:var(--display);
  font-size:min(46vw,30rem);line-height:1;color:#EFEDE6;opacity:.055;
  mix-blend-mode:screen;pointer-events:none;user-select:none}
.hero-grade{position:relative;z-index:1;width:min(100% - var(--gutter)*2,var(--caixa));margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero-texto h1{margin-bottom:1.3rem}
.hero-linha{max-width:38ch;color:#CBC7BE;font-size:1.06em}
.hero-linha b{color:var(--creme)}
.hero-botoes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
/* o Chromium decodifica o preto do JPEG alguns niveis abaixo do preto do CSS,
   entao a borda e dissolvida por mascara: no limite a opacidade e zero e sobra o fundo real */
.hero-foto img{width:100%;filter:contrast(1.03);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 72%,transparent 99%),
                     linear-gradient(to right,transparent 0,#000 10%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 72%,transparent 99%),
             linear-gradient(to right,transparent 0,#000 10%,#000 93%,transparent 100%);
  mask-composite:intersect}

/* ============ SEÇÕES CLARAS ============ */
.claro{background:var(--creme);color:#1C1C1C;padding:var(--secao) 0}
.claro .apoio{color:#5A5A5A}
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.6rem);
  margin:1.8rem 0 2.6rem;max-width:none}
.rivais{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.rivais li{background:var(--marinho);color:#DDE4F0;padding:1.4rem 1.5rem;border-left:8px solid var(--vermelho)}
.rivais h3{font-family:var(--display);text-transform:uppercase;font-size:1.35rem;color:var(--amarelo);
  margin-bottom:.6rem;line-height:1.15}
.rivais p{margin:0;font-size:.97rem}
.arremate{font-family:var(--display);text-transform:uppercase;color:var(--vermelho);
  font-size:clamp(1.15rem,.8rem + 1.5vw,1.75rem);line-height:1.24;margin:2rem 0 0;max-width:26ch}

/* ============ NÚMERO ============ */
.numero{background:var(--vermelho);color:#fff;padding:var(--secao) 0;position:relative;overflow:hidden}
.numero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 58%,var(--vermelho-esc) 58.2%,var(--vermelho-esc) 100%);opacity:.55}
.num-grade{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:center}
.cifra{font-family:var(--display);line-height:.82;margin:1.4rem 0 0;color:var(--amarelo);
  font-size:clamp(4.5rem,2rem + 13vw,10rem)}
.cifra span{font-size:.34em;vertical-align:.55em;margin-right:.06em}
.cifra-rot{font-family:var(--display);text-transform:uppercase;color:var(--amarelo);
  font-size:clamp(1.2rem,.8rem + 1.8vw,2rem);margin:1.1rem 0 0;line-height:1.1}
.num-caixa{background:rgba(0,0,0,.28);padding:1.3rem 1.5rem;font-weight:600;margin:1.4rem 0 0}

/* ============ PROGRAMA ============ */
.programa{background:var(--marinho);padding:var(--secao) 0;position:relative;overflow:hidden}
.programa::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 66%,var(--marinho-esc) 66.2%,var(--marinho-esc) 100%)}
.programa .caixa{position:relative}
.claro-apoio{color:#B9C4D8}
.abas{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 2rem}
.aba{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.92rem;padding:.65rem 1.1rem;background:rgba(255,255,255,.09);color:#D6DEEC;
  border:2px solid transparent;cursor:pointer;transition:.15s}
.aba:hover{background:rgba(255,255,255,.16)}
.aba[aria-selected="true"]{background:var(--amarelo);color:#101010;border-color:var(--amarelo)}
.propostas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.propostas li{background:rgba(255,255,255,.07);padding:1.3rem 1.4rem;border-top:5px solid var(--vermelho);
  opacity:0;transform:translateY(14px);animation:sobe .42s ease forwards}
.propostas li:nth-child(2){animation-delay:.05s}
.propostas li:nth-child(3){animation-delay:.1s}
.propostas li:nth-child(4){animation-delay:.15s}
.propostas li:nth-child(5){animation-delay:.2s}
.propostas li:nth-child(6){animation-delay:.25s}
@keyframes sobe{to{opacity:1;transform:none}}
.propostas h3{font-family:var(--display);text-transform:uppercase;font-size:1.22rem;line-height:1.2;
  color:var(--amarelo);margin-bottom:.55rem}
.propostas p{margin:0;font-size:.98rem;color:#D6DEEC}

/* ============ CHAPA ============ */
.sub{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.95rem;color:var(--vermelho);margin:2.6rem 0 1.1rem}
.gente{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.1rem}
.gente li{background:var(--marinho);color:#fff;overflow:hidden}
.gente img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center}
.gente h4{font-family:var(--display);text-transform:uppercase;font-size:1.02rem;line-height:1.18;
  padding:.85rem .9rem 0}
.gente .cargo{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;color:var(--amarelo);padding:.35rem .9rem 1rem;margin:0}
.nota{font-size:.92rem;color:#5A5A5A;margin-top:.9rem}

/* ============ DIVULGUE ============ */
.divulgue{padding:var(--secao) 0;border-top:1px solid rgba(239,237,230,.1)}
.div-grade{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:start}
.numeros{background:#151515;border-left:6px solid var(--amarelo);padding:1.5rem 1.6rem}
.numeros h3{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.86rem;color:var(--amarelo);margin-bottom:1rem}
.numeros dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;align-items:baseline}
.numeros dt{font-family:var(--display);font-size:1.5rem;color:var(--creme);line-height:1}
.numeros dd{margin:0;font-size:.94rem;color:#B4B0A8}
.numeros dd b{color:var(--creme);font-weight:600;display:block}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.9rem 0 2.2rem}
.redes{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.redes a{font-family:var(--util);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.92rem;color:#BFBBB2;text-decoration:none;border-bottom:2px solid rgba(224,31,38,.6);padding-bottom:2px}
.redes a:hover{color:var(--amarelo);border-bottom-color:var(--amarelo)}

/* ============ RODAPÉ ============ */
.rodape{background:var(--tinta-2);padding:clamp(2.2rem,5vw,3.4rem) 0;border-top:5px solid var(--vermelho)}
.rodape-grade{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:start}
.rodape-slogan{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;
  margin:.8rem 0 0;max-width:20ch;line-height:1.18}
.rodape nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.rodape nav a{font-family:var(--util);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:.88rem;color:#9C9890;text-decoration:none}
.rodape nav a:hover{color:var(--creme)}
.legal{font-size:.8rem;color:#79756E;margin:0;line-height:1.5;text-align:right;max-width:38ch}

/* ============ RESPONSIVO ============ */
@media (max-width:960px){
  .hero-grade,.num-grade{grid-template-columns:1fr}
  .hero-foto{order:-1;max-width:520px}
  .duas-colunas{grid-template-columns:1fr}
  .rivais{grid-template-columns:1fr}
  .div-grade{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr;gap:1.4rem}
  .legal{text-align:left}
}
@media (max-width:760px){
  .abrir-menu{display:block}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:#111;border-bottom:3px solid var(--vermelho);
    max-height:0;overflow:hidden;transition:max-height .28s ease}
  .menu.aberto{max-height:340px}
  .menu a{padding:.95rem var(--gutter);border-bottom:1px solid rgba(239,237,230,.1)}
  .menu .menu-cta{text-align:center}
  .hero-16{font-size:60vw;opacity:.8}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .propostas li{opacity:1;transform:none}
}

@media print{
  .topo,.acoes,.abrir-menu,.pular{display:none}
  body{background:#fff;color:#000}
}