/********** Template CSS **********/

  
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1d1d1f;
}

main {
  flex: 1;
}

@media (max-width: 768px) {
  .responsive-padding {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}
@media (max-width: 900px) {
  .responsive-padding {
    padding-right: 20px !important;
  }
}
@media (max-width: 1200px) {
  .responsive-padding {
    padding-left: 30px !important;
    padding-right: 20px !important;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}

p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
}


:root {
    --primary: #06BBCC;
    --light: #F0FBFC;
    --dark: #181d38;
}

.fw-medium {
    font-weight: 600 !important;
}

.fw-semi-bold {
    font-weight: 700 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 600;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 0px;
}


/*** Navbar ***/
.navbar a {
  font-weight: 00;
  font-size: 1rem;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #003366;
  padding: 10px 60px;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Forzar visibilidad del header para evitar que desaparezca al hacer scroll */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Asegurar que la barra no se oculte por transformaciones */
header.scroll {
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
}

.some-selector {
  height: 85px;
  transition: all 0.3s ease; /* Animación suave */
  padding: 5px;
  border-radius: 5px;
}

/* Animación para la entrada del logo deslizándose desde la izquierda */
@keyframes logoSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%); /* Comienza fuera de la pantalla hacia la izquierda */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* Llega a su posición original */
  }
}

/* Aplicar la animación al logo */
.logo img {
  animation: logoSlideIn 1s ease-out; /* 1 segundo de duración */
}

/* Asegura que el logo y la barra se muevan al hacer scroll */
.logo-container.scroll img {
  height: 50px;  /* Cambia el tamaño del logo */
  
  transition: all 0.3s ease; /* Transición suave */
}



/* Estilo cuando se hace scroll */
.logo.scroll img {
  height: 50px;  /* Logo más pequeño */
  opacity: 0.7;  /* Transparencia */
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar li {
  margin: 0 10px;
}
.navbar a {
  color: white;
  text-decoration: none;
  position: relative;
  padding: 2px 2px; /* Espaciado más compacto */
  transition: color 0.3s ease;
}

/* Línea inferior con animación */
.navbar a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #f8c200;
  transition: width 0.3s ease;
}

/* Efecto hover: solo mostrar línea */
.navbar a:hover::after {
  width: 100%;
}

/* Enlace activo: línea completa y color dorado */
.navbar a.active {
  color: #f8c200;

}
.navbar a.active::after {
  width: 100%;
}

/* Estilo para span.menu-trigger (Eventos sin href) */
.navbar .menu-trigger {
  color: white;
  text-decoration: none;
  position: relative;
  padding: 2px 2px;
  padding-top: 9.5px;
  transition: color 0.3s ease;
  cursor: pointer;
  display: inline-block;
}

/* Sin línea amarilla para menu-trigger */
.navbar .menu-trigger::after {
  display: none;
}


.header-right {
  display: flex;
  align-items: center;
}

.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

.social-icons a {
  margin-left: 10px;
  color: white;
}




/* Efecto para el logo cuando hace scroll */
.logo-container.scroll img {
  height: 35px;  /* Cambia el tamaño del logo */
  
  transition: all 0.3s ease; /* Transición suave */
}

/* Efecto para la barra de navegación cuando hace scroll */
header.scroll {
  background-color: rgba(0, 51, 102, 0.9); /* Fondo de barra más oscuro al hacer scroll */
  transition: background-color 0.3s ease;
  opacity: 0.9;  /* Cambia la opacidad del logo */
}


/* Submenú */
.navbar ul li {
  position: relative;
}

.navbar ul li .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #003366;
  padding: 10px 0;
  min-width: 180px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.navbar ul li .submenu li {
  padding: 0;
  margin: 0;
}

.navbar ul li .submenu a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
}

.navbar ul li .submenu a:hover {
  background-color: #004080;
  color: #ffcc00;
}

.navbar ul li:hover .submenu {
  display: block;
}

.navbar, .navbar a, .submenu a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media (max-width: 768px) {

.navbar {
    display: none;
  }

  .navbar.show {
    display: block;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #003366;
    padding: 10px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .navbar ul {
    flex-direction: column;
    gap: 12px;
  }
  
  .menu-toggle {
    display: block;
  }
}

main {
  padding: 20px;
}
#content {
  transition: opacity 0.3s ease-in-out;
}
.header .social-icons {
  display: flex;
  gap: 10px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.header .social-icons a {
  color: white;
  font-size: 1.2rem;
  transition: color 0.3s;
}
.header .social-icons a:hover {
  color: #f8c200;
}

/* Circular social buttons (consistent visual from design mock) */
.header .social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}
.header .social-icons a {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: white;
  transition: all 0.18s ease;
  text-decoration: none;
}
.header .social-icons a i,
.header .social-icons a svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
}
.header .social-icons a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.06);
}

@media (max-width: 768px) {
  .header .social-icons a { width: 44px; height: 44px; }
  .header .social-icons a i, .header .social-icons a svg { width: 16px; height: 16px; font-size: 16px; }
}

/* Línea inferior del ítem activo del menú */
.navbar a.active {
  position: relative;
}
.navbar a.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #f8c200;
}
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
  }

  .navbar {
    width: 100%;
    margin-top: 10px;
  }

  .navbar a {
    display: block;
    padding: 10px 0;
  }

  .header .social-icons {
    position: static;
    margin-top: 10px;
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .logo img {
    height: 60px;
  }

  .social-icons {
    display: flex;
    gap: 10px;

  }

  .menu-toggle {
    font-size: 24px;
    cursor: pointer;
  }

  .navbar {
    width: 100%;
    margin-top: 10px;
  }

  .navbar a {
    display: block;
    padding: 10px 0;
  }
}



/*INGRESAR MISION, VISION Y OBJ PRINCIPAL de INDEX*/



/* Sección Fondo */
.seccion-fondo2 {
  background-color: #F3F4F5; /* Azul sólido o cualquier color deseado */
  padding: 80px 30px; /* Ajuste del espacio interno */
  /* Eliminar la altura fija para que la sección sea fluida */
  height: auto; /* Se ajusta al contenido */
  
  /* Utilizamos Flexbox para distribuir el contenido */
  display: flex;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center; /* Centra el contenido horizontalmente */
  text-align:  justify; /* Asegura que el texto esté centrado */
  flex-direction: row; /* Establecemos la disposición de los elementos en fila */
  flex-wrap: wrap; /* Permite que los elementos se acomoden si no caben en la fila */
}

/* Modificamos el comportamiento de la imagen y el texto en pantallas grandes */
@media (min-width: 768px) {
  .seccion-fondo2 {
    height: auto; /* Ajusta la altura al contenido */
  }

  .seccion-fondo2 .col-lg-6 {
    flex: 0 0 48%; /* Hace que las columnas ocupen el 48% del ancho */
    padding: 20px;
  }
}

/* En pantallas más pequeñas, aseguramos que los elementos se apilen correctamente */
@media (max-width: 768px) {
  .seccion-fondo2 {
    flex-direction: column; /* Apila la imagen y el texto */
    height: auto; /* Permite que la altura sea dinámica */
  }

  .seccion-fondo2 .col-lg-6 {
    width: 100%; /* Hace que cada elemento ocupe todo el ancho en dispositivos pequeños */
    padding: 10px;
  }

  /* Imagen */
  .seccion-fondo2 img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho */
    height: auto; /* Ajusta la imagen a su proporción */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}


@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.wow.zoomIn {
  visibility: hidden;
  animation-name: zoomIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Asegura que el texto tarde más en aparecer */
.wow[data-wow-delay="0.7s"] {
  animation-delay: 0.7s;
}

/* Asegura que la imagen tenga un pequeño retardo */
.wow[data-wow-delay="0.1s"] {
  animation-delay: 0.1s;
}





/* Aseguramos que la imagen no se sobreponga con el texto */
.container-fluid img {
  width: 100%;
  height: auto; /* Mantener las proporciones de la imagen */
}

/* En pantallas grandes, la imagen y el texto deben estar alineados en dos columnas */
@media (min-width: 768px) {
  .row.g-4 {
    display: flex;
    justify-content: space-between;
  }

  .col-lg-6 {
    padding: 20px;
  }
}

/* En pantallas más pequeñas, el texto irá debajo de la imagen */
@media (max-width: 768px) {
  .row.g-4 {
    flex-direction: column; /* Apilar la imagen y el texto */
    gap: 20px;
  }

  .seccion-fondo2 {
    padding: 20px;
  }

  .single-course-area {
    text-align: left;
  }

  .col-lg-6 {
    width: 100%;
    padding: 10px;
  }
}




/*--------------------------------------IMAGEN HERO---------------------------*/




/* Sección Hero */
.hero {
  height: 100vh;
  background: url('../img/hero.webp') no-repeat center center / cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-attachment: fixed;

}

/* Capa de superposición */
.hero-overlay {
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenido del Hero */
.hero-content {
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 20px;
  animation: fadeInUp 1.2s ease;
}

.hero-content h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

/* Botón de llamada a la acción */
.cta-button {
  background: #1abc9c;
  color: #fff;
  padding: 12px 28px;
  font-size: 1rem;
  border: none;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.cta-button:hover {
  background: white;
}

/* Caja del eslogan */
.slogan-box {
  background: rgba(255, 255, 255, 0.1);
  padding: 30px 40px;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  max-width: 850px;
  backdrop-filter: blur(8px);
  animation: fadeInUp 1.2s ease;
  margin-top: 50px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Título del eslogan Hero */
.slogan-box h2.hero-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 4.5rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  margin-bottom: 2.5rem;
  max-width: 900px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Botón CTA ya definido antes */
.cta-button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #00BFA5;
  color: #fff;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 191, 165, 0.3);
  display: inline-block;
  margin-top: 1rem;
}

.cta-button:hover {
  background: #00CDB4;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 191, 165, 0.4);
}




/* ---------Estilo de la caja de contenido dentro del carrusel ---------*/


.owl-carousel-item img {
  height: 800px; /* o cualquier valor que necesites */
  object-fit: cover; /* mantiene el recorte bonito sin deformar */
  width: 100%;
}


.carousel-content-box {
    background: rgba(0, 0, 0, 0.5); /* fondo translúcido */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    color: white;
    z-index: 2;
    margin-top: 180px; /* Aumenta este valor para bajarla más */
}


.carousel-content-box h5 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
}








.carousel-content-box p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.carousel-content-box a {
    text-decoration: none;
    font-weight: 600;
    background-color: #16BCC4; /* Botón de color celeste */
    color: #003366; /* Texto del botón */
    border-radius: 30px;
    padding: 10px 30px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.carousel-content-box a:hover {
    background-color: #ffff; /* Efecto hover de color más oscuro */
}






/*** Header carousel ***/
@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }
    
    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* Carousel Indicators */
.carousel-indicators-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.carousel-indicators {
    display: flex;
    gap: 15px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    backdrop-filter: blur(10px);
}

.carousel-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFD700;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    padding: 0;
    margin: 0;
}

.carousel-indicator:hover {
    background: rgba(255, 215, 0, 0.4);
    transform: scale(1.2);
}

.carousel-indicator.active {
    background: #FFD700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
    transform: scale(1.1);
}

/* Carousel Navigation Dots - FIX VISIBILIDAD */
#noticias .carousel-dots-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    bottom: 30px !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 1000 !important; /* Z-index muy alto para asegurar que se vea */
    pointer-events: none; /* Permite clics a través del contenedor */
}

#noticias .carousel-dots {
    display: flex !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    pointer-events: auto; /* Reactivar clics en los puntos */
}

#noticias .carousel-dot {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.3) !important; /* Fondo semi-visible */
    border: 2px solid #FFFFFF !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; /* Sombra más fuerte */
    flex-shrink: 0 !important;
}

#noticias .carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2);
}

#noticias .carousel-dot:focus {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9) !important;
}

#noticias .carousel-dot.active {
    background-color: #FFFFFF !important;
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9) !important;
    border-color: #FFFFFF !important;
}

.page-header {
   
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}



/*-------------------------IMAGEN DE FONDO AL PRINCIPIO DE CADA ENCABEZADO EN SECCIÓNES------------------*/


.page-header2 {
    background: linear-gradient(rgba(24, 29, 56, .7), rgba(24, 29, 56, .7)), url(../img/quienes/1.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.page-header3 {
    background: linear-gradient(rgba(24, 29, 56, .7), rgba(24, 29, 56, .7)), url(../img/programas/2.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}


.page-header4 {
    background: linear-gradient(rgba(24, 29, 56, .7), rgba(24, 29, 56, .7)), url(../img/alianzas/1.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}



.page-header-inner {
    background: rgba(15, 23, 43, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*-----------------------QUIENES SOMOS---------------------------*/


/*-------------------SECCION HISTORIA EVOLUCION CON IMAGEN MARCA DE AGUA*/
.watermark {
    position: absolute;
    top: 600%;
    left: 30%;
    transform: translate(-50%, -50%);
    opacity: 0.1; /* Ajusta la transparencia */
    width: 500px; /* Tamaño ajustable */
    height: auto;
    z-index: -1; /* Mantiene el logo en el fondo de la sección */
    pointer-events: none; /* Evita que interfiera con el contenido */
}

/*------------------------ESTRUCTURA ORGANIZACIONAL--------*/
.estructura-org-section {
  width: 100%;
  background-color: #f5f5dc; /* Beige */
  padding: 60px 20px;
}



/*iNSTITUCIONES AFILIADAS----------------------------------------*/

.seccion-fondo4 {
  position: relative;
  background: url('../img/course-1.jpg') center center/cover no-repeat;
  padding: 60px 0;
  z-index: 1;
}

.seccion-fondo4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Cortina negra con 50% transparencia */
  z-index: 1;
}

/* Para que el contenido esté por encima de la cortina */
.seccion-fondo4 .container {
  position: relative;
  z-index: 10;
}

.seccion-fondo4 .tabs-container,
.seccion-fondo4 .animated-title,
.seccion-fondo4 .counter {
  position: relative;
  z-index: 10;
}




/* Título animado */
.animated-title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    animation: fadeInUp 3s ease-in-out;
}

.counter {
    font-family: 'Montserrat', sans-serif;
    font-size: 120px !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

.tab-content h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.institucion span {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

/* Lista con viñetas elegantes */
.styled-list {
    list-style: none;
    padding-left: 20px;
}

.styled-list li {
    font-size: 18px;
    color: white;
    padding: 8px 0;
    padding-left: 30px;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

/* Viñetas personalizadas con color */
.styled-list li::before {
    content: "●";
    color: #cdab0f; /* Color igual al título */
    font-size: 20px;
    position: absolute;
    left: 0;
}
/* Viñetas personalizadas */
.styled-list li::before {
    content: "●";
    color: #cdab0f; /* Color igual al título */
    font-size: 20px;
    position: absolute;
    left: 0;
}

/* Efectos de transición */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}





/*-------------------ALIANZAS Y REDES LOGOS-------------------------------------*/

.logo-box {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  opacity: 1 !important; /* mantener visible (evita que desaparezca al hacer scroll) */
  background: #fff; /* tarjeta blanca */
  border-radius: 12px; /* esquinas elegantes */
  padding: 28px 20px; /* espacio interior */
  min-height: 240px; /* unificar tamaño de tarjeta */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-box:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.logo-img {
  max-height: 100px;
  max-width: 100%;
  filter: none; /* siempre en color */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 0 !important;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px auto;
}

/* Asegurar que no haya padding/blanco ni background ni redondeo aplicado por otras reglas */
.logo-box img, .logo-box .logo-img {
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: block; /* asegurar que no afecte el flujo del contenedor */
  margin: 0 auto; /* centrar el logo dentro de la tarjeta */
  object-fit: contain;
}

.logo-box:hover .logo-img {
  transform: scale(1.08); /* suave aumento */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* sombra moderna */
}
.logo-text {
  font-size: 10px;
  color: #333;
  margin-top: 10px;
}

.from-left {
  transform: translateX(-50px);
  animation: slideInLeft 1s forwards;
}

.from-right {
  transform: translateX(50px);
  animation: slideInRight 1s forwards;
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/*--------------------Proyectos Colaborativos------------*/

.transition-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 15px;
}

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

.card .btn {
  border-radius: 30px;
  font-weight: 500;
}

/* Ajustes tipográficos y color de iconos para Proyectos Colaborativos */
.transition-card .card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  color: #2c5282; /* color solicitado */
}
.transition-card .card-body i,
.transition-card .card-body .fa {
  color: #2c5282; /* iconos en color principal */
  background: transparent;
}
.transition-card .card-body .fa-2x {
  font-size: 1.5rem; /* ajustar tamaño del icono si usa fa-2x */
}



.convenios-section {
  width: 100%;
  background-color: #13357C;
  padding: 60px 20px;
}

.convenio-logo {
  max-height: 80px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
}

.convenio-logo:hover {
  transform: scale(1.05);
}






/*** Section Title ***/
.section-title {
    position: relative;
    display: inline-block;
  
}

.section-title::before {
    position: absolute;
    content: "";
    width: calc(100% + 80px);
    height: 2px;
    top: 4px;
    left: -40px;
    background: var(--primary);
    z-index: -1;
}

.section-title::after {
    position: absolute;
    content: "";
    width: calc(100% + 120px);
    height: 2px;
    bottom: 5px;
    left: -60px;
    background: var(--primary);
    z-index: -1;
}

.section-title.text-start::before {
    width: calc(100% + 40px);
    left: 0;
}

.section-title.text-start::after {
    width: calc(100% + 60px);
    left: 0;
}


/***--------------- PROGRAMAS Y SERVICIOS------------------------------  ***/
.service-item {
   max-width: 400px;
  margin: auto;
    background: var(--light);
  border-radius: 15px;
  
    position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}


.service-item::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 10%;
  width: 80%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 80%);
  filter: blur(10px);
  z-index: -1;
}/* Sombra suave adicional al hacer hover */
.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.service-item:hover {
    margin-top: -10px;
     transform: translateY(-5px);
    background: #13357C;
}

/* Sombra suave adicional al hacer hover */
.service-item:hover {
 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.service-item * {
    transition: .5s;
}

.service-item:hover * {
    color: var(--light) !important;
}



.icon-box {
    text-align: center;
    margin-bottom: 20px;
    
    
    transition: transform 0.3s ease; /* Transición suave en hover */
}

.icon-box i {
    font-size: 70px;
    color: #6c63ff; /* Color del icono */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); /* Sombra del icono */
    margin-bottom: 10px;
}

/* Efecto hover para íconos de servicios */
.service-icon {
    transition: color 0.3s ease;
}

.service-item:hover .service-icon {
    color: #FFFFFF !important;
}

/* Efecto al pasar el ratón */


/*** Categories & Courses ***/
.category img,
.course-item img {
    transition: .5s;
}

/* Estilos para la sección de proceso de registro (galería) */
.registration-gallery {
  background-color: transparent;
  padding: 60px 0;
}

.registration-gallery .section-title {
  color: #03226E;
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.registration-gallery .section-description {
  color: #6c757d;
  font-size: 1.02rem;
  margin-bottom: 1.5rem;
}

.registration-gallery .main-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.registration-gallery .main-image img:hover {
  transform: scale(1.02);
}

.registration-gallery .secondary-image {
  position: relative;
  transition: all 0.3s ease;
}

.registration-gallery .secondary-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.registration-gallery .secondary-image:hover {
  transform: translateY(-5px);
}

.registration-gallery .image-caption {
  color: #03226E;
  font-size: 1.1rem;
}

.registration-gallery .thumb {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.registration-gallery .thumb:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .registration-gallery .thumb { height: 80px; }
  .registration-gallery .main-image img { height: auto; }
}

/* Estilos para el slider de miniaturas */
.thumbnails-container {
  margin: 2rem auto;
  max-width: 1000px;
  padding: 20px 40px;
  position: relative;
}

.thumbnails-slider {
  position: relative;
}

.thumbnail-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.thumbnail-item {
  padding: 10px;
  transition: all 0.3s ease;
}

.thumbnail-item:hover {
  transform: translateY(-5px);
}

.thumbnail-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.thumbnail-caption {
  margin-top: 10px;
  text-align: center;
  color: #03226E;
  font-weight: 500;
}

.thumbnail-carousel .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  background: rgba(205, 171, 15, 0.9) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.thumbnail-carousel .owl-nav button:hover {
  background: rgb(205, 171, 15) !important;
  transform: translateY(-50%) scale(1.1);
}

.thumbnail-carousel .owl-nav button span {
  font-size: 24px;
  line-height: 1;
}

.thumbnail-carousel .owl-prev {
  left: -20px;
}

.thumbnail-carousel .owl-next {
  right: -20px;
}

.thumbnail-carousel .owl-dots {
  margin-top: 15px;
  text-align: center;
}

.thumbnail-carousel .owl-dot span {
  width: 10px;
  height: 10px;
  background: #d1d1d1 !important;
  margin: 5px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s ease;
}

.thumbnail-carousel .owl-dot.active span {
  background: #03226E !important;
  transform: scale(1.2);
}

/* --------------------------------------------------
   Specific overrides for Afiliación page (force styles)
   Added to ensure browser shows the requested typography
   and colors even if other rules have higher specificity
   -------------------------------------------------- */
.afiliacion-section .text-center h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 650 !important;
  color: #2c5282 !important;
  margin-bottom: 32px !important;
}

.afiliacion-section .text-center h5 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #2c5282 !important;
  letter-spacing: 0.2px !important;
}

.afiliacion-content,
.afiliacion-content p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #4a5568 !important;
  line-height: 1.8 !important;
  letter-spacing: 0.3px !important;
  text-align: justify !important;
}

/* ensure logos text size and no rounding */
.logo-text {
  font-size: 10px !important;
  color: #333 !important;
}
.logo-img, .logo-box img {
  border-radius: 0 !important;
}

/* --------------------------------------------------
   Fix: keep header visible on top when scrolling (index hero)
   Ensures the menu moves/shrinks but never disappears.
   - Make header fixed with high z-index
   - Ensure .hero has top-offset so header doesn't overlap content
   - Strong !important rules to override inline JS/CSS
   -------------------------------------------------- */
header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100000 !important;
  transition: transform 0.25s ease, background-color 0.25s ease, opacity 0.25s ease !important;
}

header.scroll {
  transform: none !important;
  opacity: 1 !important;
  background-color: rgba(0,51,102,0.95) !important;
}

/* Add top offset to hero so header doesn't cover the first section content
  Use a safe default header height; increased to avoid overlap with large logo/menu.
  Mobile gets a smaller offset. */
.hero { padding-top: 220px !important; box-sizing: border-box !important; }

@media (max-width: 1024px) {
  /* Tablets and small laptops: still give generous space */
  .hero { padding-top: 160px !important; }
}

@media (max-width: 768px) {
  /* Mobile: header is shorter, use increased offset */
  .hero { padding-top: 140px !important; }
}



@media (max-width: 768px) {
  .thumbnails-container {
    padding: 15px;
  }
  
  .thumbnail-img {
    height: 150px;
  }
  
  .thumbnail-carousel .owl-nav button {
    width: 35px;
    height: 35px;
  }
}



.category a:hover img,
.course-item:hover img {
    transform: scale(1.1);
}


/*** Team ***/
.team-item img {
    transition: .5s;
}

.team-item:hover img {
    transform: scale(1.1);
}


/*** Testimonial ***/
.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px;
    }
}

.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: #13357C;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}






 .mision-vision-section {
    background-color: #f8fafc;
    padding: 60px 0;
  }

  .mision-vision-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
  }

  .mision-vision-text {
    flex: 1 1 50%;
  }

  .mision-vision-text h4 {
    color: #03226E;
    margin-bottom: 10px;
  }

  .mision-vision-text p {
    text-align: justify;
    font-size: 17px;
    margin-bottom: 25px;
    color: #333;
  }

  .mision-vision-image {
    flex: 1 1 40%;
  }

  .mision-vision-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 768px) {
    .mision-vision-content {
      flex-direction: column;
      text-align: center;
    }

    .mision-vision-text {
      text-align: center;
    }

    .mision-vision-text p {
      text-align: justify;
    }
  }



.header-image {
  margin-top: 15px; /* espacio entre el título y la imagen */
}

.header-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}









.tabs-container {
    width: 100%;
    max-width: 1000px;
    margin: auto;
  }

  .tab-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
  }

  .tab-button {
    background-color: #2c5282;
    color: white;
    padding: 10px 20px;
    border: none;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }

  .tab-button:hover,
  .tab-button.active {
    background-color: #1e3a5f;
  }

  .tab-content {
    display: none;
    background: #f1f1f1;
    padding: 30px;
    border-radius: 8px;
  }

  .tab-content.active {
    display: block;
  }

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

  .institucion {
    display: flex;
    align-items: center;
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .institucion img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-right: 12px;
  }

  .institucion span {
    font-weight: 500;
    font-size: 16px;
    color: #333;
  }




  /*-----------------------GALERIA ----------------------*/


/*NOTICIA--------------------*/

.media-coverage {
    width: 80%;
    margin: auto;
}

.news-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.news-item {
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    text-align: center;
}

.news-item img {
    width: 100%;
    border-radius: 8px;
}

.news-item h3 {
    margin-top: 10px;
    font-size: 18px;
    color: #333;
}
/*FECHA DE LA GALERIA*---------------*/
.news-date {
    font-size: 12px;
    color: #666;
    text-align: left;
    margin-top: 5px;
}


.news-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.news-item.show {
    opacity: 1;
    transform: translateY(0);
}

.news-item:hover {
    transform: scale(1.05);
}
/*BOTÓN PARA RECORRER LA NOTICIAS*/
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espaciado entre botones */
    margin-top: 15px;
}

.pagination button {
    padding: 8px 12px;
    font-size: 14px;
    min-width: 40px; /* Tamaño mínimo sin ocupar todo el ancho */
    width: auto; /* Se ajusta al contenido */
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.pagination button:hover {
    background-color: #0056b3;
}

/*BOTÓN PARA RECORRER LAS FOTOS DE LA GALERIA*/
.pagination button {
    padding: 8px 5px;
    font-size: 14px;
    width: auto; /* Ajusta el ancho automáticamente */
    display: inline-block;
    margin: 5px;
}




button {
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

/* Botón color guinda personalizado */
.btn-guinda {
  background-color: #8B1E3F !important;
  color: #ffffff !important;
  border: 1px solid #8B1E3F !important;
  padding: 14px 24px !important;
  border-radius: 6px !important;
  font-weight: 600;
  display: inline-block;
}
.btn-guinda:hover,
.btn-guinda:focus {
  background-color: #6f1731 !important;
  color: #ffffff !important;
  border-color: #6f1731 !important;
  box-shadow: 0 6px 18px rgba(139,30,63,0.3) !important;
  text-decoration: none;
}
.btn-guinda:active {
  transform: translateY(0);
}

/* Botones grandes con mayor padding para hero */
.btn-lg {
  padding: 14px 26px !important;
  font-size: 1.05rem !important;
}

/* Efecto hover elegante estilo Apple */
.btn-hover-apple {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-hover-apple::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-hover-apple:hover::before {
  left: 100%;
}

.btn-hover-apple:hover {
  background: linear-gradient(135deg, #6f1731 0%, #8B1E3F 100%) !important;
  box-shadow: 0 8px 25px rgba(139, 30, 63, 0.5);
  transform: translateY(-3px) scale(1.02);
}

.btn-hover-apple:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 15px rgba(139, 30, 63, 0.3);
}

/* Ensure icons or gifs inside .btn-hover-apple are consistent size and centered */
.btn-hover-apple {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-hover-apple i,
.btn-hover-apple .fa,
.btn-hover-apple img {
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 40px; /* icon glyph size inside its box */
  display: inline-block;
  text-align: center;
}
.btn-hover-apple img {
  object-fit: contain;
}
.btn-hover-apple .icon-large {
  width: 100px;
  height: 100px;
  font-size: 50px;
}

/* Responsive: slightly smaller icons on narrow screens */
@media (max-width: 768px) {
  .btn-hover-apple i,
  .btn-hover-apple .fa,
  .btn-hover-apple img {
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 32px;
  }
  .btn-hover-apple .icon-large {
    width: 84px;
    height: 84px;
    font-size: 40px;
  }
}

/* Split rectangular button: left icon box + vertical divider + right text box */
.btn-rect {
  display: inline-flex;
  align-items: stretch;
  min-width: 300px; /* reduced width */
  min-height: 98px; /* reduced height */
  border-radius: 0 !important; /* sharp rectangular corners like example */
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  background: transparent; /* left/right panels define color */
}
.btn-rect:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.btn-rect .left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* full height square */
  min-width: 120px; /* smaller fixed square area */
  background: #5a0d1a; /* darker maroon for icon box */
  border-right: 4px solid #ffffff; /* thinner vertical white separator */
}
.btn-rect .left i,
.btn-rect .left img {
  width: 72px; /* smaller icon box */
  height: 72px;
  font-size: 36px;
  line-height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #6b0f22; /* inner square tone */
}
.btn-rect .right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 28px; /* slightly less padding */
  flex: 1 1 auto;
  font-size: 28px; /* reduced text size */
  font-weight: 700;
  text-align: left;
  color: #ffffff;
  background: #6f1731; /* maroon text panel */
}

@media (max-width: 768px) {
  .btn-rect { min-width: 240px; min-height: 80px; }
  .btn-rect .left { min-width: 72px; }
  .btn-rect .left i, .btn-rect .left img { width: 48px; height: 48px; font-size: 22px; line-height:48px; }
  .btn-rect .right { font-size: 16px; padding: 0 12px; }
}

/* Pill style button: icon above text inside a rounded pill */
/* Exact pill size to match provided reference image */
.btn-pill {
  /* compact pill override to keep buttons small per user feedback */
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 200px !important;
  min-height: 80px !important;
  padding: 10px 16px !important;
  border-radius: 40px !important;
  background: linear-gradient(135deg, #6f1731 0%, #8B1E3F 100%) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.btn-pill:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important; }
.btn-pill .pill-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.06) !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}
.btn-pill .pill-icon i,
.btn-pill .pill-icon img {
  font-size: 24px !important;
  width: 32px !important;
  height: 32px !important;
  color: #fff !important;
}
.btn-pill .pill-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
@media (max-width: 768px) {
  .btn-pill { min-width: 220px; min-height: 120px; padding: 12px 18px; }
  .btn-pill .pill-icon { width: 72px; height: 72px; margin-bottom: 12px; }
  .btn-pill .pill-icon i { font-size: 36px; }
  .btn-pill .pill-text { font-size: 20px; }

  /* Registration buttons container: allow wrapping and sensible spacing on mobile */
  .registration-gallery .d-flex {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
  }

  /* Make pills share the row (two per row) on phones, but avoid overflowing */
  .registration-gallery .d-flex .btn-pill {
    flex: 0 0 46% !important;
    max-width: 46% !important;
    box-sizing: border-box !important;
    margin: 6px 2% !important;
  }
}

/* For very narrow screens, stack full-width with comfortable margins */
@media (max-width: 420px) {
  .registration-gallery .d-flex .btn-pill {
    flex: 0 0 92% !important;
    max-width: 92% !important;
    margin: 8px 4% !important;
  }
}

.page-btn {
    padding: 5px 10px;
    margin: 5px;
    border: none;
    background-color: #ddd;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}

.page-btn:hover {
    background-color: #bbb;
}

.page-btn.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}






/* Estilos generales mosaico de galeria */
.media-coverage {
    width: 80%;
    margin: auto;
}

.news-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.news-item {
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.news-item:hover {
    transform: scale(1.05);
}



/* Estilos para ver noticia completa con la galería completa */

/*IMAGEN DE LA NOTICIA COMPLETA MUESTRA EL TAMAÑO DE LA FOTOGRAFÍA*/






#news-description {
    font-size: 16px;
    text-align: justify;
    margin-top: 15px;
    padding: 10px;
}


.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
}



/* Galería NOTICIA */


#prev-btn,
#next-btn {
      position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;

/* Estilos para el modal de registro y su carousel */
#registroModal .modal-dialog {
  max-width: 800px;
  margin: 1.75rem auto;
}

#registroModal .modal-content {
  background-color: #ffffff;
  border: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

#registroModal .modal-body {
  padding: 1rem;
  position: relative;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

#registroCarousel {
  margin: 0 auto;
  background-color: #ffffff;
  width: 100%;
  position: relative;
}

#registroCarousel .carousel-item {
  text-align: center;
  height: auto;
  background-color: #ffffff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#registroCarousel .carousel-item img {
  max-height: 500px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  display: block;
}

#registroModal .btn-close {
  position: absolute;
  right: 20px;
  top: 20px;
  background-color: #ffffff;
  opacity: 1;
  width: 32px;
  height: 32px;
  z-index: 2050;
  border-radius: 0;
  box-shadow: none;
}

#registroModal .carousel-control-prev,
#registroModal .carousel-control-next {
  width: 40px;
  height: 40px;
  background-color: rgba(205, 171, 15, 0.9);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#registroModal .carousel-control-prev {
  left: 1rem;
}

#registroModal .carousel-control-next {
  right: 1rem;
}

#registroModal .carousel-control-prev-icon,
#registroModal .carousel-control-next-icon {
  width: 20px;
  height: 20px;
  display: block;
  position: static;
}

@media (max-width: 991.98px) {
  #registroModal .modal-dialog {
    max-width: 95%;
    margin: 1rem auto;
  }
  
  #registroModal .btn-close {
    right: 8px;
    top: 8px;
    background-color: rgba(255,255,255,0.9);
  }
  
  #registroModal .carousel-control-prev {
    left: 8px;
  }
  
  #registroModal .carousel-control-next {
    right: 8px;
  }
}
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%; /* HACE EL BOTÓN CIRCULAR */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
 

}

#prev-btn {
    left: 5%;
    background-color: rgba(205, 171, 15, 0.9); /* Dorado tipo Marca UNACH */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);


}

#next-btn{
    right: 5%;
    background-color: rgba(205, 171, 15, 0.9); /* Dorado tipo Marca UNACH */
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  
}




button {
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}





.galeria-noticia img {
  max-width: 250px;
  height: auto;
 margin-top: 4px;
margin-bottom: 4px;

  transition: transform 0.2s ease;
}

.galeria-noticia {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 0;
  margin-bottom: 0;
}

.galeria-noticia h4 {
  margin-top: 0;
  margin-bottom: 12px;

/* --- Corrección: evitar que reglas globales de `button` rompan controles de Bootstrap --- */
/* Forzar estilos neutros para botones dentro de modales y controles de carrusel */
.modal .btn-close,
.modal .carousel-control-prev,
.modal .carousel-control-next,
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Asegurar que el icono de control del carrusel sea visible */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none !important; /* reset si se ve afectado por estilos globales */
  width: 28px;
  height: 28px;
  display: inline-block;
  background-size: 100% 100%;
}

/* Usar SVG inline de fallback (si el ícono desaparece por algún CSS global) */
.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
  content: '';
  display: inline-block;
}
}

#galeria-noticia {
  margin-top: 0;
  margin-bottom: 0;
}

.galeria-noticia img:hover {
  transform: scale(1.05);
}


/*-----------------------GALERIA -------------------*/

.card-img-top {
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.card {
  transition: transform 0.2s ease;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.02);
}

/* Estilos para las miniaturas en slide-out */
.thumbnails-container {
  margin: 2rem 0;
  padding: 20px 0;
  position: relative;
}

.thumbnails-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
}

.thumbnail-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.thumbnail-item {
  padding: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.thumbnail-item:hover {
  transform: translateY(-5px);
}

.thumbnail-img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.thumbnail-caption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #03226E;
  font-weight: 500;
}

/* Personalización de los controles del carousel */
.thumbnail-carousel .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  background: rgba(205, 171, 15, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.thumbnail-carousel .owl-nav button span {
  font-size: 1.8rem;
  line-height: 0;
}

.thumbnail-carousel .owl-nav .owl-prev {
  left: -20px;
}

.thumbnail-carousel .owl-nav .owl-next {
  right: -20px;
}

.thumbnail-carousel .owl-dots {
  margin-top: 15px;
}

.thumbnail-carousel .owl-dot span {
  background: #d1d1d1 !important;
}

.thumbnail-carousel .owl-dot.active span {
  background: #03226E !important;
}

/* Footer full width */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}

footer {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    bottom: 0;
}

/* ------------------------------------------------------------------
   Mobile-only visibility fixes (applied only when JS toggles
   the `body.mobile-fix` class). These rules ensure the hero section
   flows below the fixed header on small devices without altering
   desktop styles. Use CSS variables set by JS for exact measurements.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  body.mobile-fix .hero {
    box-sizing: border-box;
    /* padding controlled by JS variable to reflect actual header height */
    padding-top: var(--hero-padding, 140px) !important;
    height: auto !important;
    /* allow hero to be at most the viewport minus header so following sections become visible */
    min-height: auto !important;
    max-height: var(--hero-max-height, calc(100vh - var(--hero-padding, 140px))) !important;
    background-attachment: scroll !important; /* avoid parallax issues on mobile */
    overflow: visible !important;
  }

  /* Make overlay content start below header so nothing is vertically centered
     behind the fixed header. This preserves desktop centering. */
  body.mobile-fix .hero-overlay {
    align-items: flex-start !important;
    padding-top: 0 !important;
    height: auto !important; /* ensure overlay doesn't cover following sections */
  }

  /* Ensure the internal wrapper has padding so content is visible and not
     clipped by fixed header. We add a small bottom padding for breathing room. */
  body.mobile-fix .hero-content-wrapper {
    padding-top: calc(var(--hero-padding, 140px) + 8px) !important;
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
  }
}

/* Mobile header spacing fixes: separate logo, hamburger and social icons */
@media (max-width: 768px) {
  header {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
  }

  .menu-toggle {
    display: block !important;
    margin-left: 12px !important;
    margin-right: 6px !important;
  }

  .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* Mobile: prevent nested scrollbars by forcing major layout containers to show
   their content and let the document handle the main scroll. These rules are
   intentionally conservative and only affect common containers that previously
   had overflow/height rules. If you prefer, I can further narrow selectors.
*/
@media (max-width: 768px) {
  html, body {
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Make sure hero and its wrappers don't create their own scroll area */
  body.mobile-fix .hero,
  body.mobile-fix .hero-overlay,
  body.mobile-fix .hero-content-wrapper,
  body.mobile-fix .hero-image-content,
  body.mobile-fix .hero-image-wrapper,
  body.mobile-fix .registration-gallery,
  body.mobile-fix .header-carousel,
  body.mobile-fix .owl-carousel,
  body.mobile-fix .carousel {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Reduce excess vertical whitespace in hero area on mobile */
  body.mobile-fix .hero {
    padding-bottom: 12px !important;
  }

  body.mobile-fix .hero-overlay {
    padding-bottom: 8px !important;
  }

  body.mobile-fix .hero-content-wrapper {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }

  /* Make the divider more compact on mobile so sections flow tightly */
  body.mobile-fix .section-divider {
    margin: 18px 0 !important;
  }

  /* Ensure the hero image doesn't extend into the following 'Participa'
     section on small screens. Limit the image wrapper height and crop
     content if necessary so the registration section appears immediately
     below the hero. This only applies on mobile when mobile-fix is active.
  */
  body.mobile-fix .hero-image-wrapper {
    position: static !important;
    max-height: 260px !important;
    overflow: hidden !important;
    margin: 12px auto !important;
    width: 90% !important;
  }

  body.mobile-fix .hero-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* On very narrow screens hide the hero image entirely so it does not
     overlap the following 'Participa' section and keeps content flow
     clean. Adjust breakpoint as needed (480px is common small-phone width). */
  @media (max-width: 480px) {
    /* Mobile-only: show a larger, fully visible hero image on very small
       screens but cap its maximum height so it never overlaps the following
       section. These rules apply regardless of JS and only affect small
       viewports. */
    body.mobile-fix .hero-image-wrapper,
    .hero-image-wrapper {
        display: block !important;
        max-height: 240px !important; /* increased to show more of the image */
      overflow: hidden !important;
      margin: 10px auto 8px auto !important;
      padding: 0 !important;
      width: 92% !important;
      z-index: 0 !important;
      border-radius: 12px !important;
      background: transparent !important;
      text-align: center !important;
    }

    body.mobile-fix .hero-image-wrapper img,
    .hero-image-wrapper img {
      max-width: 100% !important;
      height: auto !important;
      max-height: 240px !important;
      object-fit: contain !important; /* show whole image */
      object-position: top center !important;
      display: inline-block !important;
    }

    /* Ensure the registration section sits right after the hero content */
    body.mobile-fix .registration-gallery,
    .registration-gallery {
      margin-top: 22px !important;
      padding-top: 12px !important;
      z-index: 1 !important;
    }
  }

  /* Align the hero image to the bottom of its column so its lower edge
     sits closer to the divider/registration section (prevents visual gap). */
  body.mobile-fix .hero-image-content {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 6px !important;
  }

  /* Avoid showing a second scrollbar from fixed nav wrappers when closed */
  header .navbar,
  nav#navbar,
  .navbar {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* As a last-resort visual fix: hide thin nested scrollbars inside common
     containers while mobile debugging is active (keeps the document scrollbar).
     This only hides the visual track; scrolling still works via touch. */
  body.mobile-fix .hero ::-webkit-scrollbar,
  body.mobile-fix .registration-gallery ::-webkit-scrollbar,
  body.mobile-fix .header .navbar ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body.mobile-fix .hero,
  body.mobile-fix .registration-gallery,
  body.mobile-fix .header .navbar {
    scrollbar-width: none !important; /* firefox */
    -ms-overflow-style: none !important; /* IE 10+ */
  }
}

/* MOBILE: hide inner scrollbars globally except for the page body, to avoid
   showing multiple scrollbars. This is a visual-only change (scroll still
   works by touch). We keep body scrollbars intact. */
@media (max-width: 768px) {
  /* Hide webkit scrollbars for all elements */
  *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* Re-enable scrollbar for the document body so user can still scroll */
  body::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
  }

  /* Firefox: hide for all elements, then restore for body */
  * { scrollbar-width: none !important; }
  body { scrollbar-width: thin !important; }
}