/*==================================================
AMARILLO BEAUTY AUTH
==================================================*/

:root{

    --primary:#7C3AED;
    --secondary:#EC4899;

    --dark:#0F172A;
    --panel:#111827;
    --card:#1B2435;

    --input:#2A3448;
    --border:#334155;

    --text:#FFFFFF;
    --muted:#B8C1D1;

    --transition:.30s;

}

*{

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

}

html,
body{

    width:100%;
    height:100%;

}

body{

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

    background:var(--dark);

    color:white;

    overflow:hidden;

}

/*==================================================*/

.auth{

    display:grid;

    grid-template-columns:58% 42%;

    width:100vw;

    height:100dvh;

}

/*==================================================
HERO
==================================================*/

.hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:50px;

    background:

    linear-gradient(
        135deg,
        #5826B4,
        #7C3AED 40%,
        #A855F7 70%,
        #EC4899
    );

}

/*==================================================*/

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    opacity:.18;

}

.circle1{

    width:520px;

    height:520px;

    top:-220px;

    left:-150px;

    background:white;

}

.circle2{

    width:320px;

    height:320px;

    right:-70px;

    bottom:-90px;

    background:white;

}

.circle3{

    width:220px;

    height:220px;

    right:15%;

    top:35%;

    background:white;

}

/*==================================================*/

.hero-content{

    position:relative;

    z-index:2;

    max-width:560px;

}

/*==================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

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

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(15px);

    font-size:13px;

    font-weight:700;

    margin-bottom:28px;

}

/*==================================================*/

.hero h1{

    font-size:clamp(44px,4vw,60px);

    line-height:1.05;

    font-weight:800;

    margin-bottom:18px;

}

/*==================================================*/

.hero p{

    font-size:17px;

    line-height:1.7;

    color:rgba(255,255,255,.92);

    margin-bottom:32px;

}

/*==================================================
BENEFICIOS
==================================================*/

.beneficios{

    display:grid;

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

    gap:14px;

}

.beneficios div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    border-radius:18px;

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

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    transition:.30s;

}

.beneficios div:hover{

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

    transform:translateY(-3px);

}

.beneficios i{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

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

    font-size:18px;

}

.beneficios span{

    font-size:15px;

    font-weight:600;

}

/*==================================================
PANEL DERECHO
==================================================*/

.panel{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

    background:var(--panel);

}

.card{

    width:100%;

    max-width:470px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:24px;

    padding:28px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);

}

/*==================================================
LOGO
==================================================*/

.logo-form{

    width:150px;

    display:block;

    margin:0 auto 18px;

}

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

.card h2{

    text-align:center;

    color:white;

    font-size:38px;

    font-weight:800;

    margin-bottom:8px;

}

.card p{

    text-align:center;

    color:var(--muted);

    font-size:15px;

    line-height:1.6;

    margin-bottom:22px;

}

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

form{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.campo{

    display:flex;

    flex-direction:column;

}

.campo label{

    font-size:13px;

    color:#D6DCE7;

    font-weight:600;

    margin-bottom:6px;

}

.campo input{

    width:100%;

    height:50px;

    border:none;

    outline:none;

    border-radius:14px;

    background:var(--input);

    color:white;

    padding:0 16px;

    font-size:14px;

    transition:.30s;

}

.campo input::placeholder{

    color:#98A4B8;

}

.campo input:focus{

    background:#344055;

    box-shadow:
        0 0 0 2px rgba(124,58,237,.35);

}

/*==================================================
CHECK
==================================================*/

.check{

    display:flex;

    align-items:flex-start;

    gap:8px;

    font-size:13px;

    color:var(--muted);

    margin-top:4px;

}

.check input{

    margin-top:3px;

    accent-color:#EC4899;

}

/*==================================================
BOTON
==================================================*/

button{

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:white;

    font-size:15px;

    font-weight:700;

    background:

    linear-gradient(
        90deg,
        #7C3AED,
        #EC4899
    );

    transition:.30s;

}

button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 15px 30px rgba(124,58,237,.35);

}

/*==================================================
FOOTER
==================================================*/

.footer{

    margin-top:18px;

    text-align:center;

    color:var(--muted);

    font-size:14px;

}

.footer a{

    color:white;

    text-decoration:none;

    font-weight:700;

}

.footer a:hover{

    color:#EC4899;

}

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

@media(max-width:1200px){

    body{

        overflow:auto;

    }

    .auth{

        grid-template-columns:1fr;

        height:auto;

    }

    .hero{

        min-height:420px;

    }

}

/*==================================================
MOVIL
==================================================*/

@media(max-width:768px){

    body{

        overflow:auto;

    }

    .auth{

        display:block;

    }

    .hero{

        padding:35px 25px;

    }

    .hero h1{

        font-size:36px;

    }

    .hero p{

        font-size:16px;

    }

    .beneficios{

        grid-template-columns:1fr;

    }

    .panel{

        padding:20px;

    }

    .card{

        padding:24px;

    }

    .logo-form{

        width:130px;

    }

}