/* ============================================================
   FORTUNIA RD — Sistema de diseño
   Paleta verde→cyan→azul sobre fondo oscuro. Fonts Sora + Manrope.
   Regla: nunca hex hardcoded en componentes nuevos; usar --fr-*.
   ============================================================ */
:root{
  /* Fondos */
  --fr-bg-base:#060907; --fr-bg-elevated:#0d1310; --fr-bg-surface:#0a0f14;
  /* Marca */
  --fr-green:#57d63a; --fr-green-bright:#7bec4c; --fr-green-cta:#63e02e;
  --fr-teal:#2bc6c8; --fr-cyan:#22b0f0; --fr-blue:#1f6dff;
  /* Texto */
  --fr-text:#e8f0ea; --fr-text-muted:#9fb3a6; --fr-text-dim:#6f8577;
  /* Bordes / gradientes / radios */
  --fr-border:rgba(255,255,255,0.09);
  --fr-grad-brand:linear-gradient(90deg,#63e02e,#22b0f0,#1f6dff);
  --fr-grad-cta:linear-gradient(90deg,#63e02e,#22b0f0);
  --fr-grad-surface:linear-gradient(160deg,#0d1310,#0a0f14);
  --fr-radius-card:24px; --fr-radius-ctrl:14px; --fr-radius-chip:999px;
  --fr-glow-cta:0 0 24px rgba(60,200,120,0.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--fr-bg-base)}
body{font-family:'Manrope',sans-serif;color:var(--fr-text)}
a{color:var(--fr-green);text-decoration:none}
a:hover{color:var(--fr-cyan)}
::selection{background:rgba(87,214,58,.35)}
@keyframes fr-pulseGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes fr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Tipografía */
.fr-h{font-family:'Sora',sans-serif}
.fr-headline-gradient{background:var(--fr-grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.fr-eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--fr-green)}

/* Botones */
.fr-btn-primary{display:inline-block;font-family:'Sora',sans-serif;font-weight:700;font-size:15px;color:#04120a;background:var(--fr-grad-cta);padding:15px 28px;border-radius:var(--fr-radius-chip);box-shadow:var(--fr-glow-cta);transition:box-shadow .2s;cursor:pointer;border:none}
.fr-btn-primary:hover{box-shadow:0 0 44px rgba(60,200,120,.6);color:#04120a}
.fr-btn-ghost{display:inline-block;font-family:'Sora',sans-serif;font-weight:600;font-size:15px;color:var(--fr-text);border:1px solid rgba(255,255,255,.18);padding:14px 26px;border-radius:var(--fr-radius-chip);transition:border-color .2s,color .2s}
.fr-btn-ghost:hover{border-color:rgba(87,214,58,.6);color:#fff}

/* Superficies */
.fr-card{border-radius:var(--fr-radius-card);background:var(--fr-grad-surface);border:1px solid var(--fr-border);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.fr-panel{border-radius:20px;border:1px solid var(--fr-border);background:var(--fr-bg-elevated)}
.fr-badge{display:inline-block;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--fr-green-bright);border:1px solid rgba(87,214,58,.4);border-radius:var(--fr-radius-chip);padding:5px 12px}
.fr-chip{font-family:'Sora',sans-serif;font-weight:700;border-radius:12px;border:1px solid var(--fr-border);background:rgba(255,255,255,.05);color:#c9d8ce}
.fr-chip.is-active{background:var(--fr-grad-cta);color:#04120a;border-color:transparent}

/* Navegación */
.fr-nav-link{color:var(--fr-text-muted);font-weight:600;font-size:14px;transition:color .15s}
.fr-nav-link:hover{color:#fff}

/* Barra de progreso */
.fr-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.fr-progress > span{display:block;height:100%;border-radius:999px;background:var(--fr-grad-brand);box-shadow:0 0 14px rgba(87,214,58,.5)}

/* Logo mark (anillo + F) reutilizable */
.fr-logo-ring{border-radius:50%;background:conic-gradient(from 210deg,#57d63a,#2bc6c8,#1f6dff,#57d63a);display:grid;place-items:center;box-shadow:0 0 24px rgba(87,214,58,.35)}

/* Utilidades de texto */
.fr-text-muted{color:var(--fr-text-muted)}
.fr-text-dim{color:var(--fr-text-dim)}
.fr-text-green{color:var(--fr-green)}