/* Coleção Voz Ativa: papel, tinta e as quatro cores dos volumes. Visual único (claro), como os livros. */
:root{
  --paper:#F5F2EA; --paper2:#ECE7DA; --white:#FFFFFF; --ink:#141414; --ink2:#3A3833; --muted:#6B675E; --line:#DAD3C3;
  --y6:#2E8A57; --y6d:#1D5E3B; --y7:#1F5FA8; --y7d:#173F72; --y8:#B5263C; --y8d:#7E1426; --y9:#D08A00; --y9d:#7A4F00;
  --amber:#7A4F00;
  --f-slab:"Zilla Slab",Rockwell,Georgia,serif; --f-read:"Literata",Georgia,serif; --f-ui:"Work Sans",system-ui,sans-serif; --f-ask:"Cormorant Garamond",Garamond,Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-read);font-size:18px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--f-slab);font-weight:700;line-height:1.08;margin:0;text-wrap:balance}
h2{font-size:clamp(32px,4.4vw,52px)}
h3{font-size:24px}
p{margin:0}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:96px}
.kicker{font-family:var(--f-slab);font-weight:600;font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink2);max-width:62ch;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-ui);font-weight:600;font-size:16px;padding:14px 22px;border-radius:3px;background:var(--ink);color:var(--paper);text-decoration:none;border:2px solid var(--ink);cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{font-size:14px;padding:9px 14px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* topo */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:12px 24px;background:rgba(245,242,234,.94);backdrop-filter:blur(8px);border-bottom:3px solid var(--ink)}
.brand{font-family:var(--f-slab);font-weight:700;font-size:26px;line-height:1;text-decoration:none;color:var(--ink)}
.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.top nav{display:flex;gap:22px;margin-left:auto;font-family:var(--f-ui);font-size:15px}
.top nav a{text-decoration:none;color:var(--ink2)}
.top nav a:hover{color:var(--ink)}
@media (max-width:900px){.top nav{display:none}.top .btn{margin-left:auto}}

/* abertura */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);height:clamp(560px,calc(100vh - 70px),900px)}
.hero-art{position:relative;overflow:hidden;background:#2b2116}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 14%}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 70%,var(--paper))}
.credit{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--f-read);font-size:12px;color:#fff;background:rgba(20,20,20,.5);padding:3px 9px;border-radius:2px}
.hero-text{display:flex;flex-direction:column;justify-content:center;padding:64px clamp(20px,5vw,80px)}
.hero h1{font-size:clamp(40px,5.4vw,72px)}
.hero h1 em{font-style:normal;color:var(--amber)}
@media (max-width:860px){.hero{grid-template-columns:1fr;height:auto}.hero-art{height:56vh}.hero-art::after{background:linear-gradient(to bottom,transparent 60%,var(--paper))}.hero-text{padding-block:28px 40px}}
.shelf{max-width:1180px;margin:24px auto 0;padding-inline:20px}

/* faixas */
.band{background:var(--paper2);border-block:1px solid var(--line)}
.band.dark{background:#1B1A17;color:#F2EEE4;border:0}
.band.dark .lead{color:#CFC8B8}
.band.dark .kicker{color:#E8B65A}

/* anos */
.years{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:52px}
.year{display:flex;flex-direction:column;gap:10px}
.year img{width:100%;height:auto;margin-bottom:8px;box-shadow:0 2px 0 rgba(0,0,0,.06),0 22px 34px -20px rgba(40,30,10,.55)}
.year .tag{font-family:var(--f-slab);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.year h3{font-family:var(--f-ask);font-style:italic;font-weight:700;font-size:34px;color:var(--c)}
.year p{font-size:16.5px;line-height:1.5}
.y6{--c:var(--y6d)}.y7{--c:var(--y7)}.y8{--c:var(--y8)}.y9{--c:var(--y9d)}
@media (max-width:1000px){.years{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.years{grid-template-columns:1fr}}

/* capítulo */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:44px;background:var(--line);border:1px solid var(--line)}
.steps div{background:var(--paper);padding:22px 24px;display:flex;flex-direction:column;gap:6px;counter-increment:step}
.steps{counter-reset:step}
.steps b{font-family:var(--f-slab);font-size:21px}
.steps b::before{content:counter(step) " ";color:var(--amber)}
.steps span{font-size:16px;color:var(--ink2);line-height:1.5}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.pages{display:grid;gap:56px;margin-top:56px}
.pages figure{margin:0}
.pages img{width:100%;height:auto;box-shadow:0 2px 0 rgba(0,0,0,.06),0 28px 50px -26px rgba(40,30,10,.55)}
.pages figcaption{font-family:var(--f-ui);font-size:14px;color:var(--muted);margin-top:12px}


/* histórias */
.names{list-style:none;padding:0;margin:40px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.names li{font-family:var(--f-slab);font-weight:600;font-size:18px;border:1px solid #4a463d;padding:8px 14px;border-radius:2px}
blockquote{margin:44px 0 0;font-family:var(--f-ask);font-style:italic;font-weight:600;font-size:clamp(24px,2.6vw,32px);line-height:1.3;max-width:34ch}
blockquote cite{display:block;margin-top:12px;font-family:var(--f-slab);font-style:normal;font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;opacity:.8}

/* edições */
.eds{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.eds article{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--ink);padding:28px;display:flex;flex-direction:column;gap:12px}
.eds .big{font-family:var(--f-slab);font-weight:700;font-size:40px;line-height:1}
.eds .big span{font-size:20px;color:var(--muted)}
.eds .manual{grid-column:1/-1;flex-direction:row;gap:40px;align-items:center;padding:32px 40px;border-top-color:var(--y9)}
.eds .manual img{width:190px;flex:none;box-shadow:0 22px 40px -22px rgba(0,0,0,.5)}
.eds ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:17px}
@media (max-width:860px){.eds{grid-template-columns:1fr}.eds .manual{flex-direction:column;align-items:flex-start}}

/* plataforma */
.plat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.feats{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:18px}
.feats b{display:block;font-family:var(--f-slab);font-size:22px}
.feats span{color:var(--ink2);font-size:17px}
.devices{position:relative;aspect-ratio:1.25;max-width:100%}
.laptop{position:absolute;left:12%;top:4%;width:80%}
.laptop .screen{background:#1C1D1F;border-radius:16px 16px 0 0;padding:12px 12px 16px}
.laptop .screen img{border-radius:3px}
.laptop .base{height:16px;margin:0 -7%;background:linear-gradient(#D9D9DB,#A9AAAD);border-radius:0 0 20px 20px;box-shadow:0 20px 26px -12px rgba(0,0,0,.4)}
.tablet{position:absolute;left:0;bottom:6%;width:46%;background:#222326;border-radius:22px;padding:12px;box-shadow:0 24px 34px -16px rgba(0,0,0,.5)}
.tablet img{border-radius:6px}
.phone{position:absolute;right:0;bottom:6%;width:22%;background:#16171A;border-radius:28px;padding:7px;box-shadow:0 24px 34px -14px rgba(0,0,0,.5)}
.phone img{border-radius:22px}
@media (max-width:900px){.plat{grid-template-columns:1fr}}

/* autor */
.author{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.author > img{height:auto;aspect-ratio:1/1;object-fit:cover;align-self:center;border-radius:50%;box-shadow:0 0 0 10px var(--paper),0 0 0 13px var(--ink);max-width:420px;width:100%;justify-self:center}
.author blockquote{color:var(--amber)}
.pub{display:flex;align-items:center;gap:10px;margin-top:30px;font-family:var(--f-slab);font-size:18px}
.pub img{filter:brightness(0)}
@media (max-width:860px){.author{grid-template-columns:1fr;text-align:left}}

/* contato */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px}
@media (max-width:900px){.two{grid-template-columns:1fr}}
form{display:flex;flex-direction:column;gap:14px;background:var(--white);border:1px solid var(--line);padding:28px}
form .row{display:flex;gap:14px;flex-wrap:wrap}
form .row > label{flex:1 1 200px}
form .row > label.uf{flex:0 0 90px}
label{display:flex;flex-direction:column;gap:6px;font-family:var(--f-ui);font-size:14px;font-weight:600}
label small{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;font-family:var(--f-ui);font-weight:400;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
label.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400}
label.check input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px}
.msg{font-family:var(--f-ui);font-size:15px;padding:10px 12px;border-radius:3px}
.msg.ok{background:#E3F1E8;color:#1D5E3B}.msg.err{background:#FBE9E7;color:#9A2219}

/* rodapé */
footer{background:var(--ink);color:#E6E1D6}
.foot{padding-block:48px;display:flex;flex-direction:column;gap:12px}
.foot .brand{color:#fff}.foot .brand small{color:#B9B2A2}
.foot .gl{display:inline-flex;align-items:center;gap:6px}
.foot .gl img{filter:invert(1)}
.foot .small{font-size:13px;color:#A9A291;max-width:80ch}

@media (max-width:520px){.top{padding:10px 16px;gap:12px}.top .btn.small{font-size:13px;padding:8px 10px;white-space:nowrap}.brand{font-size:22px}}