/* ============================================
   VARIABLES CSS - PALETA DE COLORES Y ESPACIADO
   ============================================
   Modifica estas variables para personalizar toda la sección
============================================ */
:root {
  /* COLORES PRINCIPALES - Color naranja para esta sección */
  --color-primary-naranja: #ff6f00; /* Naranja principal - CAMBIA ESTE COLOR */
  --color-primary-dark: #e65100; /* Naranja oscuro para hover */
  --color-primary-light: #ff9800; /* Naranja claro para efectos */

  /* COLORES DE TEXTO */
  --color-text-dark: #212121;
  --color-text-light: #757575;
  --color-text-white: #ffffff;

  /* COLORES DE FONDO */
  --color-bg-light: #f5f5f5;
  --color-bg-white: #ffffff;

  /* ESPACIADO - Modifica estos valores para cambiar espaciado general */
  --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 Y ESTILOS BASE
============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* ============================================
   SECCIÓN 1: HERO BANNER CON PARALLAX
   ============================================
   Banner principal con fondo naranja e imagen
   
   PERSONALIZACIÓN:
   - Cambiar altura: modificar height y min-height
   - Cambiar imagen de fondo: modificar background-image
   - Cambiar color overlay: modificar background en .hero-overlay
   - Desactivar parallax: comentar transform en JS
============================================ */
.hero-asociarte {
  position: relative;
  height: 60vh; /* Altura del hero - MODIFICAR AQUÍ */
  min-height: 400px; /* Altura mínima */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* IMAGEN DE FONDO - CAMBIAR URL POR TU IMAGEN */
  background-image: url("imagens-web/heros/hero-asociate.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Efecto parallax base */

  /* Color de fondo de respaldo si no carga la imagen */
  background-color: var(--color-primary-naranja);
}

/* Overlay oscuro para mejorar contraste del texto */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CAMBIAR OPACIDAD DEL OVERLAY - 0.5 = 50% oscuro */
  background: linear-gradient(
    135deg,
    rgba(255, 111, 0, 0.7) 0% /* Naranja con 70% opacidad */,
    rgba(230, 81, 0, 0.8) 100% /* Naranja oscuro con 80% opacidad */
  );
  z-index: 1;
}

/* Contenedor del contenido del hero */
.hero-content {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  text-align: center;
  padding: var(--spacing-lg);
  max-width: 800px;
  margin: 0 auto;
}

/* Título principal del hero */
.hero-title {
  font-size: 3.5rem; /* Tamaño del título - MODIFICAR AQUÍ */
  font-weight: 700;
  color: var(--color-text-white);
  margin-bottom: var(--spacing-md);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra para legibilidad */
  animation: fadeInUp 1s ease; /* Animación de entrada */
}

/* Descripción del hero */
.hero-description {
  font-size: 1.25rem; /* Tamaño de la descripción - MODIFICAR AQUÍ */
  color: var(--color-text-white);
  line-height: 1.8;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1s ease 0.2s both; /* Animación con delay */
}

/* ============================================
   SECCIÓN 2: CONTENIDO INFORMATIVO
   ============================================
   Layout de dos columnas con contenido e imagen
   
   PERSONALIZACIÓN:
   - Cambiar distribución de columnas: modificar grid-template-columns
   - Invertir posición imagen/contenido: cambiar grid-column de los elementos
   - Cambiar espaciado entre columnas: modificar gap
============================================ */
.info-asociarte {
  padding: var(--spacing-xxl) var(--spacing-md);
  background-color: var(--color-bg-white);
}

/* Contenedor principal con grid */
.info-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;

  /* DISTRIBUCIÓN DE COLUMNAS - MODIFICAR AQUÍ */
  /* 1fr = contenido, 1fr = imagen (columnas iguales) */
  /* Para hacer el contenido más ancho: 2fr 1fr */
  /* Para hacer la imagen más ancha: 1fr 2fr */
  grid-template-columns: 1fr 1fr;

  gap: var(--spacing-xl); /* Espacio entre columnas */
  align-items: center; /* Centra verticalmente */
}

/* ============================================
   COLUMNA DE CONTENIDO (TEXTOS Y BOTÓN)
   ============================================
   Por defecto en columna 1 (izquierda)
   
   PARA MOVER A LA DERECHA: Cambiar grid-column: 1 por grid-column: 2
============================================ */
.info-content {
  grid-column: 1; /* COLUMNA 1 = IZQUIERDA - Cambiar a 2 para mover a derecha */
  padding: var(--spacing-lg);
  animation: fadeInLeft 1s ease;
}

/* Subtítulo de la sección */
.info-title {
  font-size: 2.5rem; /* Tamaño del subtítulo - MODIFICAR AQUÍ */
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

/* Párrafos de texto */
.info-text {
  font-size: 1.125rem; /* Tamaño del texto - MODIFICAR AQUÍ */
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
}

/* ============================================
   BOTÓN CALL-TO-ACTION
   ============================================
   Botón para iniciar afiliación
   
   PERSONALIZACIÓN:
   - Cambiar color: modificar background
   - Cambiar tamaño: modificar padding y font-size
   - Cambiar efecto hover: modificar transform y box-shadow en :hover
============================================ */
.btn-afiliacion {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);

  /* ESTILO DEL BOTÓN - MODIFICAR AQUÍ */
  background: linear-gradient(135deg, var(--color-primary-naranja), var(--color-primary-light));
  color: var(--color-text-white);
  padding: 1rem 2rem; /* Espaciado interno del botón */
  font-size: 1.125rem; /* Tamaño del texto del botón */
  font-weight: 600;

  border: none;
  border-radius: var(--border-radius-md);
  text-decoration: none;
  cursor: pointer;

  box-shadow: var(--box-shadow);
  transition: all var(--transition-normal);
  margin-top: var(--spacing-md);
}

/* Efecto hover del botón */
.btn-afiliacion:hover {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-naranja));
  transform: translateY(-3px); /* Levanta el botón 3px */
  box-shadow: var(--box-shadow-hover);
}

/* Efecto active (al hacer clic) */
.btn-afiliacion:active {
  transform: translateY(-1px);
}

/* Texto del botón */
.btn-text {
  font-size: 1.125rem;
}

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

/* Animación del icono al hacer hover */
.btn-afiliacion:hover .btn-icon {
  transform: translateX(5px); /* Mueve la flecha 5px a la derecha */
}

/* ============================================
   COLUMNA DE IMAGEN
   ============================================
   Por defecto en columna 2 (derecha)
   
   PARA MOVER A LA IZQUIERDA: Cambiar grid-column: 2 por grid-column: 1
============================================ */
.info-image-container {
  grid-column: 2; /* COLUMNA 2 = DERECHA - Cambiar a 1 para mover a izquierda */
  position: relative;
  animation: fadeInRight 1s ease;
}

/* Imagen principal */
.info-image {
  width: 100%; /* Ocupa todo el ancho del contenedor */
  height: auto;

  /* TAMAÑO Y FORMA DE LA IMAGEN - MODIFICAR AQUÍ */
  max-height: 500px; /* Altura máxima de la imagen */
  object-fit: cover; /* Cómo se ajusta la imagen */

  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
  position: relative;
  z-index: 2;

  transition: transform var(--transition-normal);
}

/* Efecto hover en la imagen */
.info-image:hover {
  transform: scale(1.02); /* Aumenta 2% el tamaño */
}

/* Elemento decorativo detrás de la imagen */
.image-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100%;
  height: 100%;

  /* COLOR DEL CÍRCULO DECORATIVO - MODIFICAR AQUÍ */
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-naranja));

  border-radius: var(--border-radius-lg);
  opacity: 0.2; /* Transparencia del círculo */
  z-index: 1;
}

/* ============================================
   ANIMACIONES
   ============================================
   Animaciones de entrada para los elementos
============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   RESPONSIVE DESIGN - TABLETS
   ============================================
   Ajustes para pantallas medianas (768px - 1024px)
============================================ */
@media (max-width: 1024px) {
  /* Reducir tamaño del título del hero */
  .hero-title {
    font-size: 3rem;
  }

  /* Reducir tamaño de la descripción del hero */
  .hero-description {
    font-size: 1.125rem;
  }

  /* Reducir espaciado entre columnas */
  .info-container {
    gap: var(--spacing-lg);
  }

  /* Reducir tamaño del subtítulo */
  .info-title {
    font-size: 2rem;
  }
}

/* ============================================
   RESPONSIVE DESIGN - MÓVILES
   ============================================
   Ajustes para pantallas pequeñas (menos de 768px)
   Las columnas se apilan verticalmente
============================================ */
@media (max-width: 768px) {
  /* Hero más pequeño en móvil */
  .hero-asociarte {
    height: 50vh;
    min-height: 350px;
  }

  /* Títulos más pequeños */
  .hero-title {
    font-size: 2.5rem;
  }

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

  /* CAMBIO A UNA SOLA COLUMNA */
  .info-container {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: var(--spacing-lg);
  }

  /* Ambas secciones ocupan toda la columna */
  .info-content,
  .info-image-container {
    grid-column: 1; /* Ambos en columna 1 */
  }

  /* ORDEN DE LOS ELEMENTOS EN MÓVIL */
  /* Por defecto, imagen aparece después del contenido */
  /* Para mostrar imagen primero: agregar order: 1 a .info-content */
  .info-image-container {
    order: 2; /* Imagen al final */
  }

  .info-content {
    order: 1; /* Contenido primero */
    padding: var(--spacing-md);
  }

  /* Subtítulo más pequeño */
  .info-title {
    font-size: 1.75rem;
  }

  /* Texto más pequeño */
  .info-text {
    font-size: 1rem;
  }

  /* Botón más pequeño */
  .btn-afiliacion {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    width: 100%; /* Botón ocupa todo el ancho en móvil */
    justify-content: center;
  }

  /* Reducir tamaño del círculo decorativo */
  .image-decoration {
    top: -10px;
    right: -10px;
  }
}

/* ============================================
   RESPONSIVE DESIGN - MÓVILES PEQUEÑOS
   ============================================
   Ajustes para pantallas muy pequeñas (menos de 480px)
============================================ */
@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }

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

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

  .info-text {
    font-size: 0.9375rem;
  }

  /* Reducir padding general */
  .info-asociarte {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}


/* ============================================
   NOTAS PARA PERSONALIZACIÓN RÁPIDA
   ============================================
   
   1. CAMBIAR COLOR NARANJA:
      - Modificar --color-primary-naranja en :root
   
   2. INVERTIR POSICIÓN IMAGEN/CONTENIDO:
      - En .info-content: cambiar grid-column: 1 a grid-column: 2
      - En .info-image-container: cambiar grid-column: 2 a grid-column: 1
   
   3. CAMBIAR TAMAÑO DE IMAGEN:
      - Modificar max-height en .info-image
      - Modificar width para hacer imagen más pequeña (ej: width: 80%)
   
   4. DESACTIVAR PARALLAX:
      - Comentar el código en como-asociarte.js
      - O cambiar background-attachment: fixed a background-attachment: scroll
   
   5. CAMBIAR ALTURA DEL HERO:
      - Modificar height y min-height en .hero-asociarte
   
   6. HACER COLUMNAS DIFERENTES TAMAÑOS:
      - En .info-container, cambiar grid-template-columns
      - Ejemplo: 2fr 1fr (contenido más ancho) o 1fr 2fr (imagen más ancha)
   
   7. CAMBIAR ORDEN EN MÓVIL (imagen primero):
      - En @media móvil, cambiar order de .info-content a 2
      - Y order de .info-image-container a 1
   
============================================ */