:root{
  --paper:#EEEFF4; --plate:#FFFFFF; --plate2:#E4E6EF; --plate3:#F6F7FA;
  --ink:#141828; --ink-soft:#565E7A; --line:#D2D6E2; --line-soft:#E4E7F0;
  --flux:#4B3FCF; --flux-soft:rgba(75,63,207,.10); --flux-line:rgba(75,63,207,.28);
  --ember:#B85B24; --ember-soft:rgba(184,91,36,.12);
  --ok:#146B54; --grid:rgba(20,24,40,.05);
  --shadow:0 1px 2px rgba(20,24,40,.05),0 10px 30px -18px rgba(20,24,40,.3);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E111C; --plate:#161B2B; --plate2:#1E2438; --plate3:#131828;
    --ink:#E8EAF4; --ink-soft:#969DB8; --line:#2A3149; --line-soft:#222840;
    --flux:#9186FF; --flux-soft:rgba(145,134,255,.14); --flux-line:rgba(145,134,255,.34);
    --ember:#E39A5E; --ember-soft:rgba(227,154,94,.14);
    --ok:#4FBE99; --grid:rgba(232,234,244,.045);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0E111C; --plate:#161B2B; --plate2:#1E2438; --plate3:#131828;
  --ink:#E8EAF4; --ink-soft:#969DB8; --line:#2A3149; --line-soft:#222840;
  --flux:#9186FF; --flux-soft:rgba(145,134,255,.14); --flux-line:rgba(145,134,255,.34);
  --ember:#E39A5E; --ember-soft:rgba(227,154,94,.14);
  --ok:#4FBE99; --grid:rgba(232,234,244,.045);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -20px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px}
.shell{max-width:1120px;margin:0 auto;padding:0 24px 100px}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft)}
.marca{display:flex;align-items:baseline;gap:10px}
.marca .sig{font:600 1.42rem/1 'Fraunces',Georgia,serif;color:var(--flux)}
.marca b{font:600 1.08rem/1 'Fraunces',Georgia,serif}
.marca span{font:400 .7rem/1 'JetBrains Mono',monospace;color:var(--ink-soft);
  letter-spacing:.1em;text-transform:uppercase}
.topo nav{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.tbtn{border:1px solid var(--line);background:var(--plate);color:var(--ink);border-radius:9px;
  padding:9px 14px;font:500 .82rem/1 'Public Sans',sans-serif;cursor:pointer;text-decoration:none;
  transition:.18s;white-space:nowrap}
.tbtn:hover{border-color:var(--flux-line);color:var(--flux)}
.tbtn.pri{background:var(--flux);border-color:var(--flux);color:#fff}
:root[data-theme="dark"] .tbtn.pri,:root:not([data-theme="light"]) .tbtn.pri{color:#0E111C}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .tbtn.pri{color:#fff}}
.tbtn.pri:hover{filter:brightness(1.08);color:#fff}
:root[data-theme="dark"] .tbtn.pri:hover{color:#0E111C}
.icone{width:38px;height:38px;display:grid;place-items:center;padding:0;font-size:1rem}

/* abertura */
.abertura{padding:64px 0 40px;max-width:74ch}
.eyebrow{font:500 .72rem/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:14px}
h1{font:600 clamp(2.3rem,5.4vw,3.5rem)/1.06 'Fraunces',Georgia,serif;margin:0 0 20px;
  letter-spacing:-.015em;text-wrap:balance}
.lede{font:400 1.24rem/1.68 'Public Sans',sans-serif;color:var(--ink);max-width:64ch;margin:0 0 14px}
.lede2{font:400 1.04rem/1.72 'Public Sans',sans-serif;color:var(--ink-soft);max-width:66ch;margin:0}
.numeros{display:flex;gap:34px;flex-wrap:wrap;margin:38px 0 0;padding-top:26px;border-top:1px solid var(--line-soft)}
.numeros div{display:grid;gap:3px}
.numeros b{font:600 1.72rem/1 'Fraunces',Georgia,serif;font-variant-numeric:tabular-nums}
.numeros span{font:400 .74rem/1 'JetBrains Mono',monospace;color:var(--ink-soft);letter-spacing:.05em}

/* onde começar */
.comece{margin:52px 0 0;border:1px solid var(--flux-line);border-radius:16px;background:var(--plate);
  padding:26px 28px;box-shadow:var(--shadow);display:grid;gap:14px}
.comece h2{font:600 1.3rem/1.3 'Fraunces',Georgia,serif;margin:0}
.comece p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.68;max-width:64ch}
.comece .acao{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.proximo{font:500 .95rem/1.5 'Public Sans',sans-serif;color:var(--ink);
  padding:12px 15px;border-radius:10px;background:var(--flux-soft);border:1px solid var(--flux-line)}
.proximo b{color:var(--flux)}

/* superfícies */
h2.sec{font:600 1.75rem/1.2 'Fraunces',Georgia,serif;margin:76px 0 8px;letter-spacing:-.01em}
.subsec{color:var(--ink-soft);font-size:1.02rem;line-height:1.7;max-width:66ch;margin:0 0 26px}
.superf{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.sup{border:1px solid var(--line);border-radius:14px;background:var(--plate);padding:22px;display:grid;gap:9px;
  transition:.2s;text-decoration:none;color:inherit}
.sup:hover{border-color:var(--flux-line);transform:translateY(-2px);box-shadow:var(--shadow)}
.sup .q{font:500 .7rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--flux)}
.sup h3{font:600 1.16rem/1.28 'Fraunces',Georgia,serif;margin:0}
.sup p{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.62}
.sup .quando{font:400 .84rem/1.5 'Public Sans',sans-serif;color:var(--ink);
  border-top:1px solid var(--line-soft);padding-top:10px;margin-top:4px}
.sup .quando b{color:var(--ember)}

/* espinha dos módulos */
.espinha{position:relative;margin-top:30px;padding-left:74px}
.espinha::before{content:"";position:absolute;left:26px;top:14px;bottom:70px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#4B3FCF,#7E4FBE,#B85B24)}
.mod{position:relative;margin-bottom:16px}
.mod::before{content:"";position:absolute;left:-58px;top:30px;width:18px;height:18px;border-radius:50%;
  background:var(--paper);border:3px solid var(--mc,var(--flux));z-index:2}
.mod.feito::before{background:var(--mc,var(--flux))}
.mcard{border:1px solid var(--line);border-radius:16px;background:var(--plate);overflow:hidden;
  transition:.2s;box-shadow:var(--shadow)}
.mcard:hover{border-color:var(--flux-line)}
.mtopo{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0;cursor:pointer}
.mtopo .cap{position:relative;min-height:150px;overflow:hidden}
.mtopo .cap img{width:100%;height:100%;object-fit:cover;display:block}
.mtopo .cap::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 40%,var(--plate) 100%);opacity:.9}
.mtxt{padding:20px 22px;display:grid;gap:7px;align-content:start}
.mcod{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.mcod .c,.mnums .aut,.mnums .aut b{color:var(--mc,var(--flux))}
.mcod .c{font:600 1.02rem/1 'JetBrains Mono',monospace}
/* A paleta dos módulos é fixa e nasceu para fundo claro. Sobre o painel escuro
   os oito códigos ficavam entre 2,37:1 e 4,26:1. A mistura leva o pior caso a
   4,55:1 sem perder a identidade de cor de cada módulo. */
:root[data-theme="dark"] .mcod .c,:root:not([data-theme="light"]) .mcod .c,
:root[data-theme="dark"] .mnums .aut,:root:not([data-theme="light"]) .mnums .aut,
:root[data-theme="dark"] .mnums .aut b,:root:not([data-theme="light"]) .mnums .aut b{
  color:color-mix(in srgb, var(--mc,var(--flux)) 71%, #FFFFFF)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .mcod .c,
  :root:not([data-theme="dark"]) .mnums .aut,
  :root:not([data-theme="dark"]) .mnums .aut b{
    color:color-mix(in srgb, var(--mc,var(--flux)) 92%, #000000)}
}
.mcod .sem{font:400 .74rem/1 'JetBrains Mono',monospace;color:var(--ink-soft)}
.mcod .est{margin-left:auto;font:500 .7rem/1 'JetBrains Mono',monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.mcard.feito .mcod .est{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.mtxt h3{font:600 1.28rem/1.25 'Fraunces',Georgia,serif;margin:0}
.mlema{font:400 .96rem/1.6 'Public Sans',sans-serif;color:var(--ink-soft);max-width:60ch;margin:0}
.mnums{display:flex;gap:16px;flex-wrap:wrap;font:400 .74rem/1 'JetBrains Mono',monospace;color:var(--ink-soft);margin-top:3px}
.mnums b{color:var(--ink);font-weight:500}
.portas{display:flex;gap:8px;flex-wrap:wrap;padding:0 22px 20px}
.porta{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--plate3);
  color:var(--ink);border-radius:10px;padding:10px 14px;font:500 .84rem/1 'Public Sans',sans-serif;
  text-decoration:none;cursor:pointer;transition:.18s}
.porta:hover{border-color:var(--flux-line);color:var(--flux);background:var(--flux-soft)}
.porta .p{width:7px;height:7px;border-radius:50%;background:var(--pc,var(--flux));flex:none}
.porta.marc{margin-left:auto}
.detalhe{display:none;border-top:1px solid var(--line-soft);padding:20px 22px 22px;
  background:var(--plate3);gap:24px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.mcard.aberto .detalhe{display:grid}
.bloco h4{font:500 .7rem/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px}
.bloco ol,.bloco ul{margin:0;padding-left:18px;display:grid;gap:6px}
.bloco li{font-size:.9rem;line-height:1.5;color:var(--ink)}
.bloco li a{color:var(--flux);text-decoration:none;border-bottom:1px solid var(--flux-line)}
.bloco p{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-soft)}
.livro{display:grid;gap:2px;margin-bottom:12px}
.livro b{font:600 .94rem/1.35 'Fraunces',Georgia,serif;color:var(--ink)}
.livro span{font-size:.82rem;color:var(--ink-soft);line-height:1.45}

/* ritual */
.ritual{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
.passo{border:1px solid var(--line);border-radius:14px;background:var(--plate);padding:20px;display:grid;gap:7px}
.passo .n{font:600 1.5rem/1 'Fraunces',Georgia,serif;color:var(--flux)}
.passo b{font:600 1.02rem/1.3 'Fraunces',Georgia,serif}
.passo p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}

.aviso{margin-top:26px;border-left:3px solid var(--ember);background:var(--ember-soft);
  padding:16px 20px;border-radius:0 10px 10px 0;font-size:.96rem;line-height:1.7;color:var(--ink);max-width:70ch}
.aviso b{color:var(--ember)}
footer{margin-top:80px;padding-top:26px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:400 .78rem/1.6 'JetBrains Mono',monospace;color:var(--ink-soft)}

@media (max-width:720px){
  .shell{padding:0 14px 70px}
  .espinha{padding-left:40px}
  .espinha::before{left:11px}
  .mod::before{left:-38px;width:14px;height:14px}
  .mtopo{grid-template-columns:1fr}
  .mtopo .cap{min-height:110px}
  .mtopo .cap::after{background:linear-gradient(180deg,transparent 30%,var(--plate) 100%)}
  .abertura{padding:40px 0 24px}
  .porta.marc{margin-left:0}
}