.search-bar-mobile {
    display: none !important;
}

.seccion-link.d-flex.flex-column.align-items-center.p-2.h-100 {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px 20px;

}

/* ================== CHECKOUT - CONFIRMAR COMPRA ================== */

/* STEPPER DE PROGRESO */
.checkout-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 100%;
    margin: 0 auto 50px;
    padding: 30px 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 80px;
}

.stepper-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e9ecef;
    border: 3px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3em;
    color: #666;
    transition: all 0.4s ease;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.stepper-item.active .stepper-circle {
    background: #0074d9;
    border-color: #0074d9;
    color: white;
    box-shadow: 0 6px 16px #0074d930;
    transform: scale(1.1);
}

.stepper-item.completed .stepper-circle {
    background: #28a745;
    border-color: #28a745;
    color: white;
    box-shadow: 0 4px 12px #28a74530;
}

.stepper-item.completed .stepper-circle::after {
    content: "✓";
    position: absolute;
    font-size: 1.5em;
}

.stepper-label {
    margin-top: 12px;
    font-size: 0.85em;
    font-weight: 600;
    color: #666;
    text-align: center;
    max-width: 110px;
    line-height: 1.3;
}

.stepper-item.active .stepper-label {
    color: #0074d9;
    font-weight: 700;
    font-size: 0.9em;
}

.stepper-item.completed .stepper-label {
    color: #28a745;
    font-weight: 600;
}

.stepper-line {
    flex: 1;
    height: 3px;
    background: #dee2e6;
    margin: 0 12px;
    transition: all 0.4s ease;
    z-index: 1;
    min-width: 40px;
}

.stepper-line.active {
    background: #0074d9;
    box-shadow: 0 2px 4px #0074d91a;
}

/* LAYOUT CHECKOUT */
.checkout-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 35px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.checkout-main {
    min-height: 400px;
}

.checkout-paso {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

/* CARDS Y FORMULARIOS */
.checkout-paso .card {
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    overflow: hidden;
}

.checkout-paso .card-body {
    padding: 35px;
}

.checkout-paso .card-title {
    font-size: 1.35em;
    margin-bottom: 25px;
    color: #333;
}

.checkout-paso .form-group {
    margin-bottom: 20px;
}

.checkout-paso .form-group label {
    font-weight: 600;
    font-size: 0.95em;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.checkout-paso .form-control {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.95em;
    transition: all 0.3s ease;
    height: auto;
}

.checkout-paso .form-control:focus {
    border-color: #0074d9;
    box-shadow: 0 0 0 3px #0074d91a;
}

/* MÉTODOS DE PAGO */
.metodos-pago-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.metodo-pago-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
}

.metodo-pago-card:hover {
    border-color: #0074d9;
    background: #f8fbff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #0074d91a;
}

.metodo-pago-card.selected {
    border-color: #0074d9;
    background: #f0f8ff;
    box-shadow: 0 6px 16px #0074d91a;
}

.metodo-icon {
    font-size: 2.2em;
    flex-shrink: 0;
}

.metodo-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metodo-info strong {
    font-size: 0.98em;
    color: #333;
    font-weight: 700;
}

.metodo-info small {
    color: #999;
    font-size: 0.82em;
    line-height: 1.3;
}

/* INFO DE MÉTODO */
.metodo-info-box {
    animation: slideDown 0.3s ease;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #0074d9;
    margin-top: 20px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        margin: 0;
    }

    to {
        opacity: 1;
        max-height: 600px;
        margin-top: 20px;
    }
}

.datos-bancarios {
    background: #fff;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin: 15px 0;
}

.dato-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 0.93em;
    align-items: center;
}

.dato-row:not(:last-child) {
    border-bottom: 1px solid #e9ecef;
}

.dato-label {
    font-weight: 600;
    color: #555;
}

.dato-valor {
    color: #333;
    font-family: "Courier New", monospace;
    font-weight: 600;
    word-break: break-all;
}

/* BOTONES */
.checkout-paso .btn-lg {
    padding: 14px 24px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.checkout-paso .btn-primary {
    background: #0074d9;
    border-color: #0074d9;
}

.checkout-paso .btn-primary:hover {
    background: #0057a8;
    border-color: #0057a8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px #0074d930;
}

.checkout-paso .btn-success {
    background: #28a745;
    border-color: #28a745;
}

.checkout-paso .btn-success:hover:not(:disabled) {
    background: #218838;
    border-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px #28a74530;
}

.checkout-paso .btn-success:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.checkout-paso .btn-outline-secondary {
    padding: 14px 16px;
    min-width: 50px;
}

.d-flex.gap-2 {
    gap: 12px;
}

/* RESUMEN FLOTANTE */
.checkout-sidebar {
    position: relative;
}

.resumen-carrito-flotante {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 16px #0074d91a;
    top: 20px;
}

.resumen-carrito-titulo {
    font-weight: 700;
    font-size: 1.15em;
    margin-bottom: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

#sidebar-carrito-items {
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 2px solid #e9ecef;
    scroll-behavior: smooth;
}

#sidebar-carrito-items::-webkit-scrollbar {
    width: 6px;
}

#sidebar-carrito-items::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#sidebar-carrito-items::-webkit-scrollbar-thumb {
    background: #0074d9;
    border-radius: 10px;
}

#sidebar-carrito-items::-webkit-scrollbar-thumb:hover {
    background: #0057a8;
}

.sidebar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 0.92em;
    gap: 8px;
}

.sidebar-item-titulo {
    flex: 1;
    color: #333;
    word-break: break-word;
    line-height: 1.3;
}

.sidebar-item-cant {
    color: #999;
    font-weight: 500;
    min-width: 35px;
    text-align: center;
}

.sidebar-item-precio {
    color: #0074d9;
    font-weight: 700;
    min-width: 85px;
    text-align: right;
}

.resumen-carrito-total {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.93em;
    color: #666;
    font-weight: 500;
}

.total-row.total-principal {
    font-size: 1.2em;
    font-weight: 700;
    color: #0074d9;
    padding-top: 12px;
    border-top: 2px solid #e9ecef;
}

/* RESUMEN PASO 3 */
.resumen-seccion {
    margin-bottom: 30px;
    padding-bottom: 28px;
    border-bottom: 2px solid #e9ecef;
}

.resumen-seccion:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.resumen-titulo {
    font-size: 0.9em;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.resumen-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 0.95em;
    gap: 15px;
}

.resumen-label {
    color: #666;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.resumen-valor {
    color: #333;
    font-weight: 600;
    text-align: right;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .checkout-wrapper {
        grid-template-columns: 1fr 360px;
        gap: 30px;
    }

    .checkout-paso .card-body {
        padding: 28px;
    }

    .metodos-pago-container {
        gap: 18px;
    }
}

@media (max-width: 992px) {
    .checkout-wrapper {
        grid-template-columns: 1fr;
        padding: 0 20px 30px;
    }

    .resumen-carrito-flotante {
        position: relative;
        top: 0;
        margin-bottom: 35px;
        order: -1;
    }

    .metodos-pago-container {
        grid-template-columns: 1fr;
    }

    .stepper-circle {
        width: 50px;
        height: 50px;
        font-size: 1.1em;
    }

    .stepper-label {
        font-size: 0.82em;
        max-width: 90px;
    }

    .stepper-line {
        margin: 0 8px;
    }

    .checkout-stepper {
        margin-bottom: 40px;
        padding: 25px 15px;
    }
}


@media (max-width: 480px) {
    .checkout-wrapper {
        padding: 0 15px 20px;
    }

    .checkout-stepper {
        padding: 20px 10px;
        margin-bottom: 25px;
    }

    .stepper-circle {
        width: 40px;
        height: 40px;
        font-size: 0.9em;
    }

    .stepper-label {
        font-size: 0.7em;
        max-width: 65px;
    }

    .stepper-item {
        min-width: 50px;
    }

    .stepper-line {
        margin: 0 2px;
    }

    .checkout-paso .card-body {
        padding: 18px;
    }

    .metodos-pago-container {
        gap: 12px;
    }

    .metodo-pago-card {
        padding: 14px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .metodo-info {
        gap: 0px;
    }

    .metodo-info small {
        font-size: 0.75em;
    }

    .resumen-seccion {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .resumen-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
    }

    .resumen-valor {
        text-align: left;
    }
}

/* ================== ESTILOS FILTROS DE PRODUCTOS (PANEL MODAL) ================== */

.btn-abrir-filtros {
    background: #333;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-abrir-filtros:hover {
    background: #555;
    color: white;
    text-decoration: none;
}

.filtros-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow-y: auto;
    animation: slideInLeft 0.3s ease;
}

.filtros-panel.active {
    display: flex;
    flex-direction: column;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.filtros-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid #f0f0f0;
    background: #f8f9fa;
}

.filtros-panel-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.btn-cerrar-filtros {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cerrar-filtros:hover {
    color: #333;
}

.filtros-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.filtro-grupo {
    margin-bottom: 0;
}

.filtro-grupo h5 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 12px;
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
}

.filtro-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.filtro-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filtro-checkbox input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.filtro-checkbox label {
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    color: #555;
}

.filtro-checkbox input[type="checkbox"]:checked+label {
    color: #333;
    font-weight: 600;
}

.btn-limpiar-filtros {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s;
    align-self: flex-start;
    margin-top: 10px;
}

.btn-limpiar-filtros:hover {
    background-color: #5a6268;
    color: white;
    text-decoration: none;
}

.filtros-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.filtros-overlay.active {
    display: block;
}


/* ================== FIN ESTILOS FILTROS ================== */

/* ================== ESTILOS MÉTODOS DE PAGO ================== */
.metodo-pago-card {
    background: #fafdff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.1em 1.5em;
    cursor: pointer;
    font-size: 1.08em;
    display: flex;
    align-items: center;
    gap: 0.7em;
    transition: border 0.18s, box-shadow 0.18s, background 0.18s;
    box-shadow: 0 2px 8px #0074d91a;
    outline: none;
}

.metodo-pago-card.selected,
.metodo-pago-card:focus {
    border: 2px solid #0074d9;
    background: #f0f6ff;
    box-shadow: 0 4px 16px #0074d933;
}

/* pedidos */
.badge-pendiente {
    background: #ff9800;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
}

.badge-confirmado {
    background: #0074d9;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
}

.badge-despachado {
    background: #28a745;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
}

.tab-btn {
    background: #f0f4fa;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    color: #0074d9;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-size: 1.08em;
}

.tab-btn.active,
.tab-btn:hover {
    background: #0074d9;
    color: #fff;
}


/* Modal básico correo */
/* Modal fondo */
.modal-envio {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 24px 12px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.35);
    animation: fadeInModal 0.3s;
}

html.modal-envio-open,
body.modal-envio-open {
    overflow: hidden;
}

#horario-sucursal-box h4 {
    margin-bottom: 8px;
    text-align: center;
    font-size: 1.1em;
    color: #2b7cff;
}

#horario-sucursal-box {
    margin-block: 6%;
}

.horario-local-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
    margin-top: 0;
}

.horario-local-tabla td {
    padding: 4px 8px;
    border-bottom: 1px solid #e0e0e0;
}

.horario-local-tabla tr:last-child td {
    border-bottom: none;
}

.horario-local-tabla td:first-child {
    font-weight: 500;
    color: #444;
}

/* Modal contenido */
.modal-content-envio {
    background: #fff;
    margin: 60px auto;
    padding: 32px 24px;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    position: relative;
    box-sizing: border-box;
    animation: slideUpModal 0.3s;
}

.close-modal-envio {
    position: absolute;
    top: 18px;
    right: 24px;
    font-size: 1.7em;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal-envio:hover {
    color: #333;
}

.modal-content-envio h3 {
    margin-top: 0;
    font-size: 1.3em;
    color: #2b2b2b;
    text-align: center;
    margin-top: 2%;
}

#form-envio-modal label {
    display: block;
    margin-top: 16px;
    font-weight: 500;
    color: #444;
}

#form-envio-modal input,
#form-envio-modal select {
    width: 100%;
    padding: 8px 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1em;
    box-sizing: border-box;
    margin-bottom: 8px;
}


/* Botón "Elegir opciones" — estilo moderno, sutil y coherente con WhatsApp */
.btn-elegir-opciones {
    background: linear-gradient(90deg, #0d6efd 0%, #0a58ca 100%);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 10px 22px;
    box-shadow: 0 3px 10px rgba(13, 110, 253, 0.2);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    cursor: pointer;
    position: relative;
}

/* Hover suave */
.btn-elegir-opciones:hover,
.btn-elegir-opciones:focus {
    background: linear-gradient(90deg, #0b5ed7 0%, #0a53be 100%);
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.25);
    transform: translateY(-1px);
}

/* Efecto al hacer clic */
.btn-elegir-opciones:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
}


/* ================== ESTILOS DE AVISOS EN STOCK================== */
.aviso-flotante {
    position: fixed;
    bottom: 24px;
    /* ahora se pega abajo */
    right: 24px;
    /* mantiene la derecha */
    display: flex;
    align-items: center;
    gap: 12px;

    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
    padding: 14px 22px;
    border-radius: 10px;

    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    z-index: 9999;

    opacity: 1;
    transform: translateY(0);
    animation: avisoFadeIn 0.5s ease forwards;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Estado oculto */
.aviso-flotante-hide {
    opacity: 0;
    transform: translateY(20px);
    /* se esconde hacia abajo */
}

/* Animación de entrada */
@keyframes avisoFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

/* Extra: ícono dentro del aviso */
.aviso-flotante i {
    font-size: 1.2rem;
    opacity: 0.9;
}


/* ================== ESTILOS MODERNOS PARA ADMINISTRAR IMÁGENES/VIDEOS DE HERO ================== */
/* Contenedor de las cards de hero */
#hero-img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 18px;
    margin-bottom: 18px;
}

/* 3 tarjetas por fila en desktop */
#hero-img-list .col-md-4 {
    flex: 0 0 32%;
    max-width: 32%;
    min-width: 280px;
    box-sizing: border-box;
}

/* Card de imagen/video */
#hero-img-list .card {
    border-radius: 16px;
    box-shadow: 0 2px 16px #0074d91a;
    border: 1.5px solid #e3eaf7;
    background: linear-gradient(135deg, #f8fbff 60%, #e3eaf7 100%);
    transition: box-shadow 0.2s, transform 0.2s;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hero-img-list .card:hover {
    box-shadow: 0 6px 32px #0074d933;
    transform: translateY(-4px) scale(1.03);
}

/* Imagen/video en la card */
#hero-img-list .card-img-top {
    border-radius: 14px 14px 0 0;
    object-fit: cover;
    width: 100%;
    max-height: 220px;
    min-height: 120px;
    background: #f7f7fa;
    box-shadow: 0 1px 8px #0074d91a;
    margin-bottom: 0;
}

/* Input de texto alternativo */
#hero-img-list .form-control {
    border-radius: 8px;
    border: 1.5px solid #0074d9;
    font-size: 1.05rem;
    margin-bottom: 8px;
    box-shadow: 0 1px 6px #0074d91a;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#hero-img-list .form-control:focus {
    border-color: #005fa3;
    box-shadow: 0 2px 12px #0074d933;
}

/* Botones de acción */
#hero-img-list .btn-group .btn {
    border-radius: 8px !important;
    font-size: 1.1rem;
    padding: 6px 14px;
    margin: 0 2px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    display: flex;
    align-items: center;
    gap: 6px;
}

#hero-img-list .btn-danger {
    background: #ff4d4f !important;
    color: #fff !important;
    border: none !important;
}

#hero-img-list .btn-danger:hover {
    background: #b71c1c !important;
}

#hero-img-list .btn-secondary {
    background: #e3eaf7 !important;
    color: #0074d9 !important;
    border: none !important;
}

#hero-img-list .btn-secondary:disabled {
    background: #f0f4fa !important;
    color: #aaa !important;
    opacity: 0.7;
}

/* Íconos de flechas más grandes y con texto */
#hero-img-list .btn-mover-arriba::before {
    content: "⬆️";
    margin-right: 4px;
}

#hero-img-list .btn-mover-abajo::before {
    content: "⬇️";
    margin-right: 4px;
}

#hero-img-list .btn-mover-arriba::after {
    content: " Adelante";
    font-size: 0.95em;
    color: #0074d9;
}

#hero-img-list .btn-mover-abajo::after {
    content: " Atrás";
    font-size: 0.95em;
    color: #0074d9;
}

/* Responsive: 2 tarjetas por fila en tablet, 1 en mobile */
@media (max-width: 1100px) {
    #hero-img-list .col-md-4 {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

@media (max-width: 700px) {
    #hero-img-list {
        gap: 12px;
    }

    #hero-img-list .col-md-4 {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    #hero-img-list .card-img-top {
        max-height: 160px;
        min-height: 80px;
    }
}

/* ========== CUSTOM SELECT MODERNO PARA VARIANTES DE PRODUCTO ========== */
.custom-select-variante {
    position: relative;
    min-width: 170px;
    font-size: 1.13rem;
    font-family: inherit;
    margin-bottom: 0;
}

.custom-select-variante .select-selected {
    background: #f0f4fa;
    border: 2.5px solid #0074d9;
    border-radius: 10px;
    padding: 10px 38px 10px 14px;
    cursor: pointer;
    color: #222;
    font-weight: 600;
    box-shadow: 0 2px 12px #0074d91a;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    position: relative;
}

.custom-select-variante .select-selected:after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border: solid #0074d9;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    pointer-events: none;
}

.custom-select-variante .select-selected.open {
    border-color: #005fa3;
    box-shadow: 0 2px 16px #0074d933;
}

.custom-select-variante .select-items {
    position: absolute;
    background: #fff;
    border: 2px solid #0074d9;
    border-radius: 12px;
    box-shadow: 0 8px 32px #0074d91a;
    z-index: 99;
    top: 110%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    animation: fadeInSelect 0.18s;
}

@keyframes fadeInSelect {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.custom-select-variante .select-items div {
    padding: 12px 18px;
    cursor: pointer;
    font-size: 1.08rem;
    color: #222;
    border-radius: 8px;
    transition:
        background 0.18s,
        color 0.18s;
}

.custom-select-variante .select-items div:hover,
.custom-select-variante .select-items .same-as-selected {
    background: #e3eaf7;
    color: #0074d9;
}

/* ================== ESTILO MODERNO PARA DROPDOWNS DE SELECT ================== */
.producto-variantes-box select,
.producto-variantes-box select:focus {
    background-color: #f0f4fa;
}

.producto-variantes-box select option {
    background: #fff;
    color: #222;
    border-radius: 8px;
    margin: 4px 0;
    padding: 10px 16px;
    font-size: 1.13rem;
    box-shadow: 0 2px 12px #0074d91a;
}

@media (pointer: fine) {
    .producto-variantes-box select option:hover {
        background: #e3eaf7;
        color: #0074d9;
    }
}

/* ================== ESTILOS VARIANTES DETALLE PRODUCTO (MODERNO) ================== */
.producto-variantes-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 32px;
    margin-bottom: 24px;
    align-items: flex-end;
    background: linear-gradient(135deg, #f8fbff 60%, #e3eaf7 100%);
    border-radius: 18px;
    box-shadow: 0 4px 24px #0074d91a;
    padding: 24px 28px 18px 28px;
    border: 1.5px solid #e3eaf7;
}

.producto-variantes-box label {
    font-weight: bold;
    margin-bottom: 7px;
    color: #0074d9;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.producto-variantes-box label:before {
    content: '\f02b';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #0074d9;
    font-size: 1.1em;
    margin-right: 3px;
}

.producto-variantes-box .variante-item {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    margin-bottom: 0;
    flex: 1 1 0;
}

.producto-variantes-box select {
    border-radius: 10px;
    border: 2.5px solid #0074d9;
    padding: 10px 28px 10px 14px;
    font-size: 1.13rem;
    background: #f0f4fa url('data:image/svg+xml;utf8,<svg fill="%230074d9" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 12px center/18px 18px;
    color: #222;
    font-weight: 600;
    box-shadow: 0 2px 12px #0074d91a;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    outline: none;
    margin-left: 0;
    margin-bottom: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.producto-variantes-box select:focus {
    border-color: #005fa3;
    box-shadow: 0 2px 16px #0074d933;
}

.producto-variantes-box select option {
    font-size: 1.08rem;
    padding: 6px 0;
}

/* ================== ESTILOS VARIANTES DETALLE PRODUCTO ================== */
.producto-variantes-box {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    margin-bottom: 18px;
    align-items: flex-end;
}

.producto-variantes-box label {
    font-weight: bold;
    margin-bottom: 4px;
    color: #0074d9;
    font-size: 1.08rem;
}

.producto-variantes-box select {
    border-radius: 8px;
    border: 2px solid #0074d9;
    padding: 6px 18px 6px 10px;
    font-size: 1.08rem;
    background: #f0f4fa;
    color: #222;
    font-weight: 500;
    box-shadow: 0 2px 8px #0074d91a;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    outline: none;
    margin-left: 8px;
}

.producto-variantes-box select:focus {
    border-color: #005fa3;
    box-shadow: 0 2px 16px #0074d933;
}

.producto-variantes-box .variante-item {
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

/* Unificar efecto hover/focus de checkboxes color y amperes con tipo de luz */
.checkbox-color:hover,
.checkbox-color input[type='checkbox']:focus+span,
.checkbox-amperes:hover,
.checkbox-amperes input[type='checkbox']:focus+span {
    border-color: #0074d9;
    box-shadow: 0 2px 12px #0074d933;
}

/* Carousel de secciones (mobile, 2 por slide) */
@media (max-width: 767.98px) {
    #carouselSecciones .carousel-inner {
        display: block;
    }

    #carouselSecciones .carousel-item {
        display: none;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        width: 100%;
        min-height: 1px;
        padding: 12px 8px;
        background: transparent;
        border: none;
        gap: 10px;
    }

    #carouselSecciones .carousel-item.active {
        display: flex !important;
    }

    #carouselSecciones .seccion-link {
        flex: 1 1 48%;
        max-width: 48%;
        min-width: 110px;
        min-height: 150px;
        padding: 14px 10px !important;
        font-size: 0.98rem;
        margin: 0;
        border-radius: 14px;
        background: #fff;
        border: 1px solid #e8e8e8;
        box-shadow: 0 2px 12px rgba(0, 116, 217, 0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #carouselSecciones .seccion-link:hover {
        box-shadow: 0 8px 28px rgba(0, 116, 217, 0.18);
        border-color: #0074d9;
        transform: translateY(-6px) scale(1.02);
        background: #f8fcff;
    }

    #carouselSecciones .seccion-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 10px;
        object-fit: contain;
        filter: drop-shadow(0 2px 8px rgba(0, 116, 217, 0.1));
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
    }

    #carouselSecciones .seccion-link:hover .seccion-icon {
        transform: scale(1.13) rotate(-8deg);
        filter: drop-shadow(0 4px 16px rgba(0, 116, 217, 0.25));
    }

    #carouselSecciones .seccion-titulo {
        font-size: 0.97rem;
        margin-top: 6px;
        font-weight: 700;
        color: #283046;
        line-height: 1.35;
    }

    /* Estilos base: asegurar contenedor relativo */
    #carouselSecciones {
        position: relative;
        padding-bottom: 28px;
    }

    #carouselSecciones .carousel-control-prev,
    #carouselSecciones .carousel-control-next {
        display: none !important;
    }

    #carouselSecciones .carousel-indicators {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        gap: 8px;
        z-index: 8;
    }

    #carouselSecciones .carousel-indicators li {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(3, 9, 26, 0.2);
        border: none;
        transition: background-color 160ms ease, transform 160ms ease;
        cursor: pointer;
    }

    #carouselSecciones .carousel-indicators li.active {
        background: #0074d9;
        transform: scale(1.08);
        box-shadow: 0 4px 12px rgba(0, 116, 217, 0.2);
    }

    /* Variante A - flechas limpias (sin círculo) */
    #carouselSecciones.carousel-variant-1 .carousel-control-prev,
    #carouselSecciones.carousel-variant-1 .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        padding: 6px;
        /* mantiene área táctil */
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        z-index: 30;
        opacity: 0.95;
        transition: transform 0.12s ease, opacity 0.12s ease;
        cursor: pointer;
    }

    #carouselSecciones.carousel-variant-1 .carousel-control-prev {
        left: 6px;
    }

    #carouselSecciones.carousel-variant-1 .carousel-control-next {
        right: 6px;
    }

    #carouselSecciones.carousel-variant-1 .carousel-control-prev:hover,
    #carouselSecciones.carousel-variant-1 .carousel-control-next:hover {
        transform: translateY(-50%) scale(1.06);
        opacity: 1;
    }

    /* flechas visibles y centradas dentro del área */
    #carouselSecciones.carousel-variant-1 .carousel-control-prev-icon::after,
    #carouselSecciones.carousel-variant-1 .carousel-control-next-icon::after {
        font-size: 1.6rem;
        /* mayor legibilidad sin fondo */
        color: #283046;
        text-shadow: none;
        line-height: 1;
    }

    /* Variante B - pill vertical (más visible) */
    #carouselSecciones.carousel-variant-2 .carousel-control-prev,
    #carouselSecciones.carousel-variant-2 .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 56px;
        height: 56px;
        background: linear-gradient(180deg, rgba(0, 116, 217, 0.95), rgba(0, 116, 217, 0.85));
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        z-index: 30;
        box-shadow: 0 8px 30px rgba(2, 6, 23, 0.18);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    #carouselSecciones.carousel-variant-2 .carousel-control-prev {
        left: 6px;
    }

    #carouselSecciones.carousel-variant-2 .carousel-control-next {
        right: 6px;
    }

    #carouselSecciones.carousel-variant-2 .carousel-control-prev-icon,
    #carouselSecciones.carousel-variant-2 .carousel-control-next-icon {
        width: 20px;
        height: 20px;
        background-size: contain;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)) invert(100%);
    }

    /* Ajuste específico de las flechas pseudo-elemento para centrar y escalar */
    #carouselSecciones.carousel-variant-1 .carousel-control-prev-icon::after,
    #carouselSecciones.carousel-variant-1 .carousel-control-next-icon::after {
        font-size: 1.05rem;
        /* pequeño y centrado dentro del círculo */
        color: #283046;
        text-shadow: none;
        line-height: 1;
    }

    #carouselSecciones.carousel-variant-2 .carousel-control-prev-icon::after,
    #carouselSecciones.carousel-variant-2 .carousel-control-next-icon::after {
        font-size: 1.15rem;
        /* un poco más grande para el pill */
        color: #ffffff;
        text-shadow: none;
        line-height: 1;
    }


}

/* =================== MOBILE STYLES UNIFICADOS =================== */

/* ===================== MEJORAS MOBILE PARA CATEGORÍAS Y PRODUCTOS ===================== */
@media (max-width: 700px) {

    #productos-grid.productos-grid-custom,
    #productos-categoria.productos-grid-custom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* Tarjetas de productos y carrusel */
    .carousel-producto-tarjeta,
    .producto-tarjeta {
        min-height: 38vw;
        max-width: none;
        width: 100%;
        padding: 3vw 2.5vw 4vw 2.5vw;
        border-radius: 4vw;
        box-shadow: 0 0.6vw 2vw #0074d933;
        display: flex;
        flex-direction: column;
        background: #ffffff;
    }

    .carousel-producto-img,
    .producto-tarjeta img {
        width: 100%;
        height: 38vw;
        max-width: 100%;
        max-height: 38vw;
        object-fit: contain !important;
        border-radius: 2vw;
        margin-bottom: 2vw;
        background: #f8fafc;
        display: block;
        margin-left: auto;
        margin-right: auto;
        box-sizing: content-box;
    }

    .producto-carrusel {
        max-width: 100%;
        min-height: 80px;
        padding: 4px 0;
        border-radius: 4vw;
    }

    .producto-carrusel .carrusel-img {
        max-width: 100%;
        max-height: 120px;
        border-radius: 2vw;
    }

    .producto-carrusel .carrusel-prev,
    .producto-carrusel .carrusel-next {
        width: 22px;
        height: 22px;
        font-size: 1rem;
        left: 2px;
        right: 2px;
    }

    .productos-grid-custom {
        grid-template-columns: 1fr;
        gap: 4vw;
        margin-top: 2vw;
        margin-bottom: 2vw;
    }

    .producto-categoria,
    .carousel-producto-categoria {
        font-size: 0.9rem;
        margin-bottom: 0.8vw;
        font-weight: 500;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'Montserrat', 'Roboto', sans-serif;
    }

    .producto-nombre,
    .carousel-producto-nombre {
        font-size: 1.25rem;
        margin-bottom: 0.8vw;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.35;
        font-family: 'Montserrat', 'Roboto', sans-serif;
        min-height: 3.75rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }



    .producto-tarjeta-botones {
        flex-direction: column;
        gap: 1vw;
        margin-top: 2vw;
    }

    .producto-tarjeta-botones .btn-whatsapp,
    .producto-tarjeta-botones .btn-consultar-stock {
        min-height: 38px;
        font-size: 1rem;
        border-radius: 2vw;
        width: 100%;
        margin-bottom: 1vw;
    }
}

/* Sin stock y botón WhatsApp mismo alto en tarjetas */

/* Unificación de tarjetas de productos y ofertas */
.producto-tarjeta-botones .alert-sin-stock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 38px;
    max-height: 38px;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 10px;
    margin-bottom: 0 !important;
    border-radius: 8px;
    background: #f8d7da;
    color: #b71c1c;
    border: 1px solid #f5c2c7;
    box-sizing: border-box;
}

.producto-tarjeta-botones .btn-whatsapp,
.producto-tarjeta-botones .btn-consultar-stock {
    min-height: 38px;
    max-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    font-size: 1rem;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Cuando hay stock: productos y ofertas */
.producto-tarjeta-botones.stock-disponible .btn-whatsapp,
.producto-tarjeta-botones.stock-disponible .btn-agregar-carrito {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 14px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    font-size: 1rem;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: inherit;
    gap: 0.5em;
}

/* Íconos internos de ambos botones: mismo tamaño y margen derecho solo cuando hay stock */
.producto-tarjeta-botones.stock-disponible .btn-whatsapp .fab.fa-whatsapp,
.producto-tarjeta-botones.stock-disponible .btn-agregar-carrito .fa-shopping-cart {
    font-size: 1.25em;
    height: 1.2em;
    vertical-align: middle;
    margin-right: 0.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Asegura que los botones estén alineados horizontalmente */
.producto-tarjeta-botones.stock-disponible {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* Cuando NO hay stock: los botones ocupan el ancho necesario y no se estiran */
.producto-tarjeta-botones.sin-stock .btn-consultar-stock,
.producto-tarjeta-botones.sin-stock .btn-whatsapp {
    min-width: 120px;
    width: auto;
    max-width: 100%;
}

/* Solo el botón de consultar stock (sin stock) tiene el ícono alineado y separado */
.producto-tarjeta-botones .btn-consultar-stock .fab.fa-whatsapp {
    margin-right: 0.5em !important;
    padding-right: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    height: 1em;
    vertical-align: middle;
}

/* El botón de WhatsApp normal NO debe tener separación ni alineación especial */
.producto-tarjeta-botones .btn-whatsapp .fab.fa-whatsapp {
    margin-right: 0 !important;
    padding-right: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    height: 1.2em;
    vertical-align: middle;
}

/* Asegura que el ícono del carrito y WhatsApp tengan el mismo tamaño en los botones de stock */
.producto-tarjeta-botones .btn-whatsapp .fa-shopping-cart,
.producto-tarjeta-botones .btn-whatsapp .fab.fa-whatsapp {
    font-size: 1.25em;
    height: 1.2em;
    vertical-align: middle;
}

.btn.btn-primary.btn-sm {
    width: 48px;
    border-radius: 8px;
}

/* Animación al pasar el mouse por encima de las tarjetas de producto en todas las vistas */
.producto-tarjeta:hover,
.carousel-producto-tarjeta:hover {
    box-shadow: 0 0.6vw 2vw #0074d933;
    transform: translateY(-0.4vw) scale(1.04);
    transition:
        box-shadow 0.3s,
        transform 0.3s;
    z-index: 2;
}

/* Separador y descripción en detalle de producto */
.producto-detalle-separador {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin: 2.5rem 0 1.5rem 0;
}

.producto-detalle-descripcion-box {
    background: #fafbfc;
    border-radius: 10px;
    padding: 1.5rem 1.2rem;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
    margin-bottom: 2rem;
}

.producto-detalle-desc-titulo {
    font-size: 1.3rem;
    font-weight: 600;
    color: #0074d9;
    margin-bottom: 0.7rem;
    letter-spacing: 0.5px;
}

.producto-detalle-desc {
    font-size: 1.08rem;
    color: #333;
    line-height: 1.6;
}

/* Estilo moderno para el detalle de producto */
/* Disposición horizontal fija para detalle de producto */
.producto-detalle-box {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
    padding: 2.5rem 2rem;
    margin: 2rem 0;
    gap: 2.5rem;
    align-items: stretch;
}

/* Asegura que la imagen esté a la izquierda y la info a la derecha */

.producto-detalle-img-wrap {
   
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #f7f7f7;
    border-radius: 14px;
    padding: 1.5rem;
}

.producto-detalle-img {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    object-fit: contain;
    background: #fff;
}

.producto-detalle-info {
    flex: 2 1 50%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    justify-content: center;
    height: 100%;
    min-height: 0;
    align-self: center;
    margin-left: 5%;
}

.producto-detalle-nombre {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #222;
}

.producto-detalle-precio {
    font-size: 1.7rem;
    font-weight: 600;
    color: #0074d9;
    margin-bottom: 0.5rem;
}

.producto-detalle-desc {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 1.2rem;
}

/* Botones de producto detalle: tamaño fijo y uniforme */
.producto-detalle-botones {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Forzar fondo y color en botones personalizados para evitar transparencia */
.btn-agregar-carrito {
    background: #0074d9 !important;
    color: #fff !important;
    border: none !important;
    transition: background 0.2s;
}

.btn-agregar-carrito:hover {
    background: #005fa3 !important;
}

.btn-whatsapp {
    background: #25d366 !important;
    color: #fff !important;
    border: none !important;
    transition: background 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
}

.btn-whatsapp span,
.btn-whatsapp i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto;
}

.btn-whatsapp:hover {
    background: #1ebe57 !important;
}

@media (max-width: 900px) {
    .producto-detalle-box {
        flex-direction: column !important;
        align-items: stretch;
        padding: 1.2rem 0.5rem;
    }

    .producto-detalle-img-wrap {
        order: 1;
        max-width: 100%;
        min-width: 0;
        padding: 1rem;
    }

    .producto-detalle-info {
        order: 2;
        min-width: 0;
        margin-left: 0;
    }
}

/* --- Tarjetas de productos (productos.html) migradas desde <style> --- */
.producto-tarjeta {
    background: #fff;
    border-radius: 1vw;
    box-shadow: 0 0.2vw 1vw #0074d91a;
    padding: 0.8vw 0.8vw 1.2vw 0.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition:
        box-shadow 0.3s,
        transform 0.3s;
    min-height: 18vw;
    max-width: 35vh;
    width: 35vh;
    margin: 0 auto;
}

.producto-tarjeta:hover {
    box-shadow: 0 0.6vw 2vw #0074d933;
    transform: translateY(-0.4vw) scale(1.04);
}

.producto-tarjeta img {
    max-width: 100%;
    max-height: 12vw;
    object-fit: contain;
    border-radius: 0.6vw;
    margin-bottom: 0.7vw;
    background: #f8fafc;
}

.producto-categoria {
    font-size: 0.85rem;
    color: #0074d9;
    font-family: 'Montserrat', 'Roboto', sans-serif;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    display: block;
    text-align: center;
}

.producto-nombre {
    font-size: 1.15rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 0.7rem;
    text-align: center;
    font-family: 'Montserrat', 'Roboto', sans-serif;
    line-height: 1.4;
    min-height: 2.3rem;
}

.producto-precio {
    font-size: 1.35rem;
    color: #009e3c;
    font-weight: 900;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.5px;
}

#productos-categoria {
    display: grid !important;
}

@media (max-width: 700px) {
    .productos-grid {
        grid-template-columns: repeat(auto-fit, minmax(44vw, 1fr));
        gap: 4vw;
    }

    .producto-tarjeta {
        min-height: 38vw;
        max-width: 90vw;
        padding: 3vw 2vw 4vw 2vw;
    }

    .producto-tarjeta img {
        max-height: 22vw;
        border-radius: 2vw;
        margin-bottom: 2vw;
    }
}

/* --- Migración de estilos inline a clases reutilizables --- */

/* Título principal de productos */
.titulo-productos {
    font-family: 'Montserrat', 'Oswald', 'Roboto', sans-serif;
    color: #0074d9;
    margin-bottom: 32px;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 2.2rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 12px #0074d91a;
    background: linear-gradient(90deg, #eaf6ff 0%, #fafdff 100%);
    border-radius: 14px;
    padding: 1.2rem 0.7rem 1.2rem 0.7rem;
    box-shadow: 0 2px 16px #0074d91a;
    display: inline-block;
    width: 100%;
    text-align: center;
}

@media (max-width: 600px) {
    .titulo-productos {
        font-size: 1.3rem;
        padding: 0.7rem 0.2rem;
        margin-top: 1.2rem;
        margin-bottom: 1rem;
    }
}

/* Grid de productos */
.productos-grid-custom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
    justify-content: center;
    /* Centra las cards */
    gap: 2vw;
    padding-inline: 3vh;
    margin-top: 3vw;
    margin-block-end: 2%;
}

.productos-grid-custom.productos-grid-empty {
    display: block;
}

#productos-grid.productos-grid-custom.productos-grid-empty,
#productos-categoria.productos-grid-custom.productos-grid-empty,
#ofertas-grid.productos-grid-custom.productos-grid-empty {
    display: block !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    justify-items: stretch !important;
}

.productos-empty-state {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center;
    grid-column: 1 / -1;
}

.productos-empty-state p {
    margin: 0;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 600;
}

/* Ofertas: mostrar 5 productos por fila y ajustar en pantallas pequeñas */
#ofertas-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    justify-items: center;
    padding-inline: 3vh;
}

@media (max-width: 1200px) {
    #ofertas-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    #ofertas-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    #ofertas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5vw;
    }
}

@media (max-width: 480px) {
    #ofertas-grid {
        grid-template-columns: 1fr;
    }
}

/* FAQ sección principal */
.faq-section-custom {
    max-width: 700px;
    margin: 48px auto 32px auto;
    background: #f0f4fa;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(0, 116, 217, 0.08);
    padding: 36px 28px 32px 28px;
}

.faq-titulo-custom {
    font-family: 'Oswald', sans-serif;
    font-size: 2.1rem;
    color: #283046;
    text-align: center;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.faq-desc {
    text-align: center;
    color: #283046;
    font-size: 1.1rem;
    margin-bottom: 32px;
}

/* Contacto sección principal */
.contacto-section-custom {
    max-width: 520px;
    margin: 48px auto 32px auto;
    background: #f0f4fa;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(0, 116, 217, 0.08);
    padding: 36px 28px 32px 28px;
}

.contacto-titulo-custom {
    font-family: 'Oswald', sans-serif;
    font-size: 2.1rem;
    color: #283046;
    text-align: center;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.contacto-desc {
    text-align: center;
    color: #283046;
    font-size: 1.1rem;
    margin-bottom: 32px;
}

/* Hero section con gradiente */
.hero-section-gradient {
    background: linear-gradient(90deg, #0074d9 0%, #283046 100%) !important;
    width: 100% !important;
}

.container.mt-4 {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-block-end: 5%;
}

/* Carrito de compras */
.carrito-titulo {
    background: transparent;
    color: #fff;
    font-family: 'Audiowide', 'Oswald', sans-serif;
}

/* ====== CARRITO DE COMPRAS ====== */
.hero-section.carrito-hero {
    background: #fff;
    color: #283046;
    height: 15%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 14px 14px;
    box-shadow: none;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid #e5e9f2;
    padding: 0;
}

.carrito-titulo {
    font-family: 'Oswald', 'Montserrat', 'Roboto', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0;
    color: #283046;
    border-radius: 14px;
    padding: 0.7rem 1.2rem;
    text-shadow: 0 2px 12px #0074d91a;
    display: inline-block;
    justify-content: center;
    align-items: center;
    margin-top: 0 !important;
}

.carrito-panel {
    width: 100%;
    margin: 0;
    margin-block-end: 5%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px #0074d91a;
    padding: 28px 18px 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
}

.carrito-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrito-img {
    border-radius: 12px;
    box-shadow: 0 2px 8px #0074d91a;
}

.carrito-variante-box .badge {
    font-size: 0.97em;
    background: #f7f7f7;
    color: #333;
    border: 1px solid #e0e0e0;
    margin-bottom: 2px;
}

.carrito-cantidad-box button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.carrito-total-box {
    font-size: 1.18em;
    font-weight: 600;
}

.carrito-acciones .btn-lg {
    min-width: 180px;
}


.carrito-resumen-card {
    border-radius: 14px;
    background: #f8f9fa;
    padding: 1.5rem 1rem;
}

.carrito-resumen-card h4 {
    font-size: 1.25em;
    font-weight: 700;
    color: #283046;
}

.carrito-resumen-card table th,
.carrito-resumen-card table td {
    font-size: 1em;
    padding: 0.35em 0.5em;
}

.carrito-resumen-card .btn-block {
    margin-top: 1.2em;
    font-size: 1.1em;
    font-weight: 600;
}

/* Mejora estética para el resumen del carrito */
.carrito-resumen-card .table-borderless {
    background: #fafdff;
    border-radius: 10px;
    box-shadow: 0 2px 12px #0074d91a;
    margin-bottom: 1.2rem;
    overflow: hidden;
}

.carrito-resumen-card .table-borderless th,
.carrito-resumen-card .table-borderless td {
    font-size: 1.08em;
    padding: 0.55em 0.7em;
    background: none;
    border: none !important;
    color: #283046;
    text-align: left;
    vertical-align: middle;
}

.carrito-resumen-card .table-borderless th {
    background: #eaf6ff;
    color: #0074d9;
    font-weight: 700;
    border-bottom: 2px solid #e0e0e0 !important;
}

.carrito-resumen-card .table-borderless tr:last-child td {
    border-bottom: none !important;
}

.carrito-resumen-card .table-borderless td {
    background: #fff;
    font-weight: 500;
}

.carrito-resumen-card .table-borderless td:last-child {
    text-align: right;
    font-weight: 700;
    color: #0074d9;
}

@media (max-width: 991px) {

    #carrito-lista,
    #carrito-resumen {
        margin-bottom: 2rem;
    }
}

/* Carrito tabla moderna */
.carrito-tabla {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #fafdff;
    box-shadow: 0 2px 12px #0074d91a;
    margin-bottom: 1.2rem;
}

.carrito-tabla th,
.carrito-tabla td {
    vertical-align: middle !important;
    text-align: center;
    border: none;
    font-size: 1.05rem;
    background: none;
}

.carrito-tabla th {
    background: #eaf6ff;
    color: #0074d9;
    font-weight: 700;
    font-size: 1.08rem;
    border-bottom: 2px solid #e0e0e0;
}

.carrito-tabla td {
    background: #fff;
    color: #283046;
    border-bottom: 1px solid #f0f4fa;
    vertical-align: middle;
}

.carrito-tabla tr:last-child td {
    border-bottom: none;
}

.carrito-tabla img {
    box-shadow: 0 2px 8px #0074d91a;
    border-radius: 8px;
    background: #fafdff;
}

.carrito-total-box {
    text-align: right;
    font-size: 1.18rem;
    color: #0074d9;
    margin-bottom: 1.2rem;
}

.carrito-total {
    font-weight: 700;
    font-size: 1.25rem;
    color: #009e3c;
    margin-left: 8px;
}

.carrito-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.2rem;
}

.carrito-titulo-lista {
    font-family: 'Oswald', 'Montserrat', 'Roboto', sans-serif;
    font-size: 1.18rem;
    color: #0074d9;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.2rem;
    text-align: left;
}

.carrito-cantidad-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 38px;
}

.btn.btn-light {
    background: linear-gradient(135deg, #eaf6ff 60%, #fafdff 100%);
    color: #0074d9;
    border: 2px solid #e0e7ef;
    font-weight: 900;
    border-radius: 12px;
    padding: 0.15em 0.85em 0.15em 0.85em;
    font-size: 1.35rem;
    min-width: 38px;
    min-height: 38px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px #0074d91a;
    transition:
        background 0.18s,
        color 0.18s,
        box-shadow 0.18s,
        transform 0.13s,
        border 0.18s;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.btn.btn-light:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #eaf6ff 0%, #fafdff 100%);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.btn.btn-light span,
.btn.btn-light i {
    position: relative;
    z-index: 1;
}

.btn.btn-light:hover {
    background: linear-gradient(90deg, #0074d9 0%, #00c6ff 100%);
    color: #fff;
    border: 2px solid #0074d9;
    box-shadow: 0 4px 16px #0074d933;
    transform: scale(1.13) rotate(-2deg);
}

.btn.btn-light:active {
    transform: scale(0.97);
    box-shadow: 0 1px 2px #0074d91a;
}

.carrito-cantidad-num {
    font-size: 1.1rem;
    font-weight: 700;
    color: #283046;
    margin: 2px 0;
    background: #fafdff;
    border-radius: 6px;
    min-width: 32px;
    text-align: center;
    display: block;
}

.btn.btn-danger.btn-sm {
    border-radius: 6px;
    font-size: 1rem;
    padding: 2px 10px;
}

.carrito-vacio-titulo {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0074d9;
    margin-bottom: 0.7rem;
}


.carrito-vacio-desc {
    color: #555;
    font-size: 1.08rem;
    margin-bottom: 1.2rem;
}

.carrito-vacio-acciones {
    margin-top: 1.2rem;
}

#carrito-resumen:empty {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.carrito-vacio-btn {
    display: inline-block;
    background: #0074d9;
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.7rem 1.5rem;
    font-size: 1.08rem;
    box-shadow: 0 2px 8px #0074d91a;
    transition:
        background 0.2s,
        color 0.2s,
        box-shadow 0.2s;
    text-decoration: none;
}

.d-flex.gap-3.mb-4 {
    margin-bottom: 1.5rem !important;
}

.opcion-envio {
    width: 10vw;
    margin: 2%;
}

.entrega-icon {
    margin-right: 14px;
    display: flex;
    align-items: center;
}

.entrega-txt {
    font-size: 1.08em;
    color: #222;
}

.forma-entrega-row {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
}

.entrega-card {
    flex: 1;
    background: #f7f7f7;
    border-radius: 12px;
    padding: 18px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 2px solid #e0e0e0;
    transition: border 0.2s, box-shadow 0.2s;
    min-width: 0;
}

.entrega-card.selected {
    border: 2px solid #2b7cff;
    box-shadow: 0 2px 12px rgba(43, 124, 255, 0.08);
    background: #eef6ff;
}

.entrega-card-correo.selected {
    border: 2px solid #ff9800;
    background: #fff8e1;
}

.entrega-card small {
    color: #666;
    font-size: 0.95em;
}



.carrito-vacio-btn:hover {
    background: #005fa3;
    color: #fff !important;
    box-shadow: 0 4px 18px #0074d933;
}

/* === Mejoras visuales para el resumen del carrito === */
.carrito-resumen-card .table-borderless {
    background: #fafdff;
    border-radius: 14px;
    box-shadow: 0 2px 12px #0074d91a;
    margin-bottom: 1.5rem;
    overflow: hidden;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.carrito-resumen-card .table-borderless th,
.carrito-resumen-card .table-borderless td {
    font-size: 1.09em;
    padding: 0.7em 1.1em;
    background: none;
    border: none !important;
    color: #283046;
    text-align: left;
    vertical-align: middle;
    line-height: 1.5;
}

.carrito-resumen-card .table-borderless th {
    background: #eaf6ff;
    color: #0074d9;
    font-weight: 700;
    border-bottom: 2px solid #e0e0e0 !important;
    letter-spacing: 0.5px;
    font-size: 1.12em;
}

.carrito-resumen-card .table-borderless tr {
    transition: background 0.18s;
}

.carrito-resumen-card .table-borderless tr:hover td {
    background: #f0f4fa;
}

.carrito-resumen-card .table-borderless td {
    background: #fff;
    font-weight: 500;
    border-bottom: 1px solid #f0f4fa !important;
}

.carrito-resumen-card .table-borderless tr:last-child td {
    border-bottom: none !important;
}

.carrito-resumen-card .table-borderless td:last-child {
    text-align: right;
    font-weight: 700;
    color: #0074d9;
}

.carrito-resumen-card .mb-2,
.carrito-resumen-card .mb-3 {
    margin-bottom: 1.1rem !important;
}

.carrito-resumen-card .font-weight-bold {
    font-weight: 700 !important;
}

.carrito-resumen-card .btn-block {
    margin-top: 1.5em;
    font-size: 1.13em;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.8em 0;
    letter-spacing: 0.5px;
}

@media (max-width: 700px) {

    .carrito-resumen-card .table-borderless th,
    .carrito-resumen-card .table-borderless td {
        font-size: 1em;
        padding: 0.5em 0.5em;
    }

    .carrito-resumen-card {
        padding: 1.2rem 0.5rem;
        border-radius: 10px;
    }
}

@media (max-width: 700px) {
    .hero-section.carrito-hero {
        height: 100%;
        font-size: 1.2rem;
        border-radius: 0 0 12px 12px;
        margin-bottom: 1.2rem;
    }

    .carrito-panel {
        padding: 18px 6vw 18px 6vw;
        border-radius: 10px;
    }

    .carrito-titulo {
        font-size: 1.2rem;
    }
}

/* Logo link y logo img *//* Carousel hero solo imágenes full width */
.hero-section {
    width: 100vw;
    min-height: 200px;
    height: 35vh;
    max-height: 50vh;
    padding: 0;
    margin: 0;
    background: none;
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-carousel-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: flex;
    margin: 0 auto;
}

.hero-section .carousel-item.active {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
}

.hero-section .carousel-inner {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    border-radius: 0%;
    display: flex;
    align-items: center;
}


/* Sección "Conocé nuestras secciones" */
.seccion-link {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 116, 217, 0.07);
    transition:
        box-shadow 0.3s,
        transform 0.3s,
        background 0.3s;
    text-decoration: none;
    color: #283046;
    min-height: 170px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.seccion-link:hover {
    box-shadow: 0 6px 24px #0074d933;
    background: #f0f8ff;
    transform: translateY(-6px) scale(1.04);
    color: #0074d9;
}

.seccion-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 8px #0074d933);
    transition:
        filter 0.3s,
        transform 0.3s;
}

.seccion-link:hover .seccion-icon {
    filter: drop-shadow(0 4px 18px #0074d9cc);
    transform: scale(1.13) rotate(-8deg);
}

.seccion-titulo {
    font-family: 'Oswald', 'Montserrat', Arial, sans-serif;
    font-size: 1.13rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-top: 6px;
    color: inherit;
    text-align: center;
}


/* Animaciones sutiles y microinteracciones para la home */
.fade-slide-in {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.glow-anim {
    box-shadow: 0 0 0px #0074d9;
    animation: glowPulse 2.2s infinite alternate;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 0px #0074d9;
    }

    60% {
        box-shadow: 0 0 18px 4px #0074d9cc;
    }

    100% {
        box-shadow: 0 0 0px #0074d9;
    }
}

.icon-beneficio {
    transition:
        filter 0.3s,
        transform 0.3s;
}

.icon-beneficio:hover {
    filter: drop-shadow(0 0 8px #0074d9cc);
    transform: scale(1.13) rotate(-6deg);
}

.carousel-item .zoom-anim {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-item.active .zoom-anim {
    transform: scale(1.04);
}

.titulo-letras span {
    opacity: 0;
    display: inline-block;
    transform: translateY(18px);
    transition:
        opacity 0.4s,
        transform 0.4s;
}

.titulo-letras.visible span {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos generales */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
    color: #222;
    background: #f6f8fa;
    display: flex;
    flex-direction: column;
}

main {
    margin: 0;
    padding: 0;
    width: 100%;
    /* No flex:1 — dejar que el contenido determine la altura para que el footer aparezca después del último elemento */
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    margin-top: 1% !important;
}

/* Estilos para el contenedor principal */
.container-fluid {
    padding: 0 !important;
    /* Espaciado interno del contenedor principal */
    padding-left: 0px !important;
    /* Espaciado interno del contenedor principal */
    padding-right: 0px !important;
    /* Espaciado interno del contenedor principal */
    margin: 0px !important;
    /* Margen exterior del contenedor principal */
    width: 100%;
    /* Ancho completo del contenedor principal */
    height: auto;
    /* permitir que la altura siga al contenido */
    /* Altura completa del contenedor principal */
    background-color: #fff;
    /* Color de fondo del contenedor principal */
    border-radius: 0;
    /* Redondear las esquinas del contenedor */
    box-shadow: none;
    border: none;
    overflow-x: hidden;
    /* Ocultar el desbordamiento horizontal */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-sizing: border-box;
}

.container-fluid.py-4.px-2.px-md-5 {
    margin: 0 auto !important;
    align-items: center;
    justify-content: center;
}

/* Header principal */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    min-height: 80px;
    max-height: 80px;
    background: #fff;
    border-bottom: 1px solid #e5e9f2;
}

#logo-placeholder {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-img {
    max-height: 100px;
    width: auto;
    display: block;
    margin: 0;
    align-self: center;
}

#logo-placeholder {
    width: 5%;
    min-height: 50px;
}

/* Barra de búsqueda en el header */
.search-bar {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-bar input[type='text'] {
    width: 60%;
    max-width: 400px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.search-bar button {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 40px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.search-bar button:hover {
    background: #555;
}

/* Ícono de carrito */
.cart-link {
    color: #333;
    font-size: 2rem;
    margin-left: 24px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.cart-link:hover {
    color: #007bff;
}

/* Estilos para la barra de navegación */
.navbar {
    background: linear-gradient(90deg, #1a2238 0%, #283046 100%);
    padding: 0px !important;
    text-align: center;
    display: flex;
    box-shadow: 0 2px 8px rgba(26, 34, 56, 0.1);
    border-bottom: 2px solid #0074d9;
    width: 100%;
}

.menu {
    text-align: center;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 28px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.menu li {
    justify-content: center;
    position: relative;
}

.menu a {
    font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    padding: 14px 28px;
    letter-spacing: 1.2px;
    display: block;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 8px 8px 0 0;
    transition:
        background 0.2s,
        color 0.2s,
        box-shadow 0.2s;
}

.menu li a:hover,
.menu li a.active {
    background: #0074d9;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 116, 217, 0.1);
    text-decoration: none !important;
}

/* Submenú de categorías en navbar */
.menu-productos {
    position: relative;
}

.submenu-categorias {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    background: #fff;
    box-shadow: 0 8px 24px rgba(26, 34, 56, 0.1);
    border-radius: 0 0 12px 12px;
    padding: 0;
    z-index: 100;
    border-top: 2px solid #0074d9;
    width: max-content;
    min-width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.menu-productos:hover .submenu-categorias,
.menu-productos:focus-within .submenu-categorias {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.submenu-categorias li {
    list-style: none;
    border-right: 1px solid #e5e9f2;
    border-bottom: none;
    flex: 1 1 0;
    min-width: 150px;
    max-width: 210px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

.submenu-categorias li:last-child {
    border-right: none;
}

.submenu-categorias a {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 14px 0;
    color: #1a2238;
    font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
    font-size: 0.9rem;
    text-decoration: none;
    background: #fff;
    transition:
        background 0.2s,
        color 0.2s;
    text-align: center;
    border-radius: 0;
}

.submenu-categorias a:hover {
    background: #f0f4fa;
    color: #0074d9;
}

/* Hero Section */
.hero-section {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Carousel */
#productos-destacados,
#armate-con-juegos {
    width: 100%;
    background: linear-gradient(to bottom, #d3d3d3, #808080);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding-block-end: 3%;
}

.carousel-inner {
    border-radius: 10px;
    max-width: 900px;
    margin: 0 auto;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 5px;
    color: white;
}

.carousel-caption h5 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
}

.carousel-caption p {
    font-size: 1rem;
    margin: 5px 0 0;
}

/* Quitamos duplicado de Bootstrap */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none !important;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flechas personalizadas */
.carousel-control-prev-icon::after {
    content: '❮';
    font-size: 2.5rem;
    color: rgb(0, 0, 0);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.carousel-control-next-icon::after {
    content: '❯';
    font-size: 2.5rem;
    color: rgb(0, 0, 0);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.carousel-control-prev,
.carousel-control-next {
    display: flex !important;
    align-items: center !important;
    /* centra verticalmente */
    justify-content: center !important;
    /* opcional: centra horizontal dentro del área */
}

/* Galería de productos (unboxing) */
.galeria {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.producto {
    background-color: #1e1e1e;
    padding: 10px;
    border-radius: 10px;
    width: 200px;
    border: 2px solid #00ffff;
}

.producto img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 2px solid #00ffff;
}

.producto p {
    margin: 0;
    font-size: 14px;
    color: #00ffff;
    text-shadow: none !important;
}

.producto:hover {
    transform: scale(1.05) rotate(3deg);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 255, 255, 0.5);
    text-decoration: none !important;
    text-shadow: none !important;
}

.producto a:hover {
    text-decoration: none !important;
}

/* Título estético para categorías con animación visible al cargar */
.categoria-titulo {
    font-family: 'Oswald', 'Montserrat', 'Roboto', Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow:
        0 4px 24px rgba(0, 116, 217, 0.25),
        0 1px 0 #283046;
    background: linear-gradient(90deg, #0074d9 0%, #283046 100%);
    border-radius: 18px;
    padding: 22px 60px;
    margin: 0 auto 18px auto;
    display: inline-block;
    box-shadow: 0 6px 32px rgba(0, 116, 217, 0.1);
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s cubic-bezier(0.77, 0, 0.18, 1),
        transform 0.8s cubic-bezier(0.77, 0, 0.18, 1);
}

.categoria-titulo.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
footer {
    background-color: #1a2238;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: auto;
}

footer p {
    color: #fff;
    font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

.site-footer {
    background:
        repeating-linear-gradient(-45deg,
            rgba(245, 158, 11, 0.06) 0,
            rgba(245, 158, 11, 0.06) 10px,
            rgba(15, 23, 42, 0.02) 10px,
            rgba(15, 23, 42, 0.02) 20px),
        linear-gradient(180deg, #0a1220 0%, #121f34 55%, #0e1a2c 100%);
    color: #e2e8f0;
    padding: 36px 0 18px;
    border-top: 2px solid #f59e0b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-footer .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.site-footer .footer-section {
    background: rgba(2, 6, 23, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 14px 14px 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 20px rgba(2, 6, 23, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    min-height: 200px;
}

.site-footer .footer-section h4 {
    margin: 0 0 10px;
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-size: 1.03rem;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #f8fafc;
    border-left: 4px solid #f59e0b;
    padding-left: 8px;
}

.site-footer .footer-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .footer-section li {
    margin-bottom: 8px;
}

.site-footer .footer-section p {
    margin: 0 0 7px;
    color: #d1d5db;
    font-size: 0.93rem;
    text-align: left;
}

.site-footer a {
    color: #7dd3fc;
    text-decoration: none;
    transition: color 140ms ease, text-shadow 140ms ease;
}

.site-footer a:hover {
    color: #fef08a;
    text-decoration: underline;
    text-shadow: 0 0 12px rgba(254, 240, 138, 0.24);
}

.site-footer .footer-bottom {
    border-top: 1px solid rgba(148, 163, 184, 0.32);
    padding-top: 14px;
    background: rgba(2, 6, 23, 0.28);
    border-radius: 12px;
    padding-left: 12px;
    padding-right: 12px;
}

.site-footer .footer-bottom p {
    margin: 0;
    color: #e5e7eb;
}

.site-footer .footer-legal {
    margin-top: 10px !important;
    color: #9ca3af !important;
    font-size: 0.86rem !important;
    line-height: 1.45;
}

/* Footer: icon links for contact */
.site-footer .footer-contact-icons {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}
.site-footer .footer-contact-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #e2e8f0;
    text-decoration: none;
    transition: transform 140ms ease, color 140ms ease, background 140ms ease;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    position: relative;
    overflow: visible;
}
.site-footer .footer-contact-icons a:hover {
    transform: translateY(-4px);
    color: #ffffff;
    background: rgba(255,255,255,0.04);
}
.site-footer .footer-contact-icons a::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    background: rgba(2,6,23,0.95);
    color: #fff;
    padding: 6px 10px;
    font-size: 0.85rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.32);
    z-index: 40;
}
.site-footer .footer-contact-icons a:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.site-footer .footer-contact-icons .fa-whatsapp { color: #25D366; }
.site-footer .footer-contact-icons .fa-instagram { color: #E1306C; }
.site-footer .footer-contact-icons .fa-envelope { color: #60A5FA; }

/* Accessible visually-hidden text */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Footer links: hover effect for list items */
.site-footer .footer-section ul li a {
    display: inline-block;
    transition: color 160ms ease, transform 160ms ease;
    position: relative;
    padding-right: 18px;
}
.site-footer .footer-section ul li a::after {
    content: '›';
    position: absolute;
    right: 0;
    opacity: 0;
    transform: translateX(-6px);
    transition: transform 160ms ease, opacity 160ms ease;
    color: #fef08a;
}
.site-footer .footer-section ul li:hover a {
    color: #fef08a;
    transform: translateX(3px);
}
.site-footer .footer-section ul li:hover a::after {
    opacity: 1;
    transform: translateX(0);
}

/* Ensure grid columns stretch to same height */
.site-footer .footer-grid {
    align-items: stretch;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 24px 0 14px;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .site-footer .footer-section {
        border-radius: 12px;
        padding: 12px 12px 10px;
    }

    .site-footer .footer-section h4 {
        font-size: 0.95rem;
    }

    .site-footer .footer-section p,
    .site-footer .footer-section li,
    .site-footer .footer-bottom p {
        font-size: 0.9rem;
    }

    .site-footer .footer-legal {
        font-size: 0.8rem !important;
    }
}

/* Responsive ajustes principales */

/* Hero section custom */
.hero-section-custom {
    background: none !important;
    min-height: 60vh !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.carousel-hero-custom {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
}

.carousel-img-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f4f8ff;
}

.titulo-seccion {
    font-family: 'Oswald', sans-serif;
    font-size: 2.1rem;
    color: #283046;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 32px;
}

.titulo-seccion-lg {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    color: #283046;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 32px;
}

.beneficio-box {
    background: #f0f4fa;
    border-radius: 16px;
    padding: 32px 18px;
    box-shadow: 0 2px 12px rgba(0, 116, 217, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, background 220ms ease;
    cursor: default;
}

.beneficio-box:hover,
.beneficio-box:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 14px 36px rgba(2, 116, 217, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.beneficio-box:active {
    transform: translateY(-2px) scale(0.998);
}

.beneficio-icon {
    color: #0074d9;
    transition: transform 220ms ease, color 220ms ease;
}

.beneficio-box:hover .beneficio-icon,
.beneficio-box:focus-within .beneficio-icon {
    transform: translateY(-6px) scale(1.08);
    color: #0057a8;
}

.beneficio-title {
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 6px;
    transition: color 220ms ease;
}

.beneficio-box:hover .beneficio-title,
.beneficio-box:focus-within .beneficio-title {
    color: #0b2b4a;
}

/* Carousel productos destacados (inicio) */
.carousel-producto-tarjeta-wrap {
    height: 100%;
    margin: 0 2px;
    min-height: 0;
}

.carousel-producto-tarjeta {
    background: #fff;
    border-radius: 1vw;
    box-shadow: 0 0.2vw 1vw #0074d91a;
    padding: 0.6vw 0.4vw 1vw 0.4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 18vw;
    max-width: 18vw;
    width: 18vw;
    margin: 0 0.2vw;
}

.carousel-producto-img {
    width: 100%;
    height: 180px;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0.6vw;
    margin-bottom: 0.7vw;
    background: #f8fafc;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
}

.carousel-producto-categoria {
    font-size: 0.85rem;
    color: #0074d9;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 0.3vw;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.carousel-producto-nombre {
    font-size: 0.98rem;
    font-weight: bold;
    color: #283046;
    margin-bottom: 0.5vw;
    text-align: left;
    min-width: 100% !important;
}

.carousel-producto-precio {
    font-size: 1.02rem;
    color: #009e3c;
    font-weight: bold;
    min-width: 100% !important;
    margin-bottom: 0;
}

.combo-card {
    position: relative;
    border: 2px solid #0074d9;
    box-shadow: 0 0.45vw 1.4vw rgba(0, 116, 217, 0.24);
    background:
        radial-gradient(120% 85% at 0% 0%, rgba(0, 116, 217, 0.10) 0%, rgba(0, 116, 217, 0.00) 48%),
        linear-gradient(180deg, #f6faff 0%, #ffffff 70%);
    overflow: hidden;
}

.combo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.combo-card::after {
    content: "";
    position: absolute;
    top: -28%;
    right: -16%;
    width: 58%;
    height: 58%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 116, 217, 0.22) 0%, rgba(0, 116, 217, 0.00) 72%);
}

.combo-card .carousel-producto-categoria {
    color: #0056a8;
    font-weight: 700;
}

.combo-card .carousel-producto-precio {
    color: #007b31;
}

.combo-card .carousel-producto-nombre {
    color: #1f2f4d;
}

.combo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: linear-gradient(135deg, #0074d9 0%, #0058a8 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 2px 10px rgba(0, 84, 167, 0.24);
}

.combo-card:hover {
    box-shadow: 0 0.95vw 2.25vw rgba(0, 116, 217, 0.32);
    transform: translateY(-0.35vw) scale(1.045);
}

@media (max-width: 700px) {
    .combo-badge {
        top: 8px;
        left: 8px;
        font-size: 0.68rem;
        padding: 3px 9px;
    }
}

@media (max-width: 700px) {
    .carousel-producto-tarjeta {
        min-height: 0;
        max-width: 100%;
        width: 100%;
        padding: 3vw 2vw 4vw 2vw;
    }

    .carousel-producto-img {
        width: 100%;
        height: 38vw;
        max-width: 100%;
        max-height: 38vw;
        object-fit: contain !important;
        object-position: center center !important;
        border-radius: 2vw;
        margin-bottom: 2vw;
        background: #f8fafc;
        display: block;
        margin-left: auto;
        margin-right: auto;
        box-sizing: content-box;
    }
}

/* Indicadores (dots) para Productos Destacados — visibilidad y posición similar al hero */
#carouselProductos {
    position: relative;
    /* asegurar posicionamiento para los indicadores */
    padding-bottom: 38px;
    /* espacio para los dots */
}

#carouselProductos .carousel-indicators {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 6;
}

#carouselProductos .carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(3, 9, 26, 0.18);
    border: none;
    transition: background-color 160ms ease, transform 160ms ease;
    cursor: pointer;
    box-shadow: none;
}

#carouselProductos .carousel-indicators li.active {
    background: #0074d9;
    /* acento azul
    */
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 116, 217, 0.12);
}


/* ====== ADMIN NAV MENU ====== */
.nav.nav-pills {
    margin-bottom: 2rem;
    background: #f7faff;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 12px #0074d91a;
    display: flex;
    gap: 1.2rem;
}

.nav.nav-pills .nav-item {
    margin-bottom: 0;
}

.nav.nav-pills .nav-link {
    color: #0074d9;
    background: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.08rem;
    padding: 0.5rem 1.2rem;
    transition:
        background 0.2s,
        color 0.2s;
}

.nav.nav-pills .nav-link.active,
.nav.nav-pills .nav-link:hover {
    background: #0074d9;
    color: #fff;
}

/* Responsive admin nav */
@media (max-width: 600px) {
    .nav.nav-pills {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .nav.nav-pills .nav-link {
        font-size: 1rem;
        padding: 0.5rem 0.7rem;
    }
}

/* ====== ADMIN NAV MENU COMO ENCABEZADO ====== */
.admin-header-nav {
    background: linear-gradient(90deg, #eaf6ff 0%, #fafdff 100%);
    box-shadow: 0 2px 16px #0074d91a;
    border-radius: 16px;
    padding: 1.2rem 1.5rem 1.2rem 1.5rem;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-header-nav .nav {
    background: none;
    box-shadow: none;
    padding: 0;
    gap: 2rem;
}

.admin-header-nav .nav-link {
    font-size: 1.18rem;
    font-weight: 700;
    color: #0074d9;
    border-radius: 8px;
    padding: 0.7rem 1.5rem;
    transition:
        background 0.2s,
        color 0.2s;
}

.admin-header-nav .nav-link.active,
.admin-header-nav .nav-link:hover {
    background: #0074d9;
    color: #fff;
}

@media (max-width: 600px) {
    .admin-header-nav {
        padding: 0.7rem 0.5rem;
        border-radius: 10px;
    }

    .admin-header-nav .nav {
        gap: 0.5rem;
        flex-direction: column;
    }

    .admin-header-nav .nav-link {
        font-size: 1rem;
        padding: 0.5rem 0.7rem;
    }
}

/* ====== FAQ SECTION ====== */
.faq-section {
    box-sizing: border-box;
}

.faq-lista {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
}

.faq-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 116, 217, 0.07);
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.faq-item:hover {
    box-shadow: 0 4px 18px #0074d933;
}

.faq-pregunta {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    font-family: 'Oswald', 'Montserrat', Arial, sans-serif;
    font-size: 1.13rem;
    color: #0074d9;
    text-align: left;
    padding: 18px 18px 14px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s;
}

.faq-pregunta i {
    font-size: 1.1rem;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

.faq-respuesta {
    font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
    color: #283046;
    font-size: 1.05rem;
    background: #f8fbff;
    padding: 0 18px 0 36px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.7s cubic-bezier(0.77, 0, 0.18, 1),
        opacity 0.5s cubic-bezier(0.77, 0, 0.18, 1),
        padding 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    will-change: max-height, opacity, padding;
}

.faq-respuesta.abierto {
    padding: 16px 18px 18px 36px;
    opacity: 1;
    /* max-height se setea dinámicamente por JS para que siempre se vea toda la respuesta */
}

#faq-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: stretch;
    width: 100%;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
}

#faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (max-width: 700px) {
    .faq-section {
        padding: 22px 6vw 18px 6vw;
    }

    .faq-lista {
        gap: 10px;
    }

    .faq-pregunta {
        font-size: 1rem;
        padding: 14px 8px 10px 8px;
    }

    .faq-respuesta {
        font-size: 0.98rem;
        padding: 0 10px 0 18px;
    }

    .faq-respuesta.abierto {
        padding: 12px 10px 14px 18px;
    }
}

/* Carrusel de imágenes en tarjetas de productos */
.producto-carrusel {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7fa;
    border-radius: 12px;
    box-shadow: 0 2px 12px #0074d91a;
    padding: 8px 0;
    min-height: 120px;
    overflow: hidden;
}

.producto-carrusel .carrusel-imgs {
    width: 100%;
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.producto-carrusel .carrusel-img {
    max-width: 240px;
    max-height: 160px;
    border-radius: 8px;
    box-shadow: 0 1px 8px #0074d91a;
    background: #fff;
    margin: 0 auto;
    display: inline-block;
    object-fit: contain;
    transition: opacity 0.3s;
}

.producto-carrusel .carrusel-prev,
.producto-carrusel .carrusel-prev,
.producto-carrusel .carrusel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 116, 217, 0.12);
    color: #0074d9;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition:
        background 0.2s,
        transform 0.2s;
    z-index: 2;
}

.producto-carrusel .carrusel-prev {
    left: 8px;
}

.producto-carrusel .carrusel-next {
    right: 8px;
}

.producto-carrusel .carrusel-next:hover {
    background: rgba(0, 116, 217, 0.22);
    color: #005fa3;
}

@media (max-width: 600px) {
    .producto-carrusel {
        max-width: 98vw;
        min-height: 80px;
        padding: 4px 0;
    }

    .producto-carrusel .carrusel-img {
        max-width: 98vw;
        max-height: 120px;
    }

    .producto-carrusel .carrusel-prev,
    .producto-carrusel .carrusel-next {
        width: 22px;
        height: 22px;
        font-size: 1rem;
    }
}

/* Carrusel en detalle de producto */
.producto-detalle-carrusel {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 12px auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #f7f7fa;
    border-radius: 14px;
    box-shadow: 0 2px 12px #0074d91a;
    padding: 12px 0;
    min-height: 180px;
    overflow: visible;
}

.producto-detalle-thumbs-horizontal {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 4px 8px 10px;
    margin-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap;
}

.detalle-thumb-btn {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border: 2px solid #dbe6f2;
    border-radius: 8px;
    padding: 0;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,116,217,0.08);
    transition: border-color 0.2s;
}

.detalle-thumb-btn.active {
    border-color: #0074d9;
    box-shadow: 0 2px 8px rgba(0,116,217,0.2);
}

.detalle-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.producto-detalle-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.producto-detalle-carrusel .carrusel-imgs {
    width: 100%;
    text-align: center;
    min-height: 180px;
    display: block;
    position: relative;
}

.producto-detalle-carrusel .carrusel-img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    box-shadow: 0 1px 12px #0074d91a;
    background: #fff;
    margin: 0 auto;
    object-fit: contain;
    transition: opacity 0.3s;
}

.producto-detalle-carrusel .carrusel-img[style*="display:none"],
.producto-detalle-carrusel .carrusel-img[style*="display: none"] {
    display: none !important;
}

.producto-detalle-stage .carrusel-prev,
.producto-detalle-stage .carrusel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 116, 217, 0.15);
    color: #0074d9;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,116,217,0.15);
    transition: background 0.2s, transform 0.2s;
    z-index: 2;
}

.producto-detalle-stage .carrusel-prev {
    left: 6px;
}

.producto-detalle-stage .carrusel-next {
    right: 6px;
}

.producto-detalle-stage .carrusel-prev:hover,
.producto-detalle-stage .carrusel-next:hover {
    background: rgba(0, 116, 217, 0.28);
    color: #005fa3;
}

/* Estilos para el menú lateral - minimal */
.menu-lateral,
.menu-lateral-admin {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1100;
    top: 0;
    left: 0;
    background: #0f1722;
    /* sólido y neutro */
    color: #fff;
    overflow-x: hidden;
    transition: width 260ms cubic-bezier(.2, .9, .2, 1), box-shadow 260ms;
    overflow-y: auto !important;
    padding-top: 64px;
    /* espacio para header */
    box-shadow: 4px 0 18px rgba(2, 6, 23, 0.35);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    backdrop-filter: none;
}

/* Overlay (visible cuando body.menu-abierto) */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.22);
    /* más sutil */
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms, visibility 200ms;
    z-index: 1050;
}

body.menu-abierto .menu-overlay {
    visibility: visible;
    opacity: 1;
}

.menu-lateral-list,
.menu-lateral-admin-list {
    list-style: none;
    padding: 10px 0 30px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Enlaces dentro de la barra lateral */
.menu-lateral a,
.menu-lateral-admin a {
    padding: 10px 14px;
    text-decoration: none !important;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 160ms ease, transform 120ms ease, color 160ms;
    border-left: 3px solid transparent;
    margin: 0 8px;
    border-radius: 6px;
}

.menu-lateral a::before,
.menu-lateral-admin a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
}

.menu-lateral a:hover,
.menu-lateral-admin a:hover {
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
    transform: translateX(2px);
    border-left-color: rgba(255, 255, 255, 0.04);
}

.menu-lateral a.active,
.menu-lateral a:focus,
.menu-lateral-admin a.active,
.menu-lateral-admin a:focus {
    background: rgba(255, 255, 255, 0.03);
    border-left-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 600;
}

/* Ícono pequeño a la izquierda dentro del link (si se agrega en HTML) */
.menu-lateral a .menu-icon,
.menu-lateral-admin a .menu-icon {
    width: 18px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Botón cerrar discreto */
.menu-lateral .close-btn,
.menu-lateral-admin .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: background 120ms, transform 120ms;
}

.menu-lateral .close-btn:hover,
.menu-lateral-admin .close-btn:hover {
    background: rgba(255, 255, 255, 0.02);
    transform: scale(1.02);
}

.arrow {
    display: inline-block;
    font-size: 16px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.6);
}

.flecha {
    display: inline-block;
    transition: transform 0.2s ease;
}

.submenu-toggle.active .flecha {
    transform: rotate(-90deg);
}

.submenu-toggle {
    position: relative;
    cursor: pointer;
}

.open-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(90deg, #0074d9 0%, #005fa3 100%);
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(3, 9, 26, 0.12);
}

.arrow {
    display: inline-block;
    font-size: 18px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7);
}

.flecha {
    display: inline-block;
    transition: transform 0.25s ease;
}

.submenu-toggle.active .flecha {
    transform: rotate(-90deg);
}

.submenu-toggle {
    position: relative;
    cursor: pointer;
}


/* Submenú estilo (versión compacta y sutil) */
.submenu {
    display: none;
    position: absolute;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.06);
    min-width: 220px;
    max-width: 420px;
    padding: 10px 12px;
    left: 0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    transition: opacity 200ms ease, transform 200ms ease;
    transform-origin: top left;
}

/* Compact mobile submenu used inside the lateral menu */
.submenu-celu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 260ms cubic-bezier(.2, .9, .2, 1), opacity 180ms;
    background: transparent;
    margin: 0;
    padding: 0 8px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.submenu-celu.visible {
    max-height: 220px;
    /* suficiente para listar opciones cortas */
    opacity: 1;
    padding: 6px 8px;
}

.submenu-celu.visible a {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 140ms;
}

.submenu-celu.visible a:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* reduce gap inside mega submenu columns */
.submenu .col {
    gap: 6px;
}


.tipo-luz-checkboxes {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
}

.checkbox-tipo-luz {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f6f8fc;
    border: 2px solid #e3eaf7;
    border-radius: 8px;
    padding: 8px 18px 8px 12px;
    font-weight: bold;
    font-size: 1.08rem;
    cursor: pointer;
    transition:
        border 0.2s,
        box-shadow 0.2s;
    box-shadow: 0 1px 6px #0074d91a;
    user-select: none;
}

.checkbox-tipo-luz input[type='checkbox'] {
    accent-color: #0074d9;
    width: 20px;
    height: 20px;
    margin: 0 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

.checkbox-tipo-luz.fria span {
    color: #0074d9;
}

.checkbox-tipo-luz.calida span {
    color: #e6a100;
}

.checkbox-tipo-luz.neutra span {
    color: #888;
}

.checkbox-tipo-luz:hover,
.checkbox-tipo-luz input[type='checkbox']:focus+span {
    border-color: #0074d9;
    box-shadow: 0 2px 12px #0074d933;
}

.checkbox-tipo-luz input[type='checkbox']:checked+span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.colores-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

.checkbox-color {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f0f4fa 60%, #e3eaf7 100%);
    border: 2px solid #888;
    border-radius: 8px;
    padding: 6px 16px;
    font-weight: 500;
    font-size: 1.08rem;
    cursor: pointer;
    transition:
        box-shadow 0.2s,
        border-color 0.2s;
}

.checkbox-color input[type='checkbox'] {
    accent-color: #888;
    width: 18px;
    height: 18px;
    margin: 0;
}

.checkbox-color.blanco {
    border-color: #eee;
}

.checkbox-color.negro {
    border-color: #222;
}

.checkbox-color.gris {
    border-color: #aaa;
}

.checkbox-color.rojo {
    border-color: #d90000;
}

.checkbox-color.azul {
    border-color: #0074d9;
}

.checkbox-color.verde {
    border-color: #00bfae;
}

.checkbox-color.amarillo {
    border-color: #ffc107;
}

.checkbox-color.marron {
    border-color: #8d5524;
}

.checkbox-color.otro {
    border-color: #888;
}

.checkbox-color input[type='checkbox']:checked+span {
    font-weight: bold;
    color: #0074d9;
}

.checkbox-color input[type='checkbox']:checked+span,
.checkbox-color input[type='checkbox']:focus-visible+span {
    color: #0074d9;
    border-color: #0074d9;
}

.amperes-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

.checkbox-amperes {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f0f4fa 60%, #e3eaf7 100%);
    border: 2px solid #888;
    border-radius: 8px;
    padding: 6px 16px;
    font-weight: 500;
    font-size: 1.08rem;
    cursor: pointer;
    transition:
        box-shadow 0.2s,
        border-color 0.2s;
}

.checkbox-amperes input[type='checkbox'] {
    accent-color: #888;
    width: 18px;
    height: 18px;
    margin: 0;
}

.checkbox-amperes input[type='checkbox']:checked+span {
    font-weight: bold;
    color: #0074d9;
}

.checkbox-amperes input[type='checkbox']:checked+span,
.checkbox-amperes input[type='checkbox']:focus-visible+span {
    color: #0074d9;
    border-color: #0074d9;
}

/* ====== MODAL DIMENSIONES PRODUCTO ADMIN ====== */
#modalDimensiones {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0008;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#modalDimensiones.active {
    display: flex;
}

#modalDimensiones .modal-content {
    background: #fff;
    padding: 32px 24px;
    border-radius: 12px;
    max-width: 350px;
    width: 90%;
    box-shadow: 0 2px 24px #0074d955;
    position: relative;
    animation: modalFadeIn 0.25s;
}

#modalDimensiones .modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: red;
}

#modalDimNombre {
    margin-bottom: 18px;
    color: #0074d9;
    font-size: 1.25rem;
    font-weight: bold;
}

#modalDimBody {
    font-size: 1.08rem;
    color: #222;
    line-height: 1.7;
}

.metodo-destacado {
    position: relative;
    border: 2px solid #28a745;
    background: linear-gradient(180deg, #f8fff9, #ffffff);
}

.discount-badge {
    position: absolute;
    top: -12px;
    right: -12px;
    background: linear-gradient(90deg, #28a745, #0a8f45);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(10, 143, 69, 0.35);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.discount-badge i {
    font-size: 0.8rem;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 900px) {
    .producto-detalle-carrusel {
        max-width: 98vw;
        min-height: 160px;
        padding: 8px 0;
    }

    .producto-detalle-carrusel .carrusel-img {
        max-width: 98vw;
        max-height: 160px;
    }

    .producto-detalle-stage .carrusel-prev,
    .producto-detalle-stage .carrusel-next {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }
}


/* -------- Precios adicionales sencillo -------- */
.producto-precios-adicionales {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #444;
    width: 100%;
    box-sizing: border-box;
}

/* Precio por transferencia (solo más visible que cuotas) */
.producto-precios-adicionales .precio-transfer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: black;
    /* verde suave */
    font-weight: 700;
}

.producto-precios-adicionales .precio-transfer i {
    font-size: 1.1rem;
    opacity: 0.8;
}

.producto-precios-adicionales .precio-transfer .transfer-amount {
    font-weight: 800;
    font-size: 1rem;
    color: #117a37;
}

/* Precio en cuotas secundario - vertically stacked */
.producto-precios-adicionales .precio-cuotas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #555;
    font-weight: 600;
    font-size: 0.9rem;
}

.mercadopago-logo {
    width: 5vw !important;
    height: auto;
    object-fit: contain;
}

/* Mobile más cómodo */
@media (max-width: 700px) {
    .producto-precios-adicionales {
        font-size: 0.95rem;
        gap: 0.35rem;
    }

    .producto-precios-adicionales .precio-transfer .transfer-amount {
        font-size: 1.03rem;
    }
}

/* =================== MAX-WIDTH 768 CONSOLIDADO =================== */
@media (max-width: 768px) {

    /* Bloque original: linea 550 */
    .checkout-paso .card-body {
        padding: 22px;
    }

    .checkout-paso .card-title {
        font-size: 1.2em;
        margin-bottom: 20px;
    }

    .checkout-stepper {
        margin-bottom: 30px;
        gap: 0;
    }

    .stepper-line {
        margin: 0 4px;
        min-width: 25px;
    }

    .stepper-circle {
        width: 45px;
        height: 45px;
        font-size: 1em;
    }

    .stepper-label {
        font-size: 0.75em;
        max-width: 75px;
        margin-top: 8px;
    }

    .stepper-item {
        min-width: 60px;
    }

    #sidebar-carrito-items {
        max-height: none;
    }

    .resumen-carrito-flotante {
        margin-bottom: 25px;
    }

    .metodo-pago-card {
        padding: 18px;
        gap: 12px;
    }

    .metodo-icon {
        font-size: 2em;
    }

    .checkout-paso .btn-lg {
        padding: 12px 20px;
        font-size: 0.95em;
    }

    /* Bloque original: linea 850 */
    .filtro-opciones {
        grid-template-columns: repeat(2, 1fr);
    }

    .filtros-panel {
        max-width: 100%;
    }

    /* Bloque original: linea 1676 */

    /* --- Menú lateral y botón --- */
    .open-menu-btn {
        display: flex !important;
        position: static;
        left: auto;
        z-index: 1100;
        background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
        color: #f8fbff;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 14px;
        font-size: 1.15rem;
        width: 42px;
        height: 42px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0;
        transition: transform 160ms ease, box-shadow 180ms ease, filter 180ms ease;
    }

    .open-menu-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.28);
        filter: saturate(1.08);
    }

    .menu-lateral,
    .menu-lateral-admin {
        display: flex;
        flex-direction: column;
        padding-top: 72px;
        width: 0;
        max-width: 84vw;
        min-width: 0;
        background:
            radial-gradient(circle at top left, rgba(59, 130, 246, 0.22), transparent 32%),
            linear-gradient(180deg, #081120 0%, #0f1b31 54%, #132238 100%);
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        overflow-y: auto;
        box-shadow: 12px 0 34px rgba(2, 6, 23, 0.38);
        transition: width 0.3s ease;
    }

    .menu-lateral::before,
    .menu-lateral-admin::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 88px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
        pointer-events: none;
    }

    .menu-lateral[style*='width: 250px'],
    .menu-lateral-admin[style*='width: 250px'] {
        width: min(84vw, 340px) !important;
        min-width: 260px;
        max-width: 90vw;
    }

    .menu-lateral-list,
    .menu-lateral-admin-list {
        padding: 8px 0 28px;
        gap: 10px;
    }

    .menu-lateral-list a,
    .menu-lateral-admin-list a {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        padding: 14px 14px 14px 16px;
        margin: 0 12px;
        color: rgba(255, 255, 255, 0.96);
        text-decoration: none;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.055);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        transition: transform 160ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .menu-lateral-list a::before,
    .menu-lateral-admin-list a::before {
        display: none;
    }

    .menu-lateral-list a:hover,
    .menu-lateral-list a:focus,
    .menu-lateral-admin-list a:hover,
    .menu-lateral-admin-list a:focus {
        background: rgba(37, 99, 235, 0.22);
        border-color: rgba(96, 165, 250, 0.36);
        box-shadow: 0 10px 22px rgba(2, 6, 23, 0.2);
        transform: translateX(3px);
    }

    .menu-lateral-list a .menu-icon,
    .menu-lateral-admin-list a .menu-icon {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.08);
        color: #cfe5ff;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .menu-lateral .submenu-toggle,
    .menu-lateral-admin .submenu-toggle {
        position: relative;
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(96, 165, 250, 0.2);
    }

    .menu-lateral .submenu-celu,
    .menu-lateral-admin .submenu-celu {
        margin: 0;
        padding: 0;
        border-radius: 18px;
        background: transparent;
        border: 0;
        box-shadow: none;
        transform: translateY(-10px) scale(0.98);
        transform-origin: top left;
        pointer-events: none;
        transition:
            max-height 300ms cubic-bezier(.2, .9, .2, 1),
            opacity 220ms ease,
            transform 260ms cubic-bezier(.2, .9, .2, 1),
            margin 220ms ease,
            padding 220ms ease;
    }

    .menu-lateral .submenu-celu.visible,
    .menu-lateral-admin .submenu-celu.visible {
        margin: 2px 12px 6px;
        padding: 10px 8px;
        max-height: 360px;
        background:
            radial-gradient(circle at 16% -10%, rgba(96, 165, 250, 0.26), transparent 46%),
            linear-gradient(180deg, rgba(30, 58, 138, 0.3), rgba(15, 23, 42, 0.54));
        border: 1px solid rgba(147, 197, 253, 0.22);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            0 16px 28px rgba(2, 6, 23, 0.3);
        transform: translateY(0) scale(1);
        pointer-events: auto;
        position: relative;
        backdrop-filter: blur(4px);
    }

    .submenu-celu.visible a {
        margin: 0;
        padding: 10px 12px 10px 14px;
        font-size: 0.92rem;
        font-weight: 560;
        color: rgba(239, 246, 255, 0.95);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: 11px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        letter-spacing: 0.2px;
        transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

    .submenu-celu.visible a:hover {
        background: rgba(59, 130, 246, 0.24);
        border-color: rgba(147, 197, 253, 0.32);
        transform: translateX(2px);
        box-shadow: 0 8px 18px rgba(2, 6, 23, 0.18);
    }

    .submenu-celu.visible a+a {
        margin-top: 5px;
    }

    .arrow {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: #dbeafe;
    }

    .menu-lateral .close-btn,
    .menu-lateral-admin .close-btn {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #f8fbff;
        box-shadow: 0 10px 24px rgba(2, 6, 23, 0.24);
    }

    .menu-lateral .close-btn:hover,
    .menu-lateral-admin .close-btn:hover {
        background: rgba(59, 130, 246, 0.24);
        transform: translateY(-1px);
    }

    .menu-overlay {
        background: rgba(2, 6, 23, 0.46);
        backdrop-filter: blur(3px);
    }

    /* --- Header en mobile --- */
    .main-header {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 8px 8px;
        min-height: 48px;
        max-height: 48px;
        background: #fff;
        border-bottom: 1px solid #e5e9f2;
        gap: 6px;
        flex: 1;
    }

    /* --- Menu button container --- */
    .menu-button-container {
        display: flex !important;
        align-items: center;
        height: 48px;
        flex-shrink: 0;
        padding: 0 4px;
        order: -2;
    }

    /* --- Logo hidden on mobile --- */
    #logo-placeholder {
        display: none !important;
    }

    /* --- Search bar mobile/desktop visibilidad --- */
    .search-bar-desktop {
        display: none !important;
    }

    .search-bar-mobile {
        display: flex !important;
        min-width: 20vw;
        max-width: 60vw;
        flex: 1;
        max-height: auto;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        gap: 4px;
        order: -1;
    }

    .search-bar-mobile input[type='text'] {
        flex: 1;
        width: auto;
        max-width: 200px;
        font-size: 0.85rem;
        padding: 6px 10px;
        border-radius: 20px;
        border: 1px solid #ccc;
        min-width: 100px;
    }

    .search-bar-mobile button {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        border-radius: 50%;
        background: #333;
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* --- Carrito en mobile --- */
    .cart-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 48px;
        min-height: 48px;
        padding: 0 8px;
        font-size: 1.3rem;
        color: #333;
        margin: 0;
        border: none;
        flex-shrink: 0;
        transition: color 0.2s;
    }

    .fas.fa-shopping-cart {
        font-size: 1.4rem;
    }

    .cart-link:hover {
        color: #0074d9;
    }

    .search-bar-mobile input[type='text'] {
        width: 90vw;
        max-width: 98vw;
        font-size: 1rem;
        padding: 7px 10px;
        border-radius: 20px;
        border: 1px solid #ccc;
    }

    .search-bar-mobile button {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
        margin-left: 4px;
        border-radius: 50%;
        background: #333;
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Navbar y navegación --- */
    .navbar {
        display: none;
    }

    /* --- Hero section y carouseles --- */
    .hero-section {
        height: 32vh !important;
        min-height: 120px !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 0;
    }

    .hero-carousel-img {
        height: 32vh !important;
        min-height: 120px !important;
        border-radius: 0;
    }

    .carousel-inner {
        border-radius: 0;
        max-width: 100vw;
    }

    .carousel-caption {
        font-size: 0.95rem;
        padding: 8px 4px;
        border-radius: 6px;
    }

    /* --- Secciones y grillas --- */
    .seccion-link {
        min-height: 140px;
        border-radius: 14px;
        font-size: 0.98rem;
        margin-bottom: 12px;
        padding: 16px 8px;
        background: #fff;
        border: 1px solid #f0f0f0;
        box-shadow: 0 2px 12px rgba(0, 116, 217, 0.08);
        transition: all 0.3s ease;
    }

    .seccion-link:hover {
        box-shadow: 0 6px 24px rgba(0, 116, 217, 0.15);
        border-color: #0074d9;
        transform: translateY(-4px);
        background: #f0f8ff;
    }

    .seccion-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 8px;
        object-fit: contain;
        filter: drop-shadow(0 2px 8px rgba(0, 116, 217, 0.1));
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .seccion-link:hover .seccion-icon {
        transform: scale(1.1) rotate(-5deg);
        filter: drop-shadow(0 4px 16px rgba(0, 116, 217, 0.2));
    }

    .seccion-titulo {
        font-size: 0.98rem;
        margin-top: 6px;
        font-weight: 600;
        color: #283046;
        line-height: 1.3;
    }

    /* --- Título de sección en mobile --- */
    .titulo-seccion {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
        padding: 12px 8px;
        letter-spacing: 1px;
    }

    .categoria-titulo {
        font-size: 1.55rem;
        letter-spacing: 1.2px;
        padding: 14px 20px;
        border-radius: 12px;
        margin-block-end: 0;
    }

    .hero-section.hero-section-gradient {
        min-height: 120px !important;
        height: 20vh !important;
        padding: 0.75rem 0.5rem !important;
    }

    /* --- Contenedor de secciones en mobile --- */
    #secciones-variety {
        padding: 16px 8px;
        margin-top: 8px;
        margin-bottom: 16px;
    }

    #secciones-variety .row>div {
        margin-bottom: 12px;
    }

    .productos-grid-custom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 2vw;
        margin-bottom: 5vw !important;
    }

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

    .titulo-productos {
        font-size: 1.2rem;
        padding: 0.7rem 0.2rem;
        margin-top: 1.2rem;
        margin-bottom: 1rem;
    }

    /* --- Footer --- */
    footer {
        font-size: 0.95rem;
        padding: 10px 0;
    }

    footer p {
        font-size: 0.95rem !important;
    }

    /* --- Productos y tarjetas --- */
    .carousel-producto-tarjeta,
    .producto-tarjeta {
        min-height: 38vw;
        max-width: none;
        width: 100%;
        padding: 3vw 2.5vw 4vw 2.5vw;
        border-radius: 4vw;
        box-shadow: 0 0.6vw 2vw #0074d933;
        display: flex;
        flex-direction: column;
        background: #ffffff;
    }

    .carousel-producto-img,
    .producto-tarjeta img {
        width: 100%;
        height: 38vw;
        max-width: 100%;
        max-height: 38vw;
        object-fit: contain !important;
        border-radius: 2vw;
        margin-bottom: 2vw;
        background: #f8fafc;
        display: block;
        margin-left: auto;
        margin-right: auto;
        box-sizing: content-box;
    }

    .producto-carrusel {
        max-width: 100%;
        min-height: 80px;
        padding: 4px 0;
        border-radius: 4vw;
    }

    .producto-carrusel .carrusel-img {
        max-width: 100%;
        max-height: 120px;
        border-radius: 2vw;
    }

    .producto-carrusel .carrusel-prev,
    .producto-carrusel .carrusel-next {
        width: 22px;
        height: 22px;
        font-size: 1rem;
        left: 2px;
        right: 2px;
    }

    .producto-categoria,
    .carousel-producto-categoria {
        font-size: 0.9rem;
        margin-bottom: 0.8vw;
        font-weight: 500;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'Montserrat', 'Roboto', sans-serif;
    }

    .text-center {
        margin-top: 2vw;
    }

    .producto-nombre,
    .carousel-producto-nombre {
        font-size: 1.25rem;
        margin-bottom: 0.8vw;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.35;
        font-family: 'Montserrat', 'Roboto', sans-serif;
        min-height: 3.75rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .producto-precio,
    .carousel-producto-precio {
        font-size: 0.9rem !important;
        margin-bottom: 0.8vw;
        font-weight: 800;
        color: #0a8f45;
        line-height: 1.2;
        font-family: 'Montserrat', 'Roboto', sans-serif;

    }

    /* ===============================
       PRECIOS ADICIONALES (dinámicos)
       =============================== */

    .producto-precios-adicionales {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 1.2rem;
        padding-top: 1rem;
        border-top: 1px solid #ddd;
        font-family: 'Montserrat', 'Roboto', sans-serif;
        width: 100%;
        box-sizing: border-box;
        flex: 1;
    }

    /* -------- TRANSFERENCIA (destacada) -------- */
    .producto-precios-adicionales .precio-transfer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.8rem;
        background: linear-gradient(90deg, #f0fef7 0%, #ffffff 100%);
        border-left: 5px solid #0a8f45;
        padding: 0.7rem 1rem;
        border-radius: 8px;
        color: #0a8f45;
        font-weight: 700;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .producto-precios-adicionales .precio-transfer::before {
        content: "";
        display: none;
    }

    .producto-precios-adicionales .precio-transfer span {
        flex: 1;
    }

    .producto-precios-adicionales .precio-transfer .transfer-amount {
        font-weight: 900;
        font-size: 1.15rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* -------- CUOTAS (vertical layout) -------- */
    .producto-precios-adicionales .precio-cuotas {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        color: #555;
        font-weight: 600;
        font-size: 0.95rem;
        padding-left: 0;
        line-height: 1.4;
    }

    .producto-precios-adicionales .precio-cuotas::before {
        content: "Cuotas sin interes";
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.9rem;
        opacity: 0.8;
        font-weight: 500;
    }

    .producto-precios-adicionales .precio-cuotas>* {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.8rem;
        padding: 0.35rem 0;
    }

    .producto-precios-adicionales .precio-cuotas>* span:first-child {
        flex: 1;
        color: #666;
    }

    .producto-precios-adicionales .precio-cuotas>* span:last-child {
        font-weight: 700;
        color: #0a8f45;
        white-space: nowrap;
    }

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

    .producto-tarjeta-botones {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 0.8rem;
    }

    .producto-tarjeta-botones .btn-whatsapp,
    .producto-tarjeta-botones .btn-consultar-stock {
        min-height: 40px;
        font-size: 0.95rem;
        border-radius: 999px;
        width: 100%;
    }

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

    @media (max-width: 700px) {

        .producto-precios-adicionales {
            font-size: 0.95rem;
            gap: 0.45rem;
        }

        .producto-precios-adicionales .precio-transfer {
            padding: 8px 12px;
        }

        .producto-precios-adicionales .precio-transfer .transfer-amount {
            font-size: 1.05rem;
        }

        .producto-precios-adicionales .precio-cuotas {
            font-size: 0.85rem;
        }

        .producto {
            height: 30vh;
        }

        .producto a {
            display: flex;
            flex-direction: column;
            width: 100% !important;
            height: 100% !important;
        }

        .producto p {
            flex: 1;
            font-size: 0.9rem !important;
            padding-top: 12%;
            margin: 0;
            width: 100%;
        }

        .producto img {
            flex: 2;
            width: 100% !important;
            height: 100%;
            margin: 0;
        }

        .contenido {
            font-size: 1.5rem !important;
            margin-bottom: 20px !important;
        }

        .menu-button-container {
            width: 8%;
        }
    }

    .producto-tarjeta-botones {
        flex-direction: column;
        gap: 1vw;
        margin-top: 2vw;
    }

    .producto-tarjeta-botones .btn-whatsapp,
    .producto-tarjeta-botones .btn-consultar-stock {
        min-height: 38px;
        font-size: 1rem;
        border-radius: 2vw;
        width: 100%;
        margin-bottom: 1vw;
    }

    /* --- Otros elementos mobile --- */
    .contenedor-unite h1 {
        font-size: 2rem !important;
        text-align: center;
        margin: 0 auto;
        padding-left: 0;
    }

    .producto {
        height: 30vh;
    }

    .producto a {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        height: 100% !important;
    }

    .producto p {
        flex: 1;
        font-size: 0.9rem !important;
        padding-top: 12%;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .producto img {
        flex: 2;
        width: 100% !important;
        height: 100%;
        margin: 0%;
    }

    .contenido {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }

    .menu-button-container {
        width: 8%;
    }

    /* Bloque original: linea 3576 */
    .hero-section {
        height: 32vh !important;
        min-height: 120px !important;
    }

    .hero-carousel-img {
        height: 32vh !important;
        min-height: 120px !important;
    }

    /* Bloque original: linea 3638 */
    .seccion-icon {
        width: 38px;
        height: 38px;
    }

    .seccion-titulo {
        font-size: 0.98rem;
    }

    #secciones-variety .row>div {
        margin-bottom: 12px;
    }

    /* Bloque original: linea 4185 */
    .navbar {
        display: none;
    }

    .hero-section {
        background-size: cover !important;
        background-position: center !important;
        height: 40vh !important;
    }

    .contenedor-unite h1 {
        font-size: 2rem !important;
        text-align: center;
        margin: 0 auto;
        padding-left: 0;
    }

    .producto {
        height: 30vh;
    }

    .producto a {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        height: 100% !important;
    }

    .producto p {
        flex: 1;
        font-size: 0.9rem !important;
        padding-top: 12%;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .producto img {
        flex: 2;
        width: 100% !important;
        height: 100%;
        margin: 0%;
    }

    .contenido {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }

    footer p {
        font-size: 0.95rem !important;
    }

    /* Bloque original: linea 4510 */
    #carouselProductos {
        padding-bottom: 30px;
    }

    #carouselProductos .carousel-indicators li {
        width: 9px;
        height: 9px;
    }

    /* Bloque original: linea 5473 */
    .main-header {
        padding: 1% !important;
    }

    #logo-placeholder {
        width: 15%;
        min-height: 30px;
    }

    .logo-img {
        max-height: 100%;
        width: auto;
    }

    .cart-link {
        margin: 0 !important;
        padding-right: 2%;
    }

    .navbar {
        display: none !important;
    }

    .hero-section.hero-section-custom {
        height: 20vh !important;
        max-height: 20vh !important;
        min-height: 10vh !important;
        padding: 0 !important;
    }


    #carouselHero {
        height: 20vh !important;
    }

    #carouselSecciones .carousel-inner {
        display: flex;
        flex-direction: row;
    }

    .carousel-img-cover {
        object-fit: cover !important;
    }

    /* Igualar bloque de precios adicionales con desktop en mobile */
    .producto-precios-adicionales {
        gap: 0.3rem !important;
        margin-top: 0.6rem !important;
        font-size: 0.9rem !important;
        color: #444 !important;
    }

    .producto-precios-adicionales .precio-transfer {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        color: black !important;
        font-weight: 700 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .producto-precios-adicionales .precio-transfer::before {
        content: none !important;
    }

    .producto-precios-adicionales .precio-transfer .transfer-amount {
        font-weight: 800 !important;
        font-size: 1rem !important;
        color: #117a37 !important;
    }

    .producto-precios-adicionales .precio-cuotas {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        color: #555 !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Ajuste final de espaciado header mobile */
    .main-header {
        padding: 8px 10px !important;
        gap: 10px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }

    .menu-button-container {
        padding: 0 !important;
        margin-right: 2px !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .open-menu-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.25rem !important;
    }

    .search-bar-mobile {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 4px !important;
        gap: 6px !important;
    }

    .search-bar-mobile input[type='text'] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 7px 12px !important;
        font-size: 0.92rem !important;
    }

    .search-bar-mobile button {
        width: 34px !important;
        height: 34px !important;
        margin-left: 0 !important;
        flex: 0 0 34px !important;
    }

    .cart-link {
        padding: 0 6px !important;
        margin-left: 2px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex: 0 0 auto !important;
        font-size: 1.2rem !important;
    }

    .titulo-seccion-lg {
        font-size: 1.5rem;
    }

    .btn.btn-success.btn-whatsapp.ml-2 {
        margin-inline-start: 0 !important;
    }

    .container.mt-4 {
        margin-top: 0 !important;
    }
}

/* Espaciado extra para el texto de categoria en tarjetas */
.producto-categoria,
.carousel-producto-categoria {
    margin-top: 8px !important;
}

/* Carrito mobile: mejorar selectores de envio */
@media (max-width: 768px) {
    .forma-entrega-row {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    #selector-local,
    #selector-correo,
    .entrega-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 10px !important;
        border-radius: 10px !important;
        align-items: flex-start !important;
    }

    .entrega-icon {
        margin-right: 10px !important;
        flex: 0 0 auto;
    }

    .entrega-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .entrega-txt {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }

    .entrega-txt small {
        display: block;
        margin-top: 2px;
        font-size: 0.82rem !important;
        line-height: 1.2;
    }
}

/* Ajuste de precio transferencia: si no entra en una linea, baja el monto */
.producto-precios-adicionales .precio-transfer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.35rem;
    row-gap: 0.1rem;
}

.producto-precios-adicionales .precio-transfer .transfer-amount {
    margin-left: 0;
    white-space: nowrap;
    max-width: 100%;
}

/* En ancho muy chico, forzar el monto abajo para mantener legibilidad */
@media (max-width: 390px) {
    .producto-precios-adicionales .precio-transfer .transfer-amount {
        flex-basis: 100%;
        margin-left: 0;
    }
}

/* ==========================================
   OPTIMIZACIONES RESPONSIVAS MOBILE - PANTALLAS MUY PEQUEÑAS
   Archivo complementario para mejorar experiencia en celulares
   ========================================== */
/* ==========================================
   OPTIMIZACIONES RESPONSIVAS MOBILE - PANTALLAS MUY PEQUEÑAS
   Archivo complementario para mejorar experiencia en celulares
   ========================================== */

/* iPhone y celulares muy pequeños (menos de 480px) */
@media (max-width: 480px) {

    /* Header */
    .main-header {
        padding: 8px 8px;
        min-height: 50px;
        max-height: 60px;
    }

    #logo-placeholder {
        min-height: 25px;
    }

    .logo-img {
        max-height: 35px;
    }

    .cart-link {
        font-size: 1.3rem;
        margin-left: 5px;
        padding: 3px;
    }

    /* Navegación móvil */
    .open-menu-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        right: 8px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .open-menu-btn:hover {
        transform: translateY(-1px);
    }

    .menu-lateral-list a {
        font-size: 0.96rem;
        padding: 12px 12px 12px 14px;
        border-radius: 14px;
        margin: 6px 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.95);
    }

    /* Search bar */
    .search-bar-mobile {
        padding: 6px 8px;
    }

    .search-bar-mobile input[type='text'] {
        font-size: 0.9rem;
        padding: 8px 12px;
    }

    .search-bar-mobile button {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        margin-left: 6px;
    }

    /* Hero section */
    .hero-section {
        height: 20vh;
        min-height: 100px;
    }

    .hero-carousel-img {
        height: 20vh;
        min-height: 100px;
    }

    /* Secciones */
    .seccion-link {
        min-height: 80px;
        font-size: 0.85rem;
        padding: 8px 6px;
        border-radius: 8px;
    }

    .seccion-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 3px;
    }

    .seccion-titulo {
        font-size: 0.8rem;
        margin-top: 1px;
        line-height: 1.1;
    }

    /* Títulos */
    .titulo-productos {
        font-size: 1.15rem;
        padding: 0.6rem 0.2rem;
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .titulo-seccion {
        font-size: 1.5rem;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }

    .categoria-titulo {
        font-size: 1.2rem;
        letter-spacing: 0.8px;
        padding: 12px 14px;
        border-radius: 12px;
    }

    .hero-section.hero-section-gradient {
        min-height: 100px !important;
        height: 15vh !important;
        padding: 0.5rem 0.35rem !important;
    }

    /* Grillas de productos */
    .productos-grid-custom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 1.5vw;
        margin-bottom: 1.5vw;
        padding: 0 6px;
    }

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

    /* Tarjetas de productos */
    .producto-tarjeta,
    .carousel-producto-tarjeta {
        min-height: 30vw;
        max-width: none;
        width: 100%;
        padding: 2vw 1.5vw 2.5vw 1.5vw;
        border-radius: 3vw;
    }

    .producto-tarjeta img,
    .carousel-producto-img {
        height: 30vw;
        max-height: 30vw;
        margin-bottom: 1.5vw;
        border-radius: 2vw;
    }

    /* Ajuste específico: en el carousel de Productos Destacados permitir 2 columnas en móvil */
    @media (max-width: 767px) {
        #carouselProductos .carousel-producto-tarjeta {
            max-width: none;
            width: 100%;
            min-height: auto;
            padding: 1.2rem 0.75rem;
        }

        #carouselProductos .carousel-producto-img {
            height: 28vw;
            max-height: 28vw;
        }
    }

    .producto-nombre,
    .carousel-producto-nombre {
        font-size: 0.95rem;
        min-height: 2rem;
        line-height: 1.25;
    }

    .producto-precio {
        font-size: 1.1rem;
    }

    .producto-categoria {
        font-size: 0.8rem;
        margin-bottom: 0.5vw;
    }

    .producto-tarjeta-botones {
        gap: 0.6vw;
        margin-top: 1.2vw;
    }

    .producto-tarjeta-botones .btn-whatsapp,
    .producto-tarjeta-botones .btn-consultar-stock {
        min-height: 32px;
        font-size: 0.85rem;
        padding: 8px 10px;
    }

    /* Precios adicionales */
    .producto-precios-adicionales {
        gap: 0.3rem;
        margin-top: 0.8rem;
        font-size: 0.9rem;
    }

    .producto-precios-adicionales .precio-transfer {
        padding: 6px 10px;
        font-size: 0.9rem;
    }

    .producto-precios-adicionales .precio-transfer .transfer-amount {
        font-size: 1rem;
    }

    .producto-precios-adicionales .precio-cuotas {
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    /* Carrusel en tarjetas */
    .producto-carrusel {
        max-width: 95vw;
        min-height: 70px;
    }

    .producto-carrusel .carrusel-img {
        max-width: 95vw;
        max-height: 100px;
    }

    .producto-carrusel .carrusel-prev,
    .producto-carrusel .carrusel-next {
        width: 20px;
        height: 20px;
        font-size: 0.9rem;
    }

    /* Detalle producto */
    .producto-detalle-box {
        flex-direction: column;
        padding: 1rem 0.5rem;
        gap: 1rem;
    }

    .producto-detalle-nombre {
        font-size: 1.5rem;
    }

    .producto-detalle-precio {
        font-size: 1.4rem;
    }

    .producto-detalle-img-wrap {
        max-width: 100%;
        padding: 0.8rem;
    }

    .producto-detalle-carrusel {
        max-width: 95vw;
        min-height: 120px;
    }

    .producto-detalle-carrusel .carrusel-img {
        max-width: 95vw;
        max-height: 130px;
    }

    .producto-detalle-botones {
        gap: 0.6rem;
        flex-direction: column;
    }

    .btn-agregar-carrito,
    .btn-whatsapp {
        width: 100%;
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }

    /* Checkout */
    .checkout-wrapper {
        padding: 0 10px 15px;
    }

    .checkout-paso .card-body {
        padding: 15px;
    }

    .checkout-paso .card-title {
        font-size: 1.1em;
        margin-bottom: 12px;
    }

    .checkout-stepper {
        padding: 15px 8px;
        margin-bottom: 20px;
    }

    .stepper-circle {
        width: 36px;
        height: 36px;
        font-size: 0.8em;
    }

    .stepper-label {
        font-size: 0.65em;
        max-width: 55px;
        margin-top: 4px;
    }

    .stepper-line {
        margin: 0 1px;
    }

    /* Carrito */
    .carrito-titulo {
        font-size: 1.1rem;
        padding: 0.5rem 0.8rem;
    }

    .carrito-panel {
        padding: 15px 10px;
    }

    .carrito-tabla th,
    .carrito-tabla td {
        font-size: 0.9rem;
        padding: 0.3rem 0.4rem;
    }

    .carrito-resumen-card {
        padding: 1rem 0.8rem;
    }

    .carrito-resumen-card .table-borderless th,
    .carrito-resumen-card .table-borderless td {
        font-size: 0.95rem;
        padding: 0.4rem 0.4rem;
    }

    /* FAQ */
    .faq-section-custom {
        padding: 20px 15px;
        margin: 20px 10px;
    }

    .faq-titulo-custom {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .faq-desc {
        font-size: 1rem;
    }

    .faq-pregunta {
        font-size: 1rem;
        padding: 12px 8px 10px 8px;
    }

    .faq-respuesta {
        font-size: 0.95rem;
        padding: 0 8px 0 14px;
    }

    /* Contacto */
    .contacto-section-custom {
        padding: 20px 15px;
        margin: 20px 10px;
    }

    .contacto-titulo-custom {
        font-size: 1.5rem;
    }

    /* Footer */
    footer {
        padding: 12px 8px;
        font-size: 0.85rem;
    }

    footer p {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Mobile: footer en el flujo del documento (NO fijo) */
    @media (max-width: 767px) {

        /* override fuerte para evitar que cualquier regla previa/fallo deje el footer fijo */
        footer {
            position: static !important;
            bottom: auto !important;
            z-index: 1 !important;
            background: #1a2238;
            color: #fff;
            box-shadow: none;
            height: auto;
            display: block;
            padding: 12px 8px;
            text-align: center;
            width: 100%;
        }

        footer p {
            margin: 0;
            color: #fff;
        }

        /* asegurar que el flujo y alturas no fijen el viewport en mobile */
        html,
        body,
        .container-fluid,
        main {
            height: auto !important;
            min-height: auto !important;
        }

        .container-fluid,
        main {
            padding-bottom: 0;
            background-image: none;
        }

        /* Ocultar flechas de cambio de imagen dentro de cada tarjeta de producto (sólo en mobile) */
        .carousel-producto-tarjeta .carrusel-prev,
        .carousel-producto-tarjeta .carrusel-next,
        .producto-tarjeta .carrusel-prev,
        .producto-tarjeta .carrusel-next {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
    }

    /* Modales */
    #modalDimensiones .modal-content {
        max-width: 90%;
        padding: 20px 16px;
    }

    .modal-envio {
        padding: 12px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .modal-content-envio {
        margin: 12px auto 0;
        padding: 20px 16px;
        width: 100%;
        max-width: 420px;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    #form-envio-modal {
        min-width: 0;
    }

    #form-envio-modal input,
    #form-envio-modal select,
    #btn-confirmar-envio {
        max-width: 100%;
    }

    /* Filtros */
    .btn-abrir-filtros {
        padding: 10px 18px;
        font-size: 14px;
    }

    .filtros-panel {
        max-width: 100%;
    }

    .filtros-panel-header {
        padding: 15px;
    }

    .filtros-container {
        padding: 15px;
        gap: 18px;
    }

    /* Acordeones */
    .faq-item {
        border-radius: 8px;
    }

    /* Botones */
    .btn-lg {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .btn {
        border-radius: 6px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }

    /* Inputs */
    input[type='text'],
    input[type='email'],
    input[type='number'],
    select,
    textarea {
        font-size: 16px;
        /* Previene zoom en iOS */
        padding: 10px 8px;
        border-radius: 6px;
    }

    /* Gap y espaciados generales */
    .my-4,
    .my-5 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .px-2,
    .px-3,
    .px-4,
    .px-5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Tablas */
    .table {
        font-size: 0.9rem;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.3rem;
    }

    /* Badges */
    .badge {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    /* Iconos */
    i.fa,
    .fas,
    .fab {
        font-size: 1rem;
    }

    /* Scroll vertical en mobile */
    main {
        overflow-x: hidden;
    }

    .container-fluid {
        overflow-x: hidden;
    }
}

/* Pantallas extra pequeñas (menos de 360px - phones muy antiguos) */
@media (max-width: 360px) {
    .main-header {
        padding: 6px 6px;
        min-height: 48px;
    }

    .logo-img {
        max-height: 30px;
    }

    .cart-link {
        font-size: 1.2rem;
        margin-left: 3px;
    }

    .open-menu-btn {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    .titulo-seccion {
        font-size: 1.3rem;
    }

    .categoria-titulo {
        font-size: 1rem;
        letter-spacing: 0.6px;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .hero-section.hero-section-gradient {
        min-height: 90px !important;
        height: 13vh !important;
        padding: 0.4rem 0.3rem !important;
    }

    .titulo-productos {
        font-size: 1rem;
    }

    .producto-nombre {
        font-size: 0.9rem;
    }

    .producto-precio {
        font-size: 1rem;
    }

    .faq-titulo-custom,
    .contacto-titulo-custom {
        font-size: 1.3rem;
    }

    .btn {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

/* Ajuste fino: contenido interno para tarjetas en 2 columnas (productos y categorias) */
@media (max-width: 768px) {

    #productos-grid.productos-grid-custom,
    #productos-categoria.productos-grid-custom,
    #ofertas-grid.productos-grid-custom {
        gap: 16px;
        padding: 0 8px;
    }

    #productos-grid.productos-grid-custom .producto-tarjeta,
    #productos-categoria.productos-grid-custom .producto-tarjeta,
    #ofertas-grid.productos-grid-custom .producto-tarjeta,
    #productos-grid.productos-grid-custom .carousel-producto-tarjeta,
    #productos-categoria.productos-grid-custom .carousel-producto-tarjeta,
    #ofertas-grid.productos-grid-custom .carousel-producto-tarjeta {
        padding: 12px;
        border-radius: 14px;
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
        border: 1px solid #e8edf3;
        gap: 0;
    }

    #productos-grid.productos-grid-custom .producto-carrusel,
    #productos-categoria.productos-grid-custom .producto-carrusel,
    #ofertas-grid.productos-grid-custom .producto-carrusel {
        min-height: 96px;
        border-radius: 10px;
        padding: 2px 0;
        margin-bottom: 8px;
    }

    #productos-grid.productos-grid-custom .producto-carrusel .carrusel-img,
    #productos-categoria.productos-grid-custom .producto-carrusel .carrusel-img,
    #ofertas-grid.productos-grid-custom .producto-carrusel .carrusel-img,
    #productos-grid.productos-grid-custom .producto-tarjeta img,
    #productos-categoria.productos-grid-custom .producto-tarjeta img,
    #ofertas-grid.productos-grid-custom .producto-tarjeta img,
    #productos-grid.productos-grid-custom .carousel-producto-tarjeta img,
    #productos-categoria.productos-grid-custom .carousel-producto-tarjeta img,
    #ofertas-grid.productos-grid-custom .carousel-producto-tarjeta img {
        height: 28vw;
        max-height: 28vw;
        border-radius: 8px;
        margin-bottom: 0;
    }

    #productos-grid.productos-grid-custom .producto-categoria,
    #productos-categoria.productos-grid-custom .producto-categoria,
    #ofertas-grid.productos-grid-custom .producto-categoria,
    #productos-grid.productos-grid-custom .carousel-producto-categoria,
    #productos-categoria.productos-grid-custom .carousel-producto-categoria,
    #ofertas-grid.productos-grid-custom .carousel-producto-categoria {
        font-size: 0.7rem;
        margin-bottom: 8px;
        line-height: 1.15;
        letter-spacing: 0.35px;
        text-align: left;
        opacity: 0.85;
        font-weight: 600;
        text-transform: uppercase;
    }

    #productos-grid.productos-grid-custom .producto-nombre,
    #productos-categoria.productos-grid-custom .producto-nombre,
    #ofertas-grid.productos-grid-custom .producto-nombre,
    #productos-grid.productos-grid-custom .carousel-producto-nombre,
    #productos-categoria.productos-grid-custom .carousel-producto-nombre,
    #ofertas-grid.productos-grid-custom .carousel-producto-nombre {
        font-size: 0.78rem;
        line-height: 1.28;
        min-height: auto;
        margin-bottom: 10px;
        display: block;
        overflow: visible;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        font-weight: 700;
        color: #1f2937;
        letter-spacing: 0.1px;
    }

    #productos-grid.productos-grid-custom .producto-precio,
    #productos-categoria.productos-grid-custom .producto-precio,
    #ofertas-grid.productos-grid-custom .producto-precio,
    #productos-grid.productos-grid-custom .carousel-producto-precio,
    #productos-categoria.productos-grid-custom .carousel-producto-precio,
    #ofertas-grid.productos-grid-custom .carousel-producto-precio {
        font-size: 1rem;
        margin-bottom: 8px;
        line-height: 1.2;
        text-align: left;
        font-weight: 800;
        color: #0a8f45;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.1px;
    }

    #productos-grid.productos-grid-custom .producto-precios-adicionales,
    #productos-categoria.productos-grid-custom .producto-precios-adicionales,
    #ofertas-grid.productos-grid-custom .producto-precios-adicionales {
        gap: 0.45rem;
        margin-top: 0.3rem;
        padding-top: 0.65rem;
        border-top: 1px solid #e8edf3;
        align-items: stretch;
    }

    #productos-grid.productos-grid-custom .producto-precios-adicionales .precio-transfer,
    #productos-categoria.productos-grid-custom .producto-precios-adicionales .precio-transfer,
    #ofertas-grid.productos-grid-custom .producto-precios-adicionales .precio-transfer {
        padding: 7px 8px;
        font-size: 0.74rem;
        border-left-width: 3px;
        border-radius: 6px;
        gap: 0.35rem;
        justify-content: space-between;
        align-items: center;
        line-height: 1.25;
    }

    #productos-grid.productos-grid-custom .producto-precios-adicionales .precio-transfer span,
    #productos-categoria.productos-grid-custom .producto-precios-adicionales .precio-transfer span,
    #ofertas-grid.productos-grid-custom .producto-precios-adicionales .precio-transfer span {
        color: #334155;
        font-weight: 600;
    }

    #productos-grid.productos-grid-custom .producto-precios-adicionales .precio-transfer::before,
    #productos-categoria.productos-grid-custom .producto-precios-adicionales .precio-transfer::before,
    #ofertas-grid.productos-grid-custom .producto-precios-adicionales .precio-transfer::before {
        content: none;
    }

    #productos-grid.productos-grid-custom .producto-precios-adicionales .precio-transfer .transfer-amount,
    #productos-categoria.productos-grid-custom .producto-precios-adicionales .precio-transfer .transfer-amount,
    #ofertas-grid.productos-grid-custom .producto-precios-adicionales .precio-transfer .transfer-amount {
        font-size: 0.82rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.1px;
    }

    #productos-grid.productos-grid-custom .producto-precios-adicionales .precio-cuotas,
    #productos-categoria.productos-grid-custom .producto-precios-adicionales .precio-cuotas,
    #ofertas-grid.productos-grid-custom .producto-precios-adicionales .precio-cuotas {
        font-size: 0.7rem;
        gap: 0.2rem;
        line-height: 1.2;
    }

    #productos-grid.productos-grid-custom .producto-precios-adicionales .precio-cuotas::before,
    #productos-categoria.productos-grid-custom .producto-precios-adicionales .precio-cuotas::before,
    #ofertas-grid.productos-grid-custom .producto-precios-adicionales .precio-cuotas::before {
        content: "Cuotas sin interes";
        font-size: 0.66rem;
        margin-bottom: 0.2rem;
        opacity: 0.75;
        letter-spacing: 0.2px;
    }

    #productos-grid.productos-grid-custom .producto-precios-adicionales .precio-cuotas>*,
    #productos-categoria.productos-grid-custom .producto-precios-adicionales .precio-cuotas>*,
    #ofertas-grid.productos-grid-custom .producto-precios-adicionales .precio-cuotas>* {
        padding: 0.25rem 0;
        gap: 0.3rem;
        justify-content: space-between;
        align-items: baseline;
        font-variant-numeric: tabular-nums;
    }

    #productos-grid.productos-grid-custom .producto-tarjeta-botones,
    #productos-categoria.productos-grid-custom .producto-tarjeta-botones,
    #ofertas-grid.productos-grid-custom .producto-tarjeta-botones {
        margin-top: 0.5rem;
        gap: 0.35rem;
    }

    #productos-grid.productos-grid-custom .btn-elegir-opciones,
    #productos-categoria.productos-grid-custom .btn-elegir-opciones,
    #ofertas-grid.productos-grid-custom .btn-elegir-opciones {
        display: none !important;
    }

    #productos-grid.productos-grid-custom .producto-tarjeta-botones,
    #productos-categoria.productos-grid-custom .producto-tarjeta-botones,
    #ofertas-grid.productos-grid-custom .producto-tarjeta-botones {
        display: none !important;
    }

    #productos-grid.productos-grid-custom .producto-tarjeta-botones .btn-whatsapp,
    #productos-grid.productos-grid-custom .producto-tarjeta-botones .btn-consultar-stock,
    #productos-categoria.productos-grid-custom .producto-tarjeta-botones .btn-whatsapp,
    #productos-categoria.productos-grid-custom .producto-tarjeta-botones .btn-consultar-stock,
    #ofertas-grid.productos-grid-custom .producto-tarjeta-botones .btn-whatsapp,
    #ofertas-grid.productos-grid-custom .producto-tarjeta-botones .btn-consultar-stock {
        min-height: 28px;
        font-size: 0.72rem;
        padding: 6px 7px;
        line-height: 1.1;
        border-radius: 10px;
    }
}

/* ==========================================
   DETALLE DE PRODUCTO - AJUSTE MOBILE PRO
   ========================================== */
@media (max-width: 768px) {
    #producto-detalle .producto-detalle-thumbs-horizontal {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 2px 8px;
        margin-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        margin: 0 auto;
        margin-block-end: 2vw;

    }

    #producto-detalle .detalle-thumb-btn {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        border: 2px solid #dbe6f2;
        border-radius: 10px;
        padding: 0;
        background: #fff;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 116, 217, 0.08);
    }

    #producto-detalle .detalle-thumb-btn.active {
        border-color: #0074d9;
        box-shadow: 0 3px 10px rgba(0, 116, 217, 0.2);
    }

    #producto-detalle .detalle-thumb-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #producto-detalle .detalle-thumb-video {
        font-size: 0.68rem;
        font-weight: 700;
        color: #1f2937;
        letter-spacing: 0.4px;
    }

    #producto-detalle {
        padding: 0 2px;
    }

    #producto-detalle .producto-detalle-box {
        flex-direction: column !important;
        gap: 0.95rem;
        margin: 0.9rem 0 1.1rem;
        padding: 0.9rem 0.8rem;
        border-radius: 14px;
        box-shadow: 0 3px 16px rgba(0, 116, 217, 0.09);
        background: #ffffff;
    }

    #producto-detalle .producto-detalle-img-wrap {
        order: 1;
        min-width: 0;
        max-width: 100%;
        padding: 0.75rem;
        border-radius: 12px;
        background: #f7faff;
        max-height: 82vw;
    }

    #producto-detalle .producto-detalle-carrusel {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px;
        max-width: 100%;
        min-height: 165px;
        padding: 8px 0;
        border-radius: 12px;
        margin-bottom: 0;
    }

    #producto-detalle .producto-detalle-stage {
        position: relative;
        width: 100%;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #producto-detalle .producto-detalle-stage .carrusel-imgs {
        width: 100%;
        min-height: 150px;
        display: block;
        text-align: center;
    }

    #producto-detalle .producto-detalle-carrusel .carrusel-img {
        max-width: 100%;
        max-height: 190px;
    }

    #producto-detalle .producto-detalle-info {
        order: 2;
        min-width: 0;
        margin-left: 0;
        gap: 0.75rem;
        align-self: stretch;
    }

    #producto-detalle .producto-detalle-nombre {
        font-size: 1.42rem;
        line-height: 1.22;
        margin-bottom: 0.2rem;
        color: #1f2937;
    }

    #producto-detalle .producto-detalle-precio {
        font-size: 1.5rem;
        line-height: 1.1;
        margin-bottom: 0;
        color: #0074d9;
    }

    #producto-detalle .producto-detalle-precio+div {
        font-size: 0.95rem;
        line-height: 1.3;
        margin-top: -2px;
    }

    #producto-detalle .producto-variantes-box {
        display: grid;
        gap: 0.55rem;
        margin-top: 0.35rem;
    }

    #producto-detalle .variante-item label {
        font-size: 0.86rem;
        margin-bottom: 4px;
        font-weight: 700;
        color: #334155;
    }

    #producto-detalle .custom-select-variante .select-selected {
        min-height: 40px;
        padding: 9px 36px 9px 10px;
        border-radius: 10px;
        font-size: 0.92rem;
    }

    #producto-detalle .custom-select-variante .select-items {
        border-radius: 10px;
        max-height: 220px;
        overflow-y: auto;
    }

    #producto-detalle .producto-detalle-botones {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.55rem;
        margin-top: 0.35rem;
    }

    #producto-detalle .btn-agregar-carrito,
    #producto-detalle .btn-whatsapp {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem;
        width: 100%;
        min-height: 44px;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 700;
        padding: 10px 12px;
        line-height: 1.15;
        white-space: nowrap;
    }

    #producto-detalle .btn-agregar-carrito i,
    #producto-detalle .btn-whatsapp i {
        font-size: 1rem;
        line-height: 1;
    }

    #producto-detalle .producto-detalle-descripcion-box {
        padding: 1rem 0.9rem;
        border-radius: 10px;
        margin-top: 0.3rem;
    }

    #producto-detalle .producto-detalle-desc-titulo {
        font-size: 1.12rem;
        margin-bottom: 0.45rem;
    }

    #producto-detalle .producto-detalle-desc {
        font-size: 0.96rem;
        line-height: 1.55;
    }

    #productos-relacionados {
        margin-top: 1.6rem !important;
    }

    .hero-section.carrito-hero {
        height: 0.02vw !important;
    }
}

@media (max-width: 420px) {
    #producto-detalle .producto-detalle-box {
        padding: 0.8rem 0.65rem;
        border-radius: 12px;
    }

    #producto-detalle .producto-detalle-nombre {
        font-size: 1.28rem;
    }

    #producto-detalle .producto-detalle-precio {
        font-size: 1.36rem;
    }

    #producto-detalle .producto-detalle-carrusel {
        min-height: 150px;
    }

    #producto-detalle .producto-detalle-carrusel .carrusel-img {
        max-height: 165px;
    }

    #sin-stock-msg {
        position: fixed !important;
        bottom: 24px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 9999 !important;
        background: #fff1f1 !important;
        color: #c0392b !important;
        border: 1.5px solid #e74c3c !important;
        border-radius: 10px !important;
        padding: 12px 20px !important;
        font-size: 0.97rem !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
        text-align: center !important;
        max-width: 90vw !important;
        margin: 0 !important;
        width: max-content !important;
    }

}

@media (min-width: 769px) {
    .producto-detalle-thumbs-horizontal {
        display: none !important;
    }
}
/* Ajuste: hacer que la imagen del detalle ocupe todo el recuadro */
#producto-detalle .producto-detalle-img-wrap {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* El carrusel debe llenar el wrap */
#producto-detalle .producto-detalle-img-wrap .producto-detalle-carrusel {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#producto-detalle .producto-detalle-img-wrap .producto-detalle-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

#producto-detalle .producto-detalle-img-wrap .carrusel-imgs {
    width: 100%;
    display: block;
}

#producto-detalle .producto-detalle-img,
#producto-detalle .producto-detalle-img-wrap video,
#producto-detalle .producto-detalle-img-wrap .color-variant-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

#producto-detalle .producto-detalle-img-wrap .carrusel-img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    border-radius: 0;
    display: block;
    margin: 0 auto;
}

#producto-detalle .producto-detalle-img-wrap .carrusel-img[style*="display:none"],
#producto-detalle .producto-detalle-img-wrap .carrusel-img[style*="display: none"] {
    display: none !important;
}

@media (max-width: 900px) {
    #producto-detalle .producto-detalle-img-wrap .carrusel-img {
        max-height: 260px;
    }
}