/*==================================================
BASE.CSS
Proyecto: INDIGO Inmobiliaria
Autor: ColaboraWeb
Descripción:
Estilos globales del sitio.
==================================================*/


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

*,
*::before,
*::after
{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/*==================================================
HTML
==================================================*/

html
{

    font-size:16px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;

}


/*==================================================
BODY
==================================================*/

body
{

    font-family:var(--font-primary);
    font-size:var(--fs-base);
    font-weight:400;
    line-height:1.7;

    color:var(--text);

    background:var(--white);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}


/*==================================================
SELECCIÓN
==================================================*/

::selection
{

    background:var(--primary);
    color:var(--white);

}


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

::-webkit-scrollbar
{

    width:10px;

}

::-webkit-scrollbar-track
{

    background:var(--background);

}

::-webkit-scrollbar-thumb
{

    background:var(--primary);
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover
{

    background:var(--accent);

}


/*==================================================
IMÁGENES
==================================================*/

img
{

    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    border:none;

}

picture
{

    display:block;

}

svg
{

    display:block;

    max-width:100%;

}


/*==================================================
LISTAS
==================================================*/

ul,
ol
{

    list-style:none;

}


/*==================================================
ENLACES
==================================================*/

a
{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


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

button
{

    cursor:pointer;

    border:none;

    background:none;

    font-family:inherit;

    transition:var(--transition);

}


/*==================================================
FORMULARIOS
==================================================*/

input,
select,
textarea
{

    width:100%;

    border:none;

    outline:none;

    background:none;

    font-family:inherit;

    font-size:inherit;

}

textarea
{

    resize:none;

}


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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible
{

    outline:3px solid rgba(15,90,74,.20);

    outline-offset:4px;

}


/*==================================================
TABLAS
==================================================*/

table
{

    width:100%;

    border-collapse:collapse;

}


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

h1,
h2,
h3,
h4,
h5,
h6
{

    color:var(--text);

    font-family:var(--font-primary);

    font-weight:700;

    line-height:1.2;

}

h1
{

    font-size:var(--fs-display);

}

h2
{

    font-size:var(--fs-xxl);

}

h3
{

    font-size:var(--fs-xl);

}

h4
{

    font-size:var(--fs-lg);

}

h5
{

    font-size:var(--fs-md);

}

h6
{

    font-size:var(--fs-base);

}


/*==================================================
PÁRRAFOS
==================================================*/

p
{

    color:var(--text-light);

}


/*==================================================
SECTION
==================================================*/

section
{

    position:relative;

    padding:var(--space-7) 0;

}


/*==================================================
CONTAINER
==================================================*/

.container
{

    width:min(1320px, calc(100% - 2rem));

    margin:auto;

}


/*==================================================
SECTION HEADER
==================================================*/

.section-header
{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;

}

.section-badge
{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.75rem 1.25rem;

    margin-bottom:1rem;

    background:rgba(15,90,74,.08);

    color:var(--primary);

    border-radius:50px;

    font-size:var(--fs-sm);

    font-weight:600;

}

.section-header h2
{

    margin-bottom:1rem;

}

.section-header p
{

    max-width:650px;

    margin:auto;

}


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

.btn-primary,
.btn-secondary
{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:1rem 2rem;

    min-width:190px;

    border-radius:var(--radius-xl);

    font-weight:600;

    transition:var(--transition);

}

.btn-primary
{

    background:var(--primary);

    color:var(--white);

}

.btn-primary:hover
{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}

.btn-secondary
{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-secondary:hover
{

    background:var(--primary);

    color:var(--white);

}


/*==================================================
CARDS
==================================================*/

.card
{

    background:var(--white);

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover
{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


/*==================================================
UTILIDADES FLEX
==================================================*/

.d-flex
{

    display:flex;

}

.align-center
{

    align-items:center;

}

.justify-between
{

    justify-content:space-between;

}

.justify-center
{

    justify-content:center;

}

.flex-column
{

    flex-direction:column;

}

.flex-wrap
{

    flex-wrap:wrap;

}

.gap-1
{

    gap:1rem;

}

.gap-2
{

    gap:2rem;

}

.gap-3
{

    gap:3rem;

}


/*==================================================
TEXTOS
==================================================*/

.text-center
{

    text-align:center;

}

.text-left
{

    text-align:left;

}

.text-right
{

    text-align:right;

}


/*==================================================
MÁRGENES
==================================================*/

.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}

.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}


/*==================================================
PADDINGS
==================================================*/

.pt-1{padding-top:1rem;}
.pt-2{padding-top:2rem;}
.pt-3{padding-top:3rem;}

.pb-1{padding-bottom:1rem;}
.pb-2{padding-bottom:2rem;}
.pb-3{padding-bottom:3rem;}


/*==================================================
OCULTAR
==================================================*/

.hidden
{

    display:none !important;

}


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

@media (max-width:992px)
{

    h1
    {

        font-size:3rem;

    }

    h2
    {

        font-size:2.3rem;

    }

    section
    {

        padding:5rem 0;

    }

}

@media (max-width:768px)
{

    html
    {

        font-size:15px;

    }

    .container
    {

        width:calc(100% - 1.5rem);

    }

    h1
    {

        font-size:2.4rem;

    }

    h2
    {

        font-size:2rem;

    }

    .section-header
    {

        margin-bottom:3rem;

    }

    .btn-primary,
    .btn-secondary
    {

        width:100%;

    }

}

/*==================================================
LOGIN
Proyecto : INDIGO Inmobiliaria
Autor    : ColaboraWeb
==================================================*/



/*==================================================
WRAPPER
==================================================*/

.login-wrapper
{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100vh;

    padding:3rem 1rem;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        rgba(2,27,109,.96),
        rgba(9,52,156,.90)
    );

}


/*==================================================
BACKGROUND IMAGE
==================================================*/

.login-wrapper::before
{

    content:"";

    position:absolute;

    inset:0;

    background:url("../resource/img/login.webp")
    center center /
    cover
    no-repeat;

    opacity:.13;

    transform:scale(1.05);

}


/*==================================================
LIGHT
==================================================*/

.login-wrapper::after
{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.10),
        transparent 70%
    );

}


/*==================================================
CARD
==================================================*/

.login-card
{

    position:relative;

    z-index:5;

    width:100%;

    max-width:480px;

    padding:55px;

    border-radius:30px;

    background:

    rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    box-shadow:

    0 35px 80px rgba(0,0,0,.20);

}


/*==================================================
TITLE
==================================================*/

.login-title
{

    margin:0;

    color:#021b6d;

    font-size:2rem;

    font-weight:800;

    text-align:center;

}


.login-subtitle
{

    margin:12px 0 40px;

    color:#64748b;

    text-align:center;

    font-size:1rem;

}


/*==================================================
FORM
==================================================*/

.login-form
{

    display:flex;

    flex-direction:column;

}


/*==================================================
GROUP
==================================================*/

.input-group
{

    margin-bottom:25px;

}


.input-group label
{

    display:block;

    margin-bottom:10px;

    color:#021b6d;

    font-weight:700;

    font-size:.95rem;

}


.input-group input
{

    width:100%;

    height:58px;

    padding:0 18px;

    border:2px solid #dbe3f2;

    border-radius:14px;

    background:#f8fafc;

    color:#021b6d;

    font-size:1rem;

    transition:.35s ease;

}


.input-group input::placeholder
{

    color:#94a3b8;

}


.input-group input:focus
{

    border-color:#1248b5;

    background:#fff;

    box-shadow:

    0 0 0 5px rgba(18,72,181,.12);

}


/*==================================================
BUTTON
==================================================*/

.btn-login
{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:#fff;

    font-size:1rem;

    font-weight:700;

    background:

    linear-gradient(
        135deg,
        #021b6d,
        #1248b5
    );

    transition:.35s ease;

}


.btn-login::before
{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

    rgba(255,255,255,.25);

    transform:skewX(-25deg);

    transition:.8s;

}


.btn-login:hover::before
{

    left:140%;

}


.btn-login:hover
{

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(2,27,109,.30);

}


/*==================================================
ERROR
==================================================*/

.login-error-container
{

    position:fixed;

    top:35px;

    left:50%;

    transform:translateX(-50%);

    width:min(520px,90%);

    z-index:999;

}


.login-error-card
{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    overflow:hidden;

    border-radius:18px;

    background:#fff;

    border-left:5px solid #d94b63;

    box-shadow:

    0 20px 45px rgba(0,0,0,.18);

    animation:fadeDown .5s ease;

}


.login-error-light
{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(217,75,99,.12),
        transparent
    );

}


.login-error-icon
{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#fde8ec;

}


.login-error-icon svg
{

    width:30px;

    height:30px;

    fill:none;

    stroke:#d94b63;

    stroke-width:2;

}


.login-error-content
{

    position:relative;

    z-index:2;

}


.login-error-content h3
{

    margin:0 0 6px;

    color:#021b6d;

    font-size:1.15rem;

}


.login-error-content p
{

    margin:0;

    color:#64748b;

    line-height:1.6;

}


/*==================================================
ANIMATION
==================================================*/

@keyframes fadeDown
{

    from
    {

        opacity:0;

        transform:translateY(-25px);

    }

    to
    {

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:992px)
{

    .login-card
    {

        max-width:450px;

        padding:45px;

    }

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:768px)
{

    .login-wrapper
    {

        padding:2rem 1rem;

    }

    .login-card
    {

        padding:35px;

        border-radius:24px;

    }

    .login-title
    {

        font-size:1.8rem;

    }

    .login-subtitle
    {

        margin-bottom:30px;

        font-size:.95rem;

    }

    .input-group
    {

        margin-bottom:20px;

    }

}


/*==================================================
SMALL MOBILE
==================================================*/

@media(max-width:576px)
{

    .login-card
    {

        padding:30px 22px;

    }

    .login-title
    {

        font-size:1.6rem;

    }

    .login-subtitle
    {

        font-size:.92rem;

    }

    .input-group label
    {

        font-size:.9rem;

    }

    .input-group input
    {

        height:54px;

        font-size:.95rem;

    }

    .btn-login
    {

        height:54px;

        font-size:.95rem;

    }

    .login-error-card
    {

        padding:18px;

        gap:14px;

    }

    .login-error-icon
    {

        width:50px;

        height:50px;

    }

    .login-error-icon svg
    {

        width:24px;

        height:24px;

    }

    .login-error-content h3
    {

        font-size:1rem;

    }

    .login-error-content p
    {

        font-size:.9rem;

    }

}