/* ============================================
   ESTILOS PARA ÓRGANOS DE ADMINISTRACIÓN Y CONTROL
   ============================================
   
   ÍNDICE DE SECCIONES:
   1. Variables CSS (colores, espaciados, tamaños)
   2. Hero Banner (encabezado con imagen de fondo)
   3. Secciones de órganos (contenedores generales)
   4. Grid de miembros (tarjetas de integrantes)
   5. Imágenes centradas (secciones con un solo miembro)
   6. Responsive Design (adaptación a móviles y tablets)
   
   CÓMO PERSONALIZAR:
   - Cambiar colores: Modifica las variables en :root
   - Cambiar tamaños de imagen: Modifica width y height en .miembro-foto
   - Cambiar número de columnas: Modifica grid-template-columns en .miembros-grid
   - Cambiar espaciados: Modifica las variables --spacing-*
============================================ */

/* ============================================
   1. VARIABLES CSS GLOBALES
   ============================================ */
:root {
  /* COLORES PRINCIPALES */
  --color-primary: #388e3c; /* Verde principal de la cooperativa */
  --color-primary-dark: #2e7d32; /* Verde oscuro para hover */
  --color-primary-light: #4caf50; /* Verde claro para acentos */

  /* COLORES DE TEXTO */
  --color-text-dark: #1a1a1a; /* Texto principal oscuro */
  --color-text-medium: #555555; /* Texto secundario */
  --color-text-light: #777777; /* Texto terciario */
  --color-text-white: #ffffff; /* Texto sobre fondos oscuros */

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

  /* ESPACIADOS */
  --spacing-xs: 8px; /* Espaciado extra pequeño */
  --spacing-sm: 16px; /* Espaciado pequeño */
  --spacing-md: 24px; /* Espaciado mediano */
  --spacing-lg: 32px; /* Espaciado grande */
  --spacing-xl: 48px; /* Espaciado extra grande */
  --spacing-xxl: 64px; /* Espaciado extra extra grande */

  /* TAMAÑOS DE IMAGEN */
  --foto-size-normal: 150px; /* Tamaño normal de foto de miembro */
  --foto-size-grande: 200px; /* Tamaño grande para destacados */

  /* BORDES Y SOMBRAS */
  --border-radius-sm: 8px; /* Radio de borde pequeño */
  --border-radius-md: 12px; /* Radio de borde mediano */
  --border-radius-lg: 16px; /* Radio de borde grande */
  --border-radius-full: 50%; /* Radio completo para círculos */
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  --box-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15); /* Sombra en hover */

  /* TRANSICIONES */
  --transition-fast: 0.2s ease; /* Transición rápida */
  --transition-normal: 0.3s ease; /* Transición normal */
  --transition-slow: 0.5s ease; /* Transición lenta */
}

/* 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);
}

/* ============================================
   2. HERO BANNER
   Encabezado principal con imagen de fondo verde
   ============================================ */

/* PARA CAMBIAR LA IMAGEN DE FONDO: 
   Modifica la propiedad background-image con tu URL de imagen */
.hero-banner-organos {
  position: relative;
  min-height: 400px; /* Altura mínima del banner */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xxl) var(--spacing-md);

  /* IMAGEN DE FONDO */
  background-image: linear-gradient(135deg, rgba(56, 142, 60, 0.85), rgba(46, 125, 50, 0.9)),
    url("imagens-web/heros/fondo-delegados.png");
  background-size: cover; /* La imagen cubre todo el área */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* No repite la imagen */
  background-attachment: fixed; /* Efecto parallax (opcional) */

  overflow: hidden;
}

/* Overlay para mejorar legibilidad del texto sobre la imagen */
/* PARA AJUSTAR OSCURIDAD: Cambia el valor rgba (último número es opacidad) */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* Overlay negro semi-transparente */
  z-index: 1;
}

/* Contenedor del contenido del hero */
.hero-content {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  max-width: 900px;
  margin: 0 auto;
}

/* Título principal del hero */
/* PARA CAMBIAR TAMAÑO: Modifica font-size */
.hero-title {
  font-size: 3rem; /* Tamaño del título (48px) */
  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 */
  line-height: 1.2;
}

/* Descripción del hero */
/* PARA CAMBIAR TAMAÑO: Modifica font-size */
.hero-description {
  font-size: 1.25rem; /* Tamaño de la descripción (20px) */
  color: var(--color-text-white);
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
   3. SECCIONES DE ÓRGANOS
   Contenedores generales para cada órgano
   ============================================ */

/* Sección completa de un órgano */
.organo-section {
  padding: var(--spacing-xxl) var(--spacing-md);
  background-color: var(--color-bg-white);
}

/* Sección alternativa con fondo gris claro */
/* PARA CAMBIAR COLOR DE FONDO: Modifica background-color */
.organo-section-alt {
  background-color: var(--color-bg-light);
}

/* Contenedor interno con ancho máximo */
/* PARA CAMBIAR ANCHO MÁXIMO: Modifica max-width */
.organo-container {
  max-width: 1400px; /* Ancho máximo del contenido */
  margin: 0 auto;
}

/* Encabezado de cada sección de órgano */
.organo-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

/* Título de la sección (h2) */
/* PARA CAMBIAR TAMAÑO: Modifica font-size */
/* PARA CAMBIAR COLOR: Modifica color */
.organo-title {
  font-size: 2.5rem; /* Tamaño del título (40px) */
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  position: relative;
  display: inline-block;
}

/* Línea decorativa debajo del título */
.organo-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary-dark));
  border-radius: 2px;
}

/* Descripción de la sección */
/* PARA CAMBIAR TAMAÑO: Modifica font-size */
.organo-description {
  font-size: 1.1rem; /* Tamaño de la descripción (17.6px) */
  color: var(--color-text-medium);
  line-height: 1.8;
  max-width: 800px;
  margin: var(--spacing-md) auto 0;
}

/* ============================================
   4. GRID DE MIEMBROS
   Tarjetas de integrantes en formato grid
   ============================================ */

/* Grid para mostrar múltiples miembros */
/* PARA CAMBIAR NÚMERO DE COLUMNAS EN DESKTOP: Modifica el número en repeat() */
/* PARA CAMBIAR ESPACIADO ENTRE CARDS: Modifica gap */
.miembros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas en desktop */
  gap: var(--spacing-lg); /* Espaciado entre cards */
  margin-top: var(--spacing-xl);
}

/* Tarjeta individual de cada miembro */
.miembro-card {
  background-color: var(--color-bg-white);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--box-shadow);
  transition: all var(--transition-normal);
}

/* Efecto hover en las tarjetas */
.miembro-card:hover {
  transform: translateY(-5px); /* Se eleva ligeramente */
  box-shadow: var(--box-shadow-hover); /* Sombra más pronunciada */
}

/* Contenedor de la foto del miembro */
/* PARA CAMBIAR TAMAÑO DE FOTOS: Modifica width y height */
.miembro-foto {
  width: var(--foto-size-normal); /* Ancho de la foto (150px) */
  height: var(--foto-size-normal); /* Alto de la foto (150px) */
  margin: 0 auto var(--spacing-md);
  border-radius: var(--border-radius-full); /* Fotos circulares */
  overflow: hidden;
  border: 4px solid var(--color-primary-light);
  box-shadow: 0 4px 12px rgba(56, 142, 60, 0.2);
  transition: all var(--transition-normal);
}

/* Efecto hover en la foto */
.miembro-card:hover .miembro-foto {
  border-color: var(--color-primary-dark);
  transform: scale(1.05); /* Zoom ligero */
}

/* Imagen dentro del contenedor */
.miembro-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta la imagen para ajustar */
  object-position: center; /* Centra la imagen */
}

/* Nombre del miembro */
/* PARA CAMBIAR TAMAÑO: Modifica font-size */
.miembro-nombre {
  font-size: 1.1rem; /* Tamaño del nombre */
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
}

/* Cargo del miembro */
/* PARA CAMBIAR TAMAÑO: Modifica font-size */
.miembro-cargo {
  font-size: 0.95rem; /* Tamaño del cargo */
  color: var(--color-text-medium);
  font-weight: 500;
}

/* Información adicional del miembro */
.miembro-info {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-top: var(--spacing-xs);
  font-style: italic;
}

/* ============================================
   5. IMÁGENES CENTRADAS
   Para secciones con un solo miembro destacado
   ============================================ */

/* Contenedor para centrar una imagen única */
.imagen-centrada-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-xl);
}

/* Tarjeta destacada para miembro único */
/* PARA CAMBIAR ANCHO: Modifica max-width */
.miembro-card-destacado {
  max-width: 350px; /* Ancho máximo de la card destacada */
  width: 100%;
}

/* Foto más grande para miembro destacado */
/* PARA CAMBIAR TAMAÑO: Modifica --foto-size-grande en :root */
.miembro-foto-grande {
  width: var(--foto-size-grande); /* Ancho de foto grande (200px) */
  height: var(--foto-size-grande); /* Alto de foto grande (200px) */
  border-width: 5px; /* Borde más grueso */
}

/* ============================================
   6. RESPONSIVE DESIGN
   Adaptación a diferentes tamaños de pantalla
   ============================================ */

/* TABLETS (pantallas medianas) */
/* PARA CAMBIAR BREAKPOINT: Modifica max-width */
@media (max-width: 1024px) {
  /* Hero banner en tablets */
  .hero-title {
    font-size: 2.5rem; /* Título más pequeño (40px) */
  }

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

  /* Grid de miembros: 3 columnas en tablets */
  /* PARA CAMBIAR COLUMNAS EN TABLETS: Modifica el número en repeat() */
  .miembros-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
  }

  /* Título de sección en tablets */
  .organo-title {
    font-size: 2rem; /* Título más pequeño */
  }
}

/* TABLETS PEQUEÑAS Y MÓVILES GRANDES */
@media (max-width: 768px) {
  /* Hero banner en móviles */
  .hero-banner-organos {
    min-height: 350px; /* Altura reducida */
    padding: var(--spacing-xl) var(--spacing-md);
    background-attachment: scroll; /* Desactiva parallax en móviles */
  }

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

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

  /* Espaciados reducidos en móviles */
  .organo-section {
    padding: var(--spacing-xl) var(--spacing-sm);
  }

  /* Grid de miembros: 2 columnas en móviles grandes */
  /* PARA CAMBIAR COLUMNAS EN MÓVILES: Modifica el número en repeat() */
  .miembros-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  /* Título de sección en móviles */
  .organo-title {
    font-size: 1.75rem; /* Título más pequeño */
  }

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

  /* Fotos más pequeñas en móviles */
  :root {
    --foto-size-normal: 120px; /* Fotos normales más pequeñas */
    --foto-size-grande: 150px; /* Fotos grandes más pequeñas */
  }
}

/* MÓVILES PEQUEÑOS */
@media (max-width: 480px) {
  /* Hero banner en móviles pequeños */
  .hero-banner-organos {
    min-height: 300px;
  }

  .hero-title {
    font-size: 1.5rem; /* Título más pequeño (24px) */
  }

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

  /* Grid de miembros: 1 columna en móviles pequeños */
  /* Todos los miembros se apilan verticalmente */
  .miembros-grid {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: var(--spacing-md);
  }

  /* Espaciados muy reducidos */
  .organo-section {
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  /* Título de sección en móviles pequeños */
  .organo-title {
    font-size: 1.5rem;
  }

  /* Fotos aún más pequeñas */
  :root {
    --foto-size-normal: 100px;
    --foto-size-grande: 130px;
  }

  /* Card destacada ocupa todo el ancho */
  .miembro-card-destacado {
    max-width: 100%;
  }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ============================================
   GUÍA RÁPIDA DE MODIFICACIONES
   ============================================
   
   CAMBIAR COLORES:
   - Modifica las variables en :root al inicio del archivo
   
   CAMBIAR TAMAÑOS DE FOTOS:
   - Para fotos normales: Modifica --foto-size-normal
   - Para fotos grandes: Modifica --foto-size-grande
   
   CAMBIAR NÚMERO DE COLUMNAS:
   - Desktop (4 columnas): .miembros-grid { grid-template-columns: repeat(4, 1fr); }
   - Tablets (3 columnas): En @media (max-width: 1024px)
   - Móviles (2 columnas): En @media (max-width: 768px)
   - Móviles pequeños (1 columna): En @media (max-width: 480px)
   
   AGREGAR MÁS MIEMBROS:
   - Copia un bloque completo .miembro-card en el HTML
   - Cambia la imagen, nombre y cargo
   
   CAMBIAR ESPACIADOS:
   - Modifica las variables --spacing-* en :root
   
   CAMBIAR IMAGEN DE FONDO DEL HERO:
   - Modifica background-image en .hero-banner-organos
   
   CAMBIAR BREAKPOINTS RESPONSIVE:
   - Modifica los valores max-width en @media
   
============================================ */