/* Contenedor de las tarjetas */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espaciado entre tarjetas */
    padding: 40px 20px;
    flex-wrap: wrap;
}

/* Tarjetas más grandes con mejor diseño */
.card {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    width: 100%;
    max-width: 600px; /* Más grandes */
    height: 400px; /* Altura más grande */
}

/* Imagen de la tarjeta */
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Efecto de hover en la tarjeta */
.card:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.card:hover img {
    transform: scale(1.12); /* Zoom en la imagen */
}

/* Overlay con efecto degradado */
.card-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 30px;
    color: white;
    text-align: center;
    opacity: 1;
}

/* Títulos dentro de las tarjetas */
.card-overlay h3 {
    margin-bottom: 10px; /* Espacio entre el título y el botón */
    visibility: visible; /* El texto siempre será visible */
    font-size: 48px;
    font-weight: 400;
    margin-left: 10px;
    text-align: center; /* Centra el texto horizontalmente */
    margin-top: 5px;   /* Puedes mover el texto hacia abajo ajustando este valor */
    z-index: 2; /* El texto siempre está por encima del botón */
}

/* Botón oculto por defecto */
.card-overlay button {
    padding: 12px 24px;
    font-size: 18px;
    background: transparent;
    border: 1px solid white;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    margin-top: 15px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* Efecto cuando se pasa el cursor */
.card:hover .card-overlay button {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.card-overlay button:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* -------------------- */
/* Diseño Responsivo */
/* -------------------- */

/* Tablets */
@media (max-width: 1024px) {
    .cards-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        max-width: 90%;
        height: 500px;
    }

    .card-overlay h3 {
        font-size: 24px;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .card {
        max-width: 100%;
        height: 450px;
    }

    .card-overlay h3 {
        font-size: 22px;
    }

    .card-overlay button {
        font-size: 16px;
        padding: 10px 20px;
    }
}

/* Fin de código cards hoteles eventos */



/*Estilos Eventos*/
/*Portada*/

/* Contenedor principal con imagen de fondo animada */
.container-portada {
    width: 100%;
    height: 450px;
    position: relative;
    background-image: url(../items/images/hoteles/tulum/galeria/hotel\ tren\ maya\ tulum.jpg);
    background-size: 200%;
    background-repeat: no-repeat;
    animation: movimiento 20s infinite linear alternate;
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
}
.container-portada2 {
    width: 100%;
    height: 450px;
    position: relative;
    background-image: url(../items/images/hoteles/aeropuerto/hotel\ aeropuerto\ tulum.jpg);
    background-size: 200%;
    background-repeat: no-repeat;
    animation: movimiento 20s infinite linear alternate;
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
}
.container-portada1 {
    width: 100%;
    height: 450px;
    position: relative;
    background-image: url(../items/images/hoteles/h2-tulum.jpg);
    background-size: 200%;
    background-repeat: no-repeat;
    animation: movimiento 20s infinite linear alternate;
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
}

/* Animación del fondo */
@keyframes movimiento {
    from {
        background-position: bottom left;
    }
    to {
        background-position: top right;
    }
}

/* Capa de gradiente para mejorar visibilidad */
.capa-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    background: -webkit-linear-gradient(left, black, #90c6c7);
    opacity: 0.5;
}

/* Contenedor de los detalles */
.container-details {
    width: 100%;
    max-width: 1200px;
    position: relative;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
}

/* Asegurar que el contenido está centrado */
.details {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente */
    text-align: center;
    color: white;
    z-index: 2;
    width: 90%;
    max-width: 600px;
    position: relative;
}

/* Estilos del título */
.details h1 {
    font-size: 60px;
    font-weight: 200;
    text-align: center;
    margin: 0;
}

/* Estilos del párrafo */
.details p {
    font-size: 24px;
    font-weight: 200;
    text-align: center;
    margin-top: 10px;
}

/* Botón centrado */
.details button {
    padding: 12px 24px;
    font-size: 18px;
    background: transparent;
    border: 2px solid white;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
    border-radius: 5px;
}

/* Efecto hover en el botón */
.details button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* --------------------- */
/* Media Queries para Responsividad */
/* --------------------- */

/* Para pantallas de hasta 768px (tablets y móviles en horizontal) */
@media screen and (max-width: 768px) {
    .details h1 {
        font-size: 40px;
    }
    .details p {
        font-size: 20px;
    }
    .details button {
        font-size: 16px;
        padding: 10px 20px;
    }
}

/* Para pantallas de hasta 480px (móviles pequeños) */
@media screen and (max-width: 480px) {
    .details h1 {
        font-size: 30px;
    }
    .details p {
        font-size: 18px;
    }
    .details button {
        font-size: 14px;
        padding: 8px 16px;
    }
}



/*Articulo*/

main{
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

article{
    width: 100%;
    max-width: 800px;
    margin-top: 20px;
    padding-right: 20px;
}

article h1{
    font-size: 40px;
    font-weight: 100;
    margin-left: 10px;
}

article hr{
    max-width: 500px;
    height: 4px;
    border-style: none;
    background: -webkit-linear-gradient(left, black, #0672d0);
    margin-top: 10px;
    margin-left: 10px;
}

article p{
    font-size: 20px;
    margin-top: 20px;
    font-weight: 100;
    margin-left: 10px;
}



@media screen and (max-width: 500px){
    .details p{
        font-size: 18px;
    }
}

/*Código de proximos eventos*/
 
/* Estilos para la sección de eventos */
.event-info {
    background-image: 
        url("../items/images/assets/PORTADAS\ dios\ del\ maiz.svg"), 
        url("../items/images/assets/PORTADAS\ dios\ del\ maiz.svg"),  
        url("../items/images/assets/PORTADAS\ dios\ del\ maiz.svg"),
        url("../items/images/assets/PORTADAS\ dios\ del\ maiz.svg"),
        url("../items/images/assets/PORTADAS\ dios\ del\ maiz.svg");  
    background-size: 30%, 30%, 20%, 30%, 30%;
    background-repeat: no-repeat, no-repeat, no-repeat; /* No repetimos ninguna imagen */
    background-position: 
    top left,            /* Primer imagen: Arriba a la izquierda */
    bottom right,        /* Segunda imagen: Abajo a la derecha */
    center,              /* Tercera imagen: Centro */
    top right,           /* Cuarta imagen: Arriba a la derecha */
    bottom left;        /* Segunda imagen: Abajo a la derecha */
    padding: 30px; /* Aumenta el padding */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
    overflow: hidden; /* Para contener la imagen */
}

/* Resto de tu código */
.event-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten */
    gap: 30px; /* Espacio entre imagen y detalles */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
}

.event-image {
    flex: 1 1 300px; /* La imagen ocupa al menos 300px de ancho */
    overflow: hidden; /* Recorta la imagen si es necesario */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.event-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease; /* Transición para el hover */
}

.event-image:hover img {
    transform: scale(1.05); /* Ligero zoom al pasar el mouse */
}


.event-details {
    flex: 1 1 400px; /* Los detalles ocupan al menos 400px de ancho */
}

.event-details h2 {
    color: rgb(33 83 83); /* Color del título */
    margin-bottom: 10px;
    text-align: center;
}
.event-details h4 {
    color: rgb(33 83 83); /* Color del título */
    margin-bottom: 10px;
    text-align: center;
}

.event-date, .event-location, .event-price {
    color: #556864; /* Color de la información */
    margin-bottom: 10px;
}

.event-date i, .event-location i, .event-price i {
    margin-right: 5px;
}

.menu-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.menu-column {
    flex: 1 1 200px; /* Cada columna del menú ocupa al menos 200px */
}

.menu-column h3 {
    color: rgb(33 83 83); /* Color de los subtítulos del menú */
    margin-bottom: 20px;
    font-weight: 400;
    text-align: center;
}

.menu-column ul {
    list-style: none;
    padding-left: 0;
    text-align:left ;
}

.menu-column h3{
    text-align:left ;
    line-height: 1; /* Ajusta el interlineado aquí */
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.bg-\[\#215353\] {
    --tw-bg-opacity: 1;
    background-color: rgb(33 83 83 / var(--tw-bg-opacity));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}
.font-light {
    font-weight: 300;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.font-serif {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-center {
    text-align: center;
}
.font-semibold {
    font-weight: 600;
}
.text-2xl {
    font-size: 1.1rem;
    line-height: 2rem;
}
.my-2\.5 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}


.menu-column li {
    margin-bottom: 0px;
}

.btn-danger { /* Estilos para el botón (puedes ajustarlos) */
    background-color: rgb(33 83 83);
    border-color: rgb(33 83 83);
}

/* Responsive design (ajustes para pantallas más pequeñas) */
@media (max-width: 768px) {
    .event-container {
        flex-direction: column; /* Los elementos se apilan verticalmente */
        align-items: center;
    }

    .event-image {
        flex: 1 1 100%; /* La imagen ocupa todo el ancho */
    }

    .menu-columns {
        flex-direction: column; /* Las columnas del menú se apilan */
    }
}


/*Fin de codigo de Información de eventos*/