/* Layout: app da aluna. Topo fixo com nível e pontos, navegação por abas (hash), conteúdo em cards bege sobre verde profundo. Marca: verde #0a261b, bege #c2b59b, branco, sparkles. */
:root{
  --verde:#0a261b; --verde-2:#0f3326; --verde-3:#154232; --verde-linha:#1f4d3b;
  --bege:#c2b59b; --bege-2:#d9cfb8; --bege-claro:#efe9db; --branco:#ffffff;
  --fg:#efe9db; --fg-muted:#b7c3bb; --fg-on-bege:#0a261b; --fg-on-bege-muted:#4a5a50;
  --ok:#7fc59a; --warn:#e3c26a;
  --f-script:'Pinyon Script','Brush Script MT',cursive;
  --f-serif:'Cormorant Garamond','Times New Roman',Georgia,serif;
  --f-sans:'Montserrat','Segoe UI',Arial,sans-serif;
  --r:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--verde);color:var(--fg);font-family:var(--f-sans);font-size:15px;line-height:1.55;
  background-image:radial-gradient(1200px 600px at 80% -10%,rgba(194,181,155,.14),transparent 60%),radial-gradient(800px 500px at -10% 100%,rgba(194,181,155,.08),transparent 60%);}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--verde)}
a{color:inherit}
button{font-family:inherit;font-size:inherit;cursor:pointer}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:600}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bege);font-weight:600}
.script{font-family:var(--f-script);font-weight:400;font-size:2.6em;line-height:.9;color:var(--branco)}
.serif{font-family:var(--f-serif);letter-spacing:.04em}
.spark{display:inline-block;width:1em;height:1em;vertical-align:-.1em}
.spark path{fill:var(--bege)}

/* topo */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(10,38,27,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--verde-linha)}
header.top .wrap{display:flex;align-items:center;gap:16px;padding-block:12px;flex-wrap:wrap}
.logo{display:flex;align-items:baseline;gap:6px;line-height:1}
.logo .script{font-size:30px}
.logo .serif{font-size:14px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:var(--branco)}
.status{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
.pts{font-family:var(--f-serif);font-size:26px;font-weight:700;color:var(--bege);font-variant-numeric:tabular-nums;line-height:1}
.pts small{font-family:var(--f-sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);display:block;margin-top:4px;font-weight:600}
.lvl{text-align:right;min-width:0}
.lvl b{display:block;font-family:var(--f-serif);font-size:18px;color:var(--branco);font-weight:600;white-space:nowrap}
.lvl .bar{height:5px;width:140px;max-width:100%;background:var(--verde-3);border-radius:4px;overflow:hidden;margin-top:6px;margin-left:auto}
.lvl .bar i{display:block;height:100%;background:var(--bege);border-radius:4px;transition:width .6s ease}
nav.tabs{background:var(--verde-2);border-bottom:1px solid var(--verde-linha)}
nav.tabs .wrap{display:flex;gap:4px;overflow-x:auto;padding-block:6px;scrollbar-width:none}
nav.tabs a{flex:0 0 auto;text-decoration:none;padding:9px 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);border:1px solid transparent}
nav.tabs a.on{color:var(--verde);background:var(--bege);border-color:var(--bege)}
nav.tabs a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--bege);outline-offset:2px}

main .wrap{padding-block:28px 60px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--verde-2);border:1px solid var(--verde-linha);border-radius:var(--r);padding:20px;min-width:0}
.card.bege{background:var(--bege);color:var(--fg-on-bege);border-color:var(--bege)}
.card.bege .eyebrow{color:var(--verde)}
.card.bege .muted{color:var(--fg-on-bege-muted)}
.muted{color:var(--fg-muted)}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;margin-bottom:28px}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1}
.hero h1 .script{font-size:1.5em;display:block;margin-bottom:-.15em}
.hero h1 .serif{display:block;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--branco)}
.hero p{max-width:52ch;color:var(--fg-muted);margin:14px 0 0}
.next{position:relative;overflow:hidden}
.next .big{font-family:var(--f-serif);font-size:24px;font-weight:600;line-height:1.2;margin:8px 0 6px;color:var(--verde)}
.next .sparks{position:absolute;right:14px;top:10px;opacity:.5;font-size:40px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 18px;font-weight:600;font-size:13px;letter-spacing:.04em;border:1px solid var(--bege);background:var(--bege);color:var(--verde);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--bege)}
.card.bege .btn{background:var(--verde);color:var(--bege-claro);border-color:var(--verde)}
.card.bege .btn.ghost{background:transparent;color:var(--verde)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.kpi{background:var(--verde-3);border-radius:14px;padding:14px 16px}
.kpi b{display:block;font-family:var(--f-serif);font-size:30px;font-weight:700;color:var(--bege);line-height:1;font-variant-numeric:tabular-nums}
.kpi span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);font-weight:600;display:block;margin-top:6px}
.chip{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid currentColor}
.chip.ok{color:var(--ok)} .chip.now{color:var(--bege)} .chip.soon{color:var(--fg-muted)}
.card.bege .chip.now{color:var(--verde)}

/* jornada */
.trail{display:grid;gap:14px}
.etapa{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start}
.etapa .sig{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-serif);font-size:34px;font-weight:700;color:var(--bege);border:2px solid var(--verde-linha);background:var(--verde-2);position:relative}
.etapa .sig.done{background:var(--bege);color:var(--verde);border-color:var(--bege)}
.etapa .sig.now{border-color:var(--bege);box-shadow:0 0 0 6px rgba(194,181,155,.15)}
.etapa .sig small{position:absolute;bottom:-8px;font-family:var(--f-sans);font-size:9px;letter-spacing:.1em;background:var(--verde);padding:2px 6px;border-radius:999px;color:var(--fg-muted);text-transform:uppercase;font-weight:700}
.etapa .body{min-width:0}
.etapa .head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline}
.etapa h3{font-family:var(--f-serif);font-size:24px;font-weight:600;color:var(--branco)}
.etapa .meta{font-size:12px;color:var(--fg-muted)}
.etapa p.desc{margin:6px 0 12px;color:var(--fg-muted);max-width:62ch}
.tasks{display:grid;gap:8px}
.task{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;background:var(--verde-3);border-radius:12px;padding:10px 14px;transition:background .2s}
.task.done{background:rgba(194,181,155,.18)}
.task input{appearance:none;width:22px;height:22px;border:2px solid var(--bege);border-radius:50%;margin:0;display:grid;place-items:center;cursor:pointer}
.task input:checked{background:var(--bege)}
.task input:checked::after{content:"";width:10px;height:6px;border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg) translate(1px,-1px)}
.task label{cursor:pointer;min-width:0}
.task label small{display:block;color:var(--fg-muted);font-size:12px}
.task .p{font-family:var(--f-serif);font-weight:700;color:var(--bege);font-size:18px;white-space:nowrap;font-variant-numeric:tabular-nums}
.task.done .p{color:var(--ok)}
.pbar{height:6px;background:var(--verde-3);border-radius:4px;overflow:hidden;margin:12px 0 4px}
.pbar i{display:block;height:100%;background:var(--bege);transition:width .5s}
.sel-line{font-size:12px;color:var(--fg-muted)}

/* roda */
.roda{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:24px;align-items:start}
.roda svg{width:100%;height:auto;max-width:100%}
.areas{display:grid;gap:10px}
.area{display:grid;grid-template-columns:28px 1fr 34px;gap:10px;align-items:center;background:var(--verde-3);border-radius:12px;padding:8px 12px}
.area .n{font-family:var(--f-serif);font-weight:700;color:var(--bege);font-size:18px}
.area label{font-size:13px;font-weight:600}
.area label small{display:block;color:var(--fg-muted);font-weight:400;font-size:12px}
.area input[type=range]{grid-column:2;accent-color:var(--bege);width:100%}
.area .v{grid-column:3;grid-row:1/3;font-family:var(--f-serif);font-size:26px;font-weight:700;text-align:right;color:var(--bege);font-variant-numeric:tabular-nums}
.area .n{grid-row:1/3}
.q{display:grid;gap:10px;margin-top:14px}
.q label{font-size:13px;font-weight:600;display:block}
.q input,.q textarea{width:100%;background:var(--verde);border:1px solid var(--verde-linha);border-radius:10px;color:var(--fg);padding:10px 12px;font-family:inherit;font-size:14px;margin-top:4px}
.q textarea{min-height:64px;resize:vertical}

/* conquistas */
.selos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.selo{text-align:center;padding:18px 10px;border-radius:14px;background:var(--verde-3);border:1px solid var(--verde-linha);opacity:.45;filter:grayscale(1)}
.selo.on{opacity:1;filter:none;background:var(--bege);color:var(--verde);border-color:var(--bege)}
.selo .ic{font-family:var(--f-serif);font-size:34px;font-weight:700;line-height:1}
.selo b{display:block;font-size:12px;margin-top:8px;text-transform:uppercase;letter-spacing:.08em}
.selo small{display:block;font-size:11px;opacity:.8;margin-top:4px}
.levels{display:grid;gap:8px}
.level{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--verde-3)}
.level.on{background:var(--bege);color:var(--verde)}
.level .dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--bege);display:grid;place-items:center;font-family:var(--f-serif);font-weight:700}
.level.on .dot{background:var(--verde);color:var(--bege)}
.level b{font-family:var(--f-serif);font-size:19px;font-weight:600}
.level small{display:block;font-size:12px;opacity:.8}
.level .min{font-variant-numeric:tabular-nums;font-family:var(--f-serif);font-weight:700;font-size:18px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--verde-linha);vertical-align:top}
th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bege)}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-serif);font-weight:700;font-size:17px;color:var(--bege);white-space:nowrap}
.tbl{overflow-x:auto}
.card.bege th{color:var(--verde)} .card.bege td{border-color:rgba(10,38,27,.15)} .card.bege td.num{color:var(--verde)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--bege);color:var(--verde);padding:12px 20px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;transition:.3s;z-index:20;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 32px);text-overflow:ellipsis;overflow:hidden}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
canvas#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}
.sect{margin-top:34px}
.sect h2{font-family:var(--f-serif);font-size:30px;font-weight:600;color:var(--branco);margin-bottom:4px}
.sect .eyebrow{margin-bottom:6px;display:block}
.note{font-size:12px;color:var(--fg-muted);border-left:2px solid var(--bege);padding-left:10px}
footer{border-top:1px solid var(--verde-linha);padding-block:24px;text-align:center;font-size:12px;color:var(--fg-muted)}
/* ferramentas */
.frase{margin-top:18px;padding:14px 18px;border-left:2px solid var(--bege);background:rgba(194,181,155,.08);border-radius:0 14px 14px 0}
.frase .serif{font-size:22px;color:var(--branco);margin-top:4px;line-height:1.25}
.frase-form{display:grid;gap:8px}
.frase-form span{font-family:var(--f-serif);font-size:18px;font-weight:600}
.frase-form input{width:100%;background:rgba(10,38,27,.08);border:1px solid rgba(10,38,27,.25);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;color:var(--verde)}
.ganchos,.objecoes{display:grid;gap:8px}
.gancho{text-align:left;background:var(--verde-3);border:1px solid transparent;border-radius:12px;padding:10px 14px;color:var(--fg);font-size:13px;line-height:1.4}
.gancho:hover{border-color:var(--bege)}
.gancho small{display:block;color:var(--fg-muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.obj{background:var(--verde-3);border-radius:12px;padding:10px 14px;font-size:13px}
.obj b{display:block;color:var(--bege);font-family:var(--f-serif);font-size:17px;margin-bottom:2px}
.obj.open .r{display:block}.obj .r{display:none;margin-top:6px;color:var(--fg)}
.obj{cursor:pointer}
@media (max-width:720px){
  .hero{grid-template-columns:1fr}
  .roda{grid-template-columns:1fr}
  .etapa{grid-template-columns:56px 1fr}
  .etapa .sig{width:56px;height:56px;font-size:26px}
  .status{width:100%;margin-left:0;justify-content:space-between}
  .lvl .bar{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Ajustes do app (fora do protótipo) */
.spark{fill:var(--bege)}
.pts,.kpi b,.task .p,td.num,.level .min,.level span.serif,.area .v{font-variant-numeric:lining-nums tabular-nums}

/* acessibilidade */
.pular{position:absolute;left:-9999px;top:8px;z-index:30;background:var(--bege);color:var(--verde);padding:10px 16px;border-radius:999px;font-weight:600}
.pular:focus{left:16px}
.logo{text-decoration:none}

/* topo: texto do próximo nível */
.lvl-falta{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--fg-muted);margin-top:5px;white-space:nowrap}
.pts.pulso{animation:pulso .7s ease}
@keyframes pulso{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}

/* títulos de página */
.titulo-pagina{font-size:34px;color:var(--branco);margin-bottom:6px}
.intro{max-width:62ch;margin:0 0 22px}
.jornada-topo{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:6px}
.kpis-jornada{grid-template-columns:repeat(2,minmax(120px,1fr));margin-bottom:22px}
.kpi b small{font-size:.55em;color:var(--fg-muted);font-weight:600;margin-left:2px}
.card.aviso{margin-bottom:16px;display:flex;gap:10px;align-items:center}

/* jornada */
ul.tasks{list-style:none;margin:0;padding:0}
.etapa .sub{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--fg-muted)}
.etapa.atual{border-color:rgba(194,181,155,.55);box-shadow:0 0 0 1px rgba(194,181,155,.18),0 18px 40px -24px rgba(0,0,0,.6)}
.etapa.bloqueada .tasks{opacity:.62}
.task{min-height:52px;transition:background .2s,opacity .2s}
.task input:disabled{cursor:default;opacity:.55}
.task input:checked:disabled{opacity:1}
.task.enviada{background:rgba(227,194,106,.12)}
.task.enviada input:checked{background:transparent;border-color:var(--warn)}
.task.enviada input:checked::after{border-color:var(--warn)}
.task.salvando{opacity:.6}
.task .estado{color:var(--bege);font-weight:600;margin-top:2px}
.task .estado.devolvida{color:var(--warn)}
.btn.mini{padding:7px 12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.task input:checked{animation:marca .35s ease}
@keyframes marca{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* rodapé */
.rodape{border-top:1px solid var(--verde-linha)}
.rodape .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:18px 28px;font-size:13px}
.rodape form{margin:0}
button.link{background:none;border:0;color:var(--bege);text-decoration:underline;padding:8px 4px;font-size:13px}

/* porta de entrada (login, termo) */
body.porta main .wrap{padding-block:0}
.porta-wrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:48px;gap:28px}
.porta-marca{text-align:center;line-height:1}
.porta-marca .script{display:block;font-size:clamp(64px,14vw,96px)}
.porta-marca .serif{display:block;text-transform:uppercase;letter-spacing:.3em;font-weight:700;color:var(--branco);font-size:clamp(16px,3.4vw,22px);margin-top:-4px;padding-left:.3em}
.porta-linha{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bege);font-weight:600}
.porta-card{width:100%;max-width:460px;padding:32px 28px}
.porta-titulo{font-size:30px;color:var(--branco);margin-bottom:10px;line-height:1.15}
.porta-icone{font-size:34px;margin-bottom:6px}
.porta-rodape{font-size:12.5px;text-align:center;max-width:40ch;margin:0}
.form{display:grid;gap:14px;margin-top:22px}
.campo{display:grid;gap:6px}
.campo span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--bege)}
.campo input{width:100%;min-height:50px;background:var(--verde);border:1px solid var(--verde-linha);border-radius:12px;color:var(--fg);padding:12px 14px;font-family:inherit;font-size:16px;transition:border-color .2s}
.campo input:focus{border-color:var(--bege);outline:none;box-shadow:0 0 0 3px rgba(194,181,155,.18)}
.campo input[aria-invalid=true]{border-color:var(--warn)}
.btn.grande{justify-content:center;min-height:50px;font-size:14px;width:100%;text-decoration:none}
.erro{margin:0;color:var(--warn);font-size:13.5px;font-weight:500}
.nota{font-size:13px;margin:18px 0 0}
.check{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--bege)}
.termo{max-height:260px;overflow:auto;margin-top:18px;padding:16px 18px;background:var(--verde);border:1px solid var(--verde-linha);border-radius:12px;font-size:13.5px}
.termo h2{font-family:var(--f-sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bege);margin:14px 0 4px}
.termo h2:first-child{margin-top:0}
.termo p{margin:0;color:var(--fg-muted)}

@media (max-width:640px){
  .jornada-topo{grid-template-columns:1fr;gap:0}
  .titulo-pagina{font-size:28px}
  .etapa{grid-template-columns:52px 1fr;gap:12px}
  .etapa .sig{width:52px;height:52px;font-size:26px}
  .etapa h3{font-size:21px}
  .card{padding:16px}
  .task{grid-template-columns:24px 1fr auto;gap:10px;padding:10px 12px}
  header.top .wrap{gap:8px 16px}
  .lvl .bar{width:120px}
}
.toast{white-space:normal;text-align:center;line-height:1.35;border-radius:22px;width:max-content;max-width:min(520px,calc(100vw - 32px));box-shadow:0 12px 30px -12px rgba(0,0,0,.55)}