/* ============================================
   VARIABLES CSS GLOBALES
   ============================================
   Centraliza colores, espaciados y otros valores
   para facilitar cambios globales
============================================ */
:root {
  /* COLORES PRINCIPALES - TEMA AMARILLO */
  --color-primary: #ffc107; /* Amarillo principal */
  --color-primary-dark: #ffa000; /* Amarillo oscuro para hover */
  --color-primary-light: #ffecb3; /* Amarillo claro para fondos */
  --color-secondary: #ff6f00; /* Naranja como acento */

  /* COLORES DE TEXTO */
  --color-text-dark: #333333; /* Texto principal */
  --color-text-light: #666666; /* Texto secundario */
  --color-text-white: #ffffff; /* Texto sobre fondos oscuros */

  /* COLORES DE FONDO */
  --color-bg-white: #ffffff; /* Fondo blanco */
  --color-bg-light: #f5f5f5; /* Fondo gris claro */

  /* ESPACIADOS */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 1rem; /* 16px */
  --spacing-md: 1.5rem; /* 24px */
  --spacing-lg: 2rem; /* 32px */
  --spacing-xl: 3rem; /* 48px */
  --spacing-xxl: 4rem; /* 64px */

  /* BORDES Y SOMBRAS */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);

  /* TRANSICIONES */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--color-text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================================
   SECCIÓN HERO CON PARALLAX
   ============================================
   Banner principal con efecto parallax
   
   PERSONALIZACIÓN:
   - Cambiar color: Modifica --color-primary
   - Cambiar altura: Modifica min-height
   - Ajustar velocidad parallax: Ver JavaScript
   - Cambiar imagen de fondo: Modifica background-image en .hero-parallax-bg
============================================ */
.hero-ninos {
  position: relative;
  min-height: 500px; /* CAMBIAR: Altura del hero (400px, 500px, 600px) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-text-white);
}

/* Fondo con parallax */
.hero-parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* Extra para efecto parallax */
  /* CAMBIAR: Imagen de fondo del hero */
  background-image: url("imagens-web/heros/hero-niños-socios.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  /* CAMBIAR: Color de fondo si no hay imagen */
  background-color: var(--color-primary);
  will-change: transform; /* Optimización para parallax */
}

/* Overlay oscuro para mejorar legibilidad */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CAMBIAR: Opacidad del overlay (0.3 a 0.6) */
  background: linear-gradient(
    135deg,
    rgba(255, 193, 7, 0.85) 0% /* Amarillo semi-transparente */,
    rgba(255, 160, 0, 0.75) 100% /* Amarillo oscuro semi-transparente */
  );
  z-index: 2;
}

/* Contenido del hero */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px; /* CAMBIAR: Ancho máximo del contenido */
  padding: var(--spacing-lg);
  animation: fadeInUp 1s ease-out;
}

/* Título del hero */
.hero-title {
  font-size: 3.5rem; /* CAMBIAR: Tamaño del título */
  font-weight: 800;
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Descripción del hero */
.hero-description {
  font-size: 1.25rem; /* CAMBIAR: Tamaño de la descripción */
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Animación de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SECCIÓN DE CONTENIDO CON IMAGEN LATERAL
   ============================================
   Layout de dos columnas con imagen de fondo
   
   PERSONALIZACIÓN:
   - Cambiar distribución: Modifica grid-template-columns
   - Invertir posición: Cambia el 'order' de las columnas
   - Cambiar imagen de fondo: Modifica background-image en .content-background
   - Ajustar padding: Modifica padding en .content-section
============================================ */
.content-section {
  position: relative;
  padding: var(--spacing-xxl) var(--spacing-md); /* CAMBIAR: Espaciado vertical */
  background-color: var(--color-bg-white);
  overflow: hidden;
}

/* Imagen de fondo decorativa */
.content-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CAMBIAR: Imagen de fondo de la sección */
  background-image: url("imagens-web/heros/fondo-ninos.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* CAMBIAR: Opacidad de la imagen de fondo (0.1 a 0.3) */
  opacity: 0.1;
  z-index: 1;
  pointer-events: none; /* No interfiere con clicks */
}

/* Contenedor principal con grid */
.content-container {
  position: relative;
  z-index: 2;
  max-width: 1400px; /* CAMBIAR: Ancho máximo del contenedor */
  margin: 0 auto;
  display: grid;
  /* CAMBIAR: Distribución de columnas (1fr 1fr = 50%-50%) */
  grid-template-columns: 1fr 1fr; /* Texto 50% - Imagen 50% */
  gap: var(--spacing-xl); /* CAMBIAR: Espacio entre columnas */
  align-items: center;
}

/* ============================================
   COLUMNA DE TEXTO (IZQUIERDA)
   ============================================
   PARA MOVER A LA DERECHA: Agrega 'order: 2;'
============================================ */
.content-text {
  padding: var(--spacing-lg);
  order: 1; /* CAMBIAR: A 'order: 2' para mover a la derecha */
}

/* Título de la sección */
.content-title {
  font-size: 2.5rem; /* CAMBIAR: Tamaño del título */
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

/* Descripción de la sección */
.content-description {
  font-size: 1.125rem; /* CAMBIAR: Tamaño del texto */
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
}

/* ============================================
   BOTÓN DE LLAMADO A LA ACCIÓN
   ============================================
   PERSONALIZACIÓN:
   - Cambiar colores: Modifica background y color
   - Cambiar tamaño: Modifica padding y font-size
   - Cambiar forma: Modifica border-radius
============================================ */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl); /* CAMBIAR: Tamaño del botón */
  margin-top: var(--spacing-md);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-white);
  text-decoration: none;
  font-size: 1.125rem; /* CAMBIAR: Tamaño del texto */
  font-weight: 600;
  border-radius: var(--border-radius-md); /* CAMBIAR: Redondez del botón */
  box-shadow: var(--box-shadow);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

/* Efecto hover del botón */
.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-hover);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary) 100%);
}

/* Animación de la flecha en hover */
.cta-button:hover .button-icon {
  transform: translateX(5px);
}

/* Icono del botón */
.button-icon {
  width: 24px; /* CAMBIAR: Tamaño del icono */
  height: 24px;
  transition: transform var(--transition-normal);
}

/* ============================================
   COLUMNA DE IMAGEN (DERECHA)
   ============================================
   PARA MOVER A LA IZQUIERDA: Agrega 'order: 1;'
============================================ */
.content-image {
  position: relative;
  order: 2; /* CAMBIAR: A 'order: 1' para mover a la izquierda */
  padding: var(--spacing-lg);
}

/* Imagen principal */
.main-image {
  width: 100%; /* CAMBIAR: Ancho de la imagen (100%, 80%, etc) */
  height: auto;
  border-radius: var(--border-radius-lg); /* CAMBIAR: Redondez de la imagen */
  box-shadow: var(--box-shadow);
  transition: transform var(--transition-slow);
  object-fit: cover;
  /* CAMBIAR: Altura fija si es necesario */
  /* max-height: 500px; */
}

/* Efecto hover en la imagen */
.main-image:hover {
  transform: scale(1.02); /* CAMBIAR: Zoom al pasar mouse (1.02 a 1.1) */
}

/* Decoración detrás de la imagen (opcional) */
.image-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 200px; /* CAMBIAR: Tamaño de la decoración */
  height: 200px;
  background: var(--color-primary-light);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.5;
  filter: blur(40px);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================
   Breakpoints para diferentes dispositivos
============================================ */

/* Tablets grandes (992px - 1200px) */
@media (max-width: 1200px) {
  .hero-title {
    font-size: 3rem;
  }

  .content-title {
    font-size: 2rem;
  }
}

/* Tablets (768px - 992px) */
@media (max-width: 992px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-description {
    font-size: 1.125rem;
  }

  .content-container {
    grid-template-columns: 1fr; /* Una columna */
    gap: var(--spacing-lg);
  }

  /* En móvil, siempre texto arriba, imagen abajo */
  .content-text {
    order: 1;
  }

  .content-image {
    order: 2;
  }

  .content-title {
    font-size: 1.875rem;
  }
}

/* Móviles (menos de 768px) */
@media (max-width: 768px) {
  .hero-ninos {
    min-height: 400px; /* Reduce altura en móviles */
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .content-section {
    padding: var(--spacing-xl) var(--spacing-sm);
  }

  .content-text,
  .content-image {
    padding: var(--spacing-sm);
  }

  .content-title {
    font-size: 1.5rem;
  }

  .content-description {
    font-size: 1rem;
  }

  .cta-button {
    width: 100%; /* Botón de ancho completo en móviles */
    justify-content: center;
    padding: var(--spacing-md);
  }

  .image-decoration {
    display: none; /* Oculta decoración en móviles */
  }
}

/* Móviles pequeños (menos de 480px) */
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.75rem;
  }

  .hero-description {
    font-size: 0.9375rem;
  }

  .content-title {
    font-size: 1.25rem;
  }

  .content-description {
    font-size: 0.9375rem;
  }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}