<style>

*{
    font-family:'Poppins',sans-serif;
}

body{
    background:#fff7fb;
}

/* NAVBAR */

.navbar{
   /* background:
    linear-gradient(
        135deg,
        var(--principal),
        var(--secundario)
    );*/
    
        background: var(--principal)
}

.logo{
    font-size:28px;
    font-weight:bold;
    color:white;
    text-decoration:none;
}

/* TITULO */

.titulo{
    font-size:26px;
    font-weight:500;
    color:var(--secundario);
}

/* CARD */

.card-principal{
    border:none;
    border-radius:25px;
    overflow:hidden;
}

.card-producto-carrito{
    border:none;
    border-radius:22px;
    background:white;
    transition:0.3s;
}

.card-producto-carrito:hover{
    transform:translateY(-4px);
}

.imagen{
    width:100%;
    height:220px;
    object-fit:cover;
    object-position:center;
    border-radius:18px;
}

.precio{
    font-size:24px;
    font-weight:bold;
   color:var(--principal);
}

/* BOTONES */

.btn-custom{
    border-radius:50px;
    font-weight:600;
    padding:10px 18px;
    border:none;
}

.btn-rosa{
    background:var(--principal);
    color:white;
}

.btn-rosa:hover{
    background:#b44d75;
    color:white;
}

.btn-outline-rosa{
    border:2px solid #c85c86;
    color:#c85c86;
    background:white;
}

.btn-outline-rosa:hover{
    background:var(--principal);
    color:white;
}

.btn-danger{
    border-radius:50px;
}

/* TOTAL */

.total-box{
     background:
    linear-gradient(
        135deg,
        var(--principal),
        var(--secundario)
    );
    color:white;
    border-radius:28px;
    box-shadow:
    0 15px 35px rgba(212,106,146,.18);
    padding:25px;
      text-align:center;
}

.total-precio{
    font-size:48px;
    font-weight:800;
}

/* ALERTAS */

.alert{
    border:none;
    border-radius:18px;
}

.form-control,
.form-select{

    border-radius:16px;

    border:2px solid #f3d2df;

    padding:12px 16px;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--principal);

    box-shadow:none;

}



/* RESPONSIVE */

@media(max-width:768px){

    .titulo{
        font-size:28px;
    }

    .imagen{
        height:220px;
        margin-bottom:15px;
    }

    .total-precio{
        font-size:30px;
    }

}

/* FONDO OSCURO PREMIUM */

.modal-premium .modal-content{
    transform:none !important;
}
.modal.fade .modal-dialog{
    transform:scale(.8);
    transition:0.3s ease;
}

.modal.show .modal-dialog{
    transform:scale(1);
}

/* ANIMACION */

@keyframes modalEntrada{

    0%{
        transform:translateY(40px) scale(0.92);
        opacity:0;
    }

    100%{
        transform:translateY(0) scale(1);
        opacity:1;
    }

}

/* HEADER */

.modal-premium-header{
    background:
    linear-gradient(135deg,var(--principal),var(--secundario));

    padding:35px 25px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.modal-premium-header::before{
    content:'';
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(255,255,255,0.10);
    border-radius:50%;
    top:-90px;
    right:-80px;
}

/* ICONO */

.icono-premium{
    width:90px;
    height:90px;
    border-radius:50%;
    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto;

    font-size:42px;
    color:#d46a92;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.15);

    animation:latido 1.6s infinite;
}

@keyframes latido{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.07);
    }

    100%{
        transform:scale(1);
    }

}

/* TITULO */

.titulo-premium{
    color:white;
    font-size:34px;
    font-weight:800;
    margin-top:22px;
}

/* BODY */

.modal-premium-body{
    padding:35px 30px;
    text-align:center;
}

.modal-premium-body p{
    color:#666;
    font-size:16px;
    line-height:1.8;
}

/* BOTONES */

.btn-premium{
    border:none;
    border-radius:18px;
    padding:15px;
    font-weight:700;
    transition:0.3s;
}

.btn-whatsapp{
    background:
    linear-gradient(135deg,#25D366,#1ebe5d);

    color:white;
}

.btn-whatsapp:hover{
    transform:translateY(-3px);
    color:white;
}

.btn-premium-light{
    background:#fff0f5;
    color:#c85c86;
}

.btn-premium-light:hover{
    background:#ffdbe9;
    color:#c85c86;
}

/* RESPONSIVE */

@media(max-width:768px){

    .modal-dialog{
        margin:14px;
    }

    .titulo-premium{
        font-size:28px;
    }

    .modal-premium-body{
        padding:28px 22px;
    }

}


.btn-outline-rosa{
    border:2px solid #ec4899;
    color:#ec4899;
    background:white;

    transition:.3s;

    font-weight:600;

    padding:10px 16px;

    border-radius:14px !important;

    text-align:center;

    font-size:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
}

/* HOVER */

.btn-outline-rosa:hover{
    background:#ec4899;
    color:white;
    transform:translateY(-2px);
}

/* ACTIVO */

.btn-check:checked + .btn-outline-rosa{

    background:
    linear-gradient(135deg,#ec4899,#db2777);

    color:white;

    border-color:#db2777;

    box-shadow:
    0 6px 16px rgba(236,72,153,.25);

}

/* CELULAR */

@media(max-width:768px){

    .asesoras-container{
        display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:10px;
    }

    .btn-outline-rosa{
        width:100%;
    }

}
/* =========================
   BOTON FINALIZAR
========================= */

.btn-finalizar{

    width:100%;

    border:none;

    border-radius:14px;

    padding:12px 18px;

    margin-top:18px;

    background:
    linear-gradient(135deg,#25D366,#1ebe5d);

    color:white;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    transition:.25s;

    box-shadow:
    0 6px 18px rgba(37,211,102,.20);

}

/* ICONO */

.btn-finalizar i{
    font-size:18px;
}

/* HOVER */

.btn-finalizar:hover{

    transform:translateY(-2px);

    color:white;

    background:
    linear-gradient(135deg,#22c55e,#16a34a);

}

/* CELULAR */

@media(max-width:768px){

    .btn-finalizar{

        padding:13px;

        font-size:14px;

    }

}

/* =========================
   AVISO STOCK
========================= */

.aviso-stock{
    background:
    linear-gradient(135deg,#fff7e6,#fff0f5);
    border-left:6px solid var(--secundario) !important;
    padding:18px 20px;
    max-width:900px;

    margin:auto;

    margin-bottom:20px;
}

.icono-alerta{
    min-width:55px;
    height:55px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff3cd;
    color:#ff9800;
    font-size:24px;
}

.aviso-stock h6{
    color:var(--secundario);
    font-size:17px;
}

.aviso-stock p{
    color:#555;
    line-height:1.6;
    font-size:14px;
}

/* RESPONSIVE */

@media(max-width:768px){

    .aviso-stock{
        padding:15px;
    }

    .icono-alerta{
        width:48px;
        height:48px;
        font-size:20px;
    }

    .aviso-stock h6{
        font-size:15px;
    }

    .aviso-stock p{
        font-size:13px;
    }

}
/* =========================
   COMPRA SEGURA
========================= */

.alert-compra-segura{

    background:#ffffff;

    border:1px solid #f3d2de;

    border-radius:18px;

    padding:16px;

    margin:18px 0;

    display:flex;

    align-items:flex-start;

    gap:14px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.05);

}

.icono-seguro{

    font-size:28px;

    line-height:1;

    flex-shrink:0;

}

.contenido-seguro h6{

    color:#c85c86;

    font-weight:700;

    margin-bottom:6px;

}

.contenido-seguro p{

    margin:0;

    color:#555;

    font-size:14px;

    line-height:1.5;

}

.texto-privacidad{

    display:block;

    text-align:center;

    margin-top:12px;

    color:var(--principal);

    font-size:11px;
     opacity:.8;

    line-height:1.5;

}

.mensaje-confianza{

    text-align:center;

    font-weight:700;

    color:var(--secundario);

    font-size:18px;

    margin-bottom:5px;

}

.texto-confianza{

    display:block;

    text-align:center;

    color:var(--principal);

    font-size:13px;

    margin-bottom:15px;

}

/* ===================================
   PRODUCTOS CARRITO RESPONSIVE
=================================== */

.card-producto-carrito{

    background:#fff;

    border-radius:22px;

    padding:18px;

    margin-bottom:20px;

    overflow:hidden;

    transition:.3s;



}

.card-producto-carrito h6{

    font-weight:700;

    min-height:48px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

}

.card-producto-carrito:hover{

    transform:translateY(-2px);

}

.imagen{

    width:100%;

    border-radius:16px;

    object-fit:cover;

    padding: 10px;

}

/* MOVIL */

@media(max-width:768px){

    .card-producto-carrito{

        padding:12px;

    }

    .card-producto-carrito .row{

        display:block;

    }

    .card-producto-carrito.col-md-3,
    .card-producto-carrito.col-md-5,
    .card-producto-carrito.col-md-2{

        width:100%;

        max-width:100%;

    }

    .imagen{

        height:220px;

        width:100%;

        object-fit:cover;

        margin-bottom:12px;

    }

    .card-producto-carrito h4{

        font-size:15px;

        min-height:40px;

    }

    .precio{

        font-size:18px;

        font-weight:700;

        color:#d63384;

        margin-top:10px;

    }

    .card-producto-carrito{

        width:calc(50% - 8px);

        display:inline-block;

        vertical-align:top;

        margin-right:8px;

    }

    .card-producto-carrito:nth-child(2n){

        margin-right:0;

    }

}

@media(max-width:768px){

    .card-producto-carrito .btn-danger{

        padding:6px 10px;

        font-size:12px;

    }

}

@media(max-width:768px){

    .modelo-producto{
        display:none;
    }

}

.asesoras-container{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:20px;

}

.asesora-card{

    cursor:pointer;

}

.asesora-card input{

    display:none;

}

.asesora-nombre{

    background:#fff;

    border:2px solid #f3d2df;

    border-radius:18px;

    padding:15px;

    text-align:center;

    transition:.3s;

    box-shadow:
    0 4px 12px rgba(0,0,0,.05);

    height:100%;

}

.nombre-asesora{

    font-weight:700;

    color:#d63384;

    margin-bottom:8px;

}

.asesora-texto{

    font-size:12px;

    color:#666;

    line-height:1.5;

}

.asesora-card:hover .asesora-nombre{

    border-color:#d63384;

}

.asesora-card input:checked + .asesora-nombre{

     background:var(--principal);

    border-color:var(--principal);

    color:#fff;
    box-shadow:
    0 12px 25px rgba(214,51,132,.25);

    border-color:#d63384;

    transform:scale(1.03);

}

.asesora-card input:checked + .asesora-nombre .nombre-asesora,

.asesora-card input:checked + .asesora-nombre .asesora-texto{

    color:#fff;

}

.asesora-ayuda{

    text-align:center;

    font-size:13px;

    color:var(--principal);

    margin-top:10px;

}

.asesora-nombre{

    background:#fff;

    border:2px solid #f3d2df;

    border-radius:18px;

    padding:14px;

    text-align:center;

    font-weight:600;

    color:#d63384;

    transition:.25s;

}

.asesora-fija{

    background:#fff;

    border:2px solid var(--secundario);

    border-radius:18px;

    padding:16px;

    text-align:center;

    margin-bottom:20px;

}

.asesora-fija .titulo{

    font-size:13px;

    font-weight:700;

    color:var(--secundario);

    text-transform:uppercase;

    margin-bottom:8px;

    letter-spacing:.5px;

}

.asesora-fija .nombre{

    font-size:28px;

    font-weight:700;

    color:#222;

    margin-bottom:6px;

}

.asesora-fija .descripcion{

    font-size:13px;

    color:#333 !important;

    font-weight:500;

}
</style>