/*==================================================
CAMBIO DE VEHÍCULO
TENZO COMPETICIÓN
==================================================*/


/*==================================================
PÁGINA
==================================================*/

.tenzo-cs-page{

    max-width:1280px;

    margin:55px auto;

    padding:0 30px;

}

.tenzo-cs-page h1{

    margin:0;

    text-align:center;

    font-size:58px;

    font-weight:900;

    color:#13233c;

    line-height:1.1;

}

.tenzo-cs-page>p{

    max-width:760px;

    margin:22px auto 55px;

    text-align:center;

    font-size:17px;

    line-height:1.8;

    color:#64748b;

}


/*==================================================
TARJETA
==================================================*/

.tenzo-cambio-coche-card{

    background:#ffffff;

    border-radius:24px;

    border:1px solid #edf2f7;

    box-shadow:

        0 15px 40px rgba(15,23,42,.08);

    overflow:hidden;

    margin-bottom:45px;

}


/*==================================================
LAYOUT PRINCIPAL
==================================================*/

.tenzo-cambio-layout{

    display:grid;

    grid-template-columns:380px 640px;

    gap:38px;

    align-items:start;

}

/*==================================================
COLUMNAS
==================================================*/

.tenzo-cambio-left{

    padding:40px;

}

.tenzo-cambio-right{

    padding:20px;

}


/*==================================================
IMAGEN EVENTO
==================================================*/

.tenzo-evento-cover{

    display:flex;

    justify-content:center;

    margin-bottom:34px;

}

.tenzo-evento-cover img{

    width:100%;

    max-width:330px;

    height:auto;

    display:block;

}


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

.tenzo-evento-info{

    text-align:center;

}

.tenzo-evento-info h2{

    margin:18px 0 10px;

    font-size:28px;

    font-weight:800;

    line-height:1.2;

    color:#13233c;

}

/*==================================================
CAMPEONATO
==================================================*/

.tenzo-campeonato{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:18px;

    margin-bottom:34px;

    padding:10px 20px;

    border-radius:999px;

    background:#dca900;

    color:#111827;

    font-size:13px;

    font-weight:700;

    line-height:1;

}

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

.tenzo-info-grid{

    display:flex;

    flex-direction:column;

    gap:8px;

}

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

.tenzo-info-box{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    min-height:32px;

    padding:8px 12px;

    background:#ffffff;

    border:1px solid #e9eef5;

    border-radius:8px;

    transition:.20s;

}

.tenzo-info-box:hover{

    border-color:#d4dce8;

    box-shadow:
        0 6px 18px rgba(15,23,42,.05);

}


/*==================================================
TÍTULO
==================================================*/

.tenzo-info-box span{

    display:block;

    margin-bottom:2px;

    font-size:10px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    color:#94a3b8;

}


/*==================================================
VALOR
==================================================*/

.tenzo-info-box strong{

    display:block;

    font-size:18px;

    font-weight:700;

    line-height:1.8;

    color:#13233c;

    word-break:break-word;

}


/*==================================================
SEPARACIÓN CON FORMULARIO
==================================================*/

.tenzo-cambio-right{

    display:flex;
    
    position:relative;
    top:165px;

    flex-direction:column;

    justify-content:flex-start;

}


/*==================================================
TÍTULO FORMULARIO
==================================================*/

.tenzo-cambio-right h3{

    margin:0 0 10px;

    font-size:28px;

    font-weight:800;

    color:#13233c;

}

.tenzo-cambio-right p{

    margin:0 0 28px;

    font-size:15px;

    line-height:1.7;

    color:#64748b;

}


/*==================================================
RESPONSIVE GRID
==================================================*/

@media (max-width:900px){

    .tenzo-info-grid{

        grid-template-columns:1fr;

    }

}

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

.tenzo-cambio-right form{

    display:flex;

    flex-direction:column;

    height:100%;

}

.tenzo-cambio-right label{

    display:block;

    margin:0 0 10px;

    font-size:14px;

    font-weight:700;

    color:#13233c;

}

.tenzo-cambio-right select,

.tenzo-cambio-right textarea{

    width:100%;

    border:1px solid #d8e2ef;

    border-radius:12px;

    background:#ffffff;

    padding:15px 16px;

    font-size:15px;

    color:#13233c;

    transition:.20s;

    box-sizing:border-box;

}

.tenzo-cambio-right select{

    margin-bottom:28px;

}

.tenzo-cambio-right textarea{

    height:150px;

    min-height:150px;

    max-height:150px;

    resize:none;

    margin-bottom:26px;

}

.tenzo-cambio-right select:focus,

.tenzo-cambio-right textarea:focus{

    outline:none;

    border-color:#ff7a00;

    box-shadow:
    0 0 0 4px rgba(255,122,0,.12);

}


/*==================================================
COSTE
==================================================*/

.tenzo-coste{

    margin-bottom:28px;

    font-size:16px;

    color:#334155;

    line-height:1.6;

}

.tenzo-coste strong{

    color:#ff7a00;

}


/*==================================================
BOTÓN
==================================================*/

.tenzo-cambio-right button{

    width:100%;

    height:56px;

    border:none;

    border-radius:12px;

    background:#111827;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.tenzo-cambio-right button:hover{

    background:#0F3A66;

}

.tenzo-cambio-right button:active{

    transform:scale(.98);

}


/*==================================================
MENSAJE ÉXITO
==================================================*/

.tenzo-success{

    margin-bottom:40px;

    padding:24px 28px;

    background:#ecfdf5;

    border:1px solid #86efac;

    border-radius:16px;

}

.tenzo-success h3{

    margin:0 0 8px;

    color:#166534;

}

.tenzo-success p{

    margin:0;

    line-height:1.7;

    color:#166534;

}


/*==================================================
SIN INSCRIPCIONES
==================================================*/

.tenzo-cambio-vacio{

    padding:70px 40px;

    text-align:center;

}

.tenzo-cambio-vacio h2{

    margin-bottom:12px;

    color:#13233c;

}

.tenzo-cambio-vacio p{

    max-width:600px;

    margin:auto;

    color:#64748b;

    line-height:1.8;

}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1100px){

    .tenzo-cambio-layout{

        grid-template-columns:1fr;

    }

    .tenzo-cambio-left{

        padding-bottom:0;

    }

    .tenzo-cambio-right{

        padding-top:10px;

    }

}

@media (max-width:768px){

    .tenzo-cs-page{

        padding:0 18px;

    }

    .tenzo-cs-page h1{

        font-size:40px;

    }

    .tenzo-cambio-left,

    .tenzo-cambio-right{

        padding:25px;

    }

    .tenzo-evento-info h2{

        font-size:38px;

    }

    .tenzo-evento-cover img{

        max-width:100%;

    }

}