/* =====================================================================
   FIEL ALMANAQUE — Estilo retrô/clássico (preto & branco + papel)
   Responsivo, sem dependências além das fontes do Google.
   ===================================================================== */

:root{
  --preto:        #14110f;
  --preto-2:      #1d1a17;
  --tinta:        #221c16;
  --papel:        #efe6d2;
  --papel-2:      #e6d9bd;
  --creme:        #f6efdd;
  --branco:       #fbf7ec;
  --ouro:         #b8893b;
  --ouro-claro:   #d8b15f;
  --sepia:        #6b513a;
  --linha:        rgba(34,28,22,.22);
  --sombra:       rgba(20,17,15,.18);
  --maxw:         1160px;

  --serif:  "Playfair Display", Georgia, "Times New Roman", serif;
  --cond:   "Oswald", "Arial Narrow", sans-serif;
  --slab:   "Anton", Impact, sans-serif;
  --type:   "Special Elite", "Courier New", monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--cond);
  color:var(--tinta);
  background:var(--papel);
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* Textura de papel/grão reaproveitável */
.grain-bg{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.container{ width:min(100% - 40px, var(--maxw)); margin-inline:auto; }
.container--narrow{ width:min(100% - 40px, 760px); }

/* =====================================================================
   CABEÇALHO
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--preto);
  color:var(--branco);
  border-bottom:3px solid var(--ouro);
  box-shadow:0 2px 0 rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25);
}
.header-inner{
  width:min(100% - 40px, var(--maxw)); margin-inline:auto;
  display:flex; align-items:center; gap:18px;
  min-height:68px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand-badge{ width:42px; height:42px; flex:0 0 42px; }
.brand-text strong{
  font-family:var(--slab); font-weight:400; letter-spacing:.5px;
  font-size:1.25rem; line-height:1; text-transform:uppercase; display:block;
}
.brand-text small{
  font-family:var(--type); font-size:.62rem; letter-spacing:1px;
  color:var(--ouro-claro); text-transform:uppercase;
}

.site-nav{ display:flex; gap:6px; }
.site-nav a{
  font-weight:500; text-transform:uppercase; letter-spacing:1px;
  font-size:.82rem; padding:8px 12px; border-radius:3px;
  color:var(--papel); position:relative; transition:color .2s;
}
.site-nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background:var(--ouro); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.site-nav a:hover{ color:#fff; }
.site-nav a:hover::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:0; padding:8px;
}
.nav-toggle span{ width:26px; height:2px; background:var(--branco); transition:.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(216,177,95,.16), transparent 55%),
    repeating-linear-gradient(135deg, #16130f 0 38px, #1b1714 38px 76px);
  color:var(--branco);
  text-align:center;
  padding:clamp(54px,9vw,110px) 20px clamp(60px,9vw,96px);
  border-bottom:4px double var(--ouro);
}
.hero-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; max-width:880px; margin-inline:auto; }
.hero-kicker{
  font-family:var(--type); letter-spacing:6px; font-size:.8rem;
  color:var(--ouro-claro); margin-bottom:14px;
}
.hero-title{
  font-family:var(--slab); font-weight:400;
  font-size:clamp(3rem, 11vw, 7.4rem); line-height:.92;
  text-transform:uppercase; letter-spacing:2px;
  text-shadow:4px 4px 0 rgba(0,0,0,.55);
}
.hero-title span{
  color:transparent; -webkit-text-stroke:2px var(--ouro-claro);
  text-shadow:none; display:inline-block;
}
.hero-sub{
  font-size:clamp(1rem,2.2vw,1.22rem); max-width:620px; margin:20px auto 0;
  color:#e9dec6; font-weight:300;
}

.hero-counters{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:34px auto 6px; max-width:760px;
}
.counter{
  flex:1 1 120px; min-width:104px; max-width:150px;
  background:rgba(0,0,0,.35); border:1px solid rgba(216,177,95,.4);
  border-radius:6px; padding:14px 8px;
}
.counter b{
  display:block; font-family:var(--slab); font-weight:400;
  font-size:2.4rem; line-height:1; color:var(--ouro-claro);
}
.counter .c-rot{ font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:.78rem; }
.counter .c-sub{ font-family:var(--type); font-size:.6rem; color:#cdbf9f; margin-top:3px; }

.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.btn{
  font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:1.5px;
  font-size:.85rem; padding:13px 26px; border-radius:4px; cursor:pointer;
  border:2px solid var(--ouro-claro); transition:transform .15s, background .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--ouro); color:var(--preto); border-color:var(--ouro); }
.btn-solid:hover{ background:var(--ouro-claro); }
.btn-ghost{ background:transparent; color:var(--branco); }
.btn-ghost:hover{ background:var(--branco); color:var(--preto); }

.hero-stamp{
  position:absolute; right:6%; top:14%; z-index:1;
  width:96px; height:96px; border-radius:50%;
  border:3px solid rgba(216,177,95,.55);
  display:grid; place-content:center; text-align:center;
  font-family:var(--type); color:var(--ouro-claro);
  transform:rotate(-12deg); font-size:.7rem; letter-spacing:1px;
  opacity:.85;
}
.hero-stamp b{ font-family:var(--slab); font-size:1.5rem; letter-spacing:1px; }

/* =====================================================================
   SEÇÕES (variações)
   ===================================================================== */
.section{ padding:clamp(48px,7vw,90px) 0; position:relative; }
.section--paper{ background:var(--papel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); }
.section--cream{ background:var(--creme); }
.section--dark{
  background:var(--preto); color:var(--papel);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px);
}

.section-head{ text-align:center; max-width:720px; margin:0 auto clamp(30px,5vw,52px); }
.section-head--left{ text-align:left; margin-inline:0; }
.section-tag{
  display:inline-block; font-family:var(--type); font-size:.72rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--sepia);
  border:1px solid var(--linha); border-radius:30px; padding:5px 16px; margin-bottom:16px;
}
.section--dark .section-tag, .section-head--light .section-tag{ color:var(--ouro-claro); border-color:rgba(216,177,95,.45); }
.section-title{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.08; color:var(--preto);
}
.section--dark .section-title, .section-head--light .section-title{ color:var(--branco); }
.section-title::after{
  content:""; display:block; width:64px; height:4px; background:var(--ouro);
  margin:16px auto 0;
}
.section-head--left .section-title::after{ margin-left:0; }
.section-lead{ margin-top:14px; font-weight:300; font-size:1.05rem; color:var(--sepia); }
.section--dark .section-lead{ color:#cdbf9f; }

/* =====================================================================
   TIMELINE
   ===================================================================== */
.timeline{ position:relative; max-width:880px; margin-inline:auto; }
.timeline::before{
  content:""; position:absolute; left:26px; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--ouro), var(--sepia));
}
.tl-item{
  position:relative; padding:0 0 22px 70px; cursor:pointer;
}
.tl-dot{
  position:absolute; left:16px; top:4px; width:24px; height:24px; border-radius:50%;
  background:var(--papel); border:4px solid var(--ouro); z-index:2; transition:transform .2s;
}
.tl-item:hover .tl-dot{ transform:scale(1.18); background:var(--ouro); }
.tl-card{
  background:var(--branco); border:1px solid var(--linha);
  border-left:5px solid var(--preto);
  border-radius:4px; padding:14px 18px; box-shadow:3px 3px 0 var(--sombra);
  transition:transform .2s, box-shadow .2s;
}
.tl-item:hover .tl-card{ transform:translateX(4px); box-shadow:6px 6px 0 var(--sombra); }
.tl-ano{ font-family:var(--slab); font-size:1.5rem; color:var(--ouro); line-height:1; }
.tl-titulo{ font-family:var(--serif); font-weight:700; font-size:1.15rem; color:var(--preto); margin:2px 0; }
.tl-txt{ font-size:.96rem; color:var(--sepia); max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s ease, opacity .35s, margin .3s; }
.tl-item.is-open .tl-txt{ max-height:240px; opacity:1; margin-top:8px; }
.tl-item.is-open .tl-card{ border-left-color:var(--ouro); }
.tl-hint{ font-family:var(--type); font-size:.62rem; letter-spacing:1px; color:var(--ouro); text-transform:uppercase; }
.tl-item.is-open .tl-hint{ display:none; }

/* =====================================================================
   TÍTULOS
   ===================================================================== */
.filtros{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.filtro{
  font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:1px;
  font-size:.8rem; padding:9px 18px; border-radius:30px; cursor:pointer;
  background:transparent; color:var(--papel); border:1.5px solid rgba(216,177,95,.5);
  transition:all .2s;
}
.filtro:hover{ border-color:var(--ouro-claro); color:#fff; }
.filtro.is-active{ background:var(--ouro); color:var(--preto); border-color:var(--ouro); }

.titulos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.titulo-card{
  background:linear-gradient(180deg,#211d18,#191510);
  border:1px solid rgba(216,177,95,.28); border-top:4px solid var(--ouro);
  border-radius:8px; padding:22px 20px 20px; position:relative; overflow:hidden;
  animation:pop .4s both;
}
.titulo-card::before{
  content:"🏆"; position:absolute; right:-8px; top:-10px; font-size:4.4rem; opacity:.07; transform:rotate(12deg);
}
.tc-cat{ font-family:var(--type); font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--ouro-claro); }
.tc-comp{ font-family:var(--serif); font-weight:700; font-size:1.28rem; color:var(--branco); margin:6px 0 10px; line-height:1.15; }
.tc-qtd{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.tc-qtd b{ font-family:var(--slab); font-size:2.6rem; color:var(--ouro-claro); line-height:1; }
.tc-qtd span{ font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:#bcaf96; }
.tc-anos{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.tc-ano{ font-family:var(--cond); font-weight:600; font-size:.72rem; background:rgba(216,177,95,.16);
  border:1px solid rgba(216,177,95,.3); color:var(--ouro-claro); padding:2px 8px; border-radius:20px; }
.tc-nota{ font-size:.9rem; color:#c9bca2; font-weight:300; }

/* =====================================================================
   ÍDOLOS
   ===================================================================== */
.idolos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.idolo{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:6px; padding:18px; text-align:center;
  box-shadow:3px 3px 0 var(--sombra); transition:transform .2s, box-shadow .2s;
}
.idolo:hover{ transform:translateY(-4px); box-shadow:5px 7px 0 var(--sombra); }
.idolo-av{
  width:78px; height:78px; margin:0 auto 12px; border-radius:50%;
  display:grid; place-content:center; font-family:var(--slab); font-size:1.8rem; color:var(--branco);
  background:radial-gradient(circle at 35% 30%, #3a322a, #14110f);
  border:3px solid var(--ouro); box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}
.idolo-nome{ font-family:var(--serif); font-weight:700; font-size:1.12rem; color:var(--preto); }
.idolo-per{ font-family:var(--type); font-size:.66rem; letter-spacing:1px; color:var(--ouro); text-transform:uppercase; margin:2px 0 8px; }
.idolo-txt{ font-size:.9rem; color:var(--sepia); }

/* =====================================================================
   CURIOSIDADES
   ===================================================================== */
.curio-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }
.curio{
  background:var(--branco); border:1px solid var(--linha); border-radius:6px;
  padding:22px 20px; position:relative; box-shadow:3px 3px 0 var(--sombra);
  border-top:4px solid var(--preto); transition:border-color .2s, transform .2s;
}
.curio:hover{ border-top-color:var(--ouro); transform:translateY(-3px); }
.curio-ic{ font-size:2rem; line-height:1; }
.curio-tt{ font-family:var(--serif); font-weight:700; font-size:1.18rem; color:var(--preto); margin:10px 0 6px; }
.curio-tx{ font-size:.96rem; color:var(--sepia); }

/* =====================================================================
   ARENA
   ===================================================================== */
.arena-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.arena-text p{ font-weight:300; font-size:1.06rem; color:#d8ccb4; margin-bottom:20px; max-width:52ch; }
.arena-text b{ color:var(--ouro-claro); font-weight:600; }
.arena-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.arena-facts li{
  background:rgba(216,177,95,.08); border:1px solid rgba(216,177,95,.3);
  border-radius:6px; padding:14px 16px;
}
.arena-facts b{ display:block; font-family:var(--slab); font-size:1.7rem; color:var(--ouro-claro); line-height:1; }
.arena-facts span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:#bcaf96; }

.arena-art{ display:grid; place-items:center; }
.arena-led{
  width:100%; aspect-ratio:16/10; border-radius:8px;
  background:linear-gradient(180deg,#0c0a08,#1c1813);
  border:2px solid rgba(216,177,95,.35);
  display:grid; place-content:center; position:relative; overflow:hidden;
}
.arena-led::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(216,177,95,.55) 1px, transparent 1.4px);
  background-size:9px 9px; opacity:.5; animation:led 5s linear infinite;
}
.arena-led span{
  position:relative; z-index:2; font-family:var(--slab); font-size:clamp(.9rem,2.4vw,1.5rem);
  letter-spacing:2px; color:var(--ouro-claro); text-align:center; padding:0 10px;
  text-shadow:0 0 12px rgba(216,177,95,.6);
}
@keyframes led{ to{ background-position:90px 0; } }

/* =====================================================================
   QUIZ
   ===================================================================== */
.quiz-card{
  background:var(--branco); border:1px solid var(--linha); border-top:5px solid var(--ouro);
  border-radius:8px; padding:clamp(22px,4vw,38px); box-shadow:5px 5px 0 var(--sombra);
}
.quiz-prog{ font-family:var(--type); font-size:.72rem; letter-spacing:2px; color:var(--ouro); text-transform:uppercase; }
.quiz-q{ font-family:var(--serif); font-weight:700; font-size:clamp(1.2rem,3vw,1.55rem); color:var(--preto); margin:10px 0 22px; }
.quiz-ops{ display:grid; gap:12px; }
.quiz-op{
  text-align:left; font-family:var(--cond); font-size:1rem; font-weight:500;
  padding:14px 18px; border-radius:6px; cursor:pointer;
  background:var(--creme); border:2px solid var(--linha); color:var(--tinta);
  transition:all .18s;
}
.quiz-op:hover:not(:disabled){ border-color:var(--ouro); transform:translateX(3px); }
.quiz-op.correct{ background:#e3efd9; border-color:#5f8b3a; color:#33521f; }
.quiz-op.wrong{ background:#f3ddd9; border-color:#a8442f; color:#7a2a1c; }
.quiz-op:disabled{ cursor:default; }
.quiz-next{ margin-top:22px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.quiz-score{ font-weight:600; color:var(--sepia); }
.quiz-result{ text-align:center; }
.quiz-result .qr-num{ font-family:var(--slab); font-size:clamp(3rem,12vw,5rem); color:var(--ouro); line-height:1; }
.quiz-result .qr-msg{ font-family:var(--serif); font-weight:700; font-size:1.4rem; color:var(--preto); margin:6px 0 18px; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.site-footer{
  background:var(--preto); color:var(--papel); text-align:center;
  padding:clamp(40px,6vw,64px) 0; border-top:4px double var(--ouro);
}
.footer-badge{ width:64px; height:64px; margin:0 auto 16px; }
.footer-cry{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--ouro-claro); max-width:30ch; margin:0 auto 18px; }
.footer-meta{ font-size:.86rem; color:#b3a78c; font-weight:300; line-height:1.7; }
.footer-sign{ font-family:var(--type); font-size:.72rem; letter-spacing:1px; color:#8a7e66; margin-top:16px; }

/* Voltar ao topo */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:var(--ouro); color:var(--preto); border:2px solid var(--preto);
  font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .3s, transform .2s;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ transform:translateY(-3px); }

/* =====================================================================
   ANIMAÇÕES + REVEAL
   ===================================================================== */
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:none; } }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--preto-2);
    border-bottom:3px solid var(--ouro);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .site-nav.open{ max-height:340px; }
  .site-nav a{ padding:14px 22px; border-top:1px solid rgba(255,255,255,.06); }
  .site-nav a::after{ display:none; }
  .arena-wrap{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:520px){
  .counter{ flex-basis:44%; }
  .arena-facts{ grid-template-columns:1fr; }
  .hero-stamp{ display:none; }
  .timeline::before{ left:18px; }
  .tl-item{ padding-left:54px; }
  .tl-dot{ left:8px; }
}