/* ===== Arcanum · Puertas — estilos compartidos de las páginas de cada puerta ===== */
:root {
  --void: #04070c;
  --midnight: #0b2033;
  --card: rgba(13, 32, 51, .55);
  --gold: #ffc76b;
  --gold-soft: #ffd9a0;
  --turquoise: #7dd3fc;
  --crimson: #e34d5e;
  --text: #e8eef6;
  --muted: #8ba3b8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--void);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
}
::selection { background: rgba(255,199,107,.3); }

#sky { position: fixed; inset: 0; z-index: -2; }
.nebula { position: fixed; border-radius: 50%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .8; }
.nebula.n1 { width: 42vw; height: 34vw; top: -8%; left: 58%; background: radial-gradient(circle, rgba(125,211,252,.10), transparent 70%); }
.nebula.n2 { width: 36vw; height: 30vw; top: 30%; left: -12%; background: radial-gradient(circle, rgba(76,152,230,.09), transparent 70%); }
.nebula.n3 { width: 30vw; height: 24vw; top: 70%; left: 62%; background: radial-gradient(circle, rgba(255,143,107,.06), transparent 70%); }
.nebula.k1 { width: 46vw; height: 38vw; top: 18%; left: 40%; background: radial-gradient(circle, rgba(227,77,94,.14), transparent 70%); }
.nebula.k2 { width: 30vw; height: 26vw; top: 60%; left: -6%; background: radial-gradient(circle, rgba(140,20,60,.14), transparent 70%); }

.container { max-width: 880px; margin: 0 auto; padding: 0 26px; }

/* ===== Barra de retorno ===== */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px;
  background: rgba(4,7,12,.78); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(125,211,252,.10);
}
.topbar .brand {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.15rem;
  color: var(--gold); text-decoration: none; letter-spacing: .06em;
}
.back {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--turquoise); text-decoration: none;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  transition: color .25s, transform .25s;
}
.back:hover { color: var(--gold); transform: translateX(-4px); }
.back svg { transition: transform .25s; }
.back:hover svg { transform: translateX(-3px); }

/* ===== Héroe ===== */
.hero { text-align: center; padding: 84px 0 64px; }
.emblem { width: 148px; height: 148px; margin: 0 auto 30px; display: block; filter: drop-shadow(0 0 26px rgba(255,199,107,.35)); }
.emblem.crimson { filter: drop-shadow(0 0 26px rgba(227,77,94,.45)); }
.emblem-img {
  width: min(78vw, 340px); margin: 0 auto 30px; display: block; border-radius: 50%;
  box-shadow: 0 0 90px rgba(227,77,94,.35), 0 24px 60px rgba(4,7,12,.8);
  -webkit-mask-image: radial-gradient(ellipse 97% 90% at 50% 48%, #000 58%, transparent 98%);
  mask-image: radial-gradient(ellipse 97% 90% at 50% 48%, #000 58%, transparent 98%);
}
.eyebrow {
  font-size: .72rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--turquoise); margin-bottom: 14px; font-weight: 500;
}
.eyebrow.crimson { color: var(--crimson); }
h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.1; letter-spacing: .5px;
  background: linear-gradient(180deg, #fff6e4 0%, var(--gold) 55%, #c98a2e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 20px;
}
.hero .lead { color: var(--muted); font-size: 1.08rem; max-width: 620px; margin: 0 auto; }

/* ===== Cuerpo ===== */
section.body { padding: 30px 0 60px; }
.block { margin: 44px 0; }
.block h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; margin-bottom: 14px;
}
.block h2 em { color: var(--gold); font-style: inherit; }
.block p { color: var(--muted); font-size: 1rem; max-width: 660px; }
.block.crimson h2 em { color: var(--crimson); }

.receives { list-style: none; margin-top: 20px; display: grid; gap: 14px; }
.receives li {
  border-left: 2px solid rgba(255,199,107,.45); padding: 4px 0 4px 22px;
  color: var(--text); font-size: .96rem; transition: border-color .3s, transform .3s;
}
.receives li:hover { border-color: var(--gold); transform: translateX(6px); }
.receives li strong { color: var(--gold-soft); font-weight: 500; }
.block.crimson .receives li:hover { border-color: var(--crimson); }
.block.crimson .receives li strong { color: var(--crimson); }

blockquote {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1.2rem, 2.8vw, 1.6rem); color: var(--gold-soft);
  border-left: 2px solid var(--gold); padding-left: 22px; margin: 40px 0;
  font-weight: 500; max-width: 640px;
}
blockquote.crimson { border-color: var(--crimson); }

/* ===== CTA final ===== */
.final { text-align: center; padding: 30px 0 110px; }
.final .whisper { color: var(--muted); font-size: .9rem; margin-top: 16px; font-style: italic; }
.btn {
  display: inline-block; padding: 16px 40px; border-radius: 999px;
  font-weight: 600; text-decoration: none; font-size: .98rem;
  letter-spacing: .06em; transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, #d99b3f);
  color: #1a1206; box-shadow: 0 6px 34px rgba(255,199,107,.35);
}
.btn-gold:hover { box-shadow: 0 10px 44px rgba(255,199,107,.5); }
.btn-crimson {
  background: linear-gradient(135deg, #f0768a, var(--crimson) 60%, #b23246);
  color: #fff5f5; box-shadow: 0 6px 34px rgba(227,77,94,.4);
}
.btn-crimson:hover { box-shadow: 0 10px 44px rgba(227,77,94,.55); }

footer { border-top: 1px solid rgba(125,211,252,.1); padding: 38px 0; color: var(--muted); font-size: .82rem; text-align: center; }
footer a { color: var(--turquoise); text-decoration: none; margin: 0 8px; }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; } .reveal.d3 { transition-delay: .36s; }

@media (max-width: 640px) {
  .hero { padding: 60px 0 46px; }
  .topbar { padding: 14px 18px; }
  .back { font-size: .72rem; letter-spacing: .12em; }
}