/* =========================================================
   NOVA STORE - CSS LIMPIO (sin !important)
   -----------------------------------------------------------
   Reordenado automáticamente: las reglas que antes usaban
   !important para ganarle a otras se movieron al FINAL del
   archivo (manteniendo su orden relativo entre ellas), así
   siguen "ganando" por orden de cascada en vez de por !important.
   Backup del original: style-original.css
   ========================================================= */

/* =========================================================
   NOVA STORE - CSS COMPLETO CORREGIDO
   Versión consolidada: sin reglas duplicadas ni conflictos
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #0f172a;
    color: #ffffff;
    font-family: Arial, sans-serif;
    text-align: center;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

h1,
h2 {
    color: #38bdf8;
}

p {
    font-size: 18px;
}

/* =========================================================
   HEADER
   ========================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    background: #1e293b;
    padding: 20px 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.header-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    display: block;
    width: auto;
    height: 100px;
    object-fit: contain;
}

.logo span {
    color: #38bdf8;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
}

.buscador {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 350px;
    min-width: 180px;
}

.buscador input {
    width: 350px;
    max-width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
}

.acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.boton-header {
    width: auto;
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    background: #38bdf8;
    color: #ffffff;
    cursor: pointer;
}

nav {
    margin-top: 20px;
}

nav a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 15px;
    font-size: 17px;
}

nav a:hover {
    color: #38bdf8;
}

/* =========================================================
   CONTENIDO
   ========================================================= */

main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
}

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

button {
    background: #38bdf8;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
}

button:hover {
    background: #0ea5e9;
}

.boton-compra {
    display: block;
    width: 100%;
    padding: 12px;
    background: #38bdf8;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: .3s ease;
}

.boton-compra:hover {
    transform: scale(1.03);
}

/* =========================================================
   CATEGORÍAS
   ========================================================= */

.categorias {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.categoria {
    width: 150px;
    padding: 20px;
    background: #1e293b;
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
    transition: .3s ease;
}

.categoria:hover {
    background: #38bdf8;
    color: #0f172a;
}

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

.productos {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.producto {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 260px;
    max-width: 100%;
    padding: 20px;
    background: #1e293b;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: transform .3s ease, box-shadow .3s ease;
}

.producto:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(56, 189, 248, .25);
}

.producto img {
    display: block;
    width: 100%;
    border-radius: 10px;
    transition: transform .3s ease;
}

.producto:hover img {
    transform: scale(1.05);
}

.producto h3 {
    margin: 15px 0 8px;
    color: #38bdf8;
    font-size: 22px;
}

.producto p {
    color: #cbd5e1;
    font-size: 16px;
}

.producto strong {
    display: block;
    margin: 15px 0;
    color: #38bdf8;
    font-size: 28px;
}

.producto button {
    margin-top: auto;
}

.etiqueta {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 4;
    padding: 6px 12px;
    background: #38bdf8;
    color: #ffffff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

/* =========================================================
   BANNER
   ========================================================= */

.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding: 50px;
    margin-bottom: 40px;
    background: #1e293b;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-texto {
    max-width: 450px;
}

.banner-texto h2 {
    margin: 0;
    font-size: 45px;
}

.banner-texto h3 {
    color: #38bdf8;
    font-size: 25px;
}

.banner-texto p {
    color: #cbd5e1;
    font-size: 20px;
}

.banner-imagen img {
    width: 300px;
    border-radius: 15px;
}

.boton-banner {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    background: #38bdf8;
    color: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
}

.boton-banner:hover {
    background: #0ea5e9;
}

/* =========================================================
   BENEFICIOS — DISEÑO ELEGANTE
   ========================================================= */

.beneficios {
    display: flex;
    align-items: stretch;
    justify-content: center;

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

    margin: 65px auto 55px;

    padding: 0;

    box-sizing: border-box;
}

.beneficio + .beneficio::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12%;

    width: 1px;
    height: 76%;

    background: var(--nova-color-bordes, #334155);

    opacity: .7;
}

.beneficio h3 {
    margin: 8px 0 7px;

    color: var(--nova-color-principal, #38bdf8);

    font-size: 17px;
    font-weight: 700;

    line-height: 1.3;
}

.beneficio p {
    margin: 0;

    color: var(
        --nova-color-texto-secundario,
        #cbd5e1
    );

    font-size: 14px;
    line-height: 1.55;
}
/* =========================================================
   FOOTER
   ========================================================= */

footer {
    margin-top: 80px;
    padding: 40px;
    background: #1e293b;
    border-top: 2px solid #38bdf8;
}

footer h2 {
    color: #38bdf8;
}

footer p {
    color: #cbd5e1;
    font-size: 16px;
}

.copyright {
    margin-top: 20px;
    font-size: 14px;
}

#transportistasFooter {
    width: 100%;
    margin-top: 25px;
}

#logosTransportistasFooter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
}

.transportista-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    min-width: 90px;
    height: 55px;
}

.transportista-footer img {
    display: block;
    width: 70px;
    height: 40px;
    max-width: 70px;
    max-height: 40px;
    object-fit: contain;
}

.texto-envios-footer {
    margin: 0 0 15px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
}

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

.item-carrito {
    margin: 15px 0;
    padding: 15px;
    background: #0f172a;
    border-radius: 10px;
}

.item-carrito img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}

.info-carrito {
    flex: 1;
}

.controles-carrito {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.controles-carrito button {
    width: 35px;
    height: 35px;
    padding: 0;
}

/* =========================================================
   MODAL DE COMPRA
   ========================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, .7);
}

.contenido-pago {
    width: 320px;
    max-width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 25px;
    background: #1e293b;
    border-radius: 15px;
    box-sizing: border-box;
}

.contenido-pago input,
.contenido-pago textarea,
.contenido-pago select {
    width: 90%;
    max-width: 100%;
    margin: 8px;
    padding: 10px;
    border: none;
    border-radius: 8px;
}

.contenido-pago button {
    margin: 15px 0;
}

#confirmarCompra {
    margin-bottom: 20px;
}

#cerrarCompra {
    margin-top: 15px;
}

.contenido-pago::-webkit-scrollbar {
    width: 8px;
}

.contenido-pago::-webkit-scrollbar-thumb {
    background: #38bdf8;
    border-radius: 10px;
}

/* =========================================================
   DETALLE PRODUCTO
   ========================================================= */

.detalle-producto {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    width: 100%;
    max-width: 1100px;
    margin: 50px auto;
    padding: 20px;
}

.detalle-imagen {
    width: 45%;
}

.detalle-imagen img {
    width: 100%;
    max-width: 400px;
    border-radius: 15px;
}

.detalle-info {
    width: 55%;
    text-align: left;
}

.detalle-info h1 {
    color: #38bdf8;
    font-size: 32px;
}

.detalle-info h2 {
    font-size: 35px;
}

.boton-detalle {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    background: transparent;
    color: #38bdf8;
    border: 2px solid #38bdf8;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: .3s ease;
}

.boton-detalle:hover {
    background: #38bdf8;
    color: #ffffff;
}

/* =========================================================
   BOTONES VER TODO
   ========================================================= */

.contenedor-todos {
    margin: 50px 0 70px;
}

.boton-todos {
    width: 200px;
    margin: auto;
}

.contenedor-ver-todo {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 18px 0 25px;
}

.boton-ver-todo {
    padding: 11px 28px;
    background: #111827;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.boton-ver-todo:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

/* =========================================================
   ADMIN - DASHBOARD
   ========================================================= */

.dashboard {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
}

.card-dashboard {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 230px;
    min-height: 170px;
    padding: 25px;
    overflow: hidden;
    background: #1e293b;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
    transition: .3s ease;
}

.card-dashboard:hover {
    transform: translateY(-8px);
}

.card-dashboard h3 {
    margin: 15px 0;
    color: #cbd5e1;
    font-size: 20px;
}

.card-dashboard h1 {
    margin: 10px 0;
    color: #38bdf8;
    font-size: 38px;
}

.card-dashboard h2 {
    color: #38bdf8;
    font-size: 22px;
}

.icono-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin: auto;
    background: #38bdf8;
    color: #ffffff;
    border-radius: 50%;
    font-size: 30px;
    font-weight: bold;
}

.ventas .icono-card { background: #22c55e; }
.pedidos .icono-card { background: #f59e0b; }
.clientes .icono-card { background: #3b82f6; }
.vendido .icono-card { background: #a855f7; }

/* =========================================================
   ADMIN - PEDIDOS
   ========================================================= */

#buscarPedido {
    display: block;
    width: 350px;
    max-width: 90%;
    margin: 20px auto;
    padding: 12px 18px;
    border: none;
    border-radius: 25px;
}

.resumen-pedidos {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
}

.caja-estado {
    width: 200px;
    padding: 25px;
    background: #1e293b;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
    transition: .3s ease;
}

.caja-estado:hover {
    transform: translateY(-5px);
}

.caja-estado h3 {
    margin-bottom: 15px;
    color: #cbd5e1;
}

.caja-estado strong {
    color: #38bdf8;
    font-size: 40px;
}

.botones-pedidos {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 30px;
}

.botones-pedidos button {
    min-width: 150px;
}

.pedido-card {
    width: 650px;
    max-width: 90%;
    margin: 25px auto;
    padding: 25px;
    background: #1e293b;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
    text-align: left;
}

.pedido-card h2 {
    color: #38bdf8;
    text-align: center;
    border-bottom: 1px solid #38bdf8;
    padding-bottom: 10px;
}

.pedido-card p {
    margin: 8px 0;
    color: #cbd5e1;
    font-size: 16px;
}

.pedido-card hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #334155;
}

.pedido-card button {
    margin: 8px;
}

/* =========================================================
   ADMIN - PRODUCTOS
   ========================================================= */

.admin-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 600px;
    max-width: 90%;
    margin: 30px auto 50px;
    padding: 30px;
    background: #1e293b;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
}

.admin-panel input,
.admin-panel textarea {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    outline: none;
}

.admin-panel textarea {
    height: 120px;
    resize: vertical;
}

.admin-panel input:focus,
.admin-panel textarea:focus {
    box-shadow: 0 0 0 2px #38bdf8;
}

#vistaImagen {
    width: 150px;
    height: 150px;
    margin: 10px auto;
    padding: 10px;
    object-fit: contain;
    background: #0f172a;
    border-radius: 15px;
}

.admin-panel button {
    margin-top: 10px;
    background: #38bdf8;
    font-size: 18px;
}

.productos-admin-contenedor {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
}

.bloque-agregar,
.bloque-actuales {
    padding: 30px;
    background: #1e293b;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
}

.bloque-agregar {
    width: 420px;
    flex: 0 0 420px;
}

.bloque-actuales {
    width: 650px;
    flex: 0 0 650px;
}

.bloque-agregar .admin-panel {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.bloque-agregar h3,
.bloque-actuales h3 {
    margin-bottom: 20px;
    color: #38bdf8;
}

#buscarProductoAdmin {
    width: 90%;
    margin-bottom: 20px;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
}

#listaAdmin {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin: 30px auto;
}

.bloque-actuales #listaAdmin {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 650px;
    overflow-y: auto;
    padding: 10px;
    margin-top: 0;
}

.bloque-actuales #listaAdmin::-webkit-scrollbar {
    width: 8px;
}

.bloque-actuales #listaAdmin::-webkit-scrollbar-thumb {
    background: #38bdf8;
    border-radius: 10px;
}

.producto-admin {
    width: 260px;
    padding: 20px;
    background: #1e293b;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
    text-align: center;
    transition: .3s ease;
}

.bloque-actuales .producto-admin {
    width: 90%;
    margin: 15px 0;
}

.producto-admin:hover {
    transform: translateY(-6px);
}

.producto-admin img {
    width: 150px;
    height: 150px;
    margin-bottom: 15px;
    object-fit: contain;
    border-radius: 15px;
}

.producto-admin h3 {
    color: #38bdf8;
    font-size: 22px;
}

.producto-admin p {
    color: #cbd5e1;
    font-size: 16px;
}

.producto-admin button {
    margin: 8px 5px;
}

.producto-admin button:first-of-type {
    background: #f59e0b;
}

.producto-admin button:last-of-type {
    background: #ef4444;
}

/* =========================================================
   STOCK
   ========================================================= */

.estado-stock {
    margin: 12px 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

.stock-disponible { color: #22c55e; }

.stock-bajo {
    color: #f59e0b;
    animation: parpadeo 1.5s infinite;
}

.sin-stock { color: #ef4444; }

.producto button:disabled {
    background: #6b7280;
    color: #ffffff;
    cursor: not-allowed;
    opacity: .8;
}

@keyframes parpadeo {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* =========================================================
   CATEGORÍAS ADMIN
   ========================================================= */

#listaCategoriasAdmin {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    margin-top: 20px;
}

.categoria-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 8px;
    padding: 10px 15px;
    background: #1e293b;
    border-radius: 12px;
}

.categoria-item span {
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
}

.categoria-item small {
    color: #38bdf8;
    font-size: 13px;
}

.categoria-item button {
    padding: 6px 9px;
    background: #ef4444;
    color: #ffffff;
    border-radius: 8px;
    font-size: 13px;
}

.categoria-item button:hover {
    opacity: .8;
}

.nombre-categoria {
    cursor: pointer;
    transition: .2s;
}

.nombre-categoria:hover {
    color: #38bdf8;
}

/* =========================================================
   GRÁFICA
   ========================================================= */

.grafica-ventas {
    width: 90%;
    max-width: 900px;
    margin: 30px auto;
    padding: 25px;
    background: #1e293b;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}

/* =========================================================
   MENÚ MÓVIL
   ========================================================= */

.menu-movil {
    position: absolute;
    top: 95px;
    right: 20px;
    z-index: 3000;
}

.menu-movil button {
    padding: 0;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 32px;
}

#menuCategorias {
    position: absolute;
    top: 45px;
    right: 0;
    display: none;
    flex-direction: column;
    width: 200px;
    padding: 15px;
    background: #1e293b;
    border-radius: 15px;
    z-index: 3000;
}

#menuCategorias a:hover {
    color: #38bdf8;
}

@keyframes menuBajar {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 /* =========================================================
   RESEÑAS
   ========================================================= */

.seccion-resenas {
    width: 100%;
    max-width: 100%;
    margin: 50px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.seccion-resenas > #resumenResenas {
    width: 100%;
    margin-bottom: 25px;
    text-align: center;
}

.seccion-resenas > #resumenResenas h2 {
    margin: 0;
    color: #38bdf8;
    font-size: 28px;
    font-weight: 700;
}

#listaResenas {
    width: 100%;
}

.resenas-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 650px;
    min-height: 240px;
    margin: 0 auto;
}

.resenas-slider .resena-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    min-height: 210px;
    height: auto;
    padding: 25px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    overflow: hidden;
    animation: aparecerResena .35s ease;
    box-sizing: border-box;
}

@keyframes aparecerResena {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.resena-card-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    margin-bottom: 18px;
}

.resena-usuario {
    min-width: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resena-estrellas {
    flex-shrink: 0;
    color: #ffc107;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
}

.resena-card-comentario {
    width: 100%;
    min-height: 70px;
    color: #f1f5f9;
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: break-word;
}

.resena-card-fecha {
    width: 100%;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #94a3b8;
    font-size: 13px;
}

.flecha-resena {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    background: #1e293b;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    transition: background .2s ease, transform .2s ease;
    cursor: pointer;
}

.flecha-resena:hover {
    background: #2563eb;
    transform: scale(1.08);
}

.indicadores-resenas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 18px;
}

.indicador-resena {
    width: 7px;
    height: 7px;
    padding: 0;
    margin: 0;
    background: #cbd5e1;
    border-radius: 50%;
    transition: width .2s ease, background .2s ease;
}

.indicador-resena.activo {
    width: 22px;
    background: #2563eb;
    border-radius: 10px;
}

.sin-resenas {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 25px;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-sizing: border-box;
}

.formulario-resena {
    width: 100%;
    max-width: 650px;
    margin: 45px auto 0;
    padding: 30px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-sizing: border-box;
}

.formulario-resena h2 {
    margin: 0 0 25px;
    color: #1e293b;
    font-size: 23px;
}

.formulario-resena form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.formulario-resena form > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

.formulario-resena label {
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.formulario-resena input,
.formulario-resena select,
.formulario-resena textarea {
    width: 100%;
    padding: 12px 14px;
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    outline: none;
    box-sizing: border-box;
}

.formulario-resena textarea {
    min-height: 110px;
    resize: vertical;
}

.formulario-resena input:focus,
.formulario-resena select:focus,
.formulario-resena textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.formulario-resena button {
    width: 100%;
    min-height: 45px;
    padding: 10px 18px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.formulario-resena button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

#mensajeResena {
    margin: 15px 0 0;
    color: #475569;
    font-size: 14px;
}


/* =========================================================
   RECOMENDACIONES DEL CARRITO
   ========================================================= */

.nova-recomendaciones-carrito {
    width: 100%;
    margin-top: 28px;
    box-sizing: border-box;
}

.nova-recomendaciones-carrito-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.nova-recomendaciones-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: #eff6ff;
    border-radius: 12px;
    font-size: 24px;
}

.nova-recomendaciones-carrito-cabecera h3 {
    margin: 0;
    color: #111827;
    font-size: 21px;
}

.nova-recomendaciones-carrito-cabecera p {
    margin: 3px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.nova-recomendaciones-carrito-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.nova-recomendacion-carrito-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 370px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

.nova-recomendacion-carrito-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    color: inherit;
    text-decoration: none;
}

.nova-recomendacion-carrito-imagen {
    width: 100%;
    height: 205px;
    min-height: 205px;
    box-sizing: border-box;
}

.nova-recomendacion-carrito-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
}

.nova-recomendacion-carrito-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 18px 12px;
    box-sizing: border-box;
}

.nova-recomendacion-carrito-info h4 {
    margin: 0 0 7px;
    color: #111827;
    font-size: 16px;
    line-height: 1.35;
    overflow: hidden;
}

.nova-recomendacion-carrito-info strong {
    margin-top: auto;
    color: #2563eb;
    font-size: 19px;
    font-weight: 700;
}

.nova-recomendacion-carrito-boton {
    width: calc(100% - 24px);
    height: 49px;
    min-height: 49px;
    margin: 0 12px 12px;
    padding: 0;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    box-sizing: border-box;
}

.nova-recomendacion-carrito-boton:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.nova-recomendaciones-cargando {
    width: 100%;
    padding: 20px;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}


/* =========================================================
   NOVA AI
   ========================================================= */

.nova-ai-boton {
    position: fixed;
    right: 22px;
    bottom: 85px;
    z-index: 999990;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    padding: 0;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.nova-ai-boton:hover {
    background: #1d4ed8;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.nova-ai-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 27px;
    line-height: 1;
}

.nova-ai-texto {
    display: none;
}

.nova-ai-chat {
    position: fixed;
    right: 22px;
    bottom: 85px;
    z-index: 999991;
    display: none;
    flex-direction: column;
    width: 370px;
    max-width: calc(100vw - 30px);
    height: 540px;
    max-height: calc(100vh - 110px);
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}

.nova-ai-chat.activo {
    display: flex;
}

.nova-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 65px;
    padding: 12px 15px;
    background: #2563eb;
    color: #ffffff;
    box-sizing: border-box;
}

.nova-ai-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nova-ai-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #ffffff;
    border-radius: 50%;
    font-size: 22px;
}

.nova-ai-header strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
}

.nova-ai-header small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
}

.nova-ai-cerrar {
    width: 35px;
    height: 35px;
    min-width: 35px;
    padding: 0;
    background: transparent;
    color: #ffffff;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.nova-ai-mensajes {
    flex: 1;
    min-height: 0;
    padding: 15px;
    overflow-y: auto;
    background: #f8fafc;
    box-sizing: border-box;
}

.nova-ai-mensaje {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.nova-ai-bot {
    justify-content: flex-start;
}

.nova-ai-usuario {
    justify-content: flex-end;
}

.nova-ai-mensaje-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-right: 8px;
    background: #e2e8f0;
    border-radius: 50%;
    font-size: 16px;
}

.nova-ai-burbuja {
    max-width: 78%;
    padding: 10px 13px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    box-sizing: border-box;
}

.nova-ai-bot .nova-ai-burbuja {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

.nova-ai-usuario .nova-ai-burbuja {
    background: #2563eb;
    color: #ffffff;
}

.nova-ai-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.nova-ai-input-area input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 21px;
    outline: none;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    box-sizing: border-box;
}

.nova-ai-input-area input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.nova-ai-input-area button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 17px;
    cursor: pointer;
}

.nova-ai-input-area button:hover {
    background: #1d4ed8;
}


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

@media (max-width: 1100px) {

    .productos-admin-contenedor {
        flex-direction: column;
        align-items: center;
    }

    .bloque-agregar,
    .bloque-actuales {
        width: 95%;
        max-width: 650px;
        flex: 0 1 auto;
    }

    .bloque-actuales #listaAdmin {
        max-height: none;
    }

    .header-superior {
        justify-content: center;
    }

}


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

@media (max-width: 700px) {

    main {
        padding: 20px 15px;
    }

    header {
        padding: 15px;
    }

    .logo img {
        height: 75px;
    }

    .buscador {
        order: 3;
        width: 100%;
        flex-basis: 100%;
    }

    .buscador input {
        width: 100%;
    }

    .acciones {
        justify-content: center;
    }

    nav a {
        display: inline-block;
        margin: 5px 8px;
        font-size: 15px;
    }

    .banner {
        flex-direction: column;
        gap: 20px;
        padding: 25px 15px;
    }

    .banner-texto {
        max-width: 100%;
    }

    .banner-texto h2 {
        font-size: 32px;
    }

    .banner-texto h3 {
        font-size: 21px;
    }

    .banner-texto p {
        font-size: 17px;
    }

    .banner-imagen img {
        width: 220px;
    }

    #bannerTiendaWeb {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
        border-radius: 12px;
    }

    .productos {
        gap: 15px;
        margin-top: 20px;
    }

    .producto {
        width: 100%;
        max-width: 340px;
    }

    .detalle-producto {
        flex-direction: column;
        gap: 25px;
        margin: 30px auto;
        padding: 10px;
    }

    .detalle-imagen,
    .detalle-info {
        width: 100%;
    }

    .detalle-info {
        text-align: center;
    }

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

    .detalle-info h2 {
        font-size: 30px;
    }

    .menu-movil {
        top: 80px;
        right: 15px;
    }

    .nova-recomendaciones-carrito {
        width: 100%;
    }

    .nova-recomendaciones-carrito-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .nova-recomendacion-carrito-card {
        height: 350px;
        min-height: 350px;
        max-height: 350px;
    }

    .nova-recomendacion-carrito-imagen {
        height: 190px;
        min-height: 190px;
        max-height: 190px;
    }

    .nova-recomendaciones-carrito-cabecera h3 {
        font-size: 18px;
    }

    .nova-recomendaciones-carrito-cabecera p {
        font-size: 13px;
    }

    .resenas-slider {
        gap: 8px;
        min-height: 220px;
    }

    .resenas-slider .resena-card {
        max-width: none;
        min-height: 200px;
        padding: 20px;
    }

    .flecha-resena {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 26px;
    }

    .resena-card-cabecera {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .resena-usuario {
        white-space: normal;
    }

    .resena-estrellas {
        font-size: 16px;
    }

    .resena-card-comentario {
        font-size: 14px;
    }

    .formulario-resena {
        padding: 22px 18px;
        margin-top: 35px;
    }

    .nova-ai-boton {
        right: 15px;
    bottom: 85px;
        width: 55px;
        height: 55px;
        min-width: 55px;
        min-height: 55px;
    }

    .nova-ai-icono {
        font-size: 23px;
    }

    .nova-ai-chat {
        right: 10px;
        bottom: 80px;
        width: calc(100vw - 20px);
        height: 500px;
        max-height: calc(100vh - 100px);
        border-radius: 16px;
    }

    .nova-ai-texto {
        display: none;
    }

    .navegacion-tienda {
        margin-bottom: 25px;
    }

    .navegacion-principal {
        gap: 8px;
        margin-bottom: 15px;
    }

    .seccion-resenas {
        margin-top: 40px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .seccion-resenas > #resumenResenas h2 {
        font-size: 23px;
    }

    #logosTransportistasFooter {
        gap: 12px;
    }

    .transportista-footer {
        width: 75px;
        min-width: 75px;
        height: 50px;
    }

    .transportista-footer img {
        width: 60px;
        height: 35px;
        max-width: 60px;
        max-height: 35px;
    }

}


/* =========================================================
   RESPONSIVE CELULAR MUY PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .acciones {
        width: 100%;
    }

    .boton-header {
        flex: 1;
        padding: 10px 12px;
        font-size: 14px;
    }

    .contenido-pago {
        width: 100%;
        padding: 18px;
    }

    .categoria {
        width: 135px;
        padding: 15px;
    }

    .producto-admin {
        width: 100%;
    }

    .bloque-agregar,
    .bloque-actuales {
        width: 100%;
        padding: 20px;
    }

    .nova-recomendaciones-carrito {
        padding-left: 0;
        padding-right: 0;
    }

}


/* =========================================================
   RECOMENDACIONES DEL CARRITO
   ========================================================= */

.nova-recomendaciones-carrito {
    width: 100%;
    margin-top: 25px;
    padding: 0;
    box-sizing: border-box;
}

.nova-recomendaciones-carrito-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
}

.nova-recomendaciones-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: #eff6ff;
    border-radius: 10px;
    font-size: 21px;
}

.nova-recomendaciones-carrito-cabecera h3 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
}

.nova-recomendaciones-carrito-cabecera p {
    margin: 3px 0 0;
    color: #6b7280;
    font-size: 13px;
}


/* =========================================================
   GRID
   ========================================================= */

.nova-recomendaciones-carrito-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}


/* =========================================================
   TARJETA
   ========================================================= */

.nova-recomendacion-carrito-card {
    width: 100%;
    height: 320px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================================
   ENLACE
   ========================================================= */

.nova-recomendacion-carrito-link {
    display: block;
    width: 100%;
    height: 235px;
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   IMAGEN
   ========================================================= */

.nova-recomendacion-carrito-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 155px;
    padding: 10px;
    background: #ffffff;
    box-sizing: border-box;
}

.nova-recomendacion-carrito-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================================
   INFORMACION
   ========================================================= */

.nova-recomendacion-carrito-info {
    width: 100%;
    height: 80px;
    padding: 8px 12px;
    box-sizing: border-box;
}

.nova-recomendacion-carrito-info h4 {
    margin: 0 0 5px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.nova-recomendacion-carrito-info strong {
    display: block;
    color: #2563eb;
    font-size: 17px;
    font-weight: 700;
}


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

.nova-recomendacion-carrito-boton {
    display: block;
    width: calc(100% - 24px);
    height: 40px;
    margin: 0 12px 12px;
    padding: 0;
    background: #2563eb;
    color: #ffffff;
    border: 0;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.nova-recomendacion-carrito-boton:hover {
    background: #1d4ed8;
}


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

@media (max-width: 800px) {

    .nova-recomendaciones-carrito-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 600px) {

    .nova-recomendaciones-carrito-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .nova-recomendacion-carrito-card {
        height: 320px;
    }

    .nova-recomendacion-carrito-link {
        height: 235px;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .nova-recomendaciones-carrito-cabecera h3 {
        font-size: 16px;
    }

    .nova-recomendaciones-carrito-cabecera p {
        font-size: 12px;
    }

    .nova-recomendacion-carrito-card {
        height: 315px;
    }

}


/* =========================================================
   ⭐ DESTACADOS EN NOVA
========================================================= */

.seccion-destacados {

    width: calc(100% - 70px);

    max-width: 1180px;

    margin: 35px auto;

    padding: 28px 30px 35px;

    background: #06132f;

    border-radius: 22px;

    box-sizing: border-box;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .18);

    overflow: hidden;

}


/* =========================================================
   TÍTULO
========================================================= */

.destacados-cabecera {

    width: 100%;

    margin-bottom: 25px;

}


.destacados-cabecera h2 {

    margin: 0;

    color: #ffffff;

    font-size: 34px;

    font-weight: 500;

    line-height: 1.2;

}


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

.destacados-productos {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    gap: 28px;

    width: 100%;

    overflow-x: auto;

    overflow-y: visible;

    padding: 5px 5px 20px;

    scroll-behavior: smooth;

    box-sizing: border-box;

}


/* =========================================================
   BARRA DE DESPLAZAMIENTO
========================================================= */

.destacados-productos::-webkit-scrollbar {

    height: 8px;

}


.destacados-productos::-webkit-scrollbar-track {

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

    border-radius: 10px;

}


.destacados-productos::-webkit-scrollbar-thumb {

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

    border-radius: 10px;

}


/* =========================================================
   TARJETAS DENTRO DE DESTACADOS
========================================================= */

.destacados-productos .producto {

    flex: 0 0 280px;

    width: 280px;

    max-width: 280px;

    margin: 0;

}


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

@media (max-width: 600px) {

    .seccion-destacados {

        width: calc(100% - 24px);

        margin: 25px auto;

        padding: 22px 15px 25px;

        border-radius: 18px;

    }


    .destacados-cabecera h2 {

        font-size: 26px;

    }


    .destacados-productos {

        gap: 15px;

        padding-left: 2px;

        padding-right: 2px;

    }


    .destacados-productos .producto {

        flex: 0 0 82vw;

        width: 82vw;

        max-width: 82vw;

    }

}

/* =====================================================
   ⏱️ CUENTA REGRESIVA DE OFERTAS
===================================================== */

.contador-oferta-producto {

    margin: 6px 0;

    font-size: 12px;

    font-weight: 700;

    opacity: 1;

}


.contador-oferta-proxima {

    font-weight: 700;

}


.contador-oferta-activa {

    font-weight: 800;

}












/* =====================================================
   📦 STOCK EN TARJETAS PRINCIPALES
===================================================== */

#productos .producto-card
.estado-stock-tarjeta {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 7px;

    padding: 5px 8px;

    box-sizing: border-box;

    border-radius: 7px;

    font-size: 11px;

    font-weight: 800;

}


/* =====================================================
   🟢 STOCK NORMAL
===================================================== */

#productos .producto-card
.estado-stock-disponible {

    color: #16a34a;

}


/* =====================================================
   🟠 ÚLTIMAS UNIDADES
===================================================== */

#productos .producto-card
.estado-stock-bajo {

    color: #f59e0b;

    animation:
        parpadeoStockTarjeta
        1.2s infinite;

}


/* =====================================================
   🔴 AGOTADO
===================================================== */

#productos .producto-card
.estado-stock-agotado {

    color: #ef4444;

    animation:
        parpadeoAgotadoTarjeta
        1.4s infinite;

}


/* =====================================================
   PUNTO
===================================================== */

#productos .producto-card
.estado-stock-icono {

    font-size: 9px;

}


/* =====================================================
   ANIMACIÓN ÚLTIMAS UNIDADES
===================================================== */

@keyframes parpadeoStockTarjeta {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: .35;

    }

}


/* =====================================================
   ANIMACIÓN AGOTADO
===================================================== */

@keyframes parpadeoAgotadoTarjeta {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: .45;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (
    max-width: 600px
) {

    #productos .producto-card
    .estado-stock-tarjeta {

        font-size: 10px;

        margin-top: 5px;

    }

}








/* =====================================================
   📦 STOCK DETALLE PRODUCTO
===================================================== */

.stock-detalle {

    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 800;

}


/* =====================================================
   🟢 DISPONIBLE
===================================================== */

.stock-detalle-disponible {

    color: #16a34a;

    background:
        rgba(34,197,94,.10);

}


/* =====================================================
   🟠 ÚLTIMAS UNIDADES
===================================================== */

.stock-detalle-bajo {

    color: #f59e0b;

    background:
        rgba(245,158,11,.10);

    animation:
        parpadeoStockDetalle
        1.2s infinite;

}


/* =====================================================
   🔴 AGOTADO
===================================================== */

.stock-detalle-agotado {

    color: #ef4444;

    background:
        rgba(239,68,68,.10);

}


/* =====================================================
   ANIMACIÓN
===================================================== */

@keyframes parpadeoStockDetalle {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: .45;

    }

}



/* =====================================================
   ⚡ COMPRAR AHORA
===================================================== */

.boton-comprar-ahora {

    width: 100%;

    min-height: 48px;

    margin-top: 10px;

    border: none;

    border-radius: 10px;

    padding: 12px 18px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    background: #111827;

    color: #ffffff;

    transition:
        transform .2s ease,
        opacity .2s ease;

}


.boton-comprar-ahora:hover {

    transform:
        translateY(-1px);

}


.boton-comprar-ahora:disabled {

    opacity: .5;

    cursor: not-allowed;

    transform: none;

}


/* =====================================================
   📱 MOBILE
===================================================== */

@media (
    max-width: 600px
) {

    .boton-comprar-ahora {

        min-height: 50px;

        font-size: 15px;

    }

}














/* =========================================================
   🛒 NOVA STORE - CARRITO FLOTANTE PRODUCTO
   Ocupa el lugar donde aparece la IA
========================================================= */

.boton-carrito-producto {

    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: 99990;

    width: 58px;

    height: 58px;

    border: none;

    border-radius: 50%;

    background: #2563eb;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    padding: 0;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


/* =========================================================
   ICONO
========================================================= */

.icono-carrito-producto {

    font-size: 25px;

    line-height: 1;

}


/* =========================================================
   HOVER
========================================================= */

.boton-carrito-producto:hover {

    transform:
        translateY(-3px)
        scale(1.04);

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

}


/* =========================================================
   CONTADOR
========================================================= */

.contador-carrito-producto {

    position: absolute;

    top: -4px;

    right: -4px;

    min-width: 22px;

    height: 22px;

    padding:
        0 6px;

    box-sizing: border-box;

    border-radius: 50px;

    background: #ef4444;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 900;

    line-height: 1;

    border:
        2px solid #ffffff;

}


/* =========================================================
   CUANDO EL CARRITO ESTÁ VACÍO
========================================================= */

.contador-carrito-producto.vacio {

    display: none;

}


/* =========================================================
   ANIMACIÓN AL AGREGAR
========================================================= */

.boton-carrito-producto.carrito-animado {

    animation:
        animacionCarritoProducto
        .45s ease;

}


@keyframes animacionCarritoProducto {

    0% {

        transform:
            scale(1);

    }

    40% {

        transform:
            scale(1.18);

    }

    70% {

        transform:
            scale(.95);

    }

    100% {

        transform:
            scale(1);

    }

}


/* =========================================================
   CABECERA DEL CARRITO
========================================================= */

.cabecera-carrito-producto {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.cabecera-carrito-producto h2 {

    margin: 0;

}


/* =========================================================
   CERRAR
========================================================= */

.cerrar-carrito-producto {

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    background: #f1f5f9;

    color: #111827;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}


.cerrar-carrito-producto:hover {

    background: #e2e8f0;

}


/* =========================================================
   ACCIONES
========================================================= */

.acciones-carrito-producto {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;

}


.acciones-carrito-producto button {

    width: 100%;

    min-height: 46px;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 800;

}


/* =========================================================
   SEGUIR COMPRANDO
========================================================= */

.acciones-carrito-producto
.nova-boton-seguir {

    background: #e5e7eb;

    color: #111827;

}


.acciones-carrito-producto
.nova-boton-seguir:hover {

    background: #d1d5db;

}


/* =========================================================
   FINALIZAR
========================================================= */

.acciones-carrito-producto
.nova-boton-finalizar {

    background: #2563eb;

    color: #ffffff;

}


.acciones-carrito-producto
.nova-boton-finalizar:hover {

    background: #1d4ed8;

}







































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

@media (max-width: 600px) {

    .boton-carrito-producto {

        right: 14px;

        bottom: 18px;

        width: 52px;

        height: 52px;

    }


    .icono-carrito-producto {

        font-size: 22px;

    }


    .contador-carrito-producto {

        min-width: 20px;

        height: 20px;

        font-size: 10px;

        top: -3px;

        right: -3px;

    }

}


/* =========================================================
   NOVA STORE — RESPONSIVE FINAL
   Correcciones móviles y tablets
   Este bloque sobrescribe conflictos anteriores del CSS.
   ========================================================= */

/* Base segura */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

img,
video,
iframe {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

/* Evita que elementos flex/grid desborden */
header,
main,
section,
footer,
.container,
.contenedor,
.banner,
.banner-contenido,
.navegacion-principal,
.navegacion-tienda,
.filtros-productos,
.filtros-productos-grid,
.productos,
#productos,
.seccion-destacados,
.destacados-productos,
#destacadosProductos,
.modal,
.modal > div {
    min-width: 0;
    max-width: 100%;
}

/* =========================================================
   ACCESIBILIDAD / TOUCH
   ========================================================= */
@media (hover: none) and (pointer: coarse) {

    button,
    a,
    select,
    input[type="button"],
    input[type="submit"] {
        touch-action: manipulation;
    }
}


/* =========================================================
   NOVA STORE — RESPONSIVE MOBILE FINAL
   Corrección final colocada al final para evitar conflictos
   con reglas responsive anteriores.
========================================================= */

.boton-categorias-movil {
    display: none;
}
/* =========================================================
   🛒 NOVA STORE — MEJORA VISUAL FORMULARIO CHECKOUT
   PC + CELULAR
========================================================= */


/* =========================================================
   CONTENEDOR DEL CHECKOUT
========================================================= */

#pago .contenido-pago {

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

    box-sizing: border-box;

    padding: 28px;

}


/* =========================================================
   TÍTULOS
========================================================= */

#pago .contenido-pago h2 {

    margin-top: 0;
    margin-bottom: 18px;

}


#pago .contenido-pago h3 {

    margin-top: 20px;
    margin-bottom: 10px;

}


/* =========================================================
   CAMPOS DEL FORMULARIO
========================================================= */

#pago input,
#pago select,
#pago textarea {

    width: 100%;

    box-sizing: border-box;

    display: block;

    margin: 8px 0;

    padding: 12px 14px;

    background: #f0f9ff;

    border: 1px solid #93c5fd;

    border-radius: 8px;

    color: #1e293b;

    font-size: 15px;

    font-family: inherit;

    outline: none;

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

}


/* =========================================================
   CUANDO EL USUARIO SELECCIONA UN CAMPO
========================================================= */

#pago input:focus,
#pago select:focus,
#pago textarea:focus {

    background: #ffffff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);

}


/* =========================================================
   PLACEHOLDER
========================================================= */

#pago input::placeholder,
#pago textarea::placeholder {

    color: #64748b;

}


/* =========================================================
   TEXTAREA
========================================================= */

#pago textarea {

    min-height: 90px;

    resize: vertical;

}


/* =========================================================
   SECCIÓN MÉTODO DE PAGO
========================================================= */

#pago .contenido-pago > p {

    margin-top: 16px;

    margin-bottom: 8px;

}


/* =========================================================
   SELECTOR MÉTODO DE PAGO
========================================================= */

#pago #metodoPago {

    margin-top: 4px;

    margin-bottom: 12px;

    background: #eff6ff;

    font-weight: 500;

}


/* =========================================================
   RESUMEN DE COMPRA
========================================================= */

#pago .resumen-compra {

    margin-top: 10px;

    padding: 14px 16px;

    background: #f8fafc;

    border: 1px solid #dbeafe;

    border-radius: 10px;

    box-sizing: border-box;

}


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

#pago .resumen-compra h2 {

    margin-top: 12px;

    margin-bottom: 4px;

}


/* =========================================================
   MENSAJE MERCADO PAGO
========================================================= */

#pago #mensajeMercadoPago {

    display: block;

    margin-top: 6px;

}


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

#pago .contenido-pago button {

    width: 100%;

    box-sizing: border-box;

    margin-top: 10px;

}


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

@media (max-width: 768px) {

    #pago .contenido-pago {

        width: calc(100% - 20px);

        max-width: none;

        padding: 20px 16px;

        margin: 10px auto;

    }


    #pago input,
    #pago select,
    #pago textarea {

        font-size: 16px;

        padding: 12px 13px;

        margin: 7px 0;

    }


    #pago .contenido-pago h3 {

        margin-top: 16px;

        margin-bottom: 8px;

    }


    #pago .contenido-pago > p {

        margin-top: 12px;

        margin-bottom: 6px;

    }


    #pago .resumen-compra {

        margin-top: 8px;

        padding: 12px;

    }

}

















/* =========================================================
   🎨 NOVA STORE
   COLORES DINÁMICOS DESDE ADMIN
   ========================================================= */

:root {

    --nova-color-principal: #38bdf8;

    --nova-color-secundario: #1e293b;

    --nova-color-fondo: #0f172a;

    --nova-color-degradado:
    linear-gradient(
        135deg,
        var(--nova-color-principal) 0%,
        var(--nova-color-secundario) 100%
    );

    --nova-color-tarjetas: #1e293b;

    --nova-color-texto: #ffffff;

    --nova-color-texto-secundario: #cbd5e1;

    --nova-color-botones: #38bdf8;

    --nova-color-texto-botones: #ffffff;

    --nova-color-bordes: #e5e7eb;

    --nova-fuente-tienda:
        "Montserrat",
        sans-serif;

}


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

button:hover,
.boton-header:hover,
.boton-compra:hover,
.boton-carrito-producto:hover,
.boton-comprar-ahora:hover {

    filter: brightness(.92);

}


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

.producto-card-info,
.producto-card-info p,
.descripcion-producto,
.texto-secundario {

    color:
        var(--nova-color-texto-secundario);

}


/* =========================================================
   PUNTO DEL STOCK
   ========================================================= */

#productos .producto-card .estado-stock-icono,
#destacadosProductos .producto-card .estado-stock-icono {

    font-size: 9px;

}


/* =========================================================
   ANIMACIÓN POCO STOCK
   ========================================================= */

@keyframes parpadeoStockTarjeta {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: .35;

    }

}


/* =========================================================
   ANIMACIÓN AGOTADO
   ========================================================= */

@keyframes parpadeoAgotadoTarjeta {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: .45;

    }

}












/* =====================================================
   BOTÓN AGREGAR AL CARRITO
===================================================== */

#productos .producto-card .boton-agregar-tarjeta {

    width: 100%;

    border: 0;

    border-radius: 999px;

    padding: 12px 14px;

    margin-top: 10px;

    background: #000;

    color: #fff;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .5px;

    cursor: pointer;

    transition:
        transform .18s ease,
        opacity .18s ease;

}


#productos .producto-card
.boton-agregar-tarjeta:hover {

    transform:
        translateY(-1px);

}


#productos .producto-card
.boton-agregar-tarjeta:active {

    transform:
        scale(.98);

}


#productos .producto-card
.boton-agregar-tarjeta:disabled {

    background: #d7d7d7;

    color: #777;

    cursor:
        not-allowed;

}


.modal-variantes-tienda {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    visibility:
        hidden;

    pointer-events:
        none;

}


.modal-variantes-tienda.abierto {

    visibility:
        visible;

    pointer-events:
        auto;

}


.modal-variantes-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(0,0,0,.48);

    opacity:
        0;

    transition:
        opacity .25s ease;

}


.modal-variantes-tienda.abierto
.modal-variantes-overlay {

    opacity:
        1;

}


.panel-variantes-tienda {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

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

    overflow-y:
        auto;

    background:
        #fff;

    border-radius:
        28px 28px 0 0;

    box-shadow:
        0 -15px 50px rgba(0,0,0,.22);

    transform:
        translateY(105%);

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1);

    -webkit-overflow-scrolling:
        touch;

}


.modal-variantes-tienda.abierto
.panel-variantes-tienda {

    transform:
        translateY(0);

}


/* =====================================================
   CABECERA
===================================================== */

.cabecera-panel-variantes {

    position:
        sticky;

    top:
        0;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        20px 24px 16px;

    background:
        #fff;

    border-bottom:
        1px solid #eee;

}


.producto-resumen-panel {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    min-width:
        0;

}


.producto-resumen-panel img {

    width:
        82px;

    height:
        82px;

    flex:
        0 0 82px;

    object-fit:
        cover;

    border-radius:
        12px;

    background:
        #f5f5f5;

}


.producto-resumen-panel h2 {

    margin:
        0 0 8px;

    font-size:
        24px;

    line-height:
        1.1;

    font-weight:
        900;

}


.producto-resumen-panel strong {

    font-size:
        20px;

    font-weight:
        500;

}


.cerrar-panel-variantes {

    width:
        42px;

    height:
        42px;

    min-width:
        42px;

    min-height:
        42px;

    flex:
        0 0 42px;

    padding:
        0;

    margin:
        0;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;

    background:
        transparent;

    -webkit-appearance:
        none;

    appearance:
        none;

    color:
        #64748b;

    line-height:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

}

.cerrar-panel-variantes svg {

    display:
        block;

    width:
        20px;

    height:
        20px;

}

.cerrar-panel-variantes:hover {

    background:
        transparent;

    color:
        #38bdf8;

}


/* =====================================================
   OPCIONES
===================================================== */

.contenido-panel-variantes {

    padding:
        8px 24px 24px;

}


.grupo-variante-modal {

    margin-top:
        22px;

}


.grupo-variante-modal h3 {

    margin:
        0 0 12px;

    font-size:
        15px;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;

    font-weight:
        900;

}


.opciones-variante-modal {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.opcion-variante-modal {

    min-width:
        74px;

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        10px 17px;

    border:
        2px solid #e5e5e5;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #111;

    font-size:
        15px;

    cursor:
        pointer;

    transition:
        .18s ease;

}


.opcion-variante-modal:hover:not(:disabled) {

    border-color:
        #111;

}


.opcion-variante-modal.seleccionado {

    border-color:
        #000;

    box-shadow:
        inset 0 0 0 1px #000;

}


.opcion-variante-modal:disabled {

    color:
        #8a8a8a;

    background:
        #fafafa;

    cursor:
        not-allowed;

    text-decoration:
        line-through;

    text-decoration-thickness:
        2px;

}


.muestra-color-modal {

    width:
        22px;

    height:
        22px;

    border-radius:
        50%;

    border:
        2px solid #111;

    box-shadow:
        inset 0 0 0 2px #fff;

}


/* =====================================================
   STOCK / BOTÓN
===================================================== */

.resumen-variante-modal {

    min-height:
        22px;

    margin-top:
        18px;

    color:
        #666;

    font-size:
        13px;

    font-weight:
        700;

}


.pie-panel-variantes {

    position:
        sticky;

    bottom:
        0;

    padding:
        16px 24px
        calc(16px + env(safe-area-inset-bottom));

    background:
        #fff;

    border-top:
        1px solid #eee;

}


.boton-agregar-variante-modal {

    width:
        100%;

    min-height:
        58px;

    border:
        0;

    border-radius:
        999px;

    background:
        #000;

    color:
        #fff;

    font-size:
        16px;

    font-weight:
        900;

    letter-spacing:
        1px;

    cursor:
        pointer;

}


.boton-agregar-variante-modal:disabled {

    background:
        #d7d7d7;

    color:
        #777;

    cursor:
        not-allowed;

}


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

@media (max-width: 600px) {

    #productos .producto-card
    .boton-agregar-tarjeta {

        min-height:
            42px;

        padding:
            10px 8px;

        font-size:
            10px;

    }


    .panel-variantes-tienda {

        max-height:
            91vh;

        border-radius:
            22px 22px 0 0;

    }


    .cabecera-panel-variantes {

        padding:
            14px 16px 12px;

    }


    .producto-resumen-panel img {

        width:
            68px;

        height:
            68px;

        flex-basis:
            68px;

    }


    .producto-resumen-panel h2 {

        font-size:
            20px;

    }


    .producto-resumen-panel strong {

        font-size:
            17px;

    }


    .contenido-panel-variantes {

        padding:
            4px 16px 18px;

    }


    .opcion-variante-modal {

        min-width:
            68px;

        min-height:
            46px;

        padding:
            9px 14px;

        font-size:
            14px;

    }


    .pie-panel-variantes {

        padding:
            12px 16px
            calc(
                12px +
                env(
                    safe-area-inset-bottom
                )
            );

    }

}

/* =====================================================
   📱 GALERÍA PÚBLICA SIN FLECHAS
   ===================================================== */

.galeria-producto .contenedor-media-producto {
    touch-action: pan-y;
}

/* Transición */
.galeria-producto .media-cambio-suave {
    animation: novaCambioMediaSuave .22s ease;
}

@keyframes novaCambioMediaSuave {

    from {
        opacity: .55;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}









/* =========================================================
   📢 NOVA STORE — BARRA DE PROMOCIONES
========================================================= */

.barra-promociones {

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

    /* ==============================================
       🎨 COLORES CONFIGURABLES DESDE EL ADMIN
    ============================================== */

    background:
        var(--nova-color-principal, #050505);

    color:
        var(--nova-color-texto-botones, #ffffff);


    display: flex;

    align-items: center;

    overflow: hidden;

    position: relative;

    z-index: 10000;

    box-sizing: border-box;

}


/* =========================================================
   CONTENEDOR DEL TEXTO
========================================================= */

.texto-barra-promociones {

    display: flex;

    align-items: center;

    width: max-content;

    min-width: max-content;

    height: 100%;

    white-space: nowrap;

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    padding: 0;

    margin: 0;

    animation:
        novaBarraPromocion
        18s
        linear
        infinite;

}


/* =========================================================
   ANIMACIÓN
========================================================= */

@keyframes novaBarraPromocion {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}


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

@media (max-width: 600px) {

    .barra-promociones {

        width: 100%;

        height: 36px;

        min-height: 36px;

    }


    .texto-barra-promociones {

        font-size: 12px;

        animation-duration:
            16s;

    }

}










/* =====================================================
   👤 NOVA STORE — CUENTA CLIENTE
===================================================== */

.modal-cuenta-nova {

    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,.65);

    z-index: 999999;

    align-items: center;

    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

}


/* =====================================================
   CONTENIDO
===================================================== */

.contenido-cuenta-nova {

    position: relative;

    width: min(
        430px,
        100%
    );

    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;

    border-radius: 20px;

    padding: 30px;

    box-sizing: border-box;

    text-align: center;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.3);

}


/* =====================================================
   CERRAR
===================================================== */

.cerrar-cuenta-nova {

    position: absolute;

    top: 10px;

    right: 14px;

    width: 38px;

    height: 38px;

    border: none;

    background: transparent;

    color: #555;

    font-size: 30px;

    cursor: pointer;

}


/* =====================================================
   INPUTS
===================================================== */

.contenido-cuenta-nova input {

    width: 100%;

    box-sizing: border-box;

    padding: 14px;

    margin-bottom: 12px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    font-size: 15px;

    background: #ffffff;

    color: #111827;

}


.contenido-cuenta-nova input:focus {

    outline: none;

    border-color: #0066ff;

    box-shadow:
        0 0 0 3px
        rgba(0,102,255,.12);

}


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

.boton-cuenta-nova {

    width: 100%;

    padding: 14px;

    border: none;

    border-radius: 10px;

    background: #0066ff;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    margin-top: 8px;

}


.boton-cuenta-nova:hover {

    background: #0052cc;

}


.boton-cuenta-nova.secundario {

    background: #f1f5f9;

    color: #111827;

}


.boton-cuenta-nova.secundario:hover {

    background: #e2e8f0;

}


/* =====================================================
   ⭐ TARJETA DE PUNTOS
===================================================== */

.tarjeta-puntos-nova {

    margin: 25px 0;

    padding: 25px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #0066ff,
            #0047b3
        );

    color: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(0,102,255,.25);

}


.tarjeta-puntos-nova strong {

    display: block;

    font-size: 42px;

    line-height: 1.1;

    margin: 8px 0;

}


.tarjeta-puntos-nova span {

    font-size: 14px;

}


.valor-puntos-nova {

    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(255,255,255,.25);

}


.valor-puntos-nova strong {

    display: inline;

    font-size: 20px;

}


/* =====================================================
   📱 MOBILE
===================================================== */

@media (max-width: 600px) {

    .modal-cuenta-nova {

        padding: 15px;

    }


    .contenido-cuenta-nova {

        padding: 25px 18px;

        border-radius: 16px;

    }


    .tarjeta-puntos-nova strong {

        font-size: 36px;

    }

}


/* =========================================================
   SELECTOR DE FUENTES DEL ADMIN
   NO AFECTA PORQUE ESTÁ EN LA TIENDA PÚBLICA
   ========================================================= */

body {

    --nova-fuente-tienda:
        "Montserrat",
        sans-serif;

}


/* =========================================================
   DEGRADADO SOBRE EL BANNER
========================================================= */

#bannerTiendaWeb::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            var(--nova-color-principal),
            var(--nova-color-secundario)
        );

    opacity: .32;

}


/* =========================================================
   EL CONTENIDO DEL BANNER QUEDA POR ENCIMA
========================================================= */

#bannerTiendaWeb .nova-slider-banners,
#bannerTiendaWeb .nova-slide-banner {

    position: relative;

    z-index: 3;

}

/* =====================================================
   ❤️ NOVA STORE — FAVORITOS EN TARJETA
   ===================================================== */

.producto-card {
    position: relative;
}


/* =====================================================
   CORAZÓN
   ===================================================== */

.boton-favorito-producto {

    position: absolute;

    top: 14px;
    right: 14px;

    width: auto;
    height: auto;

    padding: 0;
    margin: 0;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 31px;
    line-height: 1;

    font-family:
        Arial,
        sans-serif;

    cursor: pointer;

    z-index: 50;

    box-shadow: none;

    appearance: none;

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}


/* =====================================================
   HOVER
   ===================================================== */

.boton-favorito-producto:hover {

    background: transparent;

    box-shadow: none;

    border: none;

    color: #ffffff;

    transform: scale(1.12);

}


/* =====================================================
   FAVORITO ACTIVO ❤️
   ===================================================== */

.boton-favorito-producto.activo {

    color: #ff3040;

    background: transparent;

    border: none;

    box-shadow: none;

    transform: scale(1);

}


/* =====================================================
   HOVER DEL FAVORITO ACTIVO
   ===================================================== */

.boton-favorito-producto.activo:hover {

    color: #ff3040;

    background: transparent;

    box-shadow: none;

    transform: scale(1.12);

}


/* =====================================================
   QUITAR EFECTOS DEL NAVEGADOR
   ===================================================== */

.boton-favorito-producto:focus,
.boton-favorito-producto:focus-visible {

    outline: none;

    border: none;

    background: transparent;

    box-shadow: none;

}


/* =====================================================
   ANIMACIÓN AL AGREGAR
   ===================================================== */

@keyframes favoritoEntrada {

    0% {
        transform: scale(0.7);
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }

}

.boton-favorito-producto.activo {

    animation:
        favoritoEntrada 0.25s ease;

}


/* =====================================================
   📱 MÓVIL
   ===================================================== */

@media (max-width: 600px) {

    .boton-favorito-producto {

        top: 10px;
        right: 10px;

        font-size: 27px;

    }

}
/* =========================================================
   NOVA STORE — CUENTA CLIENTE PROFESIONAL
   CORRECCION SEGURA
   Solo modifica el contenido de la cuenta logueada.
   No modifica body, header, main ni overlays.
========================================================= */

#cuentaNovaLogueado {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 0 24px;
    box-sizing: border-box;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente {
    text-align: left;
    margin: 0 0 22px;
    padding: 0 4px;
}

#cuentaNovaLogueado .tarjeta-puntos-nova > div:first-child {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .92;
}

#cuentaNovaLogueado .grid-cuenta-cliente {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

#cuentaNovaLogueado .opcion-cuenta-cliente {
    position: relative;
    width: 100%;
    min-height: 92px;
    padding: 19px 48px 18px 20px;
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    color: #111827;
    text-align: left;
    box-sizing: border-box;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#cuentaNovaLogueado .opcion-cuenta-cliente:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .10);
}

#cuentaNovaLogueado .opcion-cuenta-cliente:active {
    transform: translateY(0);
}

#cuentaNovaLogueado .opcion-cuenta-cliente::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: 19px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 25px;
    line-height: 1;
    font-weight: 400;
}

#cuentaNovaLogueado .opcion-cuenta-cliente:hover::after {
    color: #0066ff;
}

#cuentaNovaLogueado .contenido-cuenta-cliente {
    width: 100%;
    margin-top: 22px;
    padding: 22px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    color: #334155;
    box-sizing: border-box;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .05);
}

#cuentaNovaLogueado #botonCerrarSesionNova {
    margin-top: 22px;
    width: 100%;
    max-width: 240px;
    padding: 12px 18px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff;
    color: #dc2626;
    font-size: 14px;
    font-weight: 700;
    box-sizing: border-box;
}

#cuentaNovaLogueado #botonCerrarSesionNova:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

@media (max-width: 760px) {
    #cuentaNovaLogueado {
        padding: 5px 0 20px;
    }
    #cuentaNovaLogueado .grid-cuenta-cliente {
        grid-template-columns: 1fr;
        gap: 11px;
    }
    #cuentaNovaLogueado .opcion-cuenta-cliente {
        min-height: 82px;
        padding: 17px 46px 17px 17px;
    }
    #cuentaNovaLogueado .tarjeta-puntos-nova {
        padding: 21px;
    }
}

@media (max-width: 480px) {
    #cuentaNovaLogueado .cabecera-cuenta-cliente h2 {
        font-size: 24px;
    }
    #cuentaNovaLogueado .cabecera-cuenta-cliente p {
        font-size: 13px;
    }
    #cuentaNovaLogueado .tarjeta-puntos-nova > strong {
        font-size: 36px;
    }
    #cuentaNovaLogueado .contenido-cuenta-cliente {
        padding: 17px;
    }
}

/* =====================================================
   CATEGORÍAS Y SUBCATEGORÍAS
===================================================== */

.grupo-categoria {
    width: 100%;
}

.categoria-principal {
    font-weight: 700;
}

.subcategorias-desplegable {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 16px;
    margin-top: 3px;
    margin-bottom: 6px;
}

.subcategoria-desplegable {
    width: calc(100% - 16px);
    font-size: 0.92em;
    opacity: 0.92;
    text-align: left;
}
/* =========================================================
   NOVA STORE - MENÚ DE CATEGORÍAS
   ========================================================= */

#botonesCategorias.categorias-desplegables {
    display: none;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 10px;
    position: relative;
    z-index: 1000;
}

/* Cuando JavaScript abre el menú */
#botonesCategorias.categorias-desplegables.mostrar,
#botonesCategorias.categorias-desplegables.abierto {
    display: flex;
}


/* =========================================================
   CATEGORÍA PRINCIPAL
   ========================================================= */

#botonesCategorias .grupo-categoria {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


/* =========================================================
   BOTÓN CATEGORÍA
   ========================================================= */

#botonesCategorias .categoria-desplegable {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    box-sizing: border-box;
    transition:
        background-color .18s ease,
        transform .18s ease;
}


/* Categoría principal */

#botonesCategorias .categoria-principal {
    font-weight: 700;
}


/* Efecto al pasar el mouse */

#botonesCategorias .categoria-desplegable:hover {
    background: rgba(0, 0, 0, .06);
}


/* =========================================================
   SUBCATEGORÍAS
   ========================================================= */

#botonesCategorias .subcategorias-desplegable {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;

    padding-left: 18px;
    margin-top: 3px;
    margin-bottom: 5px;

    gap: 3px;
}


/* Botón de subcategoría */

#botonesCategorias .subcategoria-desplegable {
    width: calc(100% - 8px);
    min-height: 38px;

    padding: 8px 12px;

    font-size: .92rem;
    font-weight: 500;

    text-align: left;

    border-radius: 8px;

    opacity: .9;
}


/* =========================================================
   "VER TODOS"
   ========================================================= */

#botonesCategorias .categoria-todos {
    margin-top: 5px;
    font-weight: 700;
}


/* =========================================================
   PC
   ========================================================= */

@media (min-width: 769px) {

    #botonesCategorias.categorias-desplegables {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 768px) {

    #botonesCategorias.categorias-desplegables {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;

        padding: 10px;

        border-radius: 14px;

        box-sizing: border-box;
    }

    #botonesCategorias .categoria-desplegable {
        min-height: 44px;
    }

    #botonesCategorias .subcategorias-desplegables {
        padding-left: 12px;
    }

}

/* =========================================================
   CATEGORÍAS PRINCIPALES Y SUBCATEGORÍAS
   ========================================================= */

#botonesCategorias .grupo-categoria {
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* =========================================================
   CATEGORÍA PRINCIPAL
   ========================================================= */

#botonesCategorias .categoria-principal {
    width: 100%;
    min-height: 44px;

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

    gap: 10px;

    padding: 10px 14px;

    border: none;
    background: transparent;

    cursor: pointer;

    text-align: left;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   TEXTO CATEGORÍA
   ========================================================= */

#botonesCategorias .texto-categoria-principal {
    flex: 1;

    min-width: 0;

    text-align: left;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   FLECHA
   ========================================================= */

#botonesCategorias .flecha-subcategoria {

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

    line-height: 1;

    transition:
        transform 0.2s ease;
}


/* =========================================================
   FLECHA ABIERTA
   ========================================================= */

#botonesCategorias
.grupo-categoria.categoria-abierta
.flecha-subcategoria {

    transform:
        rotate(90deg);
}


/* =========================================================
   SUBCATEGORÍAS
   ========================================================= */

#botonesCategorias .subcategorias-desplegable {

    width: 100%;

    display: none;

    flex-direction: column;

    padding-left: 14px;

    padding-right: 2px;

    box-sizing: border-box;
}


/* =========================================================
   BOTÓN SUBCATEGORÍA
   ========================================================= */

#botonesCategorias .subcategoria-desplegable {

    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding: 10px 13px;

    border: none;

    background: transparent;

    cursor: pointer;

    text-align: left;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    #botonesCategorias .grupo-categoria {
        width: 100%;
    }


    #botonesCategorias .categoria-principal {

        width: 100%;

        min-height: 48px;

        padding:
            12px 14px;

        touch-action:
            manipulation;
    }


    #botonesCategorias .subcategorias-desplegable {

        width: 100%;

        padding-left: 14px;

        padding-right: 2px;
    }


    #botonesCategorias .subcategoria-desplegable {

        width: 100%;

        min-height: 44px;

        padding:
            11px 13px;

        font-size: 15px;

        touch-action:
            manipulation;
    }


    #botonesCategorias .flecha-subcategoria {

        width: 28px;

        height: 28px;

        flex-basis: 28px;

        font-size: 24px;
    }

}



/* ==========================================================
   📱 CATEGORÍAS - MENÚ MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    #botonesCategorias {
        width: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        max-height: 75vh;
    }

    #botonesCategorias .grupo-categoria {
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    /* CATEGORÍA PRINCIPAL */
    #botonesCategorias .categoria-principal {
        width: 100%;
        min-height: 52px;
        box-sizing: border-box;

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

        padding: 13px 16px;

        border: 0;
        margin: 0;

        background: transparent;

        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;

        text-align: left;
    }

    #botonesCategorias .categoria-principal:active {
        opacity: 0.75;
    }

    /* TEXTO */
    #botonesCategorias .texto-categoria-principal {
        flex: 1;
        min-width: 0;

        text-align: left;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* FLECHA */
    #botonesCategorias .flecha-subcategoria {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;

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

        font-size: 22px;
        line-height: 1;

        transition: transform 0.2s ease;

        pointer-events: none;
    }

    /* FLECHA ABIERTA */
    #botonesCategorias
    .grupo-categoria.categoria-abierta
    .flecha-subcategoria {
        transform: rotate(90deg);
    }

    /* CONTENEDOR SUBCATEGORÍAS */
    #botonesCategorias .subcategorias-desplegable {
        width: 100%;

        display: none;

        flex-direction: column;

        box-sizing: border-box;

        padding: 0 0 5px 16px;

        margin: 0;
    }

    /* CUANDO ESTÁ ABIERTA */
    #botonesCategorias
    .grupo-categoria.categoria-abierta
    .subcategorias-desplegable {
        display: flex;
    }

    /* SUBCATEGORÍA */
    #botonesCategorias .subcategoria-desplegable {
        width: 100%;
        min-height: 46px;

        box-sizing: border-box;

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

        padding: 11px 16px;

        border: 0;
        margin: 0;

        background: transparent;

        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;

        text-align: left;
    }

    #botonesCategorias .subcategoria-desplegable:active {
        opacity: 0.7;
    }

    /* VER TODOS */
    #botonesCategorias .categoria-todos {
        width: 100%;
        min-height: 52px;

        box-sizing: border-box;

        display: flex;
        align-items: center;

        padding: 13px 16px;

        border: 0;
        margin: 0;

        cursor: pointer;
        touch-action: manipulation;
    }
}


/* ==========================================================
   📱 ASEGURAR QUE EL BOTÓN DE CATEGORÍAS SEA CLICKEABLE
   ========================================================== */

@media (max-width: 768px) {

    #botonCategorias,
    .boton-categorias,
    .btn-categorias {
        position: relative;
        z-index: 10001;
        touch-action: manipulation;
    }

    #botonesCategorias {
        position: relative;
        z-index: 10000;
    }

    #botonesCategorias button {
        position: relative;
        z-index: 10001;
    }
}

/* ==========================================================
   🔔 PUNTO 37 — AVISARME CUANDO VUELVA A STOCK
   ========================================================== */

.aviso-stock-producto {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 18px 0 22px;
    padding: 18px;
    border: 1px solid rgba(21, 101, 192, .20);
    border-radius: 16px;
    background: rgba(21, 101, 192, .06);
}

.aviso-stock-icono {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(21, 101, 192, .12);
    font-size: 21px;
}

.aviso-stock-contenido {
    flex: 1;
    min-width: 0;
}

.aviso-stock-contenido > strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}

.aviso-stock-contenido > p {
    margin: 7px 0 13px;
    font-size: 14px;
    line-height: 1.45;
    opacity: .78;
}

.form-aviso-stock {
    display: flex;
    gap: 9px;
    width: 100%;
}

.form-aviso-stock input {
    flex: 1;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    outline: none;
}

.form-aviso-stock input:focus {
    border-color: #1565c0;
    box-shadow: 0 0 0 3px rgba(21, 101, 192, .10);
}

.form-aviso-stock button {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: #1565c0;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.form-aviso-stock button:hover {
    filter: brightness(.96);
}

.form-aviso-stock button:disabled {
    opacity: .65;
    cursor: wait;
}

@media (max-width: 600px) {

    .aviso-stock-producto {
        gap: 11px;
        padding: 15px;
        border-radius: 14px;
    }

    .aviso-stock-icono {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 18px;
    }

    .aviso-stock-contenido > strong {
        font-size: 15px;
    }

    .aviso-stock-contenido > p {
        font-size: 13px;
    }

    .form-aviso-stock {
        flex-direction: column;
    }

    .form-aviso-stock input,
    .form-aviso-stock button {
        width: 100%;
        min-height: 46px;
        height: 46px;
    }

}






/* =========================================================
   FOOTER — REDES SOCIALES
   ========================================================= */

.footer-redes {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;
    margin: 25px auto;

    background: transparent;

    box-sizing: border-box;
}


/* =========================================================
   LOGOS OFICIALES
   ========================================================= */

.footer-red-logo {
    width: 22px;
    height: 22px;

    min-width: 22px;
    max-width: 22px;

    object-fit: contain;

    display: block;

    flex-shrink: 0;
}


/* =========================================================
   INSTAGRAM
   ========================================================= */

.footer-instagram {
    border-color: rgba(225, 48, 108, .40);
}


.footer-instagram:hover {
    background: rgba(225, 48, 108, .10);

    border-color: rgba(225, 48, 108, .70);
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.footer-whatsapp {
    border-color: rgba(37, 211, 102, .40);
}


.footer-whatsapp:hover {
    background: rgba(37, 211, 102, .10);

    border-color: rgba(37, 211, 102, .70);
}

.detalle-resenas-seccion
#listaResenas::before {

    content:
        "Opiniones de clientes";

    display: block;

    margin-bottom: 28px;

    color: #38bdf8;

    font-size: 28px;

    font-weight: 700;

    text-align: center;

}


/* ===== Reglas que antes tenían !important (ahora ganan por orden) ===== */



#bannerTiendaWeb {
    position: relative;
    width: 100%;
   height: 275px;
min-height: 275px;
max-height: 275px;
    overflow: hidden;
    border-radius: 20px;
}

#bannerTiendaWeb .nova-slider-banners,
#bannerTiendaWeb .nova-slide-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#bannerTiendaWeb .nova-slide-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.beneficio {
    flex: 1;
    width: auto;
    min-width: 0;

    padding: 8px 38px;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    position: relative;
    text-align: center;

    box-sizing: border-box;
}


/* =========================================================
   BENEFICIOS — CELULAR
   DISEÑO PROFESIONAL
   ========================================================= */

@media (max-width: 600px) {

    .beneficios {
        display: flex;
        flex-direction: column;

        width: calc(100% - 32px);
        max-width: 500px;

        margin: 42px auto 35px;

        padding: 0;

        background: transparent;
    }


    /* =====================================================
       CADA BENEFICIO
       ===================================================== */

    .beneficio {
        width: 100%;

        display: grid;

        grid-template-columns: 58px 1fr;

        align-items: center;

        min-height: 92px;

        padding: 20px 5px;

        box-sizing: border-box;

        text-align: left;

        background: transparent;

        border: none;

        border-radius: 0;

        box-shadow: none;
    }


    /* =====================================================
       SEPARADOR
       ===================================================== */

    .beneficio + .beneficio {
        border-top: 1px solid
            rgba(148, 163, 184, 0.25);
    }

    .beneficio + .beneficio::before {
        display: none;
    }


    /* =====================================================
       ICONO
       ===================================================== */

    .beneficio > :first-child {
        display: flex;

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

        width: 46px;
        height: 46px;

        margin: 0;

        flex-shrink: 0;

        font-size: 24px;

        background: rgba(56, 189, 248, 0.10);

        border-radius: 50%;
    }


    /* =====================================================
       TITULO
       ===================================================== */

    .beneficio h3 {
        margin: 0 0 5px;

        padding: 0;

        background: transparent;

        color: var(
            --nova-color-principal,
            #38bdf8
        );

        font-size: 17px;

        font-weight: 700;

        line-height: 1.25;
    }


    /* =====================================================
       DESCRIPCION
       ===================================================== */

    .beneficio p {
        margin: 0;

        padding: 0;

        background: transparent;

        color: var(
            --nova-color-texto-secundario,
            #cbd5e1
        );

        font-size: 14px;

        line-height: 1.45;
    }

}

.transportista-footer span {
    display: none;
}

#menuCategorias.mostrar {
    display: flex;
    animation: menuBajar .3s ease;
}

#menuCategorias a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px;
    color: #ffffff;
    text-decoration: none;
}

/* =========================================================
   NAVEGACIÓN TIENDA
   ========================================================= */

.navegacion-tienda {
    width: 100%;
    margin-bottom: 35px;
}

.navegacion-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.categorias-desplegables {
    margin-bottom: 20px;
}




/* =========================================================
   FIX DEFINITIVO - PRODUCTOS DESAPARECEN AL HACER SCROLL
   ========================================================= */

/* El contenedor de productos debe formar parte normal
   del documento y crecer con todos los productos */
#productos.productos {
    position: relative;
    display: flex;

    width: 100%;
    height: auto;
    min-height: 200px;

    max-height: none;

    overflow: visible;

    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;

    visibility: visible;
    opacity: 1;

    z-index: 2;
}

/* Cada producto permanece visible al desplazarse */
#productos.productos .producto {
    position: relative;

    display: flex;

    visibility: visible;
    opacity: 1;

    height: auto;
    max-height: none;

    overflow: hidden;

    flex-shrink: 0;

    transform: none;
}

/* Evita que algún estado del navegador/CSS
   termine ocultando las tarjetas */
#productos.productos .producto:not([style*="display: none"]) {
    visibility: visible;
    opacity: 1;
}

/* Imágenes siempre visibles */
#productos.productos .producto img {
    visibility: visible;
    opacity: 1;
    display: block;
}

/* En celulares */
@media (max-width: 600px) {

    #productos.productos {
        width: 100%;
        height: auto;
        max-height: none;

        overflow: visible;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #productos.productos .producto {
        width: 100%;
        max-width: 340px;

        height: auto;
        max-height: none;

        flex-shrink: 0;

        visibility: visible;
        opacity: 1;
    }
}







/* =====================================================
   🎟️ CUPÓN CHECKOUT - NOVA STORE
===================================================== */

#novaCuponCheckout {

    display: block;

    width: 100%;
    max-width: 100%;

    margin: 20px 0 0;
    padding: 16px;

    box-sizing: border-box;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 12px;
}


/* =====================================================
   TÍTULO CUPÓN
===================================================== */

#novaCuponCheckout .nova-cupon-titulo {

    display: flex;

    align-items: center;

    width: 100%;

    margin: 0 0 11px;
    padding: 0;

    color: #111827;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;

    text-align: left;
}


/* =====================================================
   FORMULARIO CUPÓN
===================================================== */

#novaCuponCheckout .nova-cupon-form {

    display: flex;

    align-items: center;

    width: 100%;

    gap: 8px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* =====================================================
   INPUT CUPÓN
===================================================== */

#novaCuponCheckout #novaCuponInput {

    display: block;

    flex: 1 1 auto;

    width: auto;

    min-width: 0;

    height: 42px;

    margin: 0;

    padding: 0 12px;

    box-sizing: border-box;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    background: #ffffff;

    color: #111827;

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    outline: none;
}


#novaCuponCheckout #novaCuponInput::placeholder {

    color: #9ca3af;
}


#novaCuponCheckout #novaCuponInput:focus {

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, .10);
}


/* =====================================================
   BOTÓN USAR CUPÓN
===================================================== */

#novaCuponCheckout #novaCuponAplicar {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 82px;

    width: 82px;

    min-width: 82px;

    height: 42px;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    border: none;

    border-radius: 8px;

    background: #2563eb;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


#novaCuponCheckout #novaCuponAplicar:hover {

    background: #1d4ed8;
}


/* =====================================================
   MENSAJE CUPÓN
===================================================== */

#novaCuponCheckout .nova-cupon-mensaje {

    display: block;

    width: 100%;

    min-height: 0;

    margin: 8px 0 0;

    padding: 0;

    color: #15803d;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;

    text-align: left;
}


#novaCuponCheckout .nova-cupon-mensaje:empty {

    display: none;
}


#novaCuponCheckout .nova-cupon-mensaje.error {

    color: #dc2626;
}


#novaCuponCheckout .nova-cupon-mensaje.exito {

    color: #15803d;
}


/* =====================================================
   FILA DESCUENTO
===================================================== */

#filaDescuentoCupon {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin: 8px 0;

    padding: 0;

    color: #15803d;

    font-size: 14px;
}


#descuentoCuponCompra {

    color: #15803d;

    font-weight: 700;
}


/* =====================================================
   NOVA STORE
   CONFIGURACIÓN GENERAL
===================================================== */

html,
body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;
}


main {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px 15px;

    box-sizing: border-box;
}


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

#productos {

    width: 100%;

    max-width: 1150px;

    margin: 20px auto;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 245px)
        );

    justify-content: center;

    align-items: stretch;

    gap: 20px;

    box-sizing: border-box;
}


/* =====================================================
   TARJETA PRODUCTO PRINCIPAL
===================================================== */

#productos .producto-card {

    width: 100%;

    max-width: 245px;

    min-width: 0;

    box-sizing: border-box;

    padding: 12px;

    margin: 0;

    border-radius: 12px;
}


/* =====================================================
   IMAGEN PRODUCTO PRINCIPAL
===================================================== */

#productos .producto-card .producto-card-imagen {

    width: 100%;

    height: 165px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


#productos .producto-card .producto-card-imagen img {

    width: 100%;

    height: 165px;

    max-width: 100%;

    max-height: 165px;

    object-fit: contain;
}


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

#productos .producto-card .producto-card-info {

    width: 100%;

    padding: 7px 2px;

    box-sizing: border-box;
}


/* =====================================================
   NOMBRE PRODUCTO
===================================================== */

#productos .producto-card .producto-card-nombre {

    margin: 7px 0 5px;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 600;
}


/* =====================================================
   PRECIO PRODUCTO
===================================================== */

#productos .producto-card .producto-card-precio {

    margin: 6px 0;
}


#productos .producto-card
.producto-card-precio strong {

    font-size: 21px;
}


#productos .producto-card
.producto-card-precio-anterior {

    font-size: 12px;
}


#productos .producto-card
.descuento-producto {

    font-size: 11px;
}


/* =====================================================
   ETIQUETAS PRODUCTO
===================================================== */

#productos .producto-card
.etiquetas-producto {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;
}


#productos .producto-card
.etiqueta-producto {

    padding: 3px 6px;

    font-size: 9px;

    line-height: 1.1;
}


/* =====================================================
   CONTADOR OFERTA
===================================================== */

#productos .producto-card
.contador-oferta-producto {

    font-size: 10px;

    margin-top: 4px;
}
/* =====================================================
   CATEGORÍAS
===================================================== */

.categorias {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 20px 0;
}


.categoria {

    width: 125px;

    padding: 12px;

    font-size: 14px;

    box-sizing: border-box;
}


/* =====================================================
   BUSCADOR
===================================================== */

.buscador input {

    width: 300px;

    max-width: 100%;

    padding: 10px 15px;

    font-size: 14px;

    box-sizing: border-box;
}


/* =====================================================
   HEADER
===================================================== */

header {

    padding: 12px 20px;
}


.logo img {

    height: 70px;
}


.logo span {

    font-size: 13px;
}


nav {

    margin-top: 12px;
}


nav a {

    margin: 0 10px;

    font-size: 15px;
}


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

.boton-header {

    padding: 9px 14px;

    font-size: 13px;
}


/* =====================================================
   BANNER
===================================================== */

#bannerTiendaWeb {

    width: 100%;

    height: 260px;

    min-height: 260px;

    max-height: 260px;
}


.banner {

    padding: 25px;

    gap: 25px;

    margin-bottom: 25px;
}


.banner-texto h2 {

    font-size: 32px;
}


.banner-texto h3 {

    font-size: 20px;
}


.banner-texto p {

    font-size: 16px;
}


/* =====================================================
   DESTACADOS
===================================================== */

.seccion-destacados {

    width: 100%;

    max-width: 1150px;

    margin: 25px auto;

    padding: 18px;

    box-sizing: border-box;
}


/* =====================================================
   CABECERA DESTACADOS
===================================================== */

.destacados-cabecera {

    margin-bottom: 15px;
}


.destacados-cabecera h2 {

    font-size: 25px;

    margin: 0;
}


/* =====================================================
   CONTENEDOR DESTACADOS
===================================================== */

.destacados-productos {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: stretch;

    gap: 20px;
}


/* =====================================================
   TARJETAS DESTACADAS
   MISMO TAMAÑO QUE LAS PRINCIPALES
===================================================== */

.destacados-productos .producto,
.destacados-productos .producto-card {

    flex: 0 0 245px;

    width: 245px;

    max-width: 245px;

    min-width: 0;

    box-sizing: border-box;

    padding: 12px;

    margin: 0;

    border-radius: 12px;
}


/* =====================================================
   IMAGEN DESTACADOS
===================================================== */

.destacados-productos .producto img,
.destacados-productos .producto-card img {

    width: 100%;

    height: 165px;

    max-height: 165px;

    object-fit: contain;
}


/* =====================================================
   NOMBRE DESTACADOS
===================================================== */

.destacados-productos .producto h3,
.destacados-productos .producto-card
.producto-card-nombre {

    font-size: 16px;

    line-height: 1.25;
}


/* =====================================================
   PRECIO DESTACADOS
===================================================== */

.destacados-productos .producto strong,
.destacados-productos .producto-card
.producto-card-precio strong {

    font-size: 21px;
}


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

@media (max-width: 900px) {

    #productos {

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

        gap: 15px;
    }


    #productos .producto-card {

        max-width: none;
    }


    .destacados-productos {

        gap: 15px;
    }


    .destacados-productos .producto,
    .destacados-productos .producto-card {

        flex: 0 0 calc(33.333% - 10px);

        width: calc(33.333% - 10px);

        max-width: none;
    }

}


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

@media (max-width: 600px) {

    main {

        padding: 12px 8px;
    }


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

    #productos {

        width: 100%;

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

        gap: 10px;

        padding: 0;
    }


    #productos .producto-card {

        width: 100%;

        max-width: none;

        padding: 9px;
    }


    #productos .producto-card
    .producto-card-imagen {

        height: 135px;
    }


    #productos .producto-card
    .producto-card-imagen img {

        width: 100%;

        height: 135px;

        max-height: 135px;
    }


    #productos .producto-card
    .producto-card-nombre {

        font-size: 14px;

        line-height: 1.2;
    }


    #productos .producto-card
    .producto-card-precio strong {

        font-size: 18px;
    }


    #productos .producto-card
    .producto-card-precio-anterior {

        font-size: 11px;
    }


    #productos .producto-card
    .etiqueta-producto {

        font-size: 8px;

        padding: 3px 5px;
    }


    /* =================================================
       DESTACADOS EN CELULAR

       IMPORTANTE:
       YA NO USA 72vw
    ================================================= */

    .seccion-destacados {

        width: 100%;

        max-width: 100%;

        padding: 12px;

        margin: 18px auto;
    }


    .destacados-productos {

        width: 100%;

        display: grid;

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

        gap: 10px;
    }


    .destacados-productos .producto,
    .destacados-productos .producto-card {

        width: 100%;

        max-width: none;

        min-width: 0;

        flex: none;

        padding: 9px;

        box-sizing: border-box;
    }


    .destacados-productos .producto img,
    .destacados-productos .producto-card img {

        width: 100%;

        height: 135px;

        max-height: 135px;

        object-fit: contain;
    }


    .destacados-productos .producto h3,
    .destacados-productos .producto-card
    .producto-card-nombre {

        font-size: 14px;

        line-height: 1.2;
    }


    .destacados-productos .producto strong,
    .destacados-productos .producto-card
    .producto-card-precio strong {

        font-size: 18px;
    }


    /* =================================================
       CATEGORÍAS CELULAR
    ================================================= */

    .categorias {

        gap: 8px;

        margin: 15px 0;
    }


    .categoria {

        width: 110px;

        padding: 10px;

        font-size: 14px;
    }


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

    header {

        padding: 10px 15px;
    }


    .logo img {

        height: 60px;
    }


    .logo span {

        font-size: 12px;
    }


    .buscador input {

        width: 280px;

        max-width: 100%;

        padding: 9px 14px;

        font-size: 14px;
    }


    .boton-header {

        padding: 9px 14px;

        font-size: 13px;
    }


    nav {

        margin-top: 10px;
    }


    nav a {

        margin: 0 7px;

        font-size: 14px;
    }


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

    #bannerTiendaWeb {

        height: 190px;

        min-height: 190px;

        max-height: 190px;
    }


    .banner {

        padding: 15px;

        gap: 15px;

        margin-bottom: 18px;
    }


    .banner-texto h2 {

        font-size: 24px;
    }


    .banner-texto h3 {

        font-size: 17px;
    }


    .banner-texto p {

        font-size: 13px;
    }


    /* =================================================
       CUPÓN CELULAR
    ================================================= */

    #novaCuponCheckout {

        width: 100%;

        margin: 16px 0 0;

        padding: 14px;
    }


    #novaCuponCheckout
    .nova-cupon-form {

        gap: 6px;
    }


    #novaCuponCheckout
    #novaCuponInput {

        height: 40px;

        font-size: 12px;

        padding: 0 10px;
    }


    #novaCuponCheckout
    #novaCuponAplicar {

        flex: 0 0 76px;

        width: 76px;

        min-width: 76px;

        height: 40px;

        font-size: 11px;
    }

}







/* =========================================================
   ✨ NOVA STORE - EFECTO HOVER TARJETAS DE PRODUCTOS
   ========================================================= */

/* TRANSICIÓN SUAVE */
#productos .producto-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    cursor: pointer;
}


/* AL PASAR EL MOUSE */
#productos .producto-card:hover {

    transform: translateY(-6px) scale(1.02);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.15);

    border-color: #2563eb;

    z-index: 5;
}


/* IMAGEN TAMBIÉN TIENE UN PEQUEÑO EFECTO */
#productos .producto-card
.producto-card-imagen img {

    transition:
        transform 0.25s ease;
}


#productos .producto-card:hover
.producto-card-imagen img {

    transform: scale(1.04);
}


/* =========================================================
   📱 CELULAR
   En celular no aplicamos hover porque no existe
   realmente el efecto de pasar el dedo.
   ========================================================= */

@media (max-width: 600px) {

    #productos .producto-card:hover {

        transform: none;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08);

        border-color: inherit;

    }

    #productos .producto-card:hover
    .producto-card-imagen img {

        transform: none;

    }

}/* =========================================================
   NOVA STORE - PRODUCTOS DESDE LA IZQUIERDA
   ========================================================= */

#productos {
    justify-content: start;
    justify-items: start;
}


/* =========================================================
   ✨ EFECTO HOVER - PRODUCTOS PRINCIPALES
   ========================================================= */

#productos .producto-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    cursor: pointer;
}


#productos .producto-card:hover {
    transform: translateY(-6px) scale(1.02);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.15);

    border-color: #2563eb;

    z-index: 5;
}


#productos .producto-card
.producto-card-imagen img {

    transition:
        transform 0.25s ease;
}


#productos .producto-card:hover
.producto-card-imagen img {

    transform: scale(1.04);
}


/* =========================================================
   ⭐ DESTACADOS - MISMO EFECTO
   ========================================================= */

.destacados-productos .producto,
.destacados-productos .producto-card {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    cursor: pointer;
}


.destacados-productos .producto:hover,
.destacados-productos .producto-card:hover {

    transform: translateY(-6px) scale(1.02);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.15);

    border-color: #2563eb;

    z-index: 5;
}


/* IMAGEN DE DESTACADOS */

.destacados-productos .producto img,
.destacados-productos .producto-card img {

    transition:
        transform 0.25s ease;
}


.destacados-productos .producto:hover img,
.destacados-productos .producto-card:hover img {

    transform: scale(1.04);
}


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

@media (max-width: 600px) {

    #productos {
        justify-content: start;
        justify-items: stretch;
    }


    #productos .producto-card:hover {

        transform: none;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08);

        border-color: inherit;
    }


    #productos .producto-card:hover
    .producto-card-imagen img {

        transform: none;
    }


    .destacados-productos .producto:hover,
    .destacados-productos .producto-card:hover {

        transform: none;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08);

        border-color: inherit;
    }


    .destacados-productos .producto:hover img,
    .destacados-productos .producto-card:hover img {

        transform: none;
    }

}/* =========================================================
   ⭐ NOVA STORE - DESTACADOS DEFINITIVO
   ========================================================= */

/* CONTENEDOR DE PRODUCTOS DESTACADOS */
.seccion-destacados .destacados-productos {

    width: 100%;

    display: flex;

    justify-content: flex-start;
    align-items: stretch;

    flex-wrap: nowrap;

    gap: 15px;

    overflow-x: auto;

    overflow-y: visible;

    padding: 5px 4px 12px;

    box-sizing: border-box;

    margin: 0;
}


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

.seccion-destacados
.destacados-productos
.producto {

    flex: 0 0 220px;

    width: 220px;

    max-width: 220px;

    min-width: 220px;

    margin: 0;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    cursor: pointer;
}


/* =========================================================
   HOVER DESTACADOS
   ========================================================= */

.seccion-destacados
.destacados-productos
.producto:hover {

    transform: translateY(-6px) scale(1.02);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.15);

    border-color: #2563eb;

    z-index: 5;
}


/* =========================================================
   IMAGEN DESTACADOS
   ========================================================= */

.seccion-destacados
.destacados-productos
.producto img {

    transition:
        transform 0.25s ease;
}


.seccion-destacados
.destacados-productos
.producto:hover img {

    transform: scale(1.04);
}


/* =========================================================
   ❌ OCULTAR BOTÓN "+"
   
   Si el botón de destacados es solamente decorativo,
   lo ocultamos.
   ========================================================= */

.seccion-destacados
.destacados-productos
.producto button {

    display: none;
}


/* También ocultamos posibles botones específicos */
.seccion-destacados
.destacados-productos
.producto .btn-mas,

.seccion-destacados
.destacados-productos
.producto .boton-mas,

.seccion-destacados
.destacados-productos
.producto .producto-mas,

.seccion-destacados
.destacados-productos
.producto .mas,

.seccion-destacados
.destacados-productos
.producto [class*="mas"] {

    display: none;
}


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

@media (max-width: 600px) {

    .seccion-destacados
    .destacados-productos {

        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        gap: 10px;

        padding-left: 2px;

        padding-right: 2px;
    }


    .seccion-destacados
    .destacados-productos
    .producto {

        flex: 0 0 72vw;

        width: 72vw;

        min-width: 72vw;

        max-width: 72vw;
    }


    /* En celular tampoco mostramos el + */
    .seccion-destacados
    .destacados-productos
    .producto button,

    .seccion-destacados
    .destacados-productos
    .producto .btn-mas,

    .seccion-destacados
    .destacados-productos
    .producto .boton-mas,

    .seccion-destacados
    .destacados-productos
    .producto .producto-mas,

    .seccion-destacados
    .destacados-productos
    .producto .mas {

        display: none;
    }


    /* Sin hover en táctil */
    .seccion-destacados
    .destacados-productos
    .producto:hover {

        transform: none;

        box-shadow:
            0 4px 12px rgba(0,0,0,0.08);
    }


    .seccion-destacados
    .destacados-productos
    .producto:hover img {

        transform: none;
    }

}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 900px) {

    header {
        width: 100%;
    }

    .header-superior {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 14px;
    }

    .navegacion-principal,
    .navegacion-tienda {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .banner-contenido {
        width: 100%;
        padding: 28px 20px;
    }

    .filtros-productos {
        width: calc(100% - 24px);
        margin-left: auto;
        margin-right: auto;
    }

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

    #productos,
    .productos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        width: calc(100% - 24px);
        margin-left: auto;
        margin-right: auto;
    }

    .producto-card,
    .producto {
        min-width: 0;
    }

    .contenido-pago {
        width: min(94%, 760px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================================
   CELULAR — GENERAL
   ========================================================= */
@media (max-width: 600px) {

    body {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(24px, 7vw, 34px);
    }

    h2 {
        font-size: clamp(20px, 6vw, 28px);
    }

    h3 {
        font-size: clamp(17px, 5vw, 22px);
    }

    p {
        font-size: 15px;
    }

    /* HEADER */
    header {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 9990;
    }

    .header-superior {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 9px 10px;
    }

    .logo,
    #logoTiendaWeb {
        max-width: 120px;
        max-height: 44px;
        object-fit: contain;
    }

    #nombreTiendaWeb {
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
    }

    .boton-header {
        min-width: 42px;
        min-height: 42px;
        padding: 8px;
    }

    .navegacion-principal,
    .navegacion-tienda {
        display: flex;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 7px;
        padding: 7px 9px;
        scrollbar-width: none;
    }

    .navegacion-principal::-webkit-scrollbar,
    .navegacion-tienda::-webkit-scrollbar {
        display: none;
    }

    .boton-navegacion-tienda,
    .navegacion-tienda button,
    .navegacion-tienda a {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
        padding: 9px 12px;
        font-size: 13px;
    }

    /* BUSCADOR */
    .buscador,
    #buscador {
        width: calc(100% - 20px);
        margin: 10px auto;
        min-height: 46px;
        font-size: 16px;
    }

    /* BANNER */
    .banner {
        width: 100%;
        min-height: 220px;
        overflow: hidden;
    }

    .banner-contenido {
        width: 100%;
        padding: 28px 16px;
        text-align: center;
    }

    /* CATEGORÍAS */
    .categorias-desplegables,
    .botonesCategorias,
    #botonesCategorias {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 6px 10px;
        scrollbar-width: none;
    }

    .categorias-desplegables::-webkit-scrollbar,
    #botonesCategorias::-webkit-scrollbar {
        display: none;
    }

    .categorias-desplegables > *,
    .botonesCategorias > *,
    #botonesCategorias > * {
        flex: 0 0 auto;
    }

    /* FILTROS */
    .filtros-productos,
    #filtrosProductos {
        width: calc(100% - 20px);
        margin: 12px auto;
        padding: 12px;
    }

    .filtros-productos-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .filtros-productos input,
    .filtros-productos select,
    #precioMin,
    #precioMax,
    #ordenProductos,
    #filtroCategoria,
    #filtroMarca,
    #filtroStock,
    #filtroTipo {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
    }

    .boton-limpiar-filtros {
        width: 100%;
        min-height: 44px;
    }

    /* PRODUCTOS */
    #productos,
    .productos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
        width: calc(100% - 16px);
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        overflow: visible;
    }

    .producto-card,
    .producto {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .producto-card img,
    .producto img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .producto-card h3,
    .producto h3,
    .producto-card .nombre,
    .producto .nombre {
        font-size: 14px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .producto-card p,
    .producto p {
        font-size: 13px;
    }

    .producto-card button,
    .producto button {
        min-height: 42px;
        width: 100%;
        padding: 8px 10px;
        font-size: 13px;
    }

    /* DESTACADOS: carrusel horizontal cómodo para táctil */
    .seccion-destacados {
        width: 100%;
        overflow: hidden;
    }

    .destacados-cabecera {
        padding-left: 12px;
        padding-right: 12px;
    }

    .destacados-productos {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        padding: 5px 10px 14px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .destacados-productos::-webkit-scrollbar {
        display: none;
    }

    .seccion-destacados .destacados-productos .producto {
        flex: 0 0 72vw;
        width: 72vw;
        min-width: 72vw;
        max-width: 72vw;
        scroll-snap-align: start;
    }

    /* MODALES */
    .modal,
    #modalNosotros,
    #modalRastreo,
    #carritoModal,
    #modalLoginAdmin,
    #modalRecuperarPassword {
        padding: 10px;
    }

    .modal > div,
    .contenido-rastreo,
    .nosotros-modal,
    .contenido-pago,
    .resumen-compra {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        border-radius: 14px;
    }

    /* RASTREO */
    #numeroRastreo {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    /* COMPRA / CHECKOUT */
    #pago {
        width: 100%;
        padding: 10px;
    }

    .contenido-pago {
        padding: 14px;
    }

    #pago input,
    #pago select,
    #pago textarea {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    .resumen-compra {
        padding: 12px;
    }

    /* FOOTER */
    footer {
        width: 100%;
        overflow: hidden;
    }

    footer .transportistas-footer,
    footer .logos-transportistas-footer {
        max-width: 100%;
        overflow-x: auto;
    }

    .logos-transportistas-footer {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 5px 10px;
        scrollbar-width: none;
    }

    .logos-transportistas-footer::-webkit-scrollbar {
        display: none;
    }

    /* IA */
    .nova-ai-boton,
    #novaAiBoton {
        right: 12px;
        bottom: 82px;
        width: 52px;
        height: 52px;
    }

    .nova-ai-chat,
    #novaAiChat {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-width: none;
        height: min(70vh, 620px);
        max-height: calc(100vh - 16px);
    }

    .nova-ai-input-area {
        padding: 8px;
    }

    .nova-ai-input-area input,
    #novaAiInput {
        min-height: 44px;
        font-size: 16px;
    }

    /* CARRITO FLOTANTE */
    .boton-carrito-producto {
        right: 12px;
        bottom: 14px;
        width: 54px;
        height: 54px;
        z-index: 99990;
    }

    .contador-carrito-producto {
        top: -3px;
        right: -3px;
    }

    /* STOCK */
    #productos .producto-card .estado-stock-tarjeta {
        font-size: 10px;
        margin-top: 5px;
        padding: 4px 5px;
    }

    .stock-detalle {
        max-width: 100%;
        font-size: 12px;
        padding: 6px 9px;
    }

    /* BOTONES DE COMPRA */
    .boton-comprar-ahora {
        min-height: 50px;
        width: 100%;
        font-size: 15px;
        padding: 12px;
    }

    /* DESACTIVA HOVER EN TOUCH */
    .producto:hover,
    .producto-card:hover,
    .boton-carrito-producto:hover,
    button:hover {
        transform: none;
    }

    /* Evita textos que rompen el ancho */
    .producto-card *,
    .producto * {
        overflow-wrap: anywhere;
    }
}

/* =========================================================
   CELULARES MUY PEQUEÑOS
   ========================================================= */
@media (max-width: 380px) {

    #productos,
    .productos {
        grid-template-columns: 1fr;
        width: calc(100% - 18px);
    }

    .producto-card,
    .producto {
        width: 100%;
    }

    .seccion-destacados .destacados-productos .producto {
        flex-basis: 84vw;
        width: 84vw;
        min-width: 84vw;
    }

    .header-superior {
        padding-left: 7px;
        padding-right: 7px;
    }

    #nombreTiendaWeb {
        max-width: 28vw;
        font-size: 14px;
    }

    .boton-header {
        min-width: 38px;
        min-height: 38px;
    }
}

/* =========================================================
   ORIENTACIÓN HORIZONTAL EN CELULAR
   ========================================================= */
@media (max-width: 900px) and (orientation: landscape) {

    .nova-ai-chat,
    #novaAiChat {
        height: 82vh;
    }

    .modal > div,
    .contenido-rastreo,
    .nosotros-modal,
    .contenido-pago {
        max-height: 90vh;
    }
}

/* ---------- BANNER: siempre visible ---------- */

#bannerTiendaWeb {
    display: block;
    position: relative;
    width: 100%;
    height: 320px;
    min-height: 320px;
    max-height: 320px;
    padding: 0;
    margin: 0 0 30px;
    overflow: hidden;
    isolation: isolate;
}

#bannerTiendaWeb .banner-contenido {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#bannerTiendaWeb .nova-slider-banners {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    visibility: visible;
    opacity: 1;
}

#bannerTiendaWeb .nova-slide-banner {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    visibility: visible;
}

/* ---------- TARJETAS DE PRODUCTOS ---------- */

#productos,
#productos.productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 245px));
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
}

#productos .producto-card,
#productos .producto {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 245px;
    min-width: 0;
    height: 100%;
    min-height: 355px;
    padding: 12px;
    margin: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

#productos .producto-card-imagen,
#productos .producto-card .producto-card-imagen {
    width: 100%;
    height: 165px;
    min-height: 165px;
    max-height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
}

#productos .producto-card-imagen img,
#productos .producto-card > img,
#productos .producto > img {
    display: block;
    width: 100%;
    height: 165px;
    max-width: 100%;
    max-height: 165px;
    object-fit: contain;
    object-position: center;
    margin: 0;
}

#productos .producto-card-info,
#productos .producto .producto-info {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    box-sizing: border-box;
}

#productos .producto-card-nombre,
#productos .producto h3 {
    width: 100%;
    min-width: 0;
    margin: 8px 0 5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
}

#productos .producto-card-precio,
#productos .producto strong,
#productos .zona-precio-producto {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- DESTACADOS: tarjetas verticales, sin texto al costado ---------- */

#destacadosProductos,
.seccion-destacados .destacados-productos {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 4px 15px;
    box-sizing: border-box;
    scrollbar-width: none;
}

#destacadosProductos::-webkit-scrollbar {
    display: none;
}

#destacadosProductos .producto,
#destacadosProductos .producto-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    height: 350px;
    min-height: 350px;
    max-height: 350px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

#destacadosProductos .producto .imagen-producto,
#destacadosProductos .producto-card-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 190px;
    width: 100%;
    height: 190px;
    min-height: 190px;
    max-height: 190px;
    overflow: hidden;
    box-sizing: border-box;
}

#destacadosProductos .producto .imagen-producto img,
#destacadosProductos .producto-card-imagen img,
#destacadosProductos .producto > img {
    display: block;
    width: 100%;
    height: 190px;
    max-width: 100%;
    max-height: 190px;
    object-fit: contain;
    object-position: center;
    margin: 0;
}

#destacadosProductos .producto h3,
#destacadosProductos .producto-card-nombre {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 12px 16px 5px;
    padding: 0;
    padding-right: 32px;
    box-sizing: border-box;
    color: #050505;
    font-size: 18px;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
}

#destacadosProductos .producto .precio-producto,
#destacadosProductos .producto-card-precio,
#destacadosProductos .producto strong {
    display: block;
    width: auto;
    margin: 6px 16px 14px;
    padding: 0;
    color: #050505;
    font-size: 24px;
    line-height: 1.1;
    text-align: left;
}

#destacadosProductos .producto .boton-mas-destacado {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/* ---------- NOVA AI: más pegado a la esquina ---------- */

#novaAiBoton,
.nova-ai-boton {
    position: fixed;
    right: 8px;
    bottom: 10px;
    z-index: 999999;
}

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

@media (max-width: 600px) {

    body {
        width: 100%;
        overflow-x: hidden;
    }

    main {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        margin: 0;
    }

    /* HEADER: ☰ | BUSCADOR | 🛒 */
    header {
        position: sticky;
        top: 0;
        z-index: 99999;
        width: 100%;
        padding: 5px 8px;
    }

    .header-superior {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 7px;
        padding: 0;
    }

    .logo {

    display: flex;

    flex: 1 1 auto;

    min-width: 0;

    height: 42px;

    align-items: center;

    justify-content: center;

    flex-direction: row;

    overflow: hidden;

    margin: 0;

    padding: 0;

}

    .boton-categorias-movil {
        display: flex;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        min-width: 42px;
        padding: 8px;
        margin: 0;
        background: #38bdf8;
        border-radius: 11px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        box-sizing: border-box;
    }

    .boton-categorias-movil span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #ffffff;
    }

    /* =====================================================
   🔎 BUSCADOR MÓVIL
===================================================== */

.buscador {

    order: 0;

    flex: 0 0 0;

    width: 0;

    min-width: 0;

    max-width: 0;

    margin: 0;

    padding: 0;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        width 0.25s ease,
        max-width 0.25s ease,
        opacity 0.2s ease;

}


/* =====================================================
   🔎 BUSCADOR ABIERTO
===================================================== */

.header-superior.busqueda-movil-abierta .buscador {

    flex: 1 1 auto;

    width: 100%;

    max-width: 100%;

    opacity: 1;

    pointer-events: auto;

    overflow: visible;

}


/* =====================================================
   INPUT DEL BUSCADOR
===================================================== */

.buscador input,
#buscador {

    display: block;

    width: 100%;

    min-width: 0;

    height: 42px;

    min-height: 42px;

    margin: 0;

    padding: 0 13px;

    font-size: 14px;

    box-sizing: border-box;

}
/* =====================================================
   🔎 BOTÓN BUSCAR MÓVIL
===================================================== */

.boton-buscar-movil {

    display: none;

}


@media (max-width: 600px) {

    .boton-buscar-movil {

        display: flex;

        flex: 0 0 42px;

        width: 42px;

        height: 42px;

        min-width: 42px;

        min-height: 42px;

        align-items: center;

        justify-content: center;

        padding: 0;

        margin: 0;

        border: none;

        border-radius: 11px;

        background: #38bdf8;

        color: #ffffff;

        font-size: 19px;

        line-height: 1;

        cursor: pointer;

        box-sizing: border-box;

    }


    .boton-buscar-movil:active {

        transform: scale(0.95);

    }


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

    .logo img {

        height: 38px;

        width: auto;

        max-width: 110px;

        object-fit: contain;

    }


    .logo span {

        display: none;

    }

}

    .acciones {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0;
    }

    #botonCarrito,
    .boton-header {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
        margin: 0;
        border-radius: 11px;
        font-size: 17px;
    }

    /* Ocultamos la barra secundaria de navegación en móvil.
       El acceso a categorías queda en ☰. */
    .navegacion-principal {
        display: none;
    }

    #botonesCategorias {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 2px;
        scrollbar-width: none;
    }

    #botonesCategorias::-webkit-scrollbar {
        display: none;
    }

    /* ---------- BANNER MOBILE ---------- */

    #bannerTiendaWeb {
        display: block;
        width: 100%;
        height: 190px;
        min-height: 190px;
        max-height: 190px;
        margin: 10px 0 18px;
        padding: 0;
        border-radius: 12px;
        overflow: hidden;
    }

    #bannerTiendaWeb .banner-contenido,
    #bannerTiendaWeb .nova-slider-banners,
    #bannerTiendaWeb .nova-slide-banner {
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    #bannerTiendaWeb .nova-slide-banner {
        background-size: cover;
        background-position: center center;
    }

    /* ---------- PRODUCTOS MOBILE ---------- */

    #productos,
    #productos.productos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        margin: 15px 0 0;
        padding: 0;
        overflow: visible;
    }

    #productos .producto-card,
    #productos .producto {
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 330px;
        height: 100%;
        padding: 9px;
        border-radius: 12px;
        overflow: hidden;
    }

    #productos .producto-card-imagen,
    #productos .producto-card .producto-card-imagen {
        height: 135px;
        min-height: 135px;
        max-height: 135px;
        border-radius: 9px;
    }

    #productos .producto-card-imagen img,
    #productos .producto-card > img,
    #productos .producto > img {
        height: 135px;
        max-height: 135px;
        object-fit: contain;
    }

    #productos .producto-card-nombre,
    #productos .producto h3 {
        font-size: 14px;
        line-height: 1.2;
        margin: 7px 0 5px;
        overflow-wrap: anywhere;
    }

    #productos .producto-card-precio strong,
    #productos .producto strong,
    #productos .precio-producto {
        font-size: 19px;
    }

    #productos .producto-card button,
    #productos .producto button {
        width: 100%;
        min-height: 40px;
        padding: 8px;
        font-size: 12px;
        margin-top: auto;
    }

    /* ---------- DESTACADOS MOBILE ---------- */

    .seccion-destacados {
        width: 100%;
        max-width: 100%;
        margin: 18px 0;
        padding: 12px;
        border-radius: 15px;
        box-sizing: border-box;
    }

    .destacados-cabecera {
        width: 100%;
        margin-bottom: 10px;
    }

    .destacados-cabecera h2 {
        font-size: 22px;
        line-height: 1.2;
    }

    #destacadosProductos,
    .seccion-destacados .destacados-productos {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        padding: 4px 2px 12px;
    }

    #destacadosProductos .producto,
    #destacadosProductos .producto-card {
        flex: 0 0 78vw;
        width: 78vw;
        min-width: 78vw;
        max-width: 78vw;
        height: 320px;
        min-height: 320px;
        max-height: 320px;
    }

    #destacadosProductos .producto .imagen-producto,
    #destacadosProductos .producto-card-imagen {
        flex-basis: 160px;
        height: 160px;
        min-height: 160px;
        max-height: 160px;
    }

    #destacadosProductos .producto .imagen-producto img,
    #destacadosProductos .producto-card-imagen img,
    #destacadosProductos .producto > img {
        height: 160px;
        max-height: 160px;
        object-fit: contain;
    }

    #destacadosProductos .producto h3,
    #destacadosProductos .producto-card-nombre {
        margin: 10px 13px 4px;
        padding: 0 28px 0 0;
        font-size: 16px;
        line-height: 1.2;
        text-align: left;
    }

    #destacadosProductos .producto .precio-producto,
    #destacadosProductos .producto-card-precio,
    #destacadosProductos .producto strong {
        margin: 5px 13px 10px;
        font-size: 22px;
    }

    /* ---------- IA MOBILE ---------- */

    #novaAiBoton,
    .nova-ai-boton {
        right: 6px;
        bottom: 8px;
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        border-radius: 50%;
        z-index: 999999;
    }

    #novaAiBoton .nova-ai-texto,
    .nova-ai-boton .nova-ai-texto {
        display: none;
    }

    #novaAiBoton .nova-ai-icono,
    .nova-ai-boton .nova-ai-icono {
        font-size: 22px;
    }

    #novaAiChat,
    .nova-ai-chat {
        left: 7px;
        right: 7px;
        bottom: 65px;
        width: auto;
        max-width: none;
        height: min(72vh, 580px);
        max-height: calc(100vh - 75px);
        border-radius: 15px;
    }

    /* ---------- FILTROS MOBILE ---------- */

    .filtros-productos,
    #filtrosProductos {
        width: 100%;
        margin: 12px 0;
        padding: 11px;
        border-radius: 12px;
    }

    .filtros-productos-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .filtros-productos-grid input,
    .filtros-productos-grid select,
    .boton-limpiar-filtros {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        font-size: 13px;
    }
}

/* ---------- TELÉFONOS MUY PEQUEÑOS ---------- */

@media (max-width: 380px) {

    #productos,
    #productos.productos {
        grid-template-columns: 1fr;
    }

    #destacadosProductos .producto,
    #destacadosProductos .producto-card {
        flex-basis: 84vw;
        width: 84vw;
        min-width: 84vw;
        max-width: 84vw;
    }

    .filtros-productos-grid {
        grid-template-columns: 1fr;
    }
}


















/* =========================================================
   NOVA STORE — CATEGORÍAS MOBILE
   ÚLTIMA REGLA
========================================================= */

@media (max-width: 600px) {

    /* CERRADO */
    #botonesCategorias {
        display: none;

        width: 100%;
        max-width: 100%;

        margin: 8px 0 0 0;
        padding: 10px;

        box-sizing: border-box;

        overflow: hidden;

        position: relative;
        z-index: 999999;

        background: #ffffff;

        border-radius: 12px;

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


    /* ABIERTO */
    #botonesCategorias.abierto {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    /* BOTONES DE CATEGORÍA */
    #botonesCategorias button,
    #botonesCategorias a,
    #botonesCategorias .categoria {
        width: 100%;

        min-height: 42px;

        margin: 0;

        padding: 9px 10px;

        box-sizing: border-box;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        border-radius: 9px;
    }

}


/* CELULARES MUY PEQUEÑOS */
@media (max-width: 380px) {

    #botonesCategorias.abierto {
        grid-template-columns: 1fr;
    }

}














/* =========================================================
   📱 CATEGORÍAS — MENÚ DESDE LAS TRES RAYAS
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       BOTÓN HAMBURGUESA
       ===================================================== */

    #botonCategoriasTienda {

        width: 42px;
        height: 42px;

        min-width: 42px;
        min-height: 42px;

        padding: 0;
        margin: 0;

        border: none;

        background: transparent;

        display: flex;

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

        font-size: 0;

        cursor: pointer;

    }


    #botonCategoriasTienda span:first-child {

        display: none;

    }


    /* =====================================================
       TRES RAYAS
       ===================================================== */

    #flechaCategoriasTienda {

        position: relative;

        display: block;

        width: 24px;

        height: 18px;

        font-size: 0;

        border-top:
            3px solid currentColor;

        border-bottom:
            3px solid currentColor;

    }


    #flechaCategoriasTienda::after {

        content: "";

        position: absolute;

        left: 0;

        top: 6px;

        width: 24px;

        height: 3px;

        background:
            currentColor;

        border-radius: 2px;

    }


    /* =====================================================
       MENÚ DE CATEGORÍAS
       ===================================================== */

    #botonesCategorias {

        width: 230px;

        max-width: 80vw;

        margin: 0;

        padding: 6px 0;

        background: #ffffff;

        border:
            1px solid #e5e7eb;

        border-radius:
            0 0 10px 10px;

        box-shadow:
            0 8px 20px rgba(0,0,0,.15);

        overflow: hidden;

        z-index: 999999;

    }


    /* =====================================================
       CATEGORÍAS SIMPLES
       ===================================================== */

    #botonesCategorias button,
    #botonesCategorias a {

        width: 100%;

        min-height: 38px;

        height: auto;

        margin: 0;

        padding: 9px 14px;

        display: block;

        border: none;

        border-radius: 0;

        background: transparent;

        box-shadow: none;

        text-align: left;

        font-size: 14px;

        font-weight: 500;

        color: #222222;

    }


    #botonesCategorias button:hover,
    #botonesCategorias a:hover {

        background: #f3f4f6;

    }

}















/* =========================================================
   📱 MENÚ CATEGORÍAS MOBILE
   MENÚ INDEPENDIENTE DE LOS FILTROS
   ========================================================= */

@media (max-width: 768px) {

    /* El contenedor de navegación NO controla
       el menú de categorías */
    .navegacion-tienda {
        position: relative;
    }


    /* Ocultamos completamente el botón
       Categorías original */
    #botonCategoriasTienda {
        display: none;
    }


    /* =====================================================
       📂 CONTENEDOR DE CATEGORÍAS
       ===================================================== */

    #botonesCategorias {

        display: none;

        position: fixed;

        top: 58px;

        left: 10px;

        width: calc(100vw - 20px);

        max-width: 360px;

        max-height: 70vh;

        overflow-y: auto;

        margin: 0;

        padding: 10px;

        box-sizing: border-box;

        background: #ffffff;

        border-radius: 12px;

        box-shadow:
            0 10px 30px rgba(0,0,0,.20);

        z-index: 99999;
    }


    /* Cuando está abierto */

    #botonesCategorias.mostrar {

        display: flex;

        flex-direction: column;

        gap: 5px;

        visibility: visible;

        opacity: 1;

    }


    /* =====================================================
       BOTONES DE CATEGORÍA
       ===================================================== */

    #botonesCategorias button {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        width: 100%;

        min-height: 44px;

        padding: 10px 12px;

        border: none;

        border-radius: 8px;

        background: transparent;

        text-align: left;

        cursor: pointer;

        box-sizing: border-box;
    }


    #botonesCategorias button:hover {

        background: #f1f5f9;

    }


    /* =====================================================
       FILTROS NO FORMAN PARTE DEL MENÚ
       ===================================================== */

    .filtros-productos {

        position: relative;

        z-index: 1;

    }


    /* =====================================================
       NAVEGACIÓN INFERIOR
       ===================================================== */

    .navegacion-principal {

        display: flex;

        flex-direction: row;

        width: 100%;

        overflow-x: auto;

        padding: 8px 10px;

        box-sizing: border-box;

    }

}

















/* =========================================================
   📱 ORDEN DE NAVEGACIÓN EN CELULAR
   RASTREAR / NOSOTROS ANTES DE LOS FILTROS
   ========================================================= */

@media (max-width: 768px) {

    .navegacion-tienda {

        display: flex;

        flex-direction: column;

        width: 100%;

        position: relative;

        box-sizing: border-box;

        z-index: 1000;

    }


    /* ==============================================
       BOTONES:
       RASTREAR PEDIDO + NOSOTROS
       ============================================== */

    .navegacion-principal {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        width: 100%;

        gap: 8px;

        padding: 8px 10px;

        box-sizing: border-box;

        overflow-x: auto;

        order: 1;

    }


    .navegacion-principal::-webkit-scrollbar {
        display: none;
    }


    /* Ocultamos el botón Categorías original */

    #botonCategoriasTienda {
        display: none;
    }


    /* Botones restantes */

    .navegacion-principal
    .boton-navegacion-tienda {

        display: flex;

        flex: 0 0 auto;

        width: auto;

        min-height: 42px;

        padding: 9px 14px;

        white-space: nowrap;

    }


    /* ==============================================
       CONTENEDOR CATEGORÍAS
       NO OCUPA ESPACIO EN LA PÁGINA
       ============================================== */

    #botonesCategorias {

        position: fixed;

        top: 58px;

        left: 10px;

        width: calc(100vw - 20px);

        max-width: 360px;

        max-height: 70vh;

        overflow-y: auto;

        z-index: 99999;

        margin: 0;

        order: 0;

    }


    /* ==============================================
       FILTROS
       ============================================== */

    .filtros-productos {

        order: 2;

        width: 100%;

        box-sizing: border-box;

    }

}


































/* =========================================================
   📱 NOVA STORE — CHECKOUT MOBILE REAL
   CORRECCIÓN DEFINITIVA
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       CHECKOUT
    ===================================================== */

    #pago.modal {

        display: none;

        position: fixed;

        inset: 0;

        width: 100vw;
        height: 100dvh;

        min-width: 100vw;
        min-height: 100dvh;

        margin: 0;
        padding: 10px;

        box-sizing: border-box;

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

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

        z-index: 9999999;

        background: rgba(0,0,0,.75);
    }


    /* =====================================================
       CUANDO ESTÁ ABIERTO
    ===================================================== */

    #pago.modal.nova-checkout-abierto {

        display: flex;

    }


    /* =====================================================
       CONTENIDO
    ===================================================== */

    #pago .contenido-pago {

        position: relative;

        display: block;

        width: 100%;

        max-width: 500px;

        min-width: 0;

        max-height: none;

        height: auto;

        margin: 10px auto;

        padding: 18px;

        box-sizing: border-box;

        overflow: visible;

        border-radius: 16px;

        z-index: 10000000;
    }


    /* =====================================================
       CAMPOS
    ===================================================== */

    #pago input,
    #pago select,
    #pago textarea {

        display: block;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        min-height: 46px;

        margin: 8px 0;

        padding: 11px 12px;

        box-sizing: border-box;

        font-size: 16px;

        touch-action: manipulation;
    }


    #pago textarea {

        min-height: 100px;

        resize: vertical;
    }


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

    #pago button {

        display: block;

        width: 100%;

        min-height: 46px;

        margin: 10px 0;

        box-sizing: border-box;

        touch-action: manipulation;

        position: relative;

        z-index: 10000001;
    }


    /* =====================================================
       CHECKOUT SOBRE TODO
    ===================================================== */

    body.nova-checkout-body {

        overflow: hidden;
    }


    /* =====================================================
       CARRITO CERRADO CUANDO CHECKOUT ABRE
    ===================================================== */

    body.nova-checkout-body #carritoModal {

        display: none;

    }

}
















/* =========================================================
   📱 NOVA STORE — CHECKOUT MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       MODAL CHECKOUT
       IMPORTANTE: NO FORZAR display:flex
    ===================================================== */

    #pago {

        position: fixed;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100vw;
        height: 100vh;

        max-width: none;
        max-height: none;

        margin: 0;
        padding: 15px;

        box-sizing: border-box;

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

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

        transform: none;

        z-index: 999999;
    }


    /* =====================================================
       CUANDO EL MODAL ESTÁ ABIERTO
    ===================================================== */

    #pago[style*="display: flex"],
    #pago[style*="display:flex"] {

        display: flex;

    }


    /* =====================================================
       CONTENIDO
    ===================================================== */

    #pago .contenido-pago {

        position: relative;

        width: 100%;

        max-width: 500px;

        min-width: 0;

        height: auto;

        max-height: calc(100vh - 30px);

        margin: 0 auto;

        padding: 20px;

        box-sizing: border-box;

        overflow-x: hidden;

        overflow-y: auto;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        transform: none;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }


    /* =====================================================
       CAMPOS
    ===================================================== */

    #pago .contenido-pago input,
    #pago .contenido-pago select,
    #pago .contenido-pago textarea {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

        margin-left: 0;
        margin-right: 0;

    }


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

    #pago .resumen-compra {

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

    }


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

    #pago .contenido-pago button {

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

        margin-left: 0;
        margin-right: 0;

    }

}/* =========================================================
   📱 NOVA STORE — ELIMINAR BOTÓN EXTRA "VOLVER AL CARRITO"
   ========================================================= */

@media (max-width: 768px) {

    #pago .volver-carrito,
    #pago .btn-volver-carrito,
    #pago .volver-al-carrito,
    #pago .btn-volver,
    #pago [class*="volver"],
    #pago [id*="volver"] {

        display: none;

    }


    /* =====================================================
       CHECKOUT OCUPA TODO EL ANCHO
    ===================================================== */

    #pago {

        left: 0;
        right: 0;

        width: 100vw;

        max-width: 100vw;

        padding: 10px;

        box-sizing: border-box;

    }


    #pago .contenido-pago {

        width: 100%;

        max-width: 500px;

        min-width: 0;

        margin: 0 auto;

        box-sizing: border-box;

    }

}


/* =========================================================
   PÁRRAFOS DEL RESUMEN
========================================================= */

#pago .resumen-compra p {

    margin: 6px 0;

    color: #111827;

}


#pago .resumen-compra p strong {

    color: #111827;

}










/* =========================================================
   ⭐ PRODUCTOS DESTACADOS
   OCULTAR CONTROL + Y CENTRAR NOMBRE
========================================================= */

/* Centrar nombres de productos destacados */
#productosDestacados h3,
#productosDestacados .producto-nombre,
#productosDestacados .nombre-producto,
#productosDestacados .producto-titulo {
    text-align: center;
}


/* Ocultar controles de cantidad dentro de destacados */
#productosDestacados .cantidad-control,
#productosDestacados .control-cantidad,
#productosDestacados .quantity-control,
#productosDestacados .cantidad,
#productosDestacados .cantidad-producto,
#productosDestacados .btn-cantidad,
#productosDestacados .btn-mas,
#productosDestacados button.plus,
#productosDestacados button.incrementar {
    display: none;
}














/* =========================================================
   ⭐ NOVA STORE
   TARJETAS NORMALES = MISMO TAMAÑO VISUAL QUE DESTACADOS
   ========================================================= */


/* =========================================================
   💻 COMPUTADORA
   ========================================================= */

#productos .producto-card {

    width: 280px;
    max-width: 280px;
    min-width: 280px;

    min-height: 350px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

}


/* =========================================================
   🖼️ IMAGEN — COMPUTADORA
   ========================================================= */

#productos .producto-card .producto-card-imagen {

    width: 100%;

    height: 190px;
    min-height: 190px;
    max-height: 190px;

    display: flex;

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

    overflow: hidden;

}


#productos .producto-card .producto-card-imagen img {

    width: 100%;

    height: 190px;
    max-height: 190px;

    object-fit: contain;

    object-position: center;

}


/* =========================================================
   📦 INFORMACIÓN
   ========================================================= */

#productos .producto-card .producto-card-info {

    width: 100%;

    text-align: center;

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

}


/* =========================================================
   🏷️ NOMBRE
   ========================================================= */

#productos .producto-card .producto-card-nombre {

    width: 100%;

    margin: 12px 0 5px;

    text-align: center;

}


/* =========================================================
   💰 PRECIO
   ========================================================= */

#productos .producto-card .producto-card-precio {

    width: 100%;

    margin: 6px 0 10px;

    text-align: center;

}


/* =========================================================
   📦 STOCK
   ========================================================= */

#productos .producto-card .estado-stock-tarjeta {

    width: 100%;

    justify-content: center;

    text-align: center;

}


/* =========================================================
   📱 CELULAR
   2 TARJETAS POR FILA
   ========================================================= */

@media (max-width: 600px) {


    /* =====================================================
       CONTENEDOR DE PRODUCTOS
       ===================================================== */

    #productos,
    #productos.productos {

        display: grid;

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

        gap: 12px;

        width: 100%;

        padding: 0 10px;

        margin: 0;

        box-sizing: border-box;

        align-items: stretch;

    }


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

    #productos .producto-card {

        width: 100%;

        max-width: none;

        min-width: 0;

        height: 320px;

        min-height: 320px;

        margin: 0;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

    }


    /* =====================================================
       🖼️ IMAGEN
       ===================================================== */

    #productos .producto-card .producto-card-imagen {

        width: 100%;

        height: 155px;

        min-height: 155px;

        max-height: 155px;

        display: flex;

        align-items: center;

        justify-content: center;

        overflow: hidden;

        flex-shrink: 0;

    }


    #productos .producto-card .producto-card-imagen img {

        width: 100%;

        height: 155px;

        max-height: 155px;

        object-fit: contain;

        object-position: center;

    }


    /* =====================================================
       📦 INFORMACIÓN
       ===================================================== */

    #productos .producto-card .producto-card-info {

        width: 100%;

        flex: 1;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        text-align: center;

        box-sizing: border-box;

        padding: 0 5px;

    }


    /* =====================================================
       🏷️ NOMBRE
       ===================================================== */

    #productos .producto-card .producto-card-nombre {

        width: 100%;

        margin: 8px 0 4px;

        padding: 0;

        font-size: 15px;

        line-height: 1.2;

        text-align: center;

        box-sizing: border-box;

    }


    /* =====================================================
       💰 PRECIO
       ===================================================== */

    #productos .producto-card .producto-card-precio {

        width: 100%;

        margin: 5px 0 7px;

        padding: 0;

        text-align: center;

        box-sizing: border-box;

    }


    #productos .producto-card .producto-card-precio strong {

        font-size: 20px;

    }


    /* =====================================================
       📦 STOCK
       ===================================================== */

    #productos .producto-card .estado-stock-tarjeta {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        margin-top: 0;

    }

}


/* =========================================================
   📱 CELULARES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

    #productos,
    #productos.productos {

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

        gap: 8px;

        padding: 0 8px;

    }


    #productos .producto-card {

        height: 300px;

        min-height: 300px;

    }


    #productos .producto-card .producto-card-imagen {

        height: 140px;

        min-height: 140px;

        max-height: 140px;

    }


    #productos .producto-card .producto-card-imagen img {

        height: 140px;

        max-height: 140px;

    }


    #productos .producto-card .producto-card-nombre {

        font-size: 14px;

    }


    #productos .producto-card .producto-card-precio strong {

        font-size: 18px;

    }

}


/* =========================================================
   FONDO GENERAL
   ========================================================= */

html,
body {

    background-color:
        var(--nova-color-fondo);

    color:
        var(--nova-color-texto);

}


/* =========================================================
   HEADER
   ========================================================= */

header {

    background:
        var(--nova-color-degradado);

}


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

.logo span,
h1,
h2 {

    color:
        var(--nova-color-principal);

}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

nav a {

    color:
        var(--nova-color-texto);

}

nav a:hover {

    color:
        var(--nova-color-principal);

}


/* =========================================================
   CATEGORÍAS
   ========================================================= */

.categoria {

    background-color:
        var(--nova-color-tarjetas);

    color:
        var(--nova-color-texto);

    border-color:
        var(--nova-color-bordes);

}

.categoria:hover {

    background-color:
        var(--nova-color-principal);

}


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

.producto,
.producto-card {

    background-color:
        var(--nova-color-tarjetas);

    color:
        var(--nova-color-texto);

}


/* =========================================================
   DESTACADOS
   ========================================================= */

#destacadosProductos .producto,
#destacadosProductos .producto-card {

    background-color:
        var(--nova-color-tarjetas);

    color:
        var(--nova-color-texto);

}


/* =========================================================
   NOMBRES DE PRODUCTOS
   ========================================================= */

.producto h3,
.producto-card-nombre,
#destacadosProductos h3 {

    color:
        var(--nova-color-texto);

}


/* =========================================================
   PRECIOS
   ========================================================= */

.producto-card-precio,
.producto-card-precio strong,
.precio-producto {

    color:
        var(--nova-color-principal);

}


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

button,
.boton-header,
.boton-compra,
.boton-carrito-producto,
.boton-comprar-ahora,
.boton-limpiar-filtros {

    background-color:
        var(--nova-color-botones);

    color:
        var(--nova-color-texto-botones);

}


/* =========================================================
   FILTROS
   ========================================================= */

.filtros-productos,
#filtrosProductos {

    background-color:
        var(--nova-color-tarjetas);

    color:
        var(--nova-color-texto);

    border-color:
        var(--nova-color-bordes);

}


/* =========================================================
   INPUTS Y SELECTS
   ========================================================= */

input,
select,
textarea {

    border-color:
        var(--nova-color-bordes);

}


/* =========================================================
   🟢🟡🔴 STOCK
   IMPORTANTE:
   ESTOS COLORES NO DEPENDEN DEL ADMIN.
   SON LOS COLORES DEL ESTADO DEL STOCK.
   ========================================================= */


/* 🟢 EN STOCK */

#productos .producto-card .estado-stock-disponible,
#destacadosProductos .producto-card .estado-stock-disponible {

    color: #22c55e;

}


/* 🟡 POCO STOCK */

#productos .producto-card .estado-stock-bajo,
#destacadosProductos .producto-card .estado-stock-bajo {

    color: #f59e0b;

    animation:
        parpadeoStockTarjeta
        1.2s infinite;

}


/* 🔴 AGOTADO */

#productos .producto-card .estado-stock-agotado,
#destacadosProductos .producto-card .estado-stock-agotado {

    color: #ef4444;

    animation:
        parpadeoAgotadoTarjeta
        1.4s infinite;

}


/* =========================================================
   📱 STOCK EN DESTACADOS
   ========================================================= */

@media (max-width: 600px) {

    #destacadosProductos
    .producto-card
    .estado-stock-tarjeta {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        margin-top: 5px;

        padding: 4px 5px;

        font-size: 10px;

        font-weight: 800;

        text-align: center;

    }

}













/* =========================================================
   ⭐ NOVA STORE — AJUSTE FINAL DE TARJETAS
   ========================================================= */


/* =========================================================
   💻 COMPUTADORA
   MÁS SEPARACIÓN ENTRE PRODUCTOS
   ========================================================= */

@media (min-width: 901px) {

    #productos,
    #productos.productos {

        display: grid;

        grid-template-columns:
            repeat(auto-fit, minmax(220px, 245px));

        justify-content: center;

        align-items: stretch;

        /* MÁS ESPACIO ENTRE TARJETAS */

        column-gap: 30px;

        row-gap: 30px;

        width: 100%;

        padding: 0 20px;

        box-sizing: border-box;

    }


    #productos .producto-card,
    #productos .producto {

        width: 100%;

        max-width: 245px;

        min-width: 0;

        margin: 0;

        box-sizing: border-box;

    }

}


/* =========================================================
   📱 CELULAR
   DESTACADOS = MISMO ANCHO QUE PRODUCTOS
   2 POR FILA
   ========================================================= */

@media (max-width: 600px) {

    /* -----------------------------------------------------
       PRODUCTOS NORMALES
       ----------------------------------------------------- */

    #productos,
    #productos.productos {

        display: grid;

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

        column-gap: 12px;

        row-gap: 14px;

        width: 100%;

        padding: 0 10px;

        margin-left: 0;

        margin-right: 0;

        box-sizing: border-box;

    }


    #productos .producto-card,
    #productos .producto {

        width: 100%;

        max-width: none;

        min-width: 0;

        margin: 0;

        box-sizing: border-box;

    }


    /* -----------------------------------------------------
       DESTACADOS
       MISMO SISTEMA DE 2 COLUMNAS
       ----------------------------------------------------- */

    #destacadosProductos,
    .seccion-destacados .destacados-productos,
    .destacados-productos {

        display: grid;

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

        column-gap: 12px;

        row-gap: 14px;

        width: 100%;

        max-width: 100%;

        padding: 4px 10px 14px;

        margin: 0;

        box-sizing: border-box;

        overflow-x: hidden;

        overflow-y: visible;

    }


    /* -----------------------------------------------------
       TARJETAS DESTACADAS
       MISMO ANCHO QUE LOS PRODUCTOS
       ----------------------------------------------------- */

    #destacadosProductos .producto,
    #destacadosProductos .producto-card,
    .seccion-destacados .destacados-productos .producto,
    .seccion-destacados .destacados-productos .producto-card {

        display: flex;

        flex-direction: column;

        width: 100%;

        min-width: 0;

        max-width: none;

        flex: none;

        height: 320px;

        min-height: 320px;

        max-height: 320px;

        margin: 0;

        padding: 9px;

        box-sizing: border-box;

        overflow: hidden;

    }


    /* -----------------------------------------------------
       IMAGEN DESTACADOS
       ----------------------------------------------------- */

    #destacadosProductos .producto .imagen-producto,
    #destacadosProductos .producto-card-imagen,
    .seccion-destacados .destacados-productos .producto-card-imagen {

        width: 100%;

        height: 135px;

        min-height: 135px;

        max-height: 135px;

        flex: 0 0 135px;

        display: flex;

        align-items: center;

        justify-content: center;

        overflow: hidden;

        box-sizing: border-box;

    }


    #destacadosProductos .producto .imagen-producto img,
    #destacadosProductos .producto-card-imagen img,
    #destacadosProductos .producto > img {

        width: 100%;

        height: 135px;

        max-height: 135px;

        object-fit: contain;

        object-position: center;

        margin: 0;

    }


    /* -----------------------------------------------------
       NOMBRE DESTACADOS
       ----------------------------------------------------- */

    #destacadosProductos .producto h3,
    #destacadosProductos .producto-card-nombre {

        width: 100%;

        margin: 8px 0 5px;

        padding: 0;

        font-size: 14px;

        line-height: 1.2;

        text-align: center;

        overflow-wrap: anywhere;

        box-sizing: border-box;

    }


    /* -----------------------------------------------------
       PRECIO DESTACADOS
       ----------------------------------------------------- */

    #destacadosProductos .producto .precio-producto,
    #destacadosProductos .producto-card-precio,
    #destacadosProductos .producto strong {

        width: 100%;

        margin: 4px 0 8px;

        padding: 0;

        font-size: 19px;

        text-align: center;

        box-sizing: border-box;

    }


    /* -----------------------------------------------------
       STOCK DESTACADOS
       ----------------------------------------------------- */

    #destacadosProductos
    .estado-stock-tarjeta {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        margin-top: 3px;

        box-sizing: border-box;

    }

}


/* =========================================================
   📱 TELÉFONOS PEQUEÑOS
   TAMBIÉN 2 POR FILA
   ========================================================= */

@media (max-width: 380px) {

    #productos,
    #productos.productos {

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

        column-gap: 8px;

        row-gap: 12px;

        padding-left: 6px;

        padding-right: 6px;

    }


    #destacadosProductos,
    .seccion-destacados .destacados-productos,
    .destacados-productos {

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

        column-gap: 8px;

        row-gap: 12px;

        padding-left: 6px;

        padding-right: 6px;

    }


    #destacadosProductos .producto,
    #destacadosProductos .producto-card {

        width: 100%;

        min-width: 0;

        max-width: none;

    }

}
















/* =========================================================
   ⭐ DESTACADOS — MISMA ALTURA QUE PRODUCTOS PRINCIPALES
   ========================================================= */

@media (max-width: 600px) {

    /* Contenedor de destacados */
    #destacadosProductos,
    .seccion-destacados .destacados-productos {

        align-items: stretch;

    }


    /* Tarjetas destacadas */
    #destacadosProductos .producto,
    #destacadosProductos .producto-card {

        height: 330px;

        min-height: 330px;

        max-height: 330px;

        box-sizing: border-box;

        overflow: hidden;

    }


    /* Imagen */
    #destacadosProductos .producto .imagen-producto,
    #destacadosProductos .producto-card-imagen {

        height: 135px;

        min-height: 135px;

        max-height: 135px;

        flex: 0 0 135px;

    }


    #destacadosProductos .producto .imagen-producto img,
    #destacadosProductos .producto-card-imagen img,
    #destacadosProductos .producto > img {

        height: 135px;

        max-height: 135px;

        object-fit: contain;

    }


    /* Nombre */
    #destacadosProductos .producto h3,
    #destacadosProductos .producto-card-nombre {

        margin: 7px 0 5px;

        padding: 0 5px;

        width: 100%;

        box-sizing: border-box;

        font-size: 14px;

        line-height: 1.2;

        text-align: center;

    }


    /* Precio */
    #destacadosProductos .producto .precio-producto,
    #destacadosProductos .producto-card-precio,
    #destacadosProductos .producto strong {

        margin: 4px 0 7px;

        width: 100%;

        text-align: center;

        font-size: 19px;

    }


    /* Stock */
    #destacadosProductos .estado-stock-tarjeta {

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        text-align: center;

        margin-top: 3px;

    }

}


/* =========================================================
   📱 TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

    #destacadosProductos .producto,
    #destacadosProductos .producto-card {

        height: 330px;

        min-height: 330px;

        max-height: 330px;

    }

}

















/* =========================================================
   ⭐ NOVA STORE — CORRECCIÓN DEFINITIVA
   TARJETAS SIN ESTIRAMIENTO
   ========================================================= */

@media (max-width: 600px) {

    /* =====================================================
       CONTENEDOR DE DESTACADOS
       ===================================================== */

    #destacadosProductos {

        display: grid;

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

        gap: 12px;

        width: 100%;

        padding: 4px 10px 12px;

        margin: 0;

        box-sizing: border-box;

        overflow: visible;

        align-items: start;

    }


    /* =====================================================
       DESTACADOS — TAMAÑO REAL
       ===================================================== */

    #destacadosProductos > .producto-card {

        display: flex;

        flex-direction: column;

        align-self: start;

        width: 100%;

        min-width: 0;

        max-width: none;

        flex: none;

        height: 300px;

        min-height: 300px;

        max-height: 300px;

        padding: 9px;

        margin: 0;

        box-sizing: border-box;

        overflow: hidden;

        position: relative;

    }


    /* =====================================================
       IMAGEN DESTACADO
       ===================================================== */

    #destacadosProductos
    > .producto-card
    .producto-card-imagen {

        width: 100%;

        height: 135px;

        min-height: 135px;

        max-height: 135px;

        flex: 0 0 135px;

        display: flex;

        align-items: center;

        justify-content: center;

        overflow: hidden;

        box-sizing: border-box;

    }


    #destacadosProductos
    > .producto-card
    .producto-card-imagen img {

        width: 100%;

        height: 135px;

        min-height: 0;

        max-height: 135px;

        object-fit: contain;

        object-position: center;

        margin: 0;

    }


    /* =====================================================
       INFORMACIÓN
       ===================================================== */

    #destacadosProductos
    > .producto-card
    .producto-card-info {

        width: 100%;

        min-width: 0;

        height: auto;

        min-height: 0;

        flex: 0 0 auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        text-align: center;

        padding: 0 3px;

        box-sizing: border-box;

    }


    /* =====================================================
       NOMBRE
       ===================================================== */

    #destacadosProductos
    > .producto-card
    .producto-card-nombre {

        width: 100%;

        height: auto;

        min-height: 0;

        max-height: 38px;

        margin: 7px 0 3px;

        padding: 0;

        font-size: 14px;

        line-height: 1.2;

        text-align: center;

        overflow: hidden;

    }


    /* =====================================================
       PRECIO
       ===================================================== */

    #destacadosProductos
    > .producto-card
    .producto-card-precio {

        width: 100%;

        height: auto;

        min-height: 0;

        margin: 3px 0 6px;

        padding: 0;

        text-align: center;

    }


    #destacadosProductos
    > .producto-card
    .producto-card-precio strong {

        font-size: 20px;

        line-height: 1.1;

    }


    /* =====================================================
       STOCK
       ===================================================== */

    #destacadosProductos
    > .producto-card
    .estado-stock-tarjeta {

        width: 100%;

        height: auto;

        min-height: 0;

        margin: 2px 0 0;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        box-sizing: border-box;

    }


    /* =====================================================
       PRODUCTOS PRINCIPALES
       MISMA ALTURA
       ===================================================== */

    #productos .producto-card {

        height: 300px;

        min-height: 300px;

        max-height: 300px;

        align-self: start;

        box-sizing: border-box;

        overflow: hidden;

    }


    #productos .producto-card
    .producto-card-imagen {

        height: 135px;

        min-height: 135px;

        max-height: 135px;

        flex: 0 0 135px;

    }


    #productos .producto-card
    .producto-card-imagen img {

        height: 135px;

        max-height: 135px;

    }


    /* =====================================================
       TELÉFONOS PEQUEÑOS
       ===================================================== */

    #destacadosProductos
    > .producto-card,
    #productos .producto-card {

        border-radius: 12px;

    }

}


/* =====================================================
   PANEL DE VARIANTES
===================================================== */

body.modal-variantes-abierto {

    overflow:
        hidden;

}




































/* =========================================================
   NOVA STORE - CORRECCIÓN FINAL MOBILE
   DESTACADOS MÁS COMPACTOS + BOTÓN DENTRO DE LA TARJETA
   ========================================================= */

@media (max-width: 600px) {

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

    #productos .producto-card {

        width: 100%;

        height: 320px;
        min-height: 320px;
        max-height: 320px;

        padding: 8px;

        box-sizing: border-box;

        overflow: hidden;

        display: flex;

        flex-direction: column;

        align-items: stretch;

    }


    /* IMAGEN */

    #productos .producto-card .producto-card-imagen {

        width: 100%;

        height: 125px;
        min-height: 125px;
        max-height: 125px;

        flex: 0 0 125px;

        box-sizing: border-box;

    }


    #productos .producto-card .producto-card-imagen img {

        width: 100%;

        height: 125px;

        max-height: 125px;

        object-fit: contain;

    }


    /* INFORMACIÓN */

    #productos .producto-card .producto-card-info {

        width: 100%;

        min-width: 0;

        height: auto;

        min-height: 0;

        flex: 1 1 auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        box-sizing: border-box;

        padding: 0 2px;

        overflow: hidden;

    }


    /* NOMBRE */

    #productos .producto-card .producto-card-nombre {

        width: 100%;

        margin: 5px 0 3px;

        padding: 0;

        font-size: 14px;

        line-height: 1.15;

        max-height: 34px;

        overflow: hidden;

        text-align: center;

        box-sizing: border-box;

    }


    /* PRECIO */

    #productos .producto-card .producto-card-precio {

        width: 100%;

        margin: 2px 0 4px;

        padding: 0;

        box-sizing: border-box;

        text-align: center;

        line-height: 1.1;

    }


    #productos .producto-card
    .producto-card-precio strong {

        font-size: 18px;

        line-height: 1.05;

    }


    #productos .producto-card
    .producto-card-precio-anterior {

        font-size: 11px;

        line-height: 1;

    }


    #productos .producto-card
    .descuento-producto {

        font-size: 10px;

        padding: 3px 6px;

        line-height: 1;

    }


    /* STOCK */

    #productos .producto-card
    .estado-stock-tarjeta {

        width: 100%;

        min-height: 18px;

        margin: 2px 0 4px;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        font-size: 10px;

        line-height: 1.1;

        box-sizing: border-box;

    }


    /* =====================================================
       BOTÓN AGREGAR AL CARRITO
       SIEMPRE DENTRO DE LA TARJETA
       ===================================================== */

    #productos .producto-card
    .boton-agregar-tarjeta {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        height: 42px;

        min-height: 42px;

        max-height: 42px;

        flex: 0 0 42px;

        margin: 4px 0 0;

        padding: 6px 4px;

        box-sizing: border-box;

        border: 0;

        border-radius: 999px;

        font-size: 10px;

        line-height: 1.05;

        font-weight: 900;

        white-space: normal;

        overflow: hidden;

    }


    /* =====================================================
       DESTACADOS
       MÁS CORTOS Y COMPACTOS
       ===================================================== */

    #destacadosProductos > .producto-card {

        width: 100%;

        height: 275px;
        min-height: 275px;
        max-height: 275px;

        padding: 8px;

        margin: 0;

        box-sizing: border-box;

        overflow: hidden;

        display: flex;

        flex-direction: column;

        align-items: stretch;

    }


    /* IMAGEN DESTACADO */

    #destacadosProductos > .producto-card
    .producto-card-imagen {

        width: 100%;

        height: 120px;
        min-height: 120px;
        max-height: 120px;

        flex: 0 0 120px;

        box-sizing: border-box;

    }


    #destacadosProductos > .producto-card
    .producto-card-imagen img {

        width: 100%;

        height: 120px;

        max-height: 120px;

        object-fit: contain;

    }


    /* INFORMACIÓN DESTACADO */

    #destacadosProductos > .producto-card
    .producto-card-info {

        width: 100%;

        min-width: 0;

        height: auto;

        min-height: 0;

        flex: 1 1 auto;

        padding: 0 2px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        box-sizing: border-box;

        overflow: hidden;

    }


    /* NOMBRE DESTACADO */

    #destacadosProductos > .producto-card
    .producto-card-nombre {

        width: 100%;

        height: auto;

        min-height: 0;

        max-height: 34px;

        margin: 5px 0 2px;

        padding: 0;

        font-size: 13px;

        line-height: 1.15;

        text-align: center;

        overflow: hidden;

    }


    /* PRECIO DESTACADO */

    #destacadosProductos > .producto-card
    .producto-card-precio {

        width: 100%;

        height: auto;

        min-height: 0;

        margin: 2px 0 3px;

        padding: 0;

        text-align: center;

        box-sizing: border-box;

    }


    #destacadosProductos > .producto-card
    .producto-card-precio strong {

        font-size: 18px;

        line-height: 1;

    }


    #destacadosProductos > .producto-card
    .producto-card-precio-anterior {

        font-size: 10px;

        line-height: 1;

    }


    #destacadosProductos > .producto-card
    .descuento-producto {

        font-size: 9px;

        padding: 3px 5px;

        line-height: 1;

    }


    /* STOCK DESTACADO */

    #destacadosProductos > .producto-card
    .estado-stock-tarjeta {

        width: 100%;

        min-height: 16px;

        margin: 2px 0 0;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        font-size: 9px;

        line-height: 1;

        box-sizing: border-box;

    }


    /* =====================================================
       BOTÓN EN DESTACADOS
       ===================================================== */

    #destacadosProductos > .producto-card
    .boton-agregar-tarjeta {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        height: 38px;

        min-height: 38px;

        max-height: 38px;

        flex: 0 0 38px;

        margin: 3px 0 0;

        padding: 5px 3px;

        box-sizing: border-box;

        border-radius: 999px;

        font-size: 9px;

        line-height: 1;

        white-space: normal;

        overflow: hidden;

    }

}


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

@media (max-width: 380px) {

    #productos .producto-card {

        height: 315px;

        min-height: 315px;

        max-height: 315px;

    }


    #destacadosProductos > .producto-card {

        height: 265px;

        min-height: 265px;

        max-height: 265px;

    }


    #productos .producto-card
    .producto-card-imagen {

        height: 120px;

        min-height: 120px;

        max-height: 120px;

        flex-basis: 120px;

    }


    #productos .producto-card
    .producto-card-imagen img {

        height: 120px;

        max-height: 120px;

    }


    #destacadosProductos > .producto-card
    .producto-card-imagen {

        height: 115px;

        min-height: 115px;

        max-height: 115px;

        flex-basis: 115px;

    }


    #destacadosProductos > .producto-card
    .producto-card-imagen img {

        height: 115px;

        max-height: 115px;

    }

}/* =========================================================
   AJUSTE FINAL - DESTACADOS MOBILE
   ELIMINA EL ESPACIO VACÍO INNECESARIO
   ========================================================= */

@media (max-width: 600px) {

    #destacadosProductos > .producto-card {

        height: auto;

        min-height: 0;

        max-height: none;

        align-self: flex-start;

        justify-content: flex-start;

        padding: 8px;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* IMAGEN MÁS COMPACTA */

    #destacadosProductos > .producto-card
    .producto-card-imagen {

        height: 110px;

        min-height: 110px;

        max-height: 110px;

        flex: 0 0 110px;

        margin: 0;
    }


    #destacadosProductos > .producto-card
    .producto-card-imagen img {

        height: 110px;

        max-height: 110px;

        width: 100%;

        object-fit: contain;

        margin: 0;
    }


    /* INFORMACIÓN: QUE NO OCUPE ESPACIO EXTRA */

    #destacadosProductos > .producto-card
    .producto-card-info {

        flex: 0 0 auto;

        height: auto;

        min-height: 0;

        max-height: none;

        justify-content: flex-start;

        padding: 0 2px;

        margin: 0;
    }


    /* NOMBRE */

    #destacadosProductos > .producto-card
    .producto-card-nombre {

        margin: 4px 0 2px;

        max-height: 32px;

        font-size: 13px;

        line-height: 1.1;
    }


    /* PRECIO */

    #destacadosProductos > .producto-card
    .producto-card-precio {

        margin: 2px 0 2px;

        line-height: 1;
    }


    /* STOCK */

    #destacadosProductos > .producto-card
    .estado-stock-tarjeta {

        min-height: 15px;

        margin: 2px 0 2px;

        line-height: 1;
    }


    /* BOTÓN PEGADO AL CONTENIDO */

    #destacadosProductos > .producto-card
    .boton-agregar-tarjeta {

        height: 36px;

        min-height: 36px;

        max-height: 36px;

        flex: 0 0 36px;

        margin: 3px 0 0;

        padding: 4px;

        font-size: 9px;

        line-height: 1;
    }

}


/* CELULARES PEQUEÑOS */

@media (max-width: 380px) {

    #destacadosProductos > .producto-card
    .producto-card-imagen {

        height: 105px;

        min-height: 105px;

        max-height: 105px;

        flex-basis: 105px;
    }


    #destacadosProductos > .producto-card
    .producto-card-imagen img {

        height: 105px;

        max-height: 105px;
    }

}









/* =========================================================
   NOVA STORE - BANNER
   MISMA PROPORCIÓN 1920 × 600 EN PC Y CELULAR
   ========================================================= */

#bannerTiendaWeb {

    position: relative;

    width: 100%;

    height: auto;

    aspect-ratio: 1920 / 600;

    min-height: 0;

    max-height: none;

    margin: 10px 0 25px;

    padding: 0;

    overflow: hidden;

    box-sizing: border-box;

}


/* SLIDER */

#bannerTiendaWeb .nova-slider-banners {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    min-height: 0;

    max-height: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

}


/* CADA BANNER */

#bannerTiendaWeb .nova-slide-banner {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    min-height: 0;

    max-height: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

}


/* IMAGEN */

#bannerTiendaWeb .nova-slide-banner img {

    display: block;

    width: 100%;

    height: 100%;

    min-width: 100%;

    min-height: 100%;

    max-width: none;

    max-height: none;

    margin: 0;

    padding: 0;

    object-fit: fill;

}


/* =========================================================
   PUNTITOS DENTRO DEL BANNER
   ========================================================= */

#bannerTiendaWeb .nova-indicadores-banner {

    position: absolute;

    left: 50%;

    bottom: 10px;

    transform: translateX(-50%);

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: auto;

    height: auto;

    margin: 0;

    padding: 0;

}


/* =========================================================
   FLECHAS
   ========================================================= */

#bannerTiendaWeb .nova-flecha-banner {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 200;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 50%;

    background: rgba(56, 189, 248, .35);

    color: white;

    opacity: .55;

    transition: all .2s ease;

}


/* IZQUIERDA */

#bannerTiendaWeb .nova-flecha-anterior {

    left: 10px;

}


/* DERECHA */

#bannerTiendaWeb .nova-flecha-siguiente {

    right: 10px;

}


/* AL PASAR EL MOUSE */

#bannerTiendaWeb .nova-flecha-banner:hover {

    opacity: 1;

    background: rgba(56, 189, 248, .95);

    transform: translateY(-50%) scale(1.08);

}


/* AL TOCAR */

#bannerTiendaWeb .nova-flecha-banner:active {

    opacity: 1;

    transform: translateY(-50%) scale(.94);

}


/* =========================================================
   IMPORTANTE:
   EN CELULAR NO CAMBIAMOS LA PROPORCIÓN
   ========================================================= */

/* =========================================================
   📱 BANNER CELULAR
   PROPORCIÓN REAL 1080 × 1350
   ========================================================= */

@media (max-width: 700px) {

    #bannerTiendaWeb {

        width: 100%;

        height: auto;

        aspect-ratio: 1080 / 1350;

        min-height: 0;

        max-height: none;

        margin: 10px 0 25px;

        padding: 0;

        overflow: hidden;

        box-sizing: border-box;

    }


    #bannerTiendaWeb .nova-slider-banners {

        width: 100%;

        height: 100%;

        min-height: 0;

        max-height: none;

    }


    #bannerTiendaWeb .nova-slide-banner {

        width: 100%;

        height: 100%;

        min-height: 0;

        max-height: none;

    }


    #bannerTiendaWeb .nova-slide-banner picture {

        display: block;

        width: 100%;

        height: 100%;

        margin: 0;

        padding: 0;

    }


    #bannerTiendaWeb .nova-slide-banner img {

        display: block;

        width: 100%;

        height: 100%;

        min-width: 100%;

        min-height: 100%;

        max-width: none;

        max-height: none;

        object-fit: fill;

        object-position: center;

        margin: 0;

        padding: 0;

    }


    /* PUNTITOS DENTRO DEL BANNER */

    #bannerTiendaWeb .nova-indicadores-banner {

        bottom: 12px;

    }


    /* FLECHAS */

    #bannerTiendaWeb .nova-flecha-banner {

        width: 48px;

        height: 48px;

    }

}



/* =========================================================
   🚚 NOVA STORE - LOGOS TRANSPORTISTAS MOBILE
   CORRECCIÓN FINAL
   ========================================================= */

@media screen and (max-width: 700px) {

    footer #transportistasFooter {

        display: block;

        width: 100%;

        height: auto;

        min-height: 80px;

        max-height: none;

        margin: 25px 0 0;

        padding: 0 10px;

        overflow: visible;

        visibility: visible;

        opacity: 1;

        box-sizing: border-box;

    }


    footer #logosTransportistasFooter {

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        align-items: center;

        justify-content: center;

        width: 100%;

        height: auto;

        min-height: 60px;

        margin: 0;

        padding: 10px 0;

        gap: 12px;

        overflow: visible;

        box-sizing: border-box;

    }


    footer #logosTransportistasFooter
    .transportista-footer {

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        width: 75px;

        min-width: 75px;

        max-width: 75px;

        height: 50px;

        min-height: 50px;

        max-height: 50px;

        flex: 0 0 75px;

        margin: 0;

        padding: 0;

        overflow: visible;

        visibility: visible;

        opacity: 1;

        box-sizing: border-box;

    }


    footer #logosTransportistasFooter
    .transportista-footer img {

        display: block;

        position: relative;

        width: 65px;

        height: 40px;

        min-width: 65px;

        min-height: 40px;

        max-width: 65px;

        max-height: 40px;

        object-fit: contain;

        object-position: center;

        margin: 0;

        padding: 0;

        visibility: visible;

        opacity: 1;

        box-sizing: border-box;

    }

}


/* =========================================================
   🚚 NOVA STORE - TRANSPORTISTAS MOBILE - CORRECCIÓN FINAL
   ========================================================= */

@media (max-width: 700px) {

    /* CONTENEDOR PRINCIPAL */

    #transportistasFooter {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 30px 0 20px;
        padding: 0 10px;

        box-sizing: border-box;

        visibility: visible;
        opacity: 1;

        overflow: visible;
    }


    /* TEXTO */

    #transportistasFooter .texto-envios-footer {
        display: block;

        width: 100%;

        margin: 0 0 18px;
        padding: 0;

        text-align: center;

        visibility: visible;
        opacity: 1;
    }


    /* CONTENEDOR DE LOGOS */

    #logosTransportistasFooter {
        display: flex;

        flex-direction: row;
        flex-wrap: wrap;

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

        gap: 15px;

        width: 100%;
        height: auto;

        min-height: 70px;

        margin: 0;
        padding: 10px;

        box-sizing: border-box;

        overflow: visible;

        visibility: visible;
        opacity: 1;
    }


    /* CADA TRANSPORTISTA */

    #logosTransportistasFooter .transportista-footer {
        display: flex;

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

        flex: 0 0 90px;

        width: 90px;
        min-width: 90px;
        max-width: 90px;

        height: 60px;
        min-height: 60px;
        max-height: 60px;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        visibility: visible;
        opacity: 1;

        overflow: visible;
    }


    /* LOGO */

    #logosTransportistasFooter .transportista-footer img {
        display: block;

        width: 80px;
        max-width: 80px;

        height: 50px;
        max-height: 50px;

        min-width: 1px;
        min-height: 1px;

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

        margin: 0 auto;
        padding: 0;

        visibility: visible;
        opacity: 1;
    }


    /* NOMBRE OCULTO */

    #logosTransportistasFooter .transportista-footer span {
        display: none;
    }

}


/* =========================================================
   📱 IPHONE PEQUEÑO
   ========================================================= */

@media (max-width: 380px) {

    #logosTransportistasFooter {
        gap: 10px;
        padding: 8px;
    }

    #logosTransportistasFooter .transportista-footer {
        flex-basis: 80px;

        width: 80px;
        min-width: 80px;
        max-width: 80px;

        height: 55px;
    }

    #logosTransportistasFooter .transportista-footer img {
        width: 70px;
        max-width: 70px;

        height: 45px;
        max-height: 45px;
    }

}











/* =========================================================
   🛒 NOVA STORE - CARRITO MOBILE
   MISMO TAMAÑO QUE BOTÓN CATEGORÍAS
   ========================================================= */

@media (max-width: 600px) {

    /* CONTENEDOR DEL CARRITO */

    .acciones {
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        max-width: 42px;

        height: 42px;

        margin: 0;
        padding: 0;

        display: flex;

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

        box-sizing: border-box;
    }


    /* BOTÓN CARRITO */

    #botonCarrito {

        width: 42px;
        height: 42px;

        min-width: 42px;
        min-height: 42px;

        max-width: 42px;
        max-height: 42px;

        padding: 0;
        margin: 0;

        border: none;

        border-radius: 11px;

        display: flex;

        flex-direction: row;

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

        gap: 2px;

        box-sizing: border-box;

        overflow: hidden;

        white-space: nowrap;

        font-size: 17px;

        line-height: 1;

        flex-shrink: 0;
    }


    /* ICONO 🛒 */

    #botonCarrito {

        font-family:
            Arial,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            sans-serif;

    }


    /* CONTADOR */

    #contadorCarrito {

        position: static;

        display: inline;

        width: auto;
        height: auto;

        min-width: 0;
        min-height: 0;

        max-width: none;
        max-height: none;

        padding: 0;
        margin: 0;

        border: none;

        border-radius: 0;

        background: transparent;

        font-size: 17px;

        font-weight: 700;

        line-height: 1;

        transform: none;

        overflow: visible;
    }

}


/* =====================================================
   📸🎥 GALERÍA DE PRODUCTOS
   ===================================================== */

.galeria-producto {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    overflow: hidden;

    box-sizing: border-box;

}


/* =====================================================
   🖼️ CONTENEDOR PRINCIPAL DE LA IMAGEN
   ===================================================== */

.contenedor-media-producto {

    width: 100%;

    /*
     * IMPORTANTE:
     * No usar height: 100%.
     * La altura queda estable para que las flechas
     * no cambien de posición al cambiar de imagen.
     */

    height: 420px;

    min-height: 420px;

    max-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    box-sizing: border-box;

    overflow: hidden;

}


/* =====================================================
   🖼️ IMAGEN / VIDEO
   ===================================================== */

.media-detalle-producto {

    width: 100%;

    height: 100%;

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    display: block;

    box-sizing: border-box;

}


/* =====================================================
   ◀️ ▶️ FLECHAS
   ===================================================== */

.galeria-flecha {

    position: absolute;

    top: 210px;

    transform: translateY(-50%);

    z-index: 50;

    width: 44px;

    height: 44px;

    min-width: 44px;

    min-height: 44px;

    max-width: 44px;

    max-height: 44px;

    padding: 0;

    margin: 0;

    border: none;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.75);

    color: white;

    font-size: 34px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    flex-shrink: 0;

}


/* =====================================================
   🖱️ EFECTO AL PASAR EL MOUSE
   ===================================================== */

.galeria-flecha:hover {

    background: rgba(37, 99, 235, 1);

}


/* =====================================================
   ◀️ FLECHA ANTERIOR
   ===================================================== */

.galeria-anterior {

    left: 12px;

}


/* =====================================================
   ▶️ FLECHA SIGUIENTE
   ===================================================== */

.galeria-siguiente {

    right: 12px;

}


/* =====================================================
   🔢 CONTADOR
   ===================================================== */

.galeria-contador {

    margin-top: 10px;

    font-weight: 700;

    font-size: 14px;

    line-height: 1.2;

    flex-shrink: 0;

}


/* =====================================================
   🖼️ MINIATURAS
   ===================================================== */

.galeria-miniaturas {

    width: 100%;

    display: flex;

    gap: 8px;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 12px;

    flex-shrink: 0;

    box-sizing: border-box;

}


/* =====================================================
   MINIATURA
   ===================================================== */

.miniatura-media {

    width: 62px;

    height: 62px;

    min-width: 62px;

    min-height: 62px;

    padding: 2px;

    border: 2px solid transparent;

    border-radius: 8px;

    background: #1e293b;

    cursor: pointer;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

}


/* =====================================================
   IMAGEN DE MINIATURA
   ===================================================== */

.miniatura-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* =====================================================
   MINIATURA ACTIVA
   ===================================================== */

.miniatura-media.activa {

    border-color: #38bdf8;

}


/* =====================================================
   🎥 MINIATURA VIDEO
   ===================================================== */

.miniatura-video {

    color: white;

    font-size: 25px;

}


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

@media (max-width: 768px) {

    .contenedor-media-producto {

        height: 320px;

        min-height: 320px;

        max-height: 320px;

    }


    .galeria-flecha {

        width: 38px;

        height: 38px;

        min-width: 38px;

        min-height: 38px;

        max-width: 38px;

        max-height: 38px;

        font-size: 28px;

        top: 160px;

    }


    .galeria-anterior {

        left: 8px;

    }


    .galeria-siguiente {

        right: 8px;

    }


    .miniatura-media {

        width: 54px;

        height: 54px;

        min-width: 54px;

        min-height: 54px;

    }


    .galeria-miniaturas {

        gap: 6px;

    }

}


/* =====================================================
   📱 CELULARES MUY PEQUEÑOS
   ===================================================== */

@media (max-width: 380px) {

    .contenedor-media-producto {

        height: 280px;

        min-height: 280px;

        max-height: 280px;

    }


    .galeria-flecha {

        top: 140px;

    }


    .galeria-anterior {

        left: 5px;

    }


    .galeria-siguiente {

        right: 5px;

    }


    .miniatura-media {

        width: 50px;

        height: 50px;

        min-width: 50px;

        min-height: 50px;

    }

}

/* No mostrar flechas */
.galeria-producto .galeria-flecha {
    display: none;
}

/* Miniaturas desplazables en celular */
@media (max-width: 768px) {

    .galeria-producto .galeria-miniaturas {
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 3px;
    }
}

















/* =========================================================
   📱 BOTÓN INSTALAR NOVA — ESTILO FINAL
   ========================================================= */

#botonInstalarPWA {
    position: fixed;

    left: 20px;
    right: auto;
    bottom: 20px;

    z-index: 999999;

    display: none;

    width: auto;
    min-width: 0;

    padding: 10px 15px;

    background: rgba(0, 0, 0, 0.55);

    color: rgba(255, 255, 255, 0.92);

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 12px;

    font-family: "Montserrat", sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(8px);

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

    white-space: nowrap;

    opacity: 0.88;

    transform: translateY(0);

    transition:
        background 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   🖱️ EFECTO AL PASAR EL MOUSE
   ========================================================= */

#botonInstalarPWA:hover {

    background: rgba(0, 0, 0, 0.82);

    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.45);

    opacity: 1;

    transform: translateY(-2px);

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


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

@media (max-width: 600px) {

    #botonInstalarPWA {

        left: 12px;

        bottom: 12px;

        padding: 9px 13px;

        font-size: 12px;

        border-radius: 10px;

    }

}










/* =====================================================
   👤🛒 NOVA STORE — CUENTA + CARRITO JUNTOS
===================================================== */

.acciones {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    width: auto;

    flex-wrap: nowrap;

}


/* =====================================================
   BOTONES DEL HEADER
===================================================== */

.acciones .boton-header {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 44px;

    min-width: 44px;

    height: 44px;

    margin: 0;

}


/* =====================================================
   📱 MOBILE
===================================================== */

@media (max-width: 600px) {

    .acciones {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-end;

        gap: 6px;

        width: auto;

        flex-wrap: nowrap;

    }


    .acciones .boton-header {

        width: 42px;

        min-width: 42px;

        height: 42px;

        padding: 0;

        margin: 0;

    }

}

/* =========================================================
   NOVA STORE — HEADER MÓVIL DEFINITIVO
   ☰ | 🔎 | LOGO | USUARIO/CARRITO
   La lupa y el buscador móvil SOLO existen en celular.
   En PC el buscador original permanece igual.
========================================================= */

/* La lupa móvil jamás aparece en escritorio */
.boton-buscar-movil {
    display: none;
}

@media (max-width: 600px) {

    /* -----------------------------------------------------
       FILA PRINCIPAL DEL HEADER
    ----------------------------------------------------- */
    .header-superior {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 7px;
        padding: 0;
        min-width: 0;
    }

    /* -----------------------------------------------------
       ORDEN CERRADO:
       ☰  |  🔎  |  LOGO  |  USUARIO/CARRITO
    ----------------------------------------------------- */

    .boton-categorias-movil {
        order: 1;
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .boton-buscar-movil {
        display: flex;
        order: 2;
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 11px;
        background: #38bdf8;
        color: #ffffff;
        font-size: 19px;
        line-height: 1;
        box-sizing: border-box;
    }

    .logo {
        order: 3;
        display: flex;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 54px;
        min-height: 54px;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .logo img,
    #logoTiendaWeb {
        display: block;
        width: auto;
        height: 52px;
        max-width: 160px;
        max-height: 52px;
        object-fit: contain;
        object-position: center center;
        margin: 0 auto;
    }

    .logo span {
        display: none;
    }

    .acciones {
        order: 4;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
    }

    #botonCarrito,
    .acciones .boton-header {
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        margin: 0;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* -----------------------------------------------------
       BUSCADOR CERRADO: COMPLETAMENTE OCULTO
       No ocupa espacio entre la lupa y el logo.
    ----------------------------------------------------- */
    .header-superior > .buscador,
    .header-superior .buscador {
        order: 0;
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        max-width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .header-superior > .buscador input,
    .header-superior .buscador input,
    .header-superior #buscador {
        width: 0;
        min-width: 0;
        max-width: 0;
        padding: 0;
        margin: 0;
        border: 0;
    }

    /* -----------------------------------------------------
       BUSCADOR ABIERTO:
       ☰ | 🔎 | [ BUSCADOR ] | USUARIO/CARRITO
       El logo se oculta para darle lugar al buscador.
    ----------------------------------------------------- */
    .header-superior.busqueda-movil-abierta .logo {
        display: none;
    }

    .header-superior.busqueda-movil-abierta .buscador,
    .header-superior.busqueda-movil-abierta > .buscador {
        order: 3;
        display: flex;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 42px;
        margin: 0;
        padding: 0;
        overflow: visible;
        opacity: 1;
        pointer-events: auto;
        align-items: center;
    }

    .header-superior.busqueda-movil-abierta .buscador input,
    .header-superior.busqueda-movil-abierta #buscador {
        display: block;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 42px;
        min-height: 42px;
        margin: 0;
        padding: 0 13px;
        border: none;
        border-radius: 12px;
        box-sizing: border-box;
        font-size: 14px;
        opacity: 1;
    }

    .header-superior.busqueda-movil-abierta .boton-buscar-movil {
        order: 2;
    }

    .header-superior.busqueda-movil-abierta .acciones {
        order: 4;
    }

    /* El resto de navegación sigue oculto en móvil */
    .navegacion-principal {
        display: none;
    }

}

/* Teléfonos muy pequeños */
@media (max-width: 380px) {

    .header-superior {
        gap: 5px;
    }

    .boton-categorias-movil,
    .boton-buscar-movil,
    #botonCarrito,
    .acciones .boton-header {
        flex-basis: 38px;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .logo {
        height: 48px;
        min-height: 48px;
    }

    .logo img,
    #logoTiendaWeb {
        height: 46px;
        max-height: 46px;
        max-width: 135px;
    }

    .header-superior.busqueda-movil-abierta .buscador,
    .header-superior.busqueda-movil-abierta .buscador input,
    .header-superior.busqueda-movil-abierta #buscador {
        height: 38px;
        min-height: 38px;
    }
}


/* =========================================================
   NOVA STORE
   APLICAR LA FUENTE SELECCIONADA A TODA LA TIENDA
   (variable --nova-fuente-tienda definida en el :root principal)
   ========================================================= */

html,
body {

    font-family:
        var(--nova-fuente-tienda, "Montserrat", sans-serif);

}


/* =========================================================
   TODOS LOS ELEMENTOS
   ========================================================= */

body * {

    font-family:
        var(--nova-fuente-tienda, "Montserrat", sans-serif);

}


/* =========================================================
   ELEMENTOS DE FORMULARIO
   ========================================================= */

input,
textarea,
select,
option,
button {

    font-family:
        var(--nova-fuente-tienda, "Montserrat", sans-serif);

}


/* =========================================================
   📱 NOVA STORE — CENTRADO REAL DEL LOGO
   ========================================================= */

@media (max-width: 600px) {

    /* El header ocupa exactamente el ancho de la pantalla */
    header {
        width: 100%;
        box-sizing: border-box;
        position: sticky;
        top: 0;
    }

    /* La fila también ocupa exactamente todo el ancho */
    .header-superior {
        position: relative;

        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        display: flex;
        flex-wrap: nowrap;

        align-items: center;

        justify-content: flex-start;

        padding: 0;
        margin: 0;
    }

    /* =====================================================
       LOGO
       CENTRO EXACTO DE LA PANTALLA
    ===================================================== */

    .header-superior > .logo {

        position: absolute;

        left: 50%;
        top: 50%;

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

        width: auto;
        min-width: 0;
        max-width: 160px;

        height: 54px;
        min-height: 54px;

        margin: 0;
        padding: 0;

        display: flex;

        flex: none;

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

        flex-direction: row;

        overflow: visible;

        z-index: 100;
    }


    /* =====================================================
       IMAGEN DEL LOGO
    ===================================================== */

    .header-superior > .logo > img,
    .header-superior > .logo > #logoTiendaWeb {

        display: block;

        width: auto;

        height: 52px;

        max-width: 160px;
        max-height: 52px;

        margin: 0;
        padding: 0;

        object-fit: contain;

        object-position: center center;
    }


    /* Ocultar el texto NOVA debajo del logo */
    .header-superior > .logo > span {
        display: none;
    }


    /* =====================================================
       ☰ CATEGORÍAS
    ===================================================== */

    .header-superior > .boton-categorias-movil {

        flex: 0 0 42px;

        width: 42px;
        min-width: 42px;

        height: 42px;
        min-height: 42px;

        margin: 0;
    }


    /* =====================================================
       🔎 LUPA
    ===================================================== */

    .header-superior > .boton-buscar-movil {

        flex: 0 0 42px;

        width: 42px;
        min-width: 42px;

        height: 42px;
        min-height: 42px;

        margin: 0;
    }


    /* =====================================================
       👤 🛒 USUARIO + CARRITO
    ===================================================== */

    .header-superior > .acciones {

        margin-left: auto;

        flex: 0 0 auto;

        width: auto;
        min-width: 0;

        display: flex;

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

        gap: 5px;

        flex-wrap: nowrap;
    }


    .header-superior > .acciones .boton-header,
    .header-superior > .acciones #botonCarrito {

        flex: 0 0 42px;

        width: 42px;
        min-width: 42px;

        height: 42px;
        min-height: 42px;

        margin: 0;
    }


    /* =====================================================
       🔎 BUSCADOR NORMAL OCULTO
    ===================================================== */

    .header-superior > .buscador {

        display: none;
    }


    /* =====================================================
       🔎 CUANDO SE ABRE EL BUSCADOR
       EL LOGO DESAPARECE
    ===================================================== */

    .header-superior.busqueda-movil-abierta > .logo {

        display: none;
    }

}


/* =========================================================
   📱 TELÉFONOS MUY PEQUEÑOS
========================================================= */

@media (max-width: 380px) {

    .header-superior > .logo {

        max-width: 135px;

        height: 48px;
        min-height: 48px;
    }


    .header-superior > .logo > img,
    .header-superior > .logo > #logoTiendaWeb {

        height: 46px;

        max-height: 46px;
        max-width: 135px;
    }


    .header-superior > .boton-categorias-movil,
    .header-superior > .boton-buscar-movil,
    .header-superior > .acciones .boton-header,
    .header-superior > .acciones #botonCarrito {

        width: 38px;
        min-width: 38px;

        height: 38px;
        min-height: 38px;
    }

}


/* =========================================================
   🛒 NOVA STORE — SEPARACIÓN BOTONES DE COMPRA
   ========================================================= */

.boton-compra,
.boton-comprar-ahora,
.boton-whatsapp {
    width: 100%;
    box-sizing: border-box;
}

/* Agregar al carrito → Comprar ahora */
.boton-comprar-ahora {
    margin-top: 12px;
}

/* Comprar ahora → WhatsApp */
.boton-whatsapp {
    display: block;

    width: 100%;

    margin-top: 12px;

    min-height: 48px;

    padding: 12px 18px;

    border: none;

    border-radius: 10px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    box-sizing: border-box;
}


/* =========================================================
   📱 MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .boton-compra,
    .boton-comprar-ahora,
    .boton-whatsapp {
        width: 100%;
    }

    .boton-comprar-ahora {
        margin-top: 10px;
    }

    .boton-whatsapp {
        margin-top: 10px;

        min-height: 48px;

        font-size: 15px;
    }

}


/* =========================================================
   NOVA STORE — NOMBRE DEL SITIO
   SOLUCIÓN DEFINITIVA
========================================================= */

@media screen and (min-width: 601px) {

    header .header-superior > .logo {

        display: flex;
        flex-direction: row;

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

        gap: 15px;

        width: max-content;
        max-width: none;
        min-width: 0;

        height: 100px;

        margin: 0;
        padding: 0;

        overflow: visible;

        flex: 0 0 auto;
        flex-wrap: nowrap;
    }


    header .header-superior > .logo > #logoTiendaWeb {

        display: block;

        width: auto;
        height: 78px;

        max-width: 160px;
        max-height: 78px;

        object-fit: contain;

        margin: 0;
        padding: 0;

        flex: 0 0 auto;
    }


    header .header-superior > .logo > #nombreTiendaWeb {

        display: block;

        visibility: visible;
        opacity: 1;

        position: static;

        width: max-content;
        min-width: max-content;

        height: auto;

        max-width: none;

        overflow: visible;

        white-space: nowrap;

        color: #38bdf8;

        font-size: 28px;
        font-weight: 800;

        letter-spacing: 1.5px;
        line-height: 1;

        margin: 0;
        padding: 0;

        flex: 0 0 auto;
    }
}


/* =========================================================
   MÓVIL
========================================================= */

@media screen and (max-width: 600px) {

    header .header-superior > .logo > #nombreTiendaWeb {

        display: none;

    }

}

/* =========================================================
   NOVA STORE
   DEGRADADO REAL DEL TEMA
========================================================= */

#bannerTiendaWeb {

    position: relative;

    background:
        var(--nova-color-degradado);

}




/* ==========================================================
   NOVA STORE — TARJETAS PRINCIPALES
   Bloque final seguro: no altera la lógica JavaScript
========================================================== */

#productos .producto-card {
    position: relative;
    width: 100%;
    max-width: 355px;
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    background: var(--nova-color-tarjetas);
    background-color: var(--nova-color-tarjetas);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#productos .producto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.22);
}

#productos .producto-card-imagen {
    position: relative;
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111419;
    border-radius: 10px;
    overflow: hidden;
}

#productos .producto-card-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#productos .boton-favorito-producto {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 30;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

#productos .boton-favorito-producto:hover,
#productos .boton-favorito-producto:focus,
#productos .boton-favorito-producto:focus-visible {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

#productos .boton-favorito-producto.activo {
    color: #ff3040;
}

#productos .badge-envio-gratis-producto {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 20;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(20,100,170,.95);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

#productos .producto-card-info {
    width: 100%;
    padding: 12px 2px 4px;
    box-sizing: border-box;
}

#productos .producto-card-nombre {
    margin: 0 0 4px;
    color: #fff;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
}

#productos .producto-card-categoria {
    margin: 0 0 8px;
    color: rgba(255,255,255,.55);
    font-size: 14px;
}

#productos .producto-card-precio {
    margin: 6px 0 8px;
}

#productos .producto-card-precio-normal,
#productos .producto-card-precio-oferta {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}

#productos .producto-card-precio-anterior {
    color: rgba(255,255,255,.45);
    font-size: 14px;
    text-decoration: line-through;
}

#productos .descuento-producto {
    display: inline-flex;
    margin-left: 7px;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(34,197,94,.15);
    color: #4ade80;
    font-size: 12px;
    font-weight: 700;
}

#productos .producto-card-resenas {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin: 6px 0 5px;
}

#productos .estrellas-producto {
    color: #f5b400;
    font-size: 18px;
    letter-spacing: 1px;
}

#productos .promedio-producto {
    color: rgba(255,255,255,.72);
    font-size: 14px;
}

#productos .cantidad-resenas-producto,
#productos .texto-sin-resenas {
    color: rgba(255,255,255,.48);
    font-size: 13px;
}

#productos .estrellas-vacias {
    color: rgba(255,255,255,.3);
    font-size: 18px;
    letter-spacing: 1px;
}

#productos .estado-stock-tarjeta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    font-size: 14px;
}

#productos .estado-stock-disponible,
#productos .estado-stock-ultimas {
    color: #4ade80;
}

#productos .estado-stock-agotado {
    color: #f87171;
}

#productos .boton-agregar-tarjeta {
    width: 100%;
    min-height: 42px;
    margin-top: 7px;
    border-radius: 8px;
    border: 0;
    background: #1d6fd1;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#productos .boton-agregar-tarjeta:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    #productos .producto-card {
        max-width: none;
        padding: 8px;
    }

    #productos .producto-card-imagen {
        height: 185px;
    }

    #productos .producto-card-nombre {
        font-size: 16px;
    }

    #productos .producto-card-precio-normal,
    #productos .producto-card-precio-oferta {
        font-size: 21px;
    }

    #productos .estrellas-producto {
        font-size: 15px;
    }
}

/* ==========================================================
   NOVA STORE - CORRECCIÓN FINAL TARJETAS EN CELULAR
   
========================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------
       CONTENEDORES DE PRODUCTOS
    ------------------------------------------------------ */

    #productos,
    #destacadosProductos {

        width: 100%;
        box-sizing: border-box;

    }


    /* ------------------------------------------------------
       TARJETA
    ------------------------------------------------------ */

    #productos .producto-card,
    #destacadosProductos .producto-card {

        width: 100%;
        max-width: none;

        min-width: 0;

        height: auto;
        min-height: 0;

        padding: 8px;

        margin: 0;

        box-sizing: border-box;

        overflow: hidden;

        border-radius: 12px;

    }


    /* ------------------------------------------------------
       IMAGEN
    ------------------------------------------------------ */

    #productos .producto-card .producto-card-imagen,
    #destacadosProductos .producto-card .producto-card-imagen {

        position: relative;

        width: 100%;

        height: 175px;

        min-height: 175px;
        max-height: 175px;

        display: flex;

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

        overflow: hidden;

        border-radius: 9px;

        box-sizing: border-box;

    }


    #productos .producto-card .producto-card-imagen img,
    #destacadosProductos .producto-card .producto-card-imagen img {

        width: 100%;
        height: 100%;

        max-width: 100%;
        max-height: 100%;

        object-fit: contain;

        display: block;

    }


    /* ======================================================
       ❤️ FAVORITO
       IMPORTANTE: elimina completamente el fondo azul
    ====================================================== */

    #productos .producto-card .boton-favorito-producto,
    #destacadosProductos .producto-card .boton-favorito-producto {

        position: absolute;

       top: 4px;
right: 4px;

        left: auto;
        bottom: auto;

        width: 34px;
        min-width: 34px;
        max-width: 34px;

        height: 34px;
        min-height: 34px;
        max-height: 34px;

        padding: 0;
        margin: 0;

        display: flex;

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

        background: transparent;
        background-color: transparent;

        border: none;
        border-width: 0;

        border-radius: 0;

        box-shadow: none;

        outline: none;

        color: #ffffff;

        font-size: 29px;
        line-height: 34px;

        z-index: 50;

        transform: none;

        appearance: none;

        -webkit-appearance: none;

    }


    #productos .producto-card .boton-favorito-producto:hover,
    #productos .producto-card .boton-favorito-producto:focus,
    #productos .producto-card .boton-favorito-producto:active,

    #destacadosProductos .producto-card .boton-favorito-producto:hover,
    #destacadosProductos .producto-card .boton-favorito-producto:focus,
    #destacadosProductos .producto-card .boton-favorito-producto:active {

        background: transparent;
        background-color: transparent;

        border: none;

        box-shadow: none;

        outline: none;

        transform: scale(1.05);

    }


    /* ------------------------------------------------------
       ENVÍO GRATIS
    ------------------------------------------------------ */

    #productos .producto-card .badge-envio-gratis-producto,
    #destacadosProductos .producto-card .badge-envio-gratis-producto {

        position: absolute;

        left: 7px;
        bottom: 7px;

        z-index: 20;

        width: auto;

        padding: 5px 7px;

        font-size: 9px;

        line-height: 1;

        border-radius: 5px;

    }


    /* ------------------------------------------------------
       INFORMACIÓN
    ------------------------------------------------------ */

    #productos .producto-card .producto-card-info,
    #destacadosProductos .producto-card .producto-card-info {

        width: 100%;

        height: auto;
        min-height: 0;

        padding: 9px 2px 3px;

        box-sizing: border-box;

    }


    /* ------------------------------------------------------
       NOMBRE
    ------------------------------------------------------ */

    #productos .producto-card .producto-card-nombre,
    #destacadosProductos .producto-card .producto-card-nombre {

        margin: 0 0 3px;

        font-size: 16px;

        line-height: 1.2;

        min-height: 0;

        max-height: 39px;

        display: -webkit-box;

        -webkit-box-orient: vertical;
       line-clamp: 2;
-webkit-line-clamp: 2;

        overflow: hidden;

    }


    /* ------------------------------------------------------
       CATEGORÍA
    ------------------------------------------------------ */

    #productos .producto-card .producto-card-categoria,
    #destacadosProductos .producto-card .producto-card-categoria {

        margin: 0 0 5px;

        font-size: 12px;

        line-height: 1.2;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    /* ------------------------------------------------------
       PRECIO
    ------------------------------------------------------ */

    #productos .producto-card .producto-card-precio,
    #destacadosProductos .producto-card .producto-card-precio {

        margin: 4px 0 5px;

        line-height: 1.1;

    }


    #productos .producto-card .producto-card-precio-normal,
    #productos .producto-card .producto-card-precio-oferta,

    #destacadosProductos .producto-card .producto-card-precio-normal,
    #destacadosProductos .producto-card .producto-card-precio-oferta {

        font-size: 20px;

        line-height: 1.1;

    }


    #productos .producto-card .producto-card-precio-anterior,
    #destacadosProductos .producto-card .producto-card-precio-anterior {

        font-size: 11px;

    }


    /* ------------------------------------------------------
       ⭐ RESEÑAS
    ------------------------------------------------------ */

    #productos .producto-card .producto-card-resenas,
    #destacadosProductos .producto-card .producto-card-resenas {

        width: 100%;

        height: 20px;
        min-height: 20px;
        max-height: 20px;

        margin: 4px 0;

        display: flex;

        align-items: center;

        gap: 3px;

        white-space: nowrap;

        overflow: hidden;

    }


    #productos .producto-card .estrellas-producto,
    #destacadosProductos .producto-card .estrellas-producto {

        font-size: 14px;

        letter-spacing: 0;

        white-space: nowrap;

    }


    #productos .producto-card .promedio-producto,
    #destacadosProductos .producto-card .promedio-producto {

        font-size: 12px;

    }


    #productos .producto-card .cantidad-resenas-producto,
    #destacadosProductos .producto-card .cantidad-resenas-producto {

        font-size: 11px;

    }


    /* ------------------------------------------------------
       S/R — SIN RESEÑAS
       Una sola línea para que no estire la tarjeta
    ------------------------------------------------------ */

    #productos .producto-card .sin-resenas-card,
    #destacadosProductos .producto-card .sin-resenas-card {

        height: 20px;

        min-height: 20px;
        max-height: 20px;

        margin: 4px 0;

        display: flex;

        align-items: center;

        gap: 4px;

        white-space: nowrap;

        overflow: hidden;

    }


  


    #productos .producto-card .sin-resenas-card .texto-sin-resenas,
    #destacadosProductos .producto-card .sin-resenas-card .texto-sin-resenas {

        font-size: 11px;

        white-space: nowrap;

        overflow: hidden;

    }


    /* ------------------------------------------------------
       STOCK
    ------------------------------------------------------ */

    #productos .producto-card .estado-stock-producto,
    #destacadosProductos .producto-card .estado-stock-producto {

        margin: 3px 0 6px;

        font-size: 12px;

        line-height: 1.2;

        white-space: nowrap;

    }


    /* ------------------------------------------------------
       BOTÓN CARRITO
    ------------------------------------------------------ */

    #productos .producto-card .boton-agregar-tarjeta,
    #destacadosProductos .producto-card .boton-agregar-tarjeta {

        width: 100%;

        min-width: 0;

        height: 38px;
        min-height: 38px;
        max-height: 38px;

        margin-top: 4px;

        padding: 0 5px;

        font-size: 10px;

        line-height: 38px;

        border-radius: 20px;

        box-sizing: border-box;

    }


    /* ------------------------------------------------------
       ETIQUETAS
    ------------------------------------------------------ */

    #productos .producto-card .etiquetas-producto,
    #destacadosProductos .producto-card .etiquetas-producto {

        top: 7px;
        left: 7px;

        right: 45px;

        gap: 3px;

    }


    #productos .producto-card .etiqueta-producto,
    #destacadosProductos .producto-card .etiqueta-producto {

        padding: 4px 6px;

        font-size: 8px;

        line-height: 1;

    }

}

/* ======================================================
   ⭐ ESTRELLAS VACÍAS — CORRECCIÓN DEFINITIVA MÓVIL
   ====================================================== */

@media (max-width: 768px) {

    .producto-card-resenas.sin-resenas-card {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        overflow: visible;
        white-space: nowrap;
    }

    .producto-card-resenas.sin-resenas-card .estrellas-vacias {
        display: inline;
        visibility: visible;
        opacity: 1;

        color: #9ca3af;

        font-family:
            Arial,
            "Segoe UI Symbol",
            sans-serif;

        font-size: 21px;
        font-weight: normal;
        line-height: 1;
        letter-spacing: 0;

        width: auto;
        min-width: 105px;
        max-width: none;

        height: auto;
        max-height: none;

        overflow: visible;

        position: static;
        transform: none;
    }

    .producto-card-resenas.sin-resenas-card
    .cantidad-resenas-producto {
        display: inline;
        visibility: visible;
        opacity: 1;

        color: #9ca3af;
        font-size: 16px;
        line-height: 1;

        width: auto;
        min-width: auto;

        position: static;
    }

}

#cuentaNovaLogueado .cabecera-cuenta-cliente h2 {
    margin: 0 0 7px;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

#cuentaNovaLogueado .tarjeta-puntos-nova {
    margin: 0 0 28px;
    padding: 24px 26px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0066ff, #0047b3);
    color: #fff;
    text-align: left;
    box-shadow: 0 14px 35px rgba(0, 102, 255, .18);
    box-sizing: border-box;
}

#cuentaNovaLogueado .tarjeta-puntos-nova > strong {
    display: block;
    margin: 7px 0 2px;
    font-size: 42px;
    line-height: 1;
    color: #fff;
}

#cuentaNovaLogueado .tarjeta-puntos-nova > span {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,.88);
}

#cuentaNovaLogueado .valor-puntos-nova {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.24);
    color: rgba(255,255,255,.9);
    font-size: 13px;
}

#cuentaNovaLogueado .valor-puntos-nova strong {
    display: inline;
    margin-left: 5px;
    font-size: 18px;
    color: #fff;
}

#cuentaNovaLogueado .opcion-cuenta-cliente strong {
    display: block;
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
}

#cuentaNovaLogueado .opcion-cuenta-cliente span {
    display: block;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}

#cuentaNovaLogueado .cuenta-cliente-vacio {
    margin: 0;
    padding: 12px 0;
    color: #64748b;
    text-align: center;
    font-size: 14px;
}

/* =========================================================
   NOVA STORE — FAVORITOS FINAL
   Botones debajo del contenido, sin tapar nombre
   ========================================================= */

#contenidoCuentaCliente .lista-favoritos-cliente {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

#contenidoCuentaCliente .tarjeta-favorito-cliente {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    min-height: 230px;
    padding: 16px;
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 5px 18px rgba(15,23,42,.06);
    overflow: hidden;
}

#contenidoCuentaCliente .tarjeta-favorito-cliente:hover {
    border-color: #bfdbfe;
    box-shadow: 0 10px 26px rgba(15,23,42,.10);
}

#contenidoCuentaCliente .tarjeta-favorito-cliente > img {
    display: block;
    width: 100%;
    height: 150px;
    min-height: 150px;
    object-fit: contain;
    border-radius: 12px;
    background: #f8fafc;
    margin: 0 0 12px;
    box-sizing: border-box;
}

#contenidoCuentaCliente .info-favorito-cliente {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
}

#contenidoCuentaCliente .info-favorito-cliente strong {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#contenidoCuentaCliente .info-favorito-cliente span {
    display: block;
    margin: 0;
    padding: 0;
    color: #0066ff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

#contenidoCuentaCliente .acciones-favorito-cliente {
    position: static;
    display: flex;
    align-items: stretch;
    gap: 9px;
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
    flex: 0 0 auto;
    clear: both;
    box-sizing: border-box;
}

#contenidoCuentaCliente .boton-ver-producto-favorito {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: #0066ff;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

#contenidoCuentaCliente .boton-ver-producto-favorito:hover {
    background: #0052cc;
    color: #fff;
    transform: translateY(-1px);
}

#contenidoCuentaCliente .boton-quitar-favorito {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 82px;
    width: 82px;
    min-width: 82px;
    min-height: 42px;
    margin: 0;
    padding: 10px 8px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff;
    color: #dc2626;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

#contenidoCuentaCliente .boton-quitar-favorito:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

/* =========================================================
   X DEL MODAL DE CUENTA — CENTRADA Y FIJA
   ========================================================= */

#modalCuentaNova .contenido-cuenta-nova {
    position: relative;
}

#modalCuentaNova button#cerrarCuentaNova.cerrar-cuenta-nova {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: none;
    background: transparent;
    color: #64748b;
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    box-sizing: border-box;
}

#modalCuentaNova button#cerrarCuentaNova.cerrar-cuenta-nova:hover {
    background: #f1f5f9;
    color: #0f172a;
    transform: none;
}

#modalCuentaNova button#cerrarCuentaNova.cerrar-cuenta-nova:focus,
#modalCuentaNova button#cerrarCuentaNova.cerrar-cuenta-nova:active {
    outline: none;
    transform: none;
}

@media (max-width: 760px) {
    #contenidoCuentaCliente .lista-favoritos-cliente {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #contenidoCuentaCliente .tarjeta-favorito-cliente {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    #contenidoCuentaCliente .tarjeta-favorito-cliente {
        padding: 13px;
    }

    #contenidoCuentaCliente .tarjeta-favorito-cliente > img {
        height: 135px;
        min-height: 135px;
    }

    #contenidoCuentaCliente .acciones-favorito-cliente {
        gap: 7px;
    }

    #contenidoCuentaCliente .boton-ver-producto-favorito,
    #contenidoCuentaCliente .boton-quitar-favorito {
        min-height: 40px;
        font-size: 12px;
    }

    #contenidoCuentaCliente .boton-quitar-favorito {
        flex-basis: 76px;
        width: 76px;
        min-width: 76px;
    }

    #modalCuentaNova button#cerrarCuentaNova.cerrar-cuenta-nova {
        top: 8px;
        right: 8px;
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        font-size: 26px;
        line-height: 38px;
    }
}



/* =========================================================
   FAVORITOS - BOTONES BIEN ACOMODADOS
   ========================================================= */

.acciones-favorito-cliente {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
    position: static;
}

.boton-ver-producto-favorito {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.boton-quitar-favorito {
    flex: 0 0 82px;
    width: 82px;
    min-width: 82px;
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
}

/* En móvil */
@media (max-width: 600px) {
    .acciones-favorito-cliente {
        gap: 8px;
        padding-top: 12px;
    }

    .boton-ver-producto-favorito {
        height: 40px;
        padding: 0 14px;
        font-size: 14px;
    }

    .boton-quitar-favorito {
        flex-basis: 78px;
        width: 78px;
        min-width: 78px;
        height: 40px;
        font-size: 13px;
    }
}

/* =========================================================
   ❤️ FAVORITO EN TARJETAS DE PRODUCTOS
   SIN CUADRO AZUL
   ========================================================= */

.producto-card-imagen {
    position: relative;
}

.producto-card-imagen .boton-favorito-producto {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 42px;
    height: 42px;

    min-width: 42px;
    min-height: 42px;

    margin: 0;
    padding: 0;

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

    border: none;
    outline: none;

    background: transparent;
    background-color: transparent;

    box-shadow: none;

    color: #64748b;

    font-family: Arial, sans-serif;
    font-size: 31px;
    font-weight: 400;
    line-height: 1;

    border-radius: 50%;

    cursor: pointer;

    z-index: 20;

    appearance: none;
    -webkit-appearance: none;
}

/* ❤️ HOVER */
.producto-card-imagen .boton-favorito-producto:hover {
    background: transparent;
    background-color: transparent;

    border: none;
    box-shadow: none;

    color: #2563eb;

    transform: scale(1.10);
}

/* ❤️ FAVORITO ACTIVADO */
.producto-card-imagen .boton-favorito-producto.activo {
    background: transparent;
    background-color: transparent;

    border: none;
    box-shadow: none;

    color: #2563eb;

    font-size: 30px;
}

/* ❤️ FAVORITO ACTIVADO AL PASAR EL MOUSE */
.producto-card-imagen .boton-favorito-producto.activo:hover {
    background: transparent;
    background-color: transparent;

    border: none;
    box-shadow: none;

    color: #1d4ed8;

    transform: scale(1.10);
}

/* =========================================================
   📱 MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .producto-card-imagen .boton-favorito-producto {
        top: 8px;
        right: 8px;

        width: 38px;
        height: 38px;

        min-width: 38px;
        min-height: 38px;

        font-size: 28px;
    }

    .producto-card-imagen .boton-favorito-producto.activo {
        font-size: 27px;
    }

}


/* =========================================================
   ❤️ FAVORITOS - PRODUCTOS PRINCIPALES
   MISMO ESTILO QUE DESTACADOS
   ========================================================= */

#productos .producto-card-imagen {
    position: relative;
}

#productos .producto-card-imagen .boton-favorito-producto {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 42px;
    height: 42px;

    min-width: 42px;
    min-height: 42px;

    margin: 0;
    padding: 0;

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

    border: none;
    outline: none;

    background: transparent;
    background-color: transparent;

    box-shadow: none;

    color: #64748b;

    font-family: Arial, sans-serif;
    font-size: 31px;
    font-weight: 400;
    line-height: 1;

    border-radius: 50%;

    cursor: pointer;

    z-index: 20;

    appearance: none;
    -webkit-appearance: none;
}


/* =========================================================
   ❤️ AL PASAR EL MOUSE
   ========================================================= */

#productos .producto-card-imagen .boton-favorito-producto:hover {
    background: transparent;
    background-color: transparent;

    border: none;
    box-shadow: none;

    color: #2563eb;

    transform: scale(1.10);
}


/* =========================================================
   ❤️ FAVORITO ACTIVADO
   ========================================================= */

#productos .producto-card-imagen .boton-favorito-producto.activo {
    background: transparent;
    background-color: transparent;

    border: none;
    box-shadow: none;

    color: #2563eb;

    font-size: 30px;
}


/* =========================================================
   ❤️ FAVORITO ACTIVADO + HOVER
   ========================================================= */

#productos .producto-card-imagen .boton-favorito-producto.activo:hover {
    background: transparent;
    background-color: transparent;

    border: none;
    box-shadow: none;

    color: #1d4ed8;

    transform: scale(1.10);
}


/* =========================================================
   📱 PRODUCTOS PRINCIPALES - CELULAR
   ========================================================= */

@media (max-width: 600px) {

    #productos .producto-card-imagen .boton-favorito-producto {
        top: 8px;
        right: 8px;

        width: 38px;
        height: 38px;

        min-width: 38px;
        min-height: 38px;

        font-size: 28px;
    }


    #productos .producto-card-imagen .boton-favorito-producto.activo {
        font-size: 27px;
    }

}

/* ============================================================
   🖼️ PRODUCTOS PRINCIPALES — ELIMINAR BORDES/ESPACIOS NEGROS
   ============================================================ */

/* ============================================================
   🖼️ PRODUCTOS PRINCIPALES — IMAGEN SIN BORDES
   ============================================================ */

#productos .producto-card-imagen {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: transparent;
}

#productos .producto-card-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    margin: 0;
    padding: 0;
}


/* ❤️ FAVORITOS EN CELULAR - HACER MÁS PEQUEÑO */
@media (max-width: 600px) {
    #productos .producto-card-imagen > .boton-favorito-producto {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        font-size: 24px;
    }

    #productos .producto-card-imagen > .boton-favorito-producto.activo {
        font-size: 23px;
    }
}
/* ============================================================
   ❤️ DESTACADOS — CORAZÓN MÁS PEQUEÑO SOLO EN CELULAR
   ============================================================ */

@media (max-width: 600px) {

    #destacados .producto-card-imagen > button.boton-favorito-producto,
    #destacados .producto-card-imagen button.boton-favorito-producto {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        max-width: 30px;
        max-height: 30px;

        padding: 0;
        margin: 0;

        font-size: 21px;
        line-height: 30px;

        transform: none;
    }

    #destacados .producto-card-imagen > button.boton-favorito-producto.activo,
    #destacados .producto-card-imagen button.boton-favorito-producto.activo {
        font-size: 20px;
    }

}

/* ============================================================
   ❤️ CORAZÓN DESTACADOS - SOLO CELULAR
   MÁS PEQUEÑO
   ============================================================ */

@media (max-width: 600px) {

    /* Tarjetas que están dentro de la sección destacados */
    .destacados .boton-favorito-producto,
    #destacados .boton-favorito-producto,
    .productos-destacados .boton-favorito-producto {

        width: 30px;
        height: 30px;

        min-width: 30px;
        min-height: 30px;

        max-width: 30px;
        max-height: 30px;

        padding: 0;
        margin: 0;

        font-size: 21px;
        line-height: 30px;

        transform: none;

    }


    .destacados .boton-favorito-producto.activo,
    #destacados .boton-favorito-producto.activo,
    .productos-destacados .boton-favorito-producto.activo {

        font-size: 20px;

    }

}

.mensaje-aviso-stock {
    min-height: 20px;
    margin: 9px 0 0;
    font-size: 13px;
}

.mensaje-aviso-stock-ok {
    color: #15803d;
    opacity: 1;
}

.mensaje-aviso-stock-error {
    color: #dc2626;
    opacity: 1;
}


.footer-red-social {
    display: inline-flex;

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

    flex-direction: row;

    gap: 9px;

    width: 155px;
    min-width: 155px;

    padding: 12px 20px;

    box-sizing: border-box;

    border: 1px solid rgba(56, 189, 248, .35);

    border-radius: 12px;

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

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.2;

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


/* Evita que el navegador ponga los enlaces en violeta */

.footer-red-social:visited {
    color: #ffffff;
}


/* Hover */

.footer-red-social:hover {
    transform: translateY(-2px);

    background: rgba(56, 189, 248, .10);

    border-color: rgba(56, 189, 248, .65);

    color: #ffffff;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .18);
}


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

@media screen and (max-width: 600px) {

    .footer-redes {
        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: center;

        gap: 8px;

        width: 100%;

        margin: 25px auto;

        padding: 0 8px;

        box-sizing: border-box;
    }


    .footer-red-social {
        display: inline-flex;

        flex-direction: row;

        align-items: center;

        justify-content: center;

        width: 150px;

        min-width: 150px;

        max-width: 150px;

        min-height: 46px;

        padding: 10px 12px;

        gap: 7px;

        border-radius: 12px;

        box-sizing: border-box;

        font-size: 14px;

        line-height: 1;

        color: #ffffff;

        text-decoration: none;
    }


    .footer-red-social:visited {
        color: #ffffff;
    }


    .footer-red-logo {
        width: 22px;

        height: 22px;

        min-width: 22px;

        max-width: 22px;

        object-fit: contain;

        display: block;

        flex-shrink: 0;
    }

}

/* ======================================================
   NOVA STORE - CORRECCIÓN X MODAL CREAR CUENTA
   ====================================================== */

#modalCrearCuenta .cerrar,
#modalCrearCuenta .btnCerrar,
#modalCrearCuenta .close,
#modalCrearCuenta .cerrarModal,
#modalCrearCuenta button[aria-label="Cerrar"] {
    position: absolute;
    top: 22px;
    right: 22px;

    width: 42px;
    height: 42px;

    min-width: 42px;
    min-height: 42px;

    padding: 0;
    margin: 0;

    background: transparent;
    background-color: transparent;

    border: none;
    border-radius: 0;
    box-shadow: none;

    color: #64748b;

    font-size: 30px;
    font-weight: 700;
    line-height: 42px;

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

    cursor: pointer;
}

#modalCrearCuenta .cerrar:hover,
#modalCrearCuenta .btnCerrar:hover,
#modalCrearCuenta .close:hover,
#modalCrearCuenta .cerrarModal:hover,
#modalCrearCuenta button[aria-label="Cerrar"]:hover {
    background: transparent;
    background-color: transparent;

    color: #475569;

    box-shadow: none;
    transform: none;
}

/* =====================================================
   CRUZ DE CERRAR - MODAL CREAR CUENTA
   ===================================================== */

button[onclick*="cerrar"],
button[onclick*="Cerrar"],
.btn-cerrar,
.cerrar,
.cerrar-modal,
.modal .cerrar,
.modal .btn-cerrar {
    background: transparent;
    background-color: transparent;
    color: #64748b;
    border: none;
    box-shadow: none;

    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;

    padding: 0;
    margin: 0;

    font-size: 30px;
    font-weight: 400;
    line-height: 1;

    border-radius: 0;

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

    cursor: pointer;
}

/* Efecto al pasar el dedo/mouse */

button[onclick*="cerrar"]:hover,
button[onclick*="Cerrar"]:hover,
.btn-cerrar:hover,
.cerrar:hover,
.cerrar-modal:hover,
.modal .cerrar:hover,
.modal .btn-cerrar:hover {
    background: transparent;
    color: #475569;
    transform: none;
    filter: none;
}

/* =========================================================
   NOVA STORE — BOTONES RASTREAR / NOSOTROS EN CELULAR
   CORRECCIÓN DEFINITIVA
   ========================================================= */

@media (max-width: 600px) {

    /* La navegación secundaria vuelve a ser visible */
    .navegacion-tienda {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    /* Mostrar barra de botones */
    .navegacion-tienda .navegacion-principal {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        width: 100%;

        gap: 8px;

        padding: 10px 12px;
        margin: 0;

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

        flex-wrap: nowrap;

        box-sizing: border-box;

        scrollbar-width: none;
    }

    .navegacion-tienda .navegacion-principal::-webkit-scrollbar {
        display: none;
    }

    /* No duplicar Categorías:
       las categorías ya se abren desde ☰ */
    .navegacion-tienda #botonCategoriasTienda {
        display: none;
    }

    /* RASTREAR + NOSOTROS */
    .navegacion-tienda
    .navegacion-principal
    .boton-navegacion-tienda {

        display: flex;

        flex: 0 0 auto;

        width: auto;
        min-width: max-content;

        min-height: 42px;

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

        padding: 10px 15px;

        white-space: nowrap;

        border-radius: 10px;

        box-sizing: border-box;

        font-size: 14px;
    }

    /* Separación del contenido que viene después */
    .navegacion-tienda #botonesCategorias {
        margin-top: 5px;
    }

}


/* =========================================================
   NOVA STORE — CRUZ DE MODALES DE CUENTA
   CORRECCIÓN FINAL
   ========================================================= */

.modal-cuenta-nova
.contenido-cuenta-nova {
    position: relative;
}

.modal-cuenta-nova
.cerrar-cuenta-nova {

    position: absolute;

    top: 10px;
    right: 10px;

    width: 38px;
    height: 38px;

    min-width: 38px;
    min-height: 38px;

    padding: 0;
    margin: 0;

    display: flex;

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

    background: transparent;
    background-color: transparent;

    border: none;
    border-radius: 50%;

    color: #64748b;

    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;

    line-height: 38px;
    text-align: center;

    box-shadow: none;
    outline: none;

    appearance: none;
    -webkit-appearance: none;

    transform: none;

    cursor: pointer;

    z-index: 999999;
}

.modal-cuenta-nova
.cerrar-cuenta-nova:hover {

    background: #f1f5f9;

    color: #0f172a;

    transform: none;
}

.modal-cuenta-nova
.cerrar-cuenta-nova:focus,
.modal-cuenta-nova
.cerrar-cuenta-nova:active {

    outline: none;
    box-shadow: none;
    transform: none;
}

@media (max-width: 600px) {

    .modal-cuenta-nova
    .cerrar-cuenta-nova {

        top: 8px;
        right: 8px;

        width: 36px;
        height: 36px;

        min-width: 36px;
        min-height: 36px;

        font-size: 26px;

        line-height: 36px;

    }

}

/* =========================================================
   NOVA STORE — DETALLE DE PRODUCTO PROFESIONAL
   ========================================================= */

.detalle-producto {

    width: min(
        1100px,
        calc(100% - 40px)
    );

    margin: 45px auto 0;

    padding: 25px 0 0;

    gap: 55px;

    box-sizing: border-box;
}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.detalle-info {

    min-width: 0;

    width: 55%;

    box-sizing: border-box;

}

.detalle-info h1 {

    margin-top: 0;

    margin-bottom: 14px;

}

.detalle-info h2 {

    margin-top: 0;

    margin-bottom: 20px;

}

.detalle-descripcion {

    margin-top: 25px;

    margin-bottom: 28px;

    line-height: 1.75;

}


/* =========================================================
   SECCIÓN DE RESEÑAS
   ========================================================= */

.detalle-resenas-seccion {

    width: min(
        900px,
        calc(100% - 40px)
    );

    margin: 65px auto 0;

    padding: 45px 0 20px;

    border-top:
        1px solid
        rgba(255,255,255,.12);

    box-sizing: border-box;

}


/* =========================================================
   LISTA DE RESEÑAS
   ========================================================= */

.detalle-resenas-seccion
#listaResenas {

    width: 100%;

    margin: 0 auto;

}


/* =========================================================
   SIN RESEÑAS
   ========================================================= */

.detalle-resenas-seccion
.sin-resenas {

    width: min(
        650px,
        100%
    );

    margin: 0 auto;

    padding: 28px 24px;

    background: #f8fafc;

    color: #64748b;

    border:
        1px solid
        #e2e8f0;

    border-radius: 16px;

    box-sizing: border-box;

    text-align: center;

    line-height: 1.5;

}


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

.formulario-resena-seccion {

    width: min(
        650px,
        100%
    );

    margin: 38px auto 0;

    padding: 30px;

    background: #f8fafc;

    border:
        1px solid
        #e2e8f0;

    border-radius: 18px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.12);

    box-sizing: border-box;

}


/* TÍTULO */

.formulario-resena-seccion h3 {

    margin:
        0 0 25px;

    color: #1e293b;

    font-size: 24px;

    font-weight: 700;

    text-align: center;

}


/* FORMULARIO */

.formulario-resena-seccion
form {

    display: grid;

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

    gap: 14px;

}


/* CAMPOS */

.formulario-resena-seccion
input,
.formulario-resena-seccion
select,
.formulario-resena-seccion
textarea {

    width: 100%;

    min-width: 0;

    padding: 13px 15px;

    background: #ffffff;

    color: #1e293b;

    border:
        1px solid
        #cbd5e1;

    border-radius: 10px;

    box-sizing: border-box;

    font-size: 15px;

}


/* COMENTARIO */

.formulario-resena-seccion
textarea {

    grid-column:
        1 / -1;

    min-height: 125px;

    resize: vertical;

}


/* BOTÓN */

.formulario-resena-seccion
button {

    grid-column:
        1 / -1;

    width: 100%;

    min-height: 50px;

    padding: 12px 18px;

    background: #38bdf8;

    color: #ffffff;

    border: none;

    border-radius: 10px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

}


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

@media (max-width: 600px) {

    .detalle-producto {

        width:
            calc(100% - 24px);

        margin:
            25px auto 0;

        padding:
            10px 0;

        gap: 28px;

    }

    .detalle-info {

        width: 100%;

        text-align: center;

    }

    .detalle-info h1 {

        font-size: 28px;

        line-height: 1.2;

        margin-bottom: 14px;

    }

    .detalle-info h2 {

        font-size: 30px;

        margin-bottom: 20px;

    }

    .detalle-descripcion {

        margin:
            24px 0 28px;

        line-height: 1.7;

    }


    .detalle-resenas-seccion {

        width:
            calc(100% - 24px);

        margin:
            50px auto 0;

        padding:
            35px 0 15px;

    }

    .detalle-resenas-seccion
    #listaResenas::before {

        font-size: 23px;

        margin-bottom: 20px;

    }


    .formulario-resena-seccion {

        margin-top: 28px;

        padding:
            22px 18px;

    }


    .formulario-resena-seccion
    h3 {

        font-size: 22px;

        margin-bottom: 20px;

    }


    .formulario-resena-seccion
    form {

        display:
            flex;

        flex-direction:
            column;

        gap: 13px;

    }


    .formulario-resena-seccion
    input,
    .formulario-resena-seccion
    select,
    .formulario-resena-seccion
    textarea,
    .formulario-resena-seccion
    button {

        width: 100%;

        max-width: 100%;

    }

}

/* =========================================================
   NOVA STORE — PRÓXIMAMENTE / PREVENTA
   ========================================================= */

.producto-card-imagen {
    position: relative;
    overflow: hidden;
}

.cinta-proximamente-producto {
    position: absolute;
    top: 42%;
    left: -10%;
    width: 120%;

    padding: 11px 0;

    background: #111827;
    color: #ffffff;

    text-align: center;

    font-size: 16px;
    font-weight: 900;

    letter-spacing: 2px;

    transform: rotate(-7deg);

    z-index: 25;

    pointer-events: none;

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, .25);
}


.etiqueta-preventa-precio {
    display: block;

    margin-top: 5px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .8px;

    color: #2563eb;
}


.precio-preventa-detalle {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    margin: 10px 0 18px;
}


.precio-preventa-detalle strong {
    font-size: 35px;
    line-height: 1.1;
}


.precio-preventa-detalle > span:last-child {
    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;

    color: #2563eb;
}


.precio-preventa-normal {
    color: #64748b;

    text-decoration: line-through;

    font-size: 18px;
}


.bloque-proximamente-detalle {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin: 12px 0 22px;

    padding: 16px 18px;

    border-radius: 12px;

    background: #f1f5f9;

    border: 1px solid #cbd5e1;
}


.bloque-proximamente-detalle strong {
    font-size: 17px;

    letter-spacing: 1px;
}


.bloque-proximamente-detalle span {
    color: #64748b;

    font-size: 14px;
}


.stock-detalle-proximamente {
    color: #2563eb;

    font-weight: 900;
}


.detalle-producto {
    position: relative;
}


.cinta-proximamente-detalle-imagen {
    position: absolute;

    top: 220px;

    left: -3%;

    width: 51%;

    padding: 12px 0;

    background: #111827;

    color: #ffffff;

    text-align: center;

    font-weight: 900;

    letter-spacing: 2px;

    transform: rotate(-7deg);

    z-index: 100;

    pointer-events: none;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, .28);
}


@media (max-width: 700px) {

    .cinta-proximamente-producto {
        font-size: 13px;
        padding: 9px 0;
        letter-spacing: 1.5px;
    }

    .precio-preventa-detalle strong {
        font-size: 30px;
    }

    .cinta-proximamente-detalle-imagen {
        top: 180px;
        left: -8%;
        width: 116%;
        padding: 10px 0;
        font-size: 14px;
    }

}

/* =========================================================
   📱 NOVA STORE — BLOQUEO HORIZONTAL Y DOBLE ZOOM
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

@media (hover: none) and (pointer: coarse) {

    html,
    body {
        touch-action: manipulation;
    }

}

/* =========================================================
   NOVA STORE — TEXTO "MI CUENTA" VISIBLE
   Corrección exclusiva del texto para usuarios no logueados.
   No modifica botones, posiciones ni funcionamiento.
========================================================= */
#modalCuentaNova #cuentaNovaNoLogueado > p {
    color: #334155;
    -webkit-text-fill-color: #334155;
    opacity: 1;
    visibility: visible;
    text-shadow: none;
    filter: none;
}
/* =========================================================
   NOVA STORE — PULIDO VISUAL PREMIUM
   Solo presentación. No modifica HTML, JS, datos ni lógica.
   ========================================================= */
:root {
    --nova-premium-bg: #0b1428;
    --nova-premium-panel: #111d33;
    --nova-premium-card: #1d2a40;
    --nova-premium-card-hover: #22324b;
    --nova-premium-border: rgba(148, 163, 184, .20);
    --nova-premium-border-hover: rgba(56, 189, 248, .48);
    --nova-premium-blue: var(--nova-color-principal, #38bdf8);
    --nova-premium-blue-dark: #0ea5e9;
    --nova-premium-muted: #9aaac1;
    --nova-premium-gap: 20px;
}

body {
    background: var(--nova-premium-bg);
}

main {
    max-width: 1240px;
    padding: 34px 28px 56px;
}

/* -------------------------
   BENEFICIOS
------------------------- */
.beneficios {
    max-width: 1180px;
    margin: 58px auto 62px;
    padding: 4px 0;
}

.beneficio {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 28px;
}

.beneficio + .beneficio::before {
    top: 16%;
    height: 68%;
    background: rgba(148, 163, 184, .22);
}

.beneficio h3 {
    font-size: 19px;
    letter-spacing: -.2px;
}

.beneficio p {
    font-size: 15px;
    color: var(--nova-premium-muted);
}

/* -------------------------
   PRODUCTOS PRINCIPALES
------------------------- */
#productos {
    width: 100%;
    max-width: 1180px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nova-premium-gap);
    align-items: stretch;
}

#productos .producto-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 448px;
    padding: 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--nova-premium-card);
    border: 1px solid var(--nova-premium-border);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

#productos .producto-card:hover {
    transform: translateY(-4px);
    background: var(--nova-premium-card-hover);
    border-color: var(--nova-premium-border-hover);
    box-shadow: 0 16px 34px rgba(0,0,0,.25);
}

#productos .producto-card .producto-card-imagen {
    position: relative;
    flex: 0 0 190px;
    width: 100%;
    height: 190px;
    min-height: 190px;
    max-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.035);
    border-radius: 13px;
    overflow: hidden;
}

#productos .producto-card .producto-card-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .28s ease;
}

#productos .producto-card:hover .producto-card-imagen img {
    transform: scale(1.035);
}

#productos .producto-card .producto-card-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 12px 3px 2px;
}

#productos .producto-card .producto-card-nombre,
#destacadosProductos .producto-card .producto-card-nombre {
    margin: 0 0 5px;
    min-height: 39px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.18;
}

#productos .producto-card .producto-card-categoria,
#destacadosProductos .producto-card .producto-card-categoria {
    min-height: 18px;
    margin: 0 0 6px;
    color: var(--nova-premium-muted);
    font-size: 12px;
    line-height: 1.25;
}

#productos .producto-card .producto-card-precio,
#destacadosProductos .producto-card .producto-card-precio {
    margin: 4px 0 5px;
}

#productos .producto-card .producto-card-precio-normal,
#productos .producto-card .producto-card-precio-oferta,
#destacadosProductos .producto-card .producto-card-precio-normal,
#destacadosProductos .producto-card .producto-card-precio-oferta {
    color: var(--nova-premium-blue);
    font-size: 23px;
    font-weight: 800;
}

#productos .producto-card .producto-card-precio-anterior,
#destacadosProductos .producto-card .producto-card-precio-anterior {
    color: var(--nova-premium-muted);
    font-size: 12px;
}

#productos .producto-card .producto-card-resenas,
#destacadosProductos .producto-card .producto-card-resenas,
#productos .producto-card .sin-resenas-card,
#destacadosProductos .producto-card .sin-resenas-card {
    min-height: 22px;
    margin: 5px 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

#productos .producto-card .estrellas-producto,
#destacadosProductos .producto-card .estrellas-producto {
    letter-spacing: 0;
}

#productos .producto-card .estado-stock-producto,
#destacadosProductos .producto-card .estado-stock-producto,
#productos .producto-card .estado-stock-tarjeta {
    margin: 4px 0 8px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Botón de producto: mismo azul de Nova, nunca negro */
#productos .producto-card .boton-agregar-tarjeta,
#destacadosProductos .producto-card .boton-agregar-tarjeta {
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: auto 0 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--nova-premium-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .25px;
    line-height: 1;
    box-shadow: 0 7px 18px rgba(56,189,248,.18);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

#productos .producto-card .boton-agregar-tarjeta:hover,
#destacadosProductos .producto-card .boton-agregar-tarjeta:hover {
    background: var(--nova-premium-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(56,189,248,.26);
}

#productos .producto-card .boton-agregar-tarjeta:active,
#destacadosProductos .producto-card .boton-agregar-tarjeta:active {
    transform: scale(.985);
}

#productos .producto-card .boton-agregar-tarjeta:disabled,
#destacadosProductos .producto-card .boton-agregar-tarjeta:disabled {
    background: #334155;
    color: #94a3b8;
    box-shadow: none;
    opacity: .9;
}

/* -------------------------
   DESTACADOS — MISMO SISTEMA DE ANCHO
------------------------- */
.seccion-destacados {
    width: 100%;
    max-width: 1180px;
    margin: 34px auto;
    padding: 30px 30px 32px;
    background: #06132f;
    border: 1px solid rgba(56,189,248,.07);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.destacados-cabecera {
    margin-bottom: 22px;
}

.destacados-cabecera h2 {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.5px;
}

.destacados-productos {
    gap: var(--nova-premium-gap);
    padding: 4px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(56,189,248,.35) transparent;
}

.destacados-productos .producto-card {
    flex: 0 0 calc((100% - 60px) / 4);
    width: calc((100% - 60px) / 4);
    max-width: none;
    min-width: 0;
    min-height: 448px;
    padding: 12px;
    margin: 0;
    background: var(--nova-premium-card);
    border: 1px solid var(--nova-premium-border);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.destacados-productos .producto-card:hover {
    background: var(--nova-premium-card-hover);
    border-color: var(--nova-premium-border-hover);
}

#destacadosProductos .producto-card .producto-card-imagen {
    position: relative;
    flex: 0 0 190px;
    width: 100%;
    height: 190px;
    min-height: 190px;
    max-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.035);
    border-radius: 13px;
    overflow: hidden;
}

#destacadosProductos .producto-card .producto-card-imagen img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#destacadosProductos .producto-card .producto-card-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 12px 3px 2px;
}

/* Favoritos: limpio y discreto */
#productos .producto-card .boton-favorito-producto,
#destacadosProductos .producto-card .boton-favorito-producto {
    top: 9px;
    right: 9px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(11,20,40,.52);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0,0,0,.14);
}

#productos .producto-card .boton-favorito-producto:hover,
#destacadosProductos .producto-card .boton-favorito-producto:hover {
    background: rgba(11,20,40,.72);
    color: #fff;
}

/* -------------------------
   FOOTER PREMIUM
------------------------- */
footer {
    margin-top: 72px;
    padding: 58px 28px 30px;
    background: #1a263a;
    border-top: 2px solid var(--nova-premium-blue);
}

footer h2 {
    margin: 0 0 12px;
    color: var(--nova-premium-blue);
    font-size: 34px;
    letter-spacing: -.5px;
}

footer p {
    color: #cbd5e1;
    font-size: 16px;
}

.texto-envios-footer {
    margin: 26px 0 18px;
    color: #d5deeb;
    font-size: 16px;
    font-weight: 700;
}

#logosTransportistasFooter {
    gap: 20px;
}

.transportista-footer {
    width: 110px;
    min-width: 110px;
    height: 62px;
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.transportista-footer img {
    width: 78px;
    max-width: 78px;
    height: 44px;
    max-height: 44px;
}

.copyright {
    margin-top: 30px;
    color: #94a3b8;
}

/* -------------------------
   TABLET
------------------------- */
@media (max-width: 1099px) and (min-width: 769px) {
    #productos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .destacados-productos .producto-card {
        flex-basis: calc((100% - 40px) / 3);
        width: calc((100% - 40px) / 3);
    }
}

/* -------------------------
   CELULAR
------------------------- */
@media (max-width: 768px) {
    main {
        padding: 24px 12px 42px;
    }

    #productos {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 22px;
    }

    #productos .producto-card,
    .destacados-productos .producto-card {
        min-height: 390px;
        padding: 9px;
        border-radius: 16px;
    }

    #productos .producto-card .producto-card-imagen,
    #destacadosProductos .producto-card .producto-card-imagen {
        flex-basis: 155px;
        height: 155px;
        min-height: 155px;
        max-height: 155px;
        border-radius: 11px;
    }

    #productos .producto-card .producto-card-info,
    #destacadosProductos .producto-card .producto-card-info {
        padding: 9px 2px 1px;
    }

    #productos .producto-card .producto-card-nombre,
    #destacadosProductos .producto-card .producto-card-nombre {
        min-height: 36px;
        margin-bottom: 3px;
        font-size: 15px;
        line-height: 1.18;
    }

    #productos .producto-card .producto-card-categoria,
    #destacadosProductos .producto-card .producto-card-categoria {
        min-height: 16px;
        margin-bottom: 4px;
        font-size: 11px;
    }

    #productos .producto-card .producto-card-precio-normal,
    #productos .producto-card .producto-card-precio-oferta,
    #destacadosProductos .producto-card .producto-card-precio-normal,
    #destacadosProductos .producto-card .producto-card-precio-oferta {
        font-size: 19px;
    }

    #productos .producto-card .producto-card-resenas,
    #destacadosProductos .producto-card .producto-card-resenas,
    #productos .producto-card .sin-resenas-card,
    #destacadosProductos .producto-card .sin-resenas-card {
        margin: 3px 0;
        min-height: 20px;
    }

    #productos .producto-card .estado-stock-producto,
    #destacadosProductos .producto-card .estado-stock-producto,
    #productos .producto-card .estado-stock-tarjeta {
        margin: 3px 0 6px;
        min-height: 19px;
        font-size: 10px;
    }

    #productos .producto-card .boton-agregar-tarjeta,
    #destacadosProductos .producto-card .boton-agregar-tarjeta {
        height: 40px;
        min-height: 40px;
        font-size: 10px;
        padding: 0 5px;
    }

    .seccion-destacados {
        width: 100%;
        margin: 24px auto;
        padding: 22px 12px 24px;
        border-radius: 20px;
    }

    .destacados-cabecera {
        margin-bottom: 17px;
    }

    .destacados-cabecera h2 {
        font-size: 26px;
    }

    .destacados-productos {
        gap: 12px;
        padding: 3px 0 8px;
    }

    .destacados-productos .producto-card {
        flex: 0 0 calc((100% - 12px) / 2);
        width: calc((100% - 12px) / 2);
        max-width: none;
    }

    #productos .producto-card .boton-favorito-producto,
    #destacadosProductos .producto-card .boton-favorito-producto {
        top: 7px;
        right: 7px;
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 25px;
    }

    .beneficios {
        margin: 42px auto 45px;
        display: block;
    }

    .beneficio {
        padding: 18px 18px;
    }

    .beneficio + .beneficio::before {
        left: 8%;
        top: 0;
        width: 84%;
        height: 1px;
    }

    .beneficio h3 {
        font-size: 18px;
    }

    .beneficio p {
        font-size: 14px;
    }

    footer {
        margin-top: 52px;
        padding: 44px 18px 26px;
    }

    footer h2 {
        font-size: 30px;
    }

    .transportista-footer {
        width: 100px;
        min-width: 100px;
    }
}

@media (max-width: 420px) {
    #productos,
    .destacados-productos {
        gap: 10px;
    }

    #productos .producto-card,
    .destacados-productos .producto-card {
        min-height: 375px;
        padding: 8px;
        border-radius: 15px;
    }

    #productos .producto-card .producto-card-imagen,
    #destacadosProductos .producto-card .producto-card-imagen {
        flex-basis: 140px;
        height: 140px;
        min-height: 140px;
        max-height: 140px;
    }

    .destacados-productos .producto-card {
        flex-basis: calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
    }
}

/* =========================================================
   NOVA STORE — REDISEÑO VISUAL PREMIUM 2026
   CAPA 100% VISUAL — NO MODIFICA FUNCIONES NI JS
========================================================= */
:root{
  --nova-premium-bg:#091225;
  --nova-premium-bg-2:#0d1830;
  --nova-premium-panel:#101d35;
  --nova-premium-card:#1a2940;
  --nova-premium-card-2:#1e2f49;
  --nova-premium-blue:#38bdf8;
  --nova-premium-blue-2:#0ea5e9;
  --nova-premium-text:#f8fbff;
  --nova-premium-muted:#9eacc1;
  --nova-premium-line:rgba(148,163,184,.18);
  --nova-premium-line-strong:rgba(56,189,248,.32);
  --nova-premium-radius:22px;
  --nova-premium-shadow:0 18px 50px rgba(0,0,0,.22);
}

html{scroll-behavior:smooth;background:var(--nova-premium-bg)}
body{
  background:
    radial-gradient(circle at 50% -10%,rgba(56,189,248,.09),transparent 34%),
    linear-gradient(180deg,var(--nova-premium-bg) 0%,#0b1528 48%,#0d1729 100%) !important;
  color:var(--nova-premium-text);
  font-family:"Inter",sans-serif !important;
  letter-spacing:-.01em;
}

/* ---------- barra superior ---------- */
.barra-promociones{
  background:linear-gradient(90deg,#0b203c,#102b4a,#0b203c) !important;
  border-bottom:1px solid rgba(56,189,248,.18) !important;
  color:#dff5ff !important;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
}

/* ---------- header ---------- */
header{
  position:sticky !important;
  top:0;
  z-index:1000;
  padding:14px 22px !important;
  background:rgba(9,18,37,.88) !important;
  border-bottom:1px solid rgba(148,163,184,.13) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.16) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.header-superior{
  max-width:1240px !important;
  margin:auto !important;
  min-height:58px;
  gap:22px !important;
}
.logo{
  gap:11px !important;
}
.logo img,#logoTiendaWeb{
  object-fit:contain;
  filter:drop-shadow(0 5px 16px rgba(56,189,248,.12));
}
#nombreTiendaWeb{
  font-family:"Montserrat",sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.03em;
  color:#fff !important;
}
.buscador{
  flex:1 1 420px !important;
  max-width:540px !important;
}
.buscador input{
  width:100% !important;
  height:46px !important;
  padding:0 18px 0 45px !important;
  border:1px solid rgba(148,163,184,.20) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:.2s ease;
}
.buscador input:focus{
  border-color:rgba(56,189,248,.65) !important;
  background:rgba(255,255,255,.075) !important;
  box-shadow:0 0 0 4px rgba(56,189,248,.10) !important;
}
.buscador input::placeholder{color:#8494aa !important}
.acciones{gap:8px !important}
.acciones .boton-header{
  width:46px !important;height:46px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:rgba(255,255,255,.055) !important;
  color:#f7fbff !important;
  box-shadow:none !important;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.acciones .boton-header:hover{
  transform:translateY(-2px);
  background:rgba(56,189,248,.13) !important;
  border-color:rgba(56,189,248,.42) !important;
}
#contadorCarrito{
  background:var(--nova-premium-blue) !important;
  color:#06233a !important;
  font-weight:800 !important;
  border-radius:999px !important;
  min-width:18px;
  line-height:18px;
}

/* ---------- navegación ---------- */
.navegacion-tienda{
  max-width:1160px !important;
  margin:20px auto 0 !important;
  padding:0 !important;
}
.navegacion-principal{
  display:flex !important;
  justify-content:center;
  gap:10px !important;
  flex-wrap:wrap;
}
.boton-navegacion-tienda{
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:13px !important;
  border:1px solid rgba(148,163,184,.17) !important;
  background:rgba(255,255,255,.045) !important;
  color:#dce7f5 !important;
  font-weight:700 !important;
  transition:.2s ease;
}
.boton-navegacion-tienda:hover{
  background:rgba(56,189,248,.11) !important;
  border-color:rgba(56,189,248,.42) !important;
  color:#fff !important;
  transform:translateY(-1px);
}

/* ---------- filtros ---------- */
.filtros-productos,#filtrosProductos{
  margin:18px 0 0 !important;
  padding:18px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(148,163,184,.14) !important;
  border-radius:18px !important;
  box-shadow:0 12px 35px rgba(0,0,0,.12) !important;
}
.filtro-productos-titulo{
  color:#f6fbff !important;
  font-size:15px;
  margin-bottom:12px;
}
.filtros-productos-grid{gap:10px !important}
.filtros-productos-grid input,.filtros-productos-grid select,
#filtroCategoria,#filtroMarca,#filtroStock,#filtroTipo,#ordenProductos{
  min-height:42px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  border-radius:12px !important;
  background:#111f35 !important;
  color:#e8f0f9 !important;
  padding:0 12px !important;
}
.boton-limpiar-filtros{
  min-height:42px !important;
  border-radius:12px !important;
  background:rgba(56,189,248,.10) !important;
  border:1px solid rgba(56,189,248,.30) !important;
  color:#8fddff !important;
}

/* ---------- banner ---------- */
.banner,#bannerTiendaWeb{
  border-radius:26px !important;
  overflow:hidden !important;
  border:1px solid rgba(148,163,184,.14) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.22) !important;
}
.banner{margin-top:20px !important}

/* ---------- sección destacados ---------- */
.seccion-destacados{
  position:relative;
  max-width:1160px !important;
  margin:30px auto !important;
  padding:26px !important;
  background:
    linear-gradient(180deg,rgba(12,32,67,.96),rgba(8,24,51,.96)) !important;
  border:1px solid rgba(56,189,248,.13) !important;
  border-radius:28px !important;
  box-shadow:var(--nova-premium-shadow) !important;
}
.seccion-destacados:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(56,189,248,.10),transparent 42%);
}
.destacados-cabecera{position:relative;margin-bottom:20px !important}
.destacados-cabecera h2{
  margin:0 !important;
  color:#f8fbff !important;
  font-family:"Montserrat",sans-serif !important;
  font-size:clamp(24px,3vw,32px) !important;
  font-weight:800 !important;
  letter-spacing:-.035em;
}
.destacados-productos{
  position:relative;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}

/* ---------- productos: sistema único de tarjetas ---------- */
#productos{
  max-width:1160px !important;
  margin:30px auto 0 !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}
#productos .producto-card,
#destacadosProductos .producto-card,
.destacados-productos .producto-card,
.destacados-productos .producto{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  padding:12px !important;
  border-radius:20px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:linear-gradient(180deg,var(--nova-premium-card),#18263b) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.16) !important;
  overflow:hidden !important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease !important;
}
#productos .producto-card:hover,
#destacadosProductos .producto-card:hover,
.destacados-productos .producto:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(56,189,248,.42) !important;
  background:linear-gradient(180deg,#1e3049,#1a2a41) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.25),0 0 0 1px rgba(56,189,248,.05) !important;
}

#productos .producto-card .producto-card-imagen,
#destacadosProductos .producto-card .producto-card-imagen{
  height:205px !important;
  min-height:205px !important;
  max-height:205px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.025) !important;
  overflow:hidden !important;
}
#productos .producto-card .producto-card-imagen img,
#destacadosProductos .producto-card .producto-card-imagen img{
  width:100% !important;height:100% !important;
  object-fit:contain !important;
  transition:transform .3s ease !important;
}
#productos .producto-card:hover .producto-card-imagen img,
#destacadosProductos .producto-card:hover .producto-card-imagen img{
  transform:scale(1.035) !important;
}
#productos .producto-card .producto-card-info,
#destacadosProductos .producto-card .producto-card-info{
  padding:13px 4px 4px !important;
}
#productos .producto-card .producto-card-nombre,
#destacadosProductos .producto-card .producto-card-nombre{
  margin:0 0 5px !important;
  min-height:40px;
  font-family:"Montserrat",sans-serif !important;
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:#f6f9fd !important;
}
#productos .producto-card .producto-card-categoria,
#destacadosProductos .producto-card .producto-card-categoria{
  color:#94a5bc !important;
  font-size:13px !important;
  margin:0 0 8px !important;
}
#productos .producto-card .producto-card-precio,
#destacadosProductos .producto-card .producto-card-precio{
  margin:3px 0 8px !important;
}
#productos .producto-card .producto-card-precio strong,
#destacadosProductos .producto-card .producto-card-precio strong,
#productos .producto-card .producto-card-precio-normal,
#destacadosProductos .producto-card .producto-card-precio-normal,
#productos .producto-card .producto-card-precio-oferta,
#destacadosProductos .producto-card .producto-card-precio-oferta{
  color:var(--nova-premium-blue) !important;
  font-family:"Montserrat",sans-serif !important;
  font-size:25px !important;
  font-weight:800 !important;
  letter-spacing:-.035em;
}
#productos .producto-card .producto-card-precio-anterior,
#destacadosProductos .producto-card .producto-card-precio-anterior{
  color:#7e8ea5 !important;
}

/* reseñas y stock */
#productos .producto-card .producto-card-resenas,
#destacadosProductos .producto-card .producto-card-resenas,
#productos .producto-card .sin-resenas-card,
#destacadosProductos .producto-card .sin-resenas-card{
  margin:7px 0 !important;
}
#productos .producto-card .estrellas-producto,
#destacadosProductos .producto-card .estrellas-producto{letter-spacing:1px !important}
#productos .producto-card .promedio-producto,
#productos .producto-card .cantidad-resenas-producto,
#destacadosProductos .producto-card .promedio-producto,
#destacadosProductos .producto-card .cantidad-resenas-producto,
#productos .producto-card .texto-sin-resenas,
#destacadosProductos .producto-card .texto-sin-resenas{color:#94a5bc !important}
#productos .producto-card .estado-stock-producto,
#destacadosProductos .producto-card .estado-stock-producto{
  margin:7px 0 9px !important;
  font-weight:700 !important;
}

/* ---------- botón agregar: acabado de tienda premium ---------- */
#productos .producto-card .boton-agregar-tarjeta,
#destacadosProductos .producto-card .boton-agregar-tarjeta{
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  margin-top:7px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,#38bdf8,#0ea5e9) !important;
  color:#06243a !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(14,165,233,.18) !important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease !important;
}
#productos .producto-card .boton-agregar-tarjeta:hover,
#destacadosProductos .producto-card .boton-agregar-tarjeta:hover{
  filter:brightness(1.08) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 25px rgba(14,165,233,.28) !important;
}
#productos .producto-card .boton-agregar-tarjeta:active,
#destacadosProductos .producto-card .boton-agregar-tarjeta:active{transform:translateY(0) !important}

/* ---------- favorito ---------- */
#productos .producto-card .boton-favorito-producto,
#destacadosProductos .producto-card .boton-favorito-producto{
  top:10px !important;right:10px !important;
  width:40px !important;height:40px !important;
  border-radius:12px !important;
  background:rgba(7,17,34,.62) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#d8e7f6 !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:25px !important;
  transition:.2s ease !important;
}
#productos .producto-card .boton-favorito-producto:hover,
#destacadosProductos .producto-card .boton-favorito-producto:hover{
  background:rgba(56,189,248,.16) !important;
  border-color:rgba(56,189,248,.40) !important;
  transform:scale(1.05) !important;
}
#productos .producto-card .boton-favorito-producto.activo,
#destacadosProductos .producto-card .boton-favorito-producto.activo{
  color:#ff6b91 !important;
  background:rgba(255,107,145,.12) !important;
  border-color:rgba(255,107,145,.25) !important;
}

/* ---------- etiquetas ---------- */
#productos .producto-card .etiquetas-producto,
#destacadosProductos .producto-card .etiquetas-producto{top:10px !important;left:10px !important;right:55px !important;gap:5px !important}
#productos .producto-card .etiqueta-producto,
#destacadosProductos .producto-card .etiqueta-producto{
  padding:5px 8px !important;
  border-radius:8px !important;
  font-size:9px !important;
  font-weight:800 !important;
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}

/* ---------- beneficios ---------- */
.beneficios{
  max-width:1160px !important;
  margin:72px auto 64px !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
}
.beneficio{
  min-height:128px;
  padding:24px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  box-sizing:border-box;
  text-align:left !important;
  background:linear-gradient(180deg,rgba(29,46,70,.82),rgba(21,36,57,.82)) !important;
  border:1px solid rgba(148,163,184,.15) !important;
  border-radius:20px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.13) !important;
  transition:.2s ease;
}
.beneficio:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.28) !important}
.beneficio-icono{
  flex:0 0 54px;
  width:54px;height:54px;
  display:grid !important;place-items:center;
  border-radius:16px !important;
  background:rgba(56,189,248,.10) !important;
  border:1px solid rgba(56,189,248,.18) !important;
  font-size:26px !important;
}
.beneficio-contenido h3{
  margin:0 0 6px !important;
  color:#f7fbff !important;
  font-family:"Montserrat",sans-serif !important;
  font-size:17px !important;
  font-weight:800 !important;
}
.beneficio-contenido p{
  margin:0 !important;
  color:#9caec4 !important;
  font-size:14px !important;
  line-height:1.5 !important;
}

/* ---------- footer ---------- */
footer{
  position:relative;
  margin-top:76px !important;
  padding:70px 24px 32px !important;
  background:linear-gradient(180deg,#17263c,#111e31) !important;
  border-top:1px solid rgba(56,189,248,.32) !important;
  box-shadow:0 -18px 50px rgba(0,0,0,.12) !important;
}
footer:before{
  content:"";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:180px;height:1px;background:var(--nova-premium-blue);
  box-shadow:0 0 25px rgba(56,189,248,.6);
}
#footerNombreTienda{
  margin:0 0 8px !important;
  color:#f8fbff !important;
  font-family:"Montserrat",sans-serif !important;
  font-size:34px !important;
  font-weight:800 !important;
  letter-spacing:-.045em;
}
#footerDescripcion{color:#aebdd0 !important;font-size:17px !important}
.footer-redes{
  max-width:660px !important;
  margin:30px auto 34px !important;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px !important;
}
.footer-red-social{
  min-height:64px !important;
  padding:0 22px !important;
  box-sizing:border-box;
  border-radius:17px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(56,189,248,.28) !important;
  color:#f4f8fc !important;
  transition:.2s ease;
}
.footer-red-social:hover{transform:translateY(-2px);background:rgba(56,189,248,.07) !important;border-color:rgba(56,189,248,.50) !important}
.footer-red-logo{width:34px !important;height:34px !important}
.texto-envios-footer{
  margin:32px 0 18px !important;
  color:#c9d6e5 !important;
  font-size:17px !important;
  font-weight:700 !important;
}
.logos-transportistas-footer{gap:28px !important}
.copyright{margin-top:40px !important;color:#71839b !important;font-size:13px !important}

/* ---------- modales: lenguaje visual consistente ---------- */
.contenido-pago,.contenido-rastreo{
  border:1px solid rgba(148,163,184,.18) !important;
  border-radius:24px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.38) !important;
}

/* ---------- tablet ---------- */
@media (max-width:1050px){
  #productos,.destacados-productos{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .beneficios{grid-template-columns:1fr !important;max-width:760px !important}
}

/* ---------- móvil ---------- */
@media (max-width:700px){
  header{padding:9px 10px !important}
  .header-superior{gap:6px !important;min-height:54px}
  .logo{height:52px !important}
  .logo img,#logoTiendaWeb{height:48px !important;max-width:145px !important}
  #nombreTiendaWeb{font-size:14px !important}
  .navegacion-tienda{margin-top:13px !important}
  .navegacion-principal{gap:7px !important}
  .boton-navegacion-tienda{min-height:40px !important;padding:0 13px !important;font-size:12px !important}
  main{padding:10px 9px !important}
  .banner,#bannerTiendaWeb{border-radius:20px !important}
  .filtros-productos,#filtrosProductos{padding:13px !important;border-radius:16px !important}
  .seccion-destacados{margin:22px 0 !important;padding:16px 12px !important;border-radius:22px !important}
  .destacados-cabecera h2{font-size:23px !important}
  #productos{margin-top:22px !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  .destacados-productos{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding:2px 1px 7px !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .destacados-productos .producto-card,
  .destacados-productos .producto{
    flex:0 0 calc((100vw - 55px)/2) !important;
    width:calc((100vw - 55px)/2) !important;
    scroll-snap-align:start;
  }
  #productos .producto-card,
  #destacadosProductos .producto-card{
    padding:9px !important;
    border-radius:17px !important;
  }
  #productos .producto-card .producto-card-imagen,
  #destacadosProductos .producto-card .producto-card-imagen{
    height:145px !important;min-height:145px !important;max-height:145px !important;
    border-radius:12px !important;
  }
  #productos .producto-card .producto-card-info,
  #destacadosProductos .producto-card .producto-card-info{padding:10px 2px 2px !important}
  #productos .producto-card .producto-card-nombre,
  #destacadosProductos .producto-card .producto-card-nombre{
    font-size:14px !important;min-height:18px !important;line-height:1.25 !important;margin:0 0 2px !important;
  }
  #productos .producto-card .producto-card-categoria,
  #destacadosProductos .producto-card .producto-card-categoria{font-size:11px !important;margin-bottom:5px !important}
  #productos .producto-card .producto-card-precio strong,
  #destacadosProductos .producto-card .producto-card-precio strong,
  #productos .producto-card .producto-card-precio-normal,
  #destacadosProductos .producto-card .producto-card-precio-normal,
  #productos .producto-card .producto-card-precio-oferta,
  #destacadosProductos .producto-card .producto-card-precio-oferta{font-size:19px !important}
  #productos .producto-card .boton-agregar-tarjeta,
  #destacadosProductos .producto-card .boton-agregar-tarjeta{
    height:39px !important;min-height:39px !important;border-radius:13px !important;font-size:10px !important;
  }
  #productos .producto-card .boton-favorito-producto,
  #destacadosProductos .producto-card .boton-favorito-producto{width:34px !important;height:34px !important;top:7px !important;right:7px !important;font-size:22px !important;border-radius:10px !important}
  .beneficios{display:flex !important;flex-direction:column !important;width:100% !important;margin:48px auto 42px !important;gap:10px !important}
  .beneficio{min-height:100px;padding:18px !important;border-radius:17px !important}
  .beneficio-icono{flex-basis:46px;width:46px;height:46px;border-radius:13px !important;font-size:22px !important}
  .beneficio-contenido h3{font-size:15px !important}
  .beneficio-contenido p{font-size:12px !important}
  footer{margin-top:50px !important;padding:48px 15px 25px !important}
  #footerNombreTienda{font-size:30px !important}
  #footerDescripcion{font-size:15px !important}
  .footer-redes{gap:9px !important;margin:24px auto 28px !important}
  .footer-red-social{min-height:56px !important;padding:0 10px !important;font-size:13px !important}
  .footer-red-logo{width:29px !important;height:29px !important}
  .texto-envios-footer{font-size:15px !important}
}

@media (max-width:390px){
  #productos .producto-card .producto-card-imagen,
  #destacadosProductos .producto-card .producto-card-imagen{height:132px !important;min-height:132px !important;max-height:132px !important}
  #productos .producto-card .producto-card-nombre,
  #destacadosProductos .producto-card .producto-card-nombre{font-size:13px !important}
}

/* =====================================================
   PUNTOS NOVA — RESUMEN PRINCIPAL Y DETALLE PROFESIONAL
   Ajuste visual únicamente de Puntos Nova.
   No modifica header, footer, checkout ni otras secciones.
===================================================== */

#cuentaNovaLogueado #resumenPuntosNovaCuenta {
    display: none !important;
}

#cuentaNovaLogueado .tarjeta-puntos-nova {
    position: relative;
    overflow: hidden;
    margin: 0 0 24px;
    padding: 24px 25px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0872ee 0%, #064db9 100%);
    color: #fff;
    box-shadow: 0 14px 34px rgba(0, 102, 255, .18);
    box-sizing: border-box;
}

#cuentaNovaLogueado .tarjeta-puntos-nova::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -90px;
    top: -95px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}

#cuentaNovaLogueado .puntos-nova-cabecera,
#cuentaNovaLogueado .puntos-nova-resumen,
#cuentaNovaLogueado .puntos-nova-regla {
    position: relative;
    z-index: 1;
}

#cuentaNovaLogueado .puntos-nova-cabecera {
    display: flex;
    align-items: center;
    gap: 13px;
}

#cuentaNovaLogueado .puntos-nova-icono {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 23px;
}

#cuentaNovaLogueado .puntos-nova-titulo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#cuentaNovaLogueado .puntos-nova-titulo strong {
    display: block;
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
}

#cuentaNovaLogueado .puntos-nova-titulo span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255,255,255,.82);
}

#cuentaNovaLogueado .puntos-nova-resumen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 27px;
}

#cuentaNovaLogueado .puntos-nova-saldo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#cuentaNovaLogueado .puntos-nova-saldo strong {
    display: block;
    margin: 0;
    font-size: 46px;
    line-height: 1;
    font-weight: 800;
    color: #fff;
}

#cuentaNovaLogueado .puntos-nova-saldo span {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,.84);
}

#cuentaNovaLogueado .puntos-nova-valor {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0 0 0 22px;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.24);
}

#cuentaNovaLogueado .puntos-nova-valor span {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.76);
}

#cuentaNovaLogueado .puntos-nova-valor strong {
    display: block;
    margin: 3px 0 0;
    font-size: 23px;
    line-height: 1.1;
    color: #fff;
}

#cuentaNovaLogueado .puntos-nova-regla {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px -25px -24px;
    padding: 14px 25px;
    border-top: 1px solid rgba(255,255,255,.13);
    background: rgba(0,0,0,.10);
    color: rgba(255,255,255,.94);
    font-size: 12px;
    line-height: 1.4;
}

#cuentaNovaLogueado .puntos-nova-regla-icono {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

#cuentaNovaLogueado .puntos-nova-flecha {
    margin-left: auto;
    font-size: 23px;
    line-height: 1;
}

#cuentaNovaLogueado .puntos-cuenta-detalle {
    width: 100%;
}

#cuentaNovaLogueado .puntos-detalle-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

#cuentaNovaLogueado .puntos-detalle-cabecera h3 {
    margin: 0 0 5px;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
}

#cuentaNovaLogueado .puntos-detalle-cabecera p {
    max-width: 520px;
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

#cuentaNovaLogueado .puntos-detalle-saldo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

#cuentaNovaLogueado .puntos-detalle-saldo strong {
    color: #0066ff;
    font-size: 23px;
    line-height: 1;
}

#cuentaNovaLogueado .puntos-detalle-saldo span {
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
}

#cuentaNovaLogueado .puntos-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #eff6ff;
}

#cuentaNovaLogueado .puntos-info-icono {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dbeafe;
    color: #0066ff;
    font-size: 13px;
    font-weight: 800;
}

#cuentaNovaLogueado .puntos-info-card strong {
    display: block;
    color: #163b78;
    font-size: 13px;
    line-height: 1.5;
}

#cuentaNovaLogueado .puntos-info-card p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

#cuentaNovaLogueado .puntos-canjear-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    text-align: left;
    box-shadow: 0 5px 18px rgba(15,23,42,.04);
    box-sizing: border-box;
}

#cuentaNovaLogueado .puntos-canjear-icono {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #0066ff;
    font-size: 23px;
    font-weight: 400;
}

#cuentaNovaLogueado .puntos-canjear-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#cuentaNovaLogueado .puntos-canjear-texto strong {
    display: block;
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}

#cuentaNovaLogueado .puntos-canjear-texto small {
    display: block;
    color: #64748b;
    font-size: 11px;
    line-height: 1.4;
}

#cuentaNovaLogueado .puntos-canjear-flecha {
    margin-left: auto;
    color: #0066ff;
    font-size: 24px;
    line-height: 1;
}

#cuentaNovaLogueado .historial-puntos-cabecera {
    margin: 0 0 11px;
}

#cuentaNovaLogueado .historial-puntos-cabecera h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
}

#cuentaNovaLogueado .tabla-puntos-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
}

#cuentaNovaLogueado .tabla-puntos-scroll table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: #fff;
}

#cuentaNovaLogueado .tabla-puntos-scroll th {
    padding: 11px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

#cuentaNovaLogueado .tabla-puntos-scroll td {
    padding: 12px 10px;
    border-bottom: 1px solid #eef2f7;
    color: #334155;
    font-size: 11px;
    white-space: nowrap;
}

#cuentaNovaLogueado .tabla-puntos-scroll tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 600px) {
    #cuentaNovaLogueado .tarjeta-puntos-nova {
        padding: 21px;
        border-radius: 19px;
    }

    #cuentaNovaLogueado .puntos-nova-resumen {
        gap: 12px;
        margin-top: 24px;
    }

    #cuentaNovaLogueado .puntos-nova-saldo strong {
        font-size: 40px;
    }

    #cuentaNovaLogueado .puntos-nova-valor {
        padding-left: 17px;
    }

    #cuentaNovaLogueado .puntos-nova-valor strong {
        font-size: 20px;
    }

    #cuentaNovaLogueado .puntos-nova-regla {
        margin-left: -21px;
        margin-right: -21px;
        margin-bottom: -21px;
        padding-left: 21px;
        padding-right: 21px;
    }
}

@media (max-width: 430px) {
    #cuentaNovaLogueado .puntos-nova-cabecera {
        gap: 11px;
    }

    #cuentaNovaLogueado .puntos-nova-icono {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    #cuentaNovaLogueado .puntos-nova-titulo strong {
        font-size: 18px;
    }

    #cuentaNovaLogueado .puntos-nova-titulo span {
        font-size: 11px;
    }

    #cuentaNovaLogueado .puntos-nova-resumen {
        grid-template-columns: 1fr;
    }

    #cuentaNovaLogueado .puntos-nova-valor {
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.22);
    }

    #cuentaNovaLogueado .puntos-detalle-cabecera {
        align-items: flex-start;
    }

    #cuentaNovaLogueado .puntos-detalle-saldo {
        align-items: flex-end;
    }
}


/* =========================================================
   NOVA STORE — CUENTA CLIENTE / DISEÑO PREMIUM FINAL
   - Cuenta más limpia y jerárquica
   - Una sola tarjeta principal de Puntos Nova
   - La sección de Puntos Nova usa un resumen compacto
   - Mejor lectura y adaptación móvil
   ========================================================= */

#modalCuentaNova .contenido-cuenta-nova{
    width:min(560px, calc(100vw - 28px));
    max-height:min(92vh, 900px);
    padding:32px;
    border:1px solid #e7ebf2;
    border-radius:24px;
    background:#fff;
    box-shadow:0 28px 80px rgba(15,23,42,.22);
    text-align:left;
}

#modalCuentaNova .cerrar-cuenta-nova{
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border-radius:12px;
    color:#64748b;
    background:#f8fafc;
    font-size:25px;
    line-height:38px;
}

#modalCuentaNova .cerrar-cuenta-nova:hover{
    background:#eef2f7;
    color:#0f172a;
}

#cuentaNovaLogueado{
    max-width:none;
    padding:4px 0 20px;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente{
    margin:0 42px 22px 0;
    padding:0;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente h2{
    margin:0 0 5px;
    color:#0f172a;
    font-size:30px;
    font-weight:800;
    letter-spacing:-.6px;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente p{
    margin:0;
    color:#64748b;
    font-size:14px;
}

#cuentaNovaLogueado .tarjeta-puntos-nova{
    margin:0 0 20px;
    padding:22px 24px 0;
    border-radius:20px;
    background:linear-gradient(135deg,#0b72f3 0%,#0755c7 100%);
    box-shadow:0 16px 34px rgba(0,91,214,.20);
}

#cuentaNovaLogueado .puntos-nova-cabecera{
    gap:12px;
}

#cuentaNovaLogueado .puntos-nova-icono{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:12px;
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.16);
    font-size:18px;
    font-weight:800;
}

#cuentaNovaLogueado .puntos-nova-titulo strong{
    font-size:18px;
    letter-spacing:-.2px;
}

#cuentaNovaLogueado .puntos-nova-titulo span{
    font-size:11px;
}

#cuentaNovaLogueado .puntos-nova-resumen{
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-top:22px;
}

#cuentaNovaLogueado .puntos-nova-saldo{
    padding:0 18px 20px 0;
}

#cuentaNovaLogueado .puntos-nova-saldo strong{
    font-size:42px;
    letter-spacing:-1px;
}

#cuentaNovaLogueado .puntos-nova-saldo span{
    font-size:12px;
}

#cuentaNovaLogueado .puntos-nova-valor{
    margin:0 0 20px;
    padding:3px 0 0 18px;
    justify-content:flex-start;
    border-left:1px solid rgba(255,255,255,.22);
}

#cuentaNovaLogueado .puntos-nova-valor span{
    font-size:11px;
}

#cuentaNovaLogueado .puntos-nova-valor strong{
    font-size:21px;
    margin-top:4px;
}

#cuentaNovaLogueado .puntos-nova-regla{
    margin:0 -24px;
    padding:12px 24px;
    min-height:43px;
    box-sizing:border-box;
    background:rgba(0,0,0,.10);
    font-size:11px;
}

#cuentaNovaLogueado .puntos-nova-flecha{
    font-size:20px;
}

#cuentaNovaLogueado .grid-cuenta-cliente{
    grid-template-columns:1fr 1fr;
    gap:10px;
}

#cuentaNovaLogueado .opcion-cuenta-cliente{
    min-height:78px;
    padding:16px 40px 15px 48px;
    border:1px solid #e5eaf1;
    border-radius:15px;
    background:#fff;
    box-shadow:0 3px 12px rgba(15,23,42,.035);
}

#cuentaNovaLogueado .opcion-cuenta-cliente::before{
    content:"";
    position:absolute;
    left:16px;
    top:50%;
    width:24px;
    height:24px;
    transform:translateY(-50%);
    border-radius:8px;
    background:#eff6ff;
    box-shadow:inset 0 0 0 1px #dbeafe;
}

#cuentaNovaLogueado .opcion-cuenta-cliente::after{
    right:14px;
    color:#a0aec0;
    font-size:23px;
}

#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="puntos"]::before{content:"★"; color:#0066ff; text-align:center; line-height:24px; font-size:12px;}
#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="pedidos"]::before{content:"✓"; color:#0066ff; text-align:center; line-height:24px; font-size:12px; font-weight:800;}
#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="estado"]::before{content:"↗"; color:#0066ff; text-align:center; line-height:24px; font-size:12px; font-weight:800;}
#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="favoritos"]::before{content:"♡"; color:#0066ff; text-align:center; line-height:24px; font-size:15px;}
#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="datos"]::before{content:"•"; color:#0066ff; text-align:center; line-height:20px; font-size:20px;}
#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="direcciones"]::before{content:"⌖"; color:#0066ff; text-align:center; line-height:24px; font-size:14px;}
#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="contacto"]::before{content:"@"; color:#0066ff; text-align:center; line-height:24px; font-size:11px; font-weight:800;}
#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="cupones"]::before{content:"%"; color:#0066ff; text-align:center; line-height:24px; font-size:12px; font-weight:800;}
#cuentaNovaLogueado .opcion-cuenta-cliente[data-cuenta-seccion="historial"]::before{content:"↺"; color:#0066ff; text-align:center; line-height:24px; font-size:14px;}

#cuentaNovaLogueado .opcion-cuenta-cliente strong{
    margin:0 0 4px;
    font-size:13px;
    letter-spacing:-.1px;
}

#cuentaNovaLogueado .opcion-cuenta-cliente span{
    font-size:11px;
}

#cuentaNovaLogueado .contenido-cuenta-cliente{
    margin-top:18px;
    padding:20px;
    border:1px solid #e5eaf1;
    border-radius:18px;
    background:#f8fafc;
    box-shadow:none;
}

#cuentaNovaLogueado #botonCerrarSesionNova{
    display:block;
    margin:18px auto 0;
    max-width:190px;
    padding:11px 16px;
    border-radius:11px;
    font-size:13px;
}

/* Sección Puntos Nova: resumen compacto, no otra tarjeta azul */
#cuentaNovaLogueado .puntos-cuenta-detalle{
    width:100%;
}

#cuentaNovaLogueado .puntos-detalle-cabecera{
    align-items:center;
    gap:14px;
    margin:0 0 18px;
    padding-bottom:16px;
    border-bottom:1px solid #e8edf3;
}

#cuentaNovaLogueado .puntos-detalle-identidad{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

#cuentaNovaLogueado .puntos-detalle-icono{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:11px;
    background:#eff6ff;
    color:#0066ff;
    font-size:15px;
    font-weight:800;
    box-shadow:inset 0 0 0 1px #dbeafe;
}

#cuentaNovaLogueado .puntos-detalle-cabecera h3{
    margin:0 0 2px;
    font-size:18px;
    letter-spacing:-.25px;
}

#cuentaNovaLogueado .puntos-detalle-cabecera p{
    margin:0;
    color:#7b8798;
    font-size:11px;
}

#cuentaNovaLogueado .puntos-detalle-saldo{
    margin-left:auto;
    align-items:flex-end;
    padding:8px 11px;
    border-radius:11px;
    background:#f1f6ff;
}

#cuentaNovaLogueado .puntos-detalle-saldo strong{
    color:#075dcc;
    font-size:19px;
}

#cuentaNovaLogueado .puntos-detalle-saldo span{
    color:#6b7a90;
    font-size:10px;
}

#cuentaNovaLogueado .puntos-info-card{
    margin-bottom:12px;
    padding:13px;
    gap:10px;
    border:1px solid #dbeafe;
    border-radius:13px;
    background:#f6faff;
}

#cuentaNovaLogueado .puntos-info-icono{
    width:29px;
    height:29px;
    flex-basis:29px;
    background:#e7f0ff;
    color:#075dcc;
    font-size:11px;
}

#cuentaNovaLogueado .puntos-info-card strong{
    font-size:12px;
    line-height:1.4;
}

#cuentaNovaLogueado .puntos-info-card p{
    margin:3px 0 0;
    font-size:10.5px;
    line-height:1.45;
}

#cuentaNovaLogueado .puntos-canjear-card{
    margin:0 0 20px;
    padding:13px;
    border:1px solid #e5eaf1;
    border-radius:13px;
    background:#fff;
    box-shadow:0 3px 12px rgba(15,23,42,.035);
}

#cuentaNovaLogueado .puntos-canjear-icono{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:10px;
    background:#f1f6ff;
    color:#0066ff;
    font-size:16px;
}

#cuentaNovaLogueado .puntos-canjear-texto strong{
    font-size:12px;
}

#cuentaNovaLogueado .puntos-canjear-texto small{
    font-size:10px;
}

#cuentaNovaLogueado .puntos-canjear-flecha{
    font-size:21px;
}

#cuentaNovaLogueado .historial-puntos-cabecera{
    margin:0 0 9px;
}

#cuentaNovaLogueado .historial-puntos-cabecera h3{
    font-size:15px;
}

#cuentaNovaLogueado .historial-puntos-cabecera p{
    margin:3px 0 0;
    color:#7b8798;
    font-size:10.5px;
}

#cuentaNovaLogueado .tabla-puntos-scroll{
    border-radius:12px;
    background:#fff;
}

#cuentaNovaLogueado .tabla-puntos-scroll th{
    padding:10px;
    background:#f7f9fc;
    color:#536176;
    font-size:10px;
}

#cuentaNovaLogueado .tabla-puntos-scroll td{
    padding:10px;
    font-size:10px;
}

@media (max-width:600px){
    #modalCuentaNova{
        padding:10px;
    }

    #modalCuentaNova .contenido-cuenta-nova{
        width:100%;
        max-height:94vh;
        padding:27px 17px 20px;
        border-radius:22px;
    }

    #cuentaNovaLogueado .cabecera-cuenta-cliente{
        margin-right:34px;
        margin-bottom:18px;
    }

    #cuentaNovaLogueado .cabecera-cuenta-cliente h2{
        font-size:25px;
        letter-spacing:-.4px;
    }

    #cuentaNovaLogueado .cabecera-cuenta-cliente p{
        font-size:12px;
    }

    #cuentaNovaLogueado .tarjeta-puntos-nova{
        padding:19px 19px 0;
        border-radius:18px;
    }

    #cuentaNovaLogueado .puntos-nova-resumen{
        grid-template-columns:1fr 1fr;
    }

    #cuentaNovaLogueado .puntos-nova-saldo{
        padding-right:13px;
    }

    #cuentaNovaLogueado .puntos-nova-saldo strong{
        font-size:37px;
    }

    #cuentaNovaLogueado .puntos-nova-valor{
        margin-bottom:18px;
        padding-left:13px;
    }

    #cuentaNovaLogueado .puntos-nova-valor strong{
        font-size:19px;
    }

    #cuentaNovaLogueado .puntos-nova-regla{
        margin-left:-19px;
        margin-right:-19px;
        padding-left:19px;
        padding-right:19px;
        font-size:10.5px;
    }

    #cuentaNovaLogueado .grid-cuenta-cliente{
        grid-template-columns:1fr;
        gap:9px;
    }

    #cuentaNovaLogueado .opcion-cuenta-cliente{
        min-height:70px;
        padding:14px 38px 13px 48px;
    }

    #cuentaNovaLogueado .contenido-cuenta-cliente{
        padding:16px 13px;
    }

    #cuentaNovaLogueado .puntos-detalle-cabecera{
        align-items:flex-start;
    }

    #cuentaNovaLogueado .puntos-detalle-saldo{
        flex:0 0 auto;
    }

    #cuentaNovaLogueado .puntos-detalle-cabecera p{
        max-width:155px;
    }
}

@media (max-width:380px){
    #modalCuentaNova .contenido-cuenta-nova{
        padding-left:14px;
        padding-right:14px;
    }

    #cuentaNovaLogueado .puntos-detalle-cabecera{
        gap:8px;
    }

    #cuentaNovaLogueado .puntos-detalle-saldo{
        padding:6px 8px;
    }

    #cuentaNovaLogueado .puntos-detalle-saldo strong{
        font-size:17px;
    }
}

/* =========================================================
   NOVA STORE — CUENTA CLIENTE / REDISEÑO PREMIUM FINAL
   Diseño independiente del resto de la tienda.
========================================================= */

#modalCuentaNova {
    background: rgba(8, 15, 30, .72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px !important;
}

#modalCuentaNova .contenido-cuenta-nova {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    max-height: min(92vh, 900px) !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 28px !important;
    background: #f7f9fc !important;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .30) !important;
    text-align: left !important;
}

#modalCuentaNova .cerrar-cuenta-nova {
    z-index: 20;
    top: 18px !important;
    right: 18px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.90) !important;
    color: #475569 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    box-shadow: 0 5px 18px rgba(15,23,42,.10);
}

#modalCuentaNova .cerrar-cuenta-nova:hover {
    background: #fff !important;
    color: #0f172a !important;
}

#cuentaNovaLogueado {
    padding: 38px !important;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente {
    margin: 0 46px 28px 0 !important;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente h2 {
    margin: 0 0 7px !important;
    color: #0b1220 !important;
    font-size: clamp(28px, 4vw, 38px) !important;
    letter-spacing: -.035em;
    font-weight: 850 !important;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente h2 span {
    color: #1265e8;
}

#cuentaNovaLogueado .cabecera-cuenta-cliente p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
}

#cuentaDashboardNova {
    display: block;
}

.cuenta-puntos-hero-nova {
    position: relative;
    overflow: hidden;
    margin: 0 0 30px;
    padding: 27px 28px 0;
    border-radius: 24px;
    background: linear-gradient(145deg, #0a6cff 0%, #0647bd 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 91, 220, .22);
}

.cuenta-puntos-hero-nova::before,
.cuenta-puntos-hero-nova::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    pointer-events: none;
}

.cuenta-puntos-hero-nova::before {
    width: 300px;
    height: 300px;
    right: -135px;
    top: -180px;
}

.cuenta-puntos-hero-nova::after {
    width: 170px;
    height: 170px;
    left: -100px;
    bottom: -125px;
}

.cuenta-puntos-hero-top,
.cuenta-puntos-main,
.cuenta-puntos-footer {
    position: relative;
    z-index: 1;
}

.cuenta-puntos-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.cuenta-puntos-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cuenta-puntos-brand-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    background: rgba(255,255,255,.13);
    font-size: 21px;
    font-weight: 850;
}

.cuenta-puntos-brand div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cuenta-puntos-eyebrow,
.cuenta-seccion-eyebrow,
.detalle-kicker-nova {
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .13em;
    font-weight: 800;
}

.cuenta-puntos-eyebrow {
    color: rgba(255,255,255,.68);
}

.cuenta-puntos-brand strong {
    font-size: 17px;
    font-weight: 800;
}

.cuenta-puntos-status {
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.cuenta-puntos-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    padding: 30px 0 27px;
}

.cuenta-puntos-label,
.cuenta-puntos-value span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: 11px;
}

.cuenta-puntos-number {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 3px;
}

.cuenta-puntos-number strong {
    color: #fff !important;
    font-size: clamp(52px, 9vw, 72px) !important;
    line-height: .95 !important;
    letter-spacing: -.055em;
    font-weight: 850 !important;
}

.cuenta-puntos-number small {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 600;
}

.cuenta-puntos-main p {
    max-width: 390px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    line-height: 1.5;
}

.cuenta-puntos-value {
    min-width: 135px;
    padding-left: 25px;
    border-left: 1px solid rgba(255,255,255,.20);
}

.cuenta-puntos-value strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
}

.cuenta-puntos-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 -28px;
    padding: 15px 28px;
    border-top: 1px solid rgba(255,255,255,.13);
    background: rgba(0, 26, 86, .18);
}

.cuenta-puntos-footer > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cuenta-puntos-footer b {
    color: #fff;
    font-size: 10px;
}

.cuenta-puntos-footer em {
    overflow: hidden;
    color: rgba(255,255,255,.70);
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuenta-puntos-action {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.cuenta-puntos-action span {
    margin-left: 5px;
    font-size: 16px;
    transition: transform .18s ease;
}

.cuenta-puntos-action:hover span {
    display: inline-block;
    transform: translateX(3px);
}

.cuenta-seccion-titulo {
    display: flex;
    align-items: end;
    gap: 18px;
    margin: 0 0 14px;
}

.cuenta-seccion-eyebrow,
.detalle-kicker-nova {
    color: #7b8798;
}

.cuenta-seccion-titulo h3 {
    margin: 4px 0 0;
    color: #111827;
    font-size: 19px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -.02em;
}

.cuenta-seccion-linea {
    flex: 1;
    height: 1px;
    margin-bottom: 5px;
    background: #e5eaf1;
}

#cuentaNovaLogueado .grid-cuenta-cliente {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    margin: 0 !important;
}

#cuentaNovaLogueado .opcion-cuenta-cliente {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    width: 100%;
    padding: 13px 14px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #0f172a !important;
    text-align: left !important;
    box-shadow: 0 3px 12px rgba(15,23,42,.025) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#cuentaNovaLogueado .opcion-cuenta-cliente:hover {
    transform: translateY(-2px);
    border-color: #b8d2f8 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.07) !important;
}

.cuenta-opcion-icono {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid #dbe8fb;
    border-radius: 11px;
    background: #f2f7ff;
    color: #0a67ed;
    font-size: 17px;
    font-weight: 700;
}

.cuenta-opcion-texto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#cuentaNovaLogueado .cuenta-opcion-texto strong {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

#cuentaNovaLogueado .cuenta-opcion-texto small {
    overflow: hidden;
    color: #7a8798;
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuenta-opcion-flecha {
    margin-left: auto;
    color: #a3afbf;
    font-size: 16px;
    transition: color .18s ease, transform .18s ease;
}

.opcion-cuenta-cliente:hover .cuenta-opcion-flecha {
    color: #0a67ed;
    transform: translateX(2px);
}

#cuentaNovaLogueado #contenidoCuentaCliente {
    display: none;
    margin-top: 0 !important;
    padding: 0 !important;
}

#cuentaNovaLogueado #botonCerrarSesionNova {
    margin: 28px 0 0 !important;
    width: 100% !important;
    min-height: 45px;
    border: 1px solid #e4e8ee !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #7b8798 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

#cuentaNovaLogueado #botonCerrarSesionNova:hover {
    border-color: #f0b8b8 !important;
    background: #fff7f7 !important;
    color: #c24141 !important;
}

/* ---------- vistas internas ---------- */
.cuenta-volver-nova {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.cuenta-volver-nova:hover {
    color: #1265e8;
}

.cuenta-cargando-nova {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    color: #64748b;
    font-size: 12px;
}

.cuenta-spinner-nova {
    width: 16px;
    height: 16px;
    border: 2px solid #dbe7f8;
    border-top-color: #1265e8;
    border-radius: 50%;
    animation: novaCuentaSpin .7s linear infinite;
}

@keyframes novaCuentaSpin { to { transform: rotate(360deg); } }

.puntos-cuenta-detalle-nova {
    padding-bottom: 8px;
}

.puntos-detalle-heading-nova {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 23px;
    border: 1px solid #e4eaf2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(15,23,42,.035);
}

.puntos-detalle-heading-nova h3 {
    margin: 6px 0 5px;
    color: #101827;
    font-size: 24px;
    letter-spacing: -.025em;
    font-weight: 850;
}

.puntos-detalle-heading-nova p {
    margin: 0;
    color: #718096;
    font-size: 11px;
}

.puntos-detalle-balance-nova {
    min-width: 145px;
    padding-left: 22px;
    border-left: 1px solid #e7ebf0;
    text-align: right;
}

.puntos-detalle-balance-nova span,
.puntos-detalle-balance-nova small {
    display: block;
    color: #7a8798;
    font-size: 10px;
}

.puntos-detalle-balance-nova strong {
    display: block;
    margin: 4px 0 2px;
    color: #0a67ed;
    font-size: 28px;
    line-height: 1;
    font-weight: 850;
}

.puntos-detalle-grid-nova {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.puntos-info-card-nova {
    display: flex;
    gap: 11px;
    padding: 16px;
    border: 1px solid #e5eaf1;
    border-radius: 16px;
    background: #fff;
}

.puntos-info-icono-nova {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eef5ff;
    color: #0a67ed;
    font-size: 14px;
    font-weight: 850;
}

.puntos-info-card-nova strong {
    display: block;
    color: #172033;
    font-size: 11px;
    font-weight: 800;
}

.puntos-info-card-nova p {
    margin: 5px 0 0;
    color: #7a8798;
    font-size: 10px;
    line-height: 1.45;
}

.puntos-canjear-card-nova {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 25px;
    padding: 17px;
    border: 1px solid #dce9fb;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7faff, #eef5ff);
}

.puntos-canjear-icono-nova {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: #0a67ed;
    box-shadow: 0 4px 12px rgba(10,103,237,.08);
    font-size: 19px;
}

.puntos-canjear-card-nova strong,
.puntos-canjear-card-nova small {
    display: block;
}

.puntos-canjear-card-nova strong {
    margin-top: 5px;
    color: #182238;
    font-size: 11px;
    line-height: 1.35;
}

.puntos-canjear-card-nova small {
    margin-top: 3px;
    color: #748196;
    font-size: 10px;
    line-height: 1.4;
}

.historial-puntos-nova {
    padding: 20px;
    border: 1px solid #e4eaf2;
    border-radius: 20px;
    background: #fff;
}

.historial-puntos-cabecera-nova {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.historial-puntos-cabecera-nova h3 {
    margin: 5px 0 3px;
    color: #172033;
    font-size: 17px;
    font-weight: 850;
}

.historial-puntos-cabecera-nova p {
    margin: 0;
    color: #7a8798;
    font-size: 10px;
}

.historial-count-nova {
    padding: 6px 9px;
    border: 1px solid #e6ebf2;
    border-radius: 999px;
    color: #718096;
    background: #f8fafc;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.tabla-puntos-scroll-nova {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e7ebf0;
    border-radius: 13px;
}

.tabla-puntos-scroll-nova table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background: #fff;
}

.tabla-puntos-scroll-nova th {
    padding: 10px 11px;
    border-bottom: 1px solid #e7ebf0;
    background: #f8fafc;
    color: #7a8798;
    font-size: 9px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tabla-puntos-scroll-nova td {
    padding: 12px 11px;
    border-bottom: 1px solid #eef2f6;
    color: #344054;
    font-size: 10px;
    white-space: nowrap;
}

.tabla-puntos-scroll-nova tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 650px) {
    #cuentaNovaLogueado {
        padding: 25px 18px !important;
    }

    #cuentaNovaLogueado .cabecera-cuenta-cliente {
        margin-right: 35px !important;
        margin-bottom: 20px !important;
    }

    .cuenta-puntos-hero-nova {
        padding: 21px 19px 0;
        border-radius: 20px;
    }

    .cuenta-puntos-main {
        grid-template-columns: 1fr;
        gap: 17px;
        padding: 25px 0 21px;
    }

    .cuenta-puntos-value {
        min-width: 0;
        padding: 13px 0 0;
        border-top: 1px solid rgba(255,255,255,.18);
        border-left: 0;
    }

    .cuenta-puntos-footer {
        align-items: flex-end;
        margin: 0 -19px;
        padding: 14px 19px;
    }

    #cuentaNovaLogueado .grid-cuenta-cliente,
    .puntos-detalle-grid-nova {
        grid-template-columns: 1fr !important;
    }

    .puntos-detalle-heading-nova {
        flex-direction: column;
        padding: 19px;
    }

    .puntos-detalle-balance-nova {
        width: 100%;
        min-width: 0;
        padding: 14px 0 0;
        border-top: 1px solid #e7ebf0;
        border-left: 0;
        text-align: left;
    }

    .historial-puntos-nova {
        padding: 15px;
    }
}

@media (max-width: 390px) {
    #modalCuentaNova .contenido-cuenta-nova {
        border-radius: 22px !important;
    }

    #cuentaNovaLogueado {
        padding: 22px 14px !important;
    }

    .cuenta-puntos-hero-nova {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cuenta-puntos-footer {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .cuenta-puntos-action {
        font-size: 10px;
    }
}



/* =========================================================
   NOVA STORE — CUENTA: ICONOS ÚNICOS
========================================================= */
#cuentaNovaLogueado .opcion-cuenta-cliente::before {
    content: none !important;
    display: none !important;
}
#cuentaNovaLogueado .opcion-cuenta-cliente .cuenta-opcion-icono {
    position: relative; z-index: 1; display: grid !important; place-items: center !important;
    flex: 0 0 38px !important; width: 38px !important; height: 38px !important; margin: 0 !important;
    border: 1px solid #dbe8fb !important; border-radius: 11px !important; background: #f2f7ff !important;
    color: #0a67ed !important; font-size: 17px !important; line-height: 1 !important; font-weight: 700 !important;
    box-sizing: border-box !important;
}
#cuentaNovaLogueado .opcion-cuenta-cliente .cuenta-opcion-texto { min-width: 0 !important; flex: 1 1 auto !important; }
#cuentaNovaLogueado .opcion-cuenta-cliente .cuenta-opcion-flecha { flex: 0 0 auto !important; }

/* =========================================================
   RECUPERACIÓN DE CONTRASEÑA DEL CLIENTE
========================================================= */
#modalLoginNova .enlace-recuperacion-nova {
    display: block; width: auto; margin: 14px auto 0; padding: 4px 6px; border: 0; background: transparent;
    color: #1265e8; font-size: 12px; font-weight: 700; cursor: pointer;
}
#modalLoginNova .enlace-recuperacion-nova:hover { color: #0755c7; text-decoration: underline; }
#modalLoginNova .form-recuperacion-password-nova[hidden] { display: none !important; }
#modalLoginNova .form-recuperacion-password-nova { margin-top: 4px; }
#modalLoginNova .recuperacion-password-cabecera {
    margin: 0 0 16px; padding: 14px 15px; border: 1px solid #e4ebf5; border-radius: 14px;
    background: #f7faff; text-align: left;
}
#modalLoginNova .recuperacion-password-cabecera strong { display: block; margin-bottom: 5px; color: #101827; font-size: 15px; }
#modalLoginNova .recuperacion-password-cabecera p { margin: 0; color: #718096; font-size: 11px; line-height: 1.5; }
#modalLoginNova .boton-secundario-recuperacion-nova {
    width: 100%; margin-top: 9px; padding: 11px 14px; border: 1px solid #dfe5ee; border-radius: 11px;
    background: #fff; color: #64748b; font-size: 12px; font-weight: 700; cursor: pointer;
}
#modalLoginNova .boton-secundario-recuperacion-nova:hover { background: #f8fafc; color: #0f172a; }
#modalLoginNova .mensaje-recuperacion-password-nova {
    min-height: 0; margin: 11px 2px 0; color: #64748b; font-size: 11px; line-height: 1.45; text-align: left;
}
#modalLoginNova .mensaje-recuperacion-password-nova.exito { color: #166534; }
#modalLoginNova .mensaje-recuperacion-password-nova.error { color: #b91c1c; }
#modalLoginNova button:disabled { opacity: .65; cursor: wait; }



/* =========================================================
   NOVA STORE — CUENTA CLIENTE: ICONO ÚNICO + RECUPERACIÓN
   ========================================================= */
#cuentaNovaLogueado .opcion-cuenta-cliente::before,
#cuentaNovaLogueado .opcion-cuenta-cliente::after {
    content: none !important;
    display: none !important;
}

#cuentaNovaLogueado .opcion-cuenta-cliente .cuenta-opcion-icono {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #dbe8fb !important;
    border-radius: 11px !important;
    background: #f2f7ff !important;
    color: #0a67ed !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}

#modalLoginNova .enlace-recuperacion-nova {
    display: block !important;
    width: auto !important;
    margin: 18px auto 0 !important;
    padding: 5px 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #1265e8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

#modalLoginNova .enlace-recuperacion-nova:hover {
    color: #0755c7 !important;
    text-decoration: underline;
}

#modalLoginNova .form-recuperacion-password-nova[hidden] { display: none !important; }
#modalLoginNova .form-recuperacion-password-nova { margin-top: 6px !important; }
#modalLoginNova .form-recuperacion-password-nova > [hidden] { display: none !important; }
#modalLoginNova .form-recuperacion-password-nova input { margin-bottom: 11px !important; }
#modalLoginNova .recuperacion-password-cabecera {
    margin: 0 0 16px !important;
    padding: 14px 15px !important;
    border: 1px solid #e4ebf5 !important;
    border-radius: 14px !important;
    background: #f7faff !important;
    text-align: left !important;
}
#modalLoginNova .recuperacion-password-cabecera strong { display:block; margin-bottom:5px; color:#101827; font-size:15px; }
#modalLoginNova .recuperacion-password-cabecera p { margin:0; color:#718096; font-size:11px; line-height:1.5; }
#modalLoginNova .boton-secundario-recuperacion-nova {
    width:100% !important; margin-top:10px !important; padding:11px 14px !important;
    border:1px solid #dfe5ee !important; border-radius:11px !important;
    background:#fff !important; color:#64748b !important; font-size:12px !important; font-weight:700 !important; cursor:pointer;
}
#modalLoginNova .mensaje-recuperacion-password-nova {
    min-height:0; margin:11px 2px 0; color:#64748b; font-size:11px; line-height:1.45; text-align:left;
}
#modalLoginNova .mensaje-recuperacion-password-nova.exito { color:#166534; }
#modalLoginNova .mensaje-recuperacion-password-nova.error { color:#b91c1c; }
#modalLoginNova button:disabled { opacity:.65; cursor:wait; }

/* PUNTOS NOVA — TRAMOS PROGRESIVOS EN CUENTA */
.reglas-puntos-nova-publicas{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.reglas-puntos-nova-publicas .regla-punto-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.055);border-radius:999px;color:#e5eefc;font-size:12px;font-weight:700}
.reglas-puntos-nova-publicas .regla-punto-chip b{color:#f6c453}
.puntos-progresivos-cuenta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.puntos-progresivos-cuenta .puntos-progresivo-item{border:1px solid #e2e8f0;border-radius:14px;padding:14px;background:#fff}
.puntos-progresivo-item small{display:block;color:#64748b;font-size:11px;margin-bottom:6px}
.puntos-progresivo-item strong{display:block;color:#0f172a;font-size:17px}
.puntos-progresivo-item span{display:block;color:#2563eb;font-size:12px;font-weight:700;margin-top:4px}
@media(max-width:760px){.puntos-progresivos-cuenta{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =====================================================
   NOVA — CAMPOS DE FIDELIZACIÓN EN CUENTA
===================================================== */
.registro-campo-fecha{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:10px 0;
}

.registro-campo-fecha span{
    font-size:13px;
    font-weight:600;
    color:#111827;
}

.registro-campo-fecha small{
    color:#64748b;
    font-size:11px;
    line-height:1.4;
}

.cuenta-info-referido{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:13px 14px;
    margin:10px 0;
    border:1px solid #dbeafe;
    border-radius:12px;
    background:#eff6ff;
}

.cuenta-info-referido strong{
    font-size:13px;
}

.cuenta-info-referido span{
    font-size:18px;
    font-weight:800;
    letter-spacing:.05em;
}

.cuenta-info-referido small{
    color:#475569;
    font-size:11px;
}


/* =====================================================
   NOVA STORE — AVISO DE PROGRESO A ENVÍO GRATIS
   Solo afecta el resumen de finalizar compra.
===================================================== */
.aviso-fidelizacion-envio {
    display: none;
    margin: 10px 0 12px;
    padding: 11px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    box-sizing: border-box;
}


/* =========================================================
   FIX PC — LISTA DESPLEGABLE DE MÉTODOS DE PAGO
   En computadora (Firefox / Edge / Chrome con modo oscuro)
   la lista se abría con fondo oscuro y letra oscura, por eso
   no se veían las opciones. Se fuerza fondo claro y texto oscuro.
   El celular no se ve afectado (usa su selector nativo).
========================================================= */

#pago,
#pago select,
#pago .contenido-pago select,
#metodoPago {
    color-scheme: light only;
}

#pago select,
#pago .contenido-pago select,
#metodoPago {
    background-color: #eff6ff;
    color: #1e293b;
}

#pago select option,
#pago .contenido-pago select option,
#metodoPago option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

#pago select option:checked,
#metodoPago option:checked {
    background-color: #dbeafe !important;
    color: #1e293b !important;
}


/* =========================================================
   CARRITO: una sola pestaña (blanca). Evita que se vea el
   fondo azul base de .contenido-pago antes del diseño final.
   ========================================================= */
#carritoModal > .contenido-pago,
#carritoModal > div {
    background: #ffffff !important;
    color: #111827;
}


/* Caja de Puntos Nova en el formulario de registro */
.registro-puntos-nova {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid #c7d2fe;
    background: linear-gradient(180deg, #f5f7ff 0%, #eaf0ff 100%);
    color: #1e293b;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}
.registro-puntos-nova .rpn-head { display: flex; align-items: center; gap: 10px; }
.registro-puntos-nova .rpn-icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 12px;
    background: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .15); font-size: 18px;
}
.registro-puntos-nova .rpn-head strong { display: block; color: #1e3a8a; font-size: 16px; line-height: 1.2; }
.registro-puntos-nova .rpn-head small { display: block; color: #64748b; font-size: 12px; margin-top: 2px; }
.registro-puntos-nova .rpn-intro { margin: 12px 0; color: #334155; font-size: 13.5px; }
.registro-puntos-nova .rpn-tramos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.registro-puntos-nova .rpn-tramos li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; background: #fff; border: 1px solid #dbe3f5; border-radius: 10px;
}
.registro-puntos-nova .rpn-rango { color: #0f172a; font-weight: 700; font-size: 13.5px; }
.registro-puntos-nova .rpn-valor { color: #1d4ed8; font-weight: 800; font-size: 13.5px; text-align: right; }
.registro-puntos-nova .rpn-valor em { display: block; color: #64748b; font-style: normal; font-weight: 600; font-size: 11px; }