/* Portal do curso AWP · GEPROQ · estilos */
:root{
  --navy:#081D52; --blue:#0F338C; --blue2:#3166C5; --green:#2FA33A; --green2:#5EBB5F; --green-dk:#105D10;
  --amber:#E8A317; --amber-dk:#8A5B00; --red:#C8402E;
  --paper:#F4F6FA; --card:#FFFFFF; --ink:#142037; --muted:#56607A; --line:#D9DFEA; --soft:#EAF0FA; --gsoft:#E8F5E9; --asoft:#FDF4DF; --rsoft:#FBE8E5;
  --grid:rgba(15,51,140,.06);
  --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:"Archivo",system-ui,sans-serif; font-variation-settings:"wdth" 100; font-size:16px; line-height:1.55}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--green2); outline-offset:2px; border-radius:4px}
button{font:inherit; color:inherit; cursor:pointer}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
h1,h2,h3{font-variation-settings:"wdth" 112; line-height:1.1; color:var(--navy); margin:0}
h2{font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.01em}
h3{font-size:20px; font-weight:700}
p{margin:0 0 12px}
.lead{font-size:18px; color:var(--muted); max-width:62ch}

/* top bar */
.top{position:sticky; top:0; z-index:50; background:var(--navy); color:#fff}
.top .wrap{display:flex; align-items:center; gap:18px; height:60px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; flex:none}
.brand img{width:34px; height:34px}
.brand b{font-variation-settings:"wdth" 118; font-weight:800; font-size:19px; letter-spacing:.02em}
.brand span{font-size:12px; color:#AFC0E6; display:block; line-height:1.1}
.nav{display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:#D5DEF3; text-decoration:none; font-size:14px; padding:8px 11px; border-radius:6px; white-space:nowrap}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.1); color:#fff}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:6px; padding:6px 10px}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column; background:var(--navy); padding:8px 20px 16px; margin:0}
  .nav.open{display:flex}
}

/* hero */
.hero{background:var(--navy); color:#fff; padding:56px 0 64px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:32px 32px}
.hero .wrap{position:relative; display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{color:#fff; font-size:clamp(40px,6vw,68px); font-weight:800; font-variation-settings:"wdth" 120; letter-spacing:-.015em}
.hero h1 small{display:block; font-size:.42em; font-variation-settings:"wdth" 100; font-weight:500; color:var(--green2); letter-spacing:0; margin-top:12px}
.hero p{color:#C9D4EE; font-size:18px; max-width:52ch; margin-top:20px}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:8px; font-weight:600; text-decoration:none; border:2px solid transparent; font-size:15px}
.btn.g{background:var(--green); color:#fff}
.btn.g:hover{background:#278a31}
.btn.o{border-color:rgba(255,255,255,.4); color:#fff}
.btn.o:hover{background:rgba(255,255,255,.08)}
.facts{display:flex; gap:28px; margin-top:34px; flex-wrap:wrap}
.facts div{font-size:14px; color:#AFC0E6}
.facts b{display:block; color:#fff; font-size:22px; font-variation-settings:"wdth" 115}

/* structure explorer (drawing sheet) */
.sheet{background:#fff; color:var(--ink); border-radius:12px; padding:22px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); position:relative}
.sheet .hint{font-size:13px; color:var(--muted); margin-bottom:12px}
.lvl{display:grid; gap:8px; margin-bottom:8px}
.node{border:2px solid var(--blue); background:var(--soft); color:var(--navy); border-radius:8px; padding:10px 12px; text-align:left; transition:transform .15s, background .15s}
.node b{display:block; font-size:17px; font-variation-settings:"wdth" 115; font-weight:800}
.node span{font-size:12.5px; color:var(--muted)}
.node:hover{transform:translateY(-1px)}
.node[aria-pressed=true]{background:var(--navy); border-color:var(--navy)}
.node[aria-pressed=true] b,.node[aria-pressed=true] span{color:#fff}
.node.poc{border-color:var(--navy); background:var(--navy)} .node.poc b,.node.poc span{color:#fff}
.node.poc[aria-pressed=true]{background:var(--green-dk); border-color:var(--green-dk)}
.node.cwa{border-color:var(--navy)}
.node.iwp{border-color:var(--green); background:var(--gsoft)}
.node.iwp[aria-pressed=true]{background:var(--green); border-color:var(--green)}
.node.swp{border-color:var(--amber); background:var(--asoft)}
.node.swp[aria-pressed=true]{background:var(--amber-dk); border-color:var(--amber-dk)}
.l3{grid-template-columns:repeat(3,1fr)} .l2{grid-template-columns:2fr 1fr}
.flow{height:14px; position:relative} .flow::after{content:""; position:absolute; left:50%; top:1px; width:2px; height:12px; background:var(--line)}
.def{margin-top:14px; border-top:1px dashed var(--line); padding-top:14px; min-height:120px}
.def h4{margin:0 0 4px; font-size:16px; color:var(--navy); font-variation-settings:"wdth" 112}
.def .en{font-size:13px; color:var(--green-dk); margin-bottom:6px}
.hero .def p{font-size:14.5px; margin:0 0 6px; color:var(--ink); max-width:none}
.def .src{font-size:12px; color:var(--muted)}
.titleblock{display:grid; grid-template-columns:1.6fr 1fr 1fr; border:1px solid var(--ink); margin-top:16px; font-size:11px}
.titleblock div{padding:5px 8px; border-left:1px solid var(--ink)} .titleblock div:first-child{border-left:0}
.titleblock i{display:block; font-style:normal; color:var(--muted); font-size:10px}

/* sections */
section.sec{padding:72px 0}
section.sec.alt{background:#fff}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:end; margin-bottom:32px}
@media (max-width:860px){.sec-head{grid-template-columns:1fr; gap:12px}}

/* trilha */
.track{display:grid; gap:12px}
.mod{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.sec.alt .mod{background:var(--paper)}
.mod > button{width:100%; display:grid; grid-template-columns:64px 1fr auto; gap:16px; align-items:center; padding:18px 20px; background:none; border:0; text-align:left}
.mod .n{font-size:34px; font-weight:800; font-variation-settings:"wdth" 125; color:var(--green); line-height:1}
.mod .t{font-size:19px; font-weight:700; color:var(--navy); font-variation-settings:"wdth" 108}
.mod .s{font-size:14px; color:var(--muted)}
.mod .h{font-size:13px; color:var(--blue); background:var(--soft); padding:4px 10px; border-radius:20px; white-space:nowrap}
.mod .chev{transition:transform .2s}
.mod[open-state=true] .chev{transform:rotate(180deg)}
.mod .body{display:none; padding:0 20px 22px 100px}
.mod[open-state=true] .body{display:block}
@media (max-width:700px){.mod > button{grid-template-columns:44px 1fr} .mod .h{display:none} .mod .body{padding:0 18px 20px} .mod .n{font-size:26px}}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.mod h5{margin:6px 0 8px; font-size:14px; color:var(--blue); font-weight:700}
.mod ul{margin:0; padding-left:18px; font-size:15px} .mod li{margin-bottom:6px}
.note{border-left:4px solid var(--green); background:var(--gsoft); padding:12px 14px; border-radius:0 8px 8px 0; font-size:14.5px; margin-top:14px}
.note.a{border-color:var(--amber); background:var(--asoft)}
.qa{margin-top:16px}
.qa details{border-top:1px solid var(--line); padding:10px 0}
.qa summary{cursor:pointer; font-weight:600; font-size:15px; color:var(--navy)}
.qa details p{margin:8px 0 0; font-size:14.5px; color:var(--muted)}
.lifecycle{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.lifecycle span{font-size:13px; padding:6px 10px; border-radius:6px; background:var(--soft); color:var(--navy)}
.lifecycle span.r{background:var(--asoft); color:var(--amber-dk)} .lifecycle span.g{background:var(--green); color:#fff}

/* EAP explorer */
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1.5px solid var(--line); background:#fff; border-radius:20px; padding:5px 12px; font-size:13.5px}
.chip[aria-pressed=true]{background:var(--navy); border-color:var(--navy); color:#fff}
select,input[type=search],input[type=number]{font:inherit; font-size:14px; border:1.5px solid var(--line); border-radius:8px; padding:7px 10px; background:#fff; color:var(--ink)}
.small-btn{border:1.5px solid var(--line); background:#fff; border-radius:8px; padding:6px 12px; font-size:13.5px}
.eap-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start}
@media (max-width:1000px){.eap-grid{grid-template-columns:1fr}}
.tree{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.trow{display:grid; grid-template-columns:minmax(260px,1.3fr) 84px minmax(200px,1fr); border-bottom:1px solid #EEF1F6; font-size:13.5px; cursor:pointer; min-height:34px}
.trow:hover{background:#F7F9FD}
.trow.sel{background:#E9F0FC; box-shadow:inset 3px 0 0 var(--blue)}
.trow.head{background:var(--navy); color:#fff; cursor:default; font-weight:600; font-size:12.5px; position:sticky; top:0}
.trow > div{padding:7px 8px; display:flex; align-items:center; min-width:0}
.trow .nm{gap:6px}
.trow .nm .tx{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trow.sum .tx{font-weight:700; color:var(--navy)}
.trow.lv1 .tx{font-weight:800}
.tg{width:20px; height:20px; flex:none; border:0; background:none; padding:0; display:grid; place-items:center; color:var(--muted); border-radius:4px}
.tg:hover{background:var(--soft)}
.tg svg{transition:transform .15s}
.tg[aria-expanded=true] svg{transform:rotate(90deg)}
.pill{font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:10px; white-space:nowrap}
.ty-CWA{background:var(--navy); color:#fff} .ty-EWP,.ty-PWP{background:var(--soft); color:var(--blue)} .ty-CWP{background:#D6E1F7; color:var(--navy)}
.ty-IWP{background:var(--gsoft); color:var(--green-dk)} .ty-SWP{background:var(--asoft); color:var(--amber-dk)} .ty-Marco{background:#fff; border:1px solid var(--navy); color:var(--navy)}
.ty-other{background:#EEF1F6; color:var(--muted)}
.gantt{position:relative; padding:0!important}
.gantt .bar{position:absolute; height:12px; top:50%; transform:translateY(-50%); border-radius:3px}
.gantt .ms{position:absolute; width:11px; height:11px; top:50%; transform:translate(-50%,-50%) rotate(45deg); background:var(--navy)}
.gantt .mline{position:absolute; top:0; bottom:0; width:1px; background:#EEF1F6}
.head .gantt span{position:absolute; top:50%; transform:translateY(-50%); font-size:11px; color:#AFC0E6}
.tscroll{max-height:620px; overflow:auto}
@media (max-width:720px){.trow{grid-template-columns:1fr 78px} .trow .gantt{display:none}}
.detail{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; position:sticky; top:76px}
.detail h4{margin:6px 0 10px; font-size:17px; color:var(--navy); font-variation-settings:"wdth" 108; line-height:1.25}
.detail dl{display:grid; grid-template-columns:110px 1fr; gap:6px 10px; font-size:13.5px; margin:0}
.detail dt{color:var(--muted)} .detail dd{margin:0; font-weight:600}
.detail .why{margin-top:14px; font-size:13.5px; background:var(--paper); padding:10px 12px; border-radius:8px}
.stats{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; color:var(--muted); margin-top:12px}
.stats b{color:var(--navy)}

/* tools */
.tabs{display:flex; gap:6px; flex-wrap:wrap; border-bottom:2px solid var(--line); margin-bottom:24px}
.tab{background:none; border:0; padding:10px 16px; font-weight:600; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-2px}
.tab[aria-selected=true]{color:var(--navy); border-color:var(--green)}
.panel{display:none} .panel.on{display:block}
.calc{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.box{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px}
.sec.alt .box{background:var(--paper)}
.box h3{margin-bottom:6px}
.box > p{font-size:14.5px; color:var(--muted)}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:14px 0}
.fields label{font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px}
.fields input{width:100%}
.out{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px}
.out div{background:var(--navy); color:#fff; border-radius:8px; padding:12px}
.out small{display:block; font-size:12px; color:#AFC0E6}
.out b{font-size:24px; font-variation-settings:"wdth" 115}
.out div.warn{background:var(--amber-dk)} .out div.bad{background:var(--red)} .out div.ok{background:var(--green-dk)}
.read{font-size:14px; margin-top:10px; color:var(--muted)}
.checklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:8px; margin:14px 0}
.ck{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:15px; cursor:pointer}
.ck input{width:20px; height:20px; accent-color:var(--green); flex:none; margin-top:1px}
.ck small{display:block; color:var(--muted); font-size:12.5px}
.verdict{display:flex; align-items:center; gap:14px; border-radius:10px; padding:14px 16px; font-weight:700}
.verdict.no{background:var(--rsoft); color:var(--red)} .verdict.yes{background:var(--green); color:#fff}
.meter{height:10px; background:var(--line); border-radius:6px; overflow:hidden; margin:8px 0 2px}
.meter i{display:block; height:100%; background:var(--green); width:0; transition:width .25s}
.mat{display:grid; gap:8px; margin:14px 0}
.mrow{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:15px}
.seg{display:flex; border:1.5px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{border:0; background:#fff; width:38px; padding:6px 0; font-weight:700; color:var(--muted)}
.seg button+button{border-left:1.5px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--blue); color:#fff}
@media (max-width:560px){.mrow{grid-template-columns:1fr} .fields{grid-template-columns:1fr}}

/* quiz */
.quiz{max-width:760px}
.q{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin-bottom:12px}
.q h4{margin:0 0 10px; font-size:16.5px; color:var(--navy); font-weight:700}
.q .opts{display:grid; gap:6px}
.q .opts button{text-align:left; border:1.5px solid var(--line); background:#fff; border-radius:8px; padding:9px 12px; font-size:15px}
.q .opts button:hover:not(:disabled){border-color:var(--blue)}
.q .opts button.right{border-color:var(--green); background:var(--gsoft)}
.q .opts button.wrong{border-color:var(--red); background:var(--rsoft)}
.q .fb{font-size:14px; color:var(--muted); margin-top:10px; display:none}
.q.done .fb{display:block}
.score{position:sticky; bottom:16px; background:var(--navy); color:#fff; border-radius:10px; padding:12px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:760px}

/* glossary */
.gl{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-top:16px}
.gi{background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px}
.sec.alt .gi{background:var(--paper)}
.gi b{color:var(--navy); font-variation-settings:"wdth" 112; font-size:16px}
.gi em{font-style:normal; color:var(--green-dk); font-size:12.5px; margin-left:6px}
.gi p{margin:4px 0 0; font-size:14px; color:var(--muted)}

/* downloads */
.dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.file{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:8px}
.file .ext{width:52px; height:60px; border-radius:6px; display:grid; place-items:end center; padding-bottom:8px; color:#fff; font-weight:800; font-size:13px; font-variation-settings:"wdth" 120; position:relative}
.file .ext::before{content:""; position:absolute; top:0; right:0; border-style:solid; border-width:0 14px 14px 0; border-color:transparent var(--paper) rgba(255,255,255,.35) transparent}
.file h3{font-size:17px}
.file p{font-size:14px; color:var(--muted); flex:1; margin:0}
.file .meta{font-size:12.5px; color:var(--muted)}
.file a.btn{align-self:flex-start; background:var(--navy); color:#fff; padding:9px 16px; font-size:14px}
.file a.btn:hover{background:var(--blue)}
.steps{counter-reset:s; list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px}
.steps li{counter-increment:s; display:grid; grid-template-columns:30px 1fr; gap:10px; font-size:15px}
.steps li::before{content:counter(s); width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px}

.refs li{margin-bottom:10px; font-size:14.5px}
.refs{padding-left:18px; max-width:90ch}

footer{background:var(--navy); color:#C9D4EE; padding:40px 0; font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center}
footer a{color:#fff}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.levels{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:16px}
.levels div{background:var(--paper); border-left:4px solid var(--blue); border-radius:0 8px 8px 0; padding:8px 12px; font-size:13.5px; color:var(--muted)}
.levels div:nth-child(4){border-color:var(--green)}
.levels b{display:block; color:var(--navy); font-size:14px}
@media (max-width:760px){.levels{grid-template-columns:1fr 1fr}}

.quiz-wrap{max-width:760px}
.quiz-wrap > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--navy); color:#fff; border-radius:var(--r); padding:16px 20px; font-weight:700; font-size:17px}
.quiz-wrap > summary::-webkit-details-marker{display:none}
.quiz-wrap > summary small{font-weight:400; color:#AFC0E6; font-size:14px}
.quiz-wrap > summary::after{content:""; width:10px; height:10px; border-right:2.5px solid var(--green2); border-bottom:2.5px solid var(--green2); transform:rotate(45deg); margin-left:8px; flex:none}
.quiz-wrap[open] > summary{margin-bottom:16px}
.quiz-wrap[open] > summary::after{transform:rotate(-135deg)}
.quiz-wrap[open] > summary span::before{content:"Fechar o teste rápido"} .quiz-wrap[open] > summary span{font-size:0} .quiz-wrap[open] > summary span::before{font-size:17px}
@media (max-width:560px){.quiz-wrap > summary{flex-wrap:wrap} .quiz-wrap > summary small{order:3; width:100%}}
.score .small-btn{color:var(--navy); border-color:#fff}