/* ==========================================================
   Simone Mácula · versão JORNAL
   Papel-jornal, tinta preta, fios finos e colunas.
   Os títulos das editorias continuam na Freakshow.
   ========================================================== */

:root {
  --papel: #fbfaf6;
  --branco: #fffefb;
  --tinta: #121212;
  --cinza: #5c5a55;
  --fio: #121212;
  --fio-claro: #c9c3b6;
  --vermelho: #c8102e;
  --menu-altura: 44px;

  /* cores da colagem */
  --magenta: #e8188c;
  --rosa: #ff6fb1;
  --rosa-claro: #f9c8de;
  --amarelo: #f7dc1f;
  --pontinho: rgba(150, 140, 125, .32);
  --caderno: #f3f1ec;
  --fita: rgba(232, 218, 182, .85);
  --postit-amarelo: #fdf07d;
  --postit-rosa: #ffa6cf;
  --postit-laranja: #ffc27a;
  --sombra: drop-shadow(1px 2px 1px rgba(21, 19, 19, .38));
  --sombra-caixa: 1px 2px 2px rgba(21, 19, 19, .32);
  --pontos: radial-gradient(rgba(0, 0, 0, .13) 1.1px, transparent 1.6px) 0 0 / 6px 6px;
  --f-pincel: "Darumadrop One", cursive;
  --f-recorte: "Instrument Serif", Georgia, serif;
  --f-destaque: "Averia Gruesa Libre", Georgia, serif;
  --f-pixel: "Silkscreen", ui-monospace, monospace;

  --f-nome: "Pirata One", serif;
  --f-manchete: "Old Standard TT", Georgia, serif;
  --f-texto: "Libre Caslon Text", Georgia, serif;
  --f-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --f-editoria: "Freakshow", var(--f-manchete);

  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@font-face {
  font-family: "Freakshow";
  src: url("fontes/Freakshow.otf") format("opentype");
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--menu-altura) + 12px); }

body {
  margin: 0;
  background:
    radial-gradient(circle, var(--pontinho) 1.3px, transparent 1.7px) 11px 11px / 22px 22px,
    var(--grao),
    var(--caderno);
  color: var(--tinta);
  font: 17px/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.folha {
  position: relative;
  max-width: 1200px;
  margin: 32px auto 60px;
  background:
    radial-gradient(circle, var(--pontinho) 1.3px, transparent 1.7px) 11px 11px / 22px 22px,
    var(--grao),
    var(--papel);
  box-shadow: 0 1px 2px rgba(21, 19, 19, .18), 3px 8px 18px rgba(21, 19, 19, .16);
}

main, .cabecalho { position: relative; padding: 0 32px; }

/* ---------- Cabeçalho ---------- */
.faixa-topo {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 10px;
  font: 600 12px/1.3 var(--f-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.data-hoje::first-letter { text-transform: uppercase; }

.nome-linha {
  display: grid;
  grid-template-columns: 170px 1fr 170px;
  align-items: center;
  gap: 20px;
  padding: 16px 0 14px;
  border-bottom: 3px double var(--fio);
}

.orelha {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--fio);
  font: italic 13px/1.3 var(--f-texto);
  text-align: center;
}

.lema { margin: 0; text-align: center; }

/* ---------- Menu ---------- */
.menu {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--menu-altura);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--papel);
  border-bottom: 1px solid var(--fio);
  font-family: var(--f-sans);
}

.menu-marca {
  position: absolute;
  left: 32px;
  font: normal 22px/1 var(--f-nome);
  text-decoration: none;
}

.menu ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.menu ul a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
}
.menu ul a:hover, .menu ul a.ativo { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Pedacinhos de texto ---------- */
.chapeu {
  margin: 0 0 6px;
  font: 800 11px/1.2 var(--f-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cinza);
}

.botao {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--fio);
  background: var(--tinta);
  color: var(--papel);
  font: 600 13px/1 var(--f-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--papel); color: var(--tinta); }

/* ---------- Primeira página ---------- */
.primeira {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 0;
  padding: 24px 0 40px;
  border-bottom: 1px solid var(--fio);
}

.manchete {
  position: relative;
  padding-right: 28px;
  border-right: 1px solid var(--fio-claro);
}

.manchete-titulo {
  margin: 0 0 12px;
  font: 700 clamp(32px, 4.6vw, 56px)/1.04 var(--f-manchete);
  -webkit-text-stroke: .9px currentColor;
  letter-spacing: -.01em;
}

.linha-fina {
  margin: 0 0 12px;
  font: italic 20px/1.35 var(--f-manchete);
  color: #2b2a27;
}

.assinatura {
  margin: 0 0 18px;
  font: 12px/1.3 var(--f-sans);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.foto-manchete { margin: 0 0 20px; }
.foto-manchete { position: relative; isolation: isolate; padding: 10px 0 0; }
.foto-manchete img { width: 92%; margin: 0 auto; }

figcaption {
  margin-top: 6px;
  font: 12.5px/1.4 var(--f-sans);
  color: var(--cinza);
}
figcaption span { color: #8b877e; }

.texto-colunas {
  columns: 2;
  column-gap: 28px;
  column-rule: 1px solid var(--fio-claro);
}
.texto-colunas p { margin: 0 0 12px; text-align: justify; hyphens: auto; }

.capitular::first-letter {
  float: left;
  margin: 4px 10px 0 0;
  font: normal 76px/.8 var(--f-editoria);
}

.lateral { padding-left: 28px; }

.lateral-titulo {
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--fio);
  font: 800 13px/1.2 var(--f-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sumario { margin: 0 0 24px; padding: 0; list-style: none; }
.sumario li { border-bottom: 1px solid var(--fio-claro); }
.sumario a {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 8px;
  padding: 12px 0;
  text-decoration: none;
  transition: transform .2s ease;
}
.sumario-num { grid-row: span 2; font: 700 13px/1.6 var(--f-sans); color: var(--cinza); }
.sumario-titulo { font: 700 22px/1.1 var(--f-manchete); }
.sumario-desc { font: italic 15px/1.3 var(--f-texto); color: var(--cinza); }
.sumario a:hover .sumario-titulo { text-decoration: underline; text-underline-offset: 3px; }

/* papel que balança quando o mouse passa */
.sumario a:hover,
.sumario a:focus-visible,
.postits > :hover { animation: balancar .6s ease-out; }

@keyframes balancar {
  0% { rotate: 0deg; }
  25% { rotate: 1.6deg; }
  50% { rotate: -1.2deg; }
  75% { rotate: .5deg; }
  100% { rotate: 0deg; }
}

.coluna-ratolosofica { margin-top: 10px; }

/* card de filósofo: moldura dupla, retrato oval e a frase da semana */
.card-filosofo {
  position: relative;
  margin: 26px 6px 0;
  padding: 22px 20px 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .9), transparent 70%),
    var(--grao),
    #fffdf8;
  border: 1px solid var(--tinta);
  outline: 4px double var(--tinta);
  outline-offset: -10px;
  box-shadow: 2px 4px 0 rgba(21, 19, 19, .12), 4px 10px 18px rgba(21, 19, 19, .12);
  text-align: center;
  transform: rotate(1.2deg);
}
.card-filosofo .fita { top: -14px; transform: translateX(-50%) rotate(-4deg); }

.card-escola {
  margin: 6px 0 14px;
  font: 600 10px/1.2 var(--f-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.card-retrato {
  width: 76%;
  aspect-ratio: 4 / 5;
  margin: 0 auto 14px;
  border: 1px solid var(--tinta);
  outline: 1px solid var(--tinta);
  outline-offset: 4px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fff, #ebe7df);
}
.card-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; }

.card-nome {
  margin: 0;
  font: 700 24px/1.1 var(--f-manchete);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card-datas { margin: 2px 0 0; font: italic 15px/1.3 var(--f-texto); color: var(--cinza); }
.card-ornamento { margin: 8px 0 6px; font-size: 16px; letter-spacing: .3em; }

.card-frase { margin: 0; padding: 0 6px; }
.card-frase p { margin: 0; font: italic 23px/1.22 var(--f-manchete); }

/* compartilhar o pensamento */
.compartilhar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
}
.compartilhar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--tinta);
  background: var(--papel);
  color: var(--tinta);
  font: 600 11px/1 var(--f-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.compartilhar button:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.compartilhar button:disabled { opacity: .5; cursor: wait; }
.compartilhar svg { width: 15px; height: 15px; }
.compartilhar-aviso { margin: 8px 0 0; font: italic 14px/1.35 var(--f-texto); color: var(--cinza); text-align: center; }

.card-rodape {
  margin: 14px 0 6px;
  padding-top: 8px;
  border-top: 1px solid var(--fio-claro);
  font: 600 10px/1.2 var(--f-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.citacao {
  margin: 0;
  padding: 16px 0;
  border-top: 2px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}
.citacao p { margin: 0 0 8px; font: italic 24px/1.2 var(--f-manchete); }
.citacao cite { font: normal 12px/1.3 var(--f-sans); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Patinhas de rato andando pelo jornal ---------- */
.patinhas {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: 26px;
  color: var(--tinta);
  opacity: .3;
  pointer-events: none;
  transform-origin: left center;
}
.patinhas svg { width: 32px; height: 32px; transform: rotate(90deg); }
.patinhas svg:nth-child(odd) { translate: 0 -14px; }
.patinhas svg:nth-child(even) { translate: 0 14px; }
.patinhas-capa { right: 10px; top: 46%; transform: rotate(-24deg); }
.patinhas-fim { right: 2%; bottom: -40px; transform: rotate(196deg); }

/* ---------- Editorias ---------- */
.secao {
  position: relative;
  isolation: isolate;
  padding: 36px 0 44px;
  border-bottom: 1px solid var(--fio);
}

.secao-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 26px;
  padding-bottom: 8px;
  border-bottom: 3px double var(--fio);
}

.secao-cabeca .nota {
  margin: 0 0 8px;
  font: 600 12px/1.3 var(--f-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cinza);
}

/* títulos na Freakshow, letra por letra (o script monta) */
.letras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-size: clamp(44px, 7vw, 80px);
  font-weight: normal;
}

.letra {
  position: relative;
  display: inline-block;
  font-family: var(--f-editoria);
  font-weight: normal;
  line-height: 1;
  color: var(--tinta);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
}

.espaco { width: .3em; }

.acento {
  position: absolute;
  left: 0;
  right: 0;
  top: -.42em;
  font: normal 1em/1 var(--f-manchete);
  text-align: center;
}
.acento.embaixo { top: auto; bottom: -.5em; }

.secao-rodape { margin: 30px 0 0; font: 15px/1.4 var(--f-sans); text-align: center; }

/* ---------- 01 Blog ---------- */
.materias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.materias > * { padding: 0 24px; border-left: 1px solid var(--fio-claro); }
.materias > :first-child { padding-left: 0; border-left: 0; }
.materias > :last-child { padding-right: 0; }

.materia { display: block; height: 100%; text-decoration: none; }
.materia h3 { margin: 0 0 8px; font: 700 28px/1.1 var(--f-manchete); }
.materia:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.materia-sub { margin: 0 0 14px; font: italic 17px/1.35 var(--f-texto); color: #2b2a27; }
.continua { font: 600 12px/1 var(--f-sans); letter-spacing: .04em; text-transform: uppercase; }

.anuncio {
  padding: 18px;
  border: 1px solid var(--fio);
  outline: 1px solid var(--fio);
  outline-offset: 3px;
  text-align: center;
  background: var(--branco);
}
.anuncio-rotulo {
  margin: 0 0 8px;
  font: 800 10px/1 var(--f-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- 02 Galeria e 03 Videoteca ---------- */
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }
.videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.foto, .video { display: block; text-decoration: none; }
.foto img, .foto-vazia { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.video img, .video-vazio { aspect-ratio: 9 / 16; width: 100%; object-fit: cover; }

.foto-vazia, .video-vazio {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(18, 18, 18, .05) 6px 7px),
    #e4ded1;
  font: 600 12px/1 var(--f-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cinza);
}
.video-vazio { font-size: 28px; color: var(--tinta); }

.legenda {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--fio-claro);
  font: 12.5px/1.4 var(--f-sans);
  color: var(--cinza);
}
.foto:hover .legenda, .video:hover .legenda { color: var(--tinta); }

/* ---------- 04 Agora ---------- */
.cultura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cultura figure { margin: 0; padding: 0 24px; border-left: 1px solid var(--fio-claro); }
.cultura figure:first-child { padding-left: 0; border-left: 0; }
.cultura figure:last-child { padding-right: 0; }
.cultura img { height: 280px; width: auto; max-width: 100%; margin: 0 auto 14px; object-fit: contain; box-shadow: 2px 3px 0 rgba(18, 18, 18, .15); }
.cultura figcaption { display: flex; flex-direction: column; gap: 2px; font: inherit; color: var(--tinta); }
.cultura figcaption b { font: 700 22px/1.15 var(--f-manchete); }
.cultura figcaption > span:last-child { font: italic 16px/1.3 var(--f-texto); color: var(--cinza); }

/* ---------- 05 Colônia ---------- */
.colonia {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.colonia-chamada { margin: 0 0 10px; font: 700 36px/1.1 var(--f-manchete); }
.colonia-explica { margin: 0 0 20px; }

.redes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.redes a {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--fio);
  font: 600 13px/1 var(--f-sans);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
}
.redes a:hover { background: var(--tinta); color: var(--papel); }
.redes a.feito { background: var(--tinta); color: var(--papel); }
.redes a.feito::after { content: " ✓"; }

/* cupom de recortar */
.carteirinha {
  position: relative;
  padding: 20px 22px 18px;
  border: 2px dashed var(--tinta);
  background: var(--branco);
}
.tesoura { position: absolute; top: -15px; left: 18px; padding: 0 4px; background: var(--papel); font-size: 20px; line-height: 1; }

.carteirinha-topo {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fio);
  font: normal 26px/1 var(--f-nome);
  text-align: center;
}

.carteirinha-miolo { display: flex; gap: 16px; align-items: center; }
.carteirinha-foto { width: 96px; filter: grayscale(1) contrast(1.1); }
.carteirinha-campo { margin: 0 0 4px; font: 12px/1.3 var(--f-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--cinza); }
.carteirinha-campo span { font: italic 16px var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--tinta); }
.carteirinha-conta { margin: 8px 0 0; font: 14px var(--f-sans); }
.carteirinha-conta b { font: 700 22px var(--f-manchete); }

.selos { display: flex; justify-content: space-between; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.selo { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 10px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .04em; }
.selo-circulo {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px dashed var(--cinza);
  border-radius: 50%;
}
.selo-circulo svg {
  width: 30px;
  height: 30px;
  color: var(--vermelho);
  opacity: 0;
  transform: rotate(-20deg) scale(1.6);
  transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.selo.carimbado .selo-circulo { border: 2px solid var(--vermelho); }
.selo.carimbado .selo-circulo svg { opacity: .9; transform: rotate(-20deg) scale(1); }

.carimbo-membro {
  position: absolute;
  right: -10px;
  bottom: 70px;
  margin: 0;
  padding: 5px 12px;
  border: 3px solid var(--vermelho);
  color: var(--vermelho);
  background: rgba(251, 249, 243, .7);
  font: 800 15px var(--f-sans);
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-12deg) scale(1.8);
  transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.carteirinha.membro .carimbo-membro { opacity: 1; transform: rotate(-12deg) scale(1); }

/* ---------- 06 Mural: cartas à redação ---------- */
.mural { max-width: 820px; margin: 0 auto; }
.mural-trava { padding: 24px; border: 1px solid var(--fio); text-align: center; background: var(--branco); }
.cadeado { width: 28px; height: 28px; }
.mural-titulo { margin: 8px 0; font: 700 26px/1.15 var(--f-manchete); }

.recado { display: grid; gap: 14px; margin-top: 16px; }
.recado label { display: grid; gap: 4px; font: 600 12px var(--f-sans); text-transform: uppercase; letter-spacing: .05em; }
.recado input, .recado textarea {
  padding: 10px 12px;
  border: 1px solid var(--fio);
  border-radius: 0;
  background: var(--branco);
  font: 17px/1.4 var(--f-texto);
  color: var(--tinta);
}
.recado button { justify-self: start; }
.isca { position: absolute; left: -9999px; }
.mural-aviso { font: italic 15px var(--f-texto); color: var(--cinza); }

.recados-lista {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
  column-rule: 1px solid var(--fio-claro);
}
.carta { break-inside: avoid; margin-bottom: 22px; }
.carta p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.carta .recado-assinatura { margin-top: 6px; font: 600 12px var(--f-sans); text-transform: uppercase; letter-spacing: .05em; }
.carta .recado-assinatura::before { content: "— "; }

/* ---------- Rodapé ---------- */
.rodape {
  padding: 30px 0 50px;
  border-top: 3px double var(--fio);
  margin-top: -1px;
  text-align: center;
  font: 13px/1.6 var(--f-sans);
}
.rodape p { margin: 0; }
.rodape-logo { width: min(180px, 50%); height: auto; margin: 0 auto 10px; }

/* ---------- Pensamento intrusivo (pop-up que surge do nada) ---------- */
.pensamento {
  position: fixed;
  z-index: 50;
  width: min(330px, calc(100vw - 32px));
  background: var(--branco);
  border: 2.5px solid var(--tinta);
  box-shadow: 6px 6px 0 var(--tinta);
  color: var(--tinta);
  rotate: var(--giro, -2deg);
  animation: pensamento-surge .35s cubic-bezier(.3, 1.6, .5, 1);
}

.pensamento[hidden] { display: none; }

.pensamento-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 6px 5px 10px;
  background: var(--magenta);
  border-bottom: 2.5px solid var(--tinta);
  color: var(--branco);
  font-family: var(--f-pixel);
  font-size: 13px;
  text-transform: uppercase;
}

.pensamento-fechar {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--tinta);
  background: var(--branco);
  color: var(--tinta);
  font: 14px/1 var(--f-pixel);
  cursor: pointer;
}

.pensamento-texto {
  margin: 0;
  padding: 18px 18px 6px;
  font-family: var(--f-recorte);
  font-style: italic;
  font-size: 23px;
  line-height: 1.15;
}

.pensamento-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 14px;
}

.pensamento-acoes button {
  padding: 5px 12px;
  border: 2px solid var(--tinta);
  background: var(--amarelo);
  color: var(--tinta);
  font: 12px var(--f-pixel);
  text-transform: uppercase;
  cursor: pointer;
}

.pensamento-acoes button + button { background: var(--branco); }
.pensamento button:hover { background: var(--rosa-claro); }

@keyframes pensamento-surge {
  from { opacity: 0; scale: .4; }
  to { opacity: 1; scale: 1; }
}

/* ---------- Telas menores ---------- */
@media (max-width: 900px) {
  .nome-linha { grid-template-columns: 1fr; }
  .orelha { display: none; }
  .orelha.tempo { display: block; justify-self: center; max-width: 320px; }
  .primeira { grid-template-columns: 1fr; }
  .manchete { padding-right: 0; border-right: 0; padding-bottom: 28px; border-bottom: 1px solid var(--fio-claro); }
  .lateral { padding-left: 0; padding-top: 24px; }
  .materias, .cultura { grid-template-columns: 1fr; }
  .materias > *, .cultura figure { padding: 20px 0; border-left: 0; border-top: 1px solid var(--fio-claro); }
  .materias > :first-child, .cultura figure:first-child { padding-top: 0; border-top: 0; }
  .fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonia { grid-template-columns: 1fr; }
  .menu-marca { display: none; }
}

@media (max-width: 640px) {
  main, .cabecalho { padding: 0 16px; }
  .faixa-topo span:first-child, .faixa-topo span:last-child { display: none; }
  .faixa-topo { justify-content: center; }
  .menu { justify-content: flex-start; overflow-x: auto; padding: 0 16px; }
  .menu ul { gap: 16px; }
  .texto-colunas { columns: 1; }
  .linha-fina { font-size: 18px; }
  .recados-lista { columns: 1; }
  .selo-circulo { width: 40px; height: 40px; }
  .patinhas svg { width: 24px; height: 24px; }
  .carimbo-membro { right: 6px; }
}

/* ==========================================================
   COLAGEM POR CIMA DO JORNAL
   Recortes, fitas, post-its e pinceladas da versão revista.
   ========================================================== */

.nota { font-family: var(--f-pincel); }

/* papel recortado: a cor vem do style="--cor: ..." */
.recorte { position: relative; isolation: isolate; color: var(--tinta); filter: var(--sombra); }
.recorte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grao), var(--pontos), var(--cor, var(--branco));
  filter: url(#tesoura);
}
.recorte::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -2;
  background: var(--grao), var(--branco);
  filter: url(#tesoura);
}
.recorte-escuro { color: var(--papel); }

.retalho { position: absolute; z-index: -1; filter: url(#rasgado); pointer-events: none; }

.tirinha {
  position: absolute;
  z-index: 3;
  padding: 2px 9px 3px;
  background: var(--grao), var(--branco);
  font: italic 20px/1.1 var(--f-recorte);
  white-space: nowrap;
  filter: var(--sombra);
  pointer-events: none;
}

.fita {
  position: absolute;
  z-index: 3;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  background: var(--grao), var(--fita);
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(3% 0, 97% 0, 100% 22%, 95% 42%, 100% 62%, 96% 82%, 98% 100%, 2% 100%, 0 80%, 5% 60%, 0 40%, 4% 20%);
}

.rabisco { position: absolute; z-index: 3; pointer-events: none; }
.ratinho { filter: var(--sombra); }


.carimbo {
  position: absolute;
  z-index: 3;
  right: 34px;
  top: 318px;
  padding: 4px 12px 5px;
  border: 3px solid var(--vermelho);
  color: var(--vermelho);
  font: 13px var(--f-pixel);
  text-transform: uppercase;
  transform: rotate(-8deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- Cabeçalho ---------- */
/* nome do jornal: arte da Simone, bem grande, com um ratinho de apoio de cada lado */
.nome-capa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 18px 0 6px;
}
.rato-esquerda { width: 100%; max-width: 240px; justify-self: end; transform: rotate(-4deg); }
.rato-direita { width: 100%; max-width: 250px; justify-self: start; transform: rotate(3deg); }

.nome-freak { margin: 0; line-height: 0; }
.nome-freak img { width: 100%; height: auto; }
.lema-recorte {
  display: inline-block;
  padding: 4px 12px 5px;
  font: 14px/1.2 var(--f-destaque);
  -webkit-text-stroke: .4px currentColor;
  transform: rotate(-1deg);
}


/* ---------- Primeira página ---------- */
.chapeu-fita {
  display: inline-block;
  padding: 4px 10px;
  background: var(--grao), var(--amarelo);
  color: var(--tinta);
  transform: rotate(-2deg);
  clip-path: polygon(2% 0, 98% 4%, 100% 100%, 0 96%);
}

.retalho-rosa-capa {
  left: 6%;
  top: 4%;
  width: 70%;
  height: 80%;
  background: var(--grao), var(--pontos), var(--rosa-claro);
  transform: rotate(-3deg);
}
.c-estrela { top: 0; right: 4%; width: 34px; height: 34px; color: var(--magenta); transform: rotate(14deg); }
.c-cereja { bottom: 34px; left: 0; width: 56px; height: 56px; color: var(--vermelho); transform: rotate(-10deg); }
.c-garrancho { right: 2%; bottom: 40px; width: 130px; height: 32px; color: var(--tinta); }

.capitular::first-letter { color: var(--magenta); }

.citacao.postit {
  aspect-ratio: auto;
  margin-top: 30px;
  padding: 26px 22px 20px;
  border: 0;
  transform: rotate(2deg);
}
.citacao.postit cite { color: var(--tinta); }

/* ---------- Títulos: pincelada atrás da Freakshow ---------- */
.secao-cabeca .letras { position: relative; isolation: isolate; }
.secao-cabeca .letras::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14px;
  right: -18px;
  top: 50%;
  height: 58%;
  background: var(--magenta);
  filter: url(#pincel);
  transform: translateY(-45%) rotate(-3deg);
}
#galeria .secao-cabeca .letras::before,
#atualidades .secao-cabeca .letras::before,
#mural .secao-cabeca .letras::before { background: var(--rosa-claro); }

.secao-cabeca .nota { font-family: var(--f-sans); }

/* ---------- 01 Blog: post-its colados no jornal ---------- */
.postits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: 40px 36px;
}
.postits > * { transition: transform .2s ease; }
.postits > :nth-child(1) { transform: rotate(-3deg); }
.postits > :nth-child(2) { transform: rotate(2deg) translateY(22px); }
.postits > :nth-child(3) { transform: rotate(-1.5deg) translateY(6px); }
.postits > :hover { transform: rotate(0) translateY(-4px); }

.postit {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: 26px 22px 20px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(255, 255, 255, .1) 18%, transparent 40%, rgba(0, 0, 0, .04)),
    var(--grao),
    var(--cor);
  border-bottom-right-radius: 60px 5px;
  box-shadow: 0 1px 1px rgba(21, 19, 19, .22);
  color: var(--tinta);
  text-decoration: none;
}
.postit::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 6px;
  bottom: 9px;
  width: 50%;
  height: 20%;
  box-shadow: 4px 9px 6px rgba(21, 19, 19, .4);
  transform: rotate(5deg) skewX(12deg);
}
.postit-data { margin: 0; font: 800 11px/1.2 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; }
.postit h3 { margin: 10px 0 0; font: 700 27px/1.08 var(--f-manchete); }
.postit-sub { margin: 10px 0 0; font: italic 17px/1.3 var(--f-texto); }
.postit-ler {
  margin-top: auto;
  padding-top: 12px;
  font: 600 12px/1 var(--f-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.postit-coracao { position: absolute; right: 20px; bottom: 18px; width: 40px; height: 40px; color: var(--vermelho); transform: rotate(12deg); }
.b-respingo { right: -10px; top: 90px; width: 84px; height: 84px; color: var(--vermelho); }

/* ---------- 02 Galeria: polaroides ---------- */
.retalho-rosa {
  right: 1%;
  top: 150px;
  width: 40%;
  height: 52%;
  background: var(--grao), var(--pontos), var(--rosa-claro);
  transform: rotate(5deg);
}
.tirinha-3 { top: 26px; right: 24%; transform: rotate(4deg); }
.fotos { gap: 36px 24px; padding: 0 8px; }
.polaroide {
  position: relative;
  padding: 12px 12px 8px;
  background: var(--grao), var(--branco);
  box-shadow: var(--sombra-caixa);
  text-align: center;
  transition: transform .2s ease;
}
.polaroide:nth-child(3n+1) { transform: rotate(-2.5deg); }
.polaroide:nth-child(3n+2) { transform: rotate(1.5deg) translateY(12px); }
.polaroide:nth-child(3n) { transform: rotate(-1deg); }
.polaroide:hover { transform: rotate(0) scale(1.03); }
.polaroide::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  width: 72px;
  height: 22px;
  background: var(--grao), var(--fita);
  transform: translateX(-50%) rotate(4deg);
  clip-path: polygon(3% 0, 97% 0, 100% 22%, 95% 42%, 100% 62%, 96% 82%, 98% 100%, 2% 100%, 0 80%, 5% 60%, 0 40%, 4% 20%);
}
.polaroide .foto-vazia {
  background: radial-gradient(rgba(232, 24, 140, .28) 1.2px, transparent 1.8px) 0 0 / 7px 7px, var(--rosa-claro);
  font: 22px var(--f-pincel);
  text-transform: none;
  letter-spacing: 0;
}
.polaroide .legenda { border-top: 0; font: 19px var(--f-pincel); color: var(--vermelho); }

/* ---------- 03 Videoteca ---------- */
.retalho-magenta {
  left: 52%;
  top: 170px;
  width: 44%;
  height: 58%;
  background: var(--grao), var(--pontos), var(--magenta);
  transform: rotate(-3deg);
}
.v-brilho { left: 3%; top: 40px; width: 44px; height: 44px; color: var(--magenta); }
.video { background: var(--branco); padding: 8px 8px 6px; box-shadow: var(--sombra-caixa); }
.video:nth-child(odd) { transform: rotate(-1.5deg); }
.video:nth-child(even) { transform: rotate(1.5deg) translateY(10px); }

/* ---------- 04 Agora ---------- */
.cultura figure { position: relative; }
.cultura figure .fita { top: -10px; }
.cultura figure:nth-child(1) img { transform: rotate(-2deg); }
.cultura figure:nth-child(2) img { transform: rotate(1.5deg); }
.cultura figure:nth-child(3) img { transform: rotate(-1deg); }
.m-estrela { right: 2%; top: 40px; width: 40px; height: 40px; color: var(--magenta); transform: rotate(-12deg); }

/* ---------- 05 Colônia ---------- */
.redes a:hover, .redes a.feito { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.carteirinha { background: var(--grao), var(--pontos), var(--branco); transform: rotate(1.5deg); }
.p-garrancho { left: 30%; top: 40px; width: 150px; height: 34px; color: var(--vermelho); }

/* ---------- 06 Mural ---------- */
.recado.postit { aspect-ratio: auto; max-width: 520px; margin: 16px auto 0; transform: rotate(-1deg); }
.recado.postit input, .recado.postit textarea { background: rgba(255, 255, 255, .6); }
.recado.postit button { justify-self: start; }

.botao:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }

/* ---------- Telas menores (colagem) ---------- */
@media (max-width: 900px) {
  .carimbo { right: 28px; top: 70px; font-size: 11px; }
  .postits { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .citacao.postit { max-width: 360px; }
}

@media (max-width: 640px) {
  main, .cabecalho { padding: 0 16px; }
  .folha { margin: 12px 8px 40px; }
  .menu-marca { display: none; }
  .carimbo { display: none; }
  .lema-recorte { font-size: 11px; padding: 3px 9px 4px; }
  .postits { grid-template-columns: minmax(0, 320px); gap: 28px; }
  .postits > :nth-child(2) { transform: rotate(2deg); }
  .postits > :nth-child(3) { transform: rotate(-1.5deg); }
  .fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .retalho-rosa, .retalho-magenta { width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .sumario a, .postits > *, .pensamento { animation: none !important; }
}

.tempo b { font: 700 12px/1.3 var(--f-sans); font-style: normal; letter-spacing: .03em; }

@media (max-width: 640px) {
  .nome-capa { grid-template-columns: 1fr 1fr; gap: 0 8px; padding-top: 10px; }
  .nome-freak { grid-column: 1 / -1; grid-row: 1; padding-bottom: 8px; }
  .rato-esquerda { width: 120px; justify-self: center; }
  .rato-direita { width: 140px; justify-self: center; }
}

/* ---------- Mural da Vergonha (coluna da lateral) ---------- */
.coluna-vergonha { margin-top: 36px; }
.vergonha {
  position: relative;
  margin: 22px 6px 0;
  padding: 10px 10px 12px;
  background: var(--grao), var(--branco);
  box-shadow: var(--sombra-caixa);
  transform: rotate(-1.5deg);
}
.vergonha .fita { top: -13px; transform: translateX(-50%) rotate(3deg); }

/* o meme com o círculo do cartaz trocado pela foto do salão */
.meme { position: relative; line-height: 0; }
.meme-base { width: 100%; height: auto; filter: grayscale(.15); }
.meme-foto, .meme-proibido {
  position: absolute;
  left: 5.6%;
  top: 13.6%;
  width: 38.4%;
  aspect-ratio: 1;
}
.meme-foto { border-radius: 50%; overflow: hidden; transform: rotate(-4deg); container-type: inline-size; }
.meme-foto img, .meme-foto .foto-vazia { width: 100%; height: 100%; object-fit: cover; }
.meme-foto .foto-vazia {
  display: grid;
  place-items: center;
  background: #e9e5de;
  font: 600 10px/1.2 var(--f-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cinza);
  text-align: center;
}
.meme-proibido { transform: rotate(-4deg); opacity: .92; }

.vergonha figcaption { margin-top: 10px; font: 13px/1.4 var(--f-sans); color: var(--tinta); text-align: center; }
.vergonha figcaption b { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.meme-nome { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 2px; background: #f3efe6 !important; }
.meme-nome span { font: italic 12cqi/1 var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--tinta); }
.meme-nome b { font: 700 21cqi/1 var(--f-manchete); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); }