/* ============================================================
   Base: reset, tipografia e container
   Tema CASACA!, filho de MagazineX.
   Gerado a partir do protótipo aprovado da home.
   ============================================================ */

*{box-sizing:border-box}

body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--f-txt);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}

.w{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

img{max-width:100%;display:block}

a{color:inherit}

/* O MagazineX pinta h1..h6 com cor fixa. Como é regra de elemento, ela
   vence a herança: todo título dentro de uma faixa escura saía quase
   preto. Já aconteceu no Apoie, no Acervo e na capa da elucidação. */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:400;color:inherit}

button{font:inherit}

:focus-visible{outline:2px solid var(--vermelho);outline-offset:2px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============================================================
   A casca do site: topo, navegação, tarja de campanha, rodapé,
   e os utilitários que valem em qualquer página.

   Vieram de home.css, que só carrega na home. Enquanto estavam
   lá, o cabeçalho e o rodapé apareciam sem estilo em tudo que
   não fosse a página inicial.
   ============================================================ */

/* Identidade travada em claro, de propósito.
   O site do CASACA! é claro: fundo branco azulado, faixa grafite, vermelho de marca.
   Esta é uma proposta de identidade visual, então ela não segue o tema de quem olha,
   senão mostra uma paleta que não é a do site. Todas as cores são pintadas
   explicitamente, então a página se sustenta sobre qualquer fundo do hospedeiro. */
:root{color-scheme:light}

.rel{position:relative}

/* ---------- topo ---------- */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--grafite)}

.topo-a{max-width:var(--maxw);margin:0 auto;padding:11px var(--gut);display:flex;align-items:center;gap:20px}

/* logo dimensionado por largura: com altura fixa, o max-width global esmagava a arte */
.topo-a img{width:194px;height:auto;flex:none}

@media (max-width:460px){.topo-a img{width:150px}}

@media (max-width:360px){.topo-a img{width:128px}}

.topo-b{background:var(--branco);box-shadow:inset 0 -3px 0 var(--vermelho)}

.topo-b-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:16px;
}

/* só os links rolam: a busca fica sempre à vista, na ponta direita */
.topo-b-links{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:4px;
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}

.topo-b-links::-webkit-scrollbar{display:none}

.busca-topo{flex:none;display:flex;align-items:center}

.busca-topo input{
  width:210px;box-sizing:border-box;height:34px;
  font-family:var(--f-ui);font-size:13.5px;color:var(--tinta);
  padding:0 11px;border:1px solid var(--regua-2);border-right:none;background:var(--fundo);
  -webkit-appearance:none;appearance:none;border-radius:0;
}

.busca-topo input::placeholder{color:var(--tinta-3)}

.busca-topo input:focus-visible{outline:2px solid var(--vermelho);outline-offset:-2px}

.busca-topo button{
  flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;
  border:none;background:var(--vermelho);color:#fff;cursor:pointer;
}

.busca-topo button:hover{background:var(--vermelho-2)}

.topo-b-in a{
  flex:none;
  font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;color:var(--tinta);padding:13px 13px;border-bottom:3px solid transparent;
  white-space:nowrap;
}

/* em telas estreitas o menu rola na horizontal; a borda esvanecida avisa que continua */
@media (max-width:760px){
  .topo-b-in{gap:8px}
  .topo-b-links{gap:0;margin-left:calc(var(--gut) * -1);padding-left:var(--gut);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
          -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
  .topo-b-in a{padding:12px 11px;font-size:12.5px}
  /* no celular, só a lupa: leva à página de busca, que tem o campo inteiro */
  .busca-topo input{display:none}
}

.topo-b-in a:hover,.topo-b-in a:focus-visible{color:var(--vermelho);border-bottom-color:var(--vermelho)}

.topo-b-in a.on{color:var(--vermelho);border-bottom-color:var(--vermelho)}

.slogan{margin-left:auto;font-family:var(--f-meta);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9a9aa2}

.topo-acoes{margin-left:auto;display:flex;align-items:center;gap:8px}

.btn-apoie{
  font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  background:var(--vermelho);color:#fff;text-decoration:none;padding:9px 17px;border:none;cursor:pointer;
}

.btn-apoie:hover{background:var(--vermelho-2)}

@media (max-width:900px){.slogan{display:none}}

/* ---------- etiquetas ---------- */
.et{
  font-family:var(--f-ui);font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;display:inline-block;line-height:1.3;white-space:nowrap;
}

.et.tipo{background:var(--vermelho);color:#fff}

.et.assunto{background:transparent;color:var(--tinta-2);border:1px solid var(--regua-2)}

.sobre-img .et.assunto{color:#fff;border-color:rgba(255,255,255,.55)}

.data{font-family:var(--f-meta);font-size:11.5px;color:var(--tinta-3);white-space:nowrap}

/* ---------- seções ---------- */
.sec{padding-block:50px}

.cab-sec{display:flex;align-items:center;gap:14px;margin-bottom:4px}

.cab-sec h2{font-family:var(--f-tit);font-size:clamp(22px,2.6vw,29px);text-transform:uppercase;letter-spacing:-.015em;line-height:1}

.cab-sec .barra{flex:1;height:3px;background:var(--vermelho)}

.cab-sec a{font-family:var(--f-ui);font-weight:700;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--vermelho);text-decoration:none;white-space:nowrap}

.cab-sec a:hover{text-decoration:underline}

.cita{border-left:4px solid var(--vermelho);background:var(--branco);padding:16px 18px;margin:20px 0;max-width:60ch}

.cita p{margin:0 0 8px;color:var(--tinta);font-size:16.5px;line-height:1.5}

.cita b{font-family:var(--f-meta);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);font-weight:500}

.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

.bt{font-family:var(--f-ui);font-weight:700;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;padding:12px 20px;text-decoration:none;border:2px solid var(--vermelho);color:var(--vermelho);background:transparent;cursor:pointer}

.bt.cheio{background:var(--vermelho);color:#fff}

.bt.cheio:hover{background:var(--vermelho-2);border-color:var(--vermelho-2)}

.bt:hover{background:var(--vermelho);color:#fff}

/* ---------- barra de campanha ---------- */
.barra-camp{background:var(--branco);border-bottom:1px solid var(--regua)}

.barra-camp-in{max-width:var(--maxw);margin:0 auto;padding:9px var(--gut);display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.barra-camp .selo{font-family:var(--f-ui);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--vermelho);color:#fff;padding:4px 9px}

.barra-camp p{margin:0;font-family:var(--f-ui);font-size:13.5px;color:var(--tinta-2)}

.barra-camp p b{color:var(--tinta);font-weight:700}

.barra-camp a{margin-left:auto;font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta);text-decoration:none;border-bottom:2px solid var(--vermelho);padding-bottom:2px;white-space:nowrap}

.barra-camp a:hover{color:var(--vermelho)}

@media (max-width:760px){
  .barra-camp-in{flex-wrap:nowrap;gap:9px;padding-block:8px}
  .barra-camp .selo{font-size:9.5px;letter-spacing:.1em;padding:3px 7px;flex:none}
  .barra-camp p{font-size:12.5px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .barra-camp .longo{display:none}
  .barra-camp a{font-size:0;border-bottom:none;flex:none;padding:0}
  .barra-camp a::after{content:"›";font-family:var(--f-ui);font-size:22px;line-height:1;color:var(--vermelho)}
}

@media (max-width:400px){
  .barra-camp .longo2{display:none}
  .barra-camp .selo{font-size:9px;padding:3px 6px}
  .barra-camp p{font-size:11.5px}
}

/* ---------- rodapé ---------- */
.rodape{background:var(--grafite);color:#a9adb5;border-top:4px solid var(--prata)}

.rodape-in{padding-block:40px 32px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}

@media (max-width:860px){.rodape-in{grid-template-columns:1fr 1fr}}

@media (max-width:520px){.rodape-in{grid-template-columns:1fr}}

.rodape img.mk{width:184px;height:auto;max-width:100%;margin-bottom:14px}

.rodape h5{font-family:var(--f-ui);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 12px}

.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}

.rodape a{font-family:var(--f-ui);font-size:13.5px;text-decoration:none;color:#a9adb5}

.rodape a:hover{color:var(--vermelho)}

.rodape .sobre p{font-size:14.5px;color:#8b9098;margin:0 0 10px;max-width:38ch}

.rodape-fim{border-top:1px solid #3c3c42;padding-block:16px 24px;font-family:var(--f-meta);font-size:10.5px;color:#73777f;display:flex;gap:18px;flex-wrap:wrap}

/* ============================================================
   Movimento
   Só entra com JavaScript ativo: sem ele, a classe js não existe
   e nada chega escondido na tela. Quem pediu menos movimento no
   sistema operacional não recebe nenhum.
   ============================================================ */

.js .surge{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}

.js .surge.visivel{opacity:1;transform:none}

.sem-movimento .surge,.sem-movimento .surge.visivel{opacity:1;transform:none;transition:none}

@media (prefers-reduced-motion:reduce){
  .js .surge,.js .surge.visivel{opacity:1;transform:none;transition:none}
}

/* A imagem do card se aproxima um pouco no hover, dentro do próprio quadro. */
.arq-img,.sobre-img,.live-cartao figure{overflow:hidden}

.arq-img img,.sobre-img img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}

.arq-grade li:hover .arq-img img,.destaque:hover .sobre-img img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .arq-img img,.sobre-img img,.arq-grade li:hover .arq-img img,.destaque:hover .sobre-img img{transition:none;transform:none}
}

/* Títulos e botões respondem ao ponteiro sem sobressalto. */
a,button,.bt,.et{transition:color .18s ease,background-color .18s ease,border-color .18s ease}

@media (prefers-reduced-motion:reduce){
  a,button,.bt,.et{transition:none}
}

/* O número que conta fica sobreposto ao valor final, que nunca sai do
   documento: se a contagem parar no meio, o que resta na tela é o dado. */
.contando{position:absolute;inset:0;background:inherit;color:inherit;display:block}

.nums .contando,.frias-nums .contando{background:var(--branco)}

.cap-acervo .nums .contando{background:transparent}