/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background: #F5F5F5; /* Gris muy claro for background */
  color: #333333; /* Gris oscuro for text */
  transition: background 0.5s ease;
}

/* ================== HEADER ================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  background-color: #FFFFFF; /* Blanco for clean header */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

header:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.logo img {
  height: 120px;
  transition: transform 0.3s ease;
}

.logo img:hover {
  transform: scale(1.05) rotate(5deg);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-links li a {
  text-decoration: none;
  font-weight: 700;
  color: #5C1D3A; /* Granate oscuro for nav links */
  position: relative;
  transition: color 0.3s ease;
}

.nav-links li a:hover,
.nav-links li a.active {
  color: #7A2D4F; /* Granate medio for hover/active */
}

.nav-links li a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #7A2D4F; /* Granate medio for underline */
  transition: width 0.3s ease;
  margin: auto;
  border-radius: 2px;
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
  width: 100%;
}

.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #5C1D3A; /* Granate oscuro for menu toggle */
}

/* ================== FOOTER ================== */
footer {
  background: linear-gradient(90deg, #5C1D3A, #7A2D4F); /* Granate oscuro to medio */
  color: #FFFFFF; /* Blanco for text */
  padding: 40px 20px;
  font-size: 0.9rem;
  border-top: 4px solid #8E3A5C; /* Rosa-granate claro for border */
  animation: fadeInUp 1s ease-out;
}

.footer-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  height: 80px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.footer-logo:hover {
  transform: scale(1.1);
}

.footer-right h4 {
  margin-bottom: 10px;
  color: #FFFFFF; /* Blanco for footer headings */
}

.footer-right ul {
  list-style: none;
  padding: 0;
}

.footer-right ul li {
  margin-bottom: 8px;
}

.footer-right ul li a {
  color: #FFFFFF; /* Blanco for footer links */
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-right ul li a:hover {
  color: #8E3A5C; /* Rosa-granate claro for hover */
  padding-left: 5px;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-left, .footer-right {
    align-items: center;
  }
}

/* ================== SECCIONES GENERALES ================== */
section {
  padding: 60px 20px;
  max-width: 1000px;
  margin: auto;
  line-height: 1.7;
  background: #F5F5F5; /* Gris muy claro for section background */
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

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

h2 {
  font-size: 2.2rem;
  margin-bottom: 25px;
  color: #5C1D3A; /* Granate oscuro for headings */
  position: relative;
  transition: color 0.3s ease;
}

h2:hover {
  color: #7A2D4F; /* Granate medio for hover */
}

h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #7A2D4F; /* Granate medio for underline */
  margin-top: 8px;
  border-radius: 2px;
  transition: width 0.3s ease;
}

h2:hover::after {
  width: 100px;
}

h3 {
  margin: 15px 0 10px;
  color: #7A2D4F; /* Granate medio for subheadings */
  transition: color 0.3s ease;
}

h3:hover {
  color: #8E3A5C; /* Rosa-granate claro for hover */
}

/* ================== BOTONES ================== */
a.btn-programa, a.btn-auditorio {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 30px;
  border-radius: 30px;
  background: #8E3A5C; /* Rosa-granate claro for buttons */
  color: #FFFFFF; /* Blanco for button text */
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(142,58,92,0.2);
}

a.btn-programa:hover, a.btn-auditorio:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(142,58,92,0.4);
  background: #7A2D4F; /* Granate medio for hover */
}

/* ================== BIENVENIDA ================== */
.bienvenida {
  padding: 80px 20px;
  background: #F5F5F5; /* Gris muy claro for background */
  color: #5C1D3A; /* Granate oscuro for text */
  text-align: center;
  border-radius: 16px;
  margin-bottom: 40px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  animation: fadeIn 1s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================== PAISES ================== */
.paises {
  text-align: center;
  padding: 60px 20px;
  background: #FFFFFF; /* Blanco for clean background */
  border-radius: 16px;
}

.grid-paises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: auto;
}

.pais {
  background: #F5F5F5; /* Gris muy claro for card background */
  border-radius: 12px;
  padding: 20px 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.pais:hover {
  transform: translateY(-5px) rotate(2deg);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.pais img {
  width: 80px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.pais:hover img {
  transform: scale(1.2);
}

.pais span {
  display: block;
  font-weight: bold;
  position: relative;
  transition: all 0.3s ease;
}

.pais span::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  margin: 6px auto 0;
  transition: width 0.4s ease;
  border-radius: 2px;
}

/* Colores por país (sin cambios, como solicitado) */
.pais.mexico span { background: linear-gradient(90deg, green, white, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pais.mexico span::after { background: linear-gradient(90deg, green, white, red); }

.pais.colombia span { background: linear-gradient(90deg, yellow, blue, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pais.colombia span::after { background: linear-gradient(90deg, yellow, blue, red); }

.pais.argentina span { background: linear-gradient(90deg, #75aadb, white, #75aadb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pais.argentina span::after { background: linear-gradient(90deg, #75aadb, white, #75aadb); }

.pais.eu span { background: linear-gradient(90deg, red, white, blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pais.eu span::after { background: linear-gradient(90deg, red, white, blue); }

.pais.peru span { background: linear-gradient(90deg, red, white, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pais.peru span::after { background: linear-gradient(90deg, red, white, red); }

.pais.espana span { background: linear-gradient(90deg, red, yellow, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pais.espana span::after { background: linear-gradient(90deg, red, yellow, red); }

.pais.honduras span { background: linear-gradient(90deg, #0073cf, white, #0073cf); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pais.honduras span::after { background: linear-gradient(90deg, #0073cf, white, #0073cf); }

.pais.panama span { background: linear-gradient(90deg, blue, white, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pais.panama span::after { background: linear-gradient(90deg, blue, white, red); }

.pais:hover span::after {
  width: 100%;
}

/* ================== EJES TEMÁTICOS ================== */
.ejes-tematicos, .informacion .contenido {
  background: #F5F5F5; /* Gris muy claro for background */
  border-radius: 12px;
  padding: 30px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  margin-bottom: 40px;
  transition: box-shadow 0.3s ease;
}

.ejes-tematicos:hover, .informacion .contenido:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.ejes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.eje-card {
  background: #FFFFFF; /* Blanco for card background */
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.eje-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.eje-card h3 {
  margin: 15px 0;
  font-size: 1.2rem;
  color: #5C1D3A; /* Granate oscuro for card headings */
  text-align: center;
  transition: color 0.3s ease;
}

.eje-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.eje-card:hover img {
  transform: scale(1.05);
}

.eje-card:hover h3 {
  color: #7A2D4F; /* Granate medio for hover */
}

/* ================== OBJETIVOS ================== */
.objetivos ul {
  list-style: none;
  max-width: 700px;
  margin: auto;
  text-align: left;
}

.objetivos ul li {
  margin: 12px 0;
  padding-left: 25px;
  position: relative;
  transition: padding-left 0.3s ease;
}

.objetivos ul li:hover {
  padding-left: 30px;
}

.objetivos ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #7A2D4F; /* Granate medio for checkmark */
  font-weight: bold;
  transition: transform 0.3s ease;
}

.objetivos ul li:hover::before {
  transform: scale(1.2);
  color: #8E3A5C; /* Rosa-granate claro for hover */
}

/* ================== FECHAS ================== */
.fechas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.fecha-card {
  background: #FFFFFF; /* Blanco for card background */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fecha-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.fecha-card h3 {
  color: #7A2D4F; /* Granate medio for headings */
  transition: color 0.3s ease;
}

.fecha-card:hover h3 {
  color: #8E3A5C; /* Rosa-granate claro for hover */
}

/* ================== INFORMACION.HTML ================== */
.informacion h2 {
  color: #5C1D3A; /* Granate oscuro for headings */
}

.informacion h3 {
  color: #7A2D4F; /* Granate medio for subheadings */
}

.informacion ul, .informacion ol {
  margin: 15px 0 20px 25px;
}

.informacion p a {
  color: #8E3A5C; /* Rosa-granate claro for links */
  text-decoration: underline;
  transition: color 0.3s ease;
}

.informacion p a:hover {
  color: #7A2D4F; /* Granate medio for hover */
}

/* ================== RESPONSIVO ================== */
@media (max-width: 768px) {
  header {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .nav-links {
    position: absolute;
    top: 70px;
    right: 0;
    background: #FFFFFF; /* Blanco for mobile menu */
    flex-direction: column;
    gap: 20px;
    width: 220px;
    padding: 20px;
    border-radius: 0 0 0 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  .nav-links.active { transform: translateX(0); }
  .menu-toggle { display: block; }
  h2 { font-size: 1.8rem; }
  .eje-card h3 { font-size: 1rem; }
}

/* BLOQUES DE INFORMACION */
.informacion .contenido {
  background: #FFFFFF; /* Blanco for content background */
  border-radius: 12px;
  padding: 25px 20px;
  margin-bottom: 30px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.informacion .contenido:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.bloque-general {
  background: linear-gradient(120deg, #F5F5F5, #CCCCCC33); /* Gris muy claro to gris medio */
  border: 2px solid #8E3A5C55; /* Rosa-granate claro border */
}

.bloque-objetivos {
  background: linear-gradient(120deg, #CCCCCC33, #7A2D4F33); /* Gris medio to granate medio */
  border: 2px solid #7A2D4F55; /* Granate medio border */
}

.bloque-registro {
  background: linear-gradient(120deg, #7A2D4F33, #F5F5F5); /* Granate medio to gris muy claro */
  border: 2px solid #7A2D4F55; /* Granate medio border */
}

.bloque-fechas {
  background: linear-gradient(120deg, #CCCCCC33, #F5F5F5); /* Gris medio to gris muy claro */
  border: 2px solid #8E3A5C55; /* Rosa-granate claro border */
}

.bloque-contacto {
  background: linear-gradient(120deg, #7A2D4F33, #CCCCCC33); /* Granate medio to gris medio */
  border: 2px solid #7A2D4F55; /* Granate medio border */
}

.informacion ul li {
  position: relative;
  padding-left: 28px;
  margin: 12px 0;
  font-weight: 500;
  transition: color 0.3s ease;
}

.informacion ul li:hover {
  color: #7A2D4F; /* Granate medio for hover */
}

.informacion ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #8E3A5C; /* Rosa-granate claro for checkmark */
  font-weight: bold;
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.informacion ul li:hover::before {
  transform: scale(1.3);
  color: #7A2D4F; /* Granate medio for hover */
}

.informacion a.btn-programa {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 30px;
  border-radius: 30px;
  background: #8E3A5C; /* Rosa-granate claro for button */
  color: #FFFFFF; /* Blanco for button text */
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.informacion a.btn-programa:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
  background: #ffffff; /* Granate medio for hover */
}

/* Cambiar color de links al pasar el cursor */
.informacion a:hover {
  color: #7A2D4F; /* Granate medio for hover */
  transition: color 0.3s ease;
}

/* ================== PONENTES ================== */
.ponentes {
  padding: 60px 20px;
  max-width: 1000px;
  margin: auto;
  background: #FFFFFF; /* Blanco for section background */
  border-radius: 16px;
  animation: fadeInUp 0.8s ease forwards;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
  justify-content: center;
  align-items: stretch;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.ponente-card {
  background: #F5F5F5; /* Gris muy claro for card background */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ponente-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.ponente-card img {
  width: 100%;
  max-width: 220px;
  height: 220px;
  object-fit: cover;
  display: block;
  margin: 15px auto 20px auto;
  border-radius: 50%;
  border: 4px solid #FFFFFF; /* Blanco for image border */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.ponente-card:hover img {
  transform: scale(1.1);
}

.ponente-card .info {
  padding: 15px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ponente-card .info h4 {
  margin-bottom: 10px;
  color: #5C1D3A; /* Granate oscuro for card headings */
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.ponente-card:hover .info h4 {
  color: #7A2D4F; /* Granate medio for hover */
}

.ponente-card .info p {
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #333333; /* Gris oscuro for text */
  line-height: 1.4;
  flex-grow: 1;
}

.ponente-card .info .btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 20px;
  background: #8E3A5C; /* Rosa-granate claro for button */
  color: #FFFFFF; /* Blanco for button text */
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
  align-self: center;
}

.ponente-card .info .btn:hover {
  background: #7A2D4F; /* Granate medio for hover */
  transform: scale(1.05);
}

/* Responsivo */
@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 600px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .ponente-card img {
    height: 200px;
  }
  .ponente-card .info h4 {
    font-size: 1rem;
  }
  .ponente-card .info p {
    font-size: 0.85rem;
  }
}

/* Asegura buen espaciado vertical para subtítulos */
.ponentes h3, .ponentes h4 {
  margin-top: 50px;
}

.cards-grid.single-ponente {
  grid-template-columns: 1fr;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.cards-grid.alejandra-prado {
  grid-template-columns: 1fr;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.cards-grid.christian-sandra {
  grid-template-columns: 1fr 1fr;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.cards-grid.leon-rene {
  grid-template-columns: 1fr;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 600px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Tabla en Mesas de Trabajo */
.tabla-container {
  overflow-x: auto;
  margin-bottom: 40px;
}

.tabla-container table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF; /* Blanco for table background */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.tabla-container table:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.tabla-container th,
.tabla-container td {
  padding: 12px 15px;
  text-align: left;
  font-size: 0.95rem;
  transition: background 0.3s ease;
}

.tabla-container thead {
  background: #8E3A5C; /* Rosa-granate claro for table header */
  color: #FFFFFF; /* Blanco for header text */
}

.tabla-container tbody tr:nth-child(even) {
  background: #F5F5F5; /* Gris muy claro for alternate rows */
}

.tabla-container tbody tr:hover {
  background: #CCCCCC; /* Gris medio for row hover */
}

/* Slider */
.slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background-color: #F5F5F5; /* Gris muy claro for slider background */
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}