/* Sistema visual dos hubs DSEC — copiado do linktree do madureira.xyz:
   Fraunces display + Geist Mono rótulo, cartão de vidro (blur 40 / sat 135%),
   borda superior clareada, sombra interna. Ver madureira-site .glass-card. */
:root{
  --bg:#08080a; --fg:#fff;
  --muted:rgba(255,255,255,.78); --faint:rgba(255,255,255,.60); --dim:rgba(255,255,255,.44);
  --divider:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.055); --glass-hover:rgba(255,255,255,.10);
  --glass-br:rgba(255,255,255,.11); --glass-br-hover:rgba(255,255,255,.22);
  --ring:rgba(255,255,255,.16);
  --accent:#fff; --accent-fg:#000;
  --serif:"Fraunces","Cormorant Garamond","Times New Roman",Georgia,serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);min-height:100vh;font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── fundo: imagem + escurecimento + vinheta ─────────────── */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg .pic{position:absolute;inset:0;background-size:cover;background-position:center top;
  background-repeat:repeat-y;opacity:var(--bg-op,.34)}
/* Dot grid desenhado em CSS. A imagem original era quase preta (luminância
   0,9), então some sob qualquer escurecimento. Aqui o brilho é nosso. */
.bg .dots{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.30) 1.1px, transparent 1.1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.15) 0%, #000 30%, #000 62%, transparent 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.15) 0%, #000 30%, #000 62%, transparent 100%)}
.bg .fade{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.80) 42%, rgba(8,8,10,.96) 100%)}
.bg .vig{position:absolute;inset:0;
  background:radial-gradient(115% 78% at 50% 0%, rgba(255,255,255,.05) 0%, transparent 58%)}

.wrap{position:relative;z-index:1;max-width:530px;margin:0 auto;padding:52px 20px 70px}

/* ── topo ─────────────────────────────────────────────────── */
.avatar{width:104px;height:104px;border-radius:50%;margin:0 auto;object-fit:cover;
  border:1px solid var(--ring);box-shadow:0 8px 32px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12)}
.name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,7vw,38px);
  text-align:center;letter-spacing:-.01em;margin-top:20px;line-height:1.1}
.handle{font-family:var(--mono);text-align:center;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-top:9px}
.bio{text-align:center;font-size:15px;color:var(--muted);margin:18px auto 0;max-width:40ch;line-height:1.55}
.bio em{font-style:normal;color:var(--fg);font-weight:500}
.rule{width:44px;height:1px;background:var(--divider);margin:26px auto 0}

.social{display:flex;justify-content:center;gap:10px;margin-top:22px}
.social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);color:var(--faint);
  transition:all 260ms cubic-bezier(.25,.46,.45,.94)}
.social a:hover{background:rgba(255,255,255,.11);color:#fff;border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.social svg{width:17px;height:17px;fill:currentColor}

/* ── card, anatomia do madureira ──────────────────────────── */
.cards{margin-top:30px}
.card{display:flex;align-items:center;gap:16px;padding:18px 19px;border-radius:18px;min-height:104px;
  background:var(--glass);border:1px solid var(--glass-br);border-top-color:rgba(255,255,255,.30);
  backdrop-filter:blur(40px) saturate(135%);-webkit-backdrop-filter:blur(40px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.05), 0 8px 32px rgba(0,0,0,.42);
  margin-bottom:12px;transition:all 320ms cubic-bezier(.25,.46,.45,.94);
  opacity:0;transform:translateY(16px);animation:rise .46s cubic-bezier(.25,.46,.45,.94) forwards}
.card:hover{background:var(--glass-hover);border-color:var(--glass-br-hover);
  transform:translateY(-2px) scale(1.01);box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 36px rgba(0,0,0,.5)}
.card:active{transform:scale(.985)}
@keyframes rise{to{opacity:1;transform:none}}
.card:nth-child(1){animation-delay:.08s}.card:nth-child(2){animation-delay:.16s}
.card:nth-child(3){animation-delay:.24s}.card:nth-child(4){animation-delay:.32s}

/* tile do logo: fundo claro pra logo escura ou clara funcionar */
.tile{width:58px;height:58px;border-radius:14px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:#0a0a0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.16), 0 3px 12px rgba(0,0,0,.5);
  transition:box-shadow 320ms cubic-bezier(.25,.46,.45,.94)}
.card:hover .tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.22), 0 4px 16px rgba(0,0,0,.6)}
.tile img{width:66%;height:66%;object-fit:contain}
.tile.glyph{font-size:21px;color:rgba(255,255,255,.82)}

.card .tx{flex:1;min-width:0}
.card .eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dim);display:block;margin-bottom:7px}
.card .t{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;
  letter-spacing:-.012em;line-height:1.18;display:block}
.card .s{font-size:13.5px;color:var(--faint);margin-top:6px;line-height:1.45;display:block}
.card .go{color:var(--dim);flex:none;font-size:16px;transition:all 260ms}
.card:hover .go{color:#fff;transform:translate(2px,-2px)}

/* ── grade de guias (miniaturas) ──────────────────────────── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}
.grid.solo{grid-template-columns:1fr}
.grid.solo .thumb{aspect-ratio:16/7}
.grid.solo .mark{font-size:60px}
.gcard .thumb .badge{position:absolute;left:13px;top:12px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:4px 9px;
  backdrop-filter:blur(8px)}
.gcard .meta{display:flex;gap:14px;margin-top:11px;padding-top:11px;border-top:1px solid var(--divider);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.intro{font-size:15px;color:var(--muted);line-height:1.6;max-width:46ch;margin-top:6px}
@media(max-width:420px){.grid{grid-template-columns:1fr}}
.gcard{border-radius:16px;overflow:hidden;background:var(--glass);border:1px solid var(--glass-br);
  border-top-color:rgba(255,255,255,.26);
  backdrop-filter:blur(40px) saturate(135%);-webkit-backdrop-filter:blur(40px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 28px rgba(0,0,0,.42);
  transition:all 320ms cubic-bezier(.25,.46,.45,.94);display:block}
.gcard:hover{transform:translateY(-3px);border-color:var(--glass-br-hover);box-shadow:0 12px 36px rgba(0,0,0,.55)}
.gcard .thumb{aspect-ratio:4/3;background:#101014;position:relative;overflow:hidden;display:grid;place-items:center}
.gcard .thumb .mark{font-family:var(--serif);font-style:italic;font-size:44px;color:rgba(255,255,255,.12)}
.gcard .thumb.pattern{background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);background-size:13px 13px}
.gcard .body{padding:14px 15px 16px}
.gcard .k{font-family:var(--mono);font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim)}
.gcard .h{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.24;margin-top:8px}
.gcard .d{font-size:12.5px;color:var(--faint);margin-top:7px;line-height:1.45}

/* ── seções ───────────────────────────────────────────────── */
.sec{margin-top:34px}
.sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:15px}
.sec-h .n{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.14em}
.sec-h .l{font-family:var(--serif);font-style:italic;font-size:19px}
.sec-h:after{content:"";flex:1;height:1px;background:var(--divider)}

/* ── livro ────────────────────────────────────────────────── */
.book{display:flex;gap:18px;align-items:flex-start}
.book .cover{width:118px;flex:none;border-radius:6px;overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.10);
  transition:transform 320ms cubic-bezier(.25,.46,.45,.94)}
.hero:hover .book .cover{transform:translateY(-4px) rotate(-1.5deg)}
.book .info{flex:1;min-width:0}
@media(max-width:420px){.book{gap:14px}.book .cover{width:94px}}
.hero{border-radius:18px;padding:22px;background:var(--glass);border:1px solid var(--glass-br);
  border-top-color:rgba(255,255,255,.30);
  backdrop-filter:blur(40px) saturate(135%);-webkit-backdrop-filter:blur(40px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 8px 32px rgba(0,0,0,.42)}
.hero .kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim)}
.hero h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;margin:10px 0 8px;line-height:1.2}
.hero p{font-size:13.5px;color:var(--faint);line-height:1.5}

/* ── formulário ───────────────────────────────────────────── */
.form{display:flex;gap:8px;margin-top:17px;flex-wrap:wrap}
.form input{flex:1;min-width:180px;background:rgba(255,255,255,.05);border:1px solid var(--glass-br);
  border-radius:12px;padding:13px 15px;color:var(--fg);font-family:inherit;font-size:14.5px}
.form input::placeholder{color:var(--dim)}
.form input:focus{outline:none;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.09)}
.form button{background:var(--accent);color:var(--accent-fg);border:0;border-radius:12px;padding:13px 22px;
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:all 260ms}
.form button:hover{opacity:.87;transform:translateY(-1px)}
.form button:disabled{opacity:.5;cursor:default;transform:none}
.msg{font-size:13px;margin-top:11px;line-height:1.45;min-height:1.2em}
.msg.ok{color:#8ef07a}.msg.err{color:#ff90a4}
.fine{font-size:11.5px;color:var(--dim);margin-top:11px;line-height:1.5}

footer{text-align:center;margin-top:44px;padding-top:22px;border-top:1px solid var(--divider);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);line-height:2}
footer a{color:var(--faint)}
footer a:hover{color:#fff}

/* ── página de guia (leitura) ─────────────────────────────── */
.read{max-width:660px;margin:0 auto;padding:44px 22px 80px;position:relative;z-index:1}
.back{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.back:hover{color:#fff}
.read h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,6vw,38px);
  line-height:1.14;margin:22px 0 14px;letter-spacing:-.015em}
.read .lede{font-size:16.5px;color:var(--muted);line-height:1.6}
.gate{margin-top:30px}
.locked{filter:blur(6px);pointer-events:none;user-select:none;opacity:.5;max-height:280px;overflow:hidden}
.unlocked{filter:none;pointer-events:auto;user-select:auto;opacity:1;max-height:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .card{opacity:1!important;transform:none!important}}