@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Tipografía Roboto global - sin romper íconos */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
input,
button,
select,
textarea,
.navbar,
.nav,
.dropdown-menu,
.btn,
.badge,
.label,
.footer,
.footer-bottom,
.cart-actions,
.product,
.modal,
.modal-content,
.navbar-nav>li>a,
.cartRespons,
.userMenu,
.block-title-1,
.block-title-2,
.section-title {
    font-family: 'Roboto', sans-serif !important;
}

/* Restaurar FontAwesome - SIEMPRE después de Roboto */
i.fa,
i.fas,
i.far,
i.fab,
i.fal,
.fa,
.fas,
.far,
.fab,
[class^="fa-"],
[class*=" fa-"] {
    font-family: 'FontAwesome' !important;
}

/* Restaurar Glyphicons de Bootstrap */
.glyphicon,
[class^="glyphicon-"],
[class*=" glyphicon-"],
span.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

.search-full,
.search-input {
    background: #fecc16;
}

.search-close {
    color: #000000;
}

.btn-cuenta {
    background-color: #000000;
    color: #FFFFFF;
}

.btn-cuenta:hover {
    background-color: #fecc16 !important;
    color: #000000;
}

.btn-carro {
    background-color: #fecc16 !important;
    border-color: #fecc16 !important;
    color: #FFFFFF !important;
}

.btn-carro .add2cart,
.btn-carro i,
.btn-carro span {
    color: #FFFFFF !important;
}

.btn-carro:hover {
    background-color: #e6b814 !important;
    border-color: #e6b814 !important;
    color: #FFFFFF !important;
}

.glyphicon.glyphicon-shopping-cart {
    color: #fecc16;
}

.btn-carro:hover .glyphicon-shopping-cart {
    color: #ffffff;
    transition: color 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #fecc16;
    border-color: #fecc16;
    color: #000000;
}

.navbar-tshop {
    background: #000000 !important;
}

.navbar-top {
    background: #fecc16;
}

.navbar-top,
.navbar-top * {
    color: #000000 !important;
    fill: #000000 !important;
}

.site-color {
    color: #fecc16 !important;
}

.navbar-nav>li>a {
    color: #ffffff;
}

.nav>li.active,
.nav>li>a:hover,
.nav>li>a:focus,
.nav>li:hover>a {
    background: #fecc16;
}

/* CÓDIGO AGREGADO PARA EL FONDO DEL CARRITO POR YM */


.cartMenu i.fa-star {
    color: #fecc16 !important;
}

/* HASTA ACÁ POR YM */

.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus,
.cartMenu:hover>a.dropdown-toggle {
    background: #fecc16;
}

.dropdown-menu {
    border-top: solid #000000;
}

.search-box:hover .form-control {
    background: #fecc16;
}

.searchInputBox .search-btn {
    color: #fff;
}

.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgba(254, 204, 22, 0.7) !important;
}


.subCategoryList .thumbnail:hover {
    border: 1px solid #fecc16;
}

.pager2 a {
    border: 1px solid #fecc16;
}

.pager2 a.selected {
    background: #fecc16;
}


.full {
    width: 100%;
}

.footer a:hover {
    color: #fecc16;
}

.footer h3,
.footer h4 {
    color: #fecc16 !important;
}

.footer a,
.footer p,
.footer span {
    color: #FFFFFF !important;
}

/* Footer - íconos alineados con el texto en la misma línea */
.supportLi h4 {
    display: flex !important;
    align-items: center !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.supportLi h4 a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
}

.supportLi h4 a i.fa {
    color: #fecc16 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

footer i.fa.fa-phone,
footer i.fa.fa-envelope-o,
.footer-bottom i.fa {
    color: #fecc16 !important;
}

.footer-bottom p.text-center {
    color: #fecc16 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
}

.footer-bottom p.text-center a {
    color: #fecc16 !important;
    text-decoration: none;
}

.modal-header {
    background: #fecc16;
}

.form-control:focus {
    border-color: #fecc16;
}

.new-product {
    background: rgba(0, 0, 0, 1) !important;
}

#pager a.cycle-pager-active {
    background: rgba(254, 204, 22, 0.5);
}

.nav.tree>li.active,
.nav.tree>li>a:hover,
.nav.tree>li>a:focus,
.nav.tree>li:hover>a {
    background: none;
    color: #2a2a2a;
}

.panel-default>.panel-heading {
    border-top: 4px solid #fecc16;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus,
.nav-tabs>li:hover>a {
    background: #fecc16;
}

.nav-tabs {
    border-bottom: 3px solid #fecc16;
}

.socialIcon a:hover {
    background: #fecc16;
}

#PlaceHolder_btnAddToCart:hover {
    background: #fecc16 !important;
    color: #000000 !important;
    border-color: #fecc16 !important;
}

.link-wishlist.wishlist.btn-block:hover {
    background: #fecc16 !important;
    color: #000000 !important;
    border-color: #fecc16 !important;
}

.sp-thumbs a:hover,
.sp-thumbs a:active,
.sp-current,
sp-current:visited {
    border: 2px solid #fecc16 !important;
}

.promo-1 {
    background: none repeat scroll 0 0 #000000;
}

@media (max-width: 767px) {
    .miniCartFooter {
        background: #000000 !important;
    }
}

#pager2 span.cycle-pager-active {
    background: #fecc16 !important;
}

#pager2 span {
    border: 2px solid #fecc16;
}

.orderStep li.active a {
    background: #fecc16;
}

.orderStep li.active a:after {
    border-top-color: #fecc16 !important;
}

.orderStep li a {
    background: #e6b814;
}

.badge {
    background-color: #fecc16 !important;
}

.fa.fa-user {
    color: #fecc16;
}

.carrito-canjes .glyphicon-shopping-cart {
    color: #fecc16;
}

.footer {
    background: #000000;
}

.footer-bottom {
    background: #000000;
}

.btn-nobg:hover {
    color: #fecc16 !important;
}

.search-box {
    color: #fecc16 !important;
}

.search-full {
    background: #fecc16;
}

/* Fondo exclusivo del área del login */
.row.login-page {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Por si el fondo azul está aplicado mediante pseudoelementos */
.row.login-page::before,
.row.login-page::after {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Todos los botones dentro del login */
.row.login-page .btn,
.row.login-page button,
.row.login-page input[type="submit"] {
    background-color: #000000 !important;
    background-image: none !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Efecto al pasar el mouse */
.row.login-page .btn:hover,
.row.login-page .btn:focus,
.row.login-page button:hover,
.row.login-page button:focus,
.row.login-page input[type="submit"]:hover,
.row.login-page input[type="submit"]:focus {
    background-color: #222222 !important;
    border-color: #222222 !important;
    color: #ffffff !important;
}

/* Icono del mensaje/sobre en amarillo */
.row.login-page .fa-envelope,
.row.login-page .fa-envelope-o,
.row.login-page .glyphicon-envelope,
.row.login-page .bi-envelope {
    color: #ffd000 !important;
}

/* ==========================================================
   LOGIN: fondo y botones
   Se aplica únicamente a la página que contiene contraseña
   ========================================================== */

/* Fondo exterior del login */
body:has(.container input[type="password"]) {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Eliminar fondos de pseudoelementos */
body:has(.container input[type="password"])::before,
body:has(.container input[type="password"])::after {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Container y row exclusivos de la página de login */
body:has(.container input[type="password"])>.container,
body:has(.container input[type="password"])>.container>.row {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Botones del formulario de login */
body:has(.container input[type="password"]) .container .btn,
body:has(.container input[type="password"]) .container button,
body:has(.container input[type="password"]) .container input[type="submit"] {
    background-color: #000000 !important;
    background-image: none !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Hover y foco de los botones */
body:has(.container input[type="password"]) .container .btn:hover,
body:has(.container input[type="password"]) .container .btn:focus,
body:has(.container input[type="password"]) .container button:hover,
body:has(.container input[type="password"]) .container button:focus,
body:has(.container input[type="password"]) .container input[type="submit"]:hover,
body:has(.container input[type="password"]) .container input[type="submit"]:focus {
    background-color: #222222 !important;
    border-color: #222222 !important;
    color: #ffffff !important;
}

/* Icono del sobre en amarillo */
body:has(.container input[type="password"]) .fa-envelope,
body:has(.container input[type="password"]) .fa-envelope-o,
body:has(.container input[type="password"]) .glyphicon-envelope,
body:has(.container input[type="password"]) [class*="envelope"] {
    color: #fecc16 !important;
}

/* Encabezado celeste del popup */
#contentModal .modal-header {
    background-color: #000000 !important;
    background-image: none !important;
    border-color: #000000 !important;
}

/* Título e icono del encabezado */
#contentModal .modal-header,
#contentModal .modal-header .modal-title,
#contentModal .modal-header i {
    color: #ffffff !important;
}

/* Botón de cerrar X */
#contentModal .modal-header .close {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Botón "Entendido" */
#contentModal .modal-footer .btn,
#contentModal .modal-footer .btn-primary {
    background-color: #000000 !important;
    background-image: none !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Botón al pasar el mouse */
#contentModal .modal-footer .btn:hover,
#contentModal .modal-footer .btn:focus,
#contentModal .modal-footer .btn:active {
    background-color: #222222 !important;
    border-color: #222222 !important;
    color: #ffffff !important;
}

/* Ocultar título e icono del popup */
#contentModal .modal-header .modal-title {
    display: none !important;
}

#contentModal .modal-header>.fa,
#contentModal .modal-header>.glyphicon,
#contentModal .modal-header>i {
    display: none !important;
}

#contentModal .modal-header {
    min-height: 45px;
    padding: 10px 15px;
}

/* Fondo negro del encabezado del login */
.login-card>.text-center:first-child {
    background-color: #000000 !important;
    background-image: none !important;
}

/* Color del icono del carrito */
.navbar .cartMenu i.fa-shopping-cart {
    color: #FECC16 !important;
}

/* Icono de búsqueda en amarillo */
.search-box .getFullSearch .fa-search {
    color: #FECC16 !important;
}

/* ============================================================
   SOCIO AURINEGRO — MOBILE LIMPIO
   Reemplaza todos los ajustes mobile anteriores
   ============================================================ */

@media screen and (max-width: 767px) {

    :root {
        --sa-yellow: #fecc16;
        --sa-black: #000000;
        --sa-white: #ffffff;
        --sa-gray: #eeeeee;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        background: var(--sa-white) !important;
    }

    /* =========================
       BARRA SUPERIOR
       ========================= */

    .navbar-top {
        min-height: 52px !important;
        background: var(--sa-yellow) !important;
        border: 0 !important;
    }

    .navbar-top .container {
        width: 100% !important;
        padding: 0 16px !important;
    }

    .navbar-top .row {
        margin: 0 !important;
    }

    .navbar-top a,
    .navbar-top i,
    .navbar-top span {
        color: var(--sa-black) !important;
    }

    .navbar-top .userMenu>li>a {
        display: flex !important;
        align-items: center !important;
        min-height: 52px !important;
        padding: 8px 7px !important;
    }

    /* =========================
       FRANJA NEGRA / HEADER
       ========================= */

    .navbar.navbar-tshop {
        background: var(--sa-black) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .navbar.navbar-tshop>.container {
        position: relative !important;
        width: 100% !important;
        min-height: 72px !important;
        padding: 0 14px !important;
        background: var(--sa-black) !important;
    }

    .navbar-header {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar-header .navbar-brand {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 20 !important;
    }

    .navbar-header .navbar-brand img {
        display: block !important;
        width: auto !important;
        max-width: 120px !important;
        height: 38px !important;
        max-height: 38px !important;
        object-fit: contain !important;
    }

    .navbar-header>a.navbar-toggle[href="/Cart"],
    .navbar-header>a.navbar-toggle[href="/cart"],
    .navbar-header>.search-box,
    .navbar-header .search-box.pull-right {
        display: none !important;
    }

    .navbar-header button.navbar-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 8px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: translateY(-50%) !important;
        z-index: 30 !important;
    }

    .navbar-header button.navbar-toggle .icon-bar {
        display: block !important;
        width: 27px !important;
        height: 3px !important;
        margin: 3px 0 !important;
        background: var(--sa-white) !important;
        border-radius: 3px !important;
    }

    /* =========================
       PUNTOS EN EL HEADER
       ========================= */

    .navbar-collapse {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .navbar-collapse.collapse {
        display: block !important;
        position: static !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .navbar-collapse.collapse>ul.nav.navbar-nav {
        display: none !important;
    }

    .navbar-collapse .navbar-right.hidden-xs {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        right: 53px !important;
        width: auto !important;
        height: 72px !important;
        margin: 0 !important;
        z-index: 25 !important;
    }

    .navbar-collapse .navbar-right .cartMenu:nth-of-type(2),
    .navbar-collapse .navbar-right>.search-box {
        display: none !important;
    }

    .navbar-collapse .navbar-right .cartMenu:first-of-type {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .navbar-collapse .navbar-right .cartMenu:first-of-type a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        min-width: 64px !important;
        height: 38px !important;
        padding: 6px 10px !important;
        background: transparent !important;
        border: 1px solid var(--sa-yellow) !important;
        border-radius: 9px !important;
        color: var(--sa-white) !important;
        text-decoration: none !important;
    }

    .navbar-collapse .navbar-right .cartMenu:first-of-type i.fa-star {
        color: var(--sa-yellow) !important;
        font-size: 17px !important;
    }

    .navbar-collapse .navbar-right .cartMenu:first-of-type span {
        color: var(--sa-white) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    .navbar-collapse .navbar-right .cartMenu:first-of-type span::after {
        content: " pts";
        color: var(--sa-white) !important;
        font-size: 10px !important;
        font-weight: 400 !important;
    }

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

    .navbar-collapse.in,
    .navbar-collapse.collapsing {
        display: block !important;
        position: relative !important;
        width: calc(100% + 28px) !important;
        height: auto !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        padding: 0 !important;
        overflow: visible !important;
        background: var(--sa-black) !important;
        border-top: 1px solid rgba(254, 204, 22, 0.35) !important;
    }

    .navbar-collapse.in>ul.nav.navbar-nav,
    .navbar-collapse.collapsing>ul.nav.navbar-nav {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 0 12px !important;
    }

    .navbar-collapse.in .nav.navbar-nav>li,
    .navbar-collapse.collapsing .nav.navbar-nav>li {
        display: block !important;
        float: none !important;
        width: 100% !important;
    }

    .navbar-collapse.in .nav.navbar-nav>li>a,
    .navbar-collapse.collapsing .nav.navbar-nav>li>a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 13px 18px !important;
        background: var(--sa-black) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
        color: var(--sa-white) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .navbar-collapse.in .nav.navbar-nav>li>a i,
    .navbar-collapse.collapsing .nav.navbar-nav>li>a i {
        width: 24px !important;
        color: var(--sa-yellow) !important;
    }

    /* =========================
       BANNER
       Se conserva completo y horizontal
       ========================= */

    .banner.banner-boxes,
    .banner.banner-boxes .slider-content,
    .banner.banner-boxes .swiper-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--sa-black) !important;
    }

    /* Swiper debe administrar width y transform del wrapper */
    .banner.banner-boxes .swiper-wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: flex-start !important;
    }

    .banner.banner-boxes .swiper-slide,
    .banner.banner-boxes .swiper-slide.slide-2x {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .banner.banner-boxes .box-slider-content,
    .banner.banner-boxes .box-img {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--sa-black) !important;
    }

    .banner.banner-boxes .box-text {
        display: none !important;
    }

    .banner.banner-boxes .box-img img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
    }

    .banner.banner-boxes .sliderControl {
        position: absolute !important;
        top: 50% !important;
        width: 30px !important;
        height: 44px !important;
        margin-top: -22px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border-radius: 6px !important;
        z-index: 20 !important;
    }

    .banner.banner-boxes .prevControl {
        left: 8px !important;
    }

    .banner.banner-boxes .nextControl {
        right: 8px !important;
    }

    .banner.banner-boxes .sliderControl i {
        color: var(--sa-black) !important;
        font-size: 28px !important;
    }

    .banner.banner-boxes .box-pagination {
        position: absolute !important;
        bottom: 7px !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 20 !important;
    }

    .banner.banner-boxes .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        background: var(--sa-white) !important;
        opacity: 0.65 !important;
    }

    .banner.banner-boxes .swiper-pagination-bullet-active {
        background: var(--sa-yellow) !important;
        opacity: 1 !important;
    }

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

    .container.main-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 16px 30px !important;
        overflow: hidden !important;
    }

    .featuredPostContainer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 30px 0 20px !important;
    }

    .featuredPostContainer>.container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .featuredPostContainer::before,
    .featuredPostContainer::after,
    .featuredPostContainer>.container::before,
    .featuredPostContainer>.container::after,
    .featuredPostContainer .row.xsResponse::before,
    .featuredPostContainer .row.xsResponse::after {
        display: none !important;
        content: none !important;
    }

    .featuredPostContainer .section-title.style2 {
        position: relative !important;
        width: 100% !important;
        margin: 0 0 26px !important;
        padding: 0 0 14px !important;
        text-align: left !important;
    }

    .featuredPostContainer .section-title.style2 span {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: var(--sa-black) !important;
        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    .featuredPostContainer .section-title.style2::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 64px !important;
        height: 4px !important;
        background: var(--sa-yellow) !important;
        border-radius: 4px !important;
    }

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

    .featuredPostContainer .row.xsResponse {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 14px 10px !important;
    }

    .featuredPostContainer .row.xsResponse>.item,
    .featuredPostContainer .row.xsResponse>div[class*="col-"] {
        position: static !important;
        display: block !important;
        float: none !important;
        clear: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .featuredPostContainer .product,
    .featuredPostContainer .product.isIphone {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--sa-white) !important;
        border: 1px solid #dddddd !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    .featuredPostContainer .product .image,
    .featuredPostContainer .product .image a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--sa-yellow) !important;
    }

    .featuredPostContainer .product .image img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        transform: none !important;
    }

    .featuredPostContainer .product .description {
        position: static !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 12px 8px 8px !important;
        background: var(--sa-white) !important;
        text-align: center !important;
    }

    .featuredPostContainer .product .description h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 36px !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    .featuredPostContainer .product .description h4 a {
        color: var(--sa-black) !important;
    }

    .featuredPostContainer .product .description p {
        width: 100% !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #555555 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .featuredPostContainer .product .price {
        position: static !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 5px 8px 9px !important;
        color: var(--sa-black) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .featuredPostContainer .product .price::before {
        content: "★" !important;
        margin-right: 5px !important;
        color: var(--sa-yellow) !important;
    }

    .featuredPostContainer .product .action-control {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: auto 0 0 !important;
        padding: 0 8px 10px !important;
    }

    .featuredPostContainer .product .btn-carro {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 7px 5px !important;
        background: var(--sa-yellow) !important;
        border: 1px solid var(--sa-yellow) !important;
        border-radius: 7px !important;
        color: var(--sa-black) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .featuredPostContainer .product .btn-carro span,
    .featuredPostContainer .product .btn-carro i {
        color: var(--sa-black) !important;
    }

    .featuredPostContainer .product .btn-carro.disabled {
        background: var(--sa-gray) !important;
        border-color: #d4d4d4 !important;
        color: #666666 !important;
        opacity: 1 !important;
    }

    .featuredPostContainer .product .btn-carro.disabled span,
    .featuredPostContainer .product .btn-carro.disabled i {
        color: #666666 !important;
    }

    .featuredPostContainer .load-more-block {
        width: 100% !important;
        margin: 26px 0 8px !important;
    }

    .featuredPostContainer .load-more-block .btn-thin {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 10px 20px !important;
        background: var(--sa-black) !important;
        border: 1px solid var(--sa-black) !important;
        border-radius: 8px !important;
        color: var(--sa-white) !important;
        font-weight: 700 !important;
    }

    .featuredPostContainer .load-more-block .btn-thin i {
        margin-right: 5px !important;
        color: var(--sa-yellow) !important;
    }
}

/* ============================================================
   TELÉFONOS PEQUEÑOS
   ============================================================ */

@media screen and (max-width: 380px) {

    .navbar-header .navbar-brand img {
        max-width: 100px !important;
        height: 34px !important;
    }

    .navbar-collapse .navbar-right.hidden-xs {
        right: 48px !important;
    }

    .navbar-collapse .navbar-right .cartMenu:first-of-type a {
        min-width: 57px !important;
        padding: 6px 7px !important;
    }

    .featuredPostContainer .row.xsResponse {
        gap: 9px !important;
    }

    .featuredPostContainer .section-title.style2 span {
        font-size: 21px !important;
    }

    .featuredPostContainer .product .description {
        min-height: 90px !important;
        padding: 11px 7px 7px !important;
    }

    .featuredPostContainer .product .description h4 {
        font-size: 13px !important;
    }

    .featuredPostContainer .product .btn-carro {
        font-size: 10.5px !important;
    }
}

/* ============================================================
   MOBILE — MOSTRAR SOLAMENTE EL PRIMER BANNER
   ============================================================ */

@media screen and (max-width: 768px) {

    /* Neutralizar el carrusel */
    html body .banner.banner-boxes .swiper-container {
        overflow: hidden !important;
    }

    html body .banner.banner-boxes .swiper-wrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        transition: none !important;
    }

    /* Ocultar todos los banners */
    html body .banner.banner-boxes .swiper-slide,
    html body .banner.banner-boxes .swiper-slide.slide-2x {
        display: none !important;
    }

    /* Ocultar también su contenido interno */
    html body .banner.banner-boxes .swiper-slide .box-slider-content,
    html body .banner.banner-boxes .swiper-slide .box-img,
    html body .banner.banner-boxes .swiper-slide img {
        display: none !important;
    }

    /* Mostrar solamente el primer banner */
    html body .banner.banner-boxes .swiper-slide:first-child {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .banner.banner-boxes .swiper-slide:first-child .box-slider-content {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body .banner.banner-boxes .swiper-slide:first-child .box-img {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body .banner.banner-boxes .swiper-slide:first-child .box-img img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    /* Ocultar controles del carrusel */
    html body .banner.banner-boxes .sliderControl,
    html body .banner.banner-boxes .box-pagination,
    html body .banner.banner-boxes .swiper-pagination {
        display: none !important;
    }
}

/* ============================================================
   CORRECCIÓN FINAL — BANNER DEBAJO DEL MENÚ FIJO
   ============================================================ */

@media screen and (max-width: 768px) {

    main:has(.banner.banner-boxes) {
        padding-top: 124px !important;
        margin-top: 0 !important;
    }

    .banner.banner-boxes {
        margin-top: 0 !important;
    }

    .banner.banner-boxes .swiper-slide:first-child .box-img img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: top center !important;
    }
}

/* ============================================================
   CATÁLOGO MOBILE — SOCIO AURINEGRO
   Basado en la estructura HTML real
   ============================================================ */

@media screen and (max-width: 767px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ========================================================
       ENCABEZADO DE CATEGORÍA
       ======================================================== */

    html body main #category-intro.section-intro {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;

        margin-top: 124px !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;

        box-sizing: border-box !important;
    }

    html body main #category-intro.section-intro .cat-intro {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;
    }

    /* Ocultar definitivamente la imagen de fondo */
    html body main #category-intro.section-intro .cat-intro-banner {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        width: 0 !important;
        height: 0 !important;
    }

    /* Nombre de la categoría */
    html body main #category-intro.section-intro .cat-intro-text {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

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

        width: 100% !important;
        max-width: 100% !important;

        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;

        margin: 0 !important;
        padding: 0 20px !important;

        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: none !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html body main #category-intro.section-intro .cat-intro-text h1 {
        position: static !important;
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-family: "Roboto", sans-serif !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;

        text-align: center !important;
        text-transform: none !important;

        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    html body main #category-intro.section-intro .cat-intro-text p {
        display: none !important;
    }

    /* ========================================================
       CONTENEDOR DEL CATÁLOGO
       ======================================================== */

    html body main #main-container-wrapper.main-container-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 20px 0 30px !important;

        background: #ffffff !important;
        overflow: hidden !important;
    }

    html body main #main-container-wrapper .container.main-container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 14px 30px !important;

        overflow: hidden !important;
    }

    html body main #main-container-wrapper .container.main-container>.row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ========================================================
       CANTIDAD DE PRODUCTOS
       ======================================================== */

    html body main .catTopBar {
        width: 100% !important;

        margin: 0 0 16px !important;
        padding: 0 0 15px !important;

        border-bottom: 1px solid #dddddd !important;
        background: transparent !important;
    }

    html body main .catTopBarInner {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .catTopBarInner>div {
        float: none !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .catTopBar .f-right,
    html body main .catTopBar .w100 {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }

    html body main .catTopBar .shrtByP {
        float: none !important;
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }

    html body main .catTopBar .shrtByP span {
        color: #222222 !important;

        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;

        text-transform: uppercase !important;
    }

    /* ========================================================
       FILTROS
       ======================================================== */

    html body main .catColumnWrapper {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .filterColumn {
        float: none !important;

        width: 100% !important;

        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    html body main .filterColumn #filterForm,
    html body main .filterColumn #accordion {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .filterColumn .panel.panel-flat {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    html body main .filterColumn .panel-heading {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 1px solid #eeeeee !important;
        background: #ffffff !important;
    }

    html body main .filterColumn .panel-title {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .filterColumn .panel-title>a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-height: 52px !important;

        margin: 0 !important;
        padding: 14px 4px !important;

        background: #ffffff !important;
        color: #222222 !important;

        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;

        text-decoration: none !important;
        text-transform: uppercase !important;
    }

    html body main .filterColumn .hasPlus {
        margin-left: auto !important;
    }

    html body main .filterColumn .hasPlus .i-minus {
        transform: scale(0.85) !important;
    }

    /* ========================================================
       COLUMNA DE PRODUCTOS
       ======================================================== */

    html body main .productColumn {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .productWrapper {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 12px 10px !important;
    }

    html body main .productWrapper::before,
    html body main .productWrapper::after {
        display: none !important;
        content: none !important;
    }

    /* Anular columnas Bootstrap */
    html body main .productWrapper>.item {
        position: static !important;
        display: block !important;

        float: none !important;
        clear: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

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

    html body main .productWrapper>.item .product {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 10px !important;

        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* Imagen */
    html body main .productWrapper .product .image {
        position: relative !important;
        display: block !important;

        width: 100% !important;

        height: 128px !important;
        min-height: 128px !important;
        max-height: 128px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        background: #fecc16 !important;
    }

    html body main .productWrapper .product .image>a {
        display: block !important;

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

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .productWrapper .product .image img {
        position: static !important;
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: center !important;

        transform: none !important;
    }

    /* Información */
    html body main .productWrapper .product .description {
        position: static !important;
        display: block !important;
        flex: 0 0 auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 96px !important;

        margin: 0 !important;
        padding: 11px 7px 7px !important;

        background: #ffffff !important;
        text-align: center !important;
    }

    html body main .productWrapper .product .description h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 34px !important;

        margin: 0 0 5px !important;
        padding: 0 !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        text-align: center !important;
    }

    html body main .productWrapper .product .description h4 a {
        color: #111111 !important;
        text-decoration: none !important;
    }

    html body main .productWrapper .product .grid-description {
        display: block !important;
    }

    html body main .productWrapper .product .grid-description p {
        min-height: 18px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #777777 !important;

        font-size: 11px !important;
        line-height: 1.25 !important;

        text-align: center !important;
    }

    html body main .productWrapper .product .list-description {
        display: none !important;
    }

    /* Puntos */
    html body main .productWrapper .product .price {
        position: static !important;
        display: block !important;

        width: 100% !important;
        min-height: 34px !important;

        margin: 0 !important;
        padding: 5px 7px 8px !important;

        color: #000000 !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        text-align: center !important;
    }

    html body main .productWrapper .product .price::before {
        content: "★" !important;

        margin-right: 5px !important;

        color: #fecc16 !important;
    }

    html body main .productWrapper .product .price span {
        color: #000000 !important;
        font-size: inherit !important;
        font-weight: 700 !important;
    }

    /* ========================================================
       BOTÓN REAL: .btn.btn-primary
       ======================================================== */

    html body main .productWrapper .product .action-control {
        position: static !important;
        display: block !important;

        width: 100% !important;

        margin: auto 0 0 !important;
        padding: 0 7px 8px !important;

        box-sizing: border-box !important;
    }

    html body main .productWrapper .product .action-control>a.btn.btn-primary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 38px !important;

        margin: 0 !important;
        padding: 6px 4px !important;

        overflow: hidden !important;

        background: #fecc16 !important;
        background-color: #fecc16 !important;
        background-image: none !important;

        border: 1px solid #fecc16 !important;
        border-radius: 7px !important;

        color: #000000 !important;

        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;

        white-space: normal !important;
        text-align: center !important;
        word-break: normal !important;

        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html body main .productWrapper .product .action-control .add2cart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;

        width: 100% !important;

        color: #000000 !important;

        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;

        white-space: normal !important;
        text-align: center !important;
    }

    html body main .productWrapper .product .action-control .glyphicon {
        flex-shrink: 0 !important;

        margin: 0 !important;

        color: #000000 !important;
        font-size: 11px !important;
    }

    html body main .productWrapper .product .action-control>a.btn.btn-primary:hover,
    html body main .productWrapper .product .action-control>a.btn.btn-primary:focus,
    html body main .productWrapper .product .action-control>a.btn.btn-primary:active {
        background: #e6b814 !important;
        background-color: #e6b814 !important;
        border-color: #e6b814 !important;

        color: #000000 !important;
    }

    /* ========================================================
       PAGINACIÓN
       ======================================================== */

    html body main .productWrapper>.col-lg-12 {
        grid-column: 1 / -1 !important;

        float: none !important;

        width: 100% !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;
    }

    html body main .pagination {
        margin: 10px 0 !important;
    }
}

/* ============================================================
   PANTALLAS MUY ANGOSTAS
   ============================================================ */

@media screen and (max-width: 380px) {

    html body main #main-container-wrapper .container.main-container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    html body main .productWrapper {
        gap: 10px 8px !important;
    }

    html body main .productWrapper .product .image {
        height: 118px !important;
        min-height: 118px !important;
        max-height: 118px !important;
    }

    html body main .productWrapper .product .description {
        min-height: 90px !important;
        padding: 10px 6px 6px !important;
    }

    html body main .productWrapper .product .description h4 {
        font-size: 12px !important;
    }

    html body main .productWrapper .product .action-control>a.btn.btn-primary,
    html body main .productWrapper .product .action-control .add2cart {
        font-size: 9px !important;
    }
}

/* ============================================================
   CATÁLOGO MOBILE — AJUSTES FINALES
   Filtros alineados + imágenes más altas
   ============================================================ */

@media screen and (max-width: 767px) {

    /* ========================================================
       CATEGORÍAS Y LOCAL
       ======================================================== */

    html body main .filterColumn .panel.panel-flat {
        margin: 0 !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }

    html body main .filterColumn .panel-heading {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
    }

    html body main .filterColumn .panel-title {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .filterColumn .panel-title>a {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 16px 46px 16px 4px !important;

        background: #ffffff !important;
        color: #222222 !important;

        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 22px !important;

        text-align: left !important;
        text-transform: uppercase !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    /* El + siempre queda a la derecha */
    html body main .filterColumn .panel-title>a .hasPlus {
        position: absolute !important;
        top: 50% !important;
        right: 4px !important;
        left: auto !important;

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

        width: 32px !important;
        height: 32px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: translateY(-50%) !important;
    }

    html body main .filterColumn .panel-title>a .hasPlus .i-minus {
        position: relative !important;
        display: block !important;

        width: 22px !important;
        height: 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    /* Líneas del símbolo + */
    html body main .filterColumn .panel-title>a .hasPlus .i-minus::before,
    html body main .filterColumn .panel-title>a .hasPlus .i-minus::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        display: block !important;

        background: #b7b7b7 !important;
        transform: translate(-50%, -50%) !important;
    }

    html body main .filterColumn .panel-title>a .hasPlus .i-minus::before {
        width: 22px !important;
        height: 1px !important;
    }

    html body main .filterColumn .panel-title>a .hasPlus .i-minus::after {
        width: 1px !important;
        height: 22px !important;
    }

    /* ========================================================
       IMÁGENES DE PRODUCTOS
       ======================================================== */

    html body main .productWrapper .product .image {
        width: 100% !important;

        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        background: #fecc16 !important;
    }

    html body main .productWrapper .product .image>a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

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

        margin: 0 !important;
        padding: 0 !important;

        background: #fecc16 !important;
    }

    html body main .productWrapper .product .image img {
        position: static !important;
        display: block !important;

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

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

        min-width: 0 !important;
        min-height: 0 !important;

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

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

        transform: none !important;
    }
}

/* iPhone SE y pantallas angostas */
@media screen and (max-width: 380px) {

    html body main .productWrapper .product .image {
        height: 155px !important;
        min-height: 155px !important;
        max-height: 155px !important;
    }

    html body main .filterColumn .panel-title>a {
        min-height: 52px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        font-size: 15px !important;
    }
}

/* =========================================
   CATÁLOGO MOBILE — MOSTRAR SOLO
   LA PARTE SUPERIOR DEL VALE
   ========================================= */

@media screen and (max-width: 767px) {

    html body main .productWrapper .product .image {
        width: 100% !important;
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fecc16 !important;
    }

    html body main .productWrapper .product .image>a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body main .productWrapper .product .image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: top center !important;
        transform: none !important;
    }
}

@media screen and (max-width: 380px) {
    html body main .productWrapper .product .image {
        height: 110px !important;
        min-height: 110px !important;
        max-height: 110px !important;
    }
}

/* ============================================================
   DETALLE DE PRODUCTO MOBILE — SOCIO AURINEGRO
   ============================================================ */

@media screen and (max-width: 767px) {

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

    html body main .container.main-container.headerOffset {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 138px 14px 30px !important;

        overflow: hidden !important;
        background: #ffffff !important;
    }

    /* Ocultar breadcrumb en mobile */
    html body main .breadcrumbDiv {
        display: none !important;
    }

    html body main .row.transitionfx {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .row.transitionfx>div[class*="col-"] {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* ========================================================
       IMAGEN PRINCIPAL
       Solo se ve la parte superior amarilla
       ======================================================== */

    html body main .main-image,
    html body main .main-image.sp-wrap {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;

        margin: 0 0 22px !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #fecc16 !important;
        border: 1px solid #dddddd !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    html body main .main-image .sp-large {
        display: block !important;

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

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        background: #fecc16 !important;
    }

    html body main .main-image .sp-large>a {
        display: block !important;

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

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    html body main .main-image .sp-large img {
        position: static !important;
        display: block !important;

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

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

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: top center !important;

        transform: none !important;
    }

    /* Evitar elementos de zoom o miniaturas */
    html body main .main-image .sp-thumbs,
    html body main .main-image .sp-zoom {
        display: none !important;
    }

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

    html body main .product-title {
        width: 100% !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        color: #222222 !important;

        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        text-transform: uppercase !important;
    }

    html body main .product-price {
        width: 100% !important;

        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    html body main .product-price .price-sales {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;

        color: #222222 !important;

        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    html body main .product-price .product-price-color,
    html body main .product-price .fa-star {
        color: #fecc16 !important;
        font-size: 21px !important;
    }

    html body main .details-description,
    html body main .product-store {
        width: 100% !important;

        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    html body main .details-description p,
    html body main .product-store p {
        margin: 0 !important;
        padding: 0 !important;

        color: #333333 !important;

        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    html body main .product-store strong {
        color: #111111 !important;
        font-weight: 700 !important;
    }

    /* ========================================================
       ALERTA DE STOCK
       ======================================================== */

    html body main .alert.alert-warning {
        display: flex !important;
        align-items: flex-start !important;
        gap: 7px !important;

        width: 100% !important;

        margin: 16px 0 !important;
        padding: 13px 14px !important;

        background: #fff8dc !important;
        border: 1px solid #f0df9e !important;
        border-left: 4px solid #fecc16 !important;
        border-radius: 7px !important;

        color: #765b12 !important;

        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    html body main .alert.alert-warning .fa {
        flex-shrink: 0 !important;

        margin-top: 2px !important;

        color: #b78a00 !important;
        font-size: 15px !important;
    }

    /* ========================================================
       BOTÓN DE CANJE
       ======================================================== */

    html body main .cart-actions {
        width: 100% !important;

        margin: 0 0 22px !important;
        padding: 0 !important;
    }

    html body main .cart-actions .addto,
    html body main .cart-actions .addto>div {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .cart-actions .btn-cart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        width: 100% !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 10px 14px !important;

        background: #fecc16 !important;
        background-color: #fecc16 !important;
        background-image: none !important;

        border: 1px solid #fecc16 !important;
        border-radius: 7px !important;

        color: #000000 !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        box-shadow: none !important;
        text-transform: uppercase !important;
    }

    /* Botón sin stock */
    html body main .cart-actions .btn-cart:disabled,
    html body main .cart-actions .btn-cart[disabled] {
        background: #eeeeee !important;
        background-color: #eeeeee !important;

        border-color: #d6d6d6 !important;

        color: #777777 !important;

        opacity: 1 !important;
        cursor: not-allowed !important;
    }

    html body main .cart-actions .btn-cart:disabled .fa,
    html body main .cart-actions .btn-cart[disabled] .fa {
        color: #777777 !important;
    }

    /* ========================================================
       PESTAÑAS
       ======================================================== */

    html body main .product-tab {
        width: 100% !important;

        margin: 0 !important;
        padding: 20px 0 0 !important;

        border-top: 1px solid #dddddd !important;
    }

    html body main .product-tab .nav-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 3px solid #fecc16 !important;
        background: #ffffff !important;
    }

    html body main .product-tab .nav-tabs>li {
        float: none !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .product-tab .nav-tabs>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 9px 5px !important;

        background: #ffffff !important;
        border: 0 !important;
        border-radius: 0 !important;

        color: #555555 !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;

        text-align: center !important;
        text-transform: uppercase !important;
    }

    html body main .product-tab .nav-tabs>li.active>a,
    html body main .product-tab .nav-tabs>li.active>a:hover,
    html body main .product-tab .nav-tabs>li.active>a:focus {
        background: #fecc16 !important;
        color: #000000 !important;
        font-weight: 700 !important;
    }

    html body main .product-tab .tab-content {
        width: 100% !important;

        min-height: 100px !important;

        margin: 0 !important;
        padding: 18px 0 8px !important;

        color: #333333 !important;

        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    html body main .product-tab .tab-pane {
        width: 100% !important;
        overflow-x: auto !important;
    }

    html body main .product-tab .table {
        width: 100% !important;

        margin: 0 !important;

        font-size: 13px !important;
    }

    html body main .product-tab .table td,
    html body main .product-tab .table th {
        padding: 10px 8px !important;
        vertical-align: middle !important;
    }

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

    html body main .recommended {
        width: 100% !important;

        margin: 26px 0 0 !important;
        padding: 24px 0 0 !important;

        border-top: 1px solid #dddddd !important;
    }

    html body main .recommended>h1 {
        width: 100% !important;

        margin: 0 0 20px !important;
        padding: 0 10px !important;

        color: #222222 !important;

        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        text-transform: uppercase !important;
    }

    html body main #SimilarProductSlider {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    html body main #SimilarProductSlider .owl-wrapper-outer {
        width: 100% !important;
        overflow: hidden !important;
    }

    html body main #SimilarProductSlider .owl-item {
        width: 280px !important;
        max-width: 80vw !important;

        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    html body main #SimilarProductSlider .product {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    html body main #SimilarProductSlider .product-image {
        display: block !important;

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

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        background: #fecc16 !important;
    }

    html body main #SimilarProductSlider .product-image img {
        display: block !important;

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

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: top center !important;
    }

    html body main #SimilarProductSlider .description {
        width: 100% !important;
        min-height: 105px !important;

        margin: 0 !important;
        padding: 14px 10px !important;

        text-align: center !important;
    }

    html body main #SimilarProductSlider .description h4 {
        margin: 0 0 12px !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    html body main #SimilarProductSlider .description h4 a {
        color: #222222 !important;
    }

    html body main #SimilarProductSlider .price {
        margin: 0 !important;
        padding: 0 !important;

        color: #222222 !important;

        font-size: 16px !important;
        font-weight: 700 !important;
    }

    html body main #SimilarProductSlider .price .fa-star {
        color: #fecc16 !important;
    }

    /* Flechas y puntos del carrusel */
    html body main #SimilarProductSlider .owl-controls {
        margin-top: 16px !important;
    }

    html body main #SimilarProductSlider .owl-pagination {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    html body main #SimilarProductSlider .owl-page span {
        width: 9px !important;
        height: 9px !important;

        margin: 0 !important;

        background: #cccccc !important;
        opacity: 1 !important;
    }

    html body main #SimilarProductSlider .owl-page.active span {
        background: #fecc16 !important;
    }

    html body main #SimilarProductSlider .owl-prev,
    html body main #SimilarProductSlider .owl-next {
        color: #000000 !important;
        font-size: 24px !important;
    }
}

/* ============================================================
   IPHONE SE
   ============================================================ */

@media screen and (max-width: 380px) {

    html body main .container.main-container.headerOffset {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    html body main .main-image,
    html body main .main-image.sp-wrap {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    html body main .product-title {
        font-size: 22px !important;
    }

    html body main .product-tab .nav-tabs>li>a {
        min-height: 44px !important;
        padding: 8px 3px !important;
        font-size: 11px !important;
    }

    html body main .recommended>h1 {
        font-size: 20px !important;
    }
}

/* ============================================================
   DETALLE DE PRODUCTO MOBILE — AJUSTES FINALES
   Más alto para la imagen + tabs alineados a la izquierda
   ============================================================ */

@media screen and (max-width: 767px) {

    /* 1) Imagen principal un poco más alta */
    html body main .main-image,
    html body main .main-image.sp-wrap {
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;
    }

    html body main .main-image .sp-large {
        height: 100% !important;
    }

    html body main .main-image .sp-large img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
    }

    /* 2) Tabs alineados hacia la izquierda */
    html body main .product-tab .nav-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        justify-items: stretch !important;
    }

    html body main .product-tab .nav-tabs>li {
        width: 100% !important;
    }

    html body main .product-tab .nav-tabs>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;

        width: 100% !important;
        min-height: 46px !important;

        padding: 10px 12px !important;
    }

    html body main .product-tab .nav-tabs>li.active>a,
    html body main .product-tab .nav-tabs>li.active>a:hover,
    html body main .product-tab .nav-tabs>li.active>a:focus {
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 12px !important;
    }
}

@media screen and (max-width: 380px) {

    html body main .main-image,
    html body main .main-image.sp-wrap {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    html body main .product-tab .nav-tabs>li>a {
        padding: 9px 10px !important;
        font-size: 11px !important;
    }
}

/* ============================================================
   DESKTOP LIMPIO — CATÁLOGO Y DETALLE DE PRODUCTO
   ============================================================ */

@media screen and (min-width: 768px) {

    /* CATÁLOGO: conservar banner original */
    html body main #category-intro.section-intro .cat-intro-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    html body main #main-container-wrapper.main-container-wrapper {
        margin: 0 !important;
        padding: 34px 0 50px !important;
        background: #fff !important;
    }

    html body main #main-container-wrapper .container.main-container {
        width: 100% !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
        padding: 0 28px !important;
    }

    html body main .catColumnWrapper {
        display: flex !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html body main .filterColumn {
        flex: 0 0 25% !important;
        width: 25% !important;
        margin: 0 !important;
        padding: 0 34px 0 0 !important;
    }

    html body main .productColumn {
        flex: 0 0 75% !important;
        width: 75% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .productWrapper {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 24px 30px !important;
    }

    html body main .productWrapper::before,
    html body main .productWrapper::after {
        display: none !important;
        content: none !important;
    }

    html body main .productWrapper>.item {
        position: static !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .productWrapper>.item .product {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    html body main .productWrapper .product .image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    html body main .productWrapper .product .image>a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    html body main .productWrapper .product .image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    html body main .productWrapper .product .description {
        width: 100% !important;
        min-height: 116px !important;
        margin: 0 !important;
        padding: 22px 16px 12px !important;
        text-align: center !important;
    }

    html body main .productWrapper .product .description h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        margin: 0 0 8px !important;
        font-size: 19px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    html body main .productWrapper .product .description h4 a {
        width: 100% !important;
        color: #111 !important;
        text-align: center !important;
    }

    html body main .productWrapper .product .grid-description p {
        margin: 0 !important;
        color: #777 !important;
        font-size: 14px !important;
        text-align: center !important;
    }

    html body main .productWrapper .product .price {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 14px 14px !important;
        color: #000 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    html body main .productWrapper .product .price::before {
        content: "★" !important;
        margin-right: 5px !important;
        color: #fecc16 !important;
    }

    html body main .productWrapper .product .action-control {
        width: 100% !important;
        margin: auto 0 0 !important;
        padding: 0 16px 16px !important;
    }

    html body main .productWrapper .product .action-control>a.btn.btn-primary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        background: #fecc16 !important;
        border: 1px solid #fecc16 !important;
        border-radius: 7px !important;
        color: #000 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    html body main .productWrapper>.col-lg-12 {
        grid-column: 1/-1 !important;
        width: 100% !important;
    }
}

@media screen and (min-width: 992px) {

    /* DETALLE: dos columnas limpias y proporcionadas */
    html body main .container.main-container.headerOffset {
        width: calc(100% - 64px) !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
        padding: 145px 0 60px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    html body main .container.main-container.headerOffset>.row:first-child {
        width: 100% !important;
        margin: 0 0 32px !important;
        padding: 0 !important;
    }

    html body main .breadcrumbDiv {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .breadcrumbDiv .breadcrumb {
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 18px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
    }

    html body main .row.transitionfx {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 48px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .row.transitionfx::before,
    html body main .row.transitionfx::after {
        display: none !important;
        content: none !important;
    }

    html body main .row.transitionfx>div[class*="col-"] {
        position: static !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .main-image,
    html body main .main-image.sp-wrap,
    html body main .main-image-thumb-list.sp-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    html body main .main-image .sp-large,
    html body main .main-image .sp-large>a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    html body main .main-image .sp-large img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center top !important;
        transform: none !important;
    }

    html body main .main-image .sp-thumbs,
    html body main .main-image .sp-zoom {
        display: none !important;
    }

    html body main .row.transitionfx>div:last-child {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 0 0 !important;
    }

    html body main .product-title {
        width: 100% !important;
        margin: 0 0 18px !important;
        font-size: 36px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    html body main .product-price {
        width: 100% !important;
        margin: 0 0 24px !important;
    }

    html body main .product-price .price-sales {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 27px !important;
        font-weight: 700 !important;
    }

    html body main .product-price .fa-star {
        color: #fecc16 !important;
    }

    html body main .details-description,
    html body main .product-store {
        width: 100% !important;
        margin: 0 0 17px !important;
    }

    html body main .details-description p,
    html body main .product-store p {
        margin: 0 !important;
        color: #333 !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    html body main .alert.alert-warning {
        display: flex !important;
        align-items: flex-start !important;
        gap: 9px !important;
        width: 100% !important;
        margin: 6px 0 18px !important;
        padding: 15px 16px !important;
        background: #fff8dc !important;
        border: 1px solid #f0df9e !important;
        border-left: 4px solid #fecc16 !important;
        border-radius: 7px !important;
        color: #765b12 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    html body main .cart-actions,
    html body main .cart-actions .addto,
    html body main .cart-actions .addto>div {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .cart-actions {
        margin-bottom: 26px !important;
    }

    html body main .cart-actions .btn-cart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 11px 18px !important;
        background: #fecc16 !important;
        border: 1px solid #fecc16 !important;
        border-radius: 7px !important;
        color: #000 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        box-shadow: none !important;
    }

    html body main .cart-actions .btn-cart[disabled] {
        background: #eee !important;
        border-color: #d6d6d6 !important;
        color: #777 !important;
        opacity: 1 !important;
    }

    html body main .product-tab {
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 22px 0 0 !important;
        border-top: 1px solid #ddd !important;
    }

    html body main .product-tab .nav-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 3px solid #fecc16 !important;
    }

    html body main .product-tab .nav-tabs::before,
    html body main .product-tab .nav-tabs::after {
        display: none !important;
        content: none !important;
    }

    html body main .product-tab .nav-tabs>li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html body main .product-tab .nav-tabs>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 10px 8px !important;
        background: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #555 !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }

    html body main .product-tab .nav-tabs>li.active>a {
        background: #fecc16 !important;
        color: #000 !important;
        font-weight: 700 !important;
    }

    html body main .product-tab .tab-content {
        width: 100% !important;
        min-height: 110px !important;
        margin: 0 !important;
        padding: 20px 0 10px !important;
        color: #333 !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    html body main .recommended {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        margin: 52px 0 0 !important;
        padding: 34px 0 0 !important;
        border-top: 1px solid #ddd !important;
    }

    html body main .recommended>h1 {
        width: 100% !important;
        margin: 0 0 28px !important;
        color: #222 !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    html body main #SimilarProductSlider .product-image {
        display: block !important;
        width: 100% !important;
        height: 190px !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    html body main #SimilarProductSlider .product-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* ============================================================
   MIS PUNTOS — SOCIO AURINEGRO
   MOBILE + DESKTOP
   ============================================================ */

/* ============================================================
   DESKTOP
   ============================================================ */

@media screen and (min-width: 768px) {

    html body main .container.page-content-offset {
        width: calc(100% - 80px) !important;
        max-width: 1280px !important;

        margin: 0 auto !important;
        padding: 145px 0 60px !important;

        background: #ffffff !important;
    }

    /* Breadcrumb */
    html body main .container.page-content-offset>.row:first-child {
        width: 100% !important;

        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    html body main .container.page-content-offset .breadcrumb {
        width: 100% !important;

        margin: 0 !important;
        padding: 14px 18px !important;

        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-radius: 6px !important;
    }

    /* Título */
    html body main .container.page-content-offset>h2 {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;

        width: 100% !important;

        margin: 0 0 28px !important;
        padding: 0 !important;

        color: #111111 !important;

        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    html body main .container.page-content-offset>h2 .fa-star {
        color: #fecc16 !important;
        font-size: 26px !important;
    }

    /* Tarjetas resumen */
    html body main .stats-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;

        width: 100% !important;

        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    html body main .stats-row .stat-card {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 92px !important;

        margin: 0 !important;
        padding: 0 20px !important;

        border: 0 !important;
        border-radius: 12px !important;

        box-shadow: none !important;
        text-align: left !important;
    }

    /* Colores institucionales */
    html body main .stats-row .stat-card.bg-primary-grad {
        background: #fecc16 !important;
        background-image: none !important;
    }

    html body main .stats-row .stat-card.bg-success-grad {
        background: #000000 !important;
        background-image: none !important;
    }

    html body main .stats-row .stat-card.bg-info-grad {
        background: #666666 !important;
        background-image: none !important;
    }

    /* Íconos */
    html body main .stats-row .stat-card>i.fa {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 34px !important;
        height: 34px !important;

        margin: 0 !important;

        color: #ffffff !important;
        font-size: 24px !important;
    }

    html body main .stats-row .stat-card.bg-primary-grad>i.fa {
        color: #000000 !important;
    }

    /* Textos tarjetas */
    html body main .stats-row .stat-label {
        margin: 0 !important;
        padding: 0 10px !important;

        color: #ffffff !important;

        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;

        text-align: left !important;
    }

    html body main .stats-row .stat-value {
        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-align: right !important;
    }

    html body main .stats-row .stat-card.bg-primary-grad .stat-label,
    html body main .stats-row .stat-card.bg-primary-grad .stat-value {
        color: #000000 !important;
    }

    /* Card de movimientos */
    html body main .card-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 12px !important;

        box-shadow: none !important;
    }

    html body main .card-header-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
        border-bottom: 1px solid #dddddd !important;
    }

    /* Tabs */
    html body main .points-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 180px)) !important;
        justify-content: start !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        background: #ffffff !important;
    }

    html body main .points-tabs>li {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .points-tabs>li>a {
        position: relative !important;

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

        width: 100% !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 12px 10px !important;

        background: #ffffff !important;
        border: 0 !important;

        color: #555555 !important;

        font-size: 14px !important;
        font-weight: 500 !important;

        text-align: center !important;
        text-decoration: none !important;
    }

    html body main .points-tabs>li>a.active {
        color: #000000 !important;
        font-weight: 700 !important;
    }

    html body main .points-tabs>li>a.active::after {
        content: "" !important;

        position: absolute !important;
        right: 14px !important;
        bottom: 0 !important;
        left: 14px !important;

        height: 4px !important;

        background: #fecc16 !important;
        border-radius: 4px 4px 0 0 !important;
    }

    html body main .points-tabs .text-success-custom {
        color: #fecc16 !important;
    }

    html body main .points-tabs .text-danger-custom {
        color: #777777 !important;
    }

    /* Estado vacío */
    html body main .card-body-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }

    html body main .card-body-custom>.text-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 320px !important;

        margin: 0 !important;
        padding: 50px 20px !important;

        background: #ffffff !important;
    }

    html body main .icon-circle.icon-lg {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 88px !important;
        height: 88px !important;

        margin: 0 0 22px !important;

        background: #f1f1f1 !important;
        border-radius: 50% !important;

        color: #cccccc !important;
    }

    html body main .icon-circle.icon-lg .fa-history {
        color: #cccccc !important;
        font-size: 38px !important;
    }

    html body main .card-body-custom h4 {
        margin: 0 0 12px !important;

        color: #222222 !important;

        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    html body main .card-body-custom p {
        margin: 0 !important;

        color: #666666 !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        text-align: center !important;
    }
}


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

@media screen and (max-width: 767px) {

    html body main .container.page-content-offset {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 138px 14px 28px !important;

        background: #ffffff !important;
        overflow: hidden !important;
    }

    /* Ocultar breadcrumb */
    html body main .container.page-content-offset>.row:first-child {
        display: none !important;
    }

    /* Título */
    html body main .container.page-content-offset>h2 {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;

        margin: 0 0 20px !important;
        padding: 0 !important;

        color: #111111 !important;

        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    html body main .container.page-content-offset>h2 .fa-star {
        color: #fecc16 !important;
        font-size: 21px !important;
    }

    /* Tarjetas resumen compactas */
    html body main .stats-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        width: 100% !important;

        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    html body main .stats-row .stat-card {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 62px !important;

        margin: 0 !important;
        padding: 0 14px !important;

        border: 0 !important;
        border-radius: 10px !important;

        box-shadow: none !important;
        text-align: left !important;
    }

    html body main .stats-row .stat-card.bg-primary-grad {
        background: #fecc16 !important;
        background-image: none !important;
    }

    html body main .stats-row .stat-card.bg-success-grad {
        background: #000000 !important;
        background-image: none !important;
    }

    html body main .stats-row .stat-card.bg-info-grad {
        background: #666666 !important;
        background-image: none !important;
    }

    html body main .stats-row .stat-card>i.fa {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 28px !important;
        height: 28px !important;

        margin: 0 !important;

        color: #ffffff !important;
        font-size: 19px !important;
    }

    html body main .stats-row .stat-card.bg-primary-grad>i.fa {
        color: #000000 !important;
    }

    html body main .stats-row .stat-label {
        margin: 0 !important;
        padding: 0 8px !important;

        color: #ffffff !important;

        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;

        text-align: left !important;
    }

    html body main .stats-row .stat-value {
        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-align: right !important;
    }

    html body main .stats-row .stat-card.bg-primary-grad .stat-label,
    html body main .stats-row .stat-card.bg-primary-grad .stat-value {
        color: #000000 !important;
    }

    /* Card de movimientos */
    html body main .card-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 10px !important;

        box-shadow: none !important;
    }

    html body main .card-header-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
        border-bottom: 1px solid #dddddd !important;
    }

    /* Tabs */
    html body main .points-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    html body main .points-tabs>li {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body main .points-tabs>li>a {
        position: relative !important;

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

        width: 100% !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 8px 2px !important;

        background: #ffffff !important;
        border: 0 !important;

        color: #555555 !important;

        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;

        text-align: center !important;
        text-decoration: none !important;
    }

    html body main .points-tabs>li>a .fa {
        font-size: 11px !important;
    }

    html body main .points-tabs>li>a.active {
        color: #000000 !important;
        font-weight: 700 !important;
    }

    html body main .points-tabs>li>a.active::after {
        content: "" !important;

        position: absolute !important;
        right: 8px !important;
        bottom: 0 !important;
        left: 8px !important;

        height: 3px !important;

        background: #fecc16 !important;
        border-radius: 3px 3px 0 0 !important;
    }

    html body main .points-tabs .text-success-custom {
        color: #fecc16 !important;
    }

    html body main .points-tabs .text-danger-custom {
        color: #777777 !important;
    }

    /* Estado vacío */
    html body main .card-body-custom>.text-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 250px !important;

        margin: 0 !important;
        padding: 30px 16px !important;

        background: #ffffff !important;
    }

    html body main .icon-circle.icon-lg {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 72px !important;
        height: 72px !important;

        margin: 0 0 18px !important;

        background: #f1f1f1 !important;
        border-radius: 50% !important;

        color: #cccccc !important;
    }

    html body main .icon-circle.icon-lg .fa-history {
        color: #cccccc !important;
        font-size: 31px !important;
    }

    html body main .card-body-custom h4 {
        margin: 0 0 9px !important;

        color: #222222 !important;

        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    html body main .card-body-custom p {
        max-width: 250px !important;

        margin: 0 !important;

        color: #666666 !important;

        font-size: 12px !important;
        line-height: 1.4 !important;

        text-align: center !important;
    }
}


/* ============================================================
   IPHONE SE
   ============================================================ */

@media screen and (max-width: 380px) {

    html body main .container.page-content-offset {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    html body main .container.page-content-offset>h2 {
        font-size: 21px !important;
    }

    html body main .stats-row .stat-card {
        min-height: 58px !important;
        padding: 0 12px !important;
    }

    html body main .stats-row .stat-label {
        font-size: 12px !important;
    }

    html body main .stats-row .stat-value {
        font-size: 22px !important;
    }

    html body main .points-tabs>li>a {
        min-height: 44px !important;
        font-size: 10px !important;
    }

    html body main .card-body-custom>.text-center {
        min-height: 230px !important;
        padding: 26px 12px !important;
    }
}

/* ============================================================
   MIS CANJES — SOCIO AURINEGRO
   MOBILE + DESKTOP
   ============================================================ */

/* ============================================================
   DESKTOP
   ============================================================ */

@media screen and (min-width: 768px) {

    html body main .container.page-content-offset {
        width: calc(100% - 80px) !important;
        max-width: 1280px !important;

        margin: 0 auto !important;
        padding: 145px 0 60px !important;

        background: #ffffff !important;
    }

    /* Breadcrumb */
    html body main .container.page-content-offset>.row:first-child {
        width: 100% !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    html body main .container.page-content-offset .breadcrumb {
        width: 100% !important;

        margin: 0 !important;
        padding: 14px 18px !important;

        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-radius: 6px !important;
    }

    /* Título */
    html body main .container.page-content-offset>h2 {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;

        width: 100% !important;

        margin: 0 0 28px !important;
        padding: 0 !important;

        color: #111111 !important;

        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    html body main .container.page-content-offset>h2 .fa-exchange {
        color: #fecc16 !important;
        font-size: 28px !important;
    }

    /* Estado vacío */
    html body main .container.page-content-offset>.text-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 860px !important;
        min-height: 420px !important;

        margin: 0 auto !important;
        padding: 56px 30px !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 14px !important;

        box-shadow: none !important;
        text-align: center !important;
    }

    html body main .container.page-content-offset>.text-center .icon-circle.icon-lg {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 96px !important;
        height: 96px !important;

        margin: 0 0 24px !important;

        background: #f3f3f3 !important;
        border-radius: 50% !important;
        color: #cccccc !important;
    }

    html body main .container.page-content-offset>.text-center .icon-circle.icon-lg .fa-exchange {
        color: #cccccc !important;
        font-size: 42px !important;
    }

    html body main .container.page-content-offset>.text-center h4 {
        margin: 0 0 14px !important;

        color: #222222 !important;

        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    html body main .container.page-content-offset>.text-center p {
        max-width: 520px !important;

        margin: 0 0 24px !important;
        padding: 0 !important;

        color: #666666 !important;

        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    html body main .container.page-content-offset>.text-center .btn.btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        min-width: 220px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 12px 22px !important;

        background: #fecc16 !important;
        background-image: none !important;

        border: 1px solid #fecc16 !important;
        border-radius: 8px !important;

        color: #000000 !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-transform: none !important;

        box-shadow: none !important;
    }

    html body main .container.page-content-offset>.text-center .btn.btn-primary:hover {
        background: #e6b814 !important;
        border-color: #e6b814 !important;
        color: #000000 !important;
    }

    html body main .container.page-content-offset>.text-center .btn.btn-primary .fa {
        color: #000000 !important;
        font-size: 14px !important;
    }
}


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

@media screen and (max-width: 767px) {

    html body main .container.page-content-offset {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 138px 14px 28px !important;

        background: #ffffff !important;
        overflow: hidden !important;
    }

    /* Ocultar breadcrumb */
    html body main .container.page-content-offset>.row:first-child {
        display: none !important;
    }

    /* Título */
    html body main .container.page-content-offset>h2 {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        color: #111111 !important;

        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    html body main .container.page-content-offset>h2 .fa-exchange {
        color: #fecc16 !important;
        font-size: 23px !important;
    }

    /* Estado vacío */
    html body main .container.page-content-offset>.text-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 300px !important;

        margin: 0 !important;
        padding: 30px 18px !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 12px !important;

        box-shadow: none !important;
        text-align: center !important;
    }

    html body main .container.page-content-offset>.text-center .icon-circle.icon-lg {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 76px !important;
        height: 76px !important;

        margin: 0 0 18px !important;

        background: #f3f3f3 !important;
        border-radius: 50% !important;
        color: #cccccc !important;
    }

    html body main .container.page-content-offset>.text-center .icon-circle.icon-lg .fa-exchange {
        color: #cccccc !important;
        font-size: 32px !important;
    }

    html body main .container.page-content-offset>.text-center h4 {
        margin: 0 0 10px !important;

        color: #222222 !important;

        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    html body main .container.page-content-offset>.text-center p {
        max-width: 260px !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        color: #666666 !important;

        font-size: 13px !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    html body main .container.page-content-offset>.text-center .btn.btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        width: 100% !important;
        max-width: 240px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 10px 16px !important;

        background: #fecc16 !important;
        background-image: none !important;

        border: 1px solid #fecc16 !important;
        border-radius: 8px !important;

        color: #000000 !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        box-shadow: none !important;
    }

    html body main .container.page-content-offset>.text-center .btn.btn-primary .fa {
        color: #000000 !important;
        font-size: 13px !important;
    }
}


/* ============================================================
   IPHONE SE
   ============================================================ */

@media screen and (max-width: 380px) {

    html body main .container.page-content-offset {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    html body main .container.page-content-offset>h2 {
        font-size: 22px !important;
    }

    html body main .container.page-content-offset>.text-center {
        min-height: 280px !important;
        padding: 26px 14px !important;
    }

    html body main .container.page-content-offset>.text-center h4 {
        font-size: 20px !important;
    }

    html body main .container.page-content-offset>.text-center p {
        font-size: 12px !important;
    }

    html body main .container.page-content-offset>.text-center .btn.btn-primary {
        max-width: 220px !important;
        min-height: 42px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   MI CUENTA — SOCIO AURINEGRO
   DESKTOP + MOBILE
   ============================================================ */

/* ============================================================
   DESKTOP
   ============================================================ */

@media screen and (min-width: 768px) {

    /* Contenedor general */
    body:has(.sidebar-card) main .container.page-content-offset {
        width: calc(100% - 80px) !important;
        max-width: 1380px !important;

        margin: 0 auto !important;
        padding: 145px 0 60px !important;

        background: #ffffff !important;
    }

    /* Breadcrumb */
    body:has(.sidebar-card) main .container.page-content-offset>.row:first-child {
        width: 100% !important;

        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    body:has(.sidebar-card) main .breadcrumb {
        width: 100% !important;

        margin: 0 !important;
        padding: 14px 18px !important;

        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-radius: 7px !important;
    }

    /* Fila principal */
    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2) {
        display: grid !important;
        grid-template-columns: 280px minmax(0, 1fr) !important;
        gap: 30px !important;
        align-items: start !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2)::before,
    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2)::after {
        display: none !important;
        content: none !important;
    }

    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2)>div[class*="col-"] {
        position: static !important;
        display: block !important;

        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* ========================================================
       SIDEBAR
       ======================================================== */

    body:has(.sidebar-card) main .sidebar-card {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 14px !important;

        box-shadow: none !important;
    }

    body:has(.sidebar-card) main .sidebar-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 28px 18px 24px !important;

        background: #f7f7f7 !important;

        text-align: center !important;
    }

    body:has(.sidebar-card) main .avatar-circle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 82px !important;
        height: 82px !important;

        margin: 0 0 15px !important;

        background: #000000 !important;
        border: 4px solid #fecc16 !important;
        border-radius: 50% !important;

        color: #ffffff !important;

        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    body:has(.sidebar-card) main .user-name {
        margin: 0 0 5px !important;

        color: #111111 !important;

        font-size: 19px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    body:has(.sidebar-card) main .user-email {
        max-width: 100% !important;

        margin: 0 0 16px !important;

        overflow-wrap: anywhere !important;

        color: #666666 !important;

        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body:has(.sidebar-card) main .points-badge-large {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        min-height: 38px !important;

        margin: 0 !important;
        padding: 8px 15px !important;

        background: #fecc16 !important;
        border-radius: 999px !important;

        color: #000000 !important;

        font-size: 14px !important;
        font-weight: 700 !important;
    }

    body:has(.sidebar-card) main .points-badge-large .fa-star {
        color: #000000 !important;
    }

    /* Menú lateral */
    body:has(.sidebar-card) main .nav-menu {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    body:has(.sidebar-card) main .nav-menu>li {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-top: 1px solid #eeeeee !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a {
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;

        width: 100% !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 14px 18px !important;

        background: #ffffff !important;

        color: #222222 !important;

        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;

        text-decoration: none !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a i.fa {
        width: 20px !important;

        color: #fecc16 !important;

        font-size: 15px !important;
        text-align: center !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a.active {
        background: #000000 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a.active i.fa {
        color: #fecc16 !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a:hover {
        background: #f5f5f5 !important;
        color: #000000 !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a.text-danger-custom {
        color: #d33c3c !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a.text-danger-custom i.fa {
        color: #d33c3c !important;
    }

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

    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2)>div:last-child>h2 {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;

        width: 100% !important;

        margin: 0 0 24px !important;
        padding: 0 !important;

        color: #111111 !important;

        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2)>div:last-child>h2 .fa-user {
        color: #fecc16 !important;
        font-size: 25px !important;
    }

    /* Resumen */
    body:has(.sidebar-card) main .stats-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;

        width: 100% !important;

        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 86px !important;

        margin: 0 !important;
        padding: 0 18px !important;

        border-radius: 11px !important;
        box-shadow: none !important;

        text-align: left !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-primary-grad {
        background: #fecc16 !important;
        background-image: none !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-success-grad {
        background: #000000 !important;
        background-image: none !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-info-grad {
        background: #666666 !important;
        background-image: none !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card>i.fa {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 30px !important;
        height: 30px !important;

        margin: 0 !important;

        color: #ffffff !important;
        font-size: 20px !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-primary-grad>i.fa {
        color: #000000 !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-label {
        margin: 0 !important;
        padding: 0 8px !important;

        color: #ffffff !important;

        font-size: 14px !important;
        font-weight: 500 !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-value {
        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-primary-grad .stat-label,
    body:has(.sidebar-card) main .stats-row .stat-card.bg-primary-grad .stat-value {
        color: #000000 !important;
    }

    /* ========================================================
       INFORMACIÓN DE CUENTA
       ======================================================== */

    body:has(.sidebar-card) main .card-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 12px !important;

        box-shadow: none !important;
    }

    body:has(.sidebar-card) main .card-header-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 15px 18px !important;

        background: #000000 !important;
        border: 0 !important;
    }

    body:has(.sidebar-card) main .card-header-custom h5 {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 16px !important;
        font-weight: 700 !important;
    }

    body:has(.sidebar-card) main .card-header-custom h5 .fa {
        color: #fecc16 !important;
    }

    body:has(.sidebar-card) main .card-body-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 24px !important;

        background: #ffffff !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 24px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.row::before,
    body:has(.sidebar-card) main .card-body-custom>.row::after {
        display: none !important;
        content: none !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.row>div[class*="col-"] {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 15px 0 !important;

        border-bottom: 1px solid #eeeeee !important;
    }

    body:has(.sidebar-card) main .card-body-custom label {
        display: block !important;

        margin: 0 0 5px !important;

        color: #777777 !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;

        text-transform: uppercase !important;
    }

    body:has(.sidebar-card) main .card-body-custom p {
        margin: 0 !important;

        overflow-wrap: anywhere !important;

        color: #222222 !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }

    body:has(.sidebar-card) main .card-body-custom hr {
        margin: 22px 0 !important;
        border-color: #eeeeee !important;
    }

    /* Botones inferiores */
    body:has(.sidebar-card) main .card-body-custom>.text-center {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        min-height: 44px !important;

        margin: 0 !important;
        padding: 10px 18px !important;

        border-radius: 7px !important;

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

        box-shadow: none !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center .btn-primary {
        background: #fecc16 !important;
        border-color: #fecc16 !important;
        color: #000000 !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center .btn-primary .fa {
        color: #000000 !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center .btn-default {
        background: #000000 !important;
        border-color: #000000 !important;
        color: #ffffff !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center .btn-default .fa {
        color: #fecc16 !important;
    }
}


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

@media screen and (max-width: 767px) {

    body:has(.sidebar-card) main .container.page-content-offset {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 138px 12px 28px !important;

        background: #ffffff !important;
        overflow: hidden !important;
    }

    /* Ocultar breadcrumb */
    body:has(.sidebar-card) main .container.page-content-offset>.row:first-child {
        display: none !important;
    }

    /* Fila principal */
    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2)>div[class*="col-"] {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sidebar */
    body:has(.sidebar-card) main .sidebar-card {
        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 12px !important;

        box-shadow: none !important;
    }

    body:has(.sidebar-card) main .sidebar-header {
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 12px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 16px !important;

        background: #f7f7f7 !important;

        text-align: left !important;
    }

    body:has(.sidebar-card) main .avatar-circle {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;

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

        width: 58px !important;
        height: 58px !important;

        margin: 0 !important;

        background: #000000 !important;
        border: 3px solid #fecc16 !important;
        border-radius: 50% !important;

        color: #ffffff !important;

        font-size: 19px !important;
        font-weight: 700 !important;
    }

    body:has(.sidebar-card) main .user-name {
        grid-column: 2 !important;
        grid-row: 1 !important;

        margin: 0 0 3px !important;

        color: #111111 !important;

        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    body:has(.sidebar-card) main .user-email {
        grid-column: 2 !important;
        grid-row: 2 !important;

        margin: 0 !important;

        overflow-wrap: anywhere !important;

        color: #666666 !important;

        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    body:has(.sidebar-card) main .points-badge-large {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;

        min-height: 34px !important;

        margin: 0 !important;
        padding: 7px 10px !important;

        background: #fecc16 !important;
        border-radius: 999px !important;

        color: #000000 !important;

        font-size: 11px !important;
        font-weight: 700 !important;
    }

    body:has(.sidebar-card) main .nav-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    body:has(.sidebar-card) main .nav-menu>li {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-top: 1px solid #eeeeee !important;
    }

    body:has(.sidebar-card) main .nav-menu>li:nth-child(odd) {
        border-right: 1px solid #eeeeee !important;
    }

    body:has(.sidebar-card) main .nav-menu>li:last-child {
        grid-column: 1 / -1 !important;
        border-right: 0 !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        width: 100% !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 9px 6px !important;

        background: #ffffff !important;

        color: #222222 !important;

        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;

        text-align: center !important;
        text-decoration: none !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a i.fa {
        color: #fecc16 !important;
        font-size: 12px !important;
    }

    body:has(.sidebar-card) main .nav-menu>li>a.active {
        background: #000000 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* Título */
    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2)>div:last-child>h2 {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        color: #111111 !important;

        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    body:has(.sidebar-card) main .container.page-content-offset>.row:nth-child(2)>div:last-child>h2 .fa-user {
        color: #fecc16 !important;
        font-size: 21px !important;
    }

    /* Resumen */
    body:has(.sidebar-card) main .stats-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;

        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card {
        display: grid !important;
        grid-template-columns: 31px minmax(0, 1fr) auto !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 0 13px !important;

        border-radius: 9px !important;
        box-shadow: none !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-primary-grad {
        background: #fecc16 !important;
        background-image: none !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-success-grad {
        background: #000000 !important;
        background-image: none !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-info-grad {
        background: #666666 !important;
        background-image: none !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card>i.fa {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 26px !important;
        height: 26px !important;

        color: #ffffff !important;
        font-size: 17px !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-primary-grad>i.fa {
        color: #000000 !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-label {
        padding: 0 7px !important;

        color: #ffffff !important;

        font-size: 12px !important;
        font-weight: 500 !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-value {
        color: #ffffff !important;

        font-size: 22px !important;
        font-weight: 700 !important;
    }

    body:has(.sidebar-card) main .stats-row .stat-card.bg-primary-grad .stat-label,
    body:has(.sidebar-card) main .stats-row .stat-card.bg-primary-grad .stat-value {
        color: #000000 !important;
    }

    /* Información */
    body:has(.sidebar-card) main .card-custom {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;
        border-radius: 10px !important;

        box-shadow: none !important;
    }

    body:has(.sidebar-card) main .card-header-custom {
        padding: 13px 14px !important;

        background: #000000 !important;
        border: 0 !important;
    }

    body:has(.sidebar-card) main .card-header-custom h5 {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 14px !important;
        font-weight: 700 !important;
    }

    body:has(.sidebar-card) main .card-header-custom h5 .fa {
        color: #fecc16 !important;
    }

    body:has(.sidebar-card) main .card-body-custom {
        padding: 16px !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.row {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.row>div[class*="col-"] {
        float: none !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 11px 0 !important;

        border-bottom: 1px solid #eeeeee !important;
    }

    body:has(.sidebar-card) main .card-body-custom label {
        margin: 0 0 4px !important;

        color: #777777 !important;

        font-size: 10px !important;
        font-weight: 500 !important;

        text-transform: uppercase !important;
    }

    body:has(.sidebar-card) main .card-body-custom p {
        margin: 0 !important;

        overflow-wrap: anywhere !important;

        color: #222222 !important;

        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;

        width: 100% !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        width: 100% !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 9px 12px !important;

        border-radius: 7px !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        box-shadow: none !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center .btn-primary {
        background: #fecc16 !important;
        border-color: #fecc16 !important;
        color: #000000 !important;
    }

    body:has(.sidebar-card) main .card-body-custom>.text-center .btn-default {
        background: #000000 !important;
        border-color: #000000 !important;
        color: #ffffff !important;
    }
}


/* ============================================================
   MODAL CAMBIAR CONTRASEÑA
   ============================================================ */

body:has(.sidebar-card) #changePasswordModal .modal-content {
    overflow: hidden !important;

    border: 0 !important;
    border-radius: 12px !important;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22) !important;
}

body:has(.sidebar-card) #changePasswordModal .modal-header {
    padding: 16px 18px !important;

    background: #000000 !important;
    border: 0 !important;
}

body:has(.sidebar-card) #changePasswordModal .modal-title {
    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 700 !important;
}

body:has(.sidebar-card) #changePasswordModal .modal-title .fa {
    color: #fecc16 !important;
}

body:has(.sidebar-card) #changePasswordModal .close {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body:has(.sidebar-card) #changePasswordModal .modal-body {
    padding: 22px !important;
}

body:has(.sidebar-card) #changePasswordModal .form-group {
    margin-bottom: 18px !important;
}

body:has(.sidebar-card) #changePasswordModal label {
    margin-bottom: 7px !important;

    color: #222222 !important;

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

body:has(.sidebar-card) #changePasswordModal .input-group-addon {
    min-width: 44px !important;

    background: #000000 !important;
    border-color: #000000 !important;

    color: #fecc16 !important;
}

body:has(.sidebar-card) #changePasswordModal .input-group-addon .fa {
    color: #fecc16 !important;
}

body:has(.sidebar-card) #changePasswordModal .form-control {
    min-height: 42px !important;

    border-color: #dddddd !important;
    box-shadow: none !important;
}

body:has(.sidebar-card) #changePasswordModal .form-control:focus {
    border-color: #fecc16 !important;
    box-shadow: 0 0 0 2px rgba(254, 204, 22, 0.15) !important;
}

body:has(.sidebar-card) #changePasswordModal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    padding: 14px 18px !important;

    background: #f5f5f5 !important;
    border-top: 1px solid #dddddd !important;
}

body:has(.sidebar-card) #changePasswordModal .modal-footer .btn {
    margin: 0 !important;
    padding: 9px 16px !important;

    border-radius: 7px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

body:has(.sidebar-card) #changePasswordModal .modal-footer .btn-primary {
    background: #fecc16 !important;
    border-color: #fecc16 !important;
    color: #000000 !important;
}

body:has(.sidebar-card) #changePasswordModal .modal-footer .btn-default {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* ============================================================
   RECUPERAR CONTRASEÑA — SOLO ESTA PÁGINA
   ============================================================ */

/* Fondo general solo cuando existe .login-card */
body:has(.login-card) {
    min-height: 100vh !important;
    padding-top: 50px !important;

    background: #000000 !important;
    background-color: #000000 !important;
    background-image:
        radial-gradient(circle at top right,
            rgba(254, 204, 22, 0.18),
            transparent 38%) !important;
}

/* Tarjeta */
body:has(.login-card) .login-card {
    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid rgba(254, 204, 22, 0.45) !important;
    border-radius: 12px !important;

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32) !important;
}

/* Encabezado del logo */
body:has(.login-card) .login-card>.text-center:first-child {
    margin: 0 !important;
    padding: 32px 24px !important;

    background: #000000 !important;
    background-color: #000000 !important;

    border-bottom: 4px solid #fecc16 !important;
    border-radius: 0 !important;
}

/* Logo */
body:has(.login-card) .login-card>.text-center:first-child img {
    display: block !important;

    width: auto !important;
    max-width: 190px !important;
    max-height: 64px !important;

    margin: 0 auto !important;
}

/* Contenido */
body:has(.login-card) .login-card>div:last-child {
    padding: 30px !important;
}

/* Título */
body:has(.login-card) .login-card h3 {
    margin: 0 0 14px !important;

    color: #111111 !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center !important;
}

/* Texto introductorio */
body:has(.login-card) .login-card .text-muted {
    max-width: 300px !important;

    margin: 0 auto !important;

    color: #666666 !important;

    font-size: 14px !important;
    line-height: 1.45 !important;

    text-align: center !important;
}

/* Etiquetas */
body:has(.login-card) .login-card .form-group label {
    margin-bottom: 8px !important;

    color: #222222 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Grupo del campo */
body:has(.login-card) .login-card .input-group {
    width: 100% !important;
}

/* Ícono del correo */
body:has(.login-card) .login-card .input-group-addon {
    min-width: 46px !important;

    background: #000000 !important;
    border: 1px solid #000000 !important;

    color: #fecc16 !important;
}

body:has(.login-card) .login-card .input-group-addon .fa {
    color: #fecc16 !important;
}

/* Campo */
body:has(.login-card) .login-card .form-control {
    min-height: 44px !important;

    background: #ffffff !important;

    border: 1px solid #dddddd !important;
    border-left: 0 !important;
    border-radius: 0 7px 7px 0 !important;

    color: #222222 !important;

    font-size: 14px !important;

    box-shadow: none !important;
}

body:has(.login-card) .login-card .form-control:focus {
    border-color: #fecc16 !important;
    box-shadow: 0 0 0 2px rgba(254, 204, 22, 0.16) !important;
}

/* Botón */
body:has(.login-card) .login-card .btn.btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: 100% !important;
    min-height: 48px !important;

    margin: 14px 0 0 !important;
    padding: 11px 18px !important;

    background: #fecc16 !important;
    background-color: #fecc16 !important;
    background-image: none !important;

    border: 1px solid #fecc16 !important;
    border-radius: 8px !important;

    color: #000000 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}

body:has(.login-card) .login-card .btn.btn-primary .fa {
    color: #000000 !important;
}

body:has(.login-card) .login-card .btn.btn-primary:hover,
body:has(.login-card) .login-card .btn.btn-primary:focus,
body:has(.login-card) .login-card .btn.btn-primary:active {
    background: #e6b814 !important;
    border-color: #e6b814 !important;
    color: #000000 !important;
}

/* Separador */
body:has(.login-card) .login-card hr {
    margin: 22px 0 !important;
    border-top: 1px solid #eeeeee !important;
}

/* Volver al login */
body:has(.login-card) .login-card a[href="/Account/Login"] {
    color: #111111 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

body:has(.login-card) .login-card a[href="/Account/Login"]:hover {
    color: #c99f00 !important;
    text-decoration: underline !important;
}

/* MOBILE */
@media screen and (max-width: 767px) {

    body:has(.login-card) {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;

        min-height: 100vh !important;

        padding: 24px 12px !important;
    }

    body:has(.login-card)>.container {
        width: 100% !important;
        max-width: 430px !important;

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

    body:has(.login-card)>.container>.row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.login-card)>.container>.row>div[class*="col-"] {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.login-card) .login-card {
        width: 100% !important;
        margin: 0 !important;
    }

    body:has(.login-card) .login-card>.text-center:first-child {
        padding: 26px 20px !important;
    }

    body:has(.login-card) .login-card>.text-center:first-child img {
        max-width: 165px !important;
        max-height: 54px !important;
    }

    body:has(.login-card) .login-card>div:last-child {
        padding: 24px 20px !important;
    }

    body:has(.login-card) .login-card h3 {
        font-size: 22px !important;
    }

    body:has(.login-card) .login-card .text-muted {
        font-size: 13px !important;
    }

    body:has(.login-card) .login-card .btn.btn-primary {
        min-height: 46px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   POPUP PROMOCIONAL RESPONSIVE — CORREGIDO
   IMPORTANTE:
   - Solo afecta al popup que contiene .dont-show-container.
   - No fuerza display:flex en #contentModal.
   - No bloquea el login cuando el modal está oculto.
   ============================================================ */

/* El modal oculto debe permanecer realmente oculto */
#contentModal[style*="display: none"],
#contentModal[aria-hidden="true"]:not(.in) {
    pointer-events: none !important;
}

/* Restaurar comportamiento clickeable del modal cuando está abierto */
#contentModal.in,
#contentModal[aria-hidden="false"] {
    pointer-events: auto !important;
}

/* Estilos exclusivos del popup promocional */
#contentModal:has(.dont-show-container) .modal-content {
    overflow: hidden !important;
    border-radius: 10px !important;
}

#contentModal:has(.dont-show-container) .modal-body {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
    border: 0 !important;
    line-height: normal !important;
    pointer-events: auto !important;
}

/* Ocultar únicamente la imagen original del popup promocional */
#contentModal:has(.dont-show-container) .modal-body img {
    display: none !important;
}

#contentModal:has(.dont-show-container) .modal-body>p,
#contentModal:has(.dont-show-container) .modal-body>div {
    margin: 0 !important;
    padding: 0 !important;
}

#contentModal:has(.dont-show-container) .modal-body::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
}

#contentModal:has(.dont-show-container) .modal-header {
    margin: 0 !important;
    border-bottom: 0 !important;
}

#contentModal:has(.dont-show-container) .modal-footer {
    margin: 0 !important;
    border-top: 0 !important;
    pointer-events: auto !important;
}

#contentModal:has(.dont-show-container) .modal-footer button,
#contentModal:has(.dont-show-container) .modal-footer input,
#contentModal:has(.dont-show-container) .modal-footer label,
#contentModal:has(.dont-show-container) .modal-footer a {
    pointer-events: auto !important;
}

/* Mobile */
@media screen and (max-width: 767px) {

    #contentModal:has(.dont-show-container) {
        padding: 8px !important;
    }

    #contentModal:has(.dont-show-container) .modal-dialog {
        width: calc(100% - 16px) !important;
        max-width: 420px !important;
        margin: 8px auto !important;
        transform: none !important;
    }

    #contentModal:has(.dont-show-container) .modal-content {
        max-height: calc(100vh - 16px) !important;
    }

    #contentModal:has(.dont-show-container) .modal-body {
        max-height: calc(100vh - 150px) !important;
    }

    #contentModal:has(.dont-show-container) .modal-body::before {
        aspect-ratio: 9 / 16 !important;
        max-height: calc(100vh - 150px) !important;
        background-image:
            url("/dynamic/assets/d5f5b72114594931beadb867bf3aa981") !important;
        background-size: contain !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 12px 14px 14px !important;
        text-align: center !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer .dont-show-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer .dont-show-container input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer .dont-show-container label {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer .btn,
    #contentModal:has(.dont-show-container) .modal-footer .btn-primary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }
}

/* Desktop */
@media screen and (min-width: 768px) {

    #contentModal:has(.dont-show-container) .modal-dialog {
        width: 90% !important;
        max-width: 900px !important;
        margin: 30px auto !important;
    }

    #contentModal:has(.dont-show-container) .modal-body::before {
        aspect-ratio: 16 / 9 !important;
        background-image:
            url("/dynamic/assets/0712720707ec4a42b860001ed53d2445") !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 18px !important;
        min-height: 66px !important;
        padding: 12px 18px !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer .dont-show-container {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer .dont-show-container label {
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    #contentModal:has(.dont-show-container) .modal-footer .btn {
        flex: 0 0 auto !important;
        min-width: 130px !important;
        min-height: 42px !important;
        margin: 0 !important;
    }
}