.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  pointer-events: none;
  position: absolute; /* evita que ocupen espacio en el flujo */
  width: 100%; /* asegúrate que siga ocupando ancho completo */
  top: 0;
  left: 0;
}

.fade-section.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  position: relative;
  z-index: 1;
}

/* Estilos generales */

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

body {
  background-color: #f2f2f2;
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  transform: 0.6s ease-in-out;
}
body.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

body.fade-in {
  opacity: 1;
}

/* Encabezados */

/* Encabezado Principal (Franja azul delgada con títulos) */

header {
  position: fixed;             /* 👈 Esto lo fija arriba */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #0249aa;
  color: #fff;
  padding: 5px 0;
  text-align: center;
  z-index: 10000;              /* 👈 Asegura que quede encima de todo */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 👈 Sombra elegante */
}

.header-titles-container {
  max-width: 1200px; /* Ancho máximo del contenedor, ajusta si es necesario */
  margin: 0 auto; /* Centrar el contenedor horizontalmente */
  padding: 0 20px; /* Padding horizontal para espaciado interno */
}

.header-titles-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Alinear los títulos horizontalmente */
  justify-content: center; /* Centrar los títulos horizontalmente dentro de la franja */
}

.header-titles-nav ul li a.active {
  background-color: #35a9aa; /* Mismo color "activo" que la navegación secundaria */
  color: white;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 11px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
}

.header-titles-nav li {
  margin: 0 20px; /* Espacio entre los títulos */
}

.header-titles-nav li a {
  color: white; /* Texto blanco para los títulos */
  text-decoration: none; /* Quitar subrayado de los enlaces */
  font-size: 1.2em; /* Tamaño de fuente para los títulos, ajusta si es necesario */
}

/* Estilos para la sección de logos en el encabezado */
.header-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  padding: 20px 0;
  position: relative;
  margin-top: 70px; /* puedes ajustar a 80px si querés más separación */

}
.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  position: relative;
}
.logo-sinepub {
  height: 200px;
}
.logo-huv {
  height: 180px;
  position: absolute;
  left: 680px;
  top: -25%;
  transform: translateY(50%);
}

/* Navegación */

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

nav li {
  margin-right: 20px;
}

nav li:last-child {
  margin-right: 0;
}

nav a {
  color: #fff;
  text-decoration: none;
}

/* Sección para Navegación Secundaria (Franja azul debajo de imágenes) */

.below-header-nav {
  background-color: #0249aa;
  color: #fff;
  padding: 10px 0;
  position: sticky;   /* 👈 Fija la franja de subtítulos */
  top: 42px;           /* 👈 Justo debajo del header principal */
  z-index: 100;       /* 👈 Encima del resto del contenido */
}


.below-header-nav-container {
  max-width: 1200px; /* Ancho máximo del contenedor de navegación secundaria, igual que los demás */
  margin: 0 auto; /* Centrar el contenedor horizontalmente */
  padding: 0 20px; /* Padding horizontal para espaciado interno */
}

.below-header-nav nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Alinear horizontalmente la navegación secundaria */
  justify-content: space-between; /* Espacio entre los elementos de navegación secundaria */
}

.below-header-nav nav li {
  margin-right: 20px; /* Espacio entre los elementos de navegación secundaria */
}

.below-header-nav nav li:last-child {
  margin-right: 0;
}

.below-header-nav nav li a {
  color: #fff; /* Texto blanco para la navegación secundaria */
  text-decoration: none; /* Quitar subrayado de los enlaces */
  font-size: 1.2em; /* ¡Mismo tamaño que los títulos del header!  */
}

/* Estilo para el link de navegación secundario activo */
.below-header-nav nav ul li a.active {
  background-color: #35a9aa; /* Un azul un poco más oscuro para "activo" */
  font-weight: bold;          /* Negrita */
  padding-top: 14.4px;        /* Padding vertical para abarcar la franja azul */
  padding-bottom: 16px;     /* Padding vertical para abarcar la franja azul */
  padding-left: 15px;       /* Padding horizontal para extender a los lados */
  padding-right: 15px;      /* Padding horizontal para extender a los lados */
}

/* Contenido principal mejorado */
main {
  display: block;
  padding: 40px;
  min-height: auto;
  background: #f8f9fa;
}

section {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  color: #0249aa;
}

p {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 20px;
  text-align: justify;
  color: #333;
}

/* Estilos para la bienvenida profesional */
.bienvenida {
  background: linear-gradient(135deg, #0249aa, #0267c1);
  color: white;
  padding: 50px 25px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  max-width: 1200px;
  margin: 0 auto;
}
.bienvenida h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 25px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.bienvenida p {
  font-size: 20px;
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto 20px auto;
}

/* Diseño de la sección Misión y Visión */
.mision-vision {
  display: flex;
  justify-content: space-around;
  text-align: left;
  margin-top: 40px;
  gap: 20px;
}

.mision, .vision {
  background: white;
  color: #0249aa;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  transition: transform 0.3s ease-in-out;
}

.mision:hover, .vision:hover {
  transform: scale(1.55);
}

.mision h3, .vision h3 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #022b6d;
}

/* Pie de página */

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
  width: 100%;
  /* position: relative;  <--- quítalo si no lo necesitas */
  margin-top: 0;
}

footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: auto; /* 🔥 Permite que el footer se ajuste al contenido */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

footer p {
  color: white !important; /* Fuerza el color blanco */
  text-align: center !important; /* Fuerza la alineación centrada */
  font-size: 16px;
  margin-bottom: 10px;
}

footer .contacto {   /* Estilos para párrafos y la sección de contacto dentro del footer */
  margin-bottom: 10px; /* Espacio inferior para los elementos dentro del footer */
}

footer .contacto:last-child { /* Quitar margin-bottom del último elemento de contacto */
  margin-bottom: 0;
}

.footer-logos {
  display: flex;
  justify-content: left;
  top: 70px;
  left: 150px;
  gap: 20px;
  margin-top: 5px;
  position: relative; /* Asegura que el z-index funcione */
  z-index: 10; /* Mayor que el del mapa */
}
.footer-logos img {
  width: 70px; /* Tamaño normal */
  transition: transform 0.3s ease-in-out;
  position: relative;
  z-index: 15; /* Asegura que los logos estén sobre el mapa */
  border-radius: 20%; /* Opcional: Si quieres iconos redondeados */
}
.footer-logos img:hover {
  transform: scale(2.2); /* Efecto de agrandado */
  z-index: 20; /* Mantiene la imagen por encima del mapa */
}

/* 🔹 Estilos para las Redes Sociales en el Footer */
.footer-redes-sociales {
  display: flex;
  justify-content: center; /* 🔥 Alinea los iconos a la izquierda */
  align-items: center;
  gap: 15px; /* Espaciado entre iconos */
  margin-top: 10px;
}

.footer-redes-sociales a {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

.footer-redes-sociales img {
  width: 40px; /* Tamaño estándar de los iconos */
  height: 40px;
  border-radius: 50%; /* Opcional: Si quieres iconos redondeados */
}

/* 🔥 Efecto al pasar el mouse */
.footer-redes-sociales a:hover {
  transform: scale(2.2);
}

/* Botón flotante */

#boton-flotante {
  position: fixed;
  bottom: 10vh;
  right: 20px;
  z-index: 9999; /* Asegura que esté por encima de todo */
}

#chatbot-button {
  background-color: #0249aa; /* Color del sindicato */
  color: white;
  font-size: 18px; /* 🔥 Aumentar tamaño del texto */
  font-weight: bold;
  padding: 5px 5px; /* 🔥 Aumentar tamaño del botón */
  border: none;
  border-radius: 8px; /* Bordes más redondeados */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* 🔥 Efecto al pasar el mouse */
#chatbot-button:hover {
  background-color: #35a9aa;
  transform: scale(1.1);
}

/* Menú desplegable */

.dropdown-menu {
  display: none; /* Oculto por defecto */
  position: absolute;
  background-color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  width: 700px;
  transition: opacity 0.3s ease-in-out; /* Transición más suave */
  opacity: 0; /* Inicialmente transparente */
  pointer-events: none; /* No interactivo por defecto */
  border-radius: 8px;
}

.dropdown-menu h2,
.dropdown-menu p,
.dropdown-menu ul {
  color: #fff;
}

/* Mostrar el menú desplegable cuando se hace hover en el contenedor */
.menu-item-redes-sociales:hover .dropdown-menu { /* Selector de hover correcto */
  display: block;
  opacity: 1;
  pointer-events: auto; /* Hacerlo interactivo al mostrarse */
}

.menu-item-redes-sociales:hover .dropdown-toggle {
  background-color: #35a9aa;
  color: white;          /* ¡Texto blanco! */
}


.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu ul li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.dropdown-menu ul li:last-child {
  border-bottom: none;
}

.dropdown-menu ul li a {
  color: #fff;
  text-decoration: none;
}

/* Estilos específicos para el menú desplegable de Redes Sociales en el header */
.dropdown-menu-redes-sociales {
  width: 350px;           
  text-align: center;     
  background-color: #35a9aa;
  z-index: 50 !important; /* 🔥 Asegura que esté por encima de la franja blanca */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Agrega una sombra para mejorar la visibilidad */
}

.dropdown-menu-redes-sociales h2 {
  font-size: 20px; /* Título un poco más pequeño */
}

.dropdown-menu-redes-sociales p {
  font-size: 14px; /* Texto de párrafo más pequeño */
}

.dropdown-menu-redes-sociales .redes-sociales-header {
  display: flex;
  justify-content: center; /* 🔥 Asegura que los iconos estén bien alineados */
  align-items: center;
  gap: 15px; /* Espaciado entre los iconos */
  margin-top: 5px;
}

.dropdown-menu-redes-sociales .redes-sociales-header a {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

.dropdown-menu-redes-sociales .redes-sociales-header img {
  width: 40px; /* 🔥 Mismo tamaño que en el footer */
  height: 40px;
  border-radius: 50%; /* 🔥 Iconos circulares */
  transition: transform 0.3s ease-in-out; /* 🔥 Efecto de transición */
}

/* 🔹 Estilo para la sección de colaboradores */
.menu-item-colaboradores {
  position: relative;
}

.dropdown-container-colaboradores {
  position: relative;
  display: inline-block;
}

/* 📌 Ajustar la posición del menú desplegable */
.dropdown-menu-colaboradores {
  display: none;
  position: absolute;
  background-color: #35a9aa; /* Fondo oscuro similar al de Redes Sociales */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 15px;
  width: 300px; /* 🔥 Ancho fijo */
  top: 100%;
  left: auto;
  right: 0; /* Se despliega hacia la izquierda */
  z-index: 1000;
  border-radius: 8px;
  color: white; /* Texto en blanco */
  text-align: center;
  transition: opacity 0.3s ease-in-out;
}

/* 📌 Mostrar el menú desplegable cuando se pasa el mouse */
.menu-item-colaboradores:hover .dropdown-menu-colaboradores,
.dropdown-menu-colaboradores:hover {
  display: block;
  opacity: 1;
  pointer-events: auto; /* Permitir interacción */
}

/* 🔹 Ocultar cuando el mouse sale */
.menu-item-colaboradores:not(:hover) .dropdown-menu-colaboradores,
.dropdown-menu-colaboradores:not(:hover) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

/* 🔹 Estilos dentro del menú desplegable */
.dropdown-menu-colaboradores h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
}

/* 📌 Contenedor de los colaboradores en fila */
.colaboradores-container {
  display: flex;
  justify-content: space-around; /* 🔥 Distribuye las imágenes de izquierda a derecha */
  align-items: center;
  gap: 20px; /* 🔥 Espaciado entre imágenes */
}

/* 📌 Ajuste de los colaboradores */
.colaborador {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  text-align: center;
}

/* 🔥 Efecto al pasar el mouse sobre la imagen (zoom) */
.colaborador:hover img {
  transform: scale(2.4) translateX(-50px); /* 🔥 Se agranda y se mueve ligeramente a la izquierda */
  transition: transform 0.3s ease-in-out;
  z-index: 10; /* 🔥 Asegura que la imagen agrandada esté por encima de las demás */
  position: relative; /* 🔥 Necesario para que z-index tenga efecto */
}

/* 🔹 Estilos para la imagen del colaborador */
.colaborador img {
  width: 60px; /* 🔥 Tamaño inicial */
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

/* 📌 Cuadro emergente de información del colaborador */
.info-colaborador {
  display: none;
  position: absolute;
  background-color: #35a9aa; /* 🔥 Mismo fondo que el primer cuadro */
  color: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  top: 50%;
  right: 110%; /* 🔥 Se coloca a la izquierda de la imagen */
  transform: translateY(-50%);
  text-align: left;
  font-size: 14px;
  width: 270px; /* 🔥 Se fuerza un ancho igual para ambos */
}

/* 🔹 Ajuste del tamaño para el cuadro emergente del segundo colaborador */
.colaborador:nth-child(2) .info-colaborador {
  width: 270px !important; /* 🔥 Mantiene el mismo ancho para ambos cuadros */
}

/* 🔹 Formato del contenido del cuadro emergente */
.info-colaborador p {
  margin: 5px 0;
  font-size: 14px;
}

.info-colaborador strong {
  font-weight: bold;
}

/* 🔹 Mostrar información cuando se pasa el mouse sobre la imagen */
.colaborador:hover .info-colaborador {
  display: block;
}

/* 🔹 Resaltar la opción "Colaboradores" al pasar el mouse */
.menu-item-colaboradores:hover .dropdown-toggle {
  background-color: #35a9aa; /* Mismo color que el hover de Redes Sociales */
  color: white;
  font-weight: bold;
  border-radius: 5px;
  padding: 5px 10px;
}

/* 🔥 Efecto al pasar el mouse */
.dropdown-menu-redes-sociales .redes-sociales-header a:hover img {
  transform: scale(2.5); /* 🔥 Mismo efecto de agrandamiento */
}

/* Imagen y texto */
.imagen-y-texto {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  position: relative;
  min-height: 100%;
}

.imagen-banner {
  width: 50%;
  height: auto;
  margin-right: 50px;
  margin-top: 17px;
}

.texto-banner {
  width: 70%;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-top: 0px;
  line-height: 1.5;
  position: relative;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ✅ Estilos específicos para la sección de Contacto */
.contacto {
  color: #ddd; /* Color gris claro para que contraste con el fondo */
  text-align: left; /* Asegura que el texto se mantenga alineado correctamente */
}

.contacto h1 {
  color: white; /* Mantiene el título en blanco */
}

.contacto p,
.contacto ul,
.contacto li {
  color: #ccc; /* Un gris claro para diferenciarlo del fondo sin ser blanco */
}

/* Información y mapa */

.informacion-y-mapa {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.informacion {
  width: 40%;
}

.mapa {
  width: 60%;
  padding: 40px;
  background-color: #35a9aa;
  border: 7px solid #0249aa;
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.mapa iframe {
  position: relative;
  z-index: 5; /* Menor que los logos para que no los cubra */
}

/* Títulos */

.titulo-contacto {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #000;
  text-align: center;
}

.titulo-como-llegar {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fffdfd !important;
  text-align: center;
}

.titulo-historia {
  font-size: 3.5em;       /* ¡FUENTE MUCHO MÁS GRANDE! - Ajusta este valor si es necesario */
  font-weight: bold;       /* Mantener en negrita (si ya lo tenías, sino, añádelo) */
  margin-bottom: 40px;    /* ¡MÁS ESPACIO DEBAJO DEL TÍTULO! - Ajusta este valor si es necesario */
  color: #0249aa;         /* Mismo azul del header (lo tenías, mantenerlo) */
  text-align: center;     /* ¡TEXTO CENTRADO! - Asegurar que esté centrado */
}


.imagen-banner {
  position: sticky;
  top: 120px; /* debajo del header */
  z-index: 5;
  max-height: 80vh;
  object-fit: contain;
}

/* Slider */

.slider-container.modo-scroll,
.slider.modo-scroll {
  height: auto !important;
  overflow: visible !important;
}


.slider-container {
  position: relative;
  width: 100%;
  height: auto; /* 🔥 Ajusta la altura solo si es necesario */
  min-height: unset; /* 🔥 Evita que el slider fuerce una altura innecesaria */
}


/* Estructura del slider */
.slider {
  position: relative;
  width: 100%;
  height: auto; /* 🔥 Asegura que la altura del slider se ajuste */
  transition: opacity 1s ease-in-out;
  overflow: hidden;
}

/* Configuración de cada diapositiva */
.slide {
  position: absolute; /* 🔥 Saca los slides del flujo sin afectar el footer */
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

/* Sección Historia de SINEPUB HUV */

.historia-section {
  background-color: #f9f7f7; /* Un fondo ligeramente diferente para la sección de historia */
  padding: 30px;
  transition: opacity 1s ease-in-out; /* ¡AÑADIR ESTA LÍNEA! */
  opacity: 1; /* ¡AÑADIR ESTA LÍNEA! */
}

.slide.active {
  position: relative !important;
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.prev-slide,.next-slide {
  position: absolute;
  background-color: transparent;
  border: none;
  padding: 10px 20px;
  font-size: 2em; /* ¡Hacemos las flechas más grandes! 2em es el doble del tamaño normal */
  cursor: pointer;
  color: white; /* ¡Cambiamos el color a blanco para que resalten sobre fondos oscuros y claros! */
  font-weight: bold;
  /* Vamos a añadir un poco de sombra para que se vean mejor en fondos claros */
  text-shadow: 2px 2px 4px #000000; /* Sombra negra suave */
}

.prev-slide {
  left: -25px; /* Separación del borde izquierdo */
  top: -45px;  /* Separación del borde superior */
}

.next-slide {
  right: -25px; /* Separación del borde derecho */
  top: -45px;  /* Separación del borde superior */
}

.prev-slide:hover,.next-slide:hover {
  background-color: #35a9aa;
}

/* Estilos para los circulitos de navegación del slider */
.slider-dots {
  position: absolute;
  top: 405px; 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 1000;
  gap: 10px;
}

.slider-dots .slider-dot {
  width: 12px;
  height: 12px;
  background-color: transparent; /* Fondo transparente por defecto */
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  border: 2px solid black; /* ¡Añadimos un borde negro! */
}

.slider-dots .slider-dot:hover,
.slider-dots .slider-dot.active {
  opacity: 1;       /* Opacidad completa al hacer hover o cuando está activo */
  background-color: #35a9aa; /* Fondo blanco al hacer hover o activo */
}

.slider-dots .slider-dot.active {
  width: 16px;      /* Dot activo un poco más grande */
  height: 16px;
}

/* Sección Slider de Fundadores */
.slider-section {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: opacity 1s ease-in-out;
  opacity: 1;
  position: relative; /* 🔥 Asegurar que el slider no afecte la posición de otros elementos */
}

/* Ajustar tamaño del slider */
#fundadores-slider-section .slider-container {
  max-width: 1200px; /* 🔥 Limitar el ancho del slider para que no se expanda demasiado */
  max-height: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* 🔥 Evitar que imágenes desbordadas se vean */
}

/* Configuración del slider */
#fundadores-slider-section .slider {
  position: relative;
  width: 100%;
  height: 500px; /* 🔥 Ajusta la altura del slider para evitar colapsos */
}

/* Configuración de las diapositivas */
#fundadores-slider-section .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

/* Asegurar que la diapositiva activa esté visible */
#fundadores-slider-section .slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Configuración de las imágenes */
#fundadores-slider-section .slide img {
  width: auto;
  max-width: 90%; /* 🔥 Evita que las imágenes sean más anchas que el contenedor */
  height: auto;
  max-height: 100%; /* 🔥 Asegura que no sobrepasen la altura del slider */
  object-fit: contain;
}

/* Ajuste de los botones de navegación */
.prev-slide-fundadores, .next-slide-fundadores {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 2em;
  cursor: pointer;
  padding: 10px;
  z-index: 2;
}

.prev-slide-fundadores { left: 10px; }
.next-slide-fundadores { right: 10px; }

.prev-slide-fundadores:hover, .next-slide-fundadores:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* === Estilos Generales para Escritorio === */
.afiliacion-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap; /* Por si se reduce el espacio */
}

.pdf-container {
  width: 55%;
  height: 700px;
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.pdf-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Ocultar scroll en algunos navegadores */
.pdf-container iframe::-webkit-scrollbar {
  display: none;
}

.afiliacion-info {
  width: 40%;
  padding: 20px;
}

.boton-descargar {
  background-color: #0249aa;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

.boton-descargar:hover {
  background-color: #023b88;
}

/* 🎥 Estilo del video del slider de Incorporados */
#player {
  width: auto;
  height: 90vh;
  max-height: 600px;
  display: block;
  margin: 0 auto;
}

/* === Ajustes Responsivos para Móviles === */
@media (max-width: 768px) {
  .afiliacion-container {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .pdf-container {
    width: 100%;
    height: 600px;
  }

  .afiliacion-info {
    width: 100%;
    text-align: center;
    padding: 10px;
  }

  .boton-descargar {
    width: 100%;
    max-width: 300px;
    font-size: 16px;
  }
}

.modulos-nav {
  display: none; /* Oculto por defecto */
  justify-content: center;
  position: absolute;
  top: -30px; /* Mueve los puntos arriba del slider */
  left: 50%;
  transform: translateX(-50%);
}

.modulos-nav .slider-dot {
  width: 12px;
  height: 12px;
  margin: 5px;
  border-radius: 50%;
  background-color: gray;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 2px solid black; /* ¡Añadimos un borde negro! */
}

.modulos-nav .slider-dot.active {
  background-color: blue;
  width: 16px;      /* Dot activo un poco más grande */
  height: 16px;
}

.pdf-viewer-container {
  width: 100%;
  height: 700px; /* ← Controla altura fija del visor */
  overflow-y: auto; /* ← Scroll interno */
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pdf-viewer-container-video {
  width: 50%;
  height: 1060px; /* ← Controla altura fija del visor */
  overflow-y: auto; /* ← Scroll interno */
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pdf-canvas {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  display: block;
  margin: 0 auto 20px;
  width: 100% !important;
  height: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  font-weight: bold;
}

.pdf-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow-y: auto;
  padding: 40px 10px;
}

.pdf-modal-content {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.close-modal {
  position: absolute;
  top: 10px; right: 20px;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 10000;
}
/* ===== OCULTAR ELEMENTOS MÓVILES EN ESCRITORIO ===== */

#mobile-menu-toggle,
#mobile-menu {
    display: none; /* Oculta completamente estos elementos por defecto */
}

.video-container {
    position: fixed;
    right: -100%;
    top: 50%;
    transform: translateY(-50%);
    width: 600px;
    background: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: right 0.8s ease-in-out;
}

.video-container.active {
    right: 20px;
}

.titulo-bienvenida {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1s ease;
    font-size: 24px;
}

.titulo-bienvenida.active {
    opacity: 1;
    transform: translateY(0);
}

.video-wrapper {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

#video-intro {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.cerrar-video {
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.cerrar-video:hover {
    background: darkred;
}

.elektra-chat-interface {
    display: flex;
    flex-direction: column;
    height: 500px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #35a9aa;
    color: white;
    border-radius: 10px 10px 0 0;
}

.elektra-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.message {
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 80%;
}

.user-message {
    background: #35a9aa;
    color: white;
    margin-left: auto;
}

.ai-message {
    background: #f0f0f0;
    color: #333;
}

.chat-input-container {
    display: flex;
    padding: 15px;
    border-top: 1px solid #eee;
}

#user-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    margin-right: 10px;
}

#send-message {
    background: #35a9aa;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#send-message img {
    width: 20px;
    height: 20px;
}

.close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0 10px;
    margin-left: auto;
}

.close-chat:hover {
    color: #ff4444;
}

#chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 350px;
    height: 500px;
}

.bloque-texto-video {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  gap: 20px;
}

.video-explicativo {
  width: 100%;
  max-width: 400px;
  margin-top: 10px;
  text-align: center;
  align-self: flex-start;
}
.galeria-evento {
    width: 50%;
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.imagenes-galeria {
    display: flex;
    gap: 10px;
    align-items: flex-start; /* 🔥 Para que las imágenes horizontales y verticales arranquen alineadas arriba */
}

.imagenes-galeria img {
    flex: 0 0 auto; /* Importante: que NO se estire */
    height: auto;
    max-height: 300px; /* 🔥 Este es el truco: Limita solo el alto máximo sin alterar ancho */
    width: auto; /* 🔥 Permite que el ancho sea natural */
    border-radius: 8px;
    object-fit: contain; /* Opcional: asegura que la imagen siempre quepa sin recorte si activas tamaños fijos */
}


@media (min-width: 768px) {
    .imagen-y-texto {
        display: flex;
        gap: 20px;
        align-items: flex-start; /* Esto asegura que ambas columnas arranquen alineadas arriba */
    }
    .galeria-evento {
        width: 60%;
    }
    .texto-banner {
        width: 40%;
    }
}

/* ======================================================= */
/* ====== ESTILOS: MODAL DE NOTICIA URGENTE - LFP ======== */
/* ======================================================= */

/* --- Mejora: Animación para el fondo sutilmente dinámico --- */
@keyframes subtle-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.noticia-urgente-container {
    position: fixed;
    right: -100%; 
    top: 50%;
    transform: translateY(-50%);
    width: 90%;
    max-width: 800px;
    padding: 25px;
    border-radius: 15px; /* Bordes un poco más pronunciados */
    border: 1px solid rgba(221, 221, 221, 0.5); /* Borde más sutil */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Sombra más profesional */
    z-index: 10001;

    /* --- Mejora 1: Entrada con "Rebote" --- */
    transition: right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 

    /* --- Mejora 3: Fondo Animado y Efecto de Cristal Esmerilado --- */
    background: linear-gradient(-45deg, rgba(255,255,255,0.8), rgba(247,249,252,0.85), rgba(241,244,248,0.8), rgba(255,255,255,0.8));
    background-size: 400% 400%;
    animation: subtle-gradient-animation 15s ease infinite;
    backdrop-filter: blur(10px); /* Desenfoque más intenso para el efecto cristal */
    -webkit-backdrop-filter: blur(10px);
}

/* Estado activo: cuando el modal es visible */
.noticia-urgente-container.active {
    right: 20px;
}

.noticia-urgente-wrapper {
    display: flex;
    align-items: center; /* Centrado vertical para un mejor look */
    gap: 25px; /* Un poco más de espacio */
    position: relative;
    width: 100%;
}

.noticia-urgente-imagen {
    width: 200px;
    height: auto;
    border-radius: 10px; /* Consistente con el contenedor */
    object-fit: cover;
    flex-shrink: 0; /* Evita que la imagen se encoja */
    /* --- Mejora: Animación sutil para la imagen --- */
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
}

.noticia-urgente-container.active .noticia-urgente-imagen {
    opacity: 1;
    transform: scale(1);
}

/* --- Mejora 2: Animación en Cascada (Stagger) para el texto --- */
.noticia-urgente-contenido h3,
.noticia-urgente-contenido p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.noticia-urgente-container.active .noticia-urgente-contenido h3,
.noticia-urgente-container.active .noticia-urgente-contenido p {
    opacity: 1;
    transform: translateY(0);
}

/* Retrasos en cascada para cada elemento */
.noticia-urgente-container.active .noticia-urgente-contenido h3 {
    transition-delay: 0.4s;
}
.noticia-urgente-container.active .noticia-urgente-contenido p:nth-of-type(1) {
    transition-delay: 0.5s;
}
.noticia-urgente-container.active .noticia-urgente-contenido p:nth-of-type(2) {
    transition-delay: 0.6s;
}
.noticia-urgente-container.active .noticia-urgente-contenido p:nth-of-type(3) {
    transition-delay: 0.7s;
}
.noticia-urgente-container.active .noticia-urgente-contenido p:nth-of-type(4) {
    transition-delay: 0.8s;
}
.noticia-urgente-container.active .noticia-urgente-contenido p:nth-of-type(5) {
    transition-delay: 0.9s;
}

.noticia-urgente-contenido h3 {
    font-size: 24px; /* Un poco más grande */
    color: #0249aa;
    margin-bottom: 15px;
    font-weight: bold;
}

.noticia-urgente-contenido p {
    font-size: 16px;
    line-height: 1.7; /* Más espaciado para mejor lectura */
    margin-bottom: 12px;
    text-align: justify;
    color: #333; /* Texto principal oscuro */
}

/* --- Mejora 4: Botón de Cierre más Interactivo --- */
.cerrar-noticia-urgente {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #d9534f;
    color: white;
    border: 3px solid white;
    border-radius: 50%;
    width: 40px; /* Un poco más grande para ser más fácil de clickear */
    height: 40px;
    cursor: pointer;
    font-size: 26px;
    line-height: 34px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cerrar-noticia-urgente:hover {
    background: #c9302c;
    transform: scale(1.15) rotate(180deg); /* Efecto de giro y escala más pronunciado */
    box-shadow: 0 6px 20px rgba(0,0,0,0.4); /* Sombra más dramática al interactuar */
}

/* === Media Query para Móviles === */
@media (max-width: 768px) {
    .noticia-urgente-container.active {
        right: 50%;
        transform: translate(50%, -50%);
        width: 95%;
    }
    
    .noticia-urgente-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }
    
    .noticia-urgente-imagen {
        width: 150px;
        margin-bottom: 0;
    }

    .noticia-urgente-contenido h3 {
        font-size: 20px;
    }

    .noticia-urgente-contenido p {
        font-size: 15px;
        text-align: center;
    }

    .cerrar-noticia-urgente {
        top: -12px;
        right: -12px;
        width: 35px;
        height: 35px;
        font-size: 22px;
        line-height: 30px;
    }
}

/* ===== Galería noticia (slide con 3 imágenes) ===== */
.galeria-noticia {
  display: flex; 
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: nowrap;
}
.galeria-noticia .texto-banner { width: 40%; }
.galeria-grid {
  width: 60%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: auto;
  gap: 0.75rem;
}
.galeria-principal { grid-column: 1 / 2; grid-row: 1 / span 2; margin: 0; }
.galeria-secundaria { margin: 0; }
.galeria-grid figure img {
  width: 100%; height: auto; display: block; border-radius: 8px; object-fit: cover;
}
.galeria-grid figure figcaption {
  font-size: 0.9rem; color: #555; margin-top: 0.35rem;
}

/* Responsivo */
@media (max-width: 900px) {
  .galeria-noticia { flex-direction: column; }
  .galeria-grid { width: 100%; grid-template-columns: 1fr; }
  .galeria-noticia .texto-banner { width: 100%; }
}