/*==================================================
LANDING REGALO
SOKO DEPORTES
Tema Brasilia
==================================================*/


/*==========================
Variables
==========================*/

:root{

    --pink:#E63E8D;
    --pink-dark:#CF2F7C;

    --text:#313131;

    --text-light:#727272;

    --border:#E8E8E8;

    --background:#FFF9FC;

    --white:#FFFFFF;

    --radius:24px;

    --shadow:

        0 18px 55px

        rgba(230,62,141,.08);

    --transition:.25s ease;

}


/*==========================
Reset
==========================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        Roboto,

        Helvetica,

        Arial,

        sans-serif;

    background:var(--background);

    color:var(--text);

}

img{

    display:block;

    max-width:100%;

}

button,
input,
select,
textarea{

    font:inherit;

}

button{

    cursor:pointer;

}


/*==========================
Landing
==========================*/

#landing-regalo{

    position:relative;

    min-height:100vh;

    overflow:hidden;

}


/*==========================
Background
==========================*/

.landing-background{

    position:fixed;

    inset:0;

    z-index:0;

    background:

        radial-gradient(

            circle at top,

            rgba(230,62,141,.08),

            transparent 45%

        ),

        linear-gradient(

            180deg,

            #FFF8FC,

            #FFFFFF

        );

}


/*==========================
Wrapper
==========================*/

.landing-wrapper{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:
        12px
        22px
        40px;

}

/*==========================
Logo
==========================*/

.landing-logo{

    margin-bottom:34px;

}

.landing-logo-img{

    width:170px;

    margin:auto;

}

    height:auto;

}

.landing-logo-text{

    font-size:30px;

    font-weight:800;

    color:var(--pink);

}


/*==========================
Progress
==========================*/

.landing-progress{

    width:100%;

    max-width:380px;

    height:6px;

    border-radius:999px;

    background:#F3F3F3;

    overflow:hidden;

    margin-bottom:26px;

}

.landing-progress-bar{

    width:33.33%;

    height:100%;

    background:var(--pink);

    transition:.35s ease;

}


/*==========================
Card
==========================*/

.landing-card{

    width:100%;

    max-width:440px;

    background:#FFF;

    border-radius:28px;

    padding:42px 32px;

    box-shadow:
        0 22px 60px rgba(230,62,141,.08);

    overflow:hidden;

    position:relative;

}

    background:var(--white);

    border-radius:30px;

    padding:

        34px
        28px;

    box-shadow:var(--shadow);

    overflow:hidden;

    position:relative;

}


/*==========================
Panels
==========================*/

#landing-regalo .landing-step{

    display:none !important;

    animation:fade .30s ease;

}

#landing-regalo .landing-step.active{

    display:block !important;

}


@keyframes fade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==================================================
PANTALLA 1
==================================================*/

.landing-title{

    text-align:center;

    font-size:34px;

    font-weight:800;

    line-height:1.15;

    color:var(--text);

    letter-spacing:-0.5px;

    margin-bottom:18px;

}

.landing-title span{

    display:block;

    color:var(--pink);

}

.landing-description{

    text-align:center;

    font-size:16px;

    line-height:1.7;

    color:var(--text-light);

    margin:0 auto 28px;

    max-width:290px;

}

.landing-badge{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    max-width:310px;

    margin:0 auto 36px;

    padding:15px 22px;

    background:#FFF;

    border-radius:999px;

    box-shadow:

        0 14px 30px rgba(0,0,0,.05);

}
.badge-icon{

    font-size:18px;

    line-height:1;

}

.landing-badge span:last-child{

    font-size:15px;

    font-weight:600;

    color:var(--text);

}

.landing-button{

    width:100%;

    height:64px;
letter-spacing:.2px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        180deg,
        var(--pink),
        var(--pink-dark)
    );

    color:#FFFFFF;

    font-size:17px;

    font-weight:700;

    transition:
        transform .18s ease,
        box-shadow .25s ease,
        background .25s ease;

    box-shadow:

        0 14px 34px rgba(230,62,141,.22);

}

.landing-button:hover{

    transform:translateY(-2px);

}

.landing-button:active{

    transform:scale(.98);

}

.landing-button:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

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

.landing-form-title{

    text-align:center;

    font-size:28px;

    font-weight:800;

    color:var(--text);

    margin-bottom:10px;

}

.landing-form-description{

    text-align:center;

    font-size:15px;

    line-height:1.6;

    color:var(--text-light);

    margin-bottom:30px;

}

.field{

    margin-bottom:18px;

}

.field label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:700;

    color:var(--text);

}

.field input,
.field textarea{

    width:100%;

    height:54px;

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

    border-radius:16px;

    background:#FFFFFF;

    padding:0 18px;

    font-size:16px;

    color:var(--text);

    transition:border-color .2s ease,
               box-shadow .2s ease;

}

.field textarea{

    min-height:110px;

    padding:16px 18px;

    resize:none;

}

.field input::placeholder,
.field textarea::placeholder{

    color:#A8A8A8;

}

.field input:focus,
.field textarea:focus{

    outline:none;

    border-color:var(--pink);

    box-shadow:

        0 0 0 4px rgba(230,62,141,.10);

}

.field-error{

    display:block;

    min-height:18px;

    margin-top:6px;

    font-size:13px;

    color:#D32F2F;

}
/*==================================================
RADIO CARDS
==================================================*/

.radio-group{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-top:10px;

}

.radio-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

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

    border-radius:18px;

    background:#FFF;

    cursor:pointer;

    transition:all .25s ease;

}

.radio-card:hover{

    border-color:var(--pink);

    box-shadow:

        0 10px 25px rgba(230,62,141,.08);

}

.radio-card input{

    display:none;

}

.radio-circle{

    width:22px;

    height:22px;

    border-radius:50%;

    border:2px solid #D8D8D8;

    flex-shrink:0;

    position:relative;

    transition:.25s;

}

.radio-circle::after{

    content:"";

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--pink);

    top:50%;

    left:50%;

    transform:
        translate(-50%,-50%)
        scale(0);

    transition:.20s;

}

.radio-card input:checked + .radio-circle{

    border-color:var(--pink);

}

.radio-card input:checked + .radio-circle::after{

    transform:
        translate(-50%,-50%)
        scale(1);

}

.radio-card:has(input:checked){

    border-color:var(--pink);

    background:#FFF8FC;

}

.radio-content{

    display:flex;

    flex-direction:column;

}

.radio-content strong{

    font-size:16px;

    color:var(--text);

}

.radio-content small{

    margin-top:3px;

    color:var(--text-light);

    font-size:13px;

}


/*==================================================
CHECKBOX
==================================================*/

.landing-checkbox{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:

        26px 0
        30px;

    font-size:14px;

    color:var(--text-light);

    line-height:1.55;

}

.landing-checkbox input{

    margin-top:3px;

    accent-color:var(--pink);

    width:18px;

    height:18px;

    flex-shrink:0;

}

.landing-checkbox strong{

    color:var(--text);

}
/*==================================================
LOADER
==================================================*/

.landing-loader{

    display:none;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:45px 0;

    text-align:center;

}

.landing-loader.active{

    display:flex;

}

.loader-spinner{

    width:56px;

    height:56px;

    border-radius:50%;

    border:4px solid #F2F2F2;

    border-top-color:var(--pink);

    animation:spin .8s linear infinite;

}

.landing-loader p{

    margin-top:18px;

    color:var(--text-light);

    font-size:15px;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
SUCCESS
==================================================*/

.success-icon{

    width:82px;

    height:82px;

    margin:0 auto 26px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--pink);

    font-size:42px;

    font-weight:700;

    animation:successPop .45s ease;

}

@keyframes successPop{

    0%{

        opacity:0;

        transform:scale(.45);

    }

    70%{

        transform:scale(1.08);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

.success-title{

    text-align:center;

    font-size:34px;

    font-weight:800;

    color:var(--pink);

    margin-bottom:18px;

}

.success-description{

    text-align:center;

    color:var(--text-light);

    font-size:16px;

    line-height:1.75;

    margin-bottom:36px;

}


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

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}


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

@media(min-width:768px){

    .landing-wrapper{

        padding-top:60px;

    }

    .landing-card{

        max-width:470px;

        padding:46px 40px;

    }

    .landing-logo-img{

        width:190px;

    }

    .landing-title{

        font-size:42px;

    }

    .landing-description{

        max-width:340px;

        font-size:17px;

    }

}


/*==================================================
DESKTOP
==================================================*/

@media(min-width:1024px){

    .landing-wrapper{

        padding:70px 30px;

    }

    .landing-card{

        max-width:500px;

    }

    .landing-title{

        font-size:46px;

    }

    .landing-button{

        transition:

            transform .2s,

            box-shadow .2s;

    }

    .landing-button:hover{

        transform:translateY(-3px);

        box-shadow:

            0 18px 40px rgba(230,62,141,.25);

    }

}


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

@media(max-width:360px){

    .landing-card{

        padding:28px 22px;

    }

    .landing-title{

        font-size:30px;

    }

    .landing-button{

        height:56px;

        font-size:16px;

    }

}
/*==================================================
AJUSTES FINALES
==================================================*/

/* Ocultar header de Tienda Nube únicamente en /regalo */

body:has(#landing-regalo) header,
body:has(#landing-regalo) .js-head-main,
body:has(#landing-regalo) .head-main,
body:has(#landing-regalo) .section-header,
body:has(#landing-regalo) .desktop-nav,
body:has(#landing-regalo) .mobile-nav,
body:has(#landing-regalo) .nav-container,
body:has(#landing-regalo) .searchbox,
body:has(#landing-regalo) .categories-container{

    display:none !important;

}


/* eliminar margen superior del theme */

body:has(#landing-regalo){

    padding-top:0 !important;

}


/* Logo */

.landing-logo{

    margin-bottom:22px;

}

.landing-logo-img{

    width:185px;

}


/* Barra */

.landing-progress{

    margin-bottom:34px;

}


/* Card */

.landing-card{

    max-width:430px;

    padding:

        38px
        30px;

}


/* Título */

.landing-title{

    font-size:33px;

    line-height:1.05;

    margin-bottom:20px;

}

.landing-title span{

    margin-top:4px;

}


/* Texto */

.landing-description{

    max-width:300px;

}


/* Badge */

.landing-badge{

    max-width:320px;

}


/* Botón */

.landing-button{

    height:60px;

    border-radius:16px;

    box-shadow:

        0 12px 28px rgba(230,62,141,.18);

}


/* Animación */

.landing-card{

    transition:

        transform .25s ease,

        box-shadow .25s ease;

}

.landing-card:hover{

    transform:translateY(-2px);

}


/* Responsive */

@media(min-width:768px){

    .landing-card{

        max-width:470px;

    }

}
/*==================================================
AJUSTES VISUALES FINALES
==================================================*/

/* Subimos un poco todo el contenido */
.landing-wrapper{

    justify-content:flex-start;

    padding-top:40px;
    padding-bottom:30px;

}

/* Logo */

.landing-logo{

    margin-bottom:14px;

}

.landing-logo-img{

    width:175px;

}

/* Barra de progreso */

.landing-progress{

    margin-bottom:22px;

}

/* Tarjeta */

.landing-card{

    margin-top:0;

    transform:translateY(-12px);

}

/* Título */

.landing-title{

    line-height:1.02;

}

.landing-title span{

    margin-top:2px;

}