/* =========================================================
   Club de Amigos: página "Reglas del Club"
   Se apoya en club.css (fuentes, colores, cabecera). Las
   animaciones de entrada solo se activan cuando reglas.js
   añade .rg-js al body (sin JS o con "reducir movimiento",
   todo se ve de una vez).
   ========================================================= */
:root{ --rg-ease:cubic-bezier(.16,1,.3,1); }

.rg-wrap{ max-width:760px; margin:0 auto; padding:0 6vw; }
.rg-gold{ color:var(--gold); }
.rg-big .rg-gold{ white-space:nowrap; }

/* ---------- hero ---------- */
.rg-hero{
  text-align:center; padding:54px 0 46px;
  background:radial-gradient(70% 60% at 50% 0%, rgba(212,169,76,.16), transparent 70%);
}
.rg-coin{ width:clamp(120px,34vw,170px); margin:0 auto 22px; }
.rg-coin img{
  width:100%; height:auto; border-radius:50%; display:block;
  box-shadow:0 18px 50px rgba(212,169,76,.25), 0 0 0 3px rgba(212,169,76,.35);
  animation:rg-float 6s ease-in-out infinite;
}
@keyframes rg-float{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-9px) rotate(2deg); } }

.rg-h1{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(44px,13vw,92px); line-height:1.02; margin:0 0 14px;
}
.rg-lead{ font-size:clamp(17px,4.6vw,22px); color:var(--cream); margin:0; }

/* ---------- bloques ---------- */
.rg-sec{ padding:54px 0 12px; }
.rg-big{
  font-family:var(--ff-display); text-transform:uppercase; line-height:1.12;
  font-size:clamp(28px,8vw,50px); margin:0 0 26px;
}
.rg-text{ color:var(--cream); font-size:clamp(16px,4.2vw,19px); line-height:1.55; margin:0 0 18px; }
.rg-text strong{ color:var(--white); letter-spacing:.02em; }

/* ---------- escalones de puntos ---------- */
.rg-tiers{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:26px 0 34px; padding-bottom:22px;
}
.rg-tier{
  border:1px solid var(--line); border-radius:16px; background:var(--panel);
  text-align:center; padding:20px 6px 16px;
}
.rg-tier-num{ font-family:var(--ff-display); font-size:clamp(34px,10.5vw,60px); line-height:1; color:var(--white); }
.rg-tier-label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); margin-top:8px; }
.rg-track{
  position:absolute; left:0; right:0; bottom:0; height:4px; border-radius:99px;
  background:rgba(247,244,238,.1); overflow:hidden;
}
.rg-track-fill{
  height:100%; width:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--red),var(--gold)); transform-origin:left;
}

/* ---------- notas ---------- */
.rg-pair{ display:grid; gap:14px; margin-top:30px; }
.rg-note{
  margin:0; padding:20px 20px 20px 22px; border-left:3px solid var(--gold);
  background:var(--panel); border-radius:0 14px 14px 0;
  font-size:clamp(16px,4.2vw,19px); line-height:1.5; color:var(--white);
}

/* ---------- banda roja ---------- */
.rg-band{ background:var(--red); margin-top:56px; padding:54px 0 50px; color:#fff; }
.rg-h2{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,9vw,54px); line-height:1.08; margin:0 0 22px;
}
.rg-band-text{ font-size:clamp(16px,4.2vw,19px); line-height:1.55; margin:0 0 14px; max-width:560px; }

/* ---------- frase destacada ---------- */
.rg-statement{
  font-family:var(--ff-display); text-transform:uppercase; line-height:1.08;
  font-size:clamp(32px,9.5vw,64px); margin:0; color:var(--gold);
}
.rg-statement--dim{ color:var(--white); opacity:.4; }
.rg-after{ margin-top:34px; }

/* ---------- cierre ---------- */
.rg-close{ padding:34px 0 90px; text-align:center; }
.rg-kicker{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); font-weight:700; margin:0 0 14px; }
.rg-words{
  display:flex; flex-direction:column; align-items:center; margin:0 0 28px;
  font-family:var(--ff-display); text-transform:uppercase; line-height:1.02;
  font-size:clamp(46px,15vw,104px);
}
.rg-cta{ max-width:320px; margin-top:12px; }

/* ---------- animaciones de entrada ---------- */
.rg-js .rg-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--rg-ease), transform .8s var(--rg-ease);
  transition-delay:var(--d,0ms);
}
.rg-js .rg-reveal.is-in{ opacity:1; transform:none; }
.rg-js .rg-statement--dim.is-in{ opacity:.4; }

.rg-js .rg-coin{
  opacity:0; transform:scale(.55) rotate(-16deg);
  transition:opacity .7s var(--rg-ease), transform 1s var(--rg-ease);
}
.rg-js .rg-coin.is-in{ opacity:1; transform:none; }

.rg-js .rg-tier{
  opacity:0; transform:translateY(24px) scale(.96);
  transition:opacity .6s var(--rg-ease), transform .7s var(--rg-ease), border-color .5s, box-shadow .5s;
}
.rg-js .rg-tiers.is-in .rg-tier{ opacity:1; transform:none; border-color:var(--gold); box-shadow:0 0 0 1px rgba(212,169,76,.25), 0 10px 30px rgba(212,169,76,.08); }
.rg-js .rg-tiers.is-in .rg-tier:nth-child(1){ transition-delay:.1s; }
.rg-js .rg-tiers.is-in .rg-tier:nth-child(2){ transition-delay:.6s; }
.rg-js .rg-tiers.is-in .rg-tier:nth-child(3){ transition-delay:1.1s; }
.rg-js .rg-tiers.is-in .rg-tier-num{ color:var(--gold); transition:color .5s; }
.rg-js .rg-tier-num{ transition:color .5s; }

.rg-js .rg-track-fill{ transform:scaleX(0); transition:transform 1.5s cubic-bezier(.65,.05,.2,1) .2s; }
.rg-js .rg-tiers.is-in .rg-track-fill{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  .rg-coin img{ animation:none; }
}