/* ===== AGENDA LÍDER - ESTILOS COMUNES ===== */
/* Archivo centralizado con tipografías, colores y estilos comunes */

/* ===== VARIABLES CSS ===== */
:root {
  /* Colores de fondo */
  --bg-primary: #0b0c1a;
  --bg-secondary: #0f0e17;
  --bg-tertiary: #17162a;
  --bg-dark: #0c0f20;
  --bg-alt: #1c1b29;
  --bg-surface: #2f2b4a;
  
  /* Colores de texto */
  --text-primary: #ffffff;
  --text-secondary: #e6e6e9;
  --text-muted: #c8d0ff;
  
  /* Colores de acento */
  --accent-primary: #7c4dff;
  --accent-secondary: #8b5cf6;
  --accent-cyan: #22d3ee;
  --accent-cyan-alt: #3dd2ff;
  --accent-pink: #ff05f2;
  --accent-light-blue: #15eeff;
  --accent-purple-light: #dd62ff;
  --accent-cyan-light: #c6fbff;
  --accent-pink-light: #ff98fa;
  
  /* Superficies y efectos glass */
  --surface-glass: rgba(255,255,255,0.06);
  --surface-glass-strong: rgba(255,255,255,0.08);
  --surface-glass-stronger: rgba(255,255,255,0.10);
  --surface-glass-border: rgba(255,255,255,0.18);
  --surface-glass-border-strong: rgba(255,255,255,0.22);
  --surface-glass-border-stronger: rgba(255,255,255,0.25);
  --surface-glass-highlight: rgba(255,255,255,0.35);
  
  /* Sombras */
  --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 6px 20px rgba(0,0,0,0.25);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-heavy: 0 12px 34px rgba(0,0,0,0.35);
  --shadow-ultra: 0 12px 40px rgba(0, 0, 0, 0.4);
  
  /* Bordes redondeados */
  --radius-small: 8px;
  --radius-medium: 10px;
  --radius-large: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 18px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-full: 50%;
  --radius-pill: 999px;
  
  /* Contenedores */
  --container-max-width: 1100px;
  --container-padding: 20px;
  
  /* Transiciones */
  --transition-fast: 160ms ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease-in-out;
}
.h2 {
	color:#9333EA;
	
}

/* ===== TIPOGRAFÍAS ===== */
/* Fuente principal del sistema */
.font-system {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}

/* Fuente para títulos especiales */
.font-display {
  font-family: "Russo One", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Fuente alternativa */
.font-inter {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Fuente para contenido */
.font-montserrat {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.font-lato {
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== ESTILOS BASE ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== CONTENEDORES COMUNES ===== */
.container {
  width: 90%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  position: relative;
  z-index: 1;
}

.section {
  padding: 32px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

/* ===== EFECTOS GLASS ===== */
.glass-surface {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  backdrop-filter: blur(12px) saturate(120%);
}

.glass-surface-strong {
  background: var(--surface-glass-strong);
  border: 1px solid var(--surface-glass-border-strong);
  backdrop-filter: blur(15px) saturate(150%);
}

.glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid var(--surface-glass-border-stronger);
  backdrop-filter: blur(15px) saturate(150%);
  box-shadow: var(--shadow-strong);
}

/* ===== BOTONES COMUNES ===== */
.btn {
  appearance: none;
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-large);
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  display: inline-block;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.btn-primary {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-cyan));
  color: #0b0b0e;
  border: 1px solid var(--surface-glass-border-strong);
}

.btn-secondary {
  background: linear-gradient(180deg, #1f2937, #111827);
  color: var(--text-secondary);
}

.btn-glass {
  background: linear-gradient(180deg, #ffffff, #ececf2);
  color: #111827;
  box-shadow: var(--shadow-light);
}

.btn-glass:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

/* ===== CARRUSELES COMUNES ===== */
.carousel-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-medium);
  display: inline-block;
  background: rgba(0,0,0,0.08);
}

.carousel-slides {
  display: flex;
  transition: transform var(--transition-slow);
}

.carousel-slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-slide img {
  max-width: 100%;
  height: auto;
  display: block;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background-color var(--transition-medium);
}

.carousel-indicator.active {
  background-color: white;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.35);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-medium);
  z-index: 10;
}

.carousel-arrow:hover {
  background-color: rgba(0,0,0,0.55);
}

.carousel-arrow.prev {
  left: 10px;
}

.carousel-arrow.next {
  right: 10px;
}

/* ===== GRADIENTES ANIMADOS ===== */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes textGradientShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

.gradient-text {
  background: linear-gradient(-45deg, var(--accent-cyan-light), var(--accent-pink), var(--accent-light-blue), var(--accent-pink-light), var(--accent-purple-light));
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradientShift 20s ease-in-out infinite;
}

.gradient-bg {
  background: linear-gradient(135deg, #3dd2ff, #7c4dff 50%, #ff05f2);
  background-size: 300% 300%;
  animation: gradientShift 18s ease infinite;
}

/* ===== UTILIDADES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.w-full { width: 100%; }
.h-auto { height: auto; }

.flex { display: flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.place-items-center { place-items: center; }

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }

.m-0 { margin: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }

.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .container {
    width: 95%;
    padding: 0 16px;
  }
  
  .section {
    padding: 24px 16px;
  }
}

@media (max-width: 480px) {
  .container {
    width: 100%;
    padding: 0 12px;
  }
  
  .section {
    padding: 20px 12px;
  }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  .gradient-text,
  .gradient-bg,
  * {
    animation: none !important;
  }
}

/* ===== FOCUS STATES ===== */
.btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ===== HOVER EFFECTS ===== */
.hover-lift:hover {
  transform: translateY(-1px);
}

.hover-lift-strong:hover {
  transform: translateY(-2px);
}

.hover-brightness:hover {
  filter: brightness(1.04);
}

/* ===== TÍTULOS CON COLOR DE ACENTO ===== */
.title-accent {
  color: var(--accent-primary);
}

.title-accent-gradient {
  background: linear-gradient(135deg, var(--accent-cyan-alt), var(--accent-primary), var(--accent-pink));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1.accent, h2.accent, h3.accent, h4.accent, h5.accent, h6.accent {
  color: var(--accent-primary);
}

/* ===== FONDOS ANIMADOS ===== */
.animated-gradient-bg {
  background: linear-gradient(135deg, #3dd2ff, #7c4dff 50%, #ff05f2);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}