/* ==========================================================================
   RankSubmit — Design System
   Tokens y clases compartidas entre home, hosting, nosotros, diseño web y SEO.
   Cargar este archivo UNA vez (idealmente en layouts/app.blade.php) en vez
   de repetir <style> en cada vista.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ----- Tokens de marca ----- */
:root{
  --rs-bg:      #0B0D10;   /* fondo base, grafito casi negro */
  --rs-panel:   #12151A;   /* fondo de tarjetas */
  --rs-line:    #1F242B;   /* bordes */
  --rs-copper:  #FF7A45;   /* acento primario — velocidad / NVMe */
  --rs-gold:    #E8B559;   /* acento secundario — detalles, eyebrows */
  --rs-dim:     #8A9199;   /* texto apagado sobre fondo oscuro */
  --rs-whatsapp:#25D366;   /* verde oficial de WhatsApp, no tocar */
}

/* ----- Tipografía ----- */
.rs-font-display{ font-family:'Space Grotesk', sans-serif; }
.rs-font-mono{ font-family:'JetBrains Mono', monospace; }
.rs-body{ font-family:'Inter', sans-serif; }

/* ----- Fondo de grilla técnica (hero) ----- */
.rs-grid-bg{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ----- Eyebrow / badge "[ TEXTO ]" usado en cada hero ----- */
.rs-eyebrow{
  font-family:'JetBrains Mono', monospace;
  display:inline-flex; align-items:center;
  font-size:0.75rem; font-weight:500; letter-spacing:0.14em;
  padding:6px 14px; border-radius:6px; margin-bottom:24px;
  background:var(--rs-panel); color:var(--rs-gold); border:1px solid var(--rs-line);
}

/* ----- Franja de specs tipo "monitor de servidor" (bajo cada hero) ----- */
.rs-specs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px;
  font-family:'JetBrains Mono', monospace; font-size:0.75rem; color:var(--rs-dim);
  border-top:1px solid var(--rs-line); border-bottom:1px solid var(--rs-line);
  padding:20px 0; margin-top:40px;
}
.rs-specs span b{ color:#e2e8f0; font-weight:500; margin-left:6px; }
.rs-specs span::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--rs-copper); margin-right:8px;
}
/* variante con punto animado, para el hero principal */
.rs-specs.rs-live span::before{ animation: rsPing 2s ease-out infinite; }

/* ----- Punto pulsante independiente (icon/status) ----- */
.rs-pulse{ position:relative; }
.rs-pulse::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--rs-copper); margin-right:8px; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,122,69,0.6);
  animation: rsPing 2s ease-out infinite;
}
@keyframes rsPing{
  0%{ box-shadow:0 0 0 0 rgba(255,122,69,0.5); }
  70%{ box-shadow:0 0 0 6px rgba(255,122,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,122,69,0); }
}

/* ----- Entrada suave para hero / secciones ----- */
.rs-rise{ opacity:0; transform:translateY(14px); animation: rsRise .7s ease forwards; }
@keyframes rsRise{ to{ opacity:1; transform:translateY(0); } }

/* ----- Tarjeta base reutilizable (servicios, specs, features) ----- */
.rs-card{
  background:var(--rs-panel); border:1px solid var(--rs-line); border-radius:1rem;
  transition:border-color .3s ease;
}
.rs-card:hover{ border-color:var(--rs-copper); }
.rs-card.rs-card-gold:hover{ border-color:var(--rs-gold); }

/* ----- Icono contenedor cuadrado (servicios) ----- */
.rs-icon-box{
  width:2.75rem; height:2.75rem; border-radius:0.5rem;
  background:var(--rs-bg); border:1px solid var(--rs-line);
  display:flex; align-items:center; justify-content:center;
}

/* ----- Botones ----- */
.rs-btn-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  background:var(--rs-whatsapp); color:#fff; font-weight:700; border-radius:0.75rem;
  transition:background-color .2s ease; box-shadow:0 10px 25px -10px rgba(37,211,102,0.35);
}
.rs-btn-whatsapp:hover{ background:#1fbd59; color:#fff; }

.rs-btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#cbd5e1; border:1px solid var(--rs-line);
  border-radius:0.75rem; transition:all .2s ease;
}
.rs-btn-outline:hover{ color:#fff; border-color:rgba(255,122,69,0.5); }

/* ----- Checkmark de listas de features ----- */
.rs-check{ color:var(--rs-copper); font-weight:bold; }

@media (prefers-reduced-motion: reduce){
  .rs-pulse::before,
  .rs-specs.rs-live span::before{ animation:none; }
  .rs-rise{ animation:none; opacity:1; transform:none; }
  .rs-card{ transition:none; }
}