/* ===================== Cutuca — Tutoriais ===================== */
:root{
  --bg:#fff8f1; --panel:#ffffff; --panel-2:#fbf1e7; --borda:#efe2d4;
  --texto:#231a33; --muted:#6b6478; --sinal:#ff5a1f; --sinal-forte:#c2410c; --sinal-dim:rgba(255,90,31,.12);
  --ok:#178a5e; --alerta:#d23a4f; --info:#2f6fd6;
  --sombra:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
  --raio:14px; --lateral:280px;
  --font-display:'Fredoka',system-ui,sans-serif; --font-text:'Figtree',system-ui,sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16111e; --panel:#1f1829; --panel-2:#281f34; --borda:#342a43;
    --texto:#f4eff6; --muted:#a79fb6; --sinal:#ff6a33; --sinal-forte:#ff8a5c; --sinal-dim:rgba(255,106,51,.14);
    --ok:#2fc48b; --alerta:#f25c6e; --info:#6aa2ff;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16111e; --panel:#1f1829; --panel-2:#281f34; --borda:#342a43;
  --texto:#f4eff6; --muted:#a79fb6; --sinal:#ff6a33; --sinal-forte:#ff8a5c; --sinal-dim:rgba(255,106,51,.14);
  --ok:#2fc48b; --alerta:#f25c6e; --info:#6aa2ff;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
  color-scheme: dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--texto);font:16px/1.6 var(--font-text);-webkit-text-size-adjust:100%;}
a{color:var(--sinal-forte);}
button{font:inherit;color:inherit;}
.pular{position:absolute;left:-999px;top:8px;background:var(--sinal);color:#111;padding:8px 12px;border-radius:8px;z-index:50;}
.pular:focus{left:8px;}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--borda);}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--texto);white-space:nowrap;}
.marca strong{font-family:var(--font-display);font-size:1.05rem;}
.marca-logo{height:26px;width:auto;display:block;}
.marca-logo.escuro{display:none;}
:root[data-theme="dark"] .marca-logo.claro{display:none;}
:root[data-theme="dark"] .marca-logo.escuro{display:block;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .marca-logo.claro{display:none;} :root:not([data-theme="light"]) .marca-logo.escuro{display:block;} }
.marca strong.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.marca-sub{font-size:.8rem;color:var(--muted);border-left:1px solid var(--borda);padding-left:8px;}
.busca{position:relative;flex:1;max-width:520px;margin-left:auto;}
.busca input{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--borda);background:var(--panel-2);color:var(--texto);font-size:.95rem;}
.busca input:focus{outline:2px solid var(--sinal);outline-offset:1px;}
.busca-res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--borda);border-radius:12px;box-shadow:var(--sombra);max-height:60vh;overflow:auto;padding:6px;}
.busca-res a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--texto);}
.busca-res a:hover,.busca-res a.ativo{background:var(--sinal-dim);}
.busca-res small{display:block;color:var(--muted);font-size:.8rem;}
.busca-vazio{padding:12px;color:var(--muted);font-size:.9rem;}
.btn-tema,.btn-topicos{background:var(--panel-2);border:1px solid var(--borda);border-radius:10px;padding:8px 12px;cursor:pointer;white-space:nowrap;}
.btn-topicos{display:none;}
.btn-painel{white-space:nowrap;font-size:.88rem;font-weight:600;text-decoration:none;padding:8px 12px;border-radius:10px;background:var(--sinal);color:#231a33;}

/* ---------- lateral ---------- */
.corpo{display:flex;align-items:flex-start;}
.lateral{position:sticky;top:61px;width:var(--lateral);flex:none;height:calc(100vh - 61px);overflow:auto;padding:16px 12px 40px;border-right:1px solid var(--borda);background:var(--panel);}
.lat-grupo{margin-bottom:14px;}
.lat-titulo{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:10px 10px 4px;display:flex;align-items:center;gap:6px;}
.lateral a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--texto);font-size:.9rem;line-height:1.3;}
.lateral a:hover{background:var(--panel-2);}
.lateral a.atual{background:var(--sinal-dim);color:var(--sinal-forte);font-weight:600;}
.lateral a .lido{margin-left:auto;color:var(--ok);font-size:.8rem;}
.lat-inicio{font-weight:600;}
.fundo-lateral{display:none;}

/* ---------- conteúdo ---------- */
.conteudo{flex:1;min-width:0;padding:28px 36px 80px;max-width:900px;}
.conteudo:focus{outline:none;}
.migalha{font-size:.82rem;color:var(--muted);margin-bottom:6px;}
.migalha a{color:var(--muted);}
h1{font-family:var(--font-display);font-weight:600;font-size:1.9rem;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em;}
h2{font-family:var(--font-display);font-weight:600;font-size:1.25rem;margin:32px 0 10px;}
.resumo{font-size:1.05rem;color:var(--muted);margin:0 0 18px;}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.chip{font-size:.78rem;padding:3px 10px;border-radius:20px;background:var(--panel-2);border:1px solid var(--borda);color:var(--muted);}
p{margin:0 0 14px;}
.conteudo ul,.conteudo ol{padding-left:22px;margin:0 0 16px;}
.conteudo li{margin-bottom:6px;}
b,strong{font-weight:600;}
.tecla{display:inline-block;padding:0 7px;border-radius:6px;border:1px solid var(--borda);background:var(--panel-2);font-size:.88em;white-space:nowrap;}
.num{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;background:#ff8a00;color:#111;font-weight:700;font-size:.78rem;margin:0 2px;vertical-align:1px;}

/* passos */
.passos{list-style:none;padding:0;margin:0 0 18px;counter-reset:passo;}
.passo{position:relative;padding:0 0 18px 48px;counter-increment:passo;}
.passo::before{content:counter(passo);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--sinal);color:#231a33;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);}
.passo::after{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:2px;background:var(--borda);}
.passo:last-child::after{display:none;}
.passo > p:first-child{padding-top:4px;}

/* figuras */
figure{margin:6px 0 20px;}
figure button{display:block;padding:0;border:0;background:none;cursor:zoom-in;margin:0 auto;}
figure img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--borda);box-shadow:var(--sombra);background:var(--panel-2);}
figure.celular button{max-width:330px;}
figure.modal button{max-width:360px;}
figure.largo button{max-width:100%;}
figcaption{text-align:center;font-size:.82rem;color:var(--muted);margin-top:8px;}
.lado{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.lado figure{margin:0;}

/* caixas */
.caixa{border-radius:12px;padding:12px 14px 12px 46px;margin:0 0 18px;position:relative;border:1px solid var(--borda);background:var(--panel);}
.caixa::before{position:absolute;left:14px;top:11px;font-size:1.1rem;}
.caixa p:last-child,.caixa ul:last-child{margin-bottom:0;}
.caixa.dica{border-color:rgba(31,157,107,.35);background:rgba(31,157,107,.08);}
.caixa.dica::before{content:"💡";}
.caixa.atencao{border-color:rgba(214,69,61,.35);background:rgba(214,69,61,.07);}
.caixa.atencao::before{content:"⚠️";}
.caixa.info{border-color:rgba(47,111,214,.3);background:rgba(47,111,214,.07);}
.caixa.info::before{content:"ℹ️";}

/* início */
.hero{background:linear-gradient(135deg,var(--sinal-dim),transparent 70%),var(--panel);border:1px solid var(--borda);border-radius:18px;padding:26px;margin-bottom:24px;}
.hero h1{font-size:2rem;}
.progresso{margin-top:16px;}
.barra{height:10px;border-radius:10px;background:var(--panel-2);overflow:hidden;border:1px solid var(--borda);}
.barra div{height:100%;background:linear-gradient(90deg,var(--sinal),#ffb454);border-radius:10px;transition:width .4s;}
.progresso small{display:block;color:var(--muted);margin-top:6px;}
.checklist{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:8px;}
.checklist a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--borda);background:var(--panel);text-decoration:none;color:var(--texto);}
.checklist a:hover{border-color:var(--sinal);}
.checklist .ck{width:26px;height:26px;border-radius:50%;border:2px solid var(--borda);flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--muted);}
.checklist a.feito .ck{background:var(--ok);border-color:var(--ok);color:#fff;}
.checklist .ck-txt small{display:block;color:var(--muted);font-size:.82rem;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:26px;}
.card{border:1px solid var(--borda);background:var(--panel);border-radius:14px;padding:16px;box-shadow:var(--sombra);}
.card h3{font-family:var(--font-display);font-size:1rem;margin:0 0 8px;display:flex;align-items:center;gap:8px;}
.card ul{list-style:none;padding:0;margin:0;}
.card li{margin:0;}
.card a{display:block;padding:5px 0;text-decoration:none;color:var(--texto);font-size:.92rem;}
.card a:hover{color:var(--sinal-forte);}
.card a .lido{color:var(--ok);font-size:.8rem;margin-left:4px;}

/* rodapé do artigo */
.feito-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:34px 0 18px;padding:16px;border-radius:14px;border:1px dashed var(--borda);}
.btn{border:1px solid var(--borda);background:var(--panel-2);border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:600;}
.btn.principal{background:var(--sinal);border-color:var(--sinal);color:#231a33;}
.btn.feito{background:var(--ok);border-color:var(--ok);color:#fff;}
.navegacao{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.navegacao a{display:block;padding:14px 16px;border-radius:12px;border:1px solid var(--borda);background:var(--panel);text-decoration:none;color:var(--texto);}
.navegacao a:hover{border-color:var(--sinal);}
.navegacao small{display:block;color:var(--muted);font-size:.78rem;}
.navegacao .prox{text-align:right;grid-column:2;}
.relacionados{margin-top:22px;}
.relacionados a{display:inline-block;margin:0 8px 8px 0;padding:6px 12px;border-radius:20px;border:1px solid var(--borda);text-decoration:none;color:var(--texto);font-size:.88rem;background:var(--panel);}
.relacionados a:hover{border-color:var(--sinal);}

.faq details{border:1px solid var(--borda);background:var(--panel);border-radius:12px;margin-bottom:10px;}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"＋";float:right;color:var(--muted);}
.faq details[open] summary::after{content:"－";}
.faq details > div{padding:0 16px 14px;}

/* zoom */
.zoom{position:fixed;inset:0;z-index:100;background:rgba(5,7,10,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;}
.zoom[hidden]{display:none;}
.zoom img{max-width:100%;max-height:calc(100vh - 90px);border-radius:12px;}
.zoom p{color:#dfe3ea;font-size:.9rem;margin:10px 0 0;text-align:center;}
.zoom-fechar{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#111;font-size:1.1rem;cursor:pointer;}

/* ---------- celular ---------- */
@media (max-width: 900px){
  .btn-topicos{display:inline-flex;gap:6px;}
  .lateral{position:fixed;left:0;top:0;bottom:0;height:100vh;z-index:60;transform:translateX(-102%);transition:transform .25s;box-shadow:var(--sombra);}
  .lateral.aberta{transform:none;}
  .fundo-lateral.aberta{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45);}
  .conteudo{padding:20px 16px 70px;}
  .marca-sub{display:none;}
  .topo{flex-wrap:wrap;padding:10px 12px;gap:8px;}
  .busca{order:5;flex-basis:100%;max-width:none;margin-left:0;}
  .btn-tema{margin-left:auto;}
  h1{font-size:1.55rem;}
  .hero{padding:20px;}
  .hero h1{font-size:1.6rem;}
  .lado{grid-template-columns:1fr;}
  .btn-topicos span{display:none;}
}
@media (max-width: 420px){ .btn-painel{display:none;} .passo{padding-left:42px;} }
/* rodapé legal */
.rodape-legal{margin:48px 0 0;padding-top:18px;border-top:1px solid var(--borda);font-size:.78rem;line-height:1.5;color:var(--muted);text-align:center;}
.rodape-legal strong{color:var(--texto);}
@media print{ .topo,.lateral,.feito-box,.navegacao{display:none !important;} .conteudo{max-width:none;padding:0;} }