/* VESPA, tema escuro por padrão + cenário de parábolas + toques Refero (25/10/2026, tela S019). Só aparência.
   Referências Refero: Raycast (escuro com luz e borda fina), Factory (agentes, rótulos mono), Cursor (grade de linhas discreta).
   Para voltar: tirar este <link>, vespa-tema.js e trocar a imagem do hero de volta para vespas-tres-niveis-v3.jpg. */

/* ---- botão claro/escuro no topo ---- */
.tema-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:var(--creme);width:38px;height:38px;border-radius:999px;font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s;flex:none}
.tema-btn:hover{background:rgba(26,190,255,.2);border-color:var(--azul);transform:rotate(-12deg)}
.tema-btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
header.topo .wrap{gap:12px}
.topo-dir{display:flex;align-items:center;gap:10px}

/* ---- cenário atrás dos três robôs: parábolas azul escuro e laranja ---- */
.hero-img{background:#07101c url(vespa-cenario.svg) center/cover no-repeat;border:1px solid rgba(26,190,255,.3);padding:6px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,133,27,.18),0 0 90px rgba(26,190,255,.22)}
.hero-img img{border-radius:22px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}

/* ---- toques Refero: grade de linhas, rótulos mono, borda com brilho ---- */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;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:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 15%,transparent 75%)}
.eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em}
.eyebrow::before{width:26px}
.hero .eyebrow::after{content:"";width:7px;height:7px;border-radius:50%;background:#36e08b;box-shadow:0 0 10px #36e08b;animation:pulsa 2.2s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.35}}
.card,.passo,.frente,.dor,.faq details,.lista-dores li,.guia .caixa,.regra-item,.seg-niveis div,.autonomia div{background-clip:padding-box}
.card::after,.passo::before,.frente::before{pointer-events:none}
.card{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.passo .quem,.card .papel,.card .forca{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.btn-azul{box-shadow:0 0 0 1px rgba(26,190,255,.6),0 10px 30px rgba(26,190,255,.35)}
section+section{border-top:1px solid rgba(255,255,255,.04)}

/* ---- TEMA ESCURO (padrão): vira as seções claras ---- */
html[data-tema="escuro"]{color-scheme:dark}
html[data-tema="escuro"] body{background:#08111c;color:var(--creme)}
html[data-tema="escuro"] .lead,html[data-tema="escuro"] .problema .lead{color:#c3ccd5}
html[data-tema="escuro"] .problema,html[data-tema="escuro"] .frentes,html[data-tema="escuro"] .guia,html[data-tema="escuro"] #como,html[data-tema="escuro"] .faq,html[data-tema="escuro"] .prova{background:radial-gradient(900px 420px at 85% 0,rgba(26,190,255,.10),transparent 70%),radial-gradient(700px 360px at 5% 100%,rgba(255,133,27,.07),transparent 70%),#08111c}
html[data-tema="escuro"] .dor,html[data-tema="escuro"] .passo,html[data-tema="escuro"] .frente,html[data-tema="escuro"] .faq details,html[data-tema="escuro"] .lista-dores li,html[data-tema="escuro"] .guia .caixa{background:linear-gradient(160deg,#102236,#0b1826);border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);color:var(--creme)}
html[data-tema="escuro"] .dor p,html[data-tema="escuro"] .frente p,html[data-tema="escuro"] .faq details p,html[data-tema="escuro"] .lista-dores li{color:#c3ccd5}
html[data-tema="escuro"] .lista-dores li{border-left:4px solid var(--laranja)}
html[data-tema="escuro"] .passo .nivel{background:#17324b;color:#e8f6ff}
html[data-tema="escuro"] .passo small,html[data-tema="escuro"] .frente .ex{color:#9fb0bf}
html[data-tema="escuro"] .frente .ex b{color:#fff}
html[data-tema="escuro"] .barra{background:#1a2c3d}
html[data-tema="escuro"] .frente:nth-child(1) .icone{background:rgba(26,190,255,.16)}
html[data-tema="escuro"] .frente:nth-child(2) .icone{background:rgba(255,133,27,.16)}
html[data-tema="escuro"] .frente:nth-child(3) .icone{background:rgba(255,255,255,.1)}
html[data-tema="escuro"] .faq summary{color:#f1f5f8}
html[data-tema="escuro"] .faq details:hover{border-color:rgba(26,190,255,.3)}
html[data-tema="escuro"] .prova .caixa{background:#0f1d2c;border-color:rgba(255,133,27,.7)}
html[data-tema="escuro"] .prova .caixa p{color:#9fb0bf}
html[data-tema="escuro"] .guia .caixa{border-top:3px solid var(--azul)}
html[data-tema="escuro"] .guia li{color:#dfe7ee}
html[data-tema="escuro"] .lista-dores li:hover,html[data-tema="escuro"] .passo:hover,html[data-tema="escuro"] .frente:hover{box-shadow:0 22px 56px rgba(0,0,0,.5),0 0 0 1px rgba(26,190,255,.35)}
html[data-tema="escuro"] .pendente{background:#3a2410;color:#ffc58f}
html[data-tema="escuro"] .decisao{background:#3a3210;color:#ffe58a}
html[data-tema="escuro"] .corre{background:#05090e}
html[data-tema="escuro"] ::selection{background:var(--azul);color:#05090e}

/* ---- TEMA CLARO: o visual anterior, com o cenário novo no hero ---- */
html[data-tema="claro"]{color-scheme:light}
html[data-tema="claro"] .tema-btn{background:rgba(255,255,255,.1)}

@media (max-width:640px){.topo-dir .btn{padding:8px 12px;font-size:13px}.tema-btn{width:34px;height:34px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.hero .eyebrow::after{animation:none}}

/* promessa no escuro: faixa azul-marinho com luz, cartões de vidro escuro */
html[data-tema="escuro"] .promessa{background:radial-gradient(800px 420px at 12% 0,rgba(26,190,255,.30),transparent 62%),radial-gradient(600px 360px at 95% 100%,rgba(255,133,27,.22),transparent 62%),linear-gradient(160deg,#0a2a47,#081c32 60%,#06121f);color:var(--creme)}
html[data-tema="escuro"] .promessa h2{color:#fff}
html[data-tema="escuro"] .promessa .item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#d4dde5;box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-tema="escuro"] .promessa .item b{color:#fff}
html[data-tema="escuro"] .promessa .item:hover{border-color:rgba(26,190,255,.55);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 40px rgba(26,190,255,.15)}
html[data-tema="escuro"] .promessa .regra{border:1px solid rgba(26,190,255,.3);background:linear-gradient(135deg,#05090e,#0d1c2c)}
html[data-tema="escuro"] .promessa .eyebrow,html[data-tema="escuro"] .promessa .regra span{color:#ffb36b}
html[data-tema="escuro"] .promessa .regra span{color:var(--azul)}