:root {
    --bg:      #ddeeff;
    --bg2:     #ede6ff;
    --surface: rgba(255,255,255,0.92);
    --s2:      rgba(248,252,255,0.90);
    --border:  rgba(180,200,255,0.60);

    --p900: #2d0a6e;
    --p800: #3d1587;
    --p700: #5420a8;
    --p600: #6d2fc8;
    --p500: #8b4ae0;
    --p400: #a96cf0;
    --p300: #c89eff;
    --p200: #e2ccff;
    --p100: #f3eaff;

    --rose: #d95c8c;
    --text:     #2a1050;
    --text-mid: #5a3a90;
    --text-dim: #9070c0;

    --sh-sm: 0 2px 16px rgba(30,80,180,.13);
    --sh-md: 0 6px 32px rgba(30,80,180,.18);
    --sh-lg: 0 16px 52px rgba(30,80,180,.22);
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    background: #eef4ff;
    color: var(--text);
    font-family: 'Crimson Pro', serif;
    font-size: 18px;
    line-height: 1.75;
    overflow-x: hidden;
  }

  /* fondo dinámico */
  #fabric-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.92;
  }

  .container {
    max-width:880px;
    margin:0 auto;
    padding:0 24px 96px;
    position:relative; z-index:1;
  }

  /* hero badge blue tint */

  /* ── HERO ── */
  .hero {
    text-align:center;
    padding:80px 0 56px;
  }

  .hero-badge {
    display:inline-block;
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:4px; text-transform:uppercase;
    color:var(--p600); background:var(--p200);
    border:1px solid var(--border);
    padding:5px 18px; border-radius:999px; margin-bottom:24px;
  }

  .hero h1 {
    font-family:'Cinzel Decorative', serif;
    font-size:clamp(24px,6vw,44px); font-weight:700;
    color:var(--p800); letter-spacing:2px; line-height:1.15;
    margin-bottom:12px;
    text-shadow:0 2px 20px rgba(109,47,200,.2);
  }

  .hero-sub {
    font-style:italic; color:var(--text-mid);
    font-size:17px; margin-bottom:32px;
  }

  .hero-divider {
    display:flex; align-items:center;
    justify-content:center; gap:14px;
    margin:0 auto 32px; max-width:320px;
  }
  .hero-divider span { flex:1; height:1px; }
  .hero-divider span:first-child { background:linear-gradient(90deg,transparent,var(--p400)); }
  .hero-divider span:last-child  { background:linear-gradient(90deg,var(--p400),transparent); }
  .hero-divider i { color:var(--p400); font-size:14px; font-style:normal; }

  .hashtag-cloud { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .hashtag {
    font-family:'JetBrains Mono', monospace;
    font-size:11px; padding:5px 13px;
    border:1px solid var(--border); border-radius:6px;
    color:var(--p700); background:var(--surface);
    letter-spacing:.5px;
    box-shadow:var(--sh-sm);
    transition:all .22s ease; cursor:default;
  }
  .hashtag:hover {
    background:var(--p600); color:#fff;
    border-color:var(--p600);
    transform:translateY(-2px); box-shadow:var(--sh-md);
  }

  /* ── SECCIONES ── */
  section { margin-bottom:60px; animation:fadeUp .55s ease both; }
  @keyframes fadeUp {
    from{opacity:0;transform:translateY(18px)}
    to  {opacity:1;transform:translateY(0)}
  }
  section:nth-child(1){animation-delay:.05s}
  section:nth-child(2){animation-delay:.10s}
  section:nth-child(3){animation-delay:.15s}
  section:nth-child(4){animation-delay:.20s}
  section:nth-child(5){animation-delay:.25s}
  section:nth-child(6){animation-delay:.30s}
  section:nth-child(7){animation-delay:.35s}

  .section-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
  .section-header h2 {
    font-family:'Cinzel Decorative', serif;
    font-size:11px; font-weight:400;
    letter-spacing:4px; text-transform:uppercase;
    color:var(--p600); white-space:nowrap;
  }
  .section-line { flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }

  /* ── REGLAS ── */
  .rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media(max-width:580px){ .rules-grid,.char-grid,.fl-grid{ grid-template-columns:1fr !important; } }

  .rule-item {
    background: rgba(255,255,255,0.85);
    border:1px solid rgba(150,190,255,0.45);
    border-left:3px solid var(--p500);
    border-radius:10px; padding:14px 18px;
    font-size:16px; color:var(--text-mid);
    box-shadow:var(--sh-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:background .2s, transform .2s;
  }
  .rule-item:hover { background:var(--p100); transform:translateX(4px); }

  /* ── LORE ── */
  .lore-box {
    background: rgba(255,255,255,0.86);
    border:1px solid rgba(150,190,255,0.45);
    border-top:3px solid var(--p500);
    border-radius:12px; padding:30px 34px;
    font-style:italic; font-size:18px; color:var(--text-mid);
    position:relative; box-shadow:var(--sh-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .lore-box::before {
    content:'';
    position:absolute; top:-16px; left:50%;
    transform:translateX(-50%);
    background:var(--bg); padding:0 14px;
    color:var(--p500); font-size:22px;
  }

  /* ── PERSONAJES ── */
  .char-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

  .char-card {
    background: rgba(255,255,255,0.88);
    border:1px solid rgba(150,190,255,0.50);
    border-radius:14px; padding:22px 22px 18px;
    position:relative; overflow:hidden;
    box-shadow:var(--sh-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:transform .25s, box-shadow .25s;
  }
  .char-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--p500),var(--p400),#b347e8);
    border-radius:14px 14px 0 0;
  }
  .char-card::after {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(139,74,224,.07),transparent 70%);
    opacity:0; transition:opacity .3s; pointer-events:none; border-radius:14px;
  }
  .char-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); }
  .char-card:hover::after { opacity:1; }

  .char-name {
    font-family:'Cinzel Decorative', serif;
    font-size:13px; font-weight:700;
    color:var(--p800); letter-spacing:1px; margin-bottom:4px;
  }
  .char-type {
    font-family:'JetBrains Mono', monospace;
    font-size:10px; color:var(--p500);
    letter-spacing:2px; text-transform:uppercase;
    margin-bottom:14px; opacity:.9;
  }
  .char-meta { font-size:14.5px; color:var(--text-mid); line-height:1.65; }
  .char-meta span { color:var(--p700); font-weight:600; font-size:13px; }
  .char-row { margin-bottom:4px; }

  /* ── FETICHES Y LÍMITES ── */
  .fl-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

  .fl-box {
    background: rgba(255,255,255,0.87);
    border:1px solid rgba(150,190,255,0.45);
    border-radius:12px; padding:22px 24px;
    box-shadow:var(--sh-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .fl-box h3 {
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:4px; text-transform:uppercase;
    margin-bottom:16px; padding-bottom:12px;
    border-bottom:1px solid var(--border);
  }
  .fl-box.fetiches { border-top:3px solid var(--p500); }
  .fl-box.fetiches h3 { color:var(--p600); }
  .fl-box.limites   { border-top:3px solid var(--rose); }
  .fl-box.limites h3 { color:var(--rose); }

  .fl-list { list-style:none; font-size:15.5px; color:var(--text-mid); }
  .fl-list li {
    padding:5px 0 5px 20px; position:relative;
    border-bottom:1px solid var(--p100);
  }
  .fl-list li:last-child { border-bottom:none; }
  .fl-list li::before {
    content:'◆'; position:absolute; left:0;
    color:var(--p400); font-size:8px; top:9px;
  }
  .fl-box.limites .fl-list li::before { color:var(--rose); }

  /* ── REDES SOCIALES ── */
  .social-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }

  .social-item {
    background: rgba(255,255,255,0.85);
    border:1px solid rgba(150,190,255,0.45);
    border-radius:10px; padding:14px 18px;
    display:flex; align-items:center; gap:14px;
    text-decoration:none; color:var(--text-mid);
    font-size:15px; box-shadow:var(--sh-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:all .22s ease;
  }
  .social-item:hover {
    background:var(--p600); color:#fff;
    border-color:var(--p600);
    transform:translateY(-3px) translateX(2px);
    box-shadow:var(--sh-lg);
  }
  .social-item:hover .social-label { color:rgba(255,255,255,.7); }
  .social-icon { font-size:20px; flex-shrink:0; }
  .social-label {
    font-family:'JetBrains Mono', monospace;
    font-size:10px; letter-spacing:2px; text-transform:uppercase;
    color:var(--text-dim); display:block; margin-bottom:2px;
    transition:color .22s;
  }

  /* ── FOOTER ── */
  footer {
    text-align:center; padding:44px 0 0;
    border-top:1px solid var(--border);
    font-family:'JetBrains Mono', monospace;
    font-size:11px; color:var(--text-dim);
    letter-spacing:3px; text-transform:uppercase;
  }
  footer::before {
    content:'    ';
    display:block; margin-bottom:18px;
    color:var(--p400); letter-spacing:10px; font-size:11px;
  }

  html { scroll-behavior:smooth; }
  ::-webkit-scrollbar { width:6px; }
  ::-webkit-scrollbar-track { background:var(--bg); }
  ::-webkit-scrollbar-thumb { background:var(--p300); border-radius:99px; }
  ::-webkit-scrollbar-thumb:hover { background:var(--p500); }

  /* ── IMÁGENES DE LOS PERSONAJES */
  .char-img-wrap {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 14px;
    border: 1px solid rgba(150,190,255,0.30);
  }
  .char-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.45s ease;
    display: block;
  }
  .char-card:hover .char-img {
    transform: scale(1.06);
  }