/* 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(136, 135, 113); /* 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: 10px; /* 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: 10px; /* 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: 850px) {
    nav {
        flex-direction: column-reverse; /* Cambia a disposición de columna */
    }

    .marca {
        order: 1; /* Mueve la marca al principio de la columna */
        margin-bottom: 10px; /* Espaciado entre la marca y los elementos de navegación */
    }

    ul {
        order: 2; /* Mueve la lista de navegación después de la marca */
    }
   
    .lugar {
        flex-basis: calc(50% - 10px);
    }

    nav ul li:not(:last-child) {
        margin-right: 0px; /* Reducir el espacio entre elementos de la lista */
    }
}

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

/* Ajustar el tamaño del contenedor */
.container2 {
    width: 346px; /* Ancho deseado del contenedor */
    height: 432px; /* 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 queries */
@media only screen and (max-width: 850px) {
   
   
   

    /* Contenedor del carrusel */
    .carousel {
        height: 450px; /* Ajusta la altura del carrusel en pantallas pequeñas */
    }

    

    /* Título */
    #Titulo {
        font-size: 2rem; /* Reduce el tamaño de la fuente en pantallas pequeñas */
    }

    /* Ajuste de los elementos de navegación */
    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: 450px; /* Ajusta la altura del carrusel en pantallas pequeñas */
    }
}

@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 */
    }
}