/* ==========================================================
   KIT TÉCNICO PRO — design system
   ========================================================== */
:root{
  /* cor */
  --carvao:#101820; --tecnico:#183247; --gelo:#F4F6F8; --laranja:#E87932; --laranja-h:#F08A47;
  --cinza:#687583; --cinza-txt:#4F5B67; /* cinza técnico escurecido p/ texto sobre claro (contraste 4.5+) */
  --branco:#fff; --linha:#DDE3E9; --linha-esc:#2A4358; --suave-esc:#B9C6D2; /* texto secundário sobre escuro */
  /* tipografia */
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --fs-0:.8125rem; --fs-1:.9375rem; --fs-2:1rem; --fs-3:1.125rem;
  --fs-h3:clamp(1.125rem,1.4vw + .8rem,1.375rem);
  --fs-h2:clamp(1.875rem,3vw + 1rem,2.75rem);
  --fs-h1:clamp(2.75rem,7vw + .5rem,5.25rem);
  --fs-price:clamp(2.75rem,5vw + 1rem,4rem);
  /* espaço, raio, sombra */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(16,24,32,.06),0 1px 3px rgba(16,24,32,.06);
  --sh-2:0 10px 30px -12px rgba(16,24,32,.28);
  --foco:0 0 0 3px var(--branco),0 0 0 6px var(--tecnico);
  --max:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gelo);color:var(--carvao);font:400 var(--fs-2)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);line-height:1.04;letter-spacing:.005em}
h1{font-size:var(--fs-h1);font-weight:700;text-transform:uppercase}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:600}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left))}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--laranja);color:var(--carvao);padding:10px 16px;border-radius:var(--r-sm);font-weight:700;z-index:50}
.skip:focus{top:8px}
:focus-visible{outline:none;box-shadow:var(--foco);border-radius:var(--r-sm)}
.escuro :focus-visible,header.top :focus-visible,footer :focus-visible{box-shadow:0 0 0 3px var(--carvao),0 0 0 6px var(--branco)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.5rem;border-radius:var(--r-md);
  border:2px solid transparent;font:700 var(--fs-2)/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn-primary{background:var(--laranja);color:var(--carvao)}
.btn-primary:hover{background:var(--laranja-h)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:transparent;color:inherit;border-color:currentColor}
.btn-secondary:hover{background:rgba(255,255,255,.08)}
.btn-text{min-height:44px;padding:0 .25rem;background:none;color:inherit;text-decoration:underline;text-underline-offset:4px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;pointer-events:none}
.btn-lg{min-height:56px;padding:0 2rem;font-size:var(--fs-3)}
.btn-block{width:100%}

/* ---------- cabeçalho ---------- */
header.top{position:sticky;top:0;z-index:30;background:var(--carvao);color:var(--branco);border-bottom:1px solid var(--linha-esc)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--s2)}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.logo b{font:700 1.375rem/1 var(--display);letter-spacing:.04em}
.pro{background:var(--laranja);color:var(--carvao);font:800 .6875rem/1 var(--sans);letter-spacing:.1em;padding:4px 6px;border-radius:4px}
.nav{display:flex;align-items:center;gap:var(--s3)}
.nav a:not(.btn){color:var(--suave-esc);text-decoration:none;font-size:var(--fs-1);font-weight:500;padding:.5rem 0;border-bottom:2px solid transparent}
.nav a:not(.btn):hover{color:var(--branco);border-color:var(--laranja)}
.nav .btn{min-height:40px;padding:0 1.1rem;font-size:var(--fs-1)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--linha-esc);background:transparent;color:var(--branco);border-radius:var(--r-md);place-items:center;cursor:pointer}
.menu-btn .ico{width:24px;height:24px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .bars{display:none}
@media(max-width:760px){
  .menu-btn{display:grid}
  .nav{position:absolute;left:0;right:0;top:64px;background:var(--carvao);border-bottom:1px solid var(--linha-esc);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 16px 20px;display:none}
  .nav.aberto{display:flex}
  .nav a:not(.btn){padding:14px 4px;border-bottom:1px solid var(--linha-esc);font-size:var(--fs-3)}
  .nav .btn{margin-top:16px;min-height:52px}
}

/* ---------- hero ---------- */
.hero{background:var(--carvao);color:var(--branco);position:relative;overflow:hidden;padding:var(--s5) 0 var(--s6)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px;mask-image:linear-gradient(120deg,transparent 10%,#000 60%,transparent 100%);-webkit-mask-image:linear-gradient(120deg,transparent 10%,#000 60%,transparent 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s4);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font:600 var(--fs-0)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--suave-esc);margin-bottom:var(--s3)}
.eyebrow::before{content:"";width:32px;height:3px;background:var(--laranja)}
.hero h1 em{font-style:normal;color:var(--laranja)}
.hero .lead{font-size:var(--fs-3);line-height:1.6;color:var(--suave-esc);max-width:34rem;margin:var(--s3) 0 var(--s4)}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.hero .btn-secondary{color:var(--branco)}
.folhas{position:relative;height:clamp(300px,38vw,440px)}
.folha{position:absolute;width:56%;aspect-ratio:3/4;background:var(--branco);border-radius:var(--r-md);box-shadow:var(--sh-2);color:var(--carvao);overflow:hidden}
@media(max-width:900px){
  .hero{padding:var(--s4) 0 var(--s5)}
  .hero .wrap{grid-template-columns:1fr}
  .folhas{height:300px;max-width:420px;margin-inline:auto;width:100%}
}
@media(max-width:480px){.hero .cta .btn{width:100%}}

/* capa de documento (hero e vitrine) */
.capa{display:flex;flex-direction:column;height:100%;padding:12% 11% 9%;position:relative;background:var(--branco)}
.capa::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--laranja)}
.capa .cod{font:700 .625rem/1 var(--sans);letter-spacing:.14em;color:var(--cinza-txt)}
.capa .tit{font:700 clamp(1rem,1.6vw + .5rem,1.5rem)/1.02 var(--display);text-transform:uppercase;margin:10% 0 8%;color:var(--tecnico)}
.capa .ln{height:4px;border-radius:2px;background:var(--linha);margin-bottom:6%}
.capa .ln:nth-of-type(2){width:82%}.capa .ln:nth-of-type(3){width:64%}
.capa .rod{margin-top:auto;display:flex;align-items:center;gap:6px;font:700 .5625rem/1 var(--sans);letter-spacing:.12em;color:var(--cinza-txt)}
.capa .rod i{width:14px;height:14px;border-radius:3px;background:var(--tecnico);position:relative;display:block}
.capa .rod i::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 6px 6px 0;border-color:transparent var(--laranja) transparent transparent}
.capa.esc{background:var(--tecnico);color:var(--branco)}
.capa.esc .tit{color:var(--branco)}.capa.esc .cod,.capa.esc .rod{color:var(--suave-esc)}.capa.esc .ln{background:var(--linha-esc)}

/* ---------- seções ---------- */
section{padding:var(--s6) 0}
.alt{background:var(--branco);border-block:1px solid var(--linha)}
.cab{max-width:44rem;margin-bottom:var(--s4)}
.cab .eyebrow{color:var(--cinza-txt);margin-bottom:var(--s2)}
.cab .sub{margin-top:var(--s2);color:var(--cinza-txt);font-size:var(--fs-3)}
@media(max-width:640px){section{padding:var(--s5) 0}}

/* ---------- benefícios ---------- */
.beneficios{display:grid;gap:var(--s2);grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-lg);padding:var(--s3);box-shadow:var(--sh-1)}
.ben{display:flex;flex-direction:column;gap:var(--s2)}
.ben .topo{display:flex;align-items:center;justify-content:space-between}
.ben .icb{width:48px;height:48px;border-radius:var(--r-md);background:var(--carvao);color:var(--laranja);display:grid;place-items:center}
.ben .icb .ico{width:24px;height:24px}
.ben .chip{font:700 var(--fs-0)/1 var(--sans);letter-spacing:.06em;color:var(--tecnico);background:var(--gelo);border:1px solid var(--linha);padding:6px 9px;border-radius:999px}
.ben p{color:var(--cinza-txt);font-size:var(--fs-1)}
@media(max-width:960px){.beneficios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.beneficios{grid-template-columns:1fr}}

/* ---------- vitrine ---------- */
.produtos{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.prod{position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;display:flex;flex-direction:column}
.prod .colecao{background:var(--carvao);padding:var(--s3);position:relative}
.prod .colecao::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px}
.colecao .rotulo{position:relative;color:var(--suave-esc);font:600 var(--fs-0)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s2)}
.capas{position:relative;display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;margin:0;list-style:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.capas li{flex:0 0 118px;aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);scroll-snap-align:start}
.prod .corpo{padding:var(--s3);display:grid;gap:var(--s3);align-content:start}
.prod .etiqueta{display:inline-flex;align-items:center;gap:.4rem;background:var(--laranja);color:var(--carvao);font:800 var(--fs-0)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:var(--r-sm);justify-self:start}
.prod .resumo{color:var(--cinza-txt);font-size:var(--fs-3);margin-top:var(--s1)}
.prod h3{font-size:clamp(1.75rem,3vw + .8rem,2.5rem);text-transform:uppercase;margin-top:var(--s1)}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:10px 24px;grid-template-columns:1fr}
.lista li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-1);line-height:1.45}
.lista .ico{width:20px;height:20px;margin-top:1px;color:var(--carvao);background:var(--laranja);border-radius:50%;padding:3px;stroke-width:3}
.compra{background:var(--gelo);border:1px solid var(--linha);border-radius:var(--r-md);padding:var(--s3);display:grid;gap:var(--s2)}
.preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem}
.preco s{color:var(--cinza-txt);font-size:var(--fs-3)}
.preco strong{font:700 var(--fs-price)/1 var(--display);color:var(--carvao)}
.preco small{flex-basis:100%;color:var(--cinza-txt);font-size:var(--fs-1)}
/* um único produto: duas colunas no desktop */
.produtos:has(.prod:only-child){grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .prod:only-child{flex-direction:row}
  .prod:only-child .colecao{flex:0 0 38%;display:flex;flex-direction:column;justify-content:center}
  .prod:only-child .capas{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .prod:only-child .capas li{flex:initial}
  .prod:only-child .corpo{flex:1;padding:var(--s4)}
  .prod:only-child .lista{grid-template-columns:1fr 1fr}
}

/* ---------- como funciona ---------- */
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);counter-reset:p}
.passo{position:relative;padding:var(--s3);background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-lg);box-shadow:var(--sh-1);counter-increment:p}
.passo .n{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.passo .n::before{content:"0" counter(p);font:700 2rem/1 var(--display);color:var(--cinza-txt)}
.passo .n .ico{width:28px;height:28px;color:var(--tecnico)}
.passo p{color:var(--cinza-txt);font-size:var(--fs-1);margin-top:6px}
.passo:not(:last-child)::after{content:"";position:absolute;top:50%;right:-17px;width:18px;height:2px;background:var(--laranja)}
@media(max-width:960px){.passos{grid-template-columns:repeat(2,minmax(0,1fr))}.passo:not(:last-child)::after{display:none}}
@media(max-width:520px){
  .passos{grid-template-columns:1fr;gap:0;border-left:2px solid var(--laranja);margin-left:8px}
  .passo{border-radius:0 var(--r-lg) var(--r-lg) 0;margin-bottom:var(--s2);border-left:0}
}

/* ---------- guia ---------- */
.guia-box{max-width:52rem}
.abas{display:inline-flex;gap:4px;padding:4px;background:var(--gelo);border:1px solid var(--linha);border-radius:var(--r-md);margin-bottom:var(--s3)}
.aba{min-height:44px;padding:0 1.5rem;border:0;border-radius:var(--r-sm);background:transparent;color:var(--cinza-txt);font:700 var(--fs-2)/1 var(--sans);cursor:pointer}
.aba:hover{color:var(--carvao)}
.aba[aria-selected="true"]{background:var(--carvao);color:var(--branco);box-shadow:var(--sh-1)}
.painel[hidden]{display:none}
.steps{list-style:none;counter-reset:s;margin:0 0 var(--s3);padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-md);padding:18px 20px 18px 68px;line-height:1.65;box-shadow:var(--sh-1)}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:34px;height:34px;border-radius:50%;background:var(--carvao);color:var(--branco);display:grid;place-items:center;font:700 1.125rem/1 var(--display)}
.nota{display:flex;gap:12px;background:#FFF3EA;border:1px solid #F3C9A8;border-radius:var(--r-md);padding:var(--s2) var(--s3);line-height:1.65}
.nota .ico{color:#B3511A;margin-top:3px}
.legenda{margin-top:var(--s3);padding:var(--s2) var(--s3);background:var(--carvao);color:var(--suave-esc);border-radius:var(--r-md);font-size:var(--fs-1);line-height:1.65}
.legenda b{color:var(--branco)}
@media(max-width:520px){
  .aba{padding:0 1rem;flex:1}.abas{display:flex}
  .steps li{padding:16px 16px 16px 58px}.steps li::before{left:14px;width:30px;height:30px}
}

/* ---------- FAQ ---------- */
.faq{max-width:52rem;display:grid;gap:10px}
details{background:var(--gelo);border:1px solid var(--linha);border-radius:var(--r-md)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:56px;padding:12px 20px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary .ico{transition:transform .2s;color:var(--tecnico)}
details[open] summary .ico{transform:rotate(180deg)}
details[open] summary{border-bottom:1px solid var(--linha)}
details p{padding:16px 20px 20px;color:var(--cinza-txt);line-height:1.7}
details:hover{border-color:var(--cinza)}

/* ---------- rodapé ---------- */
footer{background:var(--carvao);color:var(--suave-esc);padding:var(--s5) 0;font-size:var(--fs-1)}
footer .grid{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:flex-start}
footer a{color:var(--branco);text-underline-offset:3px}
footer .aviso{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--linha-esc);max-width:46rem;line-height:1.65}
footer .copy{margin-top:var(--s2);font-size:var(--fs-0)}


@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- logo oficial (PNG com texto escuro: vive sobre fundo claro) ---------- */
.logo img{display:block;height:40px;width:auto}
header.top{background:var(--branco);color:var(--carvao);border-bottom:1px solid var(--linha)}
header.top .wrap{height:68px}
.nav a:not(.btn){color:var(--cinza-txt)}
.nav a:not(.btn):hover{color:var(--carvao)}
.menu-btn{border-color:var(--linha);color:var(--carvao)}
header.top :focus-visible{box-shadow:var(--foco)}
@media(max-width:760px){
  .nav{top:68px;background:var(--branco);border-bottom:1px solid var(--linha)}
  .nav a:not(.btn){border-bottom-color:var(--linha)}
  .logo img{height:34px}
}
footer .logo{background:var(--branco);padding:10px 16px;border-radius:var(--r-md)}
footer .logo img{height:36px}

/* ---------- vitrine: layout "colecao + compra" ---------- */
.prod{border-color:var(--linha-esc);background:var(--carvao)}
.prod .colecao{background:linear-gradient(160deg,#142636 0%,var(--carvao) 70%)}
.colecao .rotulo{display:flex;align-items:center;gap:.75rem;font-size:var(--fs-1);color:var(--branco);padding-bottom:var(--s2);margin-bottom:var(--s3);position:relative}
.colecao .rotulo .ico{width:28px;height:28px;color:var(--laranja)}
.colecao .rotulo::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:2px;background:var(--laranja)}
.capas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:12px;padding:0}
.capas li{flex:initial;box-shadow:0 8px 20px -8px rgba(0,0,0,.7)}
.capas li .capa{padding:12% 9% 8%}
.capas .capa .tit{font-size:clamp(.8rem,1vw + .45rem,1.2rem);margin:8% 0 6%}
.capas .capa .cod{font-size:.5rem}
.capas .capa .ln{display:none}
.prod .corpo{background:linear-gradient(180deg,var(--branco),var(--gelo));position:relative;overflow:hidden}
.prod .corpo::before{content:"";position:absolute;top:0;right:0;width:34%;height:130px;background:linear-gradient(115deg,transparent 40%,rgba(232,121,50,.18) 41%,rgba(232,121,50,.18) 43%,transparent 44%),linear-gradient(135deg,transparent 50%,var(--carvao) 50.2%);opacity:.06;pointer-events:none}
.prod .corpo>*{position:relative}
.prod h3::after{content:"";display:block;width:64px;height:3px;background:var(--laranja);margin-top:14px}
.prod .lista .ico{background:var(--laranja);color:var(--carvao)}
.compra{background:var(--carvao);border:1px solid var(--linha-esc);box-shadow:0 14px 30px -14px rgba(0,0,0,.5);color:var(--branco)}
.compra .preco{position:relative;padding-left:20px}
.compra .preco::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--laranja);border-radius:2px}
.compra .preco strong{color:var(--branco)}
.compra .preco small,.compra .preco s{color:var(--suave-esc)}
.btn-comprar{width:100%;background:linear-gradient(180deg,#F58A3F,var(--laranja));box-shadow:0 6px 18px -6px rgba(232,121,50,.7)}
.btn-comprar .ico{width:22px;height:22px}
.compra :focus-visible{box-shadow:0 0 0 3px var(--carvao),0 0 0 6px var(--branco)}
@media(min-width:900px){
  .compra{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s4);padding:var(--s3) var(--s4)}
  .btn-comprar{justify-self:end;max-width:340px}
}
@media(min-width:900px){.prod:only-child .colecao{flex-basis:36%;justify-content:flex-start}}
.compra .preco{display:grid;gap:2px;justify-items:start}
.compra .preco s{font-size:var(--fs-1)}
@media(min-width:900px){.compra{grid-template-columns:auto minmax(0,1fr);gap:var(--s3);padding:var(--s3)}.btn-comprar{max-width:none;white-space:nowrap}}

/* foto do canto (decorativa): capacete e plantas, recorte diagonal */
.prod .corpo::before{opacity:1;width:min(46%,340px);height:190px;right:0;top:0;
  background:linear-gradient(90deg,var(--branco) 0%,rgba(255,255,255,0) 45%),url("capacete.webp") 70% 40%/cover no-repeat;
  clip-path:polygon(34% 0,100% 0,100% 100%,0 62%);}
.prod .corpo::after{content:"";position:absolute;top:0;right:0;width:min(46%,340px);height:190px;pointer-events:none;
  background:linear-gradient(115deg,transparent 33.2%,var(--laranja) 33.4%,var(--laranja) 34.4%,transparent 34.6%);clip-path:polygon(0 0,100% 0,100% 100%,0 62%)}
.prod .corpo>:first-child{padding-right:0}
@media(max-width:899px){.prod .corpo::before,.prod .corpo::after{height:110px;width:55%}}
@media(min-width:900px){.prod .corpo>:first-child{max-width:62%}}

/* ================= HERO (visual de referência) ================= */
header.top .wrap{height:76px}
.logo img{height:46px}
.nav{gap:2rem}
.nav a:not(.btn){font-size:1.0625rem;color:var(--carvao)}
.nav .btn{min-height:56px;padding:0 2rem;font-size:1.0625rem;border-radius:var(--r-md)}
@media(max-width:760px){header.top .wrap{height:68px}.logo img{height:34px}.nav{top:68px}.nav .btn{min-height:52px}}

.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,7rem);
  background:radial-gradient(ellipse 60% 70% at 78% 55%,#1E3A55 0%,rgba(24,50,71,0) 70%),linear-gradient(160deg,#0B141C 0%,#101F2E 55%,#0A121A 100%)}
.hero::before{opacity:.8;mask-image:none;-webkit-mask-image:none;background-size:40px 40px;
  background-image:linear-gradient(rgba(120,160,200,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,200,.05) 1px,transparent 1px)}
.engrenagem{position:absolute;right:-60px;top:40px;width:min(36vw,420px);color:rgba(120,160,200,.09);pointer-events:none}
.raio{position:absolute;pointer-events:none;height:2px;background:linear-gradient(90deg,transparent,var(--laranja) 40%,#FFB070 60%,transparent);box-shadow:0 0 14px 1px rgba(232,121,50,.55);transform-origin:left center}
.r1{width:340px;right:12%;top:-10px;transform:rotate(-38deg) translateX(40px);opacity:.8}
.r2{width:520px;left:-40px;bottom:90px;transform:rotate(32deg);opacity:.9}
.r3{width:300px;right:-40px;bottom:30%;transform:rotate(-40deg);opacity:.7}
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s3)}
.hero .eyebrow{font-size:clamp(.75rem,1vw + .4rem,1.0625rem);letter-spacing:.2em;font-weight:400;color:var(--branco)}
.hero .eyebrow::before{width:48px;height:3px}
.hero h1{font-size:clamp(3.25rem,9vw,7.25rem);line-height:.98;text-shadow:0 6px 28px rgba(0,0,0,.45)}
.hero h1 em{text-shadow:0 6px 28px rgba(232,121,50,.25)}
.hero .lead{color:var(--branco);opacity:.95;font-size:clamp(1.0625rem,.8vw + .8rem,1.375rem);max-width:36rem}
.hero .cta{gap:var(--s2)}
.hero .btn-lg{min-height:60px;padding:0 2.25rem;font-size:1.25rem;border-radius:var(--r-md)}
.hero .btn .ico{width:26px;height:26px;stroke-width:2}
.hero .btn-primary{background:linear-gradient(180deg,#F58A3F,var(--laranja));box-shadow:0 10px 28px -8px rgba(232,121,50,.7)}
.hero .btn-secondary{background:rgba(10,18,26,.55);border-color:var(--branco);color:var(--branco)}
.hero .btn-secondary:hover{background:rgba(255,255,255,.12)}

.folhas{height:clamp(340px,44vw,600px);margin-right:-4%}
.folha{border-radius:6px;width:50%;box-shadow:0 30px 50px -18px rgba(0,0,0,.75);border-bottom:5px solid #CBD3DB}
.folha::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:linear-gradient(90deg,#fff,#D8DEE4)}
.folha:nth-of-type(1){left:2%;top:12%;transform:rotate(-8deg) perspective(900px) rotateY(10deg);background:var(--branco)}
.folha:nth-of-type(2){right:0;top:0;width:48%;transform:rotate(4deg) perspective(900px) rotateY(-8deg);background:var(--tecnico);border-bottom-color:#0C1E2D}
.folha:nth-of-type(3){left:25%;top:28%;width:50%;z-index:2;transform:none;box-shadow:0 36px 60px -18px rgba(0,0,0,.85)}
.folha .capa{padding:12% 11% 9%}
.folha .capa .tit{font-size:clamp(1.1rem,2vw + .3rem,2.2rem);line-height:1}
.folha .capa .cod{font-size:clamp(.5rem,.5vw + .3rem,.75rem)}
.folha .capa .rod{font-size:clamp(.5rem,.5vw + .3rem,.75rem)}
.folha .capa .rod b{color:var(--laranja)}
.folha .capa.esc{background:linear-gradient(160deg,#1D3C57,#122A40)}
.piso{position:absolute;left:5%;right:5%;bottom:-2%;height:18%;background:radial-gradient(ellipse at 50% 0%,rgba(232,121,50,.35),transparent 65%);filter:blur(10px)}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:var(--s4)}
  .folhas{height:clamp(280px,70vw,420px);margin-right:0;max-width:520px}
  .engrenagem{width:260px;opacity:.7}.r2{display:none}
}
@media(max-width:480px){.hero .cta .btn{width:100%;justify-content:center}}
@media(min-width:900px){.hero .eyebrow{white-space:nowrap;font-size:clamp(.6875rem,1.05vw,1.0625rem);letter-spacing:.16em}}

/* fundo do hero: imagem gerada (sem texto), por trás de tudo */
.hero{background:#07101A url("fundo-hero.webp") center bottom/cover no-repeat}
.hero::before{display:none}
.engrenagem,.raio{display:none}
.piso{display:none}
@media(max-width:900px){
  .hero{background-image:linear-gradient(180deg,rgba(7,16,26,.35),rgba(7,16,26,.1) 40%,rgba(7,16,26,.35)),url("fundo-hero-m.webp");background-position:center,68% bottom;background-size:cover,cover}
}

/* ajuste: capas do hero menores */
.folhas{height:clamp(300px,31vw,450px);margin-right:0;max-width:600px;justify-self:end;width:100%}
.folha{width:44%}
.folha:nth-of-type(1){left:3%;top:14%}
.folha:nth-of-type(2){right:2%;top:0;width:42%}
.folha:nth-of-type(3){left:27%;top:27%;width:44%}
.folha .capa .tit{font-size:clamp(.95rem,1.1vw + .45rem,1.55rem)}
@media(max-width:900px){.folhas{max-width:420px;height:clamp(260px,62vw,360px);justify-self:center}}

/* volume de livro: espessura das páginas, lombada e brilho */
.folha{border-bottom:0;overflow:visible;border-radius:4px 6px 6px 4px;
  box-shadow:
    1px 1px 0 #E8ECF0,2px 2px 0 #CDD4DB,3px 3px 0 #EEF1F4,4px 4px 0 #C8CFD7,5px 5px 0 #EAEEF1,6px 6px 0 #BFC7CF,7px 7px 0 #E4E8EC,8px 8px 0 #B4BCC5,
    18px 30px 40px -6px rgba(0,0,0,.75)}
.folha::after{display:none}
.folha:nth-of-type(2){box-shadow:
    1px 1px 0 #DCE2E8,2px 2px 0 #B9C2CB,3px 3px 0 #D8DEE4,4px 4px 0 #AEB8C2,5px 5px 0 #D2D9DF,6px 6px 0 #A3AEB9,7px 7px 0 #CAD1D8,8px 8px 0 #98A4B0,
    18px 30px 40px -6px rgba(0,0,0,.8)}
.folha .capa{border-radius:4px 6px 6px 4px;overflow:hidden}
.folha .capa::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.05) 2.5%,rgba(255,255,255,.35) 3.2%,rgba(0,0,0,.06) 4.5%,transparent 9%),
    linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.08) 100%)}
.folha .capa.esc::after{background:
    linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.1) 2.5%,rgba(255,255,255,.18) 3.2%,rgba(0,0,0,.12) 4.5%,transparent 9%),
    linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.2) 100%)}
.folha .capa{padding-left:14%}
.folha:nth-of-type(1){transform:rotate(-8deg) perspective(900px) rotateY(14deg)}
.folha:nth-of-type(2){transform:rotate(4deg) perspective(900px) rotateY(-12deg)}
.folha:nth-of-type(3){transform:perspective(900px) rotateY(-6deg)}

/* inclinação para trás + sombra no chão */
.folha:nth-of-type(1){transform:perspective(1000px) rotateX(10deg) rotateY(14deg) rotateZ(-6deg)}
.folha:nth-of-type(2){transform:perspective(1000px) rotateX(10deg) rotateY(-12deg) rotateZ(4deg)}
.folha:nth-of-type(3){transform:perspective(1000px) rotateX(9deg) rotateY(-6deg)}
.folha{transform-origin:50% 100%;
  box-shadow:1px 1px 0 #E8ECF0,2px 2px 0 #CDD4DB,3px 3px 0 #EEF1F4,4px 4px 0 #C8CFD7,5px 5px 0 #EAEEF1,6px 6px 0 #BFC7CF,7px 7px 0 #E4E8EC,8px 8px 0 #B4BCC5,10px 12px 16px -4px rgba(0,0,0,.45)}
.folha:nth-of-type(2){box-shadow:1px 1px 0 #DCE2E8,2px 2px 0 #B9C2CB,3px 3px 0 #D8DEE4,4px 4px 0 #AEB8C2,5px 5px 0 #D2D9DF,6px 6px 0 #A3AEB9,7px 7px 0 #CAD1D8,8px 8px 0 #98A4B0,10px 12px 16px -4px rgba(0,0,0,.5)}
.folha::after{display:block;content:"";position:absolute;left:-4%;right:-14%;bottom:-26px;height:34px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 55%,transparent 100%);filter:blur(7px)}
.folha:nth-of-type(3)::after{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 55%,transparent 100%)}
.folhas{perspective:none}

/* livro da frente: mais espesso (a regra antiga de sombra estava sobrescrevendo a espessura) */
.folha:nth-of-type(3){box-shadow:
    1px 1px 0 #EDF0F3,2px 2px 0 #CDD4DB,3px 3px 0 #F1F3F6,4px 4px 0 #C8CFD7,5px 5px 0 #EDF0F3,6px 6px 0 #BFC7CF,
    7px 7px 0 #E8ECF0,8px 8px 0 #B4BCC5,9px 9px 0 #E2E6EA,10px 10px 0 #A9B2BC,11px 11px 0 #D8DDE2,12px 12px 0 #9EA8B3,
    14px 16px 20px -4px rgba(0,0,0,.5)}

/* ---------- vitrine mais compacta ---------- */
#produtos{padding:var(--s5) 0}
#produtos .cab{margin-bottom:var(--s3)}
.produtos:has(.prod:only-child){max-width:1000px;margin-inline:auto}
.prod .colecao{padding:var(--s2) var(--s2) var(--s2)}
.colecao .rotulo{font-size:.75rem;margin-bottom:var(--s2);padding-bottom:12px}
.colecao .rotulo .ico{width:22px;height:22px}
.capas{gap:8px}
.capas li{aspect-ratio:4/5}
.capas .capa{padding:10% 8% 7%}
.capas .capa .cod{font-size:.4375rem;letter-spacing:.1em}
.capas .capa .tit{font-size:clamp(.6875rem,.5vw + .45rem,.875rem);margin:8% 0 4%;line-height:1.05}
.capas .capa .rod{font-size:.4375rem;gap:4px}
.capas .capa .rod i{width:9px;height:9px}
.prod .corpo{padding:var(--s3);gap:var(--s2)}
.prod h3{font-size:clamp(1.5rem,1.6vw + .8rem,2.125rem)}
.prod h3::after{margin-top:10px;width:48px}
.prod .resumo{font-size:var(--fs-1);margin-top:6px}
.prod .etiqueta{font-size:.6875rem;padding:6px 9px}
.lista{gap:7px 20px}
.lista li{font-size:.875rem;line-height:1.35;gap:.55rem}
.lista .ico{width:17px;height:17px;padding:3px}
.compra{padding:var(--s2) var(--s3);gap:var(--s2)}
.preco strong{font-size:clamp(2.25rem,3vw + .8rem,3rem)}
.preco small{font-size:.8125rem}
.btn-comprar{min-height:52px;font-size:1.0625rem}
.prod .corpo::before,.prod .corpo::after{height:130px}
@media(min-width:900px){
  .prod:only-child .colecao{flex-basis:33%}
  .prod:only-child .corpo{padding:var(--s3) var(--s3)}
  .prod .corpo>:first-child{max-width:66%}
}

/* ---------- voltar ao topo ---------- */
.voltar-topo{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:52px;height:52px;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--laranja);color:var(--carvao);cursor:pointer;box-shadow:var(--sh-2);transition:background-color .15s,transform .15s}
.voltar-topo[hidden]{display:none}
.voltar-topo:hover{background:var(--laranja-h);transform:translateY(-2px)}
.voltar-topo .ico{width:26px;height:26px;stroke-width:2.5}
.voltar-topo:focus-visible{box-shadow:0 0 0 3px var(--carvao),0 0 0 6px var(--branco)}