/* Estilos para las tarjetas */
.card {
    width: 100%; /* Hace que la tarjeta ocupe el ancho completo del contenedor */
    max-width: 400px; /* Ancho máximo de la tarjeta */
    margin: 0 auto; /* Centra la tarjeta horizontalmente */
    z-index: -1;
}

/* Ajusta el margen derecho e izquierdo para las columnas */
.card-container {
    padding-left: 15px; /* Ajusta el espaciado en el contenedor */
    padding-right: 15px; /* Ajusta el espaciado en el contenedor */
}

.card-container .col-md-4 {
    margin-bottom: 40px; /* Espacio entre las tarjetas */
}

/* Si hay un contenedor externo que afecta el espaciado */
.container {
    padding-left: 15px; /* Ajusta el espaciado en el contenedor principal */
    padding-right: 15px; /* Ajusta el espaciado en el contenedor principal */
}
#Titulo {
    position: relative;
    text-align: center;
    margin-top: 0px; /* Ajusta el margen superior según sea necesario */
    margin-bottom: 20px; /* Ajusta el margen inferior según sea necesario */
    color: rgb(152, 147, 147); /* Color del texto */
    font-family: "Dancing Script", sans-serif; /* Familia de fuente */
    font-size: 3rem; /* Tamaño de la fuente */
    text-shadow: 2px 2px 3px rgba(7, 7, 7, 0.4); /* Sombra de texto */
    z-index: 2
}

#Titulo h2 {
    margin: 0; /* Elimina el margen predeterminado del encabezado */
    padding: 0; /* Elimina el relleno predeterminado del encabezado */
    z-index: -1
}

/* Estilo para el texto de la descripción */
.carousel-caption {
    position: absolute;
    bottom: 0px; /* Espaciado desde el fondo para que el texto no esté directamente en la parte inferior */
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejorar la legibilidad del texto */
    color: #fff; /* Color del texto */
    text-align: center; /* Centra el texto */
    padding: 0px; /* Espaciado alrededor del texto */
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
    margin: 0; /* Elimina el margen */
    z-index: 2; /* Asegura que el texto esté encima de la imagen */
}

/* Ajusta el tamaño de la imagen del carrusel */
.carousel-item img {
    width: 100%;
    height: auto; /* Mantén la proporción original de la imagen */
    max-height: 100%; /* Limita la altura máxima de la imagen */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
}
/* Media queries */


@media only screen and (max-width: 450px) {
    .lugar {
        flex-basis: calc(25% - 10px);
    }
}

/* Ajustar el tamaño del contenedor */
.container2 {
    width: 666px; /* Ancho deseado del contenedor */
    height: 640px; /* Alto deseado del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    display: flex; /* Utiliza Flexbox para alinear el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    position: relative; /* Para posicionar la imagen de manera absoluta */
}



.carousel {
    position: relative;
    width: 100%;
    height: 500px; /* Ajusta según el tamaño deseado */
    overflow: hidden; /* Oculta contenido que se desborde */
  }
  
  .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cambiado de contain a cover */
}



@media only screen and (max-width: 850px) {
    
    .carousel {
        height: 300px; /* Ajusta la altura del carrusel en pantallas pequeñas */
    }

    .container2 {
        width: 100%;
        height: auto; /* Ajusta la altura automáticamente */
        margin: 0 auto; /* Centra el contenedor horizontalmente */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    nav ul {
        flex-direction: column; /* Cambia la dirección de los elementos en pantallas pequeñas */
        margin: 0; /* Elimina los márgenes */
        padding: 0; /* Elimina el padding */
    }

    nav ul li {
        margin-bottom: 10px; /* Agrega margen inferior entre elementos */
    }

    .btn-nav {
        display: block; /* Asegura que el botón de navegación sea visible en pantallas pequeñas */
    }
}

@media only screen and (max-width: 600px) {
    .carousel {
        height: 250px; /* Ajusta la altura del carrusel en pantallas más pequeñas */
    }

    .carousel-item img {
        object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsión */
    }
}

@media only screen and (max-width: 450px) {
    .barra-superior {
        font-size: 12px; /* Reduce el tamaño de fuente para pantallas muy pequeñas */
    }

    .contacto-redes a {
        font-size: 14px; /* Ajusta el tamaño de fuente para enlaces de contacto y redes */
    }

    .banner_content {
        font-size: 18px; /* Reduce el tamaño de fuente del contenido del banner */
    }

    .button {
        font-size: 1.5rem; /* Ajusta el tamaño de fuente de los botones */
        padding: 10px; /* Ajusta el padding de los botones */
    }

    .bodyRegistrarse .main .seccionRegistrarse {
        width: 90%; /* Ajusta el ancho del formulario de registro */
        padding: 20px; /* Ajusta el padding del formulario de registro */
    }
}