/* css/styles.css - V2 */

/* ==========================
RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

:root{

    /* Colores principales */

    --primary:#1E3A8A;
    --secondary:#2563EB;
    --light:#93C5FD;

    /* Color de acento */

    --accent:#16A34A;

    /* Fondos */

    --bg:#F8FAFC;
    --white:#FFFFFF;

    /* Texto */

    --text:#0F172A;
    --text-light:#64748B;

}

body{

    font-family:'Poppins',sans-serif;

    background:
    linear-gradient(
        180deg,
        #F8FAFC 0%,
        #F5F7FA 100%
    );

    color:var(--text);

    min-height:100vh;

}



/* ==========================
SPINNER
========================== */

#loader{

    position:fixed;

    inset:0;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.4s;

}

.spinner{

    width:60px;

    height:60px;

    border:5px solid #E5E7EB;

    border-top:5px solid var(--secondary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



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

.app-container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.phone-container{

    width:100%;

    max-width:420px;

}



/* ==========================
BARRA DE PROGRESO
========================== */

.progress-wrapper{

    margin-bottom:24px;

}

.progress-bar{

    height:8px;

    background:#E5E7EB;

    border-radius:999px;

    overflow:hidden;

}

.progress-fill{

    width:16.66%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--light)
    );

    border-radius:999px;

    transition:.5s;

}



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

.step{

    display:none;

}

.step.active{

    display:block;

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ==========================
TARJETAS
========================== */

.fade-up,
.welcome-card{

    background:white;

    border-radius:24px;

    box-shadow:
    0 10px 35px rgba(15,61,145,.06);

}

.fade-up{

    padding:34px;

}

.welcome-card{

    padding:45px 35px;

    text-align:center;

}



/* ==========================
WELCOME
========================== */

.welcome-icon{

    width:90px;

    height:90px;

    border-radius:30px;

    margin:auto;

    margin-bottom:28px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    display:flex;

    justify-content:center;

    align-items:center;

}

.welcome-icon svg{

    width:40px;

    height:40px;

    color:white;

}

.welcome-title{

    font-size:32px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:20px;

}

.welcome-text{

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:25px;

}



/* ==========================
INDICADOR TIEMPO
========================== */

.time-badge{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:var(--text-light);

    margin-bottom:30px;

    font-size:14px;

}

.time-badge svg{

    width:18px;

    height:18px;

}



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

.welcome-button,
.submit-button{

    width:100%;

    border:none;

    cursor:pointer;

    padding:18px;

    border-radius:20px;

    color:white;

    font-size:16px;

    font-weight:600;

    transition:.3s;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

.welcome-button:hover,
.submit-button:hover{

    transform:translateY(-2px);

    box-shadow:
    0 15px 35px rgba(15,61,145,.18);

}



/* ==========================
CONFIANZA
========================== */

.trust-block{

    margin-top:30px;

}

.trust-block p{

    color:var(--text-light);

    font-size:14px;

    line-height:1.8;

}

.trust-block strong{

    color:var(--primary);

}



/* ==========================
AVATARES
========================== */

.avatars{

    display:flex;

    justify-content:center;

    margin-bottom:15px;

}

.avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    border:3px solid white;

    background:
    linear-gradient(
        135deg,
        #1976FF,
        #42A5FF
    );

}

.avatar:nth-child(2){

    margin-left:-10px;

}

.avatar:nth-child(3){

    margin-left:-10px;

}



/* ==========================
TÍTULOS
========================== */

.title{

    font-size:30px;

    font-weight:700;

    margin-bottom:12px;

}

.subtitle{

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:30px;

}



/* ==========================
BOTÓN ATRÁS
========================== */

.back-container{

    margin-bottom:20px;

}

.back-button{

    width:46px;

    height:46px;

    border:none;

    background:#F8FAFC;

    border-radius:16px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.back-button:hover{

    transform:translateY(-2px);

}

.back-button svg{

    width:20px;

    height:20px;

}



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

.card-grid-one{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.option-card{

    background:white;

    border:1px solid #E2E8F0;

    border-radius:24px;

    padding:28px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

}

.option-card:hover{

    transform:translateY(-3px);

}

.option-card.selected{

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

}

.option-card svg{

    width:34px;

    height:34px;

    margin:auto auto 15px;

}



/* ==========================
INMUEBLES
========================== */

.property-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

}

.property-card{

    background:white;

    border:1px solid #E2E8F0;

    border-radius:24px;

    padding:24px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

}

.property-card.selected{

    color:white;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

.property-card svg{

    width:28px;

    height:28px;

    margin:auto auto 14px;

}



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

.input-group{

    margin-bottom:20px;

}

.input-icon{

    display:flex;

    align-items:center;

    gap:14px;

    border:1px solid #E2E8F0;

    padding:18px;

    border-radius:20px;

}

.input-icon input{

    width:100%;

    border:none;

    outline:none;

    background:none;

    font-family:'Poppins',sans-serif;

}



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

@media(max-width:480px){

    .fade-up{

        padding:28px;

    }

    .welcome-card{

        padding:35px 28px;

    }

    .welcome-title{

        font-size:28px;

    }

    .title{

        font-size:25px;

    }

}