/* ============================================
   VARIABLES CSS - COLORES Y CONFIGURACIÓN
   ============================================
   Define los colores principales del sitio
   
   PARA CAMBIAR COLORES:
   - Color verde principal: Modifica --color-primary
   - Color verde oscuro: Modifica --color-primary-dark
   - Colores de fondo: Modifica --color-bg-*
   - Colores de texto: Modifica --color-text-*
============================================ */
:root {
  /* Colores principales - Verde Cooindegabo */
  --color-primary: #388e3c;
  --color-primary-dark: #2e7d32;
  --color-primary-light: #4caf50;

  /* Colores de fondo */
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f5f5;
  --color-bg-gray: #e0e0e0;

  /* Colores de texto */
  --color-text-dark: #212121;
  --color-text-medium: #424242;
  --color-text-light: #757575;

  /* Espaciado */
  --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 redondeados */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;

  /* Sombras */
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 8px 24px 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: "Arial", sans-serif;
  line-height: 1.6;
  color: var(--color-text-dark);
  overflow-x: hidden;
}

/* ============================================
   SECCIÓN 1: HERO BANNER CON PARALLAX
   ============================================
   Banner principal con imagen de fondo y efecto parallax
   
   PERSONALIZACIÓN:
   - Altura del hero: Modifica min-height
   - Velocidad parallax: Ajusta transform en JS
   - Opacidad overlay: Modifica rgba en .hero-overlay
============================================ */

.hero-trabaja {
  position: relative; /* Permite posicionar elementos hijos absolutamente */
  min-height: 500px; /* Altura mínima del hero - CAMBIAR AQUÍ para más/menos alto */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Oculta la imagen cuando se sale del contenedor */
  color: var(--color-bg-white);
}

/* Contenedor de la imagen de fondo */
.hero-background {
  position: absolute; /* Se posiciona sobre todo el hero */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Detrás del contenido */
}

/* Imagen con efecto parallax */
.parallax-image {
  width: 100%;
  height: 120%; /* Más alta para permitir el efecto parallax */
  object-fit: cover; /* Cubre todo el espacio sin deformar */
  object-position: center;
  will-change: transform; /* Optimiza la animación */
  transition: transform 0.1s ease-out;
}

/* Overlay verde semi-transparente sobre la imagen */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(56, 142, 60, 0.85) 0% /* Verde principal con 85% opacidad */,
    rgba(46, 125, 50, 0.9) 100% /* Verde oscuro con 90% opacidad */
  );
  /* CAMBIAR OPACIDAD: Modifica los valores 0.85 y 0.90 */
  /* Mayor valor = más opaco, menor valor = más transparente */
}

/* Contenido del hero (texto) */
.hero-content {
  position: relative;
  z-index: 2; /* Por encima del fondo y overlay */
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  max-width: 900px; /* Ancho máximo del contenido */
  margin: 0 auto;
}

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

/* Descripción del hero */
.hero-description {
  font-size: 1.25rem; /* Tamaño mediano - CAMBIAR AQUÍ */
  line-height: 1.8;
  margin-bottom: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1s ease; /* Animación de entrada con delay */
}

/* ============================================
   SECCIÓN 2: GRID DE VACANTES
   ============================================
   Contenedor de las cards de vacantes
   
   PERSONALIZACIÓN:
   - Columnas en desktop: Modifica grid-template-columns
   - Espaciado entre cards: Modifica gap
   - Padding de la sección: Modifica padding
============================================ */

.vacantes-section {
  padding: var(--spacing-xxl) var(--spacing-md); /* Padding vertical y horizontal */
  background-color: var(--color-bg-light); /* Fondo gris claro */
}

.vacantes-container {
  max-width: 1400px; /* Ancho máximo del contenedor */
  margin: 0 auto; /* Centra el contenedor */
}

/* Grid de vacantes */
.vacantes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales en desktop */
  /* CAMBIAR COLUMNAS: repeat(2, 1fr) para 2 columnas, repeat(4, 1fr) para 4 columnas */
  gap: var(--spacing-lg); /* Espacio entre cards - CAMBIAR AQUÍ */
  margin-bottom: var(--spacing-xxl);
}

/* ============================================
   CARD DE VACANTE
   ============================================
   Estilos de cada tarjeta de vacante individual
   
   PERSONALIZACIÓN:
   - Color de fondo: Modifica background-color
   - Tamaño de la card: Modifica padding
   - Efecto hover: Modifica transform y box-shadow en :hover
============================================ */

.vacante-card {
  background-color: var(--color-bg-white); /* Fondo blanco */
  border-radius: var(--border-radius-lg); /* Bordes redondeados */
  padding: var(--spacing-lg); /* Espacio interno - CAMBIAR AQUÍ */
  box-shadow: var(--box-shadow); /* Sombra suave */
  transition: all var(--transition-normal); /* Transición suave */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  cursor: pointer; /* Indica que es interactivo */
}

/* Efecto al pasar el mouse sobre la card */
.vacante-card:hover {
  transform: translateY(-8px); /* Eleva la card 8px - CAMBIAR AQUÍ */
  box-shadow: var(--box-shadow-hover); /* Sombra más pronunciada */
}

/* Imagen de la vacante */
.vacante-imagen {
  width: 100%; /* Ocupa todo el ancho de la card */
  height: 180px; /* Altura fija - CAMBIAR AQUÍ para más/menos alto */
  border-radius: var(--border-radius-md);
  overflow: hidden; /* Oculta partes de la imagen que sobresalen */
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Imagen dentro del contenedor */
.vacante-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre todo el espacio sin deformar */
  object-position: center;
  transition: transform var(--transition-normal);
}

/* Efecto zoom en la imagen al pasar el mouse sobre la card */
.vacante-card:hover .vacante-imagen img {
  transform: scale(1.1); /* Aumenta 10% el tamaño - CAMBIAR AQUÍ */
}

/* Información de la vacante */
.vacante-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Ciudad de la vacante */
.vacante-ciudad {
  display: inline-block;
  background-color: var(--color-primary-light); /* Fondo verde claro */
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 20px; /* Bordes muy redondeados (pill shape) */
  font-size: 0.875rem; /* Tamaño pequeño - CAMBIAR AQUÍ */
  font-weight: 600;
  text-transform: uppercase; /* Texto en mayúsculas */
  letter-spacing: 0.5px;
  width: fit-content; /* Solo ocupa lo necesario */
}

/* Cargo/Título de la vacante */
.vacante-cargo {
  font-size: 1.5rem; /* Tamaño grande - CAMBIAR AQUÍ */
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.3;
}

/* Descripción de la vacante */
.vacante-descripcion {
  font-size: 1rem; /* Tamaño normal - CAMBIAR AQUÍ */
  color: var(--color-text-medium);
  line-height: 1.6;
  margin: 0;
}

/* Sección de salario */
.vacante-salario {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 2px solid var(--color-bg-gray); /* Línea separadora */
  font-size: 1.125rem; /* Tamaño medio-grande - CAMBIAR AQUÍ */
  font-weight: 600;
  color: var(--color-primary);
}

.salario-icon {
  width: 20px; /* Tamaño del icono de salario */
  height: 20px;
  color: var(--color-primary);
}

/* ============================================
   SECCIÓN 3: LLAMADO A LA ACCIÓN (EMAIL)
   ============================================
   Sección destacada para enviar hoja de vida
   
   PERSONALIZACIÓN:
   - Color de fondo: Modifica background
   - Tamaño de texto: Modifica font-size
   - Color del email: Modifica color en .email-link
============================================ */

.cta-email {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  /* CAMBIAR FONDO: Modifica los colores del gradient */
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xxl) var(--spacing-lg);
  text-align: center;
  box-shadow: var(--box-shadow-hover);
  animation: fadeInUp 1s ease; /* Animación de entrada */
}

.cta-email-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  color: white;
}

/* Icono de email */
.email-icon {
  width: 60px; /* Tamaño del icono - CAMBIAR AQUÍ */
  height: 60px;
  color: white;
  opacity: 0.9;
}

/* Texto del llamado a la acción */
.cta-text {
  font-size: 1.5rem; /* Tamaño grande - CAMBIAR AQUÍ */
  line-height: 1.6;
  margin: 0;
}

.cta-text strong {
  font-weight: 700;
  font-size: 1.75rem; /* Más grande para énfasis */
}

/* Link del email (clickeable) */
.email-link {
  font-size: 2rem; /* Tamaño muy grande - CAMBIAR AQUÍ */
  font-weight: 700;
  color: #ffd700; /* Amarillo dorado - CAMBIAR AQUÍ */
  text-decoration: none;
  border-bottom: 3px solid #ffd700;
  padding-bottom: var(--spacing-xs);
  transition: all var(--transition-normal);
}

/* Efecto hover en el email */
.email-link:hover {
  color: white; /* Cambia a blanco al pasar el mouse */
  border-bottom-color: white;
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

/* Subtítulo adicional */
.cta-subtitle {
  font-size: 1.125rem; /* Tamaño medio */
  opacity: 0.9;
  margin: 0;
}

/* ============================================
   ANIMACIONES
   ============================================
   Animaciones reutilizables para elementos
============================================ */

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

/* ============================================
   RESPONSIVE DESIGN - TABLETS
   ============================================
   Ajustes para pantallas medianas (tablets)
   
   BREAKPOINT: 992px
   CAMBIAR: Modifica max-width para ajustar el punto de quiebre
============================================ */

@media (max-width: 992px) {
  /* Hero: Reducir altura y tamaños de fuente */
  .hero-trabaja {
    min-height: 400px; /* Menos alto en tablets */
  }

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

  .hero-description {
    font-size: 1.125rem; /* Descripción más pequeña */
  }

  /* Vacantes: Cambiar a 2 columnas en tablets */
  .vacantes-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    /* CAMBIAR: repeat(1, 1fr) para 1 columna en tablets */
    gap: var(--spacing-md); /* Menos espacio entre cards */
  }

  /* Reducir padding de la sección */
  .vacantes-section {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  /* CTA Email: Reducir tamaños */
  .cta-email {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .cta-text {
    font-size: 1.25rem;
  }

  .cta-text strong {
    font-size: 1.5rem;
  }

  .email-link {
    font-size: 1.5rem;
  }

  /* Ajustar altura de imagen en tablets */
  .vacante-imagen {
    height: 160px; /* Menos alto en tablets */
  }
}

/* ============================================
   RESPONSIVE DESIGN - MÓVILES
   ============================================
   Ajustes para pantallas pequeñas (móviles)
   
   BREAKPOINT: 768px
   CAMBIAR: Modifica max-width para ajustar el punto de quiebre
============================================ */

@media (max-width: 768px) {
  /* Hero: Ajustar para móviles */
  .hero-trabaja {
    min-height: 350px; /* Aún más bajo en móviles */
  }

  .hero-title {
    font-size: 2rem; /* Título más pequeño */
  }

  .hero-description {
    font-size: 1rem; /* Descripción más pequeña */
  }

  .hero-content {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* Vacantes: 1 columna en móviles */
  .vacantes-grid {
    grid-template-columns: 1fr; /* 1 columna única */
    gap: var(--spacing-md);
  }

  /* Cards más compactas */
  .vacante-card {
    padding: var(--spacing-md);
  }

  .vacante-icon {
    width: 50px; /* Icono más pequeño */
    height: 50px;
  }

  .vacante-icon svg {
    width: 28px;
    height: 28px;
  }

  .vacante-cargo {
    font-size: 1.25rem; /* Cargo más pequeño */
  }

  .vacante-descripcion {
    font-size: 0.9375rem; /* Descripción más pequeña */
  }

  .vacante-salario {
    font-size: 1rem; /* Salario más pequeño */
  }

  /* CTA Email: Ajustar para móviles */
  .cta-email {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .email-icon {
    width: 50px;
    height: 50px;
  }

  .cta-text {
    font-size: 1.125rem;
  }

  .cta-text strong {
    font-size: 1.25rem;
  }

  .email-link {
    font-size: 1.25rem;
    word-break: break-all; /* Permite romper el email en varias líneas */
  }

  .cta-subtitle {
    font-size: 1rem;
  }

  /* Ajustar altura de imagen en móviles */
  .vacante-imagen {
    height: 140px; /* Menos alto en móviles */
  }
}

/* ============================================
   RESPONSIVE DESIGN - MÓVILES PEQUEÑOS
   ============================================
   Ajustes para pantallas muy pequeñas
   
   BREAKPOINT: 480px
============================================ */

@media (max-width: 480px) {
  /* Ajustes finales para pantallas muy pequeñas */
  .hero-title {
    font-size: 1.75rem;
  }

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

  .vacante-cargo {
    font-size: 1.125rem;
  }

  .cta-text {
    font-size: 1rem;
  }

  .cta-text strong {
    font-size: 1.125rem;
  }

  .email-link {
    font-size: 1.125rem;
  }

  /* Ajustar altura de imagen en móviles pequeños */
  .vacante-imagen {
    height: 120px; /* Aún más bajo en móviles pequeños */
  }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}