/* ===============================================
   ESTILOS COMPARTIDOS PARA COMPONENTES
   Alma Digital Academy
   =============================================== */

:root {
  /* Colores principales */
  --color-primary: #8C7B6C;
  --color-primary-dark: #736558;
  --color-background-light: #F8F5F2;
  --color-background-dark: #1A1A1A;
  --color-surface-light: #FFFFFF;
  --color-surface-dark: #2C2C2C;
  --color-text-light: #4A4A4A;
  --color-text-dark: #E0E0E0;
  --color-subtle-light: #6B7280;
  --color-subtle-dark: #A0A0A0;
  --color-accent-gold: #D4AF37;
  --color-accent-venezuela: #B8860B;
  --color-accent-europa: #556B2F;
}

/* Tipografía */
.font-display {
  font-family: 'Cormorant Garamond', serif;
}

.font-body {
  font-family: 'Poppins', sans-serif;
}

/* Colores de fondo */
.bg-background-light {
  background-color: var(--color-background-light);
}

.bg-surface-dark {
  background-color: var(--color-surface-dark);
}

/* Colores de texto */
.text-primary {
  color: var(--color-primary);
}

.text-text-light {
  color: var(--color-text-light);
}

.text-text-dark {
  color: var(--color-text-dark);
}

.text-subtle-dark {
  color: var(--color-subtle-dark);
}

.text-accent-gold {
  color: var(--color-accent-gold);
}

/* Header - Glassmorphism Navigation */
/* Nota: index.html define .gooey-nav inline para evitar conflictos */
/* Otras páginas cargan el header completo vía loader.js */

/* Utilidades */
.hidden {
  display: none !important;
}

/* Transiciones suaves */
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}