/* ===== Recursos extras da home: quiz, antes/depois, linha do tempo, mapa, contador ===== */

/* ---------- quiz ---------- */
.quiz{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.qbox{background:#fff;border:1px solid #0e1a1322;border-radius:6px;padding:34px;box-shadow:0 24px 50px #0e1a1314;position:relative;overflow:hidden}
.qbox::before{content:"";position:absolute;left:0;top:0;height:4px;width:var(--p,0%);background:var(--g);transition:width .4s}
.qstep{font:600 12px 'Space Grotesk';letter-spacing:.14em;text-transform:uppercase;color:var(--lm)}
.qbox h3{font-size:clamp(22px,2.2vw,28px);color:var(--lt);margin:12px 0 24px;min-height:2.4em}
.qopts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qopts button{padding:16px 10px;border-radius:6px;border:1.5px solid #0e1a1326;background:var(--lbg);font:600 15px Inter;color:var(--lt);cursor:pointer;transition:.15s}
.qopts button:hover{border-color:var(--lt);background:#fff;transform:translateY(-2px)}
.qres .score{display:flex;align-items:baseline;gap:12px}
.qres .score b{font:700 72px/1 'Space Grotesk'}
.qres.low .score b{color:var(--gd)}.qres.mid .score b{color:#d98a00}.qres.high .score b{color:#c8321b}
.qres h3{min-height:0;margin:8px 0 14px}
.qres ul{list-style:none;display:grid;gap:8px;margin:0 0 24px}
.qres li{padding:12px 14px 12px 40px;border-radius:6px;background:#fff3f0;border:1px solid #ff5b3d33;color:var(--lt);font-size:15px;position:relative}
.qres li::before{content:"!";position:absolute;left:12px;top:11px;width:18px;height:18px;border-radius:3px;background:var(--r);color:#fff;font:800 12px/18px Inter;text-align:center}
.qres .again{background:none;border:0;color:var(--lm);text-decoration:underline;cursor:pointer;margin-left:14px;font:inherit}

/* ---------- antes / depois ---------- */
.ba{margin-top:40px}
.ba-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.ba-head h3{font-size:28px;color:var(--lt)}
.ba-head p{color:var(--lm)}
.ba-box{position:relative;border-radius:6px;overflow:hidden;background:#0b1510;aspect-ratio:16/8;user-select:none;border:1px solid #0e1a13}
.ba-box svg{position:absolute;inset:0;width:100%;height:100%}
.ba-box svg *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ba-box .base{stroke:#c9d6cc;stroke-width:2}
.ba-box .bad{stroke:#ff5b3d;stroke-width:2.5}
.ba-box .ok{stroke:#8cd650;stroke-width:2.5}
.ba-box text{fill:#fff;stroke:none;font:600 13px Inter}
.ba-box .tbad{fill:#ffb3a3}.ba-box .tok{fill:#c9f2a6}
.ba-after{clip-path:inset(0 0 0 var(--s,50%))}
.ba-grid{background-image:linear-gradient(#c9d6cc10 1px,transparent 1px),linear-gradient(90deg,#c9d6cc10 1px,transparent 1px);background-size:30px 30px;position:absolute;inset:0}
.ba-line{position:absolute;top:0;bottom:0;left:var(--s,50%);width:2px;background:#fff;pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--s,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;color:var(--lt);display:grid;place-items:center;font:700 18px Inter;box-shadow:0 8px 24px #0006;pointer-events:none}
.ba-box input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-lbl{position:absolute;top:16px;font:700 12px 'Space Grotesk';letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:3px;pointer-events:none}
.ba-lbl.l{left:16px;background:#ff5b3d;color:#fff}.ba-lbl.r{right:16px;background:var(--g);color:#0b2410}

/* ---------- linha do tempo ---------- */
.tl{margin-top:72px;position:relative}
.tl h3{font-size:24px;color:var(--lt);margin-bottom:34px}
.tl-track{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.tl-track::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:#0e1a1322}
.tl-fill{position:absolute;left:0;top:9px;height:2px;background:var(--gd);width:100%;transform-origin:left;transform:scaleX(var(--t,0))}
.tl-item{position:relative;padding-top:34px;opacity:.35;transition:opacity .4s}
.tl-item::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:3px;background:var(--lbg);border:2px solid #0e1a1355;transition:.3s}
.tl-item.on{opacity:1}.tl-item.on::before{background:var(--gd);border-color:var(--gd)}
.tl-item b{display:block;font:700 22px 'Space Grotesk';color:var(--lt)}
.tl-item span{font-size:13.5px;color:var(--lm);line-height:1.45;display:block;margin-top:4px}

/* ---------- mapa ---------- */
.map-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.map{position:relative;background:#0b1510;border-radius:6px;overflow:hidden;aspect-ratio:10/7;border:1px solid #0e1a13}
.map svg{width:100%;height:100%;display:block}
.map .gr line{stroke:#c9d6cc14}
.map .rt{stroke:#8cd65055;stroke-width:1;stroke-dasharray:4 5;fill:none}
.map .ring{fill:none;stroke:#8cd650;opacity:0}
.map .pt{fill:#8cd650;opacity:.15;transition:opacity .5s}
.map .pt.on{opacity:1}
.map .lb{fill:#c9d6cd;font:500 12px Inter;opacity:0;transition:opacity .5s}
.map .lb.on{opacity:1}
.map .hq{fill:#fff}.map .hqlb{fill:#fff;font:700 14px 'Space Grotesk'}
.map.go .ring{animation:radar 3s ease-out infinite}
.map.go .ring:nth-of-type(2){animation-delay:1s}.map.go .ring:nth-of-type(3){animation-delay:2s}
@keyframes radar{from{r:6;opacity:.8}to{r:180;opacity:0}}
.cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.cities span{padding:7px 12px;border-radius:4px;background:#fff;border:1px solid #0e1a1322;font-size:14px;color:var(--lt)}

/* ---------- contador NR-01 ---------- */
.dcount{margin-top:22px;padding-top:20px;border-top:1px solid #ffffff33}
.dcount b{font:700 56px/1 'Space Grotesk';color:#fff;display:block}
.dcount span{color:#ffe2d8;font-size:14px}

/* ---------- ícones que se desenham ---------- */
.sit .ic svg *{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.2s ease .15s}
.sit.drawn .ic svg *{stroke-dashoffset:0}

@media(max-width:1060px){.quiz,.map-grid{grid-template-columns:1fr}.tl-track{grid-template-columns:repeat(8,170px);overflow-x:auto;padding-bottom:10px}}
@media(max-width:640px){.qopts{grid-template-columns:1fr 1fr 1fr}.qbox{padding:24px}.ba-box{aspect-ratio:4/3}.ba-box text{font-size:16px}}
@media(prefers-reduced-motion:reduce){.sit .ic svg *{stroke-dasharray:none;stroke-dashoffset:0}.map.go .ring{animation:none}}

.mosaic{overflow:hidden;border-radius:6px}

/* mapa: dobra escura própria (azul-petróleo de planta técnica) */
.mapdark{background:radial-gradient(circle at 75% 50%,#1f5c2a66,transparent 55%),linear-gradient(180deg,#06100b,#0b1a11);border-top:1px solid #8cd65022;border-bottom:1px solid #8cd65022;
 background-image:radial-gradient(circle at 75% 50%,#1f5c2a66,transparent 55%),linear-gradient(#c9d6cc08 1px,transparent 1px),linear-gradient(90deg,#c9d6cc08 1px,transparent 1px),linear-gradient(180deg,#06100b,#0b1a11);background-size:auto,40px 40px,40px 40px,auto}
.mapdark .eyebrow{color:var(--g);border-color:#8cd65055}
.mapdark h2 em{color:var(--g)}
.mapdark .lead{color:#a9bcae}

.mapdark .cities span{background:transparent;border:1px solid #8cd65040;color:#dbe8de}
.mapdark .map{background:#050d08;border-color:#8cd65040}