/* =========================
   AJUSTES FINALES DEL CARRITO
========================= */

.pagina-carrito {
    padding: 50px 8%;
}


/* CONTENEDOR DE PRODUCTOS */

#listaCarrito {
    max-width: 900px;
}


/* TARJETA ROSA DEL PRODUCTO */

#listaCarrito .item-carrito {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 25px;

    background-color: #f4c8d6;

    padding: 20px;

    margin-bottom: 20px;

    border-radius: 20px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}


/* IMAGEN */

#listaCarrito .item-carrito img {
    width: 100px !important;
    height: 120px !important;

    object-fit: cover;

    border-radius: 15px;

    flex-shrink: 0;
}


/* INFORMACIÓN */

#listaCarrito .info-carrito {
    flex: 1;
}

#listaCarrito .info-carrito h3 {
    font-size: 20px;

    margin-bottom: 6px;
}

#listaCarrito .info-carrito p {
    margin-bottom: 5px;
}


/* BOTÓN ELIMINAR */

#listaCarrito .eliminar-producto {
    background-color: #d68fa7;

    color: white;

    border: none;

    padding: 11px 20px;

    border-radius: 25px;

    cursor: pointer;

    font-size: 14px;
}

#listaCarrito .eliminar-producto:hover {
    background-color: #b86f88;
}


/* CUADRO DEL TOTAL */

.resumen-carrito {
    max-width: 900px;

    background-color: #f4c8d6;

    padding: 25px;

    margin-top: 30px;

    border-radius: 20px;

    font-size: 24px;
}/* =========================
   CORRECCIÓN DEL ENCABEZADO
========================= */

.encabezado {
    width: 100%;
    height: 90px;

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

    padding: 0 50px;

    background-color: #f4c8d6;

    position: sticky;
    top: 0;
    z-index: 1000;
}


/* LOGO PEQUEÑO */

.encabezado .marca {
    display: flex;
    align-items: center;
    gap: 12px;
}


.encabezado .marca img {
    width: 65px !important;
    height: 65px !important;

    max-width: 65px !important;
    max-height: 65px !important;

    object-fit: cover;

    border-radius: 50%;
}


.encabezado .marca span {
    font-size: 20px;

    letter-spacing: 5px;
}


/* MENÚ */

.encabezado nav {
    display: flex;

    align-items: center;

    gap: 30px;
}


.encabezado nav a {
    color: black;

    text-decoration: none;

    font-size: 15px;
}


.encabezado nav a:hover {
    color: #a85e78;
}


/* CARRITO DE ARRIBA */

.encabezado .carrito {
    display: inline-block;

    background-color: white;

    color: black;

    text-decoration: none;

    padding: 12px 20px;

    border-radius: 25px;
}/* =========================
   CORRECCIÓN DE LA PORTADA
========================= */

.portada {
    min-height: 650px;

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

    gap: 60px;

    padding: 60px 10%;

    background-color: #f8dce5;

    overflow: hidden;
}


.portada-texto {
    width: 50%;
    max-width: 650px;
}


.portada-imagen {
    width: 400px;
    flex-shrink: 0;
}


.portada-imagen img {
    width: 400px !important;
    max-width: 400px !important;
    height: auto !important;

    display: block;

    border-radius: 30px;

    object-fit: cover;
}/* =========================
   CORRECCIÓN GENERAL
========================= */

/* PORTADA */

.portada {
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;

    padding: 60px 10%;

    background-color: #f8dce5;
}

.portada-texto {
    width: 50%;
    max-width: 650px;
}

.portada-imagen {
    width: 400px;
    flex-shrink: 0;
}

.portada-imagen img {
    width: 400px !important;
    max-width: 400px !important;
    height: auto !important;

    display: block;

    border-radius: 30px;
}


/* CATÁLOGO */

.catalogo {
    padding: 80px 10%;

    background-color: #fff5f8;
}

.catalogo h2 {
    text-align: center;

    font-size: 40px;

    margin-bottom: 50px;
}

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

    gap: 30px;
}


/* TARJETA DEL PRODUCTO */

.producto {
    width: 280px;

    background-color: white;

    padding: 20px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.producto img {
    width: 240px !important;
    height: 300px !important;

    max-width: 240px !important;

    object-fit: cover;

    display: block;

    margin: 0 auto 15px;

    border-radius: 15px;
}/* =========================
   CORRECCIÓN DE ENLACES DEL CATÁLOGO
========================= */

.producto .nombre-producto {
    display: block;

    color: #111 !important;

    text-decoration: none !important;
}

.producto .nombre-producto:visited {
    color: #111 !important;
}


.producto .boton-producto {
    display: inline-block;

    background-color: #d68fa7;

    color: white !important;

    text-decoration: none !important;

    padding: 12px 22px;

    border-radius: 25px;

    margin-top: 5px;

    transition: 0.2s;
}

.producto .boton-producto:visited {
    color: white !important;
}

.producto .boton-producto:hover {
    background-color: #b86f88;
}/* =========================
   CORRECCIÓN PÁGINA PRODUCTO
========================= */

.detalle-producto {
    width: 100%;

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

    gap: 80px;

    padding: 60px 10%;

    background-color: #f8dce5;
}


/* COLUMNA DE LA FOTO */

.detalle-producto .detalle-imagen {
    width: 450px !important;
    max-width: 450px !important;

    flex: 0 0 450px;
}


/* FOTO PRINCIPAL */

.detalle-producto .imagen-principal {
    width: 450px !important;
    max-width: 450px !important;
    height: 600px !important;

    display: block;

    object-fit: cover;

    border-radius: 25px;
}


/* MINIATURAS */

.detalle-producto .variantes {
    display: flex;

    gap: 12px;

    margin-top: 15px;
}

.detalle-producto .variante {
    width: 80px !important;
    height: 80px !important;

    object-fit: cover;

    border-radius: 10px;
}


/* INFORMACIÓN DE LA DERECHA */

.detalle-producto .detalle-info {
    width: 450px !important;
    max-width: 450px !important;

    flex: 0 0 450px;
}


/* CELULAR */

@media (max-width: 800px) {

    .detalle-producto {
        flex-direction: column !important;

        padding: 40px 20px;

        gap: 35px;
    }

    .detalle-producto .detalle-imagen,
    .detalle-producto .detalle-info {
        width: 100% !important;
        max-width: 100% !important;

        flex: auto;
    }

    .detalle-producto .imagen-principal {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

}/* =========================================
   CORRECCIÓN DEFINITIVA DEL ENCABEZADO
========================================= */

body {
    margin: 0 !important;
    overflow-x: hidden !important;
    font-family: Arial, sans-serif !important;
}


/* BARRA COMPLETA */

.encabezado {
    width: 100% !important;
    max-width: none !important;
    height: 90px !important;

    margin: 0 !important;
    padding: 0 4% !important;

    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;

    align-items: center !important;

    background-color: #f4c8d6 !important;

    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 1000 !important;
}


/* LOGO + INFINITY */

.encabezado .marca {
    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    transform: none !important;

    justify-self: start !important;
}


.encabezado .marca img {
    width: 65px !important;
    height: 65px !important;

    min-width: 65px !important;
    max-width: 65px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    margin: 0 !important;
}


.encabezado .marca span {
    font-family: Arial, sans-serif !important;

    font-size: 20px !important;

    letter-spacing: 5px !important;

    white-space: nowrap !important;
}


/* MENÚ CENTRADO */

.encabezado nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 35px !important;

    margin: 0 !important;

    justify-self: center !important;
}


.encabezado nav a {
    font-family: Arial, sans-serif !important;

    font-size: 15px !important;

    color: #111 !important;

    text-decoration: none !important;
}


.encabezado nav a:hover {
    color: #a85e78 !important;
}


/* CARRITO DERECHA */

.encabezado .carrito {
    justify-self: end !important;

    display: inline-block !important;

    background-color: white !important;

    color: #111 !important;

    text-decoration: none !important;

    padding: 12px 20px !important;

    border-radius: 30px !important;

    border: none !important;

    white-space: nowrap !important;

    font-family: Arial, sans-serif !important;
}


/* =========================================
   CORREGIR TEXTO Y BOTÓN DEL PRODUCTO
========================================= */

.detalle-info {
    font-family: Arial, sans-serif !important;
}


.detalle-info h1 {
    font-family: Arial, sans-serif !important;

    font-size: 50px !important;

    font-weight: 700 !important;
}


.boton-comprar {
    background-color: #d68fa7 !important;

    color: white !important;

    border: none !important;

    padding: 15px 30px !important;

    border-radius: 30px !important;

    font-family: Arial, sans-serif !important;

    cursor: pointer !important;
}


.boton-comprar:hover {
    background-color: #b86f88 !important;
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 800px) {

    .encabezado {
        padding: 0 15px !important;

        grid-template-columns: auto 1fr auto !important;
    }

    .encabezado .marca span {
        display: none !important;
    }

    .encabezado nav {
        gap: 15px !important;
    }

    .encabezado nav a {
        font-size: 13px !important;
    }

    .encabezado .carrito {
        padding: 10px 14px !important;

        font-size: 12px !important;
    }
}/* AJUSTE FINAL DE LA BARRA SUPERIOR */

.encabezado {
    box-sizing: border-box !important;

    width: 100% !important;

    padding-left: 50px !important;
    padding-right: 50px !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr) !important;
}

.encabezado .carrito {
    justify-self: end !important;

    margin-right: 0 !important;

    max-width: 100% !important;
}/* FONDO ROSA DE LA PÁGINA DEL CARRITO */

.pagina-carrito {
    background-color: #f8dce5 !important;

    min-height: calc(100vh - 90px);
}/* CONTROLES DE CANTIDAD */

.cantidad-producto {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 15px;
}


.cantidad-producto button {
    width: 35px;
    height: 35px;

    background-color: white;

    color: #111;

    border: 1px solid #d68fa7;

    border-radius: 50%;

    cursor: pointer;

    font-size: 20px;
}


.cantidad-producto button:hover {
    background-color: #d68fa7;

    color: white;
}


.cantidad-producto span {
    font-weight: bold;

    font-size: 17px;
}/* =========================================
   CORRECCIÓN FINAL DE LA PORTADA
========================================= */

.portada-texto .subtitulo {
    color: #a85e78 !important;
    letter-spacing: 4px !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
}

.portada-texto h1 {
    color: #111 !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-bottom: 25px !important;
}

.portada-texto .descripcion {
    color: #111 !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}


/* BOTÓN VER CATÁLOGO */

.portada-texto .boton {
    display: inline-block !important;

    background-color: #d68fa7 !important;
    color: white !important;

    text-decoration: none !important;

    padding: 14px 28px !important;

    border-radius: 30px !important;

    font-size: 15px !important;

    transition: 0.2s !important;
}

.portada-texto .boton:visited {
    color: white !important;
}

.portada-texto .boton:hover {
    background-color: #b86f88 !important;
}/* =========================
   BOTÓN FINALIZAR COMPRA
========================= */

.boton-checkout {
    display: inline-block;

    margin-top: 20px;

    background-color: #d68fa7;
    color: white !important;

    text-decoration: none;

    padding: 15px 30px;

    border-radius: 30px;

    font-weight: bold;

    transition: 0.2s;
}

.boton-checkout:hover {
    background-color: #b86f88;
}/* =========================
   CHECKOUT
========================= */

.checkout {
    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 60px;

    padding: 60px 8%;

    background-color: #f8dce5;

    min-height: calc(100vh - 90px);
}


.checkout-formulario {
    width: 550px;

    background-color: #f4c8d6;

    padding: 35px;

    border-radius: 25px;
}


.checkout-formulario h1 {
    font-size: 38px;

    margin-bottom: 10px;
}


.texto-checkout {
    margin-bottom: 30px;
}


.checkout-formulario form {
    display: flex;

    flex-direction: column;
}


.checkout-formulario label {
    margin-bottom: 7px;

    font-weight: bold;
}


.checkout-formulario input,
.checkout-formulario textarea {
    width: 100%;

    padding: 13px;

    margin-bottom: 18px;

    border: 1px solid #d68fa7;

    border-radius: 12px;

    background-color: white;

    font-family: Arial, sans-serif;

    font-size: 15px;
}


.fila-checkout {
    display: flex;

    gap: 15px;
}


.fila-checkout div {
    flex: 1;
}


.boton-confirmar {
    background-color: #d68fa7;

    color: white;

    border: none;

    padding: 15px 25px;

    border-radius: 30px;

    cursor: pointer;

    font-size: 15px;

    font-weight: bold;
}


.boton-confirmar:hover {
    background-color: #b86f88;
}


/* RESUMEN */

.checkout-resumen {
    width: 420px;

    background-color: #f4c8d6;

    padding: 30px;

    border-radius: 25px;
}


.checkout-resumen h2 {
    margin-bottom: 25px;
}


.item-checkout {
    display: flex;

    gap: 15px;

    margin-bottom: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid #d68fa7;
}


.item-checkout img {
    width: 75px;
    height: 90px;

    object-fit: cover;

    border-radius: 12px;
}


.item-checkout-info {
    flex: 1;
}


.item-checkout-info h3 {
    font-size: 16px;

    margin-bottom: 5px;
}


.item-checkout-info p {
    margin-bottom: 4px;

    font-size: 14px;
}


.total-checkout {
    margin-top: 25px;

    font-size: 22px;
}


/* CELULAR */

@media (max-width: 800px) {

    .checkout {
        flex-direction: column;

        padding: 40px 20px;
    }


    .checkout-formulario,
    .checkout-resumen {
        width: 100%;
    }


    .fila-checkout {
        flex-direction: column;

        gap: 0;
    }

}/* =========================
   VARIANTES DEL COLLAR
========================= */

.detalle-producto .variantes {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    width: 450px;
    max-width: 100%;

    margin-top: 15px;
}


/* MINIATURAS */

.detalle-producto .variante {
    width: 65px !important;
    height: 65px !important;

    min-width: 65px !important;
    max-width: 65px !important;

    object-fit: cover;

    border-radius: 10px;

    cursor: pointer;

    border: 3px solid transparent;

    transition: 0.2s;
}


/* AL PASAR EL MOUSE */

.detalle-producto .variante:hover {
    transform: scale(1.05);

    border-color: #e8a9bd;
}


/* VARIANTE SELECCIONADA */

.detalle-producto .variante.seleccionada {
    border: 3px solid #d68fa7;
}


/* NOMBRE DEL COLOR */

.color-seleccionado {
    margin-top: 15px;

    font-size: 15px;
}


.color-seleccionado strong {
    color: #b86f88;
}


/* CELULAR */

@media (max-width: 800px) {

    .detalle-producto .variantes {
        width: 100%;
    }

    .detalle-producto .variante {
        width: 55px !important;
        height: 55px !important;

        min-width: 55px !important;
        max-width: 55px !important;
    }

}/* =====================================================
   NUEVO INICIO - INFINITY JOYERÍA
   SOLO AFECTA index.html
===================================================== */

.inicio-page {
    margin: 0;
    padding: 0;
    background-color: #fff7fa;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
}

.inicio-page * {
    box-sizing: border-box;
}


/* =====================================================
   ENCABEZADO
===================================================== */

.inicio-page .encabezado {
    width: 100%;
    min-height: 90px;

    padding: 12px 4%;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    background-color: #f5c8d6;

    position: sticky;
    top: 0;

    z-index: 1000;
}


/* MARCA */

.inicio-page .marca {
    display: flex;
    align-items: center;

    gap: 14px;

    justify-self: start;

    text-decoration: none !important;
    color: #111 !important;
}

.inicio-page .marca img {
    width: 62px !important;
    height: 62px !important;

    object-fit: cover;

    border-radius: 50%;
}

.inicio-page .marca span {
    font-size: 21px;

    letter-spacing: 6px;

    color: #111;

    text-decoration: none;
}


/* MENÚ */

.inicio-page .menu-principal {
    display: flex;
    align-items: center;

    gap: 40px;
}

.inicio-page .menu-principal a {
    color: #111 !important;

    text-decoration: none !important;

    font-size: 15px;
}

.inicio-page .menu-principal a:hover {
    color: #b86f88 !important;
}


/* ACCIONES DERECHA */

.inicio-page .acciones-header {
    justify-self: end;

    display: flex;
    align-items: center;

    gap: 12px;
}

.inicio-page .buscar-header {
    width: 44px;
    height: 44px;

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

    border-radius: 50%;

    text-decoration: none !important;

    color: #111 !important;
}

.inicio-page .carrito {
    display: flex !important;
    align-items: center;

    gap: 5px;

    padding: 13px 20px !important;

    background-color: white !important;

    color: #111 !important;

    text-decoration: none !important;

    border-radius: 30px !important;

    white-space: nowrap;
}


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

.inicio-page .hero-infinity {
    width: 100%;

    min-height: 680px;

    padding: 70px 9%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(350px, 480px);

    gap: 80px;

    align-items: center;

    background:
        radial-gradient(
            circle at 88% 30%,
            #f2bfd0 0%,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #fff8fa 0%,
            #f9dce5 100%
        );
}


/* TEXTO */

.inicio-page .hero-contenido {
    max-width: 650px;
}

.inicio-page .hero-etiqueta {
    margin: 0 0 20px;

    color: #b86f88;

    font-size: 14px;

    letter-spacing: 5px;

    font-weight: 600;
}

.inicio-page .hero-contenido h1 {
    margin: 0;

    font-size: clamp(46px, 5vw, 72px);

    line-height: 1.03;

    letter-spacing: -2px;

    font-weight: 700;
}

.inicio-page .hero-contenido h1 span {
    display: block;

    color: #b86f88;
}

.inicio-page .hero-descripcion {
    max-width: 580px;

    margin: 28px 0;

    color: #444;

    font-size: 18px;

    line-height: 1.7;
}


/* BOTONES */

.inicio-page .hero-botones {
    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}

.inicio-page .boton-principal {
    display: inline-block;

    padding: 15px 30px;

    background-color: #d68fa7;

    color: white !important;

    text-decoration: none !important;

    border-radius: 30px;

    font-weight: 600;

    transition: 0.2s;
}

.inicio-page .boton-principal:hover {
    background-color: #b86f88;

    transform: translateY(-2px);
}

.inicio-page .boton-secundario {
    display: inline-block;

    padding: 14px 29px;

    color: #111 !important;

    text-decoration: none !important;

    border: 1px solid #d68fa7;

    border-radius: 30px;

    transition: 0.2s;
}

.inicio-page .boton-secundario:hover {
    background-color: white;
}


/* BENEFICIOS PEQUEÑOS DE PORTADA */

.inicio-page .hero-beneficios {
    margin-top: 40px;

    display: flex;
    flex-wrap: wrap;

    gap: 13px 25px;

    color: #555;

    font-size: 13px;
}


/* =====================================================
   IMAGEN DE PORTADA
===================================================== */

.inicio-page .hero-imagen {
    position: relative;

    width: 100%;

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

.inicio-page .hero-marco {
    width: 100%;
    max-width: 440px;

    height: 570px;

    padding: 12px;

    background-color: rgba(255, 255, 255, 0.55);

    border-radius: 220px 220px 30px 30px;

    box-shadow:
        0 25px 55px
        rgba(116, 58, 78, 0.17);

    overflow: hidden;
}

.inicio-page .hero-marco img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

    border-radius: 210px 210px 22px 22px;
}

.inicio-page .hero-tarjeta {
    position: absolute;

    left: -35px;
    bottom: 45px;

    width: 215px;

    padding: 19px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    background-color: rgba(255, 255, 255, 0.95);

    border-radius: 18px;

    box-shadow:
        0 15px 35px
        rgba(80, 40, 50, 0.16);
}

.inicio-page .hero-tarjeta small {
    color: #b86f88;

    font-size: 10px;

    letter-spacing: 2px;
}

.inicio-page .hero-tarjeta strong {
    font-size: 16px;

    line-height: 1.35;
}


/* =====================================================
   CATÁLOGO
===================================================== */

.inicio-page .catalogo {
    padding: 90px 8%;

    background-color: #fff8fa;
}

.inicio-page .titulo-seccion {
    max-width: 650px;

    margin: 0 auto 50px;

    text-align: center;
}

.inicio-page .etiqueta-seccion {
    margin-bottom: 10px;

    color: #b86f88;

    font-size: 13px;

    letter-spacing: 4px;

    font-weight: 600;
}

.inicio-page .titulo-seccion h2 {
    margin: 0 0 15px;

    font-size: 44px;
}

.inicio-page .titulo-seccion > p:last-child {
    color: #666;
}


/* PRODUCTOS */

.inicio-page .productos {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 280px));

    gap: 30px;

    justify-content: center;
}

.inicio-page .producto {
    width: 100%;

    padding: 15px;

    background-color: white;

    border-radius: 22px;

    box-shadow:
        0 15px 35px
        rgba(120, 70, 85, 0.09);

    overflow: hidden;
}

.inicio-page .imagen-producto-link {
    display: block;

    width: 100%;

    text-decoration: none;
}

.inicio-page .imagen-producto {
    display: block;

    width: 100% !important;
    height: 330px !important;

    object-fit: cover;

    border-radius: 16px;
}

.inicio-page .producto-info {
    padding: 18px 8px 10px;

    text-align: center;
}

.inicio-page .categoria-producto {
    margin: 0 0 7px;

    color: #b86f88;

    font-size: 11px;

    letter-spacing: 3px;
}

.inicio-page .nombre-producto {
    color: #111 !important;

    text-decoration: none !important;
}

.inicio-page .nombre-producto h3 {
    margin: 8px 0;

    font-size: 20px;
}

.inicio-page .material {
    margin: 8px 0;

    color: #777;
}

.inicio-page .producto .precio {
    margin: 12px 0 20px;

    font-size: 20px;

    font-weight: bold;
}

.inicio-page .boton-producto {
    display: inline-block;

    padding: 12px 23px;

    background-color: #d68fa7;

    color: white !important;

    text-decoration: none !important;

    border-radius: 25px;
}


/* =====================================================
   NOSOTROS
===================================================== */

.inicio-page .nosotros {
    padding: 90px 9%;

    display: grid;

    grid-template-columns:
        minmax(300px, 470px)
        minmax(0, 600px);

    align-items: center;

    justify-content: center;

    gap: 90px;

    background-color: #f7d4df;
}

.inicio-page .nosotros-imagen img {
    display: block;

    width: 100% !important;

    max-width: 450px !important;

    border-radius: 30px;

    box-shadow:
        0 25px 50px
        rgba(100, 50, 70, 0.15);
}

.inicio-page .nosotros-contenido h2 {
    margin: 10px 0 25px;

    font-size: 48px;

    line-height: 1.05;
}

.inicio-page .nosotros-contenido > p:not(.etiqueta-seccion) {
    color: #444;

    line-height: 1.75;

    font-size: 17px;

    margin-bottom: 18px;
}

.inicio-page .nosotros-contenido .boton-principal {
    margin-top: 12px;
}


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

.inicio-page .beneficios-tienda {
    padding: 75px 8%;

    display: grid;

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

    gap: 25px;

    background-color: #fff8fa;
}

.inicio-page .beneficio {
    padding: 35px 25px;

    text-align: center;

    background-color: white;

    border-radius: 20px;
}

.inicio-page .beneficio-icono {
    display: block;

    margin-bottom: 18px;

    font-size: 34px;
}

.inicio-page .beneficio h3 {
    margin: 0 0 10px;

    font-size: 20px;
}

.inicio-page .beneficio p {
    margin: 0;

    color: #666;

    line-height: 1.6;
}


/* =====================================================
   CONTACTO
===================================================== */

.inicio-page .contacto {
    padding: 100px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #edb6c8,
            #f9dce5
        );
}

.inicio-page .contacto-contenido {
    max-width: 700px;

    margin: auto;
}

.inicio-page .contacto h2 {
    margin: 10px 0 20px;

    font-size: 46px;
}

.inicio-page .contacto-contenido > p:not(.etiqueta-seccion) {
    color: #444;

    font-size: 17px;

    line-height: 1.7;
}

.inicio-page .contacto-botones {
    margin-top: 30px;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}


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

.inicio-page .footer {
    padding: 55px 8% 30px;

    background-color: #171317;

    color: white;
}

.inicio-page .footer-marca {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;
}

.inicio-page .footer-marca img {
    width: 65px !important;
    height: 65px !important;

    object-fit: cover;

    border-radius: 50%;
}

.inicio-page .footer-marca h3 {
    margin: 0;

    letter-spacing: 6px;
}

.inicio-page .footer-marca p {
    margin: 5px 0 0;

    color: #c99aac;

    letter-spacing: 3px;

    font-size: 10px;
}

.inicio-page .footer-links {
    margin: 35px 0;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 28px;
}

.inicio-page .footer-links a {
    color: white !important;

    text-decoration: none !important;
}

.inicio-page .footer-links a:hover {
    color: #e4a8bc !important;
}

.inicio-page .footer-copy {
    margin: 0;

    text-align: center;

    color: #aaa;

    font-size: 12px;
}


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

@media (max-width: 950px) {

    .inicio-page .encabezado {
        grid-template-columns: auto 1fr auto;

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

    .inicio-page .menu-principal {
        gap: 20px;
    }

    .inicio-page .marca span {
        letter-spacing: 3px;

        font-size: 17px;
    }

    .inicio-page .hero-infinity {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 65px 7%;
    }

    .inicio-page .hero-contenido {
        margin: auto;

        text-align: center;
    }

    .inicio-page .hero-botones,
    .inicio-page .hero-beneficios {
        justify-content: center;
    }

    .inicio-page .hero-imagen {
        max-width: 500px;

        margin: auto;
    }

    .inicio-page .nosotros {
        grid-template-columns: 1fr;

        gap: 45px;

        text-align: center;
    }

    .inicio-page .nosotros-imagen img {
        margin: auto;
    }
}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 700px) {

    .inicio-page .encabezado {
        grid-template-columns: 1fr auto;

        min-height: 78px;

        padding: 10px 15px;
    }

    .inicio-page .marca img {
        width: 50px !important;
        height: 50px !important;
    }

    .inicio-page .marca span {
        font-size: 15px;

        letter-spacing: 3px;
    }

    .inicio-page .acciones-header {
        gap: 5px;
    }

    .inicio-page .buscar-header {
        display: none;
    }

    .inicio-page .carrito {
        padding: 11px 14px !important;
    }

    .inicio-page .carrito > span:first-of-type {
        display: none;
    }

    .inicio-page .menu-principal {
        grid-column: 1 / -1;

        width: 100%;

        padding-top: 10px;

        justify-content: center;

        gap: 20px;

        overflow-x: auto;
    }

    .inicio-page .menu-principal a {
        font-size: 12px;

        white-space: nowrap;
    }

    .inicio-page .hero-infinity {
        min-height: auto;

        padding: 55px 20px;
    }

    .inicio-page .hero-contenido h1 {
        font-size: 43px;

        letter-spacing: -1px;
    }

    .inicio-page .hero-descripcion {
        font-size: 16px;
    }

    .inicio-page .hero-marco {
        height: 470px;

        border-radius: 170px 170px 25px 25px;
    }

    .inicio-page .hero-marco img {
        border-radius: 160px 160px 18px 18px;
    }

    .inicio-page .hero-tarjeta {
        left: 5px;

        bottom: 25px;

        width: 190px;
    }

    .inicio-page .catalogo {
        padding: 65px 20px;
    }

    .inicio-page .titulo-seccion h2 {
        font-size: 38px;
    }

    .inicio-page .imagen-producto {
        height: 360px !important;
    }

    .inicio-page .nosotros {
        padding: 65px 20px;
    }

    .inicio-page .nosotros-contenido h2 {
        font-size: 39px;
    }

    .inicio-page .beneficios-tienda {
        grid-template-columns: 1fr;

        padding: 55px 20px;
    }

    .inicio-page .contacto {
        padding: 70px 20px;
    }

    .inicio-page .contacto h2 {
        font-size: 38px;
    }

    .inicio-page .footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}/* ==================================================
   LOGOS SIN FONDO
================================================== */


/* LOGO DEL ENCABEZADO */

.inicio-page .marca {
    display: flex;
    align-items: center;

    justify-self: start;

    text-decoration: none !important;

    background: transparent !important;
}


.inicio-page .marca img {
    width: 180px !important;
    height: 70px !important;

    max-width: none !important;

    object-fit: contain !important;

    object-position: left center;

    display: block;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}



/* =========================================
   LOGO GRANDE DE NOSOTROS
========================================= */

.inicio-page .nosotros-imagen {
    display: flex;

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

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    padding: 0 !important;
}


.inicio-page .nosotros-imagen img {
    width: 430px !important;
    height: auto !important;

    max-width: 100% !important;

    object-fit: contain !important;

    display: block;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}



/* =========================================
   LOGO DEL FOOTER
========================================= */

.inicio-page .footer-marca img {
    width: 220px !important;
    height: auto !important;

    object-fit: contain !important;

    display: block;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;
}



/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .inicio-page .marca img {
        width: 135px !important;
        height: 55px !important;
    }


    .inicio-page .nosotros-imagen img {
        width: 280px !important;
    }


    .inicio-page .footer-marca img {
        width: 180px !important;
    }

}/* ==================================================
   AJUSTE FINAL DE LOGOS
================================================== */


/* =========================================
   LOGO SUPERIOR
   SE QUEDA ROSA Y EN CÍRCULO
========================================= */

.inicio-page .marca {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    text-decoration: none !important;

    padding: 0 !important;

    border: none !important;
}


.inicio-page .marca img {
    width: 68px !important;
    height: 68px !important;

    min-width: 68px !important;
    max-width: 68px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    display: block !important;

    border: none !important;

    box-shadow: none !important;
}



/* =========================================
   LOGO DE NOSOTROS
   SIN CUADRO ROSA
========================================= */

.inicio-page .nosotros-imagen {
    display: flex !important;

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

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    padding: 20px !important;
}


.inicio-page .nosotros-imagen img {
    width: 380px !important;
    height: auto !important;

    max-width: 100% !important;

    object-fit: contain !important;

    display: block !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}



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

.inicio-page .footer-marca {
    display: flex !important;

    justify-content: center !important;

    background: transparent !important;
}


.inicio-page .footer-marca img {
    width: 230px !important;
    height: auto !important;

    max-width: 100% !important;

    object-fit: contain !important;

    display: block !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}



/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .inicio-page .marca img {
        width: 55px !important;
        height: 55px !important;

        min-width: 55px !important;
        max-width: 55px !important;
    }


    .inicio-page .nosotros-imagen img {
        width: 270px !important;
    }


    .inicio-page .footer-marca img {
        width: 180px !important;
    }

}/* =========================================
   CORRECCIÓN DEL LOGO SUPERIOR
========================================= */

.inicio-page .marca {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    text-decoration: none !important;
}


.inicio-page .marca img {
    width: 68px !important;
    height: 68px !important;

    min-width: 68px !important;
    max-width: 68px !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    border: none !important;

    box-shadow: none !important;
}/* ==================================================
   RESTAURAR LOGOS INFINITY
================================================== */


/* LOGO SUPERIOR */

.inicio-page .marca {
    display: flex !important;
    align-items: center !important;

    gap: 14px !important;

    justify-self: start !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    text-decoration: none !important;

    color: #111 !important;
}


.inicio-page .marca img {
    width: 62px !important;
    height: 62px !important;

    min-width: 62px !important;
    max-width: 62px !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    border: none !important;

    box-shadow: none !important;
}


.inicio-page .marca span {
    display: inline !important;

    color: #111 !important;

    font-size: 21px !important;

    font-weight: 500 !important;

    letter-spacing: 6px !important;
}



/* =========================================
   LOGO GRANDE DE NOSOTROS
========================================= */

.inicio-page .nosotros-imagen {
    display: block !important;

    background: transparent !important;

    padding: 0 !important;

    border: none !important;

    box-shadow: none !important;
}


.inicio-page .nosotros-imagen img {
    display: block !important;

    width: 100% !important;
    max-width: 450px !important;
    height: auto !important;

    object-fit: cover !important;

    border-radius: 30px !important;

    background: transparent !important;

    border: none !important;

    box-shadow:
        0 25px 50px
        rgba(100, 50, 70, 0.15) !important;
}



/* =========================================
   LOGO DEL FOOTER
========================================= */

.inicio-page .footer-marca {
    display: flex !important;

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

    gap: 15px !important;

    background: transparent !important;
}


.inicio-page .footer-marca img {
    width: 65px !important;
    height: 65px !important;

    min-width: 65px !important;
    max-width: 65px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


.inicio-page .footer-marca h3 {
    display: block !important;

    margin: 0 !important;

    color: white !important;

    letter-spacing: 6px !important;
}


.inicio-page .footer-marca p {
    display: block !important;

    margin: 5px 0 0 !important;

    color: #c99aac !important;

    letter-spacing: 3px !important;

    font-size: 10px !important;
}



/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .inicio-page .marca img {
        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        max-width: 52px !important;
    }


    .inicio-page .marca span {
        font-size: 16px !important;

        letter-spacing: 3px !important;
    }


    .inicio-page .nosotros-imagen img {
        width: 100% !important;

        max-width: 350px !important;

        margin: auto !important;
    }


    .inicio-page .footer-marca img {
        width: 60px !important;
        height: 60px !important;

        min-width: 60px !important;
        max-width: 60px !important;
    }

}/* ==================================================
   CATEGORÍAS INFINITY
================================================== */

.inicio-page .categorias-infinity {
    padding: 95px 8%;
    background-color: #fff8fa;
}


/* TÍTULO */

.inicio-page .categorias-infinity .titulo-seccion {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}


.inicio-page .categorias-infinity .titulo-seccion h2 {
    margin: 10px 0 15px;
    font-size: 44px;
}


.inicio-page .categorias-infinity .titulo-seccion > p:last-child {
    color: #666;
}


/* =========================================
   CUADRÍCULA
========================================= */

.inicio-page .grid-categorias {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

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

    gap: 20px;
}


/* =========================================
   TARJETAS
========================================= */

.inicio-page .categoria-card {
    min-height: 300px;

    padding: 30px;

    display: flex;
    align-items: flex-end;

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    text-decoration: none !important;

    color: #111 !important;

    box-shadow:
        0 15px 35px
        rgba(110, 60, 80, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.inicio-page .categoria-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 45px
        rgba(110, 60, 80, 0.15);
}


/* CÍRCULO DECORATIVO */

.inicio-page .categoria-card::before {
    content: "";

    position: absolute;

    width: 185px;
    height: 185px;

    right: -55px;
    top: -55px;

    border-radius: 50%;

    background-color:
        rgba(255, 255, 255, 0.32);
}


/* SEGUNDO CÍRCULO */

.inicio-page .categoria-card::after {
    content: "";

    position: absolute;

    width: 105px;
    height: 105px;

    right: 28px;
    top: 68px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.65);
}


/* =========================================
   TEXTO
========================================= */

.inicio-page .categoria-contenido {
    position: relative;
    z-index: 2;
}


.inicio-page .categoria-numero {
    display: block;

    margin-bottom: 12px;

    color:
        rgba(0, 0, 0, 0.45);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;
}


.inicio-page .categoria-card h3 {
    margin: 0 0 12px;

    font-size: 28px;

    line-height: 1.1;
}


.inicio-page .categoria-card p {
    margin: 0;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================
   COLORES
========================================= */

/* COLLARES */

.inicio-page .categoria-collares {
    grid-column: span 2;

    background:
        linear-gradient(
            135deg,
            #e9a9bf,
            #f8dce5
        );
}


/* PULSERAS */

.inicio-page .categoria-pulseras {
    background:
        linear-gradient(
            135deg,
            #f5ccda,
            #fff0f5
        );
}


/* ARETES */

.inicio-page .categoria-aretes {
    background:
        linear-gradient(
            135deg,
            #eeb4c8,
            #f9dae4
        );
}


/* ANILLOS */

.inicio-page .categoria-anillos {
    background:
        linear-gradient(
            135deg,
            #f9e4eb,
            #ebc6d3
        );
}


/* RELOJES */

.inicio-page .categoria-relojes {
    background:
        linear-gradient(
            135deg,
            #f0ccd8,
            #fff2f6
        );
}


/* ORO LAMINADO */

.inicio-page .categoria-oro {
    background:
        linear-gradient(
            135deg,
            #edd393,
            #fff1cf
        );
}


/* ACERO */

.inicio-page .categoria-acero {
    background:
        linear-gradient(
            135deg,
            #dedede,
            #f7f7f7
        );
}


/* PLATA */

.inicio-page .categoria-plata {
    background:
        linear-gradient(
            135deg,
            #d8d8de,
            #f4f4f7
        );
}


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

@media (max-width: 950px) {

    .inicio-page .grid-categorias {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .inicio-page .categoria-collares {
        grid-column: span 2;
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

    .inicio-page .categorias-infinity {
        padding: 65px 20px;
    }


    .inicio-page .categorias-infinity
    .titulo-seccion h2 {
        font-size: 36px;
    }


    .inicio-page .grid-categorias {
        grid-template-columns: 1fr;
    }


    .inicio-page .categoria-collares {
        grid-column: span 1;
    }


    .inicio-page .categoria-card {
        min-height: 220px;
    }


    .inicio-page .categoria-card h3 {
        font-size: 25px;
    }

}/* ==================================================
   PÁGINA CATEGORÍA COLLARES
================================================== */

.categoria-portada {
    padding: 90px 8% 70px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8dce5,
            #fff7fa
        );
}


.categoria-portada h1 {
    margin: 10px 0 20px;

    font-size: 58px;
}


.categoria-portada > p:last-child {
    max-width: 650px;

    margin: auto;

    color: #555;

    font-size: 17px;

    line-height: 1.7;
}


.categoria-productos {
    min-height: 500px;
}


.variantes-producto {
    margin-bottom: 18px;

    color: #777;

    font-size: 13px;
}


/* CELULAR */

@media (max-width: 700px) {

    .categoria-portada {
        padding: 65px 20px 50px;
    }


    .categoria-portada h1 {
        font-size: 42px;
    }

}/* =========================================
   DETALLES EXTRA DE PRODUCTO
========================================= */

.mensaje-agregado {
    min-height: 24px;
    margin-top: 15px;

    color: #b86f88;

    font-weight: 600;
}


.volver-productos {
    display: inline-block;

    margin-top: 25px;

    color: #555 !important;

    text-decoration: none !important;
}


.volver-productos:hover {
    color: #b86f88 !important;
}/* ==================================================
   INFORMACIÓN DE COMPRA
================================================== */

.inicio-page .informacion-compra {
    padding: 95px 8%;

    background:
        linear-gradient(
            180deg,
            #fff8fa 0%,
            #f9e4eb 100%
        );
}


/* =========================================
   TARJETAS
========================================= */

.inicio-page .grid-informacion-compra {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 24px;
}


.inicio-page .info-compra-card {
    padding: 35px 28px;

    background: white;

    border-radius: 22px;

    text-align: center;

    box-shadow:
        0 12px 30px
        rgba(120, 70, 85, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.inicio-page .info-compra-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 40px
        rgba(120, 70, 85, 0.13);
}


/* =========================================
   ICONOS
========================================= */

.inicio-page .info-compra-icono {
    width: 65px;
    height: 65px;

    margin: 0 auto 20px;

    display: flex;

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

    background: #f8dce5;

    border-radius: 50%;

    font-size: 29px;
}


/* =========================================
   TEXTO
========================================= */

.inicio-page .info-compra-card h3 {
    margin: 0 0 13px;

    font-size: 20px;

    color: #222;
}


.inicio-page .info-compra-card p {
    margin: 0;

    color: #666;

    line-height: 1.7;

    font-size: 14px;
}


/* =========================================
   BLOQUE DE AYUDA
========================================= */

.inicio-page .info-compra-ayuda {
    max-width: 800px;

    margin: 60px auto 0;

    padding: 45px 30px;

    text-align: center;

    background: #f3c4d3;

    border-radius: 28px;
}


.inicio-page .info-compra-ayuda h3 {
    margin: 0 0 12px;

    font-size: 28px;
}


.inicio-page .info-compra-ayuda p {
    margin: 0 0 25px;

    color: #555;

    line-height: 1.6;
}


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

@media (max-width: 950px) {

    .inicio-page .grid-informacion-compra {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 650px) {

    .inicio-page .informacion-compra {
        padding: 65px 20px;
    }


    .inicio-page .grid-informacion-compra {
        grid-template-columns: 1fr;
    }


    .inicio-page .info-compra-card {
        padding: 30px 22px;
    }


    .inicio-page .info-compra-ayuda {
        margin-top: 40px;

        padding: 35px 22px;
    }


    .inicio-page .info-compra-ayuda h3 {
        font-size: 24px;
    }

}/* ==================================================
   AJUSTE FINAL PARA CELULARES
================================================== */

@media (max-width: 700px) {

    /* Evita movimiento horizontal */
    html,
    body {
        overflow-x: hidden;
    }


    /* =========================================
       ENCABEZADO
    ========================================== */

    .inicio-page .encabezado {
        width: 100%;

        padding: 12px 18px 10px !important;

        display: flex !important;

        flex-wrap: wrap !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 10px !important;

        min-height: auto !important;
    }


    /* LOGO + INFINITY */

    .inicio-page .marca {
        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        width: auto !important;

        flex-shrink: 0;
    }


    .inicio-page .marca img {
        width: 52px !important;

        height: 52px !important;

        min-width: 52px !important;

        max-width: 52px !important;

        border-radius: 50% !important;

        object-fit: cover !important;
    }


    .inicio-page .marca span {
        font-size: 16px !important;

        letter-spacing: 4px !important;

        white-space: nowrap;
    }


    /* =========================================
       CARRITO
    ========================================== */

    .inicio-page .acciones-header {
        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        margin-left: auto !important;

        width: auto !important;

        flex-shrink: 0;
    }


    .inicio-page .buscar-header {
        display: none !important;
    }


    .inicio-page .carrito {
        padding: 10px 13px !important;

        font-size: 13px !important;

        border-radius: 25px !important;

        white-space: nowrap !important;
    }


    /* =========================================
       MENÚ
    ========================================== */

    .inicio-page .menu-principal {
        order: 3 !important;

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        gap: 18px !important;

        padding: 5px 0 2px !important;

        margin: 0 !important;

        overflow-x: auto;
    }


    .inicio-page .menu-principal a {
        font-size: 13px !important;

        white-space: nowrap;
    }


    /* =========================================
       PORTADA
    ========================================== */

    .inicio-page .hero-infinity {
        min-height: auto !important;

        padding: 55px 22px 45px !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 35px !important;
    }


    .inicio-page .hero-contenido {
        width: 100% !important;

        max-width: 100% !important;

        text-align: center !important;

        margin: 0 auto !important;
    }


    .inicio-page .hero-etiqueta {
        font-size: 12px !important;

        letter-spacing: 4px !important;

        margin-bottom: 20px !important;
    }


    .inicio-page .hero-contenido h1 {
        font-size: 42px !important;

        line-height: 1.04 !important;

        letter-spacing: -1px !important;

        margin: 0 !important;
    }


    .inicio-page .hero-contenido h1 span {
        display: block;
    }


    .inicio-page .hero-descripcion {
        margin: 30px auto !important;

        max-width: 360px !important;

        font-size: 16px !important;

        line-height: 1.65 !important;
    }


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

    .inicio-page .hero-botones {
        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        gap: 12px !important;

        flex-wrap: nowrap !important;
    }


    .inicio-page .hero-botones .boton-principal,
    .inicio-page .hero-botones .boton-secundario {
        flex: 1;

        max-width: 170px;

        padding: 14px 16px !important;

        text-align: center;

        font-size: 15px !important;
    }


    /* =========================================
       BENEFICIOS DE PORTADA
    ========================================== */

    .inicio-page .hero-beneficios {
        margin-top: 35px !important;

        display: flex !important;

        justify-content: center !important;

        gap: 10px 20px !important;

        font-size: 12px !important;

        line-height: 1.5;
    }


    /* =========================================
       IMAGEN DE PORTADA
    ========================================== */

    .inicio-page .hero-imagen {
        width: 100% !important;

        max-width: 390px !important;

        margin: 0 auto !important;
    }


    .inicio-page .hero-marco {
        width: 100% !important;

        height: 440px !important;

        border-radius: 170px 170px 24px 24px !important;
    }


    .inicio-page .hero-marco img {
        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;

        border-radius: 160px 160px 18px 18px !important;
    }


    .inicio-page .hero-tarjeta {
        left: 10px !important;

        bottom: 25px !important;

        width: 185px !important;

        padding: 15px !important;
    }

}


/* ==================================================
   CELULARES PEQUEÑOS
================================================== */

@media (max-width: 420px) {

    .inicio-page .marca span {
        font-size: 15px !important;

        letter-spacing: 3px !important;
    }


    .inicio-page .carrito {
        font-size: 12px !important;

        padding: 9px 11px !important;
    }


    .inicio-page .menu-principal {
        gap: 14px !important;
    }


    .inicio-page .menu-principal a {
        font-size: 12px !important;
    }


    .inicio-page .hero-contenido h1 {
        font-size: 39px !important;
    }

}/* =========================================
   PULIDO FINAL PARA CELULAR
========================================= */

@media (max-width: 700px) {

    .inicio-page .hero-infinity {
        padding-top: 70px !important;
    }

    .inicio-page .hero-contenido h1 {
        font-size: 38px !important;
        line-height: 1.08 !important;
    }

}


@media (max-width: 420px) {

    .inicio-page .hero-contenido h1 {
        font-size: 35px !important;
    }

}/* ==================================================
   MENÚ MÓVIL MÁS GRANDE Y CENTRADO
================================================== */

@media (max-width: 700px) {

    .inicio-page .encabezado {
        padding: 14px 18px 16px !important;
    }


    .inicio-page .menu-principal {
        order: 3 !important;

        width: 100% !important;

        display: flex !important;

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

        gap: 28px !important;

        margin: 8px auto 0 !important;

        padding: 8px 0 0 !important;

        text-align: center !important;
    }


    .inicio-page .menu-principal a {
        font-size: 15px !important;

        font-weight: 500 !important;

        line-height: 1 !important;

        color: #111 !important;

        text-align: center !important;

        text-decoration: none !important;

        white-space: nowrap !important;
    }

}


/* CELULARES MÁS PEQUEÑOS */

@media (max-width: 420px) {

    .inicio-page .menu-principal {
        gap: 20px !important;
    }


    .inicio-page .menu-principal a {
        font-size: 14px !important;
    }

}/* ==================================================
   HEADER MÓVIL DEFINITIVO
================================================== */

@media (max-width: 700px) {

    .inicio-page .encabezado {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) auto !important;

        grid-template-rows:
            auto auto !important;

        align-items: center !important;

        column-gap: 12px !important;

        row-gap: 14px !important;

        padding:
            14px 18px
            16px !important;

        background: #f5c8d6 !important;

        min-height: auto !important;
    }


    /* =========================================
       LOGO + INFINITY
    ========================================== */

    .inicio-page .marca {
        grid-column: 1 !important;
        grid-row: 1 !important;

        justify-self: start !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        margin: 0 !important;
    }


    .inicio-page .marca img {
        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        max-width: 52px !important;

        object-fit: cover !important;

        border-radius: 50% !important;
    }


    .inicio-page .marca span {
        font-size: 17px !important;

        letter-spacing: 4px !important;

        white-space: nowrap !important;
    }


    /* =========================================
       CARRITO
    ========================================== */

    .inicio-page .acciones-header {
        grid-column: 2 !important;
        grid-row: 1 !important;

        justify-self: end !important;

        display: flex !important;

        align-items: center !important;

        width: auto !important;

        margin: 0 !important;
    }


    .inicio-page .buscar-header {
        display: none !important;
    }


    .inicio-page .carrito {
        padding: 10px 14px !important;

        font-size: 14px !important;

        white-space: nowrap !important;

        border-radius: 28px !important;
    }


    /* =========================================
       MENÚ DENTRO DE LA BARRA ROSA
    ========================================== */

    .inicio-page .menu-principal {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        gap: 26px !important;

        margin: 0 !important;

        padding: 5px 0 2px !important;

        background: #f5c8d6 !important;

        position: static !important;
    }


    .inicio-page .menu-principal a {
        font-size: 15px !important;

        font-weight: 500 !important;

        line-height: 1.2 !important;

        color: #111 !important;

        text-decoration: none !important;

        white-space: nowrap !important;
    }

}


/* ==================================================
   IPHONE / CELULARES PEQUEÑOS
================================================== */

@media (max-width: 430px) {

    .inicio-page .encabezado {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    .inicio-page .marca img {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        max-width: 48px !important;
    }


    .inicio-page .marca span {
        font-size: 15px !important;

        letter-spacing: 3px !important;
    }


    .inicio-page .carrito {
        font-size: 12px !important;

        padding: 9px 11px !important;
    }


    .inicio-page .menu-principal {
        gap: 20px !important;
    }


    .inicio-page .menu-principal a {
        font-size: 14px !important;
    }

}/* ==================================================
   BUSCADOR INFINITY
================================================== */

/* BOTÓN DE LA LUPA */

.inicio-page .buscar-header {
    width: 44px;
    height: 44px;

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

    padding: 0;

    background: transparent;

    border: none;

    border-radius: 50%;

    color: #111;

    font-size: 18px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.inicio-page .buscar-header:hover {
    background:
        rgba(255, 255, 255, 0.45);

    transform: scale(1.05);
}


/* =========================================
   FONDO DEL BUSCADOR
========================================= */

.buscador-panel {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding:
        120px 20px
        30px;

    background:
        rgba(30, 20, 25, 0.45);

    backdrop-filter:
        blur(5px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.buscador-panel.activo {
    opacity: 1;

    visibility: visible;
}


/* =========================================
   CAJA DEL BUSCADOR
========================================= */

.buscador-contenido {
    width: 100%;

    max-width: 650px;

    padding: 30px;

    background: #fff;

    border-radius: 24px;

    box-shadow:
        0 25px 60px
        rgba(60, 30, 40, 0.25);

    transform:
        translateY(-20px);

    transition:
        transform 0.25s ease;
}


.buscador-panel.activo
.buscador-contenido {
    transform:
        translateY(0);
}


/* =========================================
   PARTE SUPERIOR
========================================= */

.buscador-superior {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.buscador-superior h2 {
    margin: 0;

    font-size: 26px;

    color: #222;
}


.cerrar-buscador {
    width: 40px;
    height: 40px;

    display: flex;

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

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #f8dce5;

    color: #333;

    font-size: 18px;

    cursor: pointer;
}


/* =========================================
   CAMPO
========================================= */

.buscador-campo {
    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        5px 18px;

    background: #fff7fa;

    border:
        2px solid #f0c6d4;

    border-radius: 30px;
}


.buscador-campo span {
    font-size: 18px;
}


.buscador-campo input {
    width: 100%;

    padding:
        14px 0;

    background: transparent;

    border: none;

    outline: none;

    color: #222;

    font-size: 16px;
}


.buscador-campo input::placeholder {
    color: #999;
}


.buscador-campo:focus-within {
    border-color: #d68fa7;
}


.buscador-ayuda {
    margin:
        15px 5px
        0;

    color: #777;

    font-size: 13px;

    line-height: 1.5;
}


body.buscador-abierto {
    overflow: hidden;
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    /* MOSTRAMOS LA LUPA TAMBIÉN EN CELULAR */

    .inicio-page .buscar-header {
        display: flex !important;
    }


    .inicio-page .acciones-header {
        gap: 5px !important;
    }


    .inicio-page .buscar-header {
        width: 38px !important;
        height: 38px !important;

        font-size: 16px !important;
    }


    .buscador-panel {
        padding:
            105px 15px
            20px;
    }


    .buscador-contenido {
        padding: 22px;

        border-radius: 20px;
    }


    .buscador-superior h2 {
        font-size: 22px;
    }


    .buscador-campo input {
        font-size: 15px;
    }

}/* ==================================================
   PREGUNTAS FRECUENTES
================================================== */

.faq-portada {
    padding: 90px 20px 70px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8dce5,
            #fff8fa
        );
}


.faq-portada h1 {
    margin: 10px 0 18px;

    font-size: 52px;

    color: #222;
}


.faq-portada > p:last-child {
    max-width: 650px;

    margin: 0 auto;

    color: #666;

    font-size: 17px;

    line-height: 1.7;
}



/* =========================================
   SECCIÓN
========================================= */

.faq-seccion {
    padding: 80px 20px;

    background: #fff8fa;
}


.faq-contenedor {
    width: 100%;

    max-width: 850px;

    margin: 0 auto;
}



/* =========================================
   PREGUNTA
========================================= */

.faq-item {
    margin-bottom: 15px;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 10px 30px
        rgba(100, 50, 70, 0.07);

    overflow: hidden;
}


.faq-item summary {
    position: relative;

    padding:
        22px 60px
        22px 24px;

    cursor: pointer;

    list-style: none;

    color: #222;

    font-size: 17px;

    font-weight: 600;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item summary::after {
    content: "+";

    position: absolute;

    right: 24px;

    top: 50%;

    transform:
        translateY(-50%);

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

    background: #f6d3df;

    color: #b86f88;

    font-size: 21px;
}


.faq-item[open] summary::after {
    content: "−";
}


.faq-item p {
    margin: 0;

    padding:
        0 24px
        24px;

    color: #666;

    font-size: 15px;

    line-height: 1.7;
}



/* =========================================
   AYUDA
========================================= */

.faq-ayuda {
    max-width: 750px;

    margin: 70px auto 0;

    padding: 50px 30px;

    text-align: center;

    background: #f3c4d3;

    border-radius: 28px;
}


.faq-ayuda h2 {
    margin: 10px 0 15px;

    font-size: 34px;
}


.faq-ayuda > p:not(.etiqueta-seccion) {
    margin:
        0 auto
        25px;

    color: #555;

    line-height: 1.7;
}



/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .faq-portada {
        padding:
            65px 20px
            50px;
    }


    .faq-portada h1 {
        font-size: 38px;
    }


    .faq-seccion {
        padding:
            55px 16px;
    }


    .faq-item summary {
        padding:
            20px 55px
            20px 20px;

        font-size: 15px;
    }


    .faq-item p {
        padding:
            0 20px
            20px;

        font-size: 14px;
    }


    .faq-ayuda {
        margin-top: 50px;

        padding:
            40px 22px;
    }


    .faq-ayuda h2 {
        font-size: 28px;
    }

}/* ==================================================
   FOOTER COMPLETO
================================================== */

.inicio-page .footer-completo {
    padding: 65px 8% 25px;
    background: #171317;
    color: white;
}

.inicio-page .footer-grid {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 50px;
}

.inicio-page .footer-columna {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.inicio-page .footer-columna h4 {
    margin: 0 0 8px;
    color: white;
    font-size: 16px;
}

.inicio-page .footer-columna a {
    color: #d7cfd2 !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: color 0.2s ease;
}

.inicio-page .footer-columna a:hover {
    color: #e6a8bd !important;
}

.inicio-page .footer-identidad {
    max-width: 330px;
}

.inicio-page .footer-descripcion {
    margin: 8px 0 0;
    color: #aaa;
    font-size: 14px;
    line-height: 1.7;
}

.inicio-page .footer-usuario {
    margin: 0;
    color: #999;
    font-size: 12px;
}

.inicio-page .footer-separador {
    max-width: 1250px;
    height: 1px;

    margin: 45px auto 25px;

    background:
        rgba(255, 255, 255, 0.12);
}

.inicio-page .footer-final {
    max-width: 1250px;
    margin: 0 auto;

    display: flex;

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

    gap: 20px;
}

.inicio-page .footer-final p {
    margin: 0;
    color: #888;
    font-size: 12px;
}

.inicio-page .footer-final a {
    color: #d7cfd2 !important;
    text-decoration: none !important;
    font-size: 12px;
}

.inicio-page .footer-final a:hover {
    color: #e6a8bd !important;
}


@media (max-width: 900px) {

    .inicio-page .footer-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .inicio-page .footer-completo {
        padding: 50px 24px 25px;
    }


    .inicio-page .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .inicio-page .footer-identidad {
        max-width: 100%;
    }


    .inicio-page .footer-final {
        flex-direction: column;
        align-items: flex-start;
    }

}/* ==================================================
   CARRITO - JOYERÍA INFINITY
================================================== */


/* =========================================
   PORTADA
========================================= */

.carrito-page .carrito-portada {
    padding: 80px 20px 65px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8dce5,
            #fff8fa
        );
}


.carrito-page .carrito-portada h1 {
    margin: 8px 0 15px;

    color: #222;

    font-size: 50px;
}


.carrito-page .carrito-portada > p:last-child {
    max-width: 600px;

    margin: 0 auto;

    color: #666;

    font-size: 16px;

    line-height: 1.7;
}



/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

.carrito-page .carrito-contenedor {
    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    padding: 75px 30px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(300px, 0.8fr);

    gap: 45px;

    align-items: start;
}



/* =========================================
   PRODUCTOS
========================================= */

.carrito-page .carrito-productos {
    min-width: 0;
}


.carrito-page .carrito-titulo {
    margin-bottom: 30px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 20px;
}


.carrito-page .carrito-titulo h2 {
    margin: 5px 0 0;

    color: #222;

    font-size: 30px;
}


.carrito-page .seguir-comprando {
    color: #a45d76;

    font-size: 14px;

    text-decoration: none;

    white-space: nowrap;
}


.carrito-page .seguir-comprando:hover {
    text-decoration: underline;
}



/* =========================================
   LISTA GENERADA POR APP.JS
========================================= */

.carrito-page #listaCarrito {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


/*
   Esto mejora las tarjetas que app.js
   coloque dentro de #listaCarrito.
*/

.carrito-page #listaCarrito > div {
    padding: 20px;

    background: #fff;

    border: 1px solid #f1e3e8;

    border-radius: 22px;

    box-shadow:
        0 10px 30px
        rgba(100, 50, 70, 0.07);
}


.carrito-page #listaCarrito img {
    border-radius: 15px;

    object-fit: cover;
}


.carrito-page #listaCarrito h3 {
    color: #222;
}


.carrito-page #listaCarrito p {
    color: #666;

    line-height: 1.5;
}



/* =========================================
   BOTONES + Y -
========================================= */

.carrito-page #listaCarrito .sumar,
.carrito-page #listaCarrito .restar {
    min-width: 34px;

    height: 34px;

    padding: 0 10px;

    border: none;

    border-radius: 10px;

    background: #f4d1dc;

    color: #333;

    font-size: 18px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.carrito-page #listaCarrito .sumar:hover,
.carrito-page #listaCarrito .restar:hover {
    background: #eebdcd;

    transform: scale(1.05);
}



/* =========================================
   ELIMINAR
========================================= */

.carrito-page #listaCarrito .eliminar-producto {
    padding: 9px 14px;

    border: none;

    border-radius: 20px;

    background: #fff0f3;

    color: #b04f6d;

    font-size: 13px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.carrito-page #listaCarrito .eliminar-producto:hover {
    background: #b04f6d;

    color: white;
}



/* =========================================
   RESUMEN
========================================= */

.carrito-page .resumen-carrito {
    position: sticky;

    top: 115px;

    padding: 32px;

    background: #fff;

    border: 1px solid #f0dfe5;

    border-radius: 25px;

    box-shadow:
        0 20px 45px
        rgba(100, 50, 70, 0.10);
}


.carrito-page .resumen-etiqueta {
    margin: 0 0 8px;

    color: #b36b83;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.carrito-page .resumen-carrito h2 {
    margin: 0 0 28px;

    color: #222;

    font-size: 28px;
}


.carrito-page .resumen-linea {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #777;

    font-size: 14px;
}


.carrito-page .resumen-separador {
    height: 1px;

    margin: 22px 0;

    background: #eee3e7;
}


.carrito-page .resumen-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}


.carrito-page .resumen-total span {
    color: #222;

    font-size: 18px;

    font-weight: 600;
}


.carrito-page #totalCarrito {
    color: #222;

    font-size: 24px;
}


.carrito-page .resumen-aviso {
    margin: 22px 0;

    padding: 15px;

    background: #fff7fa;

    border-radius: 14px;

    color: #777;

    font-size: 12px;

    line-height: 1.6;
}



/* =========================================
   BOTÓN CHECKOUT
========================================= */

.carrito-page .boton-checkout {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 16px 20px;

    background: #222;

    color: white;

    border-radius: 30px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.carrito-page .boton-checkout:hover {
    background: #b76f87;

    transform: translateY(-2px);
}


.carrito-page .boton-seguir {
    width: 100%;

    margin-top: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 14px 20px;

    background: transparent;

    border: 1px solid #dec2cc;

    border-radius: 30px;

    color: #555;

    text-decoration: none;

    font-size: 14px;
}


.carrito-page .boton-seguir:hover {
    background: #fff5f8;
}



/* =========================================
   SEGURIDAD
========================================= */

.carrito-page .carrito-seguridad {
    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #eee3e7;
}


.carrito-page .carrito-seguridad p {
    margin: 8px 0;

    color: #777;

    font-size: 12px;
}



/* =========================================
   AYUDA
========================================= */

.carrito-page .carrito-ayuda {
    padding: 65px 20px;

    background: #f8e1e8;

    text-align: center;
}


.carrito-page .carrito-ayuda > div {
    max-width: 700px;

    margin: 0 auto;
}


.carrito-page .carrito-ayuda h2 {
    margin: 8px 0 15px;

    color: #222;

    font-size: 32px;
}


.carrito-page .carrito-ayuda p:not(.etiqueta-seccion) {
    margin: 0 auto 25px;

    color: #666;

    line-height: 1.7;
}



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

@media (max-width: 950px) {

    .carrito-page .carrito-contenedor {
        grid-template-columns: 1fr;
    }


    .carrito-page .resumen-carrito {
        position: static;
    }

}



/* =========================================
   CELULAR
========================================= */

@media (max-width: 650px) {

    .carrito-page .carrito-portada {
        padding:
            60px 20px
            50px;
    }


    .carrito-page .carrito-portada h1 {
        font-size: 38px;
    }


    .carrito-page .carrito-contenedor {
        padding:
            45px 16px
            60px;

        gap: 30px;
    }


    .carrito-page .carrito-titulo {
        align-items: flex-start;

        flex-direction: column;
    }


    .carrito-page .carrito-titulo h2 {
        font-size: 25px;
    }


    .carrito-page #listaCarrito > div {
        padding: 16px;

        border-radius: 18px;
    }


    .carrito-page .resumen-carrito {
        padding: 25px 20px;

        border-radius: 22px;
    }


    .carrito-page .resumen-carrito h2 {
        font-size: 25px;
    }


    .carrito-page #totalCarrito {
        font-size: 22px;
    }


    .carrito-page .carrito-ayuda {
        padding:
            50px 20px;
    }


    .carrito-page .carrito-ayuda h2 {
        font-size: 27px;
    }

}/* ==================================================
   CHECKOUT - JOYERÍA INFINITY
================================================== */


/* =========================================
   PORTADA
========================================= */

.checkout-page .checkout-portada {
    padding: 80px 20px 65px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8dce5,
            #fff8fa
        );
}


.checkout-page .checkout-portada h1 {
    margin: 8px 0 15px;

    color: #222;

    font-size: 50px;
}


.checkout-page .checkout-portada > p:last-child {
    max-width: 620px;

    margin: 0 auto;

    color: #666;

    font-size: 16px;

    line-height: 1.7;
}



/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

.checkout-page .checkout-contenedor {
    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    padding: 75px 30px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(300px, 0.8fr);

    gap: 45px;

    align-items: start;
}



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

.checkout-page .checkout-formulario {
    min-width: 0;
}


.checkout-page .checkout-titulo {
    margin-bottom: 35px;
}


.checkout-page .checkout-titulo h2 {
    margin: 6px 0 12px;

    color: #222;

    font-size: 32px;
}


.checkout-page .checkout-titulo > p:last-child {
    margin: 0;

    color: #777;

    line-height: 1.7;
}



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

.checkout-page #formularioCompra {
    padding: 35px;

    background: #fff;

    border: 1px solid #f0dfe5;

    border-radius: 25px;

    box-shadow:
        0 15px 40px
        rgba(100, 50, 70, 0.07);
}


.checkout-page .checkout-dos-columnas {
    display: grid;

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

    gap: 18px;
}


.checkout-page .campo-checkout {
    margin-bottom: 22px;
}


.checkout-page .campo-checkout label {
    display: block;

    margin-bottom: 9px;

    color: #333;

    font-size: 14px;

    font-weight: 600;
}


.checkout-page .campo-checkout label span {
    color: #999;

    font-size: 12px;

    font-weight: 400;
}


.checkout-page .campo-checkout input,
.checkout-page .campo-checkout textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 14px 16px;

    border: 1px solid #e5d6db;

    border-radius: 14px;

    background: #fffafb;

    outline: none;

    color: #222;

    font-family: inherit;

    font-size: 15px;

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


.checkout-page .campo-checkout textarea {
    resize: vertical;

    min-height: 110px;
}


.checkout-page .campo-checkout input::placeholder,
.checkout-page .campo-checkout textarea::placeholder {
    color: #aaa;
}


.checkout-page .campo-checkout input:focus,
.checkout-page .campo-checkout textarea:focus {
    border-color: #d890a8;

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(216, 144, 168, 0.13);
}



/* =========================================
   AVISO
========================================= */

.checkout-page .checkout-aviso {
    margin:
        5px 0
        25px;

    padding: 17px 18px;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    background: #fff3f7;

    border-radius: 15px;
}


.checkout-page .checkout-aviso span {
    font-size: 20px;
}


.checkout-page .checkout-aviso p {
    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.6;
}



/* =========================================
   BOTÓN CONTINUAR
========================================= */

.checkout-page .boton-confirmar {
    width: 100%;

    padding: 17px 24px;

    border: none;

    border-radius: 30px;

    background: #222;

    color: white;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.checkout-page .boton-confirmar:hover {
    background: #b76f87;

    transform: translateY(-2px);
}



/* =========================================
   RESUMEN
========================================= */

.checkout-page .checkout-resumen {
    position: sticky;

    top: 115px;

    padding: 32px;

    background: #fff;

    border: 1px solid #f0dfe5;

    border-radius: 25px;

    box-shadow:
        0 20px 45px
        rgba(100, 50, 70, 0.10);
}


.checkout-page .resumen-etiqueta {
    margin: 0 0 8px;

    color: #b36b83;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.checkout-page .checkout-resumen h2 {
    margin: 0 0 25px;

    color: #222;

    font-size: 28px;
}



/* =========================================
   PRODUCTOS DEL RESUMEN
========================================= */

.checkout-page #resumenCheckout {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.checkout-page #resumenCheckout > div {
    padding: 13px 0;

    border-bottom: 1px solid #f2e7eb;
}


.checkout-page #resumenCheckout p {
    margin: 4px 0;

    color: #666;

    font-size: 13px;

    line-height: 1.5;
}


.checkout-page #resumenCheckout strong {
    color: #222;
}



/* =========================================
   TOTAL
========================================= */

.checkout-page .checkout-resumen-separador {
    height: 1px;

    margin: 22px 0;

    background: #eadde2;
}


.checkout-page .checkout-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.checkout-page .checkout-total span {
    color: #222;

    font-size: 18px;

    font-weight: 600;
}


.checkout-page #totalCheckout {
    color: #222;

    font-size: 24px;
}



/* =========================================
   ENVÍO
========================================= */

.checkout-page .checkout-envio-aviso {
    margin: 22px 0;

    padding: 15px;

    background: #fff7fa;

    border-radius: 14px;

    color: #777;

    font-size: 12px;

    line-height: 1.6;
}



/* =========================================
   VOLVER AL CARRITO
========================================= */

.checkout-page .checkout-volver {
    width: 100%;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 14px 20px;

    border: 1px solid #dec2cc;

    border-radius: 30px;

    color: #555;

    text-decoration: none;

    font-size: 14px;

    transition:
        background 0.2s ease;
}


.checkout-page .checkout-volver:hover {
    background: #fff5f8;
}



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

.checkout-page .checkout-beneficios {
    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #eee3e7;
}


.checkout-page .checkout-beneficios p {
    margin: 8px 0;

    color: #777;

    font-size: 12px;
}



/* =========================================
   AYUDA
========================================= */

.checkout-page .checkout-ayuda {
    padding: 65px 20px;

    background: #f8e1e8;

    text-align: center;
}


.checkout-page .checkout-ayuda > div {
    max-width: 700px;

    margin: 0 auto;
}


.checkout-page .checkout-ayuda h2 {
    margin: 8px 0 15px;

    color: #222;

    font-size: 32px;
}


.checkout-page .checkout-ayuda p:not(.etiqueta-seccion) {
    margin:
        0 auto
        25px;

    color: #666;

    line-height: 1.7;
}



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

@media (max-width: 950px) {

    .checkout-page .checkout-contenedor {
        grid-template-columns: 1fr;
    }


    .checkout-page .checkout-resumen {
        position: static;
    }

}



/* =========================================
   CELULAR
========================================= */

@media (max-width: 650px) {

    .checkout-page .checkout-portada {
        padding:
            60px 20px
            50px;
    }


    .checkout-page .checkout-portada h1 {
        font-size: 37px;
    }


    .checkout-page .checkout-contenedor {
        padding:
            45px 16px
            60px;

        gap: 30px;
    }


    .checkout-page .checkout-titulo h2 {
        font-size: 26px;
    }


    .checkout-page #formularioCompra {
        padding: 25px 18px;

        border-radius: 20px;
    }


    .checkout-page .checkout-dos-columnas {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .checkout-page .campo-checkout input,
    .checkout-page .campo-checkout textarea {
        font-size: 16px;
    }


    .checkout-page .checkout-resumen {
        padding: 25px 20px;

        border-radius: 22px;
    }


    .checkout-page .checkout-resumen h2 {
        font-size: 25px;
    }


    .checkout-page #totalCheckout {
        font-size: 22px;
    }


    .checkout-page .checkout-ayuda {
        padding:
            50px 20px;
    }


    .checkout-page .checkout-ayuda h2 {
        font-size: 27px;
    }

}/* ==================================================
   BUSCADOR GLOBAL - JOYERÍA INFINITY
================================================== */

.buscar-header {
    width: 44px;
    height: 44px;

    display: flex;

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

    flex-shrink: 0;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: transparent;

    color: #111;

    font-size: 18px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.buscar-header:hover {
    background:
        rgba(255, 255, 255, 0.45);

    transform:
        scale(1.05);
}



/* CELULAR */

@media (max-width: 700px) {

    .buscar-header {
        width: 38px !important;
        height: 38px !important;

        display: flex !important;

        flex-shrink: 0 !important;

        font-size: 16px !important;
    }


    .acciones-header {
        display: flex !important;

        align-items: center !important;

        gap: 5px !important;
    }

}/* ==================================================
   CORRECCIÓN PÁGINA PULSERA TRÉBOL
================================================== */

.detalle-producto {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 55px 25px 80px;

    display: grid;

    grid-template-columns:
        minmax(0, 480px)
        minmax(0, 1fr);

    gap: 85px;

    align-items: center;
}


/* ==================================================
   GALERÍA
================================================== */

.galeria-producto {
    width: 100%;

    min-width: 0;
}


/* IMAGEN PRINCIPAL */

.imagen-principal-producto {
    width: 100%;

    overflow: hidden;

    border-radius: 25px;

    background: #f8dce5;
}


.imagen-principal-producto img {
    width: 100% !important;

    max-width: 480px !important;

    height: auto !important;

    display: block;

    object-fit: contain;

    border-radius: 25px;
}



/* ==================================================
   MINIATURAS
================================================== */

.variantes-producto {
    width: 100%;

    margin-top: 18px;

    display: grid;

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

    gap: 12px;
}


.variante-pulsera {
    width: 100%;

    aspect-ratio: 1 / 1;

    padding: 0;

    overflow: hidden;

    border: 2px solid transparent;

    border-radius: 12px;

    background: white;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}


.variante-pulsera img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

    display: block;
}


.variante-pulsera:hover {
    transform: translateY(-2px);
}


.variante-pulsera.seleccionada {
    border-color: #b66f87;
}



/* ==================================================
   INFORMACIÓN DEL PRODUCTO
================================================== */

.info-producto-detalle {
    width: 100%;
}


.info-producto-detalle .categoria-producto {
    margin: 0 0 25px;

    color: #bc708a;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;
}


.info-producto-detalle h1 {
    margin: 0 0 25px;

    color: #171717;

    font-size: 48px;

    line-height: 1.1;
}


.info-producto-detalle .precio-detalle {
    margin: 0 0 20px;

    color: #222;

    font-size: 18px;

    font-weight: 600;
}


.info-producto-detalle .descripcion-producto {
    max-width: 500px;

    margin: 0 0 20px;

    color: #444;

    font-size: 16px;

    line-height: 1.6;
}


.info-producto-detalle > p {
    margin: 13px 0;

    color: #222;

    font-size: 16px;
}



/* COLOR */

.color-seleccionado {
    margin: 25px 0 20px;

    padding: 14px 18px;

    display: flex;

    align-items: center;

    gap: 7px;

    width: fit-content;

    background: rgba(255, 255, 255, 0.5);

    border-radius: 15px;
}


.color-seleccionado span {
    color: #666;

    font-size: 14px;
}


.color-seleccionado strong {
    color: #222;

    font-size: 14px;
}



/* ==================================================
   BOTÓN AGREGAR
================================================== */

#botonAgregarPulsera {
    min-width: 190px;

    padding: 15px 26px;

    border: 2px solid #222;

    border-radius: 30px;

    background: #d98fa7;

    color: white;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


#botonAgregarPulsera:hover {
    background: #c67d95;

    transform: translateY(-2px);
}



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

@media (max-width: 900px) {

    .detalle-producto {
        max-width: 750px;

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .galeria-producto {
        max-width: 520px;

        margin: 0 auto;
    }


    .imagen-principal-producto img {
        max-width: 520px !important;
    }


    .info-producto-detalle {
        max-width: 600px;

        margin: 0 auto;
    }

}



/* ==================================================
   CELULAR
================================================== */

@media (max-width: 600px) {

    .detalle-producto {
        padding:
            30px 16px
            60px;

        gap: 35px;
    }


    .imagen-principal-producto {
        border-radius: 18px;
    }


    .imagen-principal-producto img {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        border-radius: 18px;
    }


    .variantes-producto {
        grid-template-columns:
            repeat(5, 1fr);

        gap: 7px;
    }


    .variante-pulsera {
        border-radius: 9px;
    }


    .info-producto-detalle h1 {
        font-size: 36px;
    }


    .info-producto-detalle .descripcion-producto {
        font-size: 15px;
    }


    #botonAgregarPulsera {
        width: 100%;
    }

}/* ==================================================
   MENSAJE SIN RESULTADOS DEL BUSCADOR
================================================== */

.sin-resultados-busqueda {

    display: none;

    width: calc(100% - 30px);
    max-width: 720px;

    margin: 45px auto 10px;

    padding: 48px 30px;

    background: #fff7fa;

    border:
        1px solid #efd5de;

    border-radius: 26px;

    text-align: center;

    box-shadow:
        0 15px 35px
        rgba(100, 60, 75, 0.08);

}


/* ICONO */

.sin-resultados-icono {

    width: 65px;
    height: 65px;

    margin:
        0 auto
        20px;

    display: flex;

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

    background: #f7dce5;

    border-radius: 50%;

    font-size: 26px;

}


/* TÍTULO */

.sin-resultados-busqueda h3 {

    margin:
        0 0
        12px;

    color: #222;

    font-size: 25px;

}


/* TEXTO */

.sin-resultados-busqueda p {

    max-width: 480px;

    margin:
        0 auto
        25px;

    color: #777;

    font-size: 15px;

    line-height: 1.6;

}


/* BOTÓN */

.boton-limpiar-busqueda {

    padding:
        13px 25px;

    background: #d98fa7;

    border: none;

    border-radius: 30px;

    color: white;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.boton-limpiar-busqueda:hover {

    background: #c87993;

    transform:
        translateY(-2px);

}


/* ==================================================
   CELULAR
================================================== */

@media (max-width: 600px) {

    .sin-resultados-busqueda {

        width:
            calc(100% - 30px);

        margin-top:
            30px;

        padding:
            38px 20px;

        border-radius:
            20px;

    }


    .sin-resultados-icono {

        width:
            58px;

        height:
            58px;

        font-size:
            23px;

    }


    .sin-resultados-busqueda h3 {

        font-size:
            21px;

    }


    .sin-resultados-busqueda p {

        font-size:
            14px;

    }


    .boton-limpiar-busqueda {

        width:
            100%;

    }

}/* ==================================================
   BOTONES DEL CATÁLOGO
================================================== */

.acciones-producto-card {
    width: 100%;

    margin-top: 16px;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.acciones-producto-card .boton-producto,
.boton-agregar-rapido {
    width: 100%;

    min-height: 44px;

    padding: 12px 18px;

    display: flex;

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

    border-radius: 25px;

    font-size: 13px;

    font-weight: 600;

    text-align: center;

    cursor: pointer;

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


/* VER PRODUCTO */

.acciones-producto-card .boton-producto {
    text-decoration: none;

    background: transparent;

    border: 1px solid #d9a1b4;

    color: #222;
}


.acciones-producto-card .boton-producto:hover {
    background: #fff2f6;

    transform: translateY(-1px);
}


/* AGREGAR AL CARRITO */

.boton-agregar-rapido {
    border: 1px solid #d98fa7;

    background: #d98fa7;

    color: white;
}


.boton-agregar-rapido:hover {
    background: #c87d96;

    border-color: #c87d96;

    transform: translateY(-1px);
}


.boton-agregar-rapido:disabled {
    cursor: default;

    opacity: 0.8;

    transform: none;
}


/* ==================================================
   CELULAR
================================================== */

@media (max-width: 600px) {

    .acciones-producto-card {
        gap: 8px;
    }


    .acciones-producto-card .boton-producto,
    .boton-agregar-rapido {
        min-height: 42px;

        font-size: 12px;
    }

}/* ==================================================
   CORRECCIÓN BOTÓN VER PRODUCTO
================================================== */

.inicio-page .acciones-producto-card .boton-producto {
    width: 100% !important;
    min-height: 44px !important;

    padding: 12px 18px !important;

    display: flex !important;

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

    background: white !important;

    border: 1px solid #d98fa7 !important;

    border-radius: 25px !important;

    color: #222 !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    opacity: 1 !important;

    visibility: visible !important;

    cursor: pointer !important;
}


.inicio-page .acciones-producto-card .boton-producto:hover {
    background: #fff0f5 !important;

    color: #222 !important;

    transform: translateY(-1px);
}


/* BOTÓN AGREGAR */

.inicio-page .boton-agregar-rapido {
    color: white !important;

    background: #d98fa7 !important;

    border: 1px solid #d98fa7 !important;

    opacity: 1 !important;

    visibility: visible !important;
}/* ==================================================
   SELECTOR DE COLOR EN CATÁLOGO
================================================== */

.inicio-page .selector-rapido-catalogo {

    width: 100%;

    margin-top: 18px;

    text-align: left;

}


.inicio-page .selector-rapido-catalogo label {

    display: block;

    margin:
        0 0 7px
        3px;

    color: #777;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}



/* ==================================================
   SELECT
================================================== */

.inicio-page .selector-color-rapido {

    width: 100% !important;

    height: 44px !important;

    padding:
        0 42px
        0 16px !important;

    background:
        #fff7fa !important;

    border:
        1px solid
        #e4b1c2 !important;

    border-radius:
        22px !important;

    color:
        #333 !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    outline:
        none !important;

    cursor:
        pointer !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.inicio-page .selector-color-rapido:hover {

    border-color:
        #d58ca5 !important;

}


.inicio-page .selector-color-rapido:focus {

    border-color:
        #ca7f99 !important;

    box-shadow:
        0 0 0 3px
        rgba(
            217,
            143,
            167,
            0.15
        ) !important;

}



/* ==================================================
   COLOR ÚNICO DEL ARETE
================================================== */

.inicio-page .color-unico-rapido {

    width: 100%;

    min-height: 44px;

    padding:
        0 16px;

    display: flex;

    align-items: center;

    background:
        #fff7fa;

    border:
        1px solid
        #ecd0da;

    border-radius:
        22px;

    color:
        #555;

    font-size:
        13px;

}



/* ==================================================
   ACCIONES DEL PRODUCTO
================================================== */

.inicio-page .acciones-producto-card {

    width: 100%;

    margin-top:
        13px;

    display: flex;

    flex-direction: column;

    gap: 9px;

}



/* VER PRODUCTO */

.inicio-page
.acciones-producto-card
.boton-producto {

    width: 100% !important;

    min-height: 44px !important;

    padding:
        12px 18px !important;

    display: flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        white !important;

    border:
        1px solid
        #d98fa7 !important;

    border-radius:
        25px !important;

    color:
        #222 !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    text-decoration:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

}



/* AGREGAR */

.inicio-page
.boton-agregar-rapido {

    width: 100% !important;

    min-height:
        44px !important;

    padding:
        12px 18px !important;

    background:
        #d98fa7 !important;

    border:
        1px solid
        #d98fa7 !important;

    border-radius:
        25px !important;

    color:
        white !important;

    font-family:
        inherit;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.inicio-page
.boton-agregar-rapido:hover {

    background:
        #c77d96 !important;

    transform:
        translateY(-1px);

}


.inicio-page
.boton-agregar-rapido:disabled {

    opacity:
        0.8 !important;

    cursor:
        default;

    transform:
        none;

}



/* ==================================================
   CAMBIO SUAVE DE IMAGEN
================================================== */

.inicio-page
.producto
.imagen-producto {

    transition:
        opacity 0.2s ease,
        transform 0.3s ease;

}



/* ==================================================
   CELULAR
================================================== */

@media (max-width: 600px) {

    .inicio-page
    .selector-color-rapido,

    .inicio-page
    .color-unico-rapido {

        height:
            42px !important;

        min-height:
            42px;

        font-size:
            12px !important;

    }


    .inicio-page
    .selector-rapido-catalogo
    label {

        font-size:
            10px;

    }


    .inicio-page
    .acciones-producto-card
    .boton-producto,

    .inicio-page
    .boton-agregar-rapido {

        min-height:
            42px !important;

        font-size:
            12px !important;

    }

}/* ==================================================
   ESTADO DE STOCK - JOYERÍA INFINITY
================================================== */


/* La imagen del producto servirá como referencia
   para colocar la etiqueta encima */

.inicio-page .imagen-producto-link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 24px;
}


/* ==================================================
   ETIQUETA DISPONIBLE
================================================== */

.inicio-page .producto:not(.producto-agotado)
.imagen-producto-link::after {

    content: "✓ DISPONIBLE";

    position: absolute;

    top: 14px;
    left: 14px;

    padding: 7px 13px;

    background: rgba(236, 248, 240, 0.95);

    border: 1px solid #a9d1b6;

    border-radius: 30px;

    color: #39704d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    line-height: 1;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.08);

    z-index: 3;

}


/* ==================================================
   ETIQUETA AGOTADO
================================================== */

.inicio-page .producto.producto-agotado
.imagen-producto-link::after {

    content: "AGOTADO";

    position: absolute;

    top: 14px;
    left: 14px;

    padding: 7px 14px;

    background: rgba(255, 238, 243, 0.96);

    border: 1px solid #e0a3b6;

    border-radius: 30px;

    color: #a6405c;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    line-height: 1;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.08);

    z-index: 3;

}


/* ==================================================
   PRODUCTO AGOTADO
================================================== */

/* No queremos que toda la tarjeta se vea apagada */

.inicio-page .producto.producto-agotado {
    opacity: 1 !important;
}


/* Solo apagamos un poco la fotografía */

.inicio-page .producto.producto-agotado
.imagen-producto {

    opacity: 0.55;

    filter: grayscale(25%);

}


/* ==================================================
   TEXTO DE DISPONIBILIDAD
================================================== */

.inicio-page .estado-stock {

    width: fit-content;

    margin:
        14px auto
        2px;

    padding:
        7px 13px;

    border-radius:
        30px;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.6px;

}


/* DISPONIBLE */

.inicio-page
.estado-stock[data-stock="disponible"] {

    background:
        #edf8f0;

    border:
        1px solid
        #b5d8c0;

    color:
        #39704d;

}


/* AGOTADO */

.inicio-page
.estado-stock[data-stock="agotado"] {

    background:
        #fff0f4;

    border:
        1px solid
        #e5b3c1;

    color:
        #a6405c;

}


/* ==================================================
   BOTÓN AGOTADO
================================================== */

.inicio-page
.boton-agregar-rapido:disabled,

.inicio-page
.boton-comprar:disabled {

    background:
        #e6d6dc !important;

    border-color:
        #e6d6dc !important;

    color:
        #8e7c82 !important;

    cursor:
        not-allowed !important;

    opacity:
        1 !important;

    transform:
        none !important;

}


/* ==================================================
   MINIATURAS DE COLORES AGOTADOS
================================================== */

.variante-agotada {

    position: relative;

    opacity:
        0.28 !important;

    filter:
        grayscale(100%);

    cursor:
        not-allowed !important;

    transform:
        none !important;

}


/* ==================================================
   SELECTOR
================================================== */

.inicio-page
.selector-color-rapido
option:disabled {

    color:
        #aaa;

}


/* ==================================================
   PÁGINA INDIVIDUAL
================================================== */

.detalle-info
.estado-stock,

.detalle-info
.existencia.estado-stock {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        auto;

    margin:
        15px 0;

    padding:
        8px 15px;

    border-radius:
        30px;

}


/* DISPONIBLE */

.detalle-info
.estado-stock[data-stock="disponible"] {

    background:
        #edf8f0;

    border:
        1px solid
        #b5d8c0;

    color:
        #39704d;

}


/* AGOTADO */

.detalle-info
.estado-stock[data-stock="agotado"] {

    background:
        #fff0f4;

    border:
        1px solid
        #e5b3c1;

    color:
        #a6405c;

}


/* ==================================================
   CARRITO - PRODUCTO AGOTADO
================================================== */

.estado-stock-carrito {

    display:
        inline-block;

    margin-top:
        8px;

    padding:
        6px 11px;

    background:
        #fff0f4;

    border:
        1px solid
        #e5b3c1;

    border-radius:
        20px;

    color:
        #a6405c !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

}


/* ==================================================
   CELULAR
================================================== */

@media (max-width: 600px) {

    .inicio-page
    .producto:not(.producto-agotado)
    .imagen-producto-link::after,

    .inicio-page
    .producto.producto-agotado
    .imagen-producto-link::after {

        top:
            10px;

        left:
            10px;

        padding:
            6px 10px;

        font-size:
            9px;

    }

}/* ==================================================
   PROMOCIÓN DE ENVÍO - INICIO
================================================== */

.inicio-page .promo-envio-infinity {

    width: calc(100% - 40px);
    max-width: 1180px;

    margin: 35px auto 70px;

    padding: 28px 34px;

    display: flex;
    align-items: center;
    gap: 24px;

    background:
        linear-gradient(
            135deg,
            #fff7fa,
            #f8dce5
        );

    border:
        1px solid #ebc3d0;

    border-radius: 28px;

    box-shadow:
        0 15px 35px
        rgba(120, 70, 85, 0.08);

}


.inicio-page .promo-envio-icono {

    width: 65px;
    height: 65px;

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

    flex-shrink: 0;

    background: white;

    border-radius: 50%;

    font-size: 29px;

    box-shadow:
        0 8px 20px
        rgba(100, 60, 75, 0.08);

}


.inicio-page .promo-envio-texto {

    flex: 1;

}


.inicio-page .promo-envio-texto p {

    margin:
        0 0 5px;

    color:
        #b06a82;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.6px;

}


.inicio-page .promo-envio-texto h2 {

    margin:
        0 0 7px;

    color:
        #222;

    font-size:
        clamp(
            19px,
            2vw,
            27px
        );

    line-height:
        1.2;

}


.inicio-page .promo-envio-texto span {

    color:
        #666;

    font-size:
        13px;

    line-height:
        1.6;

}


.inicio-page .promo-envio-infinity
.boton-principal {

    flex-shrink: 0;

    margin: 0;

    white-space: nowrap;

}


/* ==================================================
   CELULAR
================================================== */

@media (max-width: 700px) {

    .inicio-page .promo-envio-infinity {

        width:
            calc(100% - 30px);

        margin:
            25px auto 55px;

        padding:
            26px 22px;

        flex-direction:
            column;

        text-align:
            center;

        gap:
            16px;

    }


    .inicio-page .promo-envio-icono {

        width:
            58px;

        height:
            58px;

        font-size:
            25px;

    }


    .inicio-page .promo-envio-infinity
    .boton-principal {

        width:
            100%;

        text-align:
            center;

    }

}/* =========================
   GALERÍA DE MINIATURAS
   ========================= */

.galeria-miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.miniatura-item {
  width: 92px;
  height: 92px;
  border: 2px solid #ead0da;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.miniatura-item:hover {
  border-color: #d88faa;
  transform: translateY(-2px);
}

.miniatura-item.activa {
  border-color: #d88faa;
  box-shadow: 0 0 0 3px rgba(216, 143, 170, 0.18);
}

.miniatura-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}/* ==================================================
   CHECKOUT - TÉRMINOS Y PAGO SEGURO
   CORRECCIÓN DE DISEÑO
================================================== */

.checkout-terminos {
    margin-top: 28px;
    margin-bottom: 24px;
    padding: 22px 24px;

    background: #fff7fa;

    border: 1px solid #e7b6c7;
    border-radius: 20px;

    color: #333;
}


.checkout-terminos-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    cursor: pointer;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}


.checkout-terminos-label input {
    width: 18px;
    height: 18px;

    min-width: 18px;

    margin: 3px 0 0 0;

    accent-color: #d783a3;
    cursor: pointer;
}


.checkout-terminos-label span {
    display: block;
    flex: 1;
}


.checkout-terminos a {
    color: #954766;
    font-weight: 700;
    text-decoration: underline;
}


.checkout-terminos > p {
    margin: 15px 0 0 30px;

    font-size: 13px;
    line-height: 1.6;

    color: #666;
}



/* ==================================================
   PAGO SEGURO
================================================== */

.checkout-pago-seguro {
    margin-top: 24px;
    margin-bottom: 24px;

    padding: 22px 24px;

    background: #fff7fa;

    border-radius: 20px;

    text-align: center;
}


.checkout-pago-seguro strong {
    display: block;

    margin-bottom: 10px;

    font-size: 15px;
    color: #333;
}


.checkout-pago-seguro p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color: #555;
}



/* ==================================================
   BOTÓN DE PAGO
================================================== */

#botonIrPago {
    width: 100%;

    margin-top: 0;

    padding: 17px 20px;

    border: none;
    border-radius: 999px;

    background: #1d1d1d;
    color: white;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


#botonIrPago:hover {
    transform: translateY(-1px);
}


#botonIrPago:disabled {
    cursor: wait;
    opacity: 0.65;
}



/* ==================================================
   CELULAR
================================================== */

@media (max-width: 768px) {

    .checkout-terminos {
        padding: 18px;
    }


    .checkout-terminos-label {
        font-size: 14px;
    }


    .checkout-terminos > p {
        margin-left: 30px;
        font-size: 12px;
    }


    .checkout-pago-seguro {
        padding: 18px;
    }

}/* =========================================================
   CORRECCIÓN FINAL CHECKOUT
   JOYERÍA INFINITY

   PEGAR AL FINAL DE styles.css
   NO BORRAR EL CSS ANTERIOR
========================================================= */


/* =========================================================
   FONDO GENERAL
========================================================= */

.checkout-page {
    background: #fff8fa;
}


/* =========================================================
   PORTADA
========================================================= */

.checkout-page .checkout-portada {
    padding: 70px 20px 55px !important;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8dce5,
            #fff8fa
        ) !important;
}


.checkout-page .checkout-portada .etiqueta-seccion {
    margin-bottom: 8px;
}


.checkout-page .checkout-portada h1 {
    margin: 8px 0 15px !important;

    color: #222;

    font-size: 48px;

    line-height: 1.1;
}


.checkout-page .checkout-portada > p:last-child {
    max-width: 620px;

    margin: 0 auto !important;

    color: #666;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.checkout-page .checkout-contenedor {
    width: min(
        1180px,
        calc(100% - 40px)
    ) !important;

    max-width: none !important;

    margin: 0 auto !important;

    padding: 60px 0 80px !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(330px, .8fr) !important;

    gap: 40px !important;

    align-items: start !important;

    background: transparent !important;
}


/* =========================================================
   QUITAR ESTILO VIEJO DEL CONTENEDOR DEL FORMULARIO
========================================================= */

.checkout-page .checkout-formulario {
    width: auto !important;

    min-width: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border-radius: 0 !important;
}


/* =========================================================
   TÍTULO DEL FORMULARIO
========================================================= */

.checkout-page .checkout-titulo {
    margin-bottom: 28px;
}


.checkout-page .checkout-titulo h2 {
    margin: 7px 0 10px;

    color: #222;

    font-size: 31px;

    line-height: 1.2;
}


.checkout-page .checkout-titulo > p:last-child {
    margin: 0;

    color: #777;

    line-height: 1.6;
}


/* =========================================================
   CAJA BLANCA DEL FORMULARIO
========================================================= */

.checkout-page #formularioCompra {
    width: 100%;

    display: block !important;

    padding: 34px !important;

    background: #ffffff !important;

    border: 1px solid #efdde4 !important;

    border-radius: 25px !important;

    box-shadow:
        0 15px 40px
        rgba(100, 50, 70, .07) !important;
}


/* =========================================================
   CAMPOS
========================================================= */

.checkout-page .campo-checkout {
    margin-bottom: 21px !important;
}


.checkout-page .campo-checkout label {
    display: block;

    margin-bottom: 8px !important;

    color: #333;

    font-size: 14px;

    font-weight: 600;
}


.checkout-page .campo-checkout label span {
    color: #999;

    font-size: 12px;

    font-weight: normal;
}


.checkout-page .campo-checkout input,
.checkout-page .campo-checkout textarea {
    width: 100% !important;

    box-sizing: border-box;

    margin: 0 !important;

    padding: 14px 16px !important;

    border: 1px solid #e5d6db !important;

    border-radius: 14px !important;

    background: #fffafb !important;

    color: #222;

    font-family: inherit;

    font-size: 15px;

    outline: none;

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


.checkout-page .campo-checkout textarea {
    min-height: 110px;

    resize: vertical;
}


.checkout-page .campo-checkout input::placeholder,
.checkout-page .campo-checkout textarea::placeholder {
    color: #aaa;
}


.checkout-page .campo-checkout input:focus,
.checkout-page .campo-checkout textarea:focus {
    border-color: #d890a8 !important;

    background: white !important;

    box-shadow:
        0 0 0 3px
        rgba(216, 144, 168, .13);
}


/* =========================================================
   DOS COLUMNAS
========================================================= */

.checkout-page .checkout-dos-columnas {
    display: grid !important;

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

    gap: 18px !important;
}


/* =========================================================
   AVISO DE DATOS
========================================================= */

.checkout-page .checkout-aviso {
    margin:
        5px 0
        25px !important;

    padding: 17px 18px !important;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    background: #fff3f7 !important;

    border-radius: 15px !important;
}


.checkout-page .checkout-aviso span {
    flex-shrink: 0;

    font-size: 20px;
}


.checkout-page .checkout-aviso p {
    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   TÉRMINOS Y CONDICIONES
========================================================= */

.checkout-page .checkout-terminos {
    margin: 28px 0 0;

    padding: 20px 22px;

    background: #fff8fa;

    border: 1px solid #e6a9bd;

    border-radius: 20px;
}


.checkout-page .checkout-terminos-label {
    display: flex !important;

    align-items: flex-start;

    gap: 12px;

    margin: 0 !important;

    cursor: pointer;
}


.checkout-page .checkout-terminos-label input {
    width: 19px !important;
    height: 19px !important;

    min-width: 19px;

    margin: 2px 0 0 !important;

    padding: 0 !important;

    accent-color: #c97091;

    cursor: pointer;
}


.checkout-page .checkout-terminos-label span {
    color: #43393c;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.55;
}


.checkout-page .checkout-terminos > p {
    margin:
        15px 0
        0 31px;

    color: #71656a;

    font-size: 13px;

    line-height: 1.6;
}


.checkout-page .checkout-terminos a {
    color: #a34769 !important;

    font-weight: 700;

    text-decoration: underline;

    text-decoration-thickness: 1px;
}


/* =========================================================
   PAGO SEGURO
========================================================= */

.checkout-page .checkout-pago-seguro {
    margin-top: 26px;

    padding: 22px 20px;

    background: #fff3f7;

    border-radius: 18px;

    text-align: center;
}


.checkout-page .checkout-pago-seguro strong {
    display: block;

    margin-bottom: 9px;

    color: #333;

    font-size: 15px;
}


.checkout-page .checkout-pago-seguro p {
    max-width: 500px;

    margin: 0 auto;

    color: #62575b;

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   BOTÓN STRIPE
========================================================= */

.checkout-page #botonIrPago,
.checkout-page .boton-confirmar {
    width: 100% !important;

    margin-top: 25px;

    padding: 17px 24px !important;

    border: 0 !important;

    border-radius: 999px !important;

    background: #1d1d1d !important;

    color: #fff !important;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

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


.checkout-page #botonIrPago:hover,
.checkout-page .boton-confirmar:hover {
    background: #b76f87 !important;

    transform: translateY(-2px);
}


.checkout-page #botonIrPago:disabled {
    opacity: .6;

    cursor: wait;

    transform: none;
}


/* =========================================================
   RESUMEN
========================================================= */

.checkout-page .checkout-resumen {
    width: auto !important;

    min-width: 0;

    position: sticky;

    top: 110px;

    padding: 30px !important;

    background: #fff !important;

    border: 1px solid #efdde4 !important;

    border-radius: 25px !important;

    box-shadow:
        0 18px 45px
        rgba(100, 50, 70, .09) !important;
}


.checkout-page .resumen-etiqueta {
    margin: 0 0 8px;

    color: #b36b83;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.checkout-page .checkout-resumen h2 {
    margin: 0 0 22px !important;

    color: #222;

    font-size: 28px;
}


/* =========================================================
   PRODUCTOS DENTRO DEL RESUMEN
========================================================= */

.checkout-page #resumenCheckout {
    display: flex;

    flex-direction: column;

    gap: 0 !important;
}


.checkout-page .item-checkout {
    display: flex !important;

    align-items: flex-start;

    gap: 14px !important;

    margin: 0 !important;

    padding: 15px 0 !important;

    background: transparent !important;

    border: 0 !important;

    border-bottom:
        1px solid #f0e2e7 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


.checkout-page .item-checkout:first-child {
    padding-top: 0 !important;
}


.checkout-page .item-checkout:last-child {
    border-bottom: 0 !important;
}


.checkout-page .item-checkout img {
    width: 72px !important;
    height: 82px !important;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 12px !important;
}


.checkout-page .item-checkout-info {
    flex: 1;

    min-width: 0;
}


.checkout-page .item-checkout-info h3 {
    margin: 0 0 6px !important;

    color: #222;

    font-size: 15px;

    line-height: 1.35;
}


.checkout-page .item-checkout-info p {
    margin: 3px 0 !important;

    color: #6d6266 !important;

    font-size: 12px !important;

    line-height: 1.45;
}


.checkout-page .item-checkout-info strong {
    color: #222;
}


/* =========================================================
   SEPARADOR
========================================================= */

.checkout-page
.checkout-resumen-separador {
    width: 100%;

    height: 1px;

    margin: 20px 0;

    background: #eadde2;
}


/* =========================================================
   SUBTOTAL Y ENVÍO
========================================================= */

.checkout-page .resumen-linea {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 7px 0;

    color: #5f5559;

    font-size: 14px;
}


.checkout-page .resumen-linea strong {
    color: #222;

    white-space: nowrap;
}


/* =========================================================
   TOTAL
========================================================= */

.checkout-page .checkout-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 3px;
}


.checkout-page .checkout-total span {
    color: #222;

    font-size: 18px;

    font-weight: 700;
}


.checkout-page #totalCheckout {
    color: #222;

    font-size: 24px;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   INFORMACIÓN DE ENVÍO
========================================================= */

.checkout-page .checkout-envio-aviso {
    display: block !important;

    margin: 23px 0 !important;

    padding: 17px !important;

    background: #fff7fa !important;

    border-radius: 15px !important;

    color: #75696d !important;

    font-size: 12px !important;

    line-height: 1.55 !important;
}


.checkout-page .checkout-envio-aviso p {
    margin: 8px 0;

    color: #75696d;

    font-size: 12px;

    line-height: 1.55;
}


.checkout-page .checkout-envio-aviso p:first-child {
    margin-top: 0;
}


.checkout-page .checkout-envio-aviso p:last-child {
    margin-bottom: 0;
}


.checkout-page
#mensajeEnvioCheckout {
    margin-top: 12px !important;

    color: #554a4e !important;

    font-weight: 600;
}


/* =========================================================
   VOLVER AL CARRITO
========================================================= */

.checkout-page .checkout-volver {
    width: 100%;

    box-sizing: border-box;

    display: flex;

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

    padding: 14px 20px;

    border:
        1px solid
        #dec2cc;

    border-radius: 999px;

    background: #fff;

    color: #555 !important;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 600;
}


.checkout-page .checkout-volver:hover {
    background: #fff5f8;
}


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

.checkout-page .checkout-beneficios {
    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid
        #eee3e7;
}


.checkout-page .checkout-beneficios p {
    margin: 8px 0;

    color: #777;

    font-size: 12px;
}


/* =========================================================
   INFORMACIÓN IMPORTANTE
========================================================= */

.checkout-page
.checkout-informacion-importante {
    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid
        #eee3e7;
}


.checkout-page
.checkout-informacion-importante h3 {
    margin:
        0 0
        13px;

    color: #222;

    font-size: 16px;
}


.checkout-page
.checkout-informacion-importante a {
    display: block;

    width: fit-content;

    margin: 8px 0;

    color: #a34769 !important;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.4;

    text-decoration: none !important;
}


.checkout-page
.checkout-informacion-importante a:hover {
    text-decoration: underline !important;
}


/* =========================================================
   AYUDA
========================================================= */

.checkout-page .checkout-ayuda {
    padding: 65px 20px !important;

    background: #f8e1e8 !important;

    text-align: center;
}


.checkout-page
.checkout-ayuda > div {
    max-width: 700px;

    margin: 0 auto;
}


.checkout-page .checkout-ayuda h2 {
    margin: 8px 0 15px;

    color: #222;

    font-size: 32px;
}


.checkout-page
.checkout-ayuda
p:not(.etiqueta-seccion) {
    margin:
        0 auto
        25px;

    color: #666;

    line-height: 1.7;
}


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

@media (max-width: 950px) {

    .checkout-page .checkout-contenedor {
        width: min(
            760px,
            calc(100% - 32px)
        ) !important;

        grid-template-columns:
            1fr !important;
    }


    .checkout-page .checkout-resumen {
        position: static;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .checkout-page .checkout-portada {
        padding:
            50px 18px
            42px !important;
    }


    .checkout-page .checkout-portada h1 {
        font-size: 36px;
    }


    .checkout-page .checkout-contenedor {
        width:
            calc(
                100% - 24px
            ) !important;

        padding:
            40px 0
            60px !important;

        gap: 28px !important;
    }


    .checkout-page
    .checkout-titulo h2 {
        font-size: 26px;
    }


    .checkout-page #formularioCompra {
        padding:
            25px 18px !important;

        border-radius:
            20px !important;
    }


    .checkout-page
    .checkout-dos-columnas {
        grid-template-columns:
            1fr !important;

        gap: 0 !important;
    }


    .checkout-page
    .campo-checkout input,

    .checkout-page
    .campo-checkout textarea {
        font-size: 16px;
    }


    .checkout-page
    .checkout-terminos > p {
        margin-left: 0;
    }


    .checkout-page
    .checkout-resumen {
        width: auto !important;

        padding:
            25px 20px !important;

        border-radius:
            22px !important;
    }


    .checkout-page
    .checkout-resumen h2 {
        font-size: 25px;
    }


    .checkout-page
    #totalCheckout {
        font-size: 21px;
    }


    .checkout-page
    .item-checkout img {
        width: 65px !important;
        height: 75px !important;
    }


    .checkout-page
    .checkout-ayuda {
        padding:
            50px 20px !important;
    }


    .checkout-page
    .checkout-ayuda h2 {
        font-size: 27px;
    }

}/* =========================================
   BOTÓN FLOTANTE DE WHATSAPP
========================================= */

#whatsapp-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;

  width: 62px;
  height: 62px;

  background: #25d366;
  border-radius: 50%;

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

  z-index: 99999;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#whatsapp-flotante svg {
  width: 36px;
  height: 36px;
  fill: white;
}

#whatsapp-flotante:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

#whatsapp-flotante:active {
  transform: scale(0.95);
}

@media (max-width: 600px) {
  #whatsapp-flotante {
    width: 56px;
    height: 56px;

    right: 16px;
    bottom: 18px;
  }

  #whatsapp-flotante svg {
    width: 32px;
    height: 32px;
  }
}