/*
|--------------------------------------------------------------------------
| Estilos Base y Variables Globales (Tema Slider Pro)
|--------------------------------------------------------------------------
| Este archivo contiene las variables y clases de utilidad customizadas
| para el diseño de la vista principal (Opción C).
|
*/

:root {
  --bg-main: #F8FAFC;
  --bg-alt: #EDF2F7;
  --brand-primary: #044336;
  --brand-secondary: #0A6352;
  --brand-accent: #059669;
  --brand-accent-hover: #047857;
  --text-color: #0F172A;
  --muted-color: #475569;
  --border-color: #CBD5E1;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

body {
  background-color: var(--bg-main);
  color: var(--text-color);
  font-family: var(--font-body);
}

h1, h2, h3, .font-heading {
  font-family: var(--font-heading);
}

/*
|--------------------------------------------------------------------------
| Animaciones Reveal (Aparición al hacer scroll)
|--------------------------------------------------------------------------
*/
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/*
|--------------------------------------------------------------------------
| Transiciones del Slider Interactivo
|--------------------------------------------------------------------------
*/
.slide-item {
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}