:root{
    --bg1:#faf3ea; --bg2:#fffaf4; --cream:#fff4e3;
    --card-grad-a:#fff7ea; --card-grad-b:#f3e4cc;
    --ring:#e8d8bd; --gold:#caa968; --gold-strong:#b48b42;
    --wine:#7f2431; --wine-soft:#8f3a45;
    --text:#3f2a25; --muted:#775b4f; --stroke:#e7dcc9;
    --shadow: rgba(40,25,15,.18);

    /* Tinte para PNG blanco del logo */
    --logo-filter: invert(15%) sepia(35%) saturate(1200%) hue-rotate(315deg) brightness(85%) contrast(95%);
    /* Alternativa dorada:
    --logo-filter: invert(74%) sepia(32%) saturate(548%) hue-rotate(10deg) brightness(90%) contrast(92%);
    */
  }

  body{
    background: radial-gradient(120% 120% at 50% 0%, var(--bg1) 0%, var(--bg2) 60%, #ffffff 100%);
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    min-height:100dvh;
    overflow-x:hidden;
  }

  #particles{ position:fixed; inset:0; z-index:0; pointer-events:none; }

  .brand-wrap{ position:relative; z-index:1; padding-block:22px; }
  .brand-card{
    background:linear-gradient(180deg, var(--card-grad-a), var(--card-grad-b));
    border:1px solid var(--stroke);
    border-radius:16px;
    box-shadow:0 18px 40px var(--shadow);
    padding:16px 24px;
  }
  .brand-logo{
    height: clamp(64px, 10vw, 140px);
    width:auto; max-width:100%;
    object-fit:contain; display:block;
    filter: var(--logo-filter) drop-shadow(0 2px 8px rgba(0,0,0,.08));
  }

  .stage{
    position:relative; z-index:1;
    width:min(100%,560px);
    margin:10px auto 110px;
    aspect-ratio:1/1;
    display:grid; place-items:center;
  }
  .glow{
    position:absolute; inset:6%; border-radius:50%;
    box-shadow:
      0 30px 60px var(--shadow),
      inset 0 0 0 12px var(--ring),
      inset 0 0 40px rgba(202,169,104,.25);
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.12));
    pointer-events:none; animation:breath 4s ease-in-out infinite;
  }
  @keyframes breath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.01)} }

  .pointer{
    position:absolute; top:-10px; left:50%;
    width:0; height:0; z-index:3;
    border-left:18px solid transparent; border-right:18px solid transparent;
    border-bottom:30px solid var(--wine);
    transform: translate(-50%,0) rotate(180deg);
    filter:drop-shadow(0 4px 6px var(--shadow));
  }
  .pointer:after{
    content:""; position:absolute; top:25px; left:-13px; width:26px; height:11px; border-radius:9px;
    background:linear-gradient(180deg,#fff,#f5e7ce);
    box-shadow:0 2px 6px rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.06);
  }
  .pointer.wiggle{ animation:wiggle .75s ease-in-out infinite }
  @keyframes wiggle{ 0%,100%{ rotate: 0deg } 50%{ rotate: 3deg } }

  .disc{ position:absolute; inset:0; display:grid; place-items:center; border-radius:50% }
  canvas{ width:100%; height:100%; border-radius:50% }

  .btn-spin{
    --bs-btn-color:#4e3508; --bs-btn-bg:#f0d79e; --bs-btn-border-color:#e2c078;
    --bs-btn-hover-bg:#f3dda8; --bs-btn-hover-border-color:#e6c884;
    --bs-btn-active-bg:#e7ca8d; --bs-btn-active-border-color:#d9b973;
    font-weight:800; letter-spacing:.2px; border:0;
    box-shadow:0 12px 22px var(--shadow), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.06);
    background-image: radial-gradient(120% 120% at 50% 0%, #fff 0%, #faeacb 40%, #f0d79e 85%), linear-gradient(90deg, #a97a2f, #e2c078, #a97a2f);
  }
  .hint{ color:var(--muted); font-size:.9rem }

  #confetti{ position:absolute; inset:0; pointer-events:none }
  .modal-content{
    background:linear-gradient(180deg, var(--card-grad-a), var(--card-grad-b));
    border:1px solid var(--stroke); box-shadow:0 22px 48px rgba(0,0,0,.28);
  }
  .badge-gold{ background:rgba(202,169,104,.18); color:var(--wine); border:1px solid rgba(202,169,104,.35); font-weight:700 }