/* Inicialmente oculta el contenido y los controles del carrusel */
.carousel-image .text-center,
.carousel-controls,
.carousel-indicators .indicator {
  display: none;
}

.carousel-image.active .text-center {
  display: block;
}

.carousel-controls,
.carousel-indicators .indicator {
  display: block;
}

/* Ocultar las imágenes antes de cargarlas */
.masthead {
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease-in-out;
}

/* Clase activa para indicadores */
.indicator.active {
  background-color: #ffc800;
  /* Color para el indicador activo */
}

/* Estilos generales para los botones del carrusel */
.carousel-controls button {
  background-color: rgba(0, 0, 0, 0.6);
  /* Fondo semitransparente para mayor visibilidad */
  color: #ffffff;
  /* Color del texto blanco */
  border: none;
  /* Sin bordes para un look más moderno */
  font-size: 1.5rem;
  /* Tamaño de fuente más grande para mejorar la legibilidad */
  padding: 0.75rem 1.5rem;
  /* Más padding para hacer el botón más grande */
  cursor: pointer;
  /* Cambia el cursor al pasar por encima */
  border-radius: 0.5rem;
  /* Bordes redondeados para un estilo moderno */
  transition: background-color 0.3s ease, transform 0.2s ease;
  /* Transición suave para fondo y tamaño */
  outline: none;
  /* Elimina el borde azul en Chrome */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Añade una sombra para hacer los botones más prominentes */
}

/* Aumenta el tamaño y cambia el color al pasar el ratón */
.carousel-controls button:hover {
  background-color: rgba(0, 0, 0, 0.8);
  /* Fondo más oscuro al pasar el ratón */
  transform: scale(1.1);
  /* Aumenta ligeramente el tamaño al pasar el ratón */
}

/* Para los botones activos, si necesitas un estado específico */
.carousel-controls button:active {
  background-color: rgba(0, 0, 0, 0.9);
  /* Fondo aún más oscuro cuando se hace clic */
  transform: scale(1);
  /* Restablece la escala al hacer clic */
}

/* Estilo para los indicadores de carrusel para hacerlos más visibles */
.carousel-indicators .indicator {
  width: 15px;
  /* Aumenta el tamaño del indicador */
  height: 15px;
  /* Aumenta el tamaño del indicador */
  background-color: #ffffff;
  /* Color blanco para el indicador inactivo */
  border-radius: 50%;
  /* Forma circular */
  margin: 0 5px;
  /* Espaciado entre los indicadores */
  cursor: pointer;
  /* Cambia el cursor al pasar por encima */
  transition: background-color 0.3s ease, transform 0.2s ease;
  /* Transición suave para color y tamaño */
}

/* Estado del indicador activo */
.carousel-indicators .indicator.active {
  background-color: #ffc800;
  /* Color llamativo para el indicador activo */
  transform: scale(1.2);
  /* Aumenta el tamaño del indicador activo */
}

/* Efecto hover para los indicadores */
.carousel-indicators .indicator:hover {
  background-color: #ffc800;
  /* Mismo color que el indicador activo al pasar el ratón */
}

/*************************************************/


/* ============================
   Estilos Generales del Encabezado
   ============================ */
   header.masthead {
    position: relative;
    text-align: center;
    color: #0047ab; /* Azul cobalto */
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    margin-top: 43px;
  }

  /* Aplicar el efecto de halo blanco a los títulos y subtítulos */
  header.masthead .masthead-heading,
  header.masthead .masthead-subheading {
    text-shadow:  0 0 10px #ffffff,; /* Efecto de halo blanco */
  }
/* ============================
     Contenedor Principal del Encabezado
     ============================ */
header.masthead .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

  /* ============================
     Estilos del Subtítulo
     ============================ */
     header.masthead .masthead-subheading {
      font-size: clamp(1.5rem, 1.5vw, 2.5rem); /* Tamaño de fuente adaptable */
      line-height: 1.1;
      color: rgb(36, 25, 25); /* Letras blancas */
      text-shadow: 0 0 10px rgb(255, 255, 255), 0 0 20px rgb(255, 255, 255); /* Efecto de halo azul */
    }


header.masthead .masthead-heading {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
  margin-bottom: 1rem;
}

header.masthead .masthead-subheading {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5rem;
  margin-bottom: 20px;
}

/* ============================
     Estilos para el Carrusel de Imágenes
     ============================ */
header.masthead .image-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Centra verticalmente las imágenes */
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Ocupa todo el ancho del contenedor */
  height: 100%;
  /* Asegura que el contenedor del carrusel ocupe toda la altura */
}

header.masthead .image-carousel img {
  width: 100%;
  /* Asegura que la imagen ocupa todo el ancho disponible */
  height: 100%;
  /* Asegura que la imagen ocupa toda la altura disponible */
  object-fit: contain;
  /* Mantiene la imagen completa sin recortes */
  transition: opacity 1s ease-in-out;
  opacity: 0;
  display: none;
  /* Oculta las imágenes por defecto */
}

header.masthead .image-carousel img.active {
  opacity: 1;
  display: block;
}

/* ============================
     Controles de Navegación del Carrusel
     ============================ */
header.masthead .carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 2;
}

header.masthead .carousel-controls button {
  background-color: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  font-size: 2rem;
  /* Incrementa el tamaño de la fuente para mayor visibilidad */
  padding: 1rem;
  /* Aumenta el padding para que los botones sean más fáciles de tocar */
  cursor: pointer;
  border-radius: 50%;
  /* Hace los botones redondos */
  transition: background-color 0.3s ease;
}

header.masthead .carousel-controls button:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

/* ============================
   Indicadores del Carrusel
   ============================ */

/* Estilo general para el contenedor de los indicadores del carrusel */
header.masthead .carousel-indicators {
  text-align: center;
  /* Centra los indicadores horizontalmente */
  margin-top: 5px;
  /* Espacio superior para separar los indicadores del contenido superior */
}

/* Estilo para cada indicador del carrusel */
header.masthead .carousel-indicators .indicator {
  display: inline-block;
  /* Muestra los indicadores en línea */
  width: 15px;
  /* Ancho del indicador */
  height: 15px;
  /* Altura del indicador */
  background-color: #000;
  /* Color de fondo negro para los indicadores inactivos */
  border: 2px solid #fff;
  /* Borde blanco para los indicadores inactivos */
  border-radius: 50%;
  /* Forma circular para los indicadores */
  margin: 0 5px;
  /* Espaciado entre indicadores */
  cursor: pointer;
  /* Cambia el cursor a puntero cuando se pasa sobre el indicador */
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  /* Transiciones suaves para el color de fondo, borde y escala */
}

/* Estilo para el indicador activo del carrusel */
header.masthead .carousel-indicators .indicator.active {
  background-color: #fff;
  /* Color de fondo blanco para el indicador activo */
  border-color: #000;
  /* Borde negro para el indicador activo */
  transform: scale(1.5);
  /* Agranda el indicador activo para destacarlo */
}


/* ============================
   Botón de Acción Primario
   ============================ */
.btn-primary.btn-xl {
  font-size: 1.25rem;
  /* Tamaño de fuente por defecto */
  padding: 0.75rem 1.5rem;
  /* Padding por defecto */
  border-radius: 0.5rem;
  /* Redondeo del borde */
  text-transform: uppercase;
  /* Mayúsculas para el texto */
  background-color: #007bff;
  /* Color de fondo primario */
  color: #ffffff;
  /* Color de texto */
  border: 2px solid #0056b3;
  /* Borde más estilizado con un color azul oscuro */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* Sombra para darle profundidad */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  /* Transiciones para hover */
  display: inline-block;
  /* Muestra el botón en línea */
  text-align: center;
  /* Centra el texto */
}

/* Efecto hover para el botón */
.btn-primary.btn-xl:hover {
  background-color: #0056b3;
  /* Color de fondo más oscuro al pasar el ratón */
  color: #ffffff;
  /* Mantiene el color de texto blanco */
  border-color: #003d7a;
  /* Color del borde más oscuro al pasar el ratón */
  transform: scale(1.05);
  /* Efecto de escala al pasar el ratón */
}

/* Efecto activo para el botón */
.btn-primary.btn-xl:active {
  background-color: #003d7a;
  /* Fondo aún más oscuro cuando se hace clic */
  border-color: #003d7a;
  /* Borde igual al fondo cuando se hace clic */
  transform: scale(1);
  /* Restablece la escala al hacer clic */
}

.btn-primary.btn-xl:hover {
  background-color: #0056b3;
  /* Color de fondo al pasar el cursor */
  transform: scale(1.05);
  /* Efecto de escala al pasar el cursor */
}

/* ============================
   Media Queries para Pantallas Grandes (PC)
   ============================ */
@media (min-width: 1900px) {
  header.masthead .masthead-heading {
    font-size: 3rem;
    /* Tamaño de fuente grande para pantallas de PC */
    line-height: 3.5rem;
    /* Altura de línea para pantallas grandes */
  }

  header.masthead {
    height: 93.5vh;
    /* Altura ajustada para móviles */
  }

  header.masthead .masthead-subheading {
    font-size: 2rem;
    /* Tamaño de fuente para subtítulos en pantallas grandes */
    line-height: 1.5rem;
    /* Altura de línea para subtítulos */
  }

  .btn-primary.btn-xl {
    font-size: 1.5rem;
    /* Tamaño de fuente más grande para pantallas grandes */
    padding: 1rem 2rem;
    /* Padding mayor para botones en pantallas grandes */
  }

  header.masthead .carousel-indicators .indicator {
    width: 15px;
    /* Indicadores más grandes para pantallas grandes */
    height: 15px;
  }
}

/* ============================
     Media Queries para Pantallas Medianas (Tablets y Laptops)
     ============================ */
@media (max-width: 1400px) {
  header.masthead .masthead-heading {
    font-size: 2.5rem;
    /* Tamaño de fuente para pantallas medianas */
    line-height: 3rem;
    /* Altura de línea para pantallas medianas */
  }

  header.masthead {
    height: 75vh;
    /* Altura ajustada para móviles */
  }

  header.masthead .masthead-subheading {
    font-size: 1rem;
    /* Tamaño de fuente para subtítulos en pantallas medianas */
    line-height: 1rem;
    /* Altura de línea para subtítulos */
  }

  .btn-primary.btn-xl {
    font-size: 1.25rem;
    /* Tamaño de fuente para pantallas medianas */
    padding: 0.75rem 1.5rem;
    /* Padding estándar para pantallas medianas */
  }

  header.masthead .carousel-indicators .indicator {
    width: 12px;
    /* Indicadores de tamaño medio */
    height: 12px;
  }
}

/* ============================
     Media Queries para Pantallas Medianas (Tablets y Laptops)
     ============================ */
@media (max-width: 1200px) {
  header.masthead .masthead-heading {
    font-size: 2.5rem;
    /* Tamaño de fuente para pantallas medianas */
    line-height: 3rem;
    /* Altura de línea para pantallas medianas */
  }

  header.masthead {
    height: 60vh;
    /* Altura ajustada para móviles */
  }

  header.masthead .masthead-subheading {
    font-size: 1rem;
    /* Tamaño de fuente para subtítulos en pantallas medianas */
    line-height: 1rem;
    /* Altura de línea para subtítulos */
  }

  .btn-primary.btn-xl {
    font-size: 1.25rem;
    /* Tamaño de fuente para pantallas medianas */
    padding: 0.75rem 1.5rem;
    /* Padding estándar para pantallas medianas */
  }

  header.masthead .carousel-indicators .indicator {
    width: 12px;
    /* Indicadores de tamaño medio */
    height: 12px;
  }
}



/* ============================
     Media Queries para Pantallas Medianas (Tablets y Laptops)
     ============================ */
@media (max-width: 992px) {
  header.masthead .masthead-heading {
    font-size: 1.9rem;
    /* Tamaño de fuente para pantallas medianas */
    line-height: 3rem;
    /* Altura de línea para pantallas medianas */
  }

  header.masthead {
    height: 50vh;
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Altura ajustada para móviles */
  }

  header.masthead .masthead-subheading {
    font-size: 1rem;
    /* Tamaño de fuente para subtítulos en pantallas medianas */
    line-height: 1rem;
    /* Altura de línea para subtítulos */
  }

  .btn-primary.btn-xl {
    font-size: 1.25rem;
    /* Tamaño de fuente para pantallas medianas */
    padding: 0.75rem 1.5rem;
    /* Padding estándar para pantallas medianas */
  }

  header.masthead .carousel-indicators .indicator {
    width: 12px;
    /* Indicadores de tamaño medio */
    height: 12px;
  }
}

/* ============================
     Media Queries para Pantallas Pequeñas (Móviles y Tablets Pequeñas)
     ============================ */
@media (max-width: 767px) {
  header.masthead {
    height: 35vh;
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Altura ajustada para móviles */
  }

  header.masthead .masthead-heading {
    font-size: 1.1rem;
    /* Ajuste de tamaño para móviles */
    line-height: 1.3rem;
    /* Ajuste de line-height para móviles */
  }

  header.masthead .masthead-subheading {
    font-size: 0.8rem;
    /* Ajuste de tamaño para móviles */
    line-height: 1.1rem;
    /* Ajuste de line-height para móviles */
  }

  header.masthead .carousel-container {
    width: 90%;
    /* Reduce el ancho del contenedor en pantallas más pequeñas */
  }

  header.masthead .image-carousel {
    height: 50vh;
    /* Establece una altura fija en pantallas pequeñas */
  }

  header.masthead .carousel-controls button {
    font-size: 1.5rem;
    /* Ajusta el tamaño de la fuente para botones en móviles */
    padding: 0.75rem;
    /* Ajusta el padding de los botones para pantallas más pequeñas */
  }

  header.masthead .carousel-indicators .indicator {
    width: 12px;
    /* Reduce ligeramente el tamaño de los indicadores */
    height: 12px;
  }

  .btn-primary.btn-xl {
    font-size: 1rem;
    /* Tamaño de fuente reducido para móviles */
    padding: 0.6rem 1.2rem;
    /* Padding reducido para móviles */
  }
}

/* ============================
     Media Queries para Dispositivos Muy Pequeños (Móviles Pequeños)
     ============================ */
@media (max-width: 576px) {
  header.masthead {
    height: 25vh;
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Altura reducida para móviles pequeños */
  }

  header.masthead .image-carousel {
    height: 50vh;
    /* Ajusta la altura para dispositivos muy pequeños */
  }

  header.masthead .masthead-heading {
    font-size: 0.9rem;
    /* Ajuste de tamaño para móviles pequeños */
    line-height: 1.1rem;
    /* Ajuste de line-height para móviles pequeños */
  }

  header.masthead .masthead-subheading {
    font-size: 0.7rem;
    /* Ajuste de tamaño para móviles pequeños */
    line-height: 0.9rem;
    /* Ajuste de line-height para móviles pequeños */
  }

  header.masthead .carousel-controls button {
    font-size: 1.2rem;
    /* Aún más pequeño para móviles muy pequeños */
    padding: 0.5rem;
    /* Reduce el padding para facilitar la interacción en pantallas pequeñas */
  }

  header.masthead .carousel-indicators {
    position: absolute;
    bottom: -10px;
    /* Ajusta este valor para mover los indicadores más hacia abajo */
  }

  header.masthead .carousel-indicators .indicator {
    width: 8px;
    /* Tamaño de los indicadores */
    height: 8px;
    margin: 0 4px;
    /* Espacio entre los indicadores */
  }

  /* Estilo del botón primario de tamaño extra grande para móviles pequeños */
  .btn-primary.btn-xl {
    font-size: 0.8rem;
    /* Tamaño de fuente más pequeño para móviles pequeños */
    padding: 0.4rem 0.8rem;
    /* Padding más reducido para móviles pequeños */
    border-radius: 0.3rem;
    /* Borde ligeramente más pequeño */
    margin-bottom: 1rem;
    /* Margen inferior para separar el botón del contenido inferior */
  }

}