/* Treinamento do painel do site da Sabor & Vida.
   Pele do cliente: navy, azul, céu, dourado e Figtree, os mesmos do site. */
:root{
  --navy:#0B1B4B; --navy-escuro:#071233; --azul:#1E70B8; --azul-claro:#4FA3DC;
  --ceu:#A8D5F2; --ceu-leve:#EAF5FC; --dourado:#D9A93A; --vermelho:#BE0A0A;
  --tinta:#111827; --cinza:#5B6472; --linha:#DFE6EF; --papel:#fff; --creme:#F6F9FC;
  --r:16px; --r-sm:10px; --r-lg:24px;
  --sombra:0 8px 24px rgba(11,27,75,.10); --sombra-forte:0 18px 48px rgba(11,27,75,.16);
  --fonte:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --impacto:'Archivo Black','Figtree',sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--fonte);color:var(--tinta);background:var(--papel);line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--azul)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- topo ---------- */
.capa{background:linear-gradient(165deg,var(--navy) 0%,#12336b 58%,#17508f 100%);color:#fff;
  padding:54px 0 60px;position:relative;overflow:hidden}
.capa::after{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;
  background:rgba(168,213,242,.14)}
.capa .wrap{position:relative;z-index:2}
.capa .marca{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.capa .marca img{height:46px;width:auto;background:#fff;border-radius:10px;padding:5px 9px}
.capa .etiqueta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:var(--ceu)}
.capa h1{font-family:var(--impacto);font-size:clamp(2rem,5vw,3.1rem);line-height:1.05;margin:0 0 14px;
  max-width:16ch}
.capa p{margin:0;max-width:62ch;color:#d7e3f2;font-size:1.06rem}
.capa .dados{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px;font-size:.92rem}
.capa .dados b{display:block;font-size:1.5rem;font-family:var(--impacto);line-height:1.1}
.capa .dados span{color:#bcd0e8}

/* ---------- progresso ---------- */
.trilha{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linha)}
.trilha .wrap{display:flex;gap:10px;align-items:center;justify-content:space-between;padding-top:10px;
  padding-bottom:10px;flex-wrap:wrap}
.trilha .passos{display:flex;gap:6px;flex-wrap:wrap}
.trilha a{display:inline-flex;align-items:center;min-height:44px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--linha);text-decoration:none;color:var(--navy);font-weight:700;font-size:.86rem}
.trilha a:hover{border-color:var(--azul);color:var(--azul)}
.trilha a.feito{background:#e4f6ea;border-color:#b7e3c7;color:#17653a}
.trilha .conta{font-size:.84rem;color:var(--cinza);font-weight:700}

/* ---------- módulo ---------- */
.modulo{padding:46px 0;border-top:1px solid var(--linha)}
.modulo:first-of-type{border-top:0}
.modulo .cabeca{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.modulo .numero{flex:0 0 52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--impacto);font-size:1.25rem}
.modulo h2{margin:0 0 6px;font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.15}
.modulo .objetivo{margin:0;color:var(--cinza);max-width:68ch}
.grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.passos{counter-reset:p;margin:0;padding:0;list-style:none}
.passos li{counter-increment:p;position:relative;padding-left:40px;margin-bottom:14px}
.passos li::before{content:counter(p);position:absolute;left:0;top:-1px;width:27px;height:27px;
  border-radius:50%;background:var(--ceu-leve);color:var(--navy);font-weight:800;font-size:.84rem;
  display:grid;place-items:center}
.foto{border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
  background:var(--creme)}
.foto img{width:100%}
.foto figcaption{padding:9px 13px;font-size:.78rem;color:var(--cinza);border-top:1px solid var(--linha);
  background:#fff}
.nota{background:var(--ceu-leve);border-radius:var(--r-sm);padding:14px 16px;margin-top:16px;font-size:.95rem}
.alerta{background:#fff3d6;border-radius:var(--r-sm);padding:14px 16px;margin-top:16px;font-size:.95rem}
.pratica{border:2px dashed var(--ceu);border-radius:var(--r);padding:16px 18px;margin-top:20px;
  background:#fff}
.pratica b{display:block;color:var(--navy);margin-bottom:6px}
.pratica label{display:flex;gap:10px;align-items:flex-start;margin-top:10px;cursor:pointer;min-height:44px}
.pratica input{margin-top:3px;width:20px;height:20px;flex:0 0 20px}

/* ---------- fecho ---------- */
.fecho{background:var(--creme);padding:48px 0}
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:18px}
.cartao h3{margin:0 0 6px;font-size:1.02rem}
.cartao p{margin:0;color:var(--cinza);font-size:.92rem}
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;
  border-radius:999px;background:var(--azul);color:#fff;font-weight:800;text-decoration:none;
  border:0;cursor:pointer}
.botao.vazio{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.botao:focus-visible{outline:3px solid var(--dourado);outline-offset:2px}

footer.rodape{background:var(--navy);color:#cfe0f0;padding:30px 0;font-size:.88rem}
footer.rodape .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
footer.rodape a{color:#fff;display:inline-flex;align-items:center;gap:8px;min-height:44px}
footer.rodape img{height:22px;width:auto}

@media (max-width:900px){
  .grade{grid-template-columns:1fr;gap:18px}
  .modulo{padding:34px 0}
  .trilha{position:static}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
@media print{.trilha,.pratica input{display:none}.modulo{break-inside:avoid}}