/* =============================================================================
   Marcos Unillar 2345 — sistema visual "diagonal"
   =============================================================================
   A identidade dele é feita de movimento: o símbolo é um traço em curva, o
   post tem blocos cortados na diagonal e a faixa é uma fita horizontal. O
   site parte daí — cortes enviesados entre seções, blocos que avançam um
   sobre o outro, e o ciano como brilho.

   O ciano (#00C0FF) é o que define a marca visualmente. Azul + amarelo é
   combinação comum em campanha; o ciano é o que diferencia, então ele
   aparece em tudo que precisa de destaque.

   As cores vêm do config.js: nav.js injeta --azul, --ciano etc. em :root, e
   os tokens abaixo consomem essas variáveis. Mexer no config muda o site.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

/* `hidden` só traz display:none do navegador, e qualquer regra com display
   na mesma classe o derruba em silêncio. Quem escreve el.hidden = true
   espera que o elemento suma. */
[hidden]{display:none !important}

:root{
  /* preenchidos pelo nav.js a partir do config; os valores abaixo são a
     reserva, iguais aos amostrados da arte */
  --azul:#0050E0;
  --azul-medio:#0038A8;
  --azul-escuro:#002880;
  --ciano:#00C0FF;
  --amarelo:#FFD000;
  --amarelo-faixa:#FFE000;
  --vermelho:#FF0003;
  --tinta:#0A131A;
  --cal:#F2F6FF;
  --branco:#fff;

  /* A Loos é a fonte do material impresso, mas é paga (Sudtipos) e não temos
     licença de webfont — servir o arquivo seria distribuí-lo, que é o que a
     licença proíbe. Archivo é a substituta: variável em LARGURA e peso, o
     que permite chegar perto do ar condensado dos títulos da campanha. */
  --fonte:"Archivo","Helvetica Neue",Arial,sans-serif;

  --diagonal:4vw;            /* inclinação dos cortes entre seções */
  --max:1180px;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;background:var(--branco);color:var(--tinta);
  font-family:var(--fonte);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}

.envolve{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---------------------------------------------------------------- títulos --
   Largura variável: os títulos da campanha são condensados e pesados. A
   Archivo tem eixo de largura, então dá para chegar perto sem outra fonte. */
.titulo-secao{
  font-weight:900;font-stretch:88%;text-transform:uppercase;
  font-size:clamp(28px,4.6vw,52px);line-height:.98;letter-spacing:-.01em;
  margin:0 0 8px;
}
.subtitulo-secao{
  font-weight:600;color:var(--azul-medio);
  text-transform:uppercase;letter-spacing:.14em;font-size:13px;margin:0 0 22px;
}

/* ------------------------------------------------------------------ botão --
   Sem sombra sólida deslocada: aquilo é vocabulário de outro projeto. Aqui o
   botão tem corte diagonal num canto, ecoando os blocos da arte. */
.botao{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;min-height:52px;
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:transform .16s ease,filter .16s ease;
}
.botao:hover{transform:translateY(-2px);filter:brightness(1.06)}
.botao:active{transform:translateY(0)}
.botao--amarelo{background:var(--amarelo);color:var(--tinta)}
.botao--ciano{background:var(--ciano);color:var(--azul-escuro)}
.botao--vazado{background:transparent;color:var(--branco);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.botao--vazado:hover{background:rgba(255,255,255,.12)}

/* ------------------------------------------------------------------ faixa --
   A fita de identidade da campanha. É o elemento que amarra as páginas:
   aparece sob a barra, entre seções e fechando o rodapé. */
.faixa{
  height:66px;
  background:url("img/faixa.jpg") repeat-x center/auto 100%;
}
@media (max-width:720px){ .faixa{height:48px} }

/* ------------------------------------------------------------------ barra -- */
.barra{position:sticky;top:0;z-index:60;background:var(--azul-escuro)}
.barra__in{
  max-width:var(--max);margin:0 auto;padding:10px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.barra__marca{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
.barra__marca img{height:34px;width:auto;display:block}
.barra__numero{
  background:var(--amarelo);color:var(--tinta);
  font-weight:900;font-size:18px;line-height:1;padding:6px 9px 5px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
.barra__nav{display:flex;gap:4px}
.barra__nav a{
  color:var(--branco);text-decoration:none;font-weight:700;font-size:13.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:11px 13px;
  position:relative;transition:color .15s ease;
}
.barra__nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:6px;height:3px;
  background:var(--ciano);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.barra__nav a:hover::after,.barra__nav a.is-atual::after{transform:scaleX(1)}
.barra__nav a.is-atual{color:var(--ciano)}
.barra__botao{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:2px solid rgba(255,255,255,.55);color:var(--branco);
  cursor:pointer;padding:0;
}
.barra__botao span,.barra__botao span::before,.barra__botao span::after{
  display:block;width:19px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease;
}
.barra__botao span::before,.barra__botao span::after{content:"";position:relative}
.barra__botao span::before{top:-6px}
.barra__botao span::after{top:4px}
.barra__botao[aria-expanded="true"] span{background:transparent}
.barra__botao[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.barra__botao[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .barra__botao{display:flex}
  .barra__in{flex-wrap:wrap}
  .barra__nav{
    display:none;width:100%;flex-direction:column;gap:0;
    border-top:1px solid rgba(255,255,255,.2);margin-top:8px;
  }
  .barra__nav.is-aberto{display:flex}
  .barra__nav a{
    padding:15px 4px;font-size:15px;min-height:48px;display:flex;align-items:center;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .barra__nav a::after{display:none}
  .barra__marca img{height:28px}
}

/* ------------------------------------------------------------------- capa --
   Corte diagonal no pé, que é a assinatura do sistema. */
.capa{
  position:relative;background:var(--azul-escuro);color:var(--branco);
  padding:clamp(56px,8vw,104px) 0 calc(clamp(56px,8vw,104px) + var(--diagonal));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--diagonal)),0 100%);
  overflow:hidden;
}
/* brilho ciano em diagonal, ecoando o traço do símbolo */
.capa::before{
  content:"";position:absolute;inset:-20% -10%;
  background:
    radial-gradient(45% 60% at 78% 18%,rgba(0,192,255,.42),transparent 62%),
    linear-gradient(122deg,transparent 44%,rgba(0,80,224,.55) 45%,transparent 72%);
  pointer-events:none;
}
.capa__in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:center}
.capa__selo{
  display:inline-block;background:var(--ciano);color:var(--azul-escuro);
  font-weight:900;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;margin-bottom:18px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}
.capa__titulo{
  font-weight:900;font-stretch:82%;text-transform:uppercase;
  font-size:clamp(38px,6.6vw,78px);line-height:.92;letter-spacing:-.015em;margin:0;
}
.capa__titulo em{font-style:normal;color:var(--amarelo)}
.capa__sub{font-size:clamp(16px,1.9vw,19px);opacity:.92;margin:18px 0 30px;max-width:46ch}
.capa__acoes{display:flex;flex-wrap:wrap;gap:14px}
.capa__arte{position:relative}
/* O recorte veio do post com a base cortada reta, e sobre o azul da capa
   aquilo lia como figura colada por cima. A máscara dissolve os últimos 12%
   no fundo, e a elipse embaixo faz o papel de sombra de contato — sem ela a
   pessoa parece flutuar. */
.capa__arte img{
  display:block;width:100%;position:relative;z-index:1;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.55) 93%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.55) 93%,transparent 100%);
}
.capa__arte::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-2%;height:44px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,20,60,.55),transparent 70%);
  filter:blur(3px);
}
.capa__numero{
  position:absolute;right:0;bottom:-6%;width:56%;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.42));
}
@media (max-width:900px){
  .capa__in{grid-template-columns:1fr;gap:28px}
  .capa__numero{position:static;width:min(240px,62%);margin-top:14px}
}

/* -------------------------------------------------------------- destaques --
   Três blocos, separados por corte diagonal em vez de borda. */
.destaques{background:var(--azul);color:var(--branco);padding:44px 0}
.destaques__in{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.destaque__v{
  display:block;font-weight:900;font-stretch:86%;line-height:1;
  font-size:clamp(28px,3.8vw,44px);color:var(--amarelo);
}
.destaque__r{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;margin-top:8px}
.destaque__n{margin:6px 0 0;font-size:14.5px;opacity:.85;line-height:1.5}
@media (max-width:760px){ .destaques__in{grid-template-columns:1fr;gap:20px} }

/* ------------------------------------------------------------------- quem -- */
.quem{padding:clamp(56px,7vw,92px) 0;background:var(--branco)}
.quem__grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;margin-top:26px}
.quem__foto{position:relative}
.quem__foto img{display:block;width:100%}
/* moldura diagonal em ciano */
.quem__foto::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;
  border:3px solid var(--ciano);z-index:-1;
}
.quem__texto p{margin:0 0 16px;font-size:17px;line-height:1.7}
.quem__bloco{
  border-left:5px solid var(--amarelo);padding:2px 0 2px 18px;margin-bottom:22px;
}
.quem__bloco h3{
  margin:0 0 6px;font-weight:900;font-stretch:90%;text-transform:uppercase;
  font-size:18px;color:var(--azul-escuro);
}
@media (max-width:860px){ .quem__grade{grid-template-columns:1fr;gap:30px} .quem__foto::after{inset:10px -10px -10px 10px} }

/* ----------------------------------------------------------------- agenda -- */
.agenda{
  position:relative;background:var(--cal);
  padding:calc(clamp(56px,7vw,92px) + var(--diagonal)) 0 clamp(56px,7vw,92px);
  clip-path:polygon(0 var(--diagonal),100% 0,100% 100%,0 100%);
  margin-top:calc(var(--diagonal) * -1);
}
.agenda__lista{display:grid;gap:16px;margin-top:26px}
.agenda__item{
  display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;
  background:var(--branco);padding:18px 22px;
  border-left:6px solid var(--ciano);
}
.agenda__data{
  text-align:center;background:var(--azul-escuro);color:var(--branco);padding:10px 6px;
}
.agenda__dia{display:block;font-weight:900;font-size:26px;line-height:1}
.agenda__mes{display:block;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.1em;margin-top:2px}
.agenda__item h3{margin:0 0 4px;font-weight:900;font-stretch:92%;text-transform:uppercase;font-size:18px}
.agenda__local{margin:0;font-size:15px;color:var(--azul-medio);font-weight:600}
.agenda__vazio{color:var(--azul-medio);font-style:italic}
@media (max-width:560px){ .agenda__item{grid-template-columns:74px 1fr;gap:14px;padding:14px 16px} }

/* --------------------------------------------------------------- notícias -- */
.ultimas{padding:clamp(56px,7vw,92px) 0}
.grade-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px;margin-top:26px}
.post-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--branco);border:2px solid var(--cal);
  transition:transform .18s ease,border-color .18s ease;
}
.post-card:hover{transform:translateY(-4px);border-color:var(--ciano)}
.post-card__cap{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cal);display:block}
.post-card__corpo{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card__data{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-medio)}
.post-card__t{margin:0;font-weight:900;font-stretch:92%;font-size:19px;line-height:1.2}
.post-card__r{margin:0;font-size:15px;color:#41505E;line-height:1.55;flex:1}
.post-card__mais{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--azul)}
.ultimas__mais{margin-top:28px}

/* -------------------------------------------------------------------- FAQ -- */
.faq{background:var(--cal);padding:clamp(52px,6.5vw,84px) 0}
.faq__lista{margin:26px 0 0}
.faq__item{border-left:5px solid var(--amarelo);padding:2px 0 2px 18px;margin-bottom:24px}
.faq__item dt{font-weight:900;font-stretch:92%;text-transform:uppercase;font-size:clamp(16px,2vw,19px);color:var(--azul-escuro)}
.faq__item dd{margin:8px 0 0;font-size:16.5px;line-height:1.65}

/* ---------------------------------------------------------------- rodapé -- */
.rodape{background:var(--tinta);color:var(--branco)}
.rodape__in{
  max-width:var(--max);margin:0 auto;padding:38px 22px 26px;
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
}
.rodape__marca{display:flex;align-items:center;gap:14px}
.rodape__marca img{height:46px;width:auto}
.rodape__numero{font-weight:900;font-size:34px;line-height:1;color:var(--amarelo);font-variant-numeric:tabular-nums}
.rodape__nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.rodape__nav a{
  color:rgba(255,255,255,.82);text-decoration:none;font-weight:700;font-size:12px;
  letter-spacing:.11em;text-transform:uppercase;transition:color .15s ease;
}
.rodape__nav a:hover{color:var(--ciano)}
.rodape__soc{display:flex;gap:8px}
.rodape__soc a{width:44px;height:44px;display:grid;place-items:center;color:var(--branco);transition:color .15s ease}
.rodape__soc a:hover{color:var(--ciano)}
.rodape__legal{
  border-top:1px solid rgba(255,255,255,.16);
  max-width:var(--max);margin:0 auto;padding:14px 22px 24px;
  font-size:12.5px;color:rgba(255,255,255,.62);
}
@media (max-width:720px){
  .rodape__nav a{display:inline-block;padding:11px 0}
  .rodape__in{gap:18px}
}

/* -------------------------------------------------------------- blog ------ */
.blog__capa{background:var(--azul-escuro);color:var(--branco);padding:clamp(44px,6vw,74px) 0}
.blog__capa .titulo-secao{color:var(--branco)}
.blog__capa .subtitulo-secao{color:var(--ciano)}
.blog__main{padding:clamp(40px,5vw,68px) 0}
.blog__vazio{color:var(--azul-medio);font-style:italic}
.artigo{max-width:760px;margin:0 auto}
.artigo__cap{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cal);display:block;margin-bottom:26px}
.artigo__data{font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-medio)}
.artigo__titulo{
  font-weight:900;font-stretch:88%;text-transform:uppercase;
  font-size:clamp(28px,4.4vw,46px);line-height:1;margin:10px 0 24px;
}
.artigo__corpo{font-size:17.5px;line-height:1.75}
.artigo__corpo h2{font-weight:900;font-stretch:92%;text-transform:uppercase;font-size:24px;margin:34px 0 10px;color:var(--azul-escuro)}
.artigo__corpo h3{font-weight:900;font-size:19px;margin:26px 0 8px}
.artigo__corpo p{margin:0 0 18px}
.artigo__corpo ul,.artigo__corpo ol{margin:0 0 18px;padding-left:22px}
.artigo__corpo li{margin-bottom:7px}
.artigo__corpo blockquote{
  margin:24px 0;padding:6px 0 6px 20px;border-left:5px solid var(--ciano);
  font-size:19px;font-weight:600;color:var(--azul-escuro);
}
.artigo__corpo img{display:block;margin:24px 0}
.artigo__corpo a{color:var(--azul);text-underline-offset:3px}
.voltar{display:inline-flex;align-items:center;gap:8px;margin-top:34px;font-weight:800;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--azul);text-decoration:none}
.voltar:hover{color:var(--ciano)}

/* ------------------------------------------------------------- animações -- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease var(--d,0ms),transform .5s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .botao:hover,.post-card:hover{transform:none}
}

/* foco visível — teclado precisa enxergar onde está */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ciano);outline-offset:2px;
}