/* ======================================================
   PARTYVERSO
   Archivo: home.css
   Página Principal
====================================================== */


/*======================================================
= CONTENEDOR PRINCIPAL HOME
======================================================*/

.home{

    width:100%;

}


/*======================================================
= HERO
======================================================*/

.hero{

    text-align:center;

    padding:70px 0 50px;

}


.hero h1{

    font-size:4rem;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--color-primary);

    margin-bottom:15px;

}


.hero p{

    max-width:550px;

    margin:auto;

    font-size:1.1rem;

    color:var(--color-secondary);

}


/*======================================================
= TITULO DE SECCIÓN
======================================================*/

.titulo-seccion{

    text-align:center;

    margin-bottom:45px;

}


.titulo-seccion h2{

    text-transform:uppercase;

    letter-spacing:2px;

}


/*======================================================
= LISTA DE EVENTOS
======================================================*/

.lista-eventos{

    display:flex;

    flex-direction:column;

    gap:45px;

    width:100%;

}


/*======================================================
= CARD EVENTO
======================================================*/

.card-evento{

    width:100%;

    background:var(--color-card);

    border-radius:var(--radius);

    overflow:hidden;

    border:1px solid var(--color-border);

    box-shadow:
    0 20px 50px rgba(0,0,0,.45);

    transition:var(--transition);

}


.card-evento:hover{

    transform:translateY(-5px);

}


/*======================================================
= FLYER
======================================================*/

.flyer{

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

    background:#111;

}


.flyer img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.5s ease;

}


.card-evento:hover .flyer img{

    transform:scale(1.03);

}


/*======================================================
= CONTENIDO EVENTO
======================================================*/

.contenido-evento{

    padding:30px;

    text-align:center;

}


.contenido-evento h3{

    color:white;

    font-size:1.7rem;

    letter-spacing:1px;

    margin-bottom:15px;

}


.descripcion{

    min-height:55px;

    margin-bottom:15px;

    font-size:1rem;

}


.fecha{

    color:white;

    font-weight:600;

    margin-bottom:25px;

}


/*======================================================
= BOTON EVENTO
======================================================*/

.btn-evento{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    background:white;

    color:#111;

    padding:14px 35px;

    border-radius:12px;

    font-weight:800;

    letter-spacing:1px;

    transition:var(--transition);

}


.btn-evento:hover{

    background:#ddd;

    transform:translateY(-3px);

}


/*======================================================
= SIN EVENTOS
======================================================*/

.sin-eventos{

    background:var(--color-card);

    border-radius:var(--radius);

    padding:50px 30px;

    text-align:center;

    border:1px solid var(--color-border);

}


.sin-eventos h3{

    margin-bottom:10px;

}


/*======================================================
= EFECTO DE ENTRADA
======================================================*/

.card-evento{

    animation:

    aparecer .6s ease forwards;

}


@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(25px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}