/* guia do estudante — identidade visual própria */
:root{
  --ground:#FCF9F5; --surface:#FFFFFF; --surface-2:#F5EFE7; --surface-3:#EDE4D8;
  --ink:#2A1B33; --ink-2:#4A3B52; --muted:#7C6E84; --line:#E7DDD1; --line-2:#D8CABA;
  --roxo:#671291; --roxo-soft:#F2E7F7; --on-roxo:#FFFFFF;
  --laranja:#C4510B; --laranja-soft:#FBEEE0;
  --maxw:1060px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#191220; --surface:#221929; --surface-2:#2B2034; --surface-3:#372A42;
    --ink:#F4EDF6; --ink-2:#DACFE0; --muted:#A899AF; --line:#372A42; --line-2:#4B3B58;
    --roxo:#CE96EA; --roxo-soft:#2F1F3C; --on-roxo:#1B1222;
    --laranja:#FF9A57; --laranja-soft:#3A2414;
  }
}
:root[data-theme="dark"]{
  --ground:#191220; --surface:#221929; --surface-2:#2B2034; --surface-3:#372A42;
  --ink:#F4EDF6; --ink-2:#DACFE0; --muted:#A899AF; --line:#372A42; --line-2:#4B3B58;
  --roxo:#CE96EA; --roxo-soft:#2F1F3C; --on-roxo:#1B1222;
  --laranja:#FF9A57; --laranja-soft:#3A2414;
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,serif; margin:0; line-height:1.12; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--laranja); outline-offset:3px; border-radius:3px}
.rot{font-family:Karla,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase}

/* ---- seletor de materiais ---- */
.troca{display:grid; grid-template-columns:repeat(auto-fit,minmax(144px,1fr)); gap:9px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line)}
.troca a{display:block; text-decoration:none; border:1px solid var(--line-2); border-radius:11px; padding:11px 14px; background:var(--surface-2); color:var(--ink)}
.troca a.atual{background:var(--roxo-soft); border-color:var(--roxo); cursor:default}
.troca a:not(.atual):hover{background:var(--surface-3)}
.troca .gr{display:block; font-family:Karla,sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.troca a.atual .gr{color:var(--roxo)}
.troca .tt{display:block; font-family:Fraunces,serif; font-weight:600; font-size:15px; line-height:1.2}
.logo-cli{display:block; height:52px; width:auto; margin-bottom:26px}

/* ---- capa ---- */
.capa{background:var(--surface); border-bottom:1px solid var(--line)}
.capa-in{max-width:var(--maxw); margin:0 auto; padding:56px 26px 40px}
.capa .rot{color:var(--laranja)}
h1{font-size:clamp(34px,5.4vw,54px); font-weight:600; margin:16px 0 0; max-width:19ch}
.promessa{margin-top:18px; max-width:60ch; font-size:19px; color:var(--ink-2)}

.arco{display:flex; flex-wrap:wrap; gap:0; margin-top:34px; border-top:1px solid var(--line)}
.arco a{flex:1 1 132px; text-decoration:none; color:var(--ink-2); padding:14px 14px 13px 0; border-top:2px solid transparent; margin-top:-1px}
.arco a:hover{border-top-color:var(--laranja); color:var(--ink)}
.arco .num{display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--muted)}
.arco .nm{display:block; font-family:Fraunces,serif; font-size:16px; font-weight:600; margin-top:3px; line-height:1.2}

/* ---- corpo ---- */
main{max-width:var(--maxw); margin:0 auto; padding:0 26px 90px}
.etapa{padding:52px 0 0; scroll-margin-top:14px}
.etapa + .etapa{border-top:1px solid var(--line)}
.et-cab{display:grid; grid-template-columns:64px minmax(0,1fr); gap:22px; align-items:start}
.et-num{font-family:Fraunces,serif; font-size:42px; font-weight:600; color:var(--roxo); line-height:.9; padding-top:4px}
.et-cab h2{font-size:31px; font-weight:600}
.et-cab .fala{margin-top:13px; font-size:18.5px; color:var(--ink-2); max-width:58ch}
.et-corpo{margin:26px 0 0 86px}
@media (max-width:700px){.et-corpo{margin-left:0} .et-cab{grid-template-columns:44px 1fr; gap:14px} .et-num{font-size:32px}}

.acontece{display:flex; flex-direction:column; gap:19px; margin-bottom:26px}
.item{display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:baseline}
.item::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--roxo); margin-top:9px}
.item h3{font-family:Karla,sans-serif; font-size:17px; font-weight:700; display:inline; margin-right:7px; letter-spacing:0}
.item p{display:inline; color:var(--ink-2); font-size:16.5px}

.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px; margin-top:8px}
.cx{border:1px solid var(--line); border-radius:12px; padding:19px 21px 20px; background:var(--surface)}
.cx.voce{background:var(--laranja-soft); border-color:transparent}
.cx h4{margin:0 0 12px; font-family:Karla,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.cx.voce h4{color:var(--laranja)}
.cx ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.cx li{font-size:16px; line-height:1.45; color:var(--ink-2); padding-left:19px; position:relative}
.cx li::before{content:""; position:absolute; left:2px; top:.6em; width:7px; height:2px; background:var(--line-2)}
.cx.voce li::before{background:var(--laranja)}
.cx li b{color:var(--ink); font-weight:700}

.nota{margin-top:22px; border-left:3px solid var(--roxo); background:var(--roxo-soft); padding:15px 20px; border-radius:0 10px 10px 0}
.nota h4{margin:0 0 6px; font-family:Karla,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--roxo)}
.nota p{font-size:16px; color:var(--ink-2); max-width:66ch}
.nota p + p{margin-top:8px}

/* ---- tabela ---- */
.tabela-wrap{overflow-x:auto; margin-top:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:16px}
th,td{text-align:left; padding:13px 20px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:Karla,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
tr:last-child td{border-bottom:0}
td.val{font-weight:700; white-space:nowrap; color:var(--ink)}
td small{display:block; color:var(--muted); font-size:14.5px; margin-top:3px; white-space:normal; font-weight:400}

/* ---- mudanças ---- */
.mud{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:16px; margin-top:24px}
.mud-cx{border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--surface)}
.mud-cx h3{font-family:Fraunces,serif; font-size:19px; font-weight:600; margin-bottom:7px}
.mud-cx p{font-size:16px; color:var(--ink-2)}
.taxa{display:inline-block; margin-top:11px; font-family:Karla,sans-serif; font-size:13px; font-weight:700; background:var(--surface-2); border-radius:6px; padding:4px 10px; color:var(--ink)}

.fechamento{margin-top:56px; padding:30px 32px; background:var(--roxo); color:var(--on-roxo); border-radius:14px}
.fechamento h2{font-size:26px; font-weight:600; color:var(--on-roxo); max-width:22ch}
.fechamento p{margin-top:12px; max-width:58ch; opacity:.92; font-size:17px}

footer{max-width:var(--maxw); margin:0 auto; padding:0 26px 60px; color:var(--muted); font-size:15px; max-width:74ch}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}