/* Ferramentas para pilotos · Haus Drone
   Paleta de carta aeronáutica VFR (papel, tinta, azul e magenta de carta) e a base de corte verde
   da bancada onde a etiqueta é recortada. B612 é a fonte da Airbus para telas de cabine. */
:root{
  --papel:#F7F8F6;--branco:#fff;--tinta:#15212B;--tinta-2:#4A5763;--linha:#D5DBDF;--linha-2:#E7EBEE;
  --azul:#1D5FA6;--azul-esc:#164C86;--azul-claro:#E8F0F9;--magenta:#B0246F;--magenta-claro:#FBEFF5;
  --esteira:#2E5E4E;--esteira-linha:rgba(255,255,255,.13);--esteira-linha-forte:rgba(255,255,255,.26);
  --certo:#1E7A4C;--certo-claro:#EAF6EF;--wa:#25D366;--marca:#F0823C;
  --titulo:"B612",ui-sans-serif,system-ui,sans-serif;
  --mono:"B612 Mono",ui-monospace,Consolas,monospace;
  --texto:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
fieldset{min-width:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:17px/1.6 var(--texto)}
img,canvas{max-width:100%}
a{color:var(--azul);text-underline-offset:3px}
a:hover{color:var(--azul-esc)}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:var(--titulo);font-weight:700;line-height:1.15;margin:0 0 .55em;letter-spacing:-.01em}
h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.025em}
h2{font-size:clamp(22px,2.6vw,28px)}
h3{font-size:19px}
p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Barra do topo e rodapé */
.bar{background:var(--tinta);color:#E6EBEF}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:58px}
.logo{font-family:"Archivo",var(--titulo);font-stretch:125%;font-weight:800;font-size:20px;letter-spacing:.05em;color:#fff;text-decoration:none}
.logo span{color:var(--marca)}
.bar nav{display:flex;gap:22px;font-size:15px}
.bar nav a{color:#AEB9C3;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.bar nav a:hover{color:#fff}
.bar nav a[aria-current]{color:#fff;border-color:#fff}
@media (max-width:880px){.bar nav{display:none}}
footer{border-top:1px solid var(--linha);margin-top:72px;padding:28px 0 48px;font-size:15px;color:var(--tinta-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:baseline}
footer ul{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
footer a{color:var(--tinta-2)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:4px;border:0;
  background:var(--azul);color:#fff;font:700 16px/1 var(--texto);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--azul-esc);color:#fff}
.btn[disabled]{background:#9DB3CB;cursor:not-allowed}
.btn.sec{background:var(--branco);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
.btn.sec:hover{background:var(--azul-claro);color:var(--tinta)}
.btn.sec[disabled]{color:#93A0AB;box-shadow:inset 0 0 0 1.5px #C3CCD3;background:var(--branco)}
.btn.wa{background:var(--wa);color:#08321A}
.btn.wa:hover{background:#1FBF5B;color:#08321A}
.btn.sm{min-height:38px;padding:0 14px;font-size:14.5px}
.btn.full{width:100%}

/* Abertura das páginas */
.hero{padding:34px 0 30px;border-bottom:1px solid var(--linha);background:var(--branco)}
.crumbs{font-size:14.5px;color:var(--tinta-2);margin-bottom:26px}
.crumbs a{color:var(--tinta-2)}
.hero h1{max-width:18ch}
.hero p.lead{font-size:19px;line-height:1.55;color:var(--tinta-2);max-width:62ch;margin:0}

/* Texto corrido */
.texto{padding:48px 0 0}
.texto .col{max-width:68ch}
.texto h2{margin-top:1.4em}
.texto h2:first-child{margin-top:0}
.texto p{color:#2A3742}

/* Ferramenta: formulário à esquerda, base de corte à direita */
.tool{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:40px;align-items:start;padding-top:36px}
@media (max-width:940px){.tool{grid-template-columns:minmax(0,1fr);gap:28px}}
.painel{background:var(--branco);border:1px solid var(--linha);border-radius:6px;padding:24px}
@media (max-width:480px){.painel{padding:18px 16px}.palco{padding:40px 12px 30px}}
.painel>h2{font-size:22px;margin-bottom:4px}
.painel .sub{color:var(--tinta-2);font-size:15px;margin-bottom:6px}
form.painel{border:0;background:none;padding:0}
.grupo{border:0;margin:0;padding:22px 0 0;min-width:0}
.grupo+.grupo{margin-top:22px;border-top:1px solid var(--linha)}
.grupo-tit{font:700 18px/1.3 var(--titulo);padding:0;margin:0 0 10px}
.grupo-tit small{font:400 15px var(--texto);color:var(--tinta-2);margin-left:6px}
label.campo,.campo-tit{display:block;font-weight:600;font-size:15.5px;margin:14px 0 6px}
label.campo i{color:var(--magenta);font-style:normal}
input[type=text],input[type=email],input[type=tel]{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid #AEB8C1;border-radius:4px;
  font:17px var(--texto);background:var(--branco);color:var(--tinta)}
input:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(29,95,166,.18)}
input[aria-invalid=true]{border-color:var(--magenta);background:var(--magenta-claro)}
.ajuda{font-size:14.5px;color:var(--tinta-2);margin:7px 0 0;line-height:1.5}
.codigo,.prefixado input,.prefixado span{font-family:var(--mono)}
.prefixado{display:flex}
.prefixado span{display:grid;place-items:center;padding:0 14px;border:1.5px solid #AEB8C1;border-right:0;border-radius:4px 0 0 4px;background:var(--linha-2);font-weight:700}
.prefixado input{border-radius:0 4px 4px 0;letter-spacing:.08em}
.codigo{letter-spacing:.08em}
.opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:8px}
.opcao{position:relative;display:block;border:1.5px solid #C3CCD3;border-radius:4px;padding:11px 12px 11px 40px;cursor:pointer;background:var(--branco);line-height:1.35}
.opcao input{position:absolute;left:13px;top:13px;accent-color:var(--azul);width:17px;height:17px;margin:0}
.opcao strong{display:block;font-size:15.5px}
.opcao span{color:var(--tinta-2);font-size:13.5px}
.opcao:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
.opcao:has(input:focus-visible){outline:3px solid var(--azul);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;margin-top:16px;cursor:pointer}
.check input{accent-color:var(--azul);width:19px;height:19px;margin-top:2px;flex:none}
.nota{border-left:3px solid var(--azul);padding:4px 0 4px 14px;font-size:15px;color:#2A3742;margin-top:18px}

.previa{position:sticky;top:18px}
@media (max-width:940px){.previa{position:static}}
.previa h2{font-size:20px;margin-bottom:2px}
.medida{font-size:14.5px;color:var(--tinta-2);margin:0 0 12px}
/* Base de corte: a grade acompanha a escala da prévia (--mm vem do script; linha forte a cada 1 cm). */
.palco{--mm:8px;position:relative;border-radius:10px;min-height:250px;display:grid;place-items:center;padding:44px 20px 34px;
  background-color:var(--esteira);
  background-image:
    linear-gradient(var(--esteira-linha-forte) 1px,transparent 1px),linear-gradient(90deg,var(--esteira-linha-forte) 1px,transparent 1px),
    linear-gradient(var(--esteira-linha) 1px,transparent 1px),linear-gradient(90deg,var(--esteira-linha) 1px,transparent 1px);
  background-size:calc(var(--mm)*10) calc(var(--mm)*10),calc(var(--mm)*10) calc(var(--mm)*10),calc(var(--mm)*5) calc(var(--mm)*5),calc(var(--mm)*5) calc(var(--mm)*5);
  background-position:center}
.palco::before{content:"grade de 1 cm na escala da etiqueta";position:absolute;left:14px;bottom:9px;font:12.5px var(--texto);color:rgba(255,255,255,.62)}
.palco canvas{display:block;height:auto;border-radius:1.5px;box-shadow:0 1px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.32)}
.falta{background:var(--magenta-claro);border-left:3px solid var(--magenta);color:#5E0F39;padding:10px 12px;font-size:15px;margin:14px 0 0}
.falta:empty{display:none}
.acoes{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px}
.acoes .linha{display:flex;gap:8px}
.acoes .linha select{flex:1;min-width:0;min-height:48px;border:1.5px solid #AEB8C1;border-radius:4px;padding:0 10px;font:16px var(--texto);background:var(--branco);color:var(--tinta)}
.acoes .linha .btn{flex:1}
.escala{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--tinta-2);margin-top:10px}
.escala input{accent-color:var(--azul)}

/* Drones salvos */
.salvos{list-style:none;margin:12px 0 0;padding:0}
.salvos li{display:flex;align-items:center;gap:8px;border-top:1px solid var(--linha);padding:8px 0;font-size:15px}
.salvos li:last-child{border-bottom:1px solid var(--linha)}
.salvos li span{flex:1;font-family:var(--mono);font-size:14.5px}
.salvos li.vazio{border:0}
.salvos button{border:0;background:none;color:var(--azul);font:600 14.5px var(--texto);cursor:pointer;padding:6px;text-decoration:underline;text-underline-offset:3px}
.vazio{color:var(--tinta-2);font-size:14.5px}

/* Lista de ferramentas (índice e "outras ferramentas") */
.ferrs{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--tinta)}
.ferrs li{border-bottom:1px solid var(--linha)}
.ferr{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:center;padding:28px 0;color:var(--tinta);text-decoration:none}
.ferr h2,.ferr h3{font-size:clamp(22px,2.6vw,28px);margin:0 0 6px}
.ferr p{color:var(--tinta-2);margin:0 0 10px;max-width:56ch}
.ferr .abrir{font-weight:700;color:var(--azul);text-decoration:underline;text-underline-offset:4px}
.ferr:hover h2,.ferr:hover h3{color:var(--azul)}
.amostra{justify-self:end;display:grid;place-items:center;width:100%;height:120px;border-radius:8px;background:var(--esteira);
  background-image:linear-gradient(var(--esteira-linha) 1px,transparent 1px),linear-gradient(90deg,var(--esteira-linha) 1px,transparent 1px);background-size:20px 20px}
.amostra .etq{background:#fff;color:#000;font:700 18px var(--mono);padding:9px 14px 8px;border-radius:2px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.amostra .etq small{display:block;font:700 11px var(--titulo);margin-bottom:3px}
.amostra .etq.preta{background:#000;color:#fff;text-align:center}
.amostra .bolhas{display:flex;gap:9px;background:#fff;padding:14px 16px;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.bolha{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--tinta);font:700 13px var(--titulo)}
.bolha.cheia{background:var(--tinta);color:#fff}
@media (max-width:700px){.ferr{grid-template-columns:1fr;gap:16px;padding:24px 0}.amostra{justify-self:stretch;height:100px}}

/* Perguntas frequentes */
.faq{margin-top:64px;max-width:820px}
.faq details{border-top:1px solid var(--linha)}
.faq details:last-child{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;font:700 17.5px/1.4 var(--titulo);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:24px;width:10px;height:10px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(225deg);top:28px}
.faq details>div{padding:0 0 18px;color:#2A3742;max-width:68ch}
.norma{margin-top:56px;max-width:820px}
.norma p{color:#2A3742}
.fontes{font-size:14.5px;color:var(--tinta-2);margin-top:14px;max-width:72ch}

.cta{margin-top:56px;background:var(--azul-claro);border-radius:6px;padding:26px 28px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between}
.cta p{margin:0;max-width:60ch;color:#22303B}
.cta strong{color:var(--tinta);font-family:var(--titulo)}
.outras{margin-top:64px}
.outras>h2{margin-bottom:16px}

/* Barra fixa no celular */
.fixa{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--tinta);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none;gap:10px;align-items:center}
.fixa span{color:#fff;font:700 15px var(--mono);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fixa small{display:block;color:#AEB9C3;font:13px var(--texto)}
@media (max-width:940px){.fixa.on{display:flex}body.tem-fixa{padding-bottom:78px}}

/* Cadastro (janela e formulário do simulado) */
dialog.lead{border:0;border-radius:8px;padding:0;width:min(460px,100% - 32px);box-shadow:0 30px 80px rgba(21,33,43,.4);color:var(--tinta)}
dialog.lead::backdrop{background:rgba(21,33,43,.6)}
dialog.lead form{padding:26px}
dialog.lead h2{font-size:23px}
dialog.lead .fechar{position:absolute;right:8px;top:6px;border:0;background:none;font-size:28px;cursor:pointer;color:var(--tinta-2);padding:4px 10px}
.msg{font-size:15px;color:var(--magenta);min-height:1em;margin:12px 0}
.hp{position:absolute;left:-9999px}

/* Simulado: folha de respostas */
.acesso{max-width:560px;margin:36px 0 0}
.sim-topo{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;background:var(--papel);border-bottom:1.5px solid var(--tinta);padding:12px 0;position:sticky;top:0;z-index:5;margin-top:20px}
.sim-topo .prog{flex:1;min-width:180px;font-size:15px}
.sim-topo .trilho{height:6px;background:var(--linha);margin-top:6px}
.sim-topo .trilho i{display:block;height:100%;width:0;background:var(--azul);transition:width .2s}
.sim-topo .tempo{font:700 17px var(--mono)}
.temas{columns:2 260px;gap:32px;margin:14px 0 0;padding-left:20px;color:#2A3742}
.temas li{margin-bottom:3px}
fieldset.questao{min-width:0;margin:0;border:0;border-bottom:1px solid var(--linha);padding:30px 0;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:8px;scroll-margin-top:84px}
.questao>*{grid-column:2}
.questao .num{grid-column:1;grid-row:1/span 4;font:700 26px/1 var(--titulo);color:var(--tinta)}
.questao .tema{font-size:14.5px;color:var(--azul);font-weight:600}
.questao h3{font:600 18.5px/1.5 var(--texto);margin:4px 0 14px;max-width:66ch;letter-spacing:0}
.alts{display:grid;gap:6px;max-width:66ch}
.alts label{display:flex;gap:14px;align-items:flex-start;padding:8px 10px 8px 6px;border-radius:4px;cursor:pointer;font-size:16.5px;line-height:1.5;position:relative}
.alts label:hover{background:var(--azul-claro)}
.alts input{position:absolute;opacity:0;width:1px;height:1px}
.alts .bolha{flex:none;margin-top:-2px}
.alts input:checked+.bolha{background:var(--tinta);color:#fff}
.alts input:focus-visible+.bolha{outline:3px solid var(--azul);outline-offset:2px}
.corrigido .alts label{cursor:default}
.corrigido .alts label:hover{background:none}
.alts label.certa{background:var(--certo-claro)}
.alts label.certa .bolha{background:var(--certo);border-color:var(--certo);color:#fff}
.alts label.errada{background:var(--magenta-claro)}
.alts label.errada .bolha{background:var(--magenta);border-color:var(--magenta);color:#fff}
.coment{display:none;margin-top:12px;font-size:16px;border-left:3px solid var(--tinta);padding:2px 0 2px 14px;max-width:66ch}
.corrigido .coment{display:block}
.coment .ref{display:block;margin-top:6px;font-size:14.5px;color:var(--tinta-2)}
.resultado{display:none;background:var(--tinta);color:#E6EBEF;border-radius:6px;padding:30px;margin-top:28px}
.resultado.on{display:block}
.resultado h2{color:#fff}
.resultado .nota-final{font:700 68px/1 var(--mono);color:#fff;margin:6px 0 10px}
.resultado table{width:100%;max-width:560px;border-collapse:collapse;margin-top:18px;font-size:15.5px}
.resultado td{padding:8px 0;border-top:1px solid #2E3D4A}
.resultado td:last-child{text-align:right;font-family:var(--mono)}
.resultado .btn.sec{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.sim-fim{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.priv h2{font-size:21px;margin-top:30px}
.priv h2:first-child{margin-top:0}
.priv li{margin-bottom:6px}
@media print{.bar,footer,.sim-topo,.sim-fim,.cta,.fixa,.outras{display:none}fieldset.questao{break-inside:avoid}}