@charset "utf-8";
/* CSS Document */

/*=====================================
AGENDAR CITA
=====================================*/

.project-booking-section{

    width:100%;

    padding:90px 0;

    background:linear-gradient(
        180deg,
        #f7f9fc 0%,
        #ffffff 100%
    );

    overflow:hidden;

}

.project-booking-section .container{

    max-width:1200px;

    margin:0 auto;

    padding:0 20px;

}



/*=====================================
CABECERA
=====================================*/

.booking-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.booking-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(108,77,246,.12);

    color:#6c4df6;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.booking-title{

    margin:0;

    font-size:42px;

    font-weight:800;

    color:#1e2432;

    line-height:1.2;

}

.booking-description{

    margin:22px auto 0;

    max-width:680px;

    color:#667085;

    font-size:17px;

    line-height:1.8;

}



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

.booking-wrapper{

    background:#ffffff;

    border-radius:28px;

    padding:45px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 20px 60px rgba(0,0,0,.08);

}



/*=====================================
PASOS
=====================================*/

.booking-steps{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-bottom:45px;

}

.booking-steps .step{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    opacity:.45;

    transition:.35s;

}

.booking-steps .step span{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eceff5;

    color:#667085;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.booking-steps .step small{

    color:#667085;

    font-size:14px;

    font-weight:600;

}

.booking-steps .step.active{

    opacity:1;

}

.booking-steps .step.active span{

    background:#6c4df6;

    color:#fff;

    box-shadow:0 10px 25px rgba(108,77,246,.30);

}

.booking-steps .step.completed{

    opacity:1;

}

.booking-steps .step.completed span{

    background:#22c55e;

    color:#fff;

}



/*=====================================
SECCIONES
=====================================*/

.booking-section{

    margin-bottom:40px;

    padding:35px;

    background:#ffffff;

    border:1px solid #edf0f5;

    border-radius:22px;

    transition:.35s;

}

.booking-section:hover{

    border-color:rgba(108,77,246,.25);

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.booking-section-title{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:30px;

}

.booking-section-title i{

    width:55px;

    height:55px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #6c4df6,
        #8b6cff
    );

    color:#fff;

    font-size:20px;

    flex-shrink:0;

}

.booking-section-title h3{

    margin:0;

    color:#1f2937;

    font-size:24px;

    font-weight:700;

}



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

.booking-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

}

.booking-grid-2{

    grid-template-columns:repeat(2,minmax(0,1fr));

}



/*=====================================
CAMPOS
=====================================*/

.booking-field{

    display:flex;

    flex-direction:column;

}

.booking-field label{

    margin-bottom:10px;

    color:#374151;

    font-size:15px;

    font-weight:600;

}

.booking-field label span{

    color:#ef4444;

}



/*=====================================
INPUTS
=====================================*/

.booking-control{

    width:100%;

    height:58px;

    padding:0 18px;

    border:1px solid #d7dce4;

    border-radius:14px;

    background:#fff;

    color:#1f2937;

    font-size:15px;

    outline:none;

    transition:.30s;

    box-sizing:border-box;

}

.booking-control:focus{

    border-color:#6c4df6;

    box-shadow:0 0 0 4px rgba(108,77,246,.12);

}

.booking-control:disabled{

    background:#f5f7fb;

    color:#9ca3af;

    cursor:not-allowed;

}



/*=====================================
SELECT
=====================================*/

select.booking-control{

    cursor:pointer;

}



/*=====================================
TEXTAREA
=====================================*/

textarea.booking-control{

    height:150px;

    padding:16px 18px;

    resize:vertical;

    line-height:1.7;

}



/*=====================================
PLACEHOLDER
=====================================*/

.booking-control::placeholder{

    color:#98a2b3;

}



/*=====================================
HORARIOS
=====================================*/

.booking-hours{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));

    gap:18px;

    min-height:120px;

}

.hour-item{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:20px 15px;

    border:2px solid #e8edf5;

    border-radius:18px;

    background:#fff;

    cursor:pointer;

    transition:.35s;

    font-size:15px;

    font-weight:700;

    color:#374151;

}

.hour-item i{

    font-size:22px;

    color:#6c4df6;

}

.hour-item:hover{

    transform:translateY(-5px);

    border-color:#6c4df6;

    box-shadow:0 15px 35px rgba(108,77,246,.18);

}

.hour-item.active{

    background:linear-gradient(
        135deg,
        #6c4df6,
        #8b6cff
    );

    border-color:#6c4df6;

    color:#fff;

    box-shadow:0 18px 40px rgba(108,77,246,.30);

}

.hour-item.active i{

    color:#fff;

}



/*=====================================
SIN HORARIOS
=====================================*/

.booking-hours-empty{

    grid-column:1/-1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:50px 30px;

    border:2px dashed #d8dce5;

    border-radius:22px;

    background:#fafbfd;

}

.booking-hours-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f2f4fa;

    margin-bottom:20px;

}

.booking-hours-icon i{

    font-size:34px;

    color:#6c4df6;

}

.booking-hours-empty h4{

    margin:0 0 12px;

    color:#1f2937;

    font-size:24px;

}

.booking-hours-empty p{

    margin:0;

    max-width:450px;

    color:#6b7280;

    line-height:1.8;

}



/*=====================================
CLIENTE
=====================================*/

.booking-client-info{

    margin-bottom:25px;

    padding:18px 22px;

    border-radius:14px;

    background:#ecfdf3;

    border:1px solid #bbf7d0;

    color:#166534;

    font-weight:600;

}

.booking-client-actions{

    display:flex;

    justify-content:flex-end;

    margin-bottom:25px;

}

.booking-change-client{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border:none;

    border-radius:50px;

    background:#f3f4f6;

    color:#374151;

    cursor:pointer;

    transition:.30s;

    font-weight:600;

}

.booking-change-client:hover{

    background:#6c4df6;

    color:#fff;

}



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

.booking-footer{

    margin-top:45px;

    display:flex;

    justify-content:center;

}

.booking-submit{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 42px;

    border:none;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        #6c4df6,
        #8b6cff
    );

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 18px 40px rgba(108,77,246,.28);

    position:relative;

    overflow:hidden;

}

.booking-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.30);

    transform:skewX(-25deg);

    transition:.7s;

}

.booking-submit:hover::before{

    left:150%;

}

.booking-submit:hover{

    transform:translateY(-5px);

}

.booking-submit:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;

}



/*=====================================
MENSAJES
=====================================*/

.global-msg{


    display:none;

    margin-bottom:35px;

    padding:18px 22px;

    border-radius:16px;

    font-weight:600;

}

.global-msg.success{

    background:#ecfdf3;

    color:#166534;

    border:1px solid #bbf7d0;

}

.global-msg.error{

    background:#fef2f2;

    color:#991b1b;

    border:1px solid #fecaca;

}



/*=====================================
ANIMACIONES
=====================================*/

.booking-section{

    animation:bookingFade .6s ease both;

}

.booking-section:nth-child(2){

    animation-delay:.10s;

}

.booking-section:nth-child(3){

    animation-delay:.20s;

}

.booking-section:nth-child(4){

    animation-delay:.30s;

}

.booking-footer{

    animation:bookingFade .8s ease both;

    animation-delay:.40s;

}

@keyframes bookingFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*=====================================
SCROLLBAR HORARIOS
=====================================*/

.booking-hours::-webkit-scrollbar{

    width:8px;

    height:8px;

}

.booking-hours::-webkit-scrollbar-thumb{

    background:#d8dce5;

    border-radius:20px;

}

.booking-hours::-webkit-scrollbar-track{

    background:#f4f6f9;

}



/*=====================================
TABLET
=====================================*/

@media(max-width:992px){

    .project-booking-section{

        padding:70px 0;

    }

    .booking-wrapper{

        padding:35px;

    }

    .booking-title{

        font-size:34px;

    }

    .booking-grid-2{

        grid-template-columns:1fr;

    }

    .booking-steps{

        gap:10px;

    }

    .booking-steps .step span{

        width:45px;

        height:45px;

    }

    .booking-steps .step small{

        font-size:13px;

    }

}



/*=====================================
MÓVIL
=====================================*/

@media(max-width:768px){

    .project-booking-section{

        padding:60px 0;

    }

    .booking-header{

        margin-bottom:40px;

    }

    .booking-title{

        font-size:28px;

    }

    .booking-description{

        font-size:15px;

    }

    .booking-wrapper{

        padding:25px;

        border-radius:20px;

    }

    .booking-section{

        padding:25px;

    }

    .booking-section-title{

        flex-direction:column;

        text-align:center;

        gap:15px;

    }

    .booking-section-title h3{

        font-size:22px;

    }

    .booking-hours{

        grid-template-columns:repeat(2,1fr);

    }

    .booking-footer{

        margin-top:30px;

    }

    .booking-submit{

        width:100%;

        justify-content:center;

    }

}



/*=====================================
MÓVILES PEQUEÑOS
=====================================*/

@media(max-width:480px){

    .project-booking-section .container{

        padding:0 15px;

    }

    .booking-wrapper{

        padding:18px;

    }

    .booking-section{

        padding:18px;

    }

    .booking-title{

        font-size:24px;

    }

    .booking-badge{

        font-size:12px;

        padding:8px 18px;

    }

    .booking-hours{

        grid-template-columns:1fr;

    }

    .booking-control{

        height:54px;

        font-size:14px;

    }

    textarea.booking-control{

        height:130px;

    }

    .booking-submit{

        padding:16px 20px;

        font-size:16px;

    }

}



/*=====================================
FOCUS ACCESIBILIDAD
=====================================*/

.booking-submit:focus,

.booking-change-client:focus,

.hour-item:focus,

.booking-control:focus{

    outline:none;

}



/*=====================================
TRANSICIONES
=====================================*/

.booking-wrapper *{

    transition:

        color .25s,

        background .25s,

        border-color .25s,

        box-shadow .25s,

        transform .25s;

}