/* ============================================================
   TEMA EDITORIAL
   Duas cores. Uma fonte. Uma coluna. Nada além disso.
   ============================================================ */
:root{
  --tinta:#0a0e2e;      /* azul espacial profundo */
  --papel:#F3F0E7;      /* texto */
  --papel-70:rgba(243,240,231,.7);
  --papel-45:rgba(243,240,231,.45);
  --papel-20:rgba(243,240,231,.2);
  --papel-10:rgba(243,240,231,.1);
  --dourado:#C8963E;    /* ponto de luz quente */
  --laranja-cachecol:#d9873a; /* laranja-dourado */
  --f:"Fraunces",Georgia,"Times New Roman",serif;
  --col:34em;
  --pad:clamp(22px,6vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--tinta);color:var(--papel);
  font-family:var(--f);font-optical-sizing:auto;font-weight:300;
  font-size:19px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
a{color:inherit}

.col{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
.larga{max-width:52em}

/* rótulo: mesma fonte, versalete espaçado */
.rot{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;color:var(--papel-45);display:block}

/* botões: só preenchimento de papel ou contorno */
.b{display:inline-block;background:var(--papel);color:var(--tinta);padding:14px 30px;
  font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  text-decoration:none;border:1px solid var(--papel);transition:opacity .2s}
.b:hover{opacity:.82}
.b.v{background:none;color:var(--papel)}
.b.v:hover{background:var(--papel);color:var(--tinta);opacity:1}
.b.p{padding:9px 18px;font-size:12px;letter-spacing:.16em}

/* ---------- topo ---------- */
#aviso{display:none;text-align:center;padding:11px 18px;font-size:12.5px;
  letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--papel-20)}
#aviso a{text-decoration:none}
.barra{position:sticky;top:0;z-index:60;background:rgba(18,25,74,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--papel-10);
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--pad)}
.barra .interna{display:flex;justify-content:space-between;align-items:center;gap:16px;
  max-width:52em;width:100%;margin:0 auto}
.barra a.marca{font-size:16px;letter-spacing:.04em;text-decoration:none}
@media(max-width:420px){.barra a.marca{font-size:14px}}

/* ---------- abertura ---------- */
#abertura{text-align:center;padding:clamp(50px,11vw,120px) 0 clamp(40px,8vw,80px)}
#abertura .rot{margin-bottom:34px}
h1{font-weight:300;font-size:clamp(44px,10vw,96px);line-height:1;letter-spacing:-.035em;margin:0}
h1 .vol{display:block;font-size:.2em;letter-spacing:.34em;text-transform:uppercase;
  color:var(--papel-45);margin-bottom:26px;font-weight:400}
.autor{font-size:14px;letter-spacing:.3em;text-transform:uppercase;margin:34px 0 0;color:var(--papel-70)}
.logline{font-size:clamp(20px,2.4vw,24px);line-height:1.55;margin:40px auto 0;max-width:28em;font-style:italic;font-weight:300}
.acoes{margin-top:46px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.selo{margin-top:26px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--papel-45)}

/* capa: um objeto único, centralizado */
#capaBloco{margin:clamp(46px,9vw,90px) auto 0;max-width:28em;padding:0 var(--pad)}
.capa{aspect-ratio:2/3;border:1px solid var(--papel-20);display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:rgba(0,0,0,.12)}
.capa img{width:100%;height:100%;object-fit:cover}
.vazio{text-align:center;padding:26px;color:var(--papel-45);font-size:13px;line-height:1.8}
.vazio .rot{margin-bottom:10px}

/* epígrafe */
.epig{text-align:center;margin:clamp(50px,9vw,96px) auto 0;max-width:30em;padding:0 var(--pad)}
.epig p{font-style:italic;font-size:22px;line-height:1.55;margin:0 0 16px}
.epig cite{font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--papel-45)}

/* ---------- seções ---------- */
section{padding:clamp(64px,11vw,130px) 0}
.tit{font-weight:300;font-size:clamp(30px,5.4vw,52px);line-height:1.08;letter-spacing:-.03em;margin:16px 0 0}
.sub{color:var(--papel-70);margin:22px 0 0;font-size:19px;font-style:italic}
.regra{height:1px;background:var(--papel-20);max-width:52em;margin:0 auto}

p{margin:0 0 1.4em}
.chamada{font-size:clamp(26px,4vw,38px);line-height:1.2;letter-spacing:-.02em;margin:38px 0 30px;font-weight:300}

/* nota do narrador: recuo e itálico, sem caixa */
.nota{margin:44px 0;padding-left:26px;border-left:1px solid var(--papel-20)}
.nota p{font-style:italic;color:var(--papel-70);margin:12px 0 0;font-size:18px}

/* colofão: ficha técnica em linha corrida */
.colofao{margin-top:56px;padding-top:24px;border-top:1px solid var(--papel-20);
  font-size:13.5px;line-height:2;color:var(--papel-45);letter-spacing:.06em}

/* ---------- real ou invenção: lista, não cartões ---------- */
.itens{margin-top:46px;border-top:1px solid var(--papel-20)}
.item{display:block;width:100%;text-align:left;padding:28px 0;border-bottom:1px solid var(--papel-20)}
.item .n{font-size:12px;letter-spacing:.22em;color:var(--papel-45);display:block;margin-bottom:12px}
.item .af{font-size:21px;line-height:1.45;transition:opacity .3s}
.item .toca{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--papel-45);margin-top:14px;display:block}
.item .resp{display:none;margin-top:20px}
.item.on .resp{display:block;animation:ap .35s ease}
.item.on .toca{display:none}
.item.on .af{opacity:.5}
.ver{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  padding:5px 14px;border:1px solid var(--papel-45);margin-bottom:16px}
.ver.REAL{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.item .expl{font-style:italic;color:var(--papel-70);font-size:18px;margin:0}
@keyframes ap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- trecho ---------- */
.trecho{font-size:clamp(23px,3.4vw,32px);line-height:1.45;font-style:italic;
  font-weight:300;letter-spacing:-.015em;margin:40px 0 0}

/* ---------- compra ---------- */
.formatos{margin-top:42px}
.formato{display:flex;justify-content:space-between;align-items:baseline;gap:20px;width:100%;
  padding:26px 0;border-bottom:1px solid var(--papel-20);text-align:left}
.formato:first-child{border-top:1px solid var(--papel-20)}
.formato b{font-weight:400;font-size:24px}
.formato small{display:block;color:var(--papel-45);font-size:16px;font-style:italic;margin-top:4px}
.formato .seta{font-size:13px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--papel-70)}
.ku{margin-top:28px;font-size:14px;color:var(--papel-45);font-style:italic}

/* ---------- autor ---------- */
.foto{width:150px;aspect-ratio:4/5;border:1px solid var(--papel-20);overflow:hidden;margin:38px 0 34px;
  display:flex;align-items:center;justify-content:center}
.foto img{width:100%;height:100%;object-fit:cover}
.infl-titulo{margin-top:40px;margin-bottom:12px;font-family:'Fraunces',Georgia,serif;font-size:14px;font-weight:500;letter-spacing:.05em;color:var(--dourado);opacity:0.85}
.infl{margin-top:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--papel-45)}

/* ---------- blog: lista com filetes ---------- */
.lista{margin-top:46px;border-top:1px solid var(--papel-20)}
.entrada{display:block;width:100%;text-align:left;padding:30px 0;border-bottom:1px solid var(--papel-20);transition:opacity .2s}
.entrada:hover{opacity:.65}
.entrada .data{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--papel-45)}
.entrada h3{font-weight:300;font-size:clamp(23px,3.2vw,30px);line-height:1.2;letter-spacing:-.02em;margin:12px 0 10px}
.entrada .res{color:var(--papel-70);font-style:italic;font-size:17.5px;margin:0}

/* leitor */
#leitor{display:none;padding:clamp(40px,8vw,90px) 0 0}
#leitor.on{display:block}
#leitor h1{font-size:clamp(32px,6vw,54px);text-align:left;margin:16px 0 34px}
#lCapa img{margin:0 0 40px;border:1px solid var(--papel-20)}
.compart{margin-top:56px;padding-top:28px;border-top:1px solid var(--papel-20)}
.compart .linha{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sh{border:1px solid var(--papel-20);padding:10px 16px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;transition:border-color .2s}
.sh:hover{border-color:var(--papel)}

/* ---------- estante ---------- */
.estante{margin-top:46px;border-top:1px solid var(--papel-20)}
.livro{display:flex;gap:24px;align-items:flex-start;padding:34px 0;border-bottom:1px solid var(--papel-20)}
@media(max-width:560px){.livro{gap:18px}}
.livro .mini{width:96px;flex-shrink:0;aspect-ratio:2/3;border:1px solid var(--papel-20);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
@media(max-width:560px){.livro .mini{width:72px}}
.livro .mini img{width:100%;height:100%;object-fit:cover}
.livro .mini .vazio{font-size:10px;padding:8px;line-height:1.5}
.livro .dados{flex:1;min-width:0}
.livro h3{font-weight:400;font-size:clamp(21px,3vw,26px);line-height:1.2;letter-spacing:-.02em;margin:0}
.livro .cred{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--papel-45);margin-top:8px}
.livro .sin{font-size:17.5px;line-height:1.6;color:var(--papel-70);margin:16px 0 0}
.livro .opiniao{display:block;margin:20px 0 0;padding-left:20px;border-left:1px solid var(--papel-45);
  font-style:italic;font-size:18px}
.livro .maisinfo{margin-top:20px}
.avaliacao{display:inline-flex;align-items:center;gap:6px;margin-top:14px}
.avaliacao i{width:9px;height:9px;border-radius:50%;border:1px solid var(--papel-45);display:inline-block}
.avaliacao i.on{background:var(--papel);border-color:var(--papel)}
.avaliacao i.meia{background:linear-gradient(90deg,var(--papel) 50%,transparent 50%);border-color:var(--papel)}
.avaliacao .num{font-size:12px;letter-spacing:.16em;color:var(--papel-45);margin-left:6px}

/* ---------- newsletter ---------- */
.form{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.form input{flex:1;min-width:200px;background:none;border:none;border-bottom:1px solid var(--papel-45);
  color:var(--papel);font-family:var(--f);font-size:19px;padding:10px 2px}
.form input::placeholder{color:var(--papel-45)}
.form input:focus{outline:none;border-bottom-color:var(--papel)}
#newsMsg{margin-top:16px;font-size:14px;font-style:italic;color:var(--papel-70);min-height:20px}

/* ---------- rodapé ---------- */
footer{border-top:1px solid var(--papel-20);padding:50px 0 60px;text-align:center}
.redes{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.redes a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--papel-70)}
.redes a:hover{color:var(--papel)}
.legal{font-size:12px;letter-spacing:.1em;color:var(--papel-45);line-height:2}

/* ---------- wizard ---------- */
.fundo{position:fixed;inset:0;background:rgba(9,13,38,.94);z-index:100;display:none;
  align-items:center;justify-content:center;padding:22px}
.fundo.on{display:flex}
.caixa{background:var(--tinta);border:1px solid var(--papel-20);max-width:30em;width:100%;
  max-height:88vh;overflow:auto;padding:clamp(28px,5vw,46px);position:relative;animation:ap .3s ease}
.caixa h2{font-weight:300;font-size:34px;letter-spacing:-.025em;margin:14px 0 8px}
.x{position:absolute;top:16px;right:20px;font-size:26px;line-height:1;color:var(--papel-45);padding:6px}
.x:hover{color:var(--papel)}
.op{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;text-align:left;
  padding:22px 0;border-bottom:1px solid var(--papel-20);text-decoration:none;transition:opacity .2s}
.op:first-of-type{border-top:1px solid var(--papel-20)}
.op:hover{opacity:.65}
.op b{font-weight:400;font-size:21px}
.op small{display:block;color:var(--papel-45);font-style:italic;font-size:15px;margin-top:3px}
.op .s{font-size:12px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--papel-70)}
.voltar{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--papel-45);margin-top:28px;padding:0}
.voltar:hover{color:var(--papel)}
.indisp{font-style:italic;color:var(--papel-70);margin-top:20px;font-size:17px}

/* revelação */
.ap{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.ap.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .ap{opacity:1;transform:none}html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--papel);outline-offset:4px}
::selection{background:var(--papel);color:var(--tinta)}

/* Campo estelar */
#starfield{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0.4;pointer-events:none;background:radial-gradient(ellipse at center,#0a0e2e 0%,#000 100%)}

/* V.E.S.T.Í.G.I.O. - Observador fixo */
#vestigio-penguin{
  position:fixed;
  top:120px;
  left:50px;
  width:180px;
  height:auto;
  z-index:999;
  pointer-events:none;
  opacity:0.9;
  transition:transform 0.3s ease;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
#vestigio-penguin:hover{transform:scale(1.05)}

/* Responsivo - tablets */
@media (max-width:768px){
  #vestigio-penguin{width:140px;top:70px;left:20px;opacity:0.75}
}

/* Responsivo - celulares */
@media (max-width:480px){
  #vestigio-penguin{width:120px;top:65px;left:15px;opacity:0.75}
}

/* Responsivo - celulares pequenos */
@media (max-width:380px){
  #vestigio-penguin{width:90px;top:60px;left:10px;opacity:0.65}
}

/* Contador dos Três Invernos */
#quantum-clock{
  position:fixed;
  top:120px;
  right:50px;
  padding:18px 24px;
  background:rgba(10,14,46,0.9);
  border:2px solid var(--papel);
  border-radius:4px;
  z-index:1000;
  pointer-events:none;
  animation:temporal-drift 8s ease-in-out infinite;
  box-shadow:0 0 15px rgba(243,240,231,0.2),inset 0 0 8px rgba(243,240,231,0.05);
}
#quantum-clock .label{
  font-family:'Fraunces',Georgia,serif;
  font-size:10px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--dourado);
  opacity:0.8;
  display:block;
  margin-bottom:8px;
  text-align:center;
}
#quantum-clock .countdown{
  font-family:monospace;
  font-size:16px;
  color:var(--papel);
  text-align:center;
  line-height:1.4;
  letter-spacing:1px;
}
#quantum-clock .countdown .num{
  font-size:22px;
  font-weight:bold;
  color:var(--dourado);
  animation:descend-tone 60s linear infinite;
}
#quantum-clock .countdown .unit{
  font-size:10px;
  opacity:0.7;
  margin-left:2px;
}
/* Desalinhamento temporal — sombra chega atrasada */
@keyframes temporal-drift{
  0%,100%{
    filter:drop-shadow(2px 2px 0 rgba(243,240,231,0.15));
    transform:translateY(0px)
  }
  50%{
    filter:drop-shadow(3px 3px 0 rgba(217,135,58,0.2));
    transform:translateY(-5px)
  }
}
/* Tom que desce do frio para o âmbar-grave */
@keyframes descend-tone{
  0%{color:#F3F0E7}
  50%{color:#C8963E}
  100%{color:#d9873a}
}

/* Responsivo - tablets */
@media (max-width:768px){
  #quantum-clock{top:65px;right:15px;padding:10px 14px}
  #quantum-clock .label{font-size:7px;letter-spacing:1.5px;margin-bottom:4px}
  #quantum-clock .countdown{font-size:11px}
  #quantum-clock .countdown .num{font-size:15px}
  #quantum-clock .countdown .unit{font-size:8px}
}

/* Responsivo - celulares */
@media (max-width:480px){
  #quantum-clock{top:60px;right:10px;padding:8px 12px}
  #quantum-clock .label{font-size:6px;letter-spacing:1px;margin-bottom:3px}
  #quantum-clock .countdown{font-size:10px}
  #quantum-clock .countdown .num{font-size:13px}
  #quantum-clock .countdown .unit{font-size:7px}
}

/* Responsivo - celulares pequenos */
@media (max-width:380px){
  #quantum-clock{display:none}
}

/* Efeito quantum glitch sutil */
@keyframes quantum-flicker{0%,100%{opacity:1}50%{opacity:0.98}}
.quantum-element{animation:quantum-flicker 8s ease-in-out infinite}

/* Easter egg - contador oculto */
.vestigio-counter{position:fixed;bottom:8px;right:8px;font-size:9px;opacity:0.15;font-family:monospace;color:var(--dourado);pointer-events:none;user-select:none}