body {
    font-family: 'Arial', sans-serif;
    background-color: #ffff;
}

/* Asegúrate de que el carrusel esté centrado en todas las vistas */
.carousel-container, 
.carousel,
.slider, 
.your-carousel-class {
    width: 100vw; /* Mantén el ancho al 100% de la ventana */
    margin: 0 auto; /* Centra el carrusel */
    padding: 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Corrige el desalineado */
}

/* Cambios específicos para escritorio */
@media (min-width: 768px) {
    /* Aumenta la altura del carrusel solo en escritorio */
    .carousel,
    .carousel-inner {
        height: 600px !important; /* Ajusta el valor según lo que necesites */
    }

    /* Asegúrate de que las imágenes llenen el espacio */
    .carousel-inner img {
        height: 100% !important; /* Hace que las imágenes ocupen toda la altura */
        width: 100%; /* Mantiene el ancho completo */
        object-fit: cover; /* Ajusta la imagen sin deformarla */
    }

    /* Ajusta márgenes para evitar superposiciones en escritorio */
    #content-wrapper {
        margin-top: 20px; /* Ajusta si el contenido se solapa con el carrusel */
    }
}

/* Estilo para móviles */
@media (max-width: 767px) {
    .carousel,
    .carousel-inner {
        height: auto !important; /* Mantén la altura automática para móviles */
    }

    .carousel-inner img {
        height: auto !important; /* Ajusta la altura de las imágenes automáticamente */
        object-fit: cover; /* Asegura que la imagen mantenga sus proporciones */
    }
}

/* Elimina restricciones del contenedor padre */
.container {
    max-width: 100%;
    margin: 0 auto; /* Centra el contenedor padre */
    padding: 0;
}

/* Imágenes del carrusel */
.carousel-inner img, 
.carousel img, 
.slider img {
    width: 100%;
    height: auto; /* Mantén la proporción */
    object-fit: cover; /* Ajusta el contenido de la imagen */
}

/* Menú principal centrado */
#_desktop_top_menu {
    display: flex; /* Flexbox para centrar */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Asegura que ocupa todo el ancho disponible */
    margin: 0 auto; /* Evita desplazamientos laterales */
    padding: 10px 0; /* Espaciado superior e inferior */
    text-align: center; /* Asegura que los textos estén centrados */
}

#_desktop_top_menu ul {
    display: flex; /* Aplica flex también a la lista */
    justify-content: center; /* Centra los ítems horizontalmente */
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
    margin: 0;
    gap: 20px; /* Espaciado entre los ítems */
}

#_desktop_top_menu ul li a {
    font-weight: bold;
    text-decoration: none;
    padding: 5px 15px;
    color: #333; /* Color del texto */
}

#_desktop_top_menu ul li a:hover {
    color: #007bff; /* Color al pasar el cursor */
}

/* Contenedor principal con padding superior */
.custom-demo-blocks {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Espaciado entre los bloques */
  max-width: 1200px; /* Ancho máximo del contenedor */
  margin: 0 auto;
  flex-wrap: wrap; /* Permite que los bloques se adapten en pantallas pequeñas */
  padding-top: 20px; /* Espaciado superior */
}

/* Bloques generales */
.image-wrapper {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, background-color 0.3s ease; /* Transición suave */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
  border-radius: 8px; /* Bordes redondeados */
}

/* Bloques laterales (cuadrados) */
.image-wrapper:first-child,
.image-wrapper:last-child {
  flex: 1; /* Ajusta los bloques laterales */
  height: 200px; /* Altura fija */
}

/* Bloque central (rectangular, más ancho) */
.image-wrapper:nth-child(2) {
  flex: 2; /* Bloque central ocupa más espacio */
  height: 200px; /* Altura fija */
}

/* Imágenes dentro de los bloques */
.image-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre el contenedor sin distorsión */
}

/* Hover dinámico */
.image-wrapper:hover {
  transform: scale(1.05); /* Amplía el bloque suavemente */
}

.image-wrapper:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 50, 150, 0.5); /* Azul más oscuro con opacidad */
  pointer-events: none; /* Permite interactuar con el contenido bajo el overlay */
  z-index: 1; /* Asegura que el overlay quede sobre la imagen */
}

/* Texto superpuesto */
.text-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
  font-size: 1.2em;
  font-weight: bold;
  z-index: 2; /* Asegura que el texto esté sobre el overlay */
}

/* ======= Responsividad ======= */

/* Para pantallas menores a 768px */
@media (max-width: 768px) {
  .custom-demo-blocks {
    flex-direction: column; /* Los bloques se apilan en una columna */
    gap: 15px;
  }

  .image-wrapper {
    width: 100%; /* Cada bloque ocupa todo el ancho del contenedor */
    height: auto; /* Ajusta la altura automáticamente */
    aspect-ratio: 16 / 9; /* Asegura una proporción adecuada */
  }

  .image-wrapper img {
    width: 100%; /* Las imágenes cubren todo el ancho del bloque */
    height: 100%; /* Se ajustan sin distorsión */
    object-fit: cover; /* Mantiene las proporciones */
  }

  .text-overlay {
    font-size: 1em; /* Ajusta el texto superpuesto */
  }
}

/* Para pantallas menores a 480px */
@media (max-width: 480px) {
  .text-overlay {
    font-size: 0.9em; /* Reduce el tamaño del texto en pantallas muy pequeñas */
  }
}


/* Contenedor principal */
.info-blocks {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  flex-wrap: wrap;
}

/* Bloques individuales */
.info-block {
  flex: 1;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* Hover en los bloques */
.info-block:hover {
  transform: translateY(-5px);
}

/* Íconos */
.info-icon {
  font-size: 2.5em;
  color: #333; /* Color base del ícono */
  margin-bottom: 10px;
  transition: color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
}

/* Hover en los bloques que afecta a los íconos */
.info-block:hover .info-icon {
  color: #ffbb00; /* Cambia el color del ícono a amarillo (#ffbb00) */
  animation: swing 0.5s ease-in-out infinite alternate; /* Activa el efecto columpio */
}

/* Animación del columpio */
@keyframes swing {
  0% {
    transform: translateX(-10px); /* Desplaza el ícono a la izquierda */
  }
  100% {
    transform: translateX(10px); /* Desplaza el ícono a la derecha */
  }
}

/* Títulos */
.info-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 5px;
  color: #333;
}

/* Descripciones */
.info-description {
  font-size: 0.9em;
  color: #666;
}

/* Responsividad */
@media (max-width: 768px) {
  .info-blocks {
    flex-direction: column;
    gap: 15px;
  }

  .info-block {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .info-icon {
    font-size: 2em;
  }

  .info-title {
    font-size: 1em;
  }

  .info-description {
    font-size: 0.8em;
  }
}

/* Estilo para el banner por defecto */
a.banner {
  position: relative;
  display: block;
  overflow: hidden; /* Asegura que el overlay no se salga del contenedor */
}

/* Imagen dentro del banner */
a.banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* Suave efecto de zoom */
}

/* Efecto hover */
a.banner:hover img {
  transform: scale(1.05); /* Zoom en la imagen */
}

/* Overlay azul en el hover */
a.banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 50, 150, 0.5); /* Azul con opacidad */
  opacity: 0; /* Oculto por defecto */
  transition: opacity 0.3s ease; /* Suave transición */
  z-index: 1; /* Asegura que el overlay quede sobre la imagen */
}

/* Hover activa el overlay */
a.banner:hover::after {
  opacity: 1;
}