/* Harlequin — El Umbral (rito de iniciación). Design system = styles.css del sitio (misma paleta, fuentes,
   oro, carmesí, mesh de rombos). Externalizado del <style> inline porque el CSP del sitio (style-src 'self')
   bloquea el estilo inline. El look es el de Harlequin; el logo es el real /logo-gold.png (nunca un dibujo). */
:root{
  --bg:#0a0a0f; --bg-2:#101018; --veil:#15151f;
  --ink:#e9e6df; --muted:#8f8a7e;
  --gold:#d4af6a; --gold-soft:#b9974f; --gold-bright:#e6c26a;
  --crimson:#9b2335; --teal:#1f5d5a;
  --line:rgba(212,175,106,.18); --edge:rgba(212,175,106,.28);
  --serif:Georgia,"Times New Roman",Cambria,"Noto Serif",serif;
  --sans:"Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(155,35,53,.16), transparent 60%),
    radial-gradient(900px 600px at 50% 0, rgba(212,175,106,.08), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow-x:hidden;
}
/* Harlequin rhomb lattice (site-wide motif): faint gold + crimson diamonds, radially masked. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 43px, rgba(212,175,106,.038) 43px 44px),
    repeating-linear-gradient(-45deg, transparent 0 43px, rgba(155,35,53,.038) 43px 44px);
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, #000 45%, transparent 92%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, #000 45%, transparent 92%);
}
.stage{position:relative; z-index:1; width:min(680px,92vw); padding:48px 8px 72px; text-align:center}
.act{display:none; animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.act.on{display:block}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

.kicker{letter-spacing:.34em; text-transform:uppercase; font-size:12px; color:var(--gold);
  font-family:var(--sans); font-weight:700; margin-bottom:26px; opacity:.92}
h1{font-family:var(--serif); font-size:clamp(30px,6vw,52px); font-weight:500; line-height:1.1;
  letter-spacing:.01em; margin-bottom:22px; color:var(--ink)}
.oratory{font-size:clamp(17px,2.4vw,21px); line-height:1.7; color:var(--muted); max-width:52ch;
  margin:0 auto 34px; font-style:italic}
.oratory em{color:var(--ink); font-style:italic}

.crest{width:150px; height:150px; margin:6px auto 30px; display:block;
  filter:drop-shadow(0 8px 30px rgba(212,175,106,.18))}
.crest.breathe{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

button.rite, a.rite{
  display:inline-block; text-decoration:none; text-align:center;
  appearance:none; cursor:pointer; font-family:var(--sans); font-weight:700;
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bg); background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border:0; border-radius:2px; padding:16px 34px; margin-top:8px;
  box-shadow:0 10px 34px rgba(212,175,106,.20); transition:transform .18s ease, box-shadow .18s ease}
button.rite:hover, a.rite:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(212,175,106,.32)}
button.rite:active, a.rite:active{transform:translateY(0)}
button.ghost{background:none; color:var(--muted); box-shadow:none; border:1px solid var(--edge);
  letter-spacing:.14em}
button.ghost:hover{color:var(--ink); box-shadow:none}
button[disabled]{opacity:.4; cursor:not-allowed; transform:none!important}

.pillars{list-style:none; max-width:46ch; margin:0 auto 34px; text-align:left}
.pillars li{padding:16px 0 16px 40px; position:relative; border-bottom:1px solid rgba(233,228,214,.08);
  font-size:17px; line-height:1.5; color:var(--ink)}
.pillars li:last-child{border-bottom:0}
.pillars li::before{content:"◆"; position:absolute; left:8px; top:16px; color:var(--gold); font-size:14px}
.pillars li span{display:block; color:var(--muted); font-size:14.5px; margin-top:4px; font-style:italic}

.seed-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:520px; margin:6px auto 26px}
.seed-word{background:var(--veil); border:1px solid var(--edge); border-radius:3px; padding:12px 10px;
  font-family:var(--mono); font-size:15px; color:var(--ink); display:flex; align-items:baseline; gap:9px}
.seed-word i{color:var(--gold); font-style:normal; font-size:11px; min-width:18px; text-align:right; opacity:.7}
.warn{color:var(--crimson); font-weight:600; letter-spacing:.02em}
.verify-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px auto 8px; max-width:520px}
.verify-row input{background:var(--bg-2); border:1px solid var(--edge); border-radius:3px; color:var(--ink);
  font-family:var(--mono); font-size:15px; padding:11px 12px; width:150px; text-align:center}
.verify-row input:focus{outline:none; border-color:var(--gold)}
.verify-label{font-size:13px; color:var(--muted); margin-bottom:2px; display:block}
.hint{font-size:13.5px; color:var(--muted); margin-top:10px; min-height:20px}
.hint.bad{color:var(--crimson)}
.hint.good{color:var(--teal)}
/* utilidades (evitan style= inline, que el CSP style-src 'self' bloquea) */
.mt{margin-top:14px}
.seed-word.full{grid-column:1/-1}

.progress{position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--crimson));
  width:0; z-index:5; transition:width .6s ease}
footer{position:fixed; bottom:14px; left:0; right:0; text-align:center; font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(233,228,214,.28); font-family:var(--sans); z-index:1}