/* ==========================================================================
   rx.css (10-nov-2026) — piezas visuales de las landings de Recursos y
   Nosotros: /quienes-somos, /guias y /preguntas-frecuentes.
   Va encima de v2.css (piel oscura) y comparte sus variables. Las animaciones
   se apagan con prefers-reduced-motion.
   ========================================================================== */

/* ---------- HERO con luz y anillo ---------- */
.v2 .rx-hero{ position:relative; min-height:clamp(600px,88vh,900px); display:flex; align-items:center;
  padding:clamp(130px,15vh,170px) 0 clamp(56px,7vw,90px); overflow:hidden; isolation:isolate; }
.v2 .rx-hero::before{ content:""; position:absolute; inset:-10% -10% 0; z-index:-2; pointer-events:none;
  background:var(--rx-img, url('/assets/img/anillo-hero.webp')) 70% 30%/cover no-repeat; opacity:.42;
  -webkit-mask-image:radial-gradient(60% 75% at 78% 42%, #000 25%, transparent 75%);
  mask-image:radial-gradient(60% 75% at 78% 42%, #000 25%, transparent 75%);
  animation:rxDrift 22s ease-in-out infinite alternate; }
.v2 .rx-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30%; z-index:-1; pointer-events:none;
  background:linear-gradient(transparent, var(--bg)); }
.rx-orb{ position:absolute; z-index:-1; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.55; }
.rx-orb.a{ width:520px; height:520px; right:-120px; top:-80px; background:radial-gradient(closest-side, rgba(199,255,46,.35), transparent); animation:rxFloat 14s ease-in-out infinite alternate; }
.rx-orb.b{ width:420px; height:420px; left:-160px; bottom:-120px; background:radial-gradient(closest-side, rgba(120,190,60,.28), transparent); animation:rxFloat 18s ease-in-out infinite alternate-reverse; }
.v2 .rx-hero .wrap{ position:relative; }
.rx-hgrid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(30px,5vw,80px); align-items:center; }
.v2 .rx-h1{ font-size:clamp(44px,6vw,88px); font-weight:400; letter-spacing:-.055em; line-height:.98; margin:22px 0 0; }
.v2 .rx-h1 .l2{ display:block; color:var(--mut); font-weight:300; padding-left:clamp(20px,6vw,120px); }
.v2 .rx-h1 .lime{ color:var(--lime); font-weight:400; }
.rx-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.rx-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.rx-chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:999px; font-size:13.5px;
  color:var(--ink); background:rgba(245,244,242,.05); border:1px solid rgba(245,244,242,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.rx-chip i{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(199,255,46,.16); animation:rxPulse 2.6s ease-in-out infinite; }
.rx-chip:nth-child(2) i{ animation-delay:.6s; } .rx-chip:nth-child(3) i{ animation-delay:1.2s; } .rx-chip:nth-child(4) i{ animation-delay:1.8s; }

/* ---------- cinta que corre ---------- */
.rx-marq{ position:relative; overflow:hidden; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.rx-marq-t{ display:flex; width:max-content; gap:46px; animation:rxMarq 34s linear infinite; }
.rx-marq span{ display:inline-flex; align-items:center; gap:46px; font-size:clamp(24px,3.4vw,44px); font-weight:300; letter-spacing:-.04em; color:var(--mut); white-space:nowrap; }
.rx-marq span b{ font-weight:400; color:var(--ink); }
.rx-marq span::after{ content:""; width:12px; height:12px; border-radius:50%; background:var(--lime); box-shadow:0 0 22px rgba(199,255,46,.7); }

/* ---------- secciones ---------- */
.rx-sec{ position:relative; padding:clamp(64px,9vw,120px) 0; }
.rx-head{ max-width:760px; margin-bottom:clamp(30px,4vw,54px); }
.v2 .rx-head h2{ margin-top:16px; font-size:clamp(32px,4.6vw,62px); letter-spacing:-.05em; line-height:1.02; }
.v2 .rx-head h2 .suave{ color:var(--mut); font-weight:300; }
.rx-head p{ margin:18px 0 0; color:var(--mut); font-size:clamp(15.5px,1.6vw,18px); max-width:58ch; }

/* ---------- tarjeta con foco que sigue al ratón ---------- */
.rx-card{ position:relative; border-radius:24px; padding:clamp(22px,2.4vw,30px); overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, rgba(23,41,27,.92), rgba(11,22,12,.96));
  border:1px solid rgba(245,244,242,.10); transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.rx-card::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(199,255,46,.14), transparent 55%); }
.rx-card:hover{ transform:translateY(-4px); border-color:rgba(199,255,46,.32); }
.rx-card:hover::before{ opacity:1; }

/* ---------- contadores ---------- */
.rx-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rx-stat{ padding:clamp(26px,3vw,40px) clamp(14px,2vw,26px); border-left:1px solid var(--line); }
.rx-stat:first-child{ border-left:0; }
.rx-num{ display:block; font-size:clamp(46px,6vw,84px); font-weight:300; letter-spacing:-.06em; line-height:1; color:var(--ink); }
.rx-num em{ font-style:normal; color:var(--lime); }
.rx-stat p{ margin:12px 0 0; color:var(--mut); font-size:14.5px; line-height:1.45; max-width:22ch; }

/* ---------- botones (v2) ---------- */
.v2 .btn2 svg{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- animaciones ---------- */
@keyframes rxDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-3%,2%,0) scale(1.06); } }
@keyframes rxFloat{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-40px,30px,0); } }
@keyframes rxPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(199,255,46,.16); } 50%{ box-shadow:0 0 0 8px rgba(199,255,46,0); } }
@keyframes rxMarq{ to{ transform:translateX(-50%); } }

@media(max-width:860px){
  .rx-hgrid{ grid-template-columns:1fr; }
  .v2 .rx-hero{ min-height:0; }
  .v2 .rx-h1 .l2{ padding-left:18px; }
  .rx-stats{ grid-template-columns:1fr 1fr; }
  .rx-stat:nth-child(3){ border-left:0; }
  .rx-stat:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media(prefers-reduced-motion:reduce){
  .v2 .rx-hero::before, .rx-orb, .rx-chip i, .rx-marq-t{ animation:none; }
  .rx-card, .rx-card:hover{ transform:none; }
}

/* el texto del hero, siempre por encima de la luz */
.v2 .rx-hero .lead{ text-shadow:0 1px 18px rgba(11,23,12,.9); }