/* Pagina do Vitrine ERP. Base: /assets/site.css do portfolio (fonte Archivo, tokens, botoes). */
html{scroll-padding-top:16px}
body{padding-bottom:0}

/* barra de topo: volta ao portfolio + chamada */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.back{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--mut);font-weight:600;font-size:16px}
.back:hover{color:var(--tx)}
.back span{margin-right:8px}
.btn-sm{min-height:44px;padding:0 20px;font-size:16px}

/* abertura */
.sec.wrap{padding-left:var(--m);padding-right:var(--m)}
.hero2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px) clamp(28px,5vw,80px);align-items:end;padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(48px,7vw,96px)}
.eyebrow{color:var(--ac);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.hero2 h1{text-align:left;max-width:none;margin:0;font-size:clamp(40px,6.2vw,92px);line-height:.95}
.hero2 .lede{text-align:left;margin:0;max-width:28em}
.hero2 .actions{justify-content:flex-start;margin-top:26px}
.hero2 .nota{margin-top:16px;color:var(--mut);font-size:15px}
.janela{margin:0;border:1px solid var(--line);border-radius:clamp(14px,1.6vw,22px);overflow:hidden;background:#f3f4f1;box-shadow:0 40px 90px -36px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03)}
.janela img{width:100%;height:auto}
.hero2 .janela{grid-column:1 / -1;margin-top:clamp(8px,2vw,24px)}

/* numeros de prova */
.prova{padding-top:0}
.prova .nums dd{font-size:clamp(40px,4.6vw,60px)}

/* o que resolve: lista editorial, sem cartoes */
.lista{list-style:none;padding:0;border-top:1px solid var(--line)}
.lista li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(20px,4vw,64px);padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line)}
.lista b{font-weight:700;font-stretch:75%;text-transform:uppercase;font-size:clamp(24px,2.5vw,32px);line-height:1.1;letter-spacing:.02em}
.lista span{color:#cfcec7}
.sec-head.left{text-align:left;max-width:none}
.sec-head.left .sec-note{margin-left:0}

/* tour das telas */
.tour{display:grid;gap:clamp(56px,8vw,112px)}
.tela{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center}
.tela:nth-child(even){grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.tela:nth-child(even) .tela-txt{order:2}
.tela .n{font-weight:800;font-stretch:75%;font-size:clamp(48px,5vw,72px);line-height:1;color:var(--ac)}
.tela h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:.01em;margin:10px 0 12px;text-wrap:balance}
.tela p{color:#d0cfc8}
.pts{list-style:none;padding:0;margin-top:16px;display:grid;gap:8px}
.pts li{position:relative;padding-left:22px;color:var(--mut);font-size:16px;line-height:1.45}
.pts li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--ac)}
.tela figure{margin:0}
.tela .janela a{display:block;cursor:zoom-in}
.tela .janela a:focus-visible{outline-offset:-3px}
.tela figcaption{color:var(--mut);font-size:14px;margin-top:10px;letter-spacing:.02em}
@media(max-width:900px){
  .hero2{grid-template-columns:1fr;align-items:start}
  .lista li{grid-template-columns:1fr}
  .tela,.tela:nth-child(even){grid-template-columns:1fr}
  .tela:nth-child(even) .tela-txt{order:0}
}

/* como comeca: 3 passos */
#como .steps{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){#como .steps{grid-template-columns:1fr}}

/* perguntas */
.faq{max-width:900px;margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;font-weight:700;font-size:clamp(18px,1.8vw,21px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:400;font-size:30px;line-height:1;color:var(--ac);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:#cfcec7;padding:0 40px 22px 0}
.faq summary:hover{color:var(--ac)}

/* chamada final */
.final{text-align:center}
.final h2{max-width:16ch;margin:0 auto}
.final .lede{margin-left:auto;margin-right:auto}
.final .actions{justify-content:center}

.foot a{color:var(--tx)}
.foot p+p{margin-top:8px}

/* barra fixa no celular */
.fixo{display:none}
@media(max-width:700px){
  body{padding-bottom:84px}
  .fixo{display:block;position:fixed;left:0;right:0;bottom:0;z-index:10;padding:10px var(--m) calc(10px + env(safe-area-inset-bottom));background:rgba(11,11,11,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .fixo .btn{width:100%}
  .bar .btn{display:none}
}

/* ampliar tela */
dialog.zoom{padding:0;border:0;background:#0b0b0b;color:var(--tx);width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;overflow:auto}
dialog.zoom::backdrop{background:#000}
dialog.zoom img{display:block;width:max(100%,1100px);height:auto;background:#f3f4f1}
dialog.zoom button{position:fixed;top:12px;right:12px;z-index:2;min-height:48px;padding:0 20px;border-radius:99px;border:1.5px solid var(--tx);background:#0b0b0b;color:var(--tx);font:700 16px var(--sans);cursor:pointer}
dialog.zoom button:hover{background:var(--tx);color:#0b0b0b}

@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}