:root {
  --font-family: 'Ubuntu', sans-serif;
  /* Extracted from Colores de identidad.jpeg */
  --primary-color: #00883C;
  /* ISABU Green */
  --primary-dark: #30602C;
  /* Dark Green */
  --secondary-color: #E10813;
  /* Red */
  --accent-color: #FFDC08;
  /* Yellow */

  --text-color: #333333;
  --text-light: #666666;
  --bg-color: #f4f7f6;
  --white: #ffffff;
  --border-color: #dddddd;
  --radius: 8px;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /*--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 60px 0;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1rem;
  color: var(--primary-dark);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

p {
  margin-bottom: 1rem;
}

pre {
  font-family: var(--font-family);
  white-space: pre-wrap;
  font-size: 1rem;
  line-height: 1.6;
}

/* Header */
.site-header {
  background-color: var(--white);
  box-shadow: var(--shadow);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-links a {
  margin-left: 20px;
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--primary-color);
}

/* ... en estilos.css, después de la regla 'a:hover' ... */

a:hover {
  color: var(--secondary-color);
}

/* --- NUEVO: Mejora de contraste para enlaces en texto --- */
/* Esto asegura que los enlaces dentro de párrafos y listas sean muy visibles */
p a,
li a {
  text-decoration: underline;
  /* Añade el subrayado */
  font-weight: 700;
  /* Lo pone en negrita */
  text-underline-offset: 3px;
  /* Separa un poco el subrayado del texto para mejor lectura */
}

/* Opcional: Efecto al pasar el mouse sobre estos enlaces específicos */
p a:hover,
li a:hover {
  text-decoration-thickness: 2px;
  /* Hace el subrayado más grueso al pasar el mouse */
}

/* --- Estilos para la Sección Hero --- */
/* ... el resto del CSS ... */

.logoevento {
  width: 100%;

  /* Carga la imagen */
  background-image: url('LogoEvento.jpeg');

  /* CRÍTICO: contain asegura que la imagen NUNCA se recorte */
  background-size: contain;

  /* Centra la imagen */
  background-position: center;

  /* Evita repeticiones */
  background-repeat: no-repeat;

  /* TRUCO PROFESIONAL: 
     Como el div está vacío, necesitamos darle "cuerpo". 
     La propiedad aspect-ratio le dice al navegador: 
     "Por cada 4 unidades de ancho, dame 1 de alto".
     
     He calculado esto basado en la forma visual de tu imagen (panorámica).
     Si la imagen real es, por ejemplo, 1200x300px, la relación es 4/1.
  */
  aspect-ratio: 4 / 1;

  /* OPCIONAL: Color de fondo de seguridad
     He detectado que tu imagen tiene un fondo verde. 
     Si pones este color de fondo, si la pantalla es gigante, 
     rellenará los lados del mismo color y parecerá infinito.
     (Ajusta el código hex al verde exacto de tu imagen si difiere) */
  background-color: #6bc236;
}

/* --- Estilos para la Sección Hero Actualizados --- */
.hero {
  /* Color de fondo de seguridad por si la imagen no carga */
  background-color: var(--primary-dark);

  /* CAPAS DE FONDO:
     1. Capa superior: Un degradado NEUTRO (negro transparente). 
        No afecta el color, solo oscurece para dar contraste al texto blanco.
     2. Capa inferior: La variable que contendrá tu imagen.
  */
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)),
    var(--hero-bg-image, none);
  /* Si no se define imagen, no muestra nada ahí */

  /* Asegura que la imagen cubra toda el área */
  background-size: cover;
  /* Centra la imagen */
  background-position: center center;
  /* Evita que se repita */
  background-repeat: no-repeat;

  color: var(--white);
  padding: 100px 0;
  /* Aumenté un poco el padding para que respire mejor la imagen */
  text-align: center;
  position: relative;
}

.hero h1 {
  color: var(--white);
  font-weight: 700;
  /* Sombra para el texto: CRUCIAL para leer sobre fotos */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  margin-bottom: 1.5rem;
}

.hero p {
  font-size: 1.3rem;
  /* Un poco más grande para mejor impacto */
  font-weight: 500;
  color: var(--white);
  opacity: 1;
  /* Quitamos la opacidad para que el blanco sea puro */
  max-width: 700px;
  margin: 0 auto 2.5rem;
  /* Sombra también para el párrafo */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Ajuste opcional para el botón para que resalte más sobre la foto */
.hero .btn-secondary {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border-width: 2px;
  font-weight: 700;
}

/* Components */
.btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--white);
  color: var(--primary-color);
  border: 2px solid var(--white);
}

.btn-secondary:hover {
  background-color: transparent;
  color: var(--white);
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-bottom: 2rem;
}

/* Forms */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 136, 60, 0.1);
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Tables */
.table-responsive {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  background-color: var(--white);
}

.table th,
.table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: var(--primary-dark);
}

.table tr:hover {
  background-color: #f1f1f1;
}

/* Footer */
.site-footer {
  background-color: #333;
  color: #fff;
  padding: 40px 0;
  text-align: center;
}

.site-footer a {
  color: var(--primary-color);
  text-decoration: none;
}

/* Utilities */
.text-center {
  text-align: center;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

/* --- Estilos para la Sección de Categorías --- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.category-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border-left: 5px solid var(--primary-color);
  /* Borde verde decorativo */
  transition: transform 0.2s ease;
}

.category-card:hover {
  transform: translateY(-5px);
}


.category-card h3 {
  font-size: 1.1rem;
  color: var(--primary-dark);
  margin-bottom: 1rem;
  min-height: 3.5rem;
  /* Alinea visualmente las tarjetas */
  display: flex;
  align-items: center;
}

.category-details summary {
  cursor: pointer;
  color: var(--primary-color);
  font-weight: 600;
  padding: 0.5rem 0;
  user-select: none;
  list-style: none;
  /* Oculta la flecha por defecto en algunos navegadores */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Flecha personalizada para el summary */
.category-details summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: bold;
}

.category-details[open] summary::after {
  content: '-';
}

.details-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.95rem;
}

.details-content h4 {
  font-size: 1rem;
  color: var(--secondary-color);
  /* Títulos internos en rojo */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.details-content ul {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

.details-content li {
  margin-bottom: 0.5rem;
  color: var(--text-light);
}

/* --- Botón de Descarga (Call to Action) --- */
.btn-download {
  background-color: var(--accent-color);

  /* CRÍTICO: Forzamos el color del texto a gris oscuro para que se lea sobre el amarillo */
  color: var(--text-color) !important;

  border: 2px solid var(--accent-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  /* Quita el subrayado si apareciera */
}

.btn-download:hover {
  background-color: #eecb07;
  border-color: #eecb07;
  color: var(--primary-dark) !important;
  /* Texto verde oscuro al pasar el mouse */
}

/* Estilo para el ícono SVG dentro del botón */
.btn-download svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  /* El ícono toma el color del texto automáticamente */
  transition: transform 0.3s ease;
}

/* Pequeña animación del ícono al pasar el mouse (opcional) */
.btn-download:hover svg {
  transform: translateY(2px);
  /* El ícono "baja" indicando descarga */
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-transform: uppercase;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

.titulo-tabla {
  background-color: yellow;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  border: 1px solid #ddd;
}