/* Ideia de layout: catálogo de editora. Cada livro é uma "página dupla" com cor própria,
   numeral gigante vazado ao fundo, capa inclinada que invade a seção anterior e ficha em mono. */
:root{
  --ink:#0c1420;
  --paper:#e7eaea;
  --gold:#f0b24a;
  --line:rgba(255,255,255,.22);
  --display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(18px,5vw,72px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
h1,h2,h3,p,dl,dd,figure,ol{margin:0}
ol{padding:0;list-style:none}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:min(100svh,920px);display:grid;grid-template-rows:auto 1fr auto;padding:26px var(--gutter) 34px;overflow:hidden;isolation:isolate}
.hero canvas,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero video{z-index:-2;opacity:0;transition:opacity 1.2s ease;filter:saturate(.75) contrast(1.08) brightness(.82)}
.hero video.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,13,22,.6) 0%,rgba(9,20,38,.18) 36%,rgba(7,13,22,.86) 100%),linear-gradient(0deg,rgba(13,27,46,.28),rgba(13,27,46,.28))}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.top .mark{opacity:.85}
.index{display:grid;gap:7px;text-align:right}
.index a{text-decoration:none;display:inline-flex;gap:12px;justify-content:flex-end;align-items:baseline;opacity:.8;transition:opacity .2s,transform .2s}
.index a:hover{opacity:1;transform:translateX(-6px)}
.index b{font-weight:500;color:var(--gold)}
.side{position:absolute;right:calc(var(--gutter) - 6px);bottom:150px;writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
.stage{align-self:end;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(16px,2.5vw,40px);min-width:0}
/* Quatro livros em pé, em traço grosso de ícone: cada livro se desenha ao carregar a página. */
.pilha{flex:0 1 360px;min-width:0;margin:0 clamp(28px,3.4vw,54px) .4vw 0;overflow:visible;pointer-events:none}
.pilha path{fill:none;stroke:#fff;stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;animation:traco 1.3s cubic-bezier(.65,0,.2,1) backwards;animation-delay:calc(var(--i)*.32s + .5s)}
.pilha .f{fill:rgba(9,16,28,.6)}
.pilha .b{stroke-width:1.4;animation-delay:calc(var(--i)*.32s + 1.2s)}
.pilha .chao{stroke-width:1.05;stroke-opacity:.5}
.pilha{opacity:.78}
.pilha text{font-family:var(--mono);fill:#fff;letter-spacing:.14em;text-anchor:middle;dominant-baseline:central;animation:surge .9s ease backwards;animation-delay:calc(var(--i)*.32s + 1.7s)}
@keyframes surge{from{opacity:0}}
@keyframes traco{from{stroke-dashoffset:1;fill-opacity:0}}
.name{text-shadow:0 2px 40px rgba(7,13,22,.45);font-family:var(--display);font-weight:400;line-height:.8;letter-spacing:-.035em;font-size:clamp(4.4rem,18.5vw,17rem);margin-left:-.04em}
.name i{display:block;font-weight:400;font-size:.52em;letter-spacing:-.01em;margin:0 0 .12em .08em;color:var(--gold)}
.hero-foot{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.hero-foot p{max-width:34ch;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.4;font-stretch:90%}
.down{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:10px;align-items:center}
.down span{display:inline-block;animation:drop 1.8s ease-in-out infinite}
@keyframes drop{50%{transform:translateY(6px)}}

/* ---------- MANIFESTO ---------- */
.manifesto{background:var(--paper);color:var(--ink);padding:clamp(70px,11vw,150px) var(--gutter) clamp(120px,15vw,200px);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,9fr);gap:32px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-top:.9em}
.manifesto h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.6vw,4.3rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance;max-width:19ch}
.manifesto h2 em{font-style:italic;color:#a85a12}

/* ---------- LIVROS ---------- */
.book{position:relative;background:var(--bg);color:var(--fg);padding:0 var(--gutter) clamp(90px,12vw,170px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,3vw,48px);align-items:start}
.num{position:absolute;top:-.12em;right:var(--gutter);font-family:var(--display);font-size:clamp(9rem,30vw,27rem);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--stroke);pointer-events:none;user-select:none;letter-spacing:-.04em}
.flip .num{right:auto;left:var(--gutter)}
.cover{grid-column:1 / span 4;position:relative;z-index:2;margin-top:clamp(-110px,-8vw,-50px);aspect-ratio:2/3;background:var(--ac);color:var(--bg);display:grid;place-items:center;transform:rotate(-3deg);box-shadow:0 30px 60px -18px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.12) inset;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cover:hover{transform:rotate(0) scale(1.02)}
.cover span{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,3vw,2.6rem);line-height:1;text-align:center;padding:14%}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flip .cover{grid-column:9 / span 4;grid-row:1;transform:rotate(3deg)}
.flip .cover:hover{transform:rotate(0) scale(1.02)}
.body{grid-column:6 / span 6;position:relative;z-index:1;padding-top:clamp(60px,9vw,130px)}
.flip .body{grid-column:1 / span 7;grid-row:1}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);display:flex;gap:14px;align-items:center}
.kicker::before{content:"";width:38px;height:1px;background:currentColor}
.book h2{font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,8.2vw,7.6rem);line-height:.88;letter-spacing:-.03em;margin:.22em 0 .2em -.03em;text-wrap:balance}
.book h2 em{font-style:italic;color:var(--ac)}
.sub{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.25;margin-bottom:1.3em;max-width:30ch}
.syn{max-width:54ch;color:var(--mut)}
.ficha{margin:2em 0 2.2em;border-top:1px solid var(--stroke);font-family:var(--mono);font-size:13px;max-width:440px}
.ficha div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--stroke)}
.ficha dt{opacity:.6;text-transform:uppercase;letter-spacing:.1em;font-size:11px;padding-top:2px}
.ficha dd{text-align:right}
.buy{display:flex;flex-wrap:wrap;gap:12px}
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:15px 22px;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-stretch:88%;text-decoration:none;border:1px solid var(--ac);overflow:hidden;transition:color .3s,transform .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:-1}
.btn{isolation:isolate}
.btn:hover{color:var(--bg);transform:translateY(-2px)}
.btn:hover::before{transform:none}
.btn small{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;opacity:.7}
.btn.fill{background:var(--ac);color:var(--bg)}
.btn i{font-style:normal;transition:transform .3s}
.btn:hover i{transform:translate(3px,-3px)}

/* ---------- AUTOR ---------- */
.autor{background:var(--paper);color:var(--ink);padding:clamp(80px,11vw,150px) var(--gutter);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:start}
.retrato{position:relative;transform:rotate(-2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.retrato:hover{transform:rotate(0)}
.retrato .foto{aspect-ratio:4/5;background:#c9a56a;overflow:hidden;box-shadow:0 26px 50px -22px rgba(12,20,32,.55)}
.retrato img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply}
.retrato figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.autor h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.autor h2 em{font-style:italic;color:#a85a12}
.autor .txt{display:grid;gap:1.1em;align-content:start;max-width:46ch;padding-top:1.6em}

/* ---------- ÍNDICE DE COMPRA ---------- */
.onde{background:var(--ink);padding:clamp(70px,9vw,120px) var(--gutter) 40px}
.onde .label{color:var(--gold);padding:0 0 26px}
.onde li{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto auto auto;gap:18px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line)}
.onde li:last-child{border-bottom:1px solid var(--line)}
.onde .n{font-family:var(--mono);font-size:12px;color:var(--gold)}
.onde .t{font-family:var(--display);font-size:clamp(1.5rem,3.6vw,3rem);line-height:1;letter-spacing:-.02em}
.onde a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s,color .2s;white-space:nowrap}
.onde a:hover{color:var(--gold);border-color:var(--gold)}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:46px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}

/* ---------- RESPONSIVO ---------- */
@media (max-width:860px){
  .manifesto,.autor{grid-template-columns:1fr;gap:18px}
  .label{padding-top:0}
  .side{display:none}
  .retrato{width:min(62%,280px);margin:10px 0 14px}
  .book{display:block;padding-bottom:90px}
  .cover,.flip .cover{width:min(62%,280px);margin:-70px 0 0}
  .flip .cover{margin-left:auto}
  .body,.flip .body{padding-top:44px}
  .num{font-size:min(27vw,11rem);top:34px}
  .onde li{grid-template-columns:2.2rem minmax(0,1fr);row-gap:8px}
  .onde li a{grid-column:2}
}
@media (max-width:520px){
  .index{display:none}
  .btn{flex:1 1 100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .down span{animation:none}
  *{transition-duration:0s !important}
}
@media (max-width:860px){
  .stage{flex-direction:column-reverse;align-items:stretch;gap:22px}
  .pilha{flex:none;width:min(44vw,220px);align-self:flex-end;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .pilha path,.pilha text{animation:none}
}