/**************************************************************
 *	PROGRAMADO POR: Javier Rico Motos y Sergio Santos Belmonte
 *	EMAIL: info@zuinqstudio.com
 *	WEB: http://www.zuinqstudio.com
 *	© Todos los derechos reservados
 ***************************************************************/

/* Tablets (portrait) y pantallas medianas ----------- */
@media only screen and (max-width: 1024px) {

    .home {
        flex-direction: column;
        padding: 0 20px;
    }

    .home .info {
        flex: none;
        width: 100%;
    }

    .home .formulario {
        flex: none;
        width: 100%;
    }

    .home h2 {
        font-size: 36pt;
        margin-top: 30px;
    }

    .home h3.sub {
        font-size: 22pt;
    }

    .home div.formulario fieldset {
        width: 80%;
        padding: 0;
        margin: 0 auto;
    }

    footer {
        flex-direction: column;
    }

    footer ul.datos {
        margin-top: 20px;
    }
}

/* Smartphones ----------- */
@media only screen and (max-width: 768px) {

    .mobile {
        display: block !important;
    }

    .desktop {
        display: none !important;
    }

    .home h2 {
        font-size: 26pt;
        margin-top: 30px;
        line-height: 0.8em;
    }

    .home h3 {
        font-size: 16pt;
    }

    .home h3 strong {
        font-size: 22pt;
    }

    .home h3.sub {
        font-size: 18pt;
        margin-bottom: 0.5em;
    }

    .home h1 img {
        height: 60px;
    }

    .home .formulario {
        margin-top: 20px;
    }

    .home div.formulario fieldset {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .home div.formulario fieldset label {
        padding: 0;
    }

    div.formulario fieldset div.lista-label label {
        width: 100% !important;
        float: none;
    }

    /* Pasos del flujo */
    #step-sesiones,
    #step-confirmar,
    #step-success-bono,
    #step-success-simple {
        max-width: 100%;
        padding: 20px 15px;
        border-radius: 8px;
    }

    #calendario-container {
        max-width: 100%;
    }

    #sesiones-lista {
        max-height: none;
        overflow-y: visible;
    }

    .sesion-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sesion-plazas {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .codigo-socio {
        font-size: 1.6em;
    }

    .step-desc {
        font-size: 16px;
    }

    .btn-confirmar {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .home .formulario {
        padding-bottom: 30px;
    }

    /* Modal error */
    .modal-landing .modal-landing-content {
        width: 90% !important;
        min-width: auto;
        min-height: auto;
        max-height: 90%;
        padding: 25px 20px;
    }

    .modal-landing.modal-error .modal-landing-content,
    .modal-landing.modal-aviso .modal-landing-content {
        width: 90% !important;
    }
}

/* Smartphones pequeños ----------- */
@media only screen and (max-width: 380px) {

    .home h2 {
        font-size: 20pt;
    }

    .home h3.sub {
        font-size: 15pt;
    }

    .home h3 strong {
        font-size: 18pt;
    }

    .home div.formulario fieldset label input.inputTexto,
    .home div.formulario fieldset label input.inputTexto:focus {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        padding: 0 15px;
    }

    .home .formulario .label-label {
        font-size: 15px;
    }

    .calendario-landing td.dia-disponible a {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}