:root{
    --productos-primary:#312782;
    --productos-primary-dark:#21195F;
    --productos-primary-light:#5145B5;

    --productos-bg:#F7F8FC;
    --productos-white:#FFFFFF;

    --productos-text:#222126;
    --productos-text-light:#706E76;

    --productos-border:rgba(49,39,130,.09);

    --productos-radius:22px;

    --productos-shadow:
        0 16px 42px rgba(32,27,71,.07);
}

.productos-hero{
    position:relative;

    width:100%;
    min-height:650px;

    display:flex;
    align-items:center;

    padding:150px 0 115px;

    overflow:hidden;

    color:#FFFFFF;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(118,101,225,.24),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #21195F 0%,
            #312782 52%,
            #5145B5 100%
        );
}

.productos-hero::before{
    content:"";

    position:absolute;

    width:570px;
    height:570px;

    right:-390px;
    top:-340px;

    border-radius:50%;

    background:transparent;

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

    box-shadow:
        0 0 0 65px rgba(255,255,255,.015);

    pointer-events:none;
}


.productos-hero::after{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    left:-310px;
    bottom:-290px;

    border-radius:50%;

    background:transparent;

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

    pointer-events:none;
}

.productos-hero-grid{
    position:relative;

    z-index:3;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(400px,.82fr);

    align-items:center;

    gap:75px;
}

.productos-hero-info{
    position:relative;

    max-width:720px;

    color:#FFFFFF;
}

.productos-etiqueta{
    display:flex;
    align-items:center;

    gap:12px;

    width:max-content;

    margin:0 0 23px;

    padding:0;

    border-radius:0;

    background:transparent;

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

    font-size:.72rem;
    font-weight:700;

    letter-spacing:1.9px;

    text-transform:uppercase;

    backdrop-filter:none;
}


.productos-etiqueta::before{
    content:"";

    width:30px;
    height:2px;

    border-radius:20px;

    background:rgba(255,255,255,.72);
}

.productos-hero-info h1{
    max-width:720px;

    margin:0 0 25px;

    color:#FFFFFF;

    font-size:4rem;
    font-weight:700;

    line-height:1.07;

    letter-spacing:-2px;
}

.productos-hero-info p{
    max-width:620px;

    margin:0;

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

    font-size:.96rem;

    line-height:1.8;
}

.productos-buscador{
    position:relative;

    left:auto;
    bottom:auto;

    z-index:5;

    width:100%;
    max-width:560px;
    height:54px;

    display:flex;
    align-items:center;

    margin:32px 0 0;

    padding:0 18px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;

    background:#FFFFFF;

    box-shadow:
        0 12px 28px rgba(17,12,63,.16);

    transform:none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.productos-buscador:focus-within{
    transform:translateY(-2px);

    border-color:rgba(255,255,255,.30);

    box-shadow:
        0 17px 34px rgba(17,12,63,.22);
}


.productos-buscador i{
    flex-shrink:0;

    color:#312782;

    font-size:.95rem;
}


.productos-buscador input{
    width:100%;

    margin-left:12px;

    padding:0;

    border:0;
    outline:0;

    background:transparent;

    color:#222126;

    font-family:inherit;
    font-size:.86rem;
}


.productos-buscador input::placeholder{
    color:#97949E;
}

.productos-hero-imagen{
    position:relative;

    width:100%;
    min-height:420px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.productos-hero-imagen::before{
    content:"";

    position:absolute;

    width:430px;
    height:330px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.11),
            transparent 67%
        );

    filter:blur(8px);

    pointer-events:none;
}


.productos-hero-imagen img{
    position:relative;

    z-index:2;

    display:block;

    width:100%;
    max-width:520px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(
            0 22px 28px rgba(17,12,63,.18)
        );

    transition:
        transform .45s ease,
        filter .45s ease;
}

.productos-hero-imagen:hover img{
    transform:translateY(-5px);

    filter:
        drop-shadow(
            0 28px 34px rgba(17,12,63,.23)
        );
}

@media(max-width:992px){

    .productos-hero{
        min-height:auto;

        padding:140px 0 75px;
    }


    .productos-hero-grid{
        grid-template-columns:1fr;

        gap:45px;

        max-width:760px;

        margin:auto;
    }


    .productos-hero-info{
        max-width:700px;

        margin:auto;

        text-align:center;
    }


    .productos-etiqueta{
        justify-content:center;

        margin-left:auto;
        margin-right:auto;
    }


    .productos-hero-info h1,
    .productos-hero-info p{
        margin-left:auto;
        margin-right:auto;
    }


    .productos-hero-info h1{
        font-size:3.45rem;
    }


    .productos-buscador{
        margin-left:auto;
        margin-right:auto;
    }


    .productos-hero-imagen{
        min-height:320px;
    }


    .productos-hero-imagen img{
        max-width:440px;
    }

}

@media(max-width:576px){

    .productos-hero{
        padding:115px 0 55px;
    }


    .productos-hero .container{
        width:90%;
    }


    .productos-hero-grid{
        gap:32px;
    }


    .productos-etiqueta{
        margin-bottom:18px;

        font-size:.62rem;

        letter-spacing:1.15px;
    }


    .productos-etiqueta::before{
        width:21px;
    }


    .productos-hero-info h1{
        margin-bottom:20px;

        font-size:2.4rem;

        line-height:1.08;

        letter-spacing:-1px;
    }


    .productos-hero-info p{
        font-size:.87rem;

        line-height:1.7;
    }


    .productos-buscador{
        height:53px;

        margin-top:27px;

        padding:0 16px;

        border-radius:13px;
    }


    .productos-buscador input{
        margin-left:11px;

        font-size:.84rem;
    }


    .productos-hero-imagen{
        min-height:240px;
    }


    .productos-hero-imagen::before{
        width:280px;
        height:220px;
    }


    .productos-hero-imagen img{
        width:auto;

        max-width:100%;
        max-height:250px;
    }


    .productos-hero-imagen:hover img{
        transform:none;
    }

}
@media(max-width:430px){

    .productos-hero{
        padding-top:105px;
    }


    .productos-hero-info h1{
        font-size:2.1rem;
    }


    .productos-buscador{
        height:50px;
    }


    .productos-hero-imagen{
        min-height:210px;
    }


    .productos-hero-imagen img{
        max-height:220px;
    }

}

.productos-filtros{
    position:relative;

    z-index:4;

    padding:30px 0 0;

    background:#F7F8FC;
}


.productos-filtros .container{
    display:flex;

    align-items:center;
    justify-content:flex-start;
}


.productos-filtros-contenedor{
    display:inline-flex;

    align-items:center;

    gap:5px;

    margin:0;

    padding:5px;

    border:1px solid rgba(49,39,130,.08);

    border-radius:14px;

    background:#FFFFFF;

    box-shadow:
        0 8px 22px rgba(32,27,71,.045);
}


.productos-filtro{
    min-width:95px;
    min-height:41px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:9px 17px;

    border:0;

    border-radius:10px;

    background:transparent;

    color:#6D6A73;

    font-family:inherit;
    font-size:.79rem;
    font-weight:600;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease;
}


.productos-filtro:hover{
    background:#F1EEFC;

    color:#312782;
}


.productos-filtro.activo{
    background:#312782;

    color:#FFFFFF;

    box-shadow:
        0 7px 16px rgba(49,39,130,.16);
}
.productos-filtros .container::before{
    content:"Filtrar por:";

    margin-right:15px;

    color:#77757D;

    font-size:.76rem;
    font-weight:600;
}

.productos-catalogo{
    position:relative;

    padding:32px 0 110px;

    overflow:hidden;

    background:#F7F8FC;
}

.productos-catalogo::before{
    content:"";

    position:absolute;

    width:480px;
    height:480px;

    right:-360px;
    top:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(49,39,130,.035),
            transparent 68%
        );

    pointer-events:none;
}

.productos-catalogo-header{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:50px;

    margin-bottom:48px;
}

.productos-catalogo-titulo{
    max-width:700px;
}


.productos-catalogo-titulo > span{
    display:flex;
    align-items:center;

    gap:11px;

    width:max-content;

    margin:0 0 16px;

    color:#312782;

    font-size:.7rem;
    font-weight:700;

    letter-spacing:1.8px;

    text-transform:uppercase;
}


.productos-catalogo-titulo > span::before{
    content:"";

    width:28px;
    height:2px;

    border-radius:20px;

    background:#312782;
}


.productos-catalogo-titulo h2{
    max-width:650px;

    margin:0 0 17px;

    color:#222126;

    font-size:2.8rem;
    line-height:1.17;

    letter-spacing:-1px;
}


.productos-catalogo-titulo p{
    max-width:620px;

    margin:0;

    color:#706E76;

    font-size:.92rem;
    line-height:1.8;
}

.productos-catalogo-info{
    position:relative;

    flex-shrink:0;

    min-width:190px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:15px 18px;

    border:1px solid rgba(49,39,130,.08);

    border-radius:15px;

    background:#FFFFFF;

    box-shadow:
        0 10px 28px rgba(32,27,71,.055);
}


.productos-catalogo-info strong{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:45px;
    height:45px;

    margin:0;

    border-radius:12px;

    background:#EEEAFE;

    color:#312782;

    font-size:1.15rem;
    font-weight:800;

    line-height:1;
}


.productos-catalogo-info span{
    max-width:95px;

    color:#77757D;

    font-size:.72rem;
    line-height:1.4;
}

.productos-grid{
    position:relative;
    z-index:2;

    display:grid;

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

    gap:24px;
}

@media(max-width:992px){

    .productos-filtros{
        padding-top:28px;
    }


    .productos-filtros .container{
        justify-content:center;
    }


    .productos-catalogo{
        padding:35px 0 95px;
    }


    .productos-catalogo-header{
        align-items:center;

        gap:35px;
    }


    .productos-catalogo-titulo h2{
        font-size:2.4rem;
    }


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

        gap:20px;
    }

}

@media(max-width:576px){

    .productos-filtros{
        padding-top:25px;
    }


    .productos-filtros .container{
        width:90%;

        display:block;
    }


    .productos-filtros .container::before{
        display:block;

        margin:0 0 10px;

        font-size:.72rem;
    }


    .productos-filtros-contenedor{
        width:100%;

        gap:5px;

        padding:5px;
    }


    .productos-filtro{
        flex:1;

        min-width:0;
        min-height:39px;

        padding:8px 6px;

        font-size:.75rem;
    }


    .productos-catalogo{
        padding:30px 0 70px;
    }

}
@media(max-width:430px){

    .productos-catalogo{
        padding:60px 0;
    }


    .productos-catalogo-titulo h2{
        font-size:1.8rem;
    }


    .productos-filtro{
        font-size:.73rem;

        padding-left:6px;
        padding-right:6px;
    }

}

.productos-card{
    position:relative;

    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid rgba(49,39,130,.075);
    border-radius:22px;

    background:#FFFFFF;

    box-shadow:
        0 12px 32px rgba(32,27,71,.055);

    cursor:pointer;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.productos-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    z-index:5;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #312782,
            #6555C7
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

    pointer-events:none;
}


.productos-card:hover{
    transform:translateY(-6px);

    border-color:rgba(49,39,130,.14);

    box-shadow:
        0 22px 48px rgba(49,39,130,.11);
}


.productos-card:hover::before{
    transform:scaleX(1);
}

.productos-card-imagen{
    position:relative;

    width:100%;
    height:270px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:28px;

    overflow:hidden;

    border-radius:0;

    background:
        linear-gradient(
            145deg,
            #241D66 0%,
            #312782 55%,
            #493DA4 100%
        );
}

.productos-card-imagen::before{
    content:"";

    position:absolute;

    width:230px;
    height:180px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.13) 0%,
            rgba(255,255,255,.055) 38%,
            transparent 72%
        );

    pointer-events:none;
}

.productos-card-imagen img{
    position:relative;

    z-index:2;

    display:block;

    width:auto;
    height:auto;

    max-width:88%;
    max-height:88%;

    margin:auto;

    object-fit:contain;
    object-position:center;

    transform:none;

    filter:
        drop-shadow(
            0 12px 18px rgba(15,10,55,.20)
        );

    transition:
        transform .4s ease,
        filter .4s ease;
}
.productos-card:hover .productos-card-imagen img{
    transform:scale(1.035);

    filter:
        drop-shadow(
            0 16px 23px rgba(15,10,55,.28)
        );
}

.productos-card-info{
    position:relative;

    flex:1;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:24px 25px 26px;

    background:#FFFFFF;

    transform:none;

    transition:none;
}

.productos-card-referencia{
    display:inline-flex;

    align-items:center;

    width:max-content;

    margin:0 0 11px;

    border-radius:8px;

    background:#F1EEFC;

    color:#312782;

    font-size: 0.98rem;

    font-weight: 800;

    padding: 7px 12px;

    letter-spacing: 0.4px;

    text-transform:uppercase;
}

.productos-card-titulo{
    margin:0 0 20px;

    color:#222126;

    font-size:1.2rem;
    font-weight:700;

    line-height:1.35;
}

.productos-card-boton{
    width:100%;
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:auto;

    padding:11px 17px;

    border:1px solid rgba(49,39,130,.13);
    border-radius:11px;

    background:#FFFFFF;

    color:#312782;

    font-family:inherit;
    font-size:.8rem;
    font-weight:700;

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.productos-card-boton:hover{
    transform:translateY(-2px);

    border-color:#312782;

    background:#312782;

    color:#FFFFFF;

    box-shadow:
        0 9px 20px rgba(49,39,130,.16);
}

.productos-card-imagen .producto-flip{
    position:relative;

    width:100%;
    height:100%;

    perspective:1000px;
}


.productos-card-imagen .producto-flip-inner{
    position:relative;

    width:100%;
    height:100%;

    transform-style:preserve-3d;
}


.productos-card-imagen .producto-frente,
.productos-card-imagen .producto-atras{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;
}


.productos-card-imagen .producto-frente img,
.productos-card-imagen .producto-atras img{
    width:auto;
    height:auto;

    max-width:88%;
    max-height:88%;

    object-fit:contain;
    object-position:center;
}

@media(max-width:992px){

    .productos-card-imagen{
        height:245px;

        padding:25px;
    }


    .productos-card-imagen img,
    .productos-card-imagen .producto-frente img,
    .productos-card-imagen .producto-atras img{
        max-width:85%;
        max-height:85%;
    }


    .productos-card-info{
        padding:22px 23px 24px;
    }

}

@media(max-width:576px){

    .productos-card{
        border-radius:19px;
    }


    .productos-card:hover{
        transform:none;
    }


    .productos-card-imagen{
        height:240px;

        padding:25px;
    }


    .productos-card-imagen img,
    .productos-card-imagen .producto-frente img,
    .productos-card-imagen .producto-atras img{
        max-width:82%;
        max-height:82%;
    }


    .productos-card-info{
        padding:21px 22px 23px;
    }


    .productos-card-referencia{
        margin-bottom:10px;

        font-size:.63rem;
    }


    .productos-card-titulo{
        margin-bottom:18px;

        font-size:1.12rem;
    }


    .productos-card-boton{
        min-height:43px;

        font-size:.78rem;
    }

}
@media(max-width:430px){

    .productos-card-imagen{
        height:215px;

        padding:22px;
    }


    .productos-card-imagen img,
    .productos-card-imagen .producto-frente img,
    .productos-card-imagen .producto-atras img{
        max-width:80%;
        max-height:80%;
    }


    .productos-card-info{
        padding:19px 20px 21px;
    }

}

.productos-modal{
    position:fixed;
    inset:0;

    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:28px;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.productos-modal.productos-modal-activo{
    opacity:1;
    visibility:visible;
}

.productos-modal-overlay{
    position:absolute;
    inset:0;

    background:rgba(19,16,39,.68);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.productos-modal-contenido{
    position:relative;
    z-index:2;

    width:min(1100px, 95%);
    max-height:90vh;

    display:grid;
    grid-template-columns:minmax(380px,.9fr) minmax(0,1.1fr);

    overflow:hidden;

    border-radius:26px;

    background:#FFFFFF;

    box-shadow:
        0 30px 80px rgba(16,12,53,.25);

    opacity:0;

    transform:
        translateY(15px)
        scale(.97);

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.productos-modal.productos-modal-activo
.productos-modal-contenido{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

.productos-modal-imagen{
    position:relative;

    width:100%;
    min-height:600px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:45px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,.11),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #251D69,
            #312782 55%,
            #4C40AA
        );
}

.productos-modal-imagen::before{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    left:50%;
    top:50%;

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

    border-radius:50%;

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

    pointer-events:none;
}


.productos-modal-imagen::after{
    content:"";

    position:absolute;

    width:230px;
    height:230px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.07),
            transparent 70%
        );

    pointer-events:none;
}

#productoImagen{
    position:relative;
    z-index:3;

    width:100%;
    height:500px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}


#productoImagen > img{
    display:block;

    width:auto;
    height:auto;

    max-width:82%;
    max-height:82%;

    margin:auto;

    object-fit:contain;
    object-position:center;

    filter:
        drop-shadow(
            0 18px 24px rgba(15,10,55,.20)
        );

    transition:transform .4s ease;
}


#productoImagen > img:hover{
    transform:scale(1.025);
}

.productos-modal-info{
    min-width:0;

    padding:42px 45px;

    display:flex;
    flex-direction:column;

    gap:20px;

    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(49,39,130,.25)
        transparent;
}

.productos-modal-categoria{
    display:inline-flex;

    width:max-content;

    padding:7px 12px;

    border-radius:8px;

    background:#F1EEFC;

    color:#312782;

    font-size:.65rem;
    font-weight:700;

    letter-spacing:1.1px;

    text-transform:uppercase;
}

.productos-modal-titulo{
    margin:0;

    color:#222126;

    font-size:2.35rem;
    font-weight:700;

    line-height:1.1;

    letter-spacing:-1px;
}

.productos-modal-referencia{
    display:flex;
    align-items:center;

    gap:9px;
}

.productos-modal-referencia span{
    color:#8A8790;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.8px;
}

.productos-modal-referencia strong{
    color:#312782;

    font-size:.88rem;
    font-weight:700;
}

.productos-modal-descripcion{
    margin:2px 0;

    padding:18px 19px;

    border:1px solid rgba(49,39,130,.075);

    border-radius:14px;

    background:#F8F7FC;
}

.productos-modal-descripcion h4{
    margin:0 0 8px;

    color:#312782;

    font-size:.82rem;
    font-weight:700;
}

.productos-modal-descripcion p{
    margin:0;

    color:#706E76;

    font-size:.86rem;
    line-height:1.7;
}

.productos-modal-opciones{
    margin:0;
}

.productos-modal-opciones h4{
    margin:0 0 12px;

    color:#222126;

    font-size:.82rem;
    font-weight:700;
}

.productos-colores{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:10px;
}

.productos-color{
    position:relative;

    width:34px;
    height:34px;

    padding:0;

    border:3px solid #FFFFFF;
    border-radius:50%;

    cursor:pointer;

    box-shadow:
        0 0 0 1px rgba(32,33,38,.12);

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

.productos-color:hover{
    transform:scale(1.08);
}

.productos-color.activo{
    transform:scale(1.08);

    box-shadow:
        0 0 0 2px #312782,
        0 6px 14px rgba(49,39,130,.16);
}

.productos-texto-seleccion{
    display:block;

    margin-top:9px;

    color:#77757D;

    font-size:.75rem;
    font-weight:600;
}

.productos-tallas{
    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

.productos-talla{
    min-width:46px;
    height:39px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 13px;

    border:1px solid rgba(49,39,130,.12);
    border-radius:10px;

    background:#FFFFFF;

    color:#44424A;

    font-family:inherit;
    font-size:.78rem;
    font-weight:700;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.productos-talla:hover{
    transform:translateY(-2px);

    border-color:#312782;

    color:#312782;
}

.productos-talla.activa{
    border-color:#312782;

    background:#312782;

    color:#FFFFFF;
}

.productos-modal-cantidad{
    margin-top:2px;
}

.productos-modal-cantidad > label{
    display:block;

    margin-bottom:10px;

    color:#222126;

    font-size:.82rem;
    font-weight:700;
}

.productos-cantidad-control{
    width:max-content;

    display:flex;
    align-items:center;

    margin:0;

    overflow:hidden;

    border:1px solid rgba(49,39,130,.11);
    border-radius:11px;

    background:#FFFFFF;
}

.productos-cantidad-control button{
    width:42px;
    height:42px;

    border:0;

    background:#F7F8FC;

    color:#312782;

    font-size:1.15rem;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease;
}

.productos-cantidad-control button:hover{
    background:#312782;

    color:#FFFFFF;
}

.productos-cantidad-control input{
    width:58px;
    height:42px;

    padding:0;

    border:0;
    outline:0;

    background:#FFFFFF;

    color:#222126;

    text-align:center;

    font-family:inherit;
    font-size:.88rem;
    font-weight:700;
}

.productos-btn-principal{
    width:100%;
    min-height:49px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    margin-top:4px;

    padding:13px 20px;

    border:0;
    border-radius:12px;

    background:#312782;

    color:#FFFFFF;

    font-family:inherit;
    font-size:.84rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 10px 24px rgba(49,39,130,.18);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.productos-btn-principal:hover{
    transform:translateY(-2px);

    background:#241D66;

    box-shadow:
        0 15px 31px rgba(49,39,130,.24);
}

.productos-modal-cerrar{
    position:absolute;

    top:18px;
    right:18px;

    z-index:10;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid rgba(49,39,130,.08);
    border-radius:12px;

    background:#FFFFFF;

    color:#312782;

    font-size:1rem;

    cursor:pointer;

    box-shadow:
        0 8px 20px rgba(32,27,71,.08);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

.productos-modal-cerrar:hover{
    transform:rotate(4deg);

    background:#312782;

    color:#FFFFFF;
}

@media(max-width:992px){

    .productos-modal{
        padding:20px;
    }

    .productos-modal-contenido{
        width:min(680px,95%);
        max-height:90vh;

        display:flex;
        flex-direction:column;

        overflow-y:auto;

        border-radius:23px;
    }

    .productos-modal-imagen{
        flex:none;

        min-height:290px;
        height:290px;

        padding:28px;
    }

    #productoImagen{
        height:240px;
    }

    #productoImagen > img{
        max-width:75%;
        max-height:75%;
    }

    .productos-modal-info{
        flex:none;

        padding:34px;

        overflow:visible;
    }

    .productos-modal-titulo{
        font-size:2rem;
    }

}

@media(max-width:576px){

    .productos-modal{
        align-items:center;

        padding:12px;
    }

    .productos-modal-contenido{
        width:100%;
        max-height:92vh;

        border-radius:19px;
    }

    .productos-modal-imagen{
        min-height:225px;
        height:225px;

        padding:20px;
    }

    #productoImagen{
        height:190px;
    }

    #productoImagen > img{
        max-width:72%;
        max-height:72%;
    }

    .productos-modal-info{
        padding:25px 22px;

        gap:17px;
    }

    .productos-modal-categoria{
        font-size:.6rem;
    }

    .productos-modal-titulo{
        padding-right:35px;

        font-size:1.65rem;
    }

    .productos-modal-descripcion{
        padding:15px 16px;
    }

    .productos-color{
        width:31px;
        height:31px;
    }

    .productos-talla{
        min-width:43px;
        height:37px;

        padding:0 11px;

        font-size:.75rem;
    }

    .productos-modal-cerrar{
        top:13px;
        right:13px;

        width:38px;
        height:38px;

        border-radius:10px;
    }

    .productos-btn-principal{
        min-height:47px;
    }

}
@media(max-width:430px){

    .productos-modal{
        padding:8px;
    }

    .productos-modal-imagen{
        min-height:200px;
        height:200px;
    }

    #productoImagen{
        height:165px;
    }

    .productos-modal-info{
        padding:22px 18px;
    }

    .productos-modal-titulo{
        font-size:1.5rem;
    }

}

.producto-flip{
    position:relative;

    width:100%;
    height:100%;

    perspective:1200px;
}

.producto-flip-inner{
    position:relative;

    width:100%;
    height:100%;

    transform-style:preserve-3d;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);

    will-change:transform;
}

.producto-flip:hover .producto-flip-inner{
    transform:rotateY(180deg);
}

.producto-frente,
.producto-atras{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:10px;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.producto-atras{
    transform:rotateY(180deg);
}

.producto-frente img,
.producto-atras img{
    display:block;

    width:auto;
    height:auto;

    max-width:82%;
    max-height:82%;

    margin:auto;

    object-fit:contain;
    object-position:center;

    filter:
        drop-shadow(
            0 16px 22px rgba(15,10,55,.18)
        );

    transform:none !important;
}

#productoImagen .producto-flip{
    position:relative;

    width:100%;
    height:100%;

    perspective:1200px;
}


#productoImagen .producto-flip-inner{
    position:relative;

    width:100%;
    height:100%;

    transform-style:preserve-3d;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);
}


#productoImagen .producto-frente,
#productoImagen .producto-atras{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:12px;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}


#productoImagen .producto-atras{
    transform:rotateY(180deg);
}


#productoImagen .producto-frente img,
#productoImagen .producto-atras img{
    display:block;

    width:auto;
    height:auto;

    max-width:82%;
    max-height:82%;

    margin:auto;

    object-fit:contain;
    object-position:center;

    transform:none !important;
}


#productoImagen .producto-flip:hover
.producto-flip-inner{
    transform:rotateY(180deg);
}

.productos-card-imagen .producto-flip{
    width:100%;
    height:100%;
}


.productos-card-imagen .producto-frente,
.productos-card-imagen .producto-atras{
    padding:8px;
}


.productos-card-imagen .producto-frente img,
.productos-card-imagen .producto-atras img{
    max-width:88%;
    max-height:88%;
}

@media(max-width:992px){

    #productoImagen .producto-frente img,
    #productoImagen .producto-atras img{
        max-width:78%;
        max-height:78%;
    }


    .productos-card-imagen .producto-frente img,
    .productos-card-imagen .producto-atras img{
        max-width:85%;
        max-height:85%;
    }

}

@media(max-width:576px){

    #productoImagen .producto-frente,
    #productoImagen .producto-atras{
        padding:15px;
    }


    #productoImagen .producto-frente img,
    #productoImagen .producto-atras img{
        max-width:72%;
        max-height:72%;
    }


    .productos-card-imagen .producto-frente,
    .productos-card-imagen .producto-atras{
        padding:12px;
    }


    .productos-card-imagen .producto-frente img,
    .productos-card-imagen .producto-atras img{
        max-width:82%;
        max-height:82%;
    }

}
@media(max-width:430px){

    #productoImagen .producto-frente img,
    #productoImagen .producto-atras img{
        max-width:68%;
        max-height:68%;
    }


    .productos-card-imagen .producto-frente img,
    .productos-card-imagen .producto-atras img{
        max-width:80%;
        max-height:80%;
    }

}

.productos-formulario{
    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:#FFFFFF;
}

.productos-formulario::before{
    content:"";

    position:absolute;

    width:480px;
    height:480px;

    left:-360px;
    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(49,39,130,.04),
            transparent 68%
        );

    pointer-events:none;
}

.productos-formulario-grid{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(500px,1.18fr);

    align-items:start;

    gap:75px;
}

.productos-info{
    position:sticky;

    top:130px;

    max-width:520px;
}

.productos-info > span{
    display:flex;
    align-items:center;

    gap:11px;

    width:max-content;

    margin:0 0 18px;

    color:#312782;

    font-size:.7rem;
    font-weight:700;

    letter-spacing:1.8px;

    text-transform:uppercase;
}


.productos-info > span::before{
    content:"";

    width:28px;
    height:2px;

    border-radius:20px;

    background:#312782;
}

.productos-info h2{
    max-width:470px;

    margin:0 0 20px;

    color:#222126;

    font-size:2.8rem;
    line-height:1.15;

    letter-spacing:-1px;
}

.productos-info > p{
    max-width:500px;

    margin:0;

    color:#706E76;

    font-size:.92rem;
    line-height:1.8;
}

.producto-resumen{
    position:relative;

    width:100%;
    min-height:150px;

    margin-top:34px;

    padding:23px;

    overflow:hidden;

    border:1px solid rgba(49,39,130,.08);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #F9F8FD,
            #F3F1FA
        );

    box-shadow:
        0 10px 28px rgba(32,27,71,.045);
}

.producto-resumen::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #312782,
            #6555C7
        );
}

.productos-form-card{
    position:relative;

    padding:38px;

    overflow:hidden;

    border:1px solid rgba(49,39,130,.075);

    border-radius:24px;

    background:#F9F9FC;

    box-shadow:
        0 18px 45px rgba(32,27,71,.065);
}

.productos-form-card::before{
    content:"";

    position:absolute;

    width:230px;
    height:230px;

    right:-170px;
    top:-170px;

    border-radius:50%;

    border:1px solid rgba(49,39,130,.055);

    pointer-events:none;
}

.productos-form-card .productos-form-grid{
    display:grid;

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

    gap:20px;
}


.productos-form-group{
    display:flex;
    flex-direction:column;

    min-width:0;
}


.productos-form-group label{
    margin:0 0 8px;

    color:#3D3B43;

    font-size:.78rem;
    font-weight:600;
}
.productos-form-group input,
.productos-form-group textarea{
    width:100%;

    border:1px solid rgba(49,39,130,.09);

    border-radius:12px;

    outline:0;

    background:#FFFFFF;

    color:#222126;

    font-family:inherit;
    font-size:.86rem;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.productos-form-group input{
    height:49px;

    padding:0 15px;
}


.productos-form-group textarea{
    min-height:145px;

    margin-top:0;

    padding:14px 15px;

    resize:vertical;

    line-height:1.6;
}


.productos-form-group input:focus,
.productos-form-group textarea:focus{
    border-color:rgba(49,39,130,.55);

    background:#FFFFFF;

    box-shadow:
        0 0 0 4px rgba(49,39,130,.065);
}


.productos-form-group input::placeholder,
.productos-form-group textarea::placeholder{
    color:#A09DA6;
}
.productos-form-card form > .productos-form-group{
    margin-top:22px;
}

.productos-form-button{
    margin-top:24px;
}


.productos-form-button .btn-primary{
    width:100%;
    min-height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:13px 22px;

    border:0;
    border-radius:12px;

    background:#312782;

    color:#FFFFFF;

    font-family:inherit;
    font-size:.85rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 10px 24px rgba(49,39,130,.17);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.productos-form-button .btn-primary:hover{
    transform:translateY(-2px);

    background:#241D66;

    box-shadow:
        0 15px 31px rgba(49,39,130,.23);
}

.productos-toast{
    position:fixed;

    top:115px;
    right:28px;

    z-index:99999;

    min-width:300px;
    max-width:390px;

    display:flex;
    align-items:center;

    gap:13px;

    padding:16px 18px;

    border:1px solid rgba(49,39,130,.10);
    border-radius:14px;

    background:#FFFFFF;

    color:#222126;

    box-shadow:
        0 18px 45px rgba(32,27,71,.16);

    opacity:0;
    visibility:hidden;

    transform:
        translateX(35px)
        translateY(-5px);

    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;
}

.productos-toast i{
    width:38px;
    height:38px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;

    background:#E9F8EF;

    color:#269653;

    font-size:1rem;
}

.productos-toast span{
    color:#44424A;

    font-size:.83rem;
    font-weight:600;

    line-height:1.5;
}

.productos-toast.mostrar{
    opacity:1;
    visibility:visible;

    transform:
        translateX(0)
        translateY(0);

    pointer-events:auto;
}

.productos-toast::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:3px;

    border-radius:0 0 14px 14px;

    background:#269653;
}

@media(max-width:992px){

    .productos-formulario{
        padding:90px 0;
    }


    .productos-formulario-grid{
        grid-template-columns:1fr;

        max-width:760px;

        margin:auto;

        gap:42px;
    }


    .productos-info{
        position:static;

        max-width:650px;

        margin:auto;

        text-align:center;
    }


    .productos-info > span{
        justify-content:center;

        margin-left:auto;
        margin-right:auto;
    }


    .productos-info h2,
    .productos-info > p{
        margin-left:auto;
        margin-right:auto;
    }


    .producto-resumen{
        max-width:650px;

        margin:
            30px auto
            0;

        text-align:left;
    }


    .productos-form-card{
        width:100%;

        padding:35px;
    }

}

@media(max-width:576px){

    .productos-formulario{
        padding:70px 0;
    }


    .productos-formulario .container{
        width:90%;
    }


    .productos-formulario-grid{
        gap:32px;
    }


    .productos-info > span{
        margin-bottom:15px;

        font-size:.62rem;

        letter-spacing:1.15px;
    }


    .productos-info > span::before{
        width:21px;
    }


    .productos-info h2{
        margin-bottom:16px;

        font-size:1.95rem;

        line-height:1.2;
    }


    .productos-info > p{
        font-size:.87rem;

        line-height:1.7;
    }


    .producto-resumen{
        min-height:0;

        margin-top:25px;

        padding:19px;

        border-radius:15px;
    }


    .productos-form-card{
        padding:25px 22px;

        border-radius:19px;
    }

    .productos-form-card .productos-form-grid{
        grid-template-columns:1fr;

        gap:16px;
    }


    .productos-form-group label{
        font-size:.75rem;
    }


    .productos-form-group input{
        height:47px;

        font-size:.84rem;
    }


    .productos-form-group textarea{
        min-height:130px;

        font-size:.84rem;
    }


    .productos-form-card form > .productos-form-group{
        margin-top:17px;
    }


    .productos-form-button{
        margin-top:20px;
    }


    .productos-form-button .btn-primary{
        min-height:47px;

        font-size:.82rem;
    }

}
@media(max-width:430px){

    .productos-formulario{
        padding:60px 0;
    }


    .productos-info h2{
        font-size:1.8rem;
    }


    .productos-form-card{
        padding:22px 18px;
    }

}

@media(max-width:576px){

    .productos-toast{
        top:95px;

        left:50%;
        right:auto;

        width:calc(100% - 30px);
        min-width:0;
        max-width:420px;

        padding:14px 15px;

        transform:
            translate(-50%,-20px);
    }


    .productos-toast.mostrar{
        transform:
            translate(-50%,0);
    }


    .productos-toast i{
        width:35px;
        height:35px;

        border-radius:10px;

        font-size:.9rem;
    }


    .productos-toast span{
        font-size:.79rem;
    }

}

.productos-cta{
    position:relative;

    padding:100px 0;

    overflow:hidden;

    background:#F7F8FC;
}

.productos-cta-box{
    position:relative;

    min-height:330px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:70px;

    padding:65px 70px;

    overflow:hidden;

    border-radius:28px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(116,99,220,.22),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #21195F 0%,
            #312782 52%,
            #5044B2 100%
        );

    box-shadow:
        0 22px 55px rgba(49,39,130,.14);
}

.productos-cta-box::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-300px;
    top:-290px;

    border-radius:50%;

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

    box-shadow:
        0 0 0 55px rgba(255,255,255,.015);

    pointer-events:none;
}


.productos-cta-box::after{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:-230px;
    bottom:-230px;

    border-radius:50%;

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

    pointer-events:none;
}

.productos-cta-info{
    position:relative;

    z-index:2;

    max-width:680px;
}

.productos-cta-info > span{
    display:flex;
    align-items:center;

    gap:11px;

    width:max-content;

    margin:0 0 19px;

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

    font-size:.68rem;
    font-weight:700;

    letter-spacing:1.8px;

    text-transform:uppercase;
}


.productos-cta-info > span::before{
    content:"";

    width:27px;
    height:1px;

    background:rgba(255,255,255,.55);
}

.productos-cta-info h2{
    max-width:650px;

    margin:0 0 19px;

    color:#FFFFFF;

    font-size:2.65rem;
    font-weight:700;

    line-height:1.15;

    letter-spacing:-1px;
}

.productos-cta-info p{
    max-width:600px;

    margin:0;

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

    font-size:.92rem;

    line-height:1.8;
}

.productos-cta-botones{
    position:relative;

    z-index:2;

    flex-shrink:0;

    display:flex;
    align-items:center;
}


.productos-cta-botones .btn-primary{
    min-width:205px;
    min-height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:13px 24px;

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

    border-radius:13px;

    background:#FFFFFF;

    color:#312782;

    font-size:.84rem;
    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 12px 28px rgba(17,12,63,.18);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.productos-cta-botones .btn-primary:hover{
    transform:translateY(-3px);

    background:#F3F1FC;

    box-shadow:
        0 18px 36px rgba(17,12,63,.25);
}

@media(max-width:992px){

    .productos-cta{
        padding:85px 0;
    }


    .productos-cta-box{
        min-height:auto;

        flex-direction:column;

        align-items:center;

        gap:35px;

        padding:55px 45px;

        text-align:center;
    }


    .productos-cta-info{
        max-width:650px;
    }


    .productos-cta-info > span{
        justify-content:center;

        margin-left:auto;
        margin-right:auto;
    }


    .productos-cta-info h2,
    .productos-cta-info p{
        margin-left:auto;
        margin-right:auto;
    }


    .productos-cta-info h2{
        font-size:2.35rem;
    }

}

@media(max-width:576px){

    .productos-cta{
        padding:70px 0;
    }


    .productos-cta .container{
        width:90%;
    }


    .productos-cta-box{
        gap:28px;

        padding:45px 25px;

        border-radius:21px;
    }


    .productos-cta-info > span{
        margin-bottom:16px;

        font-size:.6rem;

        letter-spacing:1.15px;
    }


    .productos-cta-info > span::before{
        width:19px;
    }


    .productos-cta-info h2{
        margin-bottom:16px;

        font-size:1.95rem;

        line-height:1.2;
    }


    .productos-cta-info p{
        font-size:.86rem;

        line-height:1.7;
    }


    .productos-cta-botones{
        width:100%;
    }


    .productos-cta-botones .btn-primary{
        width:100%;
        min-width:0;
        min-height:47px;

        font-size:.81rem;
    }

}
@media(max-width:430px){

    .productos-cta{
        padding:60px 0;
    }


    .productos-cta-box{
        padding:38px 20px;
    }


    .productos-cta-info h2{
        font-size:1.75rem;
    }

}
@media (min-width:993px){

    .productos-modal{
        padding:20px;
    }

    .productos-modal-contenido{
        width:min(1080px, 92vw);

        height:min(720px, 88vh);
        max-height:88vh;

        grid-template-columns:
            minmax(340px, 44%)
            minmax(0, 56%);

        overflow:hidden;
    }

    .productos-modal-imagen{
        width:100%;

        min-height:0;
        height:100%;

        padding:32px;

        overflow:hidden;
    }

    #productoImagen{
        width:100%;
        height:100%;

        min-height:0;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    #productoImagen > img{
        width:auto;
        height:auto;

        max-width:88%;
        max-height:72%;

        object-fit:contain;
    }

    #productoImagen .producto-flip{
        width:100%;
        height:100%;
    }

    #productoImagen .producto-flip-inner{
        width:100%;
        height:100%;
    }

    #productoImagen .producto-frente,
    #productoImagen .producto-atras{
        padding:20px;
    }

    #productoImagen .producto-frente img,
    #productoImagen .producto-atras img{
        width:auto;
        height:auto;

        max-width:88%;
        max-height:72%;

        object-fit:contain;
    }

    .productos-modal-info{
        height:100%;
        min-height:0;

        padding:34px 38px;

        gap:14px;

        overflow-y:auto;
        overscroll-behavior:contain;

        scrollbar-width:thin;
        scrollbar-color:
            rgba(49,39,130,.28)
            transparent;
    }


    .productos-modal-categoria{
        padding:6px 11px;
    }

    .productos-modal-titulo{
        padding-right:45px;

        font-size:2rem;
        line-height:1.08;
    }

    .productos-modal-descripcion{
        margin:0;

        padding:14px 16px;
    }

    .productos-modal-descripcion h4{
        margin-bottom:5px;
    }

    .productos-modal-descripcion p{
        line-height:1.5;
    }

    .productos-modal-opciones h4{
        margin-bottom:9px;
    }

    .productos-colores{
        gap:8px;
    }

    .productos-color{
        width:31px;
        height:31px;
    }

    .productos-texto-seleccion{
        margin-top:7px;
    }

    .productos-tallas{
        gap:7px;
    }

    .productos-talla{
        height:36px;

        min-width:43px;

        padding:0 11px;
    }

    .productos-modal-cantidad > label{
        margin-bottom:7px;
    }

    .productos-cantidad-control button{
        width:39px;
        height:39px;
    }

    .productos-cantidad-control input{
        height:39px;
    }

    .productos-btn-principal{
        min-height:46px;

        margin-top:2px;
    }

}

@media (min-width:993px) and (max-height:750px){

    .productos-modal{
        padding:14px;
    }

    .productos-modal-contenido{
        width:min(1020px, 92vw);

        height:92vh;
        max-height:92vh;

        grid-template-columns:
            42%
            58%;

        border-radius:22px;
    }

    .productos-modal-imagen{
        padding:25px;
    }

    #productoImagen > img,
    #productoImagen .producto-frente img,
    #productoImagen .producto-atras img{
        max-width:82%;
        max-height:65%;
    }

    .productos-modal-info{
        padding:26px 32px;

        gap:10px;
    }

    .productos-modal-categoria{
        padding:5px 10px;

        font-size:.6rem;
    }

    .productos-modal-titulo{
        font-size:1.75rem;
    }

    .productos-modal-referencia span{
        font-size:.66rem;
    }

    .productos-modal-descripcion{
        padding:11px 14px;
    }

    .productos-modal-descripcion h4{
        margin-bottom:3px;

        font-size:.76rem;
    }

    .productos-modal-descripcion p{
        font-size:.8rem;
        line-height:1.4;
    }

    .productos-modal-opciones h4,
    .productos-modal-cantidad > label{
        font-size:.76rem;
    }

    .productos-colores{
        gap:6px;
    }

    .productos-color{
        width:28px;
        height:28px;

        border-width:2px;
    }

    .productos-texto-seleccion{
        margin-top:5px;

        font-size:.7rem;
    }

    .productos-talla{
        min-width:40px;
        height:33px;

        padding:0 9px;

        font-size:.72rem;
    }

    .productos-cantidad-control button{
        width:36px;
        height:36px;
    }

    .productos-cantidad-control input{
        width:52px;
        height:36px;
    }

    .productos-btn-principal{
        min-height:42px;

        padding:10px 16px;

        font-size:.78rem;
    }

    .productos-modal-cerrar{
        top:13px;
        right:13px;

        width:37px;
        height:37px;
    }

}

.productos-carrito-flotante{
    position:fixed;

    right:28px;
    bottom:105px;

    z-index:9000;

    min-height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    padding:0 17px;

    border:0;
    border-radius:15px;

    background:#312782;

    color:#FFFFFF;

    font-family:inherit;
    font-size:.8rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 14px 34px rgba(49,39,130,.28);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.productos-carrito-flotante:hover{
    transform:translateY(-3px);

    background:#241D66;

    box-shadow:
        0 18px 40px rgba(49,39,130,.34);
}


.productos-carrito-flotante > i{
    font-size:1rem;
}


.productos-carrito-texto{
    white-space:nowrap;
}


.productos-carrito-contador{
    min-width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 6px;

    border-radius:50px;

    background:#FFFFFF;

    color:#312782;

    font-size:.7rem;
    font-weight:800;
}

.productos-carrito{
    position:fixed;

    inset:0;

    z-index:10000;

    visibility:hidden;

    pointer-events:none;
}


.productos-carrito.productos-carrito-activo{
    visibility:visible;

    pointer-events:auto;
}

.productos-carrito-overlay{
    position:absolute;

    inset:0;

    background:rgba(19,16,39,.60);

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    opacity:0;

    transition:opacity .35s ease;
}


.productos-carrito.productos-carrito-activo
.productos-carrito-overlay{
    opacity:1;
}

.productos-carrito-panel{
    position:absolute;

    top:0;
    right:0;

    width:min(460px, 92vw);
    height:100%;

    display:flex;
    flex-direction:column;

    background:#FFFFFF;

    box-shadow:
        -20px 0 55px rgba(20,15,60,.18);

    transform:translateX(105%);

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1);
}


.productos-carrito.productos-carrito-activo
.productos-carrito-panel{
    transform:translateX(0);
}

.productos-carrito-header{
    flex-shrink:0;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding:30px 28px 24px;

    border-bottom:
        1px solid rgba(49,39,130,.08);
}


.productos-carrito-header span{
    display:block;

    margin-bottom:6px;

    color:#312782;

    font-size:.63rem;
    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.productos-carrito-header h2{
    margin:0;

    color:#222126;

    font-size:1.75rem;
    font-weight:700;

    line-height:1.15;

    letter-spacing:-.5px;
}


.productos-carrito-cerrar{
    width:40px;
    height:40px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:
        1px solid rgba(49,39,130,.09);

    border-radius:11px;

    background:#F8F7FC;

    color:#312782;

    font-size:.95rem;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.productos-carrito-cerrar:hover{
    transform:rotate(5deg);

    background:#312782;

    color:#FFFFFF;
}

.productos-carrito-lista{
    flex:1;

    min-height:0;

    padding:20px 22px;

    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(49,39,130,.25)
        transparent;
}

.productos-carrito-item{
    position:relative;

    padding:19px;

    margin-bottom:14px;

    border:
        1px solid rgba(49,39,130,.08);

    border-radius:16px;

    background:#F9F8FD;

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


.productos-carrito-item:hover{
    border-color:
        rgba(49,39,130,.16);

    box-shadow:
        0 9px 24px rgba(49,39,130,.06);
}


.productos-carrito-item-info > span{
    display:inline-block;

    margin-bottom:7px;

    color:#312782;

    font-size:.61rem;
    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;
}


.productos-carrito-item-info h3{
    margin:0 0 10px;

    color:#222126;

    font-size:1rem;
    font-weight:700;

    line-height:1.3;
}


.productos-carrito-item-info p{
    margin:4px 0;

    color:#706E76;

    font-size:.77rem;

    line-height:1.45;
}


.productos-carrito-item-info p strong{
    color:#45424B;

    font-weight:700;
}

.productos-carrito-item-acciones{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-top:16px;

    padding-top:14px;

    border-top:
        1px solid rgba(49,39,130,.07);
}

.productos-carrito-cantidad{
    display:flex;
    align-items:center;

    overflow:hidden;

    border:
        1px solid rgba(49,39,130,.10);

    border-radius:10px;

    background:#FFFFFF;
}


.productos-carrito-cantidad button{
    width:35px;
    height:35px;

    padding:0;

    border:0;

    background:#F5F4FA;

    color:#312782;

    font-size:1rem;
    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.productos-carrito-cantidad button:hover{
    background:#312782;

    color:#FFFFFF;
}


.productos-carrito-cantidad input{
    width:50px;
    height:35px;

    padding:0;

    border:0;
    outline:0;

    background:#FFFFFF;

    color:#222126;

    text-align:center;

    font-family:inherit;
    font-size:.78rem;
    font-weight:700;

    appearance:textfield;
    -moz-appearance:textfield;
}


.productos-carrito-cantidad
input::-webkit-inner-spin-button,
.productos-carrito-cantidad
input::-webkit-outer-spin-button{
    margin:0;

    -webkit-appearance:none;
}

.productos-carrito-eliminar{
    width:37px;
    height:37px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:0;
    border-radius:10px;

    background:#FFF0F1;

    color:#C83D4A;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.productos-carrito-eliminar:hover{
    transform:translateY(-2px);

    background:#C83D4A;

    color:#FFFFFF;
}

.productos-carrito-vacio{
    flex:1;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:45px 35px;

    text-align:center;
}


.productos-carrito-vacio > i{
    width:65px;
    height:65px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:18px;

    border-radius:18px;

    background:#F1EEFC;

    color:#312782;

    font-size:1.45rem;
}


.productos-carrito-vacio h3{
    margin:0 0 8px;

    color:#222126;

    font-size:1.05rem;
}


.productos-carrito-vacio p{
    max-width:270px;

    margin:0;

    color:#77757D;

    font-size:.8rem;

    line-height:1.6;
}

.productos-carrito-footer{
    flex-shrink:0;

    padding:21px 22px 24px;

    border-top:
        1px solid rgba(49,39,130,.08);

    background:#FFFFFF;
}


.productos-carrito-total{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:14px;
}


.productos-carrito-total span{
    color:#706E76;

    font-size:.78rem;
}


.productos-carrito-total strong{
    min-width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 8px;

    border-radius:9px;

    background:#F1EEFC;

    color:#312782;

    font-size:.8rem;
    font-weight:800;
}

.productos-carrito-vaciar{
    width:100%;

    margin-bottom:10px;

    padding:10px 15px;

    border:0;

    background:transparent;

    color:#8A8790;

    font-family:inherit;
    font-size:.75rem;
    font-weight:600;

    cursor:pointer;

    transition:color .25s ease;
}


.productos-carrito-vaciar:hover{
    color:#C83D4A;
}


.productos-carrito-vaciar:disabled{
    opacity:.4;

    cursor:not-allowed;
}

.productos-carrito-footer
.productos-btn-principal{
    margin:0;
}


.productos-carrito-footer
.productos-btn-principal:disabled{
    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;
}

.producto-resumen-lista{
    display:flex;
    flex-direction:column;

    gap:11px;

    margin-top:15px;
}


.producto-resumen > h3{
    margin:0;

    color:#222126;

    font-size:1rem;
    font-weight:700;
}


.producto-resumen-item{
    display:flex;
    flex-direction:column;

    gap:4px;

    padding:13px 14px;

    border:
        1px solid rgba(49,39,130,.07);

    border-radius:11px;

    background:#FFFFFF;
}


.producto-resumen-item strong{
    color:#312782;

    font-size:.78rem;

    line-height:1.4;
}


.producto-resumen-item span{
    color:#706E76;

    font-size:.72rem;

    line-height:1.4;
}

@media(max-width:576px){

    .productos-carrito-flotante{
        right:18px;
        bottom:92px;

        min-height:48px;

        padding:0 14px;

        border-radius:14px;
    }


    .productos-carrito-texto{
        display:none;
    }


    .productos-carrito-panel{
        width:100%;
        max-width:none;
    }


    .productos-carrito-header{
        padding:
            23px
            20px
            19px;
    }


    .productos-carrito-header h2{
        font-size:1.5rem;
    }


    .productos-carrito-lista{
        padding:16px;
    }


    .productos-carrito-item{
        padding:16px;

        border-radius:14px;
    }


    .productos-carrito-footer{
        padding:
            18px
            16px
            20px;
    }

}

.productos-carrito-vacio{
    width:100%;
    flex:1;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:45px 30px;

    text-align:center;
}

.productos-carrito-vacio > i{
    margin-left:auto;
    margin-right:auto;
}

.productos-carrito-vacio h3{
    width:100%;

    margin:
        18px auto
        8px;

    text-align:center;
}

.productos-carrito-vacio p{
    width:100%;
    max-width:300px;

    margin:
        0 auto;

    text-align:center;
}

.productos-carrito-total{
    justify-content:center;

    position:relative;

    text-align:center;
}

.productos-carrito-total strong{
    position:absolute;
    right:0;
}

.productos-carrito-vaciar{
    display:block;

    text-align:center;
}

.productos-carrito-lista{
    width:100%;

    flex:1;
    min-height:0;

    flex-direction:column;

    gap:14px;

    padding:20px 22px;

    overflow-y:auto;
    overflow-x:hidden;
}

.productos-carrito-lista .productos-carrito-item{
    width:100%;

    flex:none;

    margin-bottom:0;
}

.productos-carrito-vacio{
    width:100%;

    flex:1;
    min-height:0;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.productos-carrito-footer{
    width:100%;

    flex:none;

    margin-top:auto;
}


@media(max-width:576px){

    .productos-carrito-lista{
        padding:16px;
        gap:12px;
    }

}