/* ======================================================
   PARTYVERSO
   Archivo: evento.css
   Página del Evento
====================================================== */


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

.evento{

    width:100%;

    max-width:700px;

    margin:60px auto 40px;

}


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

.flyer-evento{

    width:100%;

    max-width:420px;

    margin:0 auto 35px;

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:var(--radius);

    background:#111;

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

}


.flyer-evento img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*======================================================
= INFORMACIÓN
======================================================*/

.informacion-evento{

    text-align:center;

    margin-bottom:45px;

}


.informacion-evento h1{

    font-size:2.4rem;

    color:white;

    margin-bottom:18px;

}


.informacion-evento .descripcion{

    color:var(--color-secondary);

    margin-bottom:18px;

    line-height:1.7;

}


.informacion-evento .fecha{

    color:white;

    font-weight:700;

}


/*======================================================
= BLOQUES
======================================================*/

.registro,
.preventa{

    background:var(--color-card);

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

    border-radius:var(--radius);

    padding:35px;

    margin-bottom:40px;

}


.registro h2,
.preventa h2{

    text-align:center;

    margin-bottom:30px;

    color:white;

}


.preventa p{

    text-align:center;

    margin-bottom:30px;

}


/*======================================================
= FORMULARIO
======================================================*/

form{

    display:flex;

    flex-direction:column;

    gap:18px;

}


label{

    font-weight:600;

}


input[type=text]{

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#1b1b1b;

    color:white;

    font-size:1rem;

    outline:none;

    border:1px solid #333;

}


input[type=text]:focus{

    border-color:white;

}


/*======================================================
= OPCIONES
======================================================*/

.radio{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    border:1px solid #333;

    border-radius:12px;

    cursor:pointer;

    transition:var(--transition);

}


.radio:hover{

    border-color:white;

}


.radio input{

    cursor:pointer;

}


/*======================================================
= BOTONES
======================================================*/

.btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:white;

    color:#111;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

}


.btn:hover{

    transform:translateY(-3px);

    background:#ddd;

}


/*======================================================
= LINKS
======================================================*/

a.btn{

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

}