/* ==========================================================================
   GUÍA DIRECTA V2 - DESIGN SYSTEM TOKENS (Fuente Única de Verdad)
   ========================================================================== */

:root {
  /* ── 1. CORE BRAND COLORS ── */
  --gd-primary:       #121663;
  --gd-primary-dark:  #0c0f4a;
  --gd-primary-light: #eceffe;
  --gd-cluster:       #AF3BB3;

  /* ── 2. SEMANTIC COLORS ── */
  --gd-success:       #25D366;
  --gd-warning:       #F59E0B;
  --gd-error:         #EF4444;

  /* ── 3. SURFACES & BACKGROUNDS ── */
  --gd-panel-bg:      #f8f9fc;
  --gd-card-bg:       #ffffff;
  --gd-card-border:   #dde1f0;

  /* ── 4. GLASSMORPHISM ── */
  --gd-glass-bg:      rgba(255, 255, 255, 0.85);
  --gd-glass-border:  rgba(255, 255, 255, 0.4);
  --gd-glass-blur:    blur(12px);

  /* ── 5. PREMIUM SHADOWS (Figma aligned) ── */
  --gd-shadow-sm:     0 2px 4px rgba(18,22,99,0.04);
  --gd-shadow-md:     0 4px 12px rgba(18,22,99,0.08);
  --gd-shadow-hover:  0 12px 32px rgba(18,22,99,0.12);
  --gd-shadow-glow:   0 0 20px rgba(175,59,179,0.25);

  /* ── 6. TYPOGRAPHY ── */
  --gd-font-display:  'Outfit', sans-serif;
  --gd-font-body:     'Inter', sans-serif;
  --gd-text-dark:     #1a1e4d;
  --gd-text-muted:    #64748b;

  /* ── 7. GEOMETRY & SPACING ── */
  --gd-card-radius:   12px;

  /* Tres tokens que las hojas usaban sin que nadie los definiera. Un custom
     property sin definir invalida la declaracion COMPLETA donde aparece, asi
     que la tarjeta se quedaba sin borde, sin sombra y sin redondeo de golpe.
     Se alinean con sus hermanos ya existentes en vez de inventar valores. */
  --gd-card-border-width: 1px;
  --gd-card-shadow:       var(--gd-shadow-sm);
  --gd-radius-xl:         20px;
  --gd-premium-radius: 20px;
  --gd-spacing-xs:    4px;
  --gd-spacing-sm:    8px;
  --gd-spacing-md:    16px;
  --gd-spacing-lg:    24px;
  --gd-spacing-xl:    48px;
  --gd-spacing-xxl:   80px;

  /* ── 8. ALIASES (Legacy Compatibility) ── */
  --loc-primary:      var(--gd-primary);
  --loc-panel-bg:     var(--gd-panel-bg);
  --loc-card-bg:      var(--gd-card-bg);
  --loc-card-border:  var(--gd-card-border);
  --loc-text-dark:    var(--gd-text-dark);
  --loc-cluster:      var(--gd-cluster);
  --loc-card-radius:  var(--gd-card-radius);

  /* ══════════════════════════════════════════════════════════════════════
     ALIAS QUE LAS PLANTILLAS YA USABAN Y NADIE HABIA DEFINIDO
     ══════════════════════════════════════════════════════════════════════
     Las plantillas invocaban 16 tokens inexistentes, y los mas usados eran
     los que sostienen la interfaz: --gd-font (65 veces), --gd-font-inter
     (35), --gd-transition (15), --gd-muted (12), --gd-gradient (11),
     --gd-text (11), --gd-border (10).

     Cuando un token no existe y no lleva valor de respaldo, el navegador
     DESCARTA la propiedad entera. Los botones se quedaban sin fondo, el
     texto en negro por defecto y la tipografia caia a la del sistema. No es
     que se ignorara el diseno: es que la mitad de las instrucciones de
     estilo se tiraban en silencio.

     Se definen aqui como alias de los tokens reales, no como valores nuevos.
     Asi hay UNA sola fuente de verdad -el color de marca #121663- y estos
     nombres siguen funcionando sin tocar las 90 plantillas.
     ────────────────────────────────────────────────────────────────────── */

  /* Tipografia */
  --gd-font:          var(--gd-font-display);
  --gd-font-inter:    var(--gd-font-body);

  /* Color: todo cuelga del primario, por decision del CEO de unificar la
     portada en un solo color hasta definir donde aplicar los demas. */
  --gd-secondary:     var(--gd-primary);
  --gd-accent:        var(--gd-primary);
  --gd-blue:          var(--gd-primary);
  --gd-primary-rgb:   18, 22, 99;
  --gd-gradient:      linear-gradient(135deg, var(--gd-primary) 0%, var(--gd-primary-dark) 100%);
  --gd-gradient-dark: linear-gradient(135deg, var(--gd-primary-dark) 0%, #060828 100%);

  /* Texto y superficies */
  --gd-text:          var(--gd-text-dark);
  --gd-muted:         #6b7280;
  --gd-border:        var(--gd-card-border);
  --gd-chat-border:   var(--gd-card-border);
  --gd-bg:            var(--gd-panel-bg);
  --gd-soft:          var(--gd-primary-light);

  /* Forma y movimiento */
  --gd-radius-sm:     8px;
  --gd-transition:    all .25s ease;
}

/* ==========================================================================
   MODO OSCURO (Dark Mode Base)
   ========================================================================== */
.gd-dark-mode {
  --gd-panel-bg:      #0f172a;
  --gd-card-bg:       #1e293b;
  --gd-card-border:   #334155;
  --gd-text-dark:     #f8fafc;
  --gd-text-muted:    #94a3b8;
  --gd-glass-bg:      rgba(30, 41, 59, 0.85);
  --gd-glass-border:  rgba(255, 255, 255, 0.1);
  --gd-shadow-sm:     0 2px 4px rgba(0,0,0,0.3);
  --gd-shadow-md:     0 4px 12px rgba(0,0,0,0.4);
  --gd-shadow-hover:  0 12px 32px rgba(0,0,0,0.5);
}

/* ==========================================================================
   PREMIUM EXPERIENCE WRAPPER (Regla del 80%)
   Agregando jerarquía visual clara, eliminación de ruido y espacios amplios
   ========================================================================== */

/* Contenedor Maestro: Define el 70-80% de enfoque */
.gd-premium-wrapper {
  max-width: 1200px;
  margin: var(--gd-spacing-xxl) auto;
  padding: 0 var(--gd-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--gd-spacing-xl);
  font-family: var(--gd-font-body);
  color: var(--gd-text-dark);
}

/* Bloque Focal: Elemento principal que ocupa la atención */
.gd-premium-focus {
  width: 100%;
  max-width: 80%; /* Regla del 80% */
  margin: 0 auto;
  background: var(--gd-card-bg);
  border-radius: var(--gd-premium-radius);
  box-shadow: var(--gd-shadow-md);
  padding: var(--gd-spacing-xl);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border: 1px solid var(--gd-card-border);
}

.gd-premium-focus:hover {
  box-shadow: var(--gd-shadow-hover);
  transform: translateY(-4px);
}

/* Reducción de ruido: Oculta o minimiza los secundarios */
.gd-premium-muted-section {
  opacity: 0.6;
  filter: grayscale(0.5);
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.gd-premium-muted-section:hover,
.gd-premium-muted-section:focus-within {
  opacity: 1;
  filter: grayscale(0);
}

/* Tipografía en Premium Wrappers */
.gd-premium-wrapper h1, 
.gd-premium-wrapper h2, 
.gd-premium-wrapper h3 {
  font-family: var(--gd-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gd-premium-wrapper h1 {
  font-size: 3rem;
  line-height: 1.1;
  color: var(--gd-primary);
  margin-bottom: var(--gd-spacing-md);
}

/* CTA Primario (Minimalista, Alto Contraste) */
.gd-btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gd-text-dark); /* Grayscale/Dark Premium */
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: var(--gd-shadow-sm);
  text-decoration: none;
}
.gd-btn-premium:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: var(--gd-shadow-md);
}

/* Animaciones Premium */
@keyframes premiumFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.gd-animate-premium-in {
  animation: premiumFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}