/* ==================================================
   Reset y Configuración Global
================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swap');

html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-family: 'Poppins', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

/* ==================================================
   Variables globales compartidas
================================================== */
:root {
  --primary-color: #006341; /* Verde corporativo */
  --secondary-color: #f1c40f; /* Amarillo/dorado para acentos */
  --accent-color: #e74c3c; /* Rojo para elementos importantes */
  --dark-color: #2c3e50; /* Más oscuro que negro para texto principal */
  --light-color: #f8f9fa; /* Fondo claro */
  --gray-color: #e9ecef; /* Fondos alternativos */
  --text-color: #333; /* Color de texto general */
  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra elegante */
  --transition: all 0.3s ease-in-out; /* Transición estándar */
  --border-radius: 10px; /* Bordes redondeados */
}

/* ==================================================
   Animaciones compartidas
================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1s ease, transform 0.8s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1s ease, transform 0.8s ease;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s ease, transform 0.8s ease;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Delay para animaciones secuenciales */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ==================================================
   Media Queries Básicas
================================================== */
@media (max-width: 992px) {
  /* Reglas básicas responsivas */
}

@media (max-width: 768px) {
  /* Reglas básicas responsivas */
}

@media (max-width: 576px) {
  /* Reglas básicas responsivas */
}