/* /Components/Layout/Header.razor.rz.scp.css */
/* ========================================================
   HEADER.RAZOR.CSS - Figma Node 2936:32488
   ======================================================== */

/* ============================================
   CONTENEDOR PRINCIPAL
   ============================================ */
#cabecera[b-hdsrnzv9ri] {
    width: 100%;
    min-height: clamp(90px, 8vw, 153px);
    background-color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: 'Nunito Sans', sans-serif;
    padding: 0 !important;
    transition: min-height 0.4s ease, box-shadow 0.3s ease;
    overflow: visible;
}

/* Scrolled/compact state */
#cabecera.scrolled[b-hdsrnzv9ri] {
    height: auto;
    min-height: 0;
    box-shadow: inset 0 3px 6px -3px rgba(0, 0, 0, 0.12);
}

/* Desktop Container - Same padding as body (Home --padding-lateral) */
.header-desktop[b-hdsrnzv9ri] {
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0 clamp(16px, 6vw, 115px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


#cabecera.scrolled .header-desktop[b-hdsrnzv9ri] {
    height: auto;
    padding-top: clamp(18px, 1.075vw, 22px);
    box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.12);
}

/* ── ESTADO SCROLL ── */
/* En lugar de display: none, usamos opacity 0 y visibility hidden */
#cabecera.scrolled .header-row-top[b-hdsrnzv9ri] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

#cabecera.scrolled .header-promo-bar[b-hdsrnzv9ri] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    /* Fade-OUT al entrar en scrolled: desaparece rápido antes de que el header colapse */
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* Hide grey line in scrolled state (Este sí puede ser instantáneo si no lo animas) */
#cabecera.scrolled .header-row-main[b-hdsrnzv9ri]::after {
    display: none;
}

/* ── Logo crossfade ──────────────────────────────────────────
   En lugar de display:none/block (instantáneo), usamos opacity
   para poder animar la transición suavemente.
   .logo-sticky se posiciona absolute encima de .logo-full.
   ─────────────────────────────────────────────────────────── */
.header-logo .logo-full[b-hdsrnzv9ri] {
    opacity: 1;
    transition: opacity 0.35s ease;
}

.header-logo .logo-sticky[b-hdsrnzv9ri] {
    display: block;            /* siempre en el DOM — nunca display:none */
    position: absolute;
    top: 0;
    left: 0;
    width: 153px;
    height: 62px;
    object-fit: contain;
    object-position: left center;
    opacity: 0;                /* oculto via opacity, no via display */
    transition: opacity 0.35s ease;
}

#cabecera.scrolled .header-logo .logo-full[b-hdsrnzv9ri]  { opacity: 0; }
#cabecera.scrolled .header-logo .logo-sticky[b-hdsrnzv9ri] { opacity: 1; }

#cabecera.scrolled .header-row-main[b-hdsrnzv9ri] {
    height: auto;
    align-items: center;
    padding-bottom: clamp(18px, 1.075vw, 22px);
}

#cabecera.scrolled .header-logo[b-hdsrnzv9ri] {
    height: 62px;          /* anima desde 86px → 62px junto con el crossfade */
    margin-bottom: 0;
}

#cabecera.scrolled .header-login-btn[b-hdsrnzv9ri] {
    margin-bottom: 0;
}

#cabecera.scrolled .header-cart-icon[b-hdsrnzv9ri] {
    padding-top: 0;
}

#cabecera.scrolled .header-right-icons[b-hdsrnzv9ri] {
    align-self: center;
    align-items: center;
}

.header-row-top[b-hdsrnzv9ri] {
    display: none;
}

.header-divider[b-hdsrnzv9ri] {
    display: none;
}

/* ============================================
   FILA PRINCIPAL: Todo en una fila con el texto promo posicionado
   ============================================ */
.header-row-main[b-hdsrnzv9ri] {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding-bottom: clamp(10px, 2vw, 38px);
    position: relative;
    transition: padding-top 0.4s ease, padding-bottom 0.4s ease;
}

.header-promo-bar[b-hdsrnzv9ri] {
    position: absolute;
    top: clamp(6px, 1vw, 27px);
    right: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(10px, 0.85vw, 16px);
    color: #3A4F39;
    white-space: nowrap;
    z-index: 10;
    /* Fade-IN al salir del estado scrolled: espera 0.3s a que el header se expanda */
    transition: opacity 0.4s ease 0.5s, visibility 0s linear 0.5s;
}

.header-row-main[b-hdsrnzv9ri]::after {
    content: '';
    position: absolute;
    top: clamp(24px, 2.5vw, 55px);
    left: calc(138px + clamp(20px, 4vw, 67px));
    right: 0;
    height: 1px;
    background-color: #E0E0E0;
}

/* ============================================
   LOGO
   ============================================ */
.header-logo[b-hdsrnzv9ri] {
    display: block;
    flex-shrink: 0;
    width: 153px;
    height: 86px;              /* altura explícita → permite animar height en scrolled */
    margin-right: clamp(20px, 4vw, 67px);
    margin-bottom: 3px;
    position: relative;        /* contexto para logo-sticky absolute */
    overflow: hidden;          /* evita desbordamiento durante la transición */
    transition: height 0.4s ease, margin-bottom 0.4s ease;
}

.header-logo img[b-hdsrnzv9ri] {
    display: block;
    width: 100%;
    max-width: 153px;
    max-height: 86px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

/* ============================================
   NAVEGACIÓN
   ============================================ */
.header-nav[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-right: 50px;
    flex-shrink: 0;
    padding-bottom: 5px;
}

.header-nav-link[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.9vw, 16px);
    line-height: 22px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.header-nav-link:hover[b-hdsrnzv9ri],
.header-nav-link.active[b-hdsrnzv9ri] {
    color: #3CAA36;
}

/* ============================================
   BARRA DE BÚSQUEDA
   ============================================ */
.header-search-container[b-hdsrnzv9ri] {
    display: flex;
    align-items: flex-end;
    gap: clamp(6px, 0.7vw, 16px);
    flex: 1;
    position: relative;
    padding-bottom: 0;
}

.header-search-icon[b-hdsrnzv9ri] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-search-icon svg[b-hdsrnzv9ri] {
    width: 24px;
    height: 24px;
}

.header-search-input[b-hdsrnzv9ri] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.8vw, 14px);
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    padding: 8px 0 2px 0;
}

.header-search-input[b-hdsrnzv9ri]::placeholder {
    color: #9E9E9E;
}

.header-search-underline[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: calc(24px + clamp(6px, 0.7vw, 16px));
    right: 0;
    height: 1px;
    background-color: #9E9E9E;
}

/* ============================================
   ICONO CARRITO
   ============================================ */
.header-cart-icon[b-hdsrnzv9ri] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 20px;
    flex-shrink: 0;
    padding-bottom: 0;
    overflow: visible;
}

.header-cart-icon .icon-default[b-hdsrnzv9ri] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.header-cart-icon .icon-hover[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(16px, 1.3vw, 23.4px);
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.header-cart-icon:hover .icon-default[b-hdsrnzv9ri] {
    opacity: 0;
}

.header-cart-icon:hover .icon-hover[b-hdsrnzv9ri] {
    opacity: 1;
}

.header-cart-icon svg[b-hdsrnzv9ri] {
    width: 24px;
    height: 24px;
}

.header-cart-count[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #212121;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-indent: 0.5px;
    text-align: center;
    white-space: nowrap;
    border-radius: 12px;
    flex-shrink: 0;
    padding: 4px 8px;
    box-sizing: border-box;
}

/* ============================================
   ICONO FAVORITOS
   ============================================ */
.header-fav-icon[b-hdsrnzv9ri] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 20px;
    flex-shrink: 0;
    padding-bottom: 0;
    overflow: visible;
}

    .header-fav-icon .icon-default[b-hdsrnzv9ri] {
        width: 24px;
        height: 24px;
    }

.header-fav-icon .icon-hover[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(15.3px, 1.3vw, 24px);
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.header-fav-icon:hover .icon-default[b-hdsrnzv9ri] {
    opacity: 0;
}

.header-fav-icon:hover .icon-hover[b-hdsrnzv9ri] {
    opacity: 1;
}

/* ============================================
   BOTÓN LOGIN
   ============================================ */
.header-login-btn[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 165px;
    height: 46px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #3CAA36;
    border: 2px solid #3CAA36;
    border-radius: 8px;
    padding: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    margin-bottom: -10px;
    box-sizing: border-box;
}

    .header-login-btn:hover[b-hdsrnzv9ri] {
        background-color: #80C87C;
        color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* ============================================
   ICONO PERFIL (autenticado)
   ============================================ */
.header-profile-icon[b-hdsrnzv9ri] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding-bottom: 0;
    overflow: visible;
}

    .header-profile-icon .icon-default[b-hdsrnzv9ri] {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

.header-profile-icon .icon-hover[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(16px, 1.333vw, 24px);
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.header-profile-icon:hover .icon-default[b-hdsrnzv9ri] {
    opacity: 0;
}

.header-profile-icon:hover .icon-hover[b-hdsrnzv9ri] {
    opacity: 1;
}

.header-login-btn:hover[b-hdsrnzv9ri] {
    background-color: #3CAA36;
    color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #00000040;
}

/* ============================================
   USUARIO AUTENTICADO
   ============================================ */
.header-user-menu[b-hdsrnzv9ri] {
    flex-shrink: 0;
}

.header-user-btn.authenticated[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: clamp(36px, 3vw, 46px);
    padding: clamp(6px, 0.8vw, 10px) clamp(12px, 1.5vw, 24px);
    background-color: #FFFFFF;
    border: 1px solid #3CAA36;
    border-radius: 5px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 1.1vw, 16px);
    color: #3CAA36;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-user-btn.authenticated:hover[b-hdsrnzv9ri] {
    background-color: #3CAA36;
    color: #FFFFFF;
}

.header-user-btn.authenticated i[b-hdsrnzv9ri] {
    font-size: 12px;
}

/* ============================================
   MOBILE / TABLET HEADER (Figma node 1003-23719)
   Layout: 2 filas — fila 1 logo+acciones / fila 2 búsqueda
   ============================================ */
.header-tablet[b-hdsrnzv9ri] {
    display: flex;
    flex-direction: column;          /* 2 filas apiladas */
    gap: 20px;                       /* Figma gap-[20px] entre fila 1 y barra búsqueda */
    width: 100%;
    padding: 15px clamp(16px, 6vw, 115px) 17px;  /* Figma: pt-15 pb-17 px-30 */
    background: #FFFFFF;
    box-sizing: border-box;
}

/* ── Fila 1: contenedor flex horizontal ── */
.tablet-top-row[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* ── Izquierda: hamburger + logo ── */
.tablet-left[b-hdsrnzv9ri] {
    display: flex;
    align-items: flex-end;
    gap: 20px;                       /* Figma gap-[20px] entre hamburger y logo */
}

/* Hamburger Button */
.tablet-hamburger[b-hdsrnzv9ri] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
}

.tablet-hamburger svg[b-hdsrnzv9ri] {
    width: 21px;
    height: 21px;
}

/* Small PMC Logo */
.tablet-logo[b-hdsrnzv9ri] {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
}

.tablet-logo img[b-hdsrnzv9ri] {
    width: 62px;
    height: 25px;
    object-fit: contain;
}

/* Search Bar - fila 2, ancho completo */
.tablet-search-bar[b-hdsrnzv9ri] {
    width: 100%;                     /* ocupa toda la fila 2 */
    height: 37px;
    border: 1px solid #B1DDAF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 15px;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.tablet-search-bar:hover[b-hdsrnzv9ri] {
    border-color: #3CAA36;
}

.tablet-search-placeholder[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #9E9E9E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tablet-search-icon[b-hdsrnzv9ri] {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
}

/* Right Actions Group */
.tablet-actions[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* Phone Info */
.tablet-phone-info[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tablet-phone-icon[b-hdsrnzv9ri] {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

.tablet-phone-text[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.5px;
    color: #9E9E9E;
    white-space: nowrap;
}

/* Vertical Separator */
.tablet-separator[b-hdsrnzv9ri] {
    width: 1px;
    height: 7px;
    background-color: #9E9E9E;
    flex-shrink: 0;
}

/* Cart Icon */
.tablet-cart-icon[b-hdsrnzv9ri] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
}

.tablet-cart-icon .icon-default[b-hdsrnzv9ri] {
    width: 20px;
    height: auto;
    object-fit: contain;
}

.tablet-cart-icon .icon-hover[b-hdsrnzv9ri] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.tablet-cart-icon:hover .icon-default[b-hdsrnzv9ri] {
    opacity: 0;
}

.tablet-cart-icon:hover .icon-hover[b-hdsrnzv9ri] {
    opacity: 1;
}

/* Profile / Login Icon */
.tablet-profile-icon[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 22px;
    transition: transform 0.2s ease;
}

.tablet-profile-icon:hover[b-hdsrnzv9ri] {
    transform: scale(1.1);
}

.tablet-profile-icon svg[b-hdsrnzv9ri] {
    width: 16px;
    height: 21px;
}

/* Language Selector in tablet */
.tablet-lang-selector[b-hdsrnzv9ri] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ── Selector de idioma en el header (tablet ≥768px) ──
   Visible en tablet, oculto en móvil (donde va en el sidebar) */
.tablet-lang-header[b-hdsrnzv9ri] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.tablet-lang-sep[b-hdsrnzv9ri] {
    /* visible por defecto junto con el selector */
}

/* En móvil (≤768px): ocultar del header, se muestra en el sidebar */
@media (max-width: 768px) {
    .tablet-lang-header[b-hdsrnzv9ri],
    .tablet-lang-sep[b-hdsrnzv9ri] {
        display: none;
    }
}

/* ============================================
   MEGA-MENU PRODUCTOS (Figma Node 13-410)
   ============================================ */

/* --- CONTENEDOR PRINCIPAL --- */
.megamenu[b-hdsrnzv9ri] {
    position: fixed;
    top: var(--header-height, clamp(90px, 8vw, 153px));
    /* Left edge aligns with Productos text - set dynamically via JS */
    left: auto;
    right: clamp(16px, 6vw, 115px);
    background: #F5F5F5;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: none;
    /* Fixed height - same for all categories, scroll internally */
    height: 70vh;
    overflow: visible;
}

.megamenu.visible[b-hdsrnzv9ri] {
    display: flex;
}



/* --- SIDEBAR IZQUIERDO (224px) --- */
.megamenu-sidebar[b-hdsrnzv9ri] {
    width: 224px;
    flex-shrink: 0;
    background: white;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 0 15px;
    overflow: hidden;
}

.megamenu-promo-btn[b-hdsrnzv9ri] {
    height: 40px;
    background: #3CAA36;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 29px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.25px;
    cursor: pointer;
    transition: background 0.2s;
}

.megamenu-promo-btn:hover[b-hdsrnzv9ri] {
    background: #2d9030;
}

.megamenu-familias-title[b-hdsrnzv9ri] {
    height: 42px;
    background: white;
    display: flex;
    align-items: center;
    padding-left: 29px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
}

.megamenu-familias-list[b-hdsrnzv9ri] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.megamenu-familia-item[b-hdsrnzv9ri] {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 29px;
    background: white;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    text-decoration: none;
    position: relative;
    transition: all 0.15s;
}

.megamenu-familia-item:hover[b-hdsrnzv9ri],
.megamenu-familia-item.selected[b-hdsrnzv9ri] {
    background: #F5F5F5;
    font-weight: 700;
}

.megamenu-familia-item.selected[b-hdsrnzv9ri]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #3CAA36;
}

.megamenu-familia-icon-wrap[b-hdsrnzv9ri] {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.megamenu-familia-icon[b-hdsrnzv9ri] {
    display: block;        /* evita el flujo inline que los pondría lado a lado */
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.megamenu-familia-icon.icon-normal[b-hdsrnzv9ri] {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    opacity: 0;
}

.megamenu-familia-item:hover .icon-soft[b-hdsrnzv9ri],
.megamenu-familia-item.selected .icon-soft[b-hdsrnzv9ri] {
    opacity: 0;
}

.megamenu-familia-item:hover .icon-normal[b-hdsrnzv9ri],
.megamenu-familia-item.selected .icon-normal[b-hdsrnzv9ri] {
    opacity: 1;
}

/* --- ÁREA CENTRAL (Subcategorías) --- */
.megamenu-content[b-hdsrnzv9ri] {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.megamenu-category-panel[b-hdsrnzv9ri] {
    display: none;
    width: 100%;
    height: 100%;
}

.megamenu-category-panel.active[b-hdsrnzv9ri] {
    display: block;
}

.megamenu-subcats[b-hdsrnzv9ri] {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 30px 40px;
    align-items: flex-start;
    align-content: flex-start;
}

.megamenu-subcat-group[b-hdsrnzv9ri] {
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Banner HP dentro del panel "Tinta y tóner" (último hijo flex de .megamenu-subcats). */
.megamenu-banner[b-hdsrnzv9ri] {
    display: block;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: auto;
    max-width: 280px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s, transform 0.15s;
}

.megamenu-banner:hover[b-hdsrnzv9ri] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

.megamenu-banner img[b-hdsrnzv9ri] {
    display: block;
    width: 100%;
    height: auto;
}

.megamenu-subcat-header[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #2D2E2E;
    text-decoration: none;
    transition: color 0.15s;
}

.megamenu-subcat-header:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
}

.megamenu-subcat-items[b-hdsrnzv9ri] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.megamenu-subcat-item[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    text-decoration: none;
    transition: color 0.15s;
}

.megamenu-subcat-item:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
}

/* --- Level 4: Expandable subcategory items with chevron --- */
.megamenu-subcat-item-expandable[b-hdsrnzv9ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.megamenu-subcat-item-expandable .megamenu-subcat-item-text[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
    flex: 1;
}

.megamenu-subcat-item-expandable .megamenu-subcat-item-text:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
}

.megamenu-subcat-item-expandable .chevron[b-hdsrnzv9ri] {
    font-size: 14px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    color: #9E9E9E;
}

.megamenu-subcat-item-expandable .chevron:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
    background-color: rgba(60, 170, 54, 0.08);
}

.megamenu-subcat-item-expandable.expanded .chevron[b-hdsrnzv9ri] {
    transform: rotate(90deg);
}

/* Level 4 children - indented with dot prefix */
.megamenu-nivel4-items[b-hdsrnzv9ri] {
    display: none;
    flex-direction: column;
    gap: 3px;
    padding-left: 12px;
    margin-top: 3px;
}

.megamenu-nivel4-items.visible[b-hdsrnzv9ri] {
    display: flex;
}

.megamenu-nivel4-item[b-hdsrnzv9ri] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: #2D2E2E;
    text-decoration: none;
    transition: color 0.15s;
    /* Hanging indent: second line aligns with text, not the dot */
    padding-left: 10px;
    text-indent: -10px;
}

.megamenu-nivel4-item[b-hdsrnzv9ri]::before {
    content: '· ';
    color: #9E9E9E;
}

.megamenu-nivel4-item:hover[b-hdsrnzv9ri] {
    color: #3CAA36;
}

/* ============================================
   MENU SERVICIOS (Figma Node 84:550)
   Sidebar mirrors megamenu-sidebar styling
   ============================================ */
.servicios-menu-container[b-hdsrnzv9ri] {
    position: fixed;
    top: clamp(90px, 8vw, 153px);
    left: auto;
    right: clamp(16px, 6vw, 115px);
    background: white;
    border-radius: 0 0 15px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: none;
    overflow: hidden;
}

.servicios-menu-container.visible[b-hdsrnzv9ri] {
    display: flex;
}

/* --- SIDEBAR (224px, mirrors megamenu-sidebar) --- */
.servicios-sidebar[b-hdsrnzv9ri] {
    width: 224px;
    flex-shrink: 0;
    background: white;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 0 10px;
}

.servicios-title[b-hdsrnzv9ri] {
    height: 42px;
    background: white;
    display: flex;
    align-items: center;
    padding-left: 29px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    border-top: 2px solid #F5F5F5;
}

.servicios-list[b-hdsrnzv9ri] {
    display: flex;
    flex-direction: column;
}

.servicios-item[b-hdsrnzv9ri] {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 29px;
    background: white;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    text-decoration: none;
    position: relative;
    transition: all 0.15s;
}

.servicios-item:hover[b-hdsrnzv9ri],
.servicios-item.selected[b-hdsrnzv9ri] {
    background: #F5F5F5;
    font-weight: 700;
}

.servicios-item.selected[b-hdsrnzv9ri]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #3CAA36;
}

.servicios-item-icon-wrap[b-hdsrnzv9ri] {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.servicios-item-icon[b-hdsrnzv9ri] {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.servicios-item-icon.icon-black[b-hdsrnzv9ri] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.servicios-item:hover .icon-soft[b-hdsrnzv9ri],
.servicios-item.selected .icon-soft[b-hdsrnzv9ri] {
    opacity: 0;
}

.servicios-item:hover .icon-black[b-hdsrnzv9ri],
.servicios-item.selected .icon-black[b-hdsrnzv9ri] {
    opacity: 1;
}

/* Bottom spacer to complete rounded corner */
.servicios-bottom-spacer[b-hdsrnzv9ri] {
    height: 40px;
    background: white;
    border-radius: 0 0 0 10px;
}

/* --- IMAGE AREA (fills remaining space) --- */
.servicios-image-area[b-hdsrnzv9ri] {
    flex: 1;
    overflow: hidden;
    border-radius: 0 0 15px 0;
    min-height: 0;
}

.servicios-image[b-hdsrnzv9ri] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   OVERLAY
   ============================================ */
.header-nuevo-overlay[b-hdsrnzv9ri] {
    position: fixed;
    top: var(--header-height, 153px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    display: none;
}

.header-nuevo-overlay.active[b-hdsrnzv9ri] {
    display: block;
}

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

/* ---- Desktop intermedio (1200px) ---- */
@media (max-width: 1200px) {
    .header-nav[b-hdsrnzv9ri] {
        gap: clamp(20px, 2vw, 40px);
        margin-right: 30px;
    }

    .header-login-btn[b-hdsrnzv9ri] {
        width: 145px;
    }
}

/* ---- Desktop compacto (1080px) ---- */
@media (max-width: 1080px) {
    .header-nav[b-hdsrnzv9ri] {
        gap: 20px;
        margin-right: 20px;
    }

    .header-login-btn[b-hdsrnzv9ri] {
        width: 125px;
        font-size: 13px;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .header-right-icons[b-hdsrnzv9ri] {
        gap: 14px;
        margin-left: 16px;
    }
}

/* ---- Tablet (max 991.98px) ---- */
@media (max-width: 991.98px) {
    #cabecera[b-hdsrnzv9ri] {
        height: auto;
    }

    .header-desktop[b-hdsrnzv9ri] {
        display: none !important;
    }

    .header-tablet[b-hdsrnzv9ri] {
        padding-left: 30px;
        padding-right: 30px;
    }

    .megamenu[b-hdsrnzv9ri],
    .servicios-menu-container[b-hdsrnzv9ri] {
        top: 69px;
        max-height: calc(100vh - 69px);
    }

    .header-nuevo-overlay[b-hdsrnzv9ri] {
        top: 69px;
    }
}

/* ---- Tablet compacto (900px) ---- */
@media (max-width: 900px) {
    /* El teléfono se mantiene visible en móvil (diseño Figma 1003-23719) */
    /* .tablet-search-bar ya es width:100% — no hace falta flex:1 */
}

/* ---- Móvil (768px) ---- */
@media (max-width: 768px) {
    .header-tablet[b-hdsrnzv9ri] {
        padding-left: 16px;
        padding-right: 16px;
        gap: 14px;
    }

    .tablet-logo img[b-hdsrnzv9ri] {
        width: 50px;
        height: 20px;
    }

    /* Ocultar separadores en móvil excepto el único entre phone y cart */
    .tablet-separator[b-hdsrnzv9ri] {
        display: none;
    }

    .tablet-actions[b-hdsrnzv9ri] {
        gap: 12px;
    }
}

/* ---- Móvil pequeño (480px) ---- */
@media (max-width: 480px) {
    .header-tablet[b-hdsrnzv9ri] {
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .tablet-logo img[b-hdsrnzv9ri] {
        width: 44px;
        height: 18px;
    }

    .tablet-search-bar[b-hdsrnzv9ri] {
        padding: 6px 8px 6px 10px;
    }

    .tablet-search-placeholder[b-hdsrnzv9ri] {
        font-size: 12px;
    }

    .tablet-actions[b-hdsrnzv9ri] {
        gap: 9px;
    }
}

/* ============================================
   ACTION BADGES (Legacy support)
   ============================================ */
.action-badge[b-hdsrnzv9ri] {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #3CAA36;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-badge.cart[b-hdsrnzv9ri] {
    background-color: #3CAA36;
}

.action-badge.fav[b-hdsrnzv9ri] {
    background-color: #E53935;
}

/* /Components/Layout/LanguageSelector.razor.rz.scp.css */
.language-selector[b-c9i14g2vud] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    user-select: none;
}

.lang-option[b-c9i14g2vud] {
    color: #2D2E2E;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
}

.lang-option:hover[b-c9i14g2vud] {
    background-color: rgba(60, 170, 54, 0.1);
    color: #3CAA36;
}

.lang-option.active[b-c9i14g2vud] {
    font-weight: 700;
    color: #3CAA36;
}

.lang-separator[b-c9i14g2vud] {
    color: #999;
    font-weight: 300;
    pointer-events: none;
    user-select: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Reset box-sizing globally to prevent padding-induced overflow */
*[b-qprs79yowd],
*[b-qprs79yowd]::before,
*[b-qprs79yowd]::after {
    box-sizing: border-box;
}

/* Estructura principal de la página */
html[b-qprs79yowd],
body[b-qprs79yowd] {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
    overflow-x: clip;
}

.page[b-qprs79yowd] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
    max-width: 100vw;
}

main[b-qprs79yowd] {
    flex: 1 0 auto;
    width: 100%;
    margin-top: -1.1rem;
    overflow-x: clip;
}

.main[b-qprs79yowd] {
    width: 100%;
}

/* Footer Legacy (Check usage) */
.footer[b-qprs79yowd] {
    width: 100%;
    position: relative;
    flex-shrink: 0;
    padding-top: 20px;
}

/* Sidebar Legacy */
.sidebar[b-qprs79yowd] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-qprs79yowd] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-qprs79yowd]  a,
.top-row[b-qprs79yowd]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-qprs79yowd]  a:hover,
.top-row[b-qprs79yowd]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-qprs79yowd]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.boton-2[b-qprs79yowd] {
    display: inline-flex;
    height: 2.7rem;
    bottom: 0.2rem;
    margin-left: 24px;
    align-items: center;
    background-color: var(--blanco);
    border: 0.0625rem solid;
    border-color: var(--primario);
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden;
    text-decoration: none;
}

.state-layer[b-qprs79yowd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.5rem;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.label-text-3[b-qprs79yowd] {
    color: var(--primario);
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-small-font-style);
}

@media (max-width: 640.98px) {
    .top-row[b-qprs79yowd] {
        justify-content: space-between;
    }

    .top-row[b-qprs79yowd]  a,
    .top-row[b-qprs79yowd]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .sidebar[b-qprs79yowd] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-qprs79yowd] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-qprs79yowd]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-qprs79yowd],
    article[b-qprs79yowd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-qprs79yowd] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-qprs79yowd] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================================
   FOOTER – PIXEL-PERFECT FIGMA MATCH
   Desktop ≥835px  |  Tablet ≤834px  |  Mobile ≤480px
   Uses clamp() to scale proportionally without layout breakage
   ============================================================================ */

/* === SUB-FOOTER (BARRA GRIS CON VENTAJAS) === */
[b-qprs79yowd] .sub-footer {
    background-color: #757575;
    padding: clamp(20px, 2.6vw, 50px) clamp(20px, 6vw, 115px);
    width: 100%;
    max-width: 100%;
}

[b-qprs79yowd] .sub-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 2.6vw, 50px);
}

[b-qprs79yowd] .ventaja-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(15px, 2.6vw, 50px);
    flex: 1;
    min-width: 0;
}

[b-qprs79yowd] .ventaja-icon {
    width: clamp(36px, 3.5vw, 55px);
    height: clamp(36px, 3.5vw, 55px);
    flex-shrink: 0;
}

[b-qprs79yowd] .ventaja-item:first-child .ventaja-icon {
    width: clamp(45px, 4.5vw, 65px);
    height: clamp(45px, 4.5vw, 65px);
}

[b-qprs79yowd] .ventaja-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

[b-qprs79yowd] .ventaja-texto {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.3vw, 4px);
    flex: 1;
    min-width: 0;
    max-width: clamp(130px, 14vw, 220px);
}

[b-qprs79yowd] .ventaja-titulo {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 1.05vw, 20px);
    line-height: 1.3;
    color: #FFFFFF;
    margin: 0;
}

[b-qprs79yowd] .ventaja-descripcion {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(12px, 0.9vw, 16px);
    line-height: 1.4;
    letter-spacing: 0.25px;
    color: #FFFFFF;
    margin: 0;
}

/* === FOOTER PRINCIPAL === */
[b-qprs79yowd] .footer-nuevo {
    background-color: #FFFFFF;
    padding: clamp(30px, 4.7vw, 71px) clamp(20px, 6vw, 115px);
    width: 100%;
    max-width: 100%;
}

[b-qprs79yowd] .footer-nuevo-content {
    width: 100%;
}

/* === LAYOUT PRINCIPAL: 2 COLUMNAS === */
[b-qprs79yowd] .footer-main-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: clamp(30px, 5vw, 80px);
    max-width: 100%;
}

/* --- Columna Izquierda --- */
[b-qprs79yowd] .footer-col-left {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 40px);
    flex-shrink: 0;
    max-width: 484px;
}

/* Logo — constrained so SVG doesn't stretch */
[b-qprs79yowd] .footer-logo {
    display: block;
}

[b-qprs79yowd] .footer-logo img {
    height: clamp(36px, 3.5vw, 54px);
    width: auto;
    max-width: 165px;
}

/* Bloque logo+desc compacto */
[b-qprs79yowd] .footer-descripcion {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 0.95vw, 14px);
    line-height: 1.43;
    letter-spacing: 0.25px;
    color: #2D2E2E;
    margin: 0;
    max-width: 484px;
}

/* ===== Logos del pie, por SECCIONES (FooterSeccionLogos.razor) =====================
   Antes cada logo tenía su tamaño fijo en una clase propia y nada podía encogerse: con
   4,5 px de margen, bastó cambiar un sello por otro más ancho (HP Amplify, 25/09/2026) para
   que las huellas se salieran de la columna y taparan «Recibir novedades».

   Ahora manda la SECCIÓN. Cada logo trae --f (cuántas «alturas» de ancho pide, según la
   proporción real de su imagen) y la sección:
     - con sitio, pone cada logo a su tamaño (el de siempre);
     - sin sitio, los encoge TODOS A LA VEZ, en proporción;
     - si tuvieran que bajar del 60 %, el que no cabe pasa a otra fila.
   Da igual cuántos logos haya o qué imagen se suba: no se salen.

   Las alturas son las de antes (certificados = 2 filas de huella + su hueco).       */
[b-qprs79yowd] .footer-col-left {
    --logo-h-cert: clamp(80px, 9.2vw, 132px);
    --logo-gap-cert: clamp(12px, 2vw, 31px);
    --logo-h-huella: clamp(34px, 3.8vw, 60px);
    --logo-gap-huella: clamp(6px, 0.8vw, 12px);
    --logo-h-marca: clamp(30px, 3.2vw, 50px);   /* lado de un logo cuadrado (HP) */
    --logo-gap-marca: clamp(16px, 2vw, 31px);
    --logo-gap-fila: clamp(12px, 1.5vw, 24px);
    /* Alto de certificado / alto de huella: para que certificados y huella crezcan en la
       fila al mismo ritmo (flex-grow solo admite números, no longitudes). */
    --logo-relacion: 2.2;
}

/* Certificados y huella comparten fila, con la MISMA regla que los logos de dentro: las
   dos secciones parten de su 60 % y crecen a la vez (en proporción a lo que piden) hasta su
   tamaño. Si ni al 60 % caben juntas, la huella baja entera debajo de los certificados y
   cada una tiene todo el ancho. (Repartir por el tamaño natural dejaba a los certificados
   un hueco que no usaban y la huella apretada en muchas filas.) */
[b-qprs79yowd] .footer-logos-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--logo-gap-fila);
    min-width: 0;
}

[b-qprs79yowd] .footer-logos {
    min-width: 0;
}

[b-qprs79yowd] .footer-logo-item {
    display: block;
    min-width: 0;
}

[b-qprs79yowd] .footer-logo-img {
    display: block;
    width: 100%;
    height: auto;
}

[b-qprs79yowd] .footer-logo-enlace {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

[b-qprs79yowd] .footer-logo-enlace:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

/* Certificados y marcas. Cada logo mide su parte del ancho REAL de la sección (container
   query), en proporción a lo que pide:
       ancho = f / Σf · (sitio − huecos),  entre el 60 % (f·H·0,6) y su tamaño (f·H).
   Así todos van a la misma escala. Si ni al 60 % caben, se quedan en el 60 % y la línea se
   parte: la segunda fila sale al MISMO tamaño que la primera (con un reparto «flex» la
   última fila, con menos logos, crecía y salía más grande). El −1px es para que el
   redondeo no mande el último logo a otra línea cuando caben justos. */
[b-qprs79yowd] .footer-logos-certificados,
[b-qprs79yowd] .footer-logos-marcas {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    min-width: calc(var(--fmax) * var(--h) * 0.6);
}

[b-qprs79yowd] .footer-logos-certificados {
    --h: var(--logo-h-cert);
    --gap: var(--logo-gap-cert);
    align-items: flex-end;
    /* En la fila con la huella: parte del ancho de sus logos al 60 % (los huecos no
       encogen; +1px por el redondeo de abajo) y crece hasta su tamaño natural. */
    --natural: calc(var(--sumf) * var(--h) + (var(--n) - 1) * var(--gap) + 1px);
    flex: calc(var(--sumf) * var(--logo-relacion)) 1 calc(var(--sumf) * var(--h) * 0.6 + (var(--n) - 1) * var(--gap) + 1px);
    max-width: var(--natural);
}

[b-qprs79yowd] .footer-logos-marcas {
    --h: var(--logo-h-marca);
    --gap: var(--logo-gap-marca);
    align-items: center;
}

[b-qprs79yowd] .footer-logos-certificados .footer-logo-item,
[b-qprs79yowd] .footer-logos-marcas .footer-logo-item {
    flex: none;
    width: clamp(calc(var(--f) * var(--h) * 0.6),
                 calc(var(--f) * (100cqi - (var(--n) - 1) * var(--gap) - 1px) / var(--sumf)),
                 calc(var(--f) * var(--h)));
}

/* Huella: rejilla de DOS filas (3 + 2 con los cinco sellos de hoy). Las columnas son la
   mitad de los sellos (--cols, del servidor) y la celda se encoge con el sitio que haya
   (container query); al llegar al 60 %, auto-fill abre otra fila, con el mismo tamaño. */
[b-qprs79yowd] .footer-logos-huella {
    --h: var(--logo-h-huella);
    container-type: inline-size;
    /* Igual que los certificados: parte de su 60 % y crece en proporción a lo que pide. */
    flex: calc(var(--cols) * var(--fmax)) 1 calc(var(--cols) * var(--fmax) * var(--h) * 0.6 + (var(--cols) - 1) * var(--logo-gap-huella));
    min-width: calc(2 * var(--fmax) * var(--h) * 0.6 + var(--logo-gap-huella));
}

[b-qprs79yowd] .footer-logos-rejilla {
    --celda-max: calc(var(--fmax) * var(--h));
    --celda-min: calc(var(--fmax) * var(--h) * 0.6);
    --celda: clamp(var(--celda-min), (100cqi - (var(--cols) - 1) * var(--logo-gap-huella) - 1px) / var(--cols), var(--celda-max));
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--celda));
    gap: var(--logo-gap-huella);
    justify-content: start;
    max-width: calc(var(--cols) * var(--celda-max) + (var(--cols) - 1) * var(--logo-gap-huella));
}

[b-qprs79yowd] .footer-logos-rejilla .footer-logo-item {
    justify-self: center;
}

/* Todos los sellos a la MISMA altura, aunque alguno sea algo más estrecho. */
[b-qprs79yowd] .footer-logos-rejilla .footer-logo-img {
    width: auto;
    max-width: 100%;
    height: calc(var(--celda) / var(--fmax));
    object-fit: contain;
}

/* --- Columna Derecha --- */
[b-qprs79yowd] .footer-col-right {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 3.2vw, 50px);
    min-width: 0;
    flex: 1;
}

/* ===== DESKTOP: Links expandidos en 4 columnas ===== */
[b-qprs79yowd] .footer-links-desktop {
    display: flex;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 50px);
}

[b-qprs79yowd] .footer-links-column {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 16px);
}

/* Títulos de sección — font-weight NORMAL (400), color gris */
[b-qprs79yowd] .footer-links-titulo {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
}

[b-qprs79yowd] .footer-link {
    font-family: 'Inter', 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.375;
    color: #212121;
    text-decoration: none;
    transition: color 0.2s ease;
}

[b-qprs79yowd] .footer-link:hover {
    color: #3CAA36;
}

/* Social icons — 4 iconos incluido Blog */
[b-qprs79yowd] .footer-social {
    display: flex;
    align-items: center;
    gap: 5px;
}

[b-qprs79yowd] .footer-social-icon {
    width: clamp(18px, 1.5vw, 24px);
    height: clamp(18px, 1.5vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    position: relative;
}

[b-qprs79yowd] .footer-social-icon:hover {
    transform: scale(1.15);
}

[b-qprs79yowd] .footer-social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Blog icon con B verde */
[b-qprs79yowd] .footer-social-blog {
    overflow: hidden;
}

[b-qprs79yowd] .footer-blog-letter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #3CAA36;
}

/* Contacto */
[b-qprs79yowd] .footer-contacto-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    color: #757575;
    margin: 0;
}

[b-qprs79yowd] .footer-contacto-dato {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    color: #2D2E2E;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease;
}

[b-qprs79yowd] .footer-contacto-dato:hover {
    color: #3CAA36;
}

/* ===== TABLET: Oculto en desktop ===== */
[b-qprs79yowd] .footer-tablet-header {
    display: none;
}

/* Contacto info (tablet) */
[b-qprs79yowd] .footer-contacto-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[b-qprs79yowd] .footer-contacto-info span {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(9px, 1vw, 14px);
    line-height: 1.4;
    color: #2D2E2E;
}

/* Acordeones */
[b-qprs79yowd] .footer-accordion-item {
    border-bottom: none;
}

[b-qprs79yowd] .footer-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(8px, 1vw, 12px) 0;
    cursor: pointer;
    user-select: none;
}

[b-qprs79yowd] .footer-accordion-titulo {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.3vw, 14px);
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

[b-qprs79yowd] .footer-accordion-arrow {
    font-size: 18px;
    color: #757575;
    transition: transform 0.3s ease;
    padding-left: 20px;
}

[b-qprs79yowd] .footer-accordion-item.expanded .footer-accordion-arrow {
    transform: rotate(90deg);
}

[b-qprs79yowd] .footer-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0;
}

[b-qprs79yowd] .footer-accordion-item.expanded .footer-accordion-content {
    max-height: 200px;
    padding-bottom: 12px;
    transition: max-height 0.3s ease-in, padding 0.3s ease-in;
}

[b-qprs79yowd] .footer-links-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-qprs79yowd] .footer-links-lista li {
    margin: 0;
}

[b-qprs79yowd] .footer-links-lista a {
    font-family: 'Inter', 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.4;
    color: #212121;
    text-decoration: none;
    transition: color 0.2s ease;
}

[b-qprs79yowd] .footer-links-lista a:hover {
    color: #3CAA36;
}

/* === NEWSLETTER === */
[b-qprs79yowd] .footer-newsletter-section {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 16px);
    margin-top: auto;
}

[b-qprs79yowd] .footer-newsletter-titulo {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 1vw, 16px);
    line-height: 1;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
}

[b-qprs79yowd] .footer-newsletter-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(10px, 1.5vw, 20px);
    flex-wrap: wrap;
}

[b-qprs79yowd] .footer-newsletter-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

[b-qprs79yowd] .footer-newsletter-input {
    width: clamp(200px, 26vw, 410px);
    max-width: 100%;
    background: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: clamp(10px, 0.9vw, 14px) 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(12px, 1.15vw, 18px);
    color: #2D2E2E;
    outline: none;
    transition: box-shadow 0.2s ease;
}

[b-qprs79yowd] .footer-newsletter-input::placeholder {
    color: #9E9E9E;
}

[b-qprs79yowd] .footer-newsletter-input:focus {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

/* Botón compacto: 53px Figma height, padding fino */
[b-qprs79yowd] .footer-newsletter-btn {
    background: #FFFFFF;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    padding: 0 clamp(16px, 1.5vw, 24px);
    height: clamp(38px, 3.4vw, 53px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #3CAA36;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    [b-qprs79yowd] .footer-newsletter-btn:hover {
        background: #3CAA36;
        color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px #00000040;
    }

[b-qprs79yowd] .footer-newsletter-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-qprs79yowd] .footer-newsletter-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-qprs79yowd] .footer-newsletter-message {
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(11px, 0.9vw, 14px);
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 4px;
    animation: fadeIn-b-qprs79yowd 0.3s ease;
}

[b-qprs79yowd] .footer-newsletter-message.success {
    color: #2e7d32;
    background: rgba(60, 170, 54, 0.1);
    border: 1px solid rgba(60, 170, 54, 0.3);
}

[b-qprs79yowd] .footer-newsletter-message.error {
    color: #c62828;
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.2);
}

@keyframes fadeIn-b-qprs79yowd {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === LEGAL BAR — todo en una sola línea === */
[b-qprs79yowd] .footer-legal-bar {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.7vw, 10px);
    white-space: nowrap;
    flex-shrink: 0;
}

[b-qprs79yowd] .footer-legal-links {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.7vw, 10px);
    white-space: nowrap;
}

[b-qprs79yowd] .footer-legal-links span,
[b-qprs79yowd] .footer-legal-links a {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(8px, 0.77vw, 12px);
    line-height: 1;
    color: #BDBDBD;
    text-decoration: none;
    white-space: nowrap;
}

[b-qprs79yowd] .footer-legal-links a:hover {
    color: #757575;
}

[b-qprs79yowd] .footer-legal-separator {
    width: 1px;
    height: clamp(10px, 0.9vw, 14px);
    background: #BDBDBD;
    flex-shrink: 0;
}

[b-qprs79yowd] .footer-idioma-selector {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(8px, 0.77vw, 12px);
    line-height: 1;
    color: #BDBDBD;
    cursor: pointer;
    white-space: nowrap;
}

[b-qprs79yowd] .footer-legal-accent-separator {
    width: 1px;
    height: clamp(10px, 0.9vw, 14px);
    background: #BDBDBD;
    flex-shrink: 0;
}

[b-qprs79yowd] .footer-idioma-selector span {
    cursor: pointer;
    transition: color 0.2s ease;
}

[b-qprs79yowd] .footer-idioma-selector span:hover {
    color: #757575;
}

[b-qprs79yowd] .footer-idioma-selector .active {
    font-weight: 700;
    color: #3CAA36;
}

/* === VISIBILITY TOGGLES === */
[b-qprs79yowd] .footer-desktop-only {
    display: block;
}

/* Legal bar needs flex even with footer-desktop-only */
[b-qprs79yowd] .footer-legal-bar.footer-desktop-only {
    display: flex;
}

[b-qprs79yowd] .footer-tablet-only {
    display: none;
}

/* ============================================================================
   RESPONSIVE: TABLET (≤834px)
   ============================================================================ */

@media (max-width: 834px) {

    /* Sub-footer: 2x2 wrap on tablet */
    [b-qprs79yowd] .sub-footer-content {
        flex-wrap: wrap;
        gap: 24px;
    }

    [b-qprs79yowd] .ventaja-item {
        width: calc(50% - 12px);
    }

    /* Visibility toggles */
    [b-qprs79yowd] .footer-desktop-only {
        display: none !important;
    }

    [b-qprs79yowd] .footer-tablet-only {
        display: block !important;
    }

    /* Footer */
    [b-qprs79yowd] .footer-nuevo {
        padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 40px);
    }

    /* Footer: single column on tablet */
    [b-qprs79yowd] .footer-main-row {
        flex-direction: column;
        gap: clamp(16px, 3vw, 30px);
    }

    /* Columna izquierda: desc + certs + marcas + legal */
    [b-qprs79yowd] .footer-col-left {
        gap: clamp(10px, 2vw, 18px);
        justify-content: space-between;
    }

    [b-qprs79yowd] .footer-descripcion {
        font-size: clamp(8px, 1.1vw, 11px);
        line-height: 1.5;
    }

    /* Logos tablet: mismas secciones, otras alturas (las de antes). */
    [b-qprs79yowd] .footer-col-left {
        --logo-h-cert: clamp(60px, 9.6vw, 80px);
        --logo-gap-cert: clamp(6px, 1vw, 16px);
        --logo-h-huella: clamp(24px, 3.5vw, 36px);
        --logo-gap-huella: clamp(4px, 0.6vw, 8px);
        --logo-h-marca: clamp(24px, 4vw, 38px);
        --logo-gap-marca: clamp(8px, 1.5vw, 20px);
        --logo-gap-fila: clamp(8px, 1vw, 16px);
        --logo-relacion: 2.22;
    }

    /* Legal bar tablet: in left column, bottom */
    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only {
        margin-top: auto;
        justify-content: flex-start;
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-links {
        gap: clamp(4px, 0.8vw, 8px);
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-links span,
    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-links a {
        font-size: clamp(7px, 1vw, 10px);
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-separator {
        height: clamp(8px, 1vw, 12px);
    }

    /* Ocultar links desktop */
    [b-qprs79yowd] .footer-links-desktop {
        display: none !important;
    }

    /* Mostrar tablet header */
    [b-qprs79yowd] .footer-tablet-header {
        display: block !important;
    }

    /* Columna derecha tablet */
    [b-qprs79yowd] .footer-col-right {
        gap: clamp(12px, 2vw, 20px);
    }

    /* Tablet top: logo+contact in narrow column, accordions take remaining */
    [b-qprs79yowd] .footer-tablet-top {
        display: grid;
        grid-template-columns: clamp(90px, 14vw, 130px) 1fr;
        gap: clamp(12px, 2.5vw, 30px);
        align-items: start;
    }

    /* Logo + contact + social */
    [b-qprs79yowd] .footer-tablet-logo-contact {
        display: flex;
        flex-direction: column;
        gap: clamp(4px, 0.8vw, 8px);
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-logo {
        max-width: clamp(80px, 13vw, 120px);
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-logo img {
        height: auto;
        width: 100%;
        max-width: 120px;
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-contacto-info span {
        font-size: clamp(8px, 1.2vw, 11px);
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-social {
        gap: clamp(3px, 0.5vw, 5px);
    }

    [b-qprs79yowd] .footer-tablet-logo-contact .footer-social-icon {
        width: clamp(14px, 2.2vw, 20px);
        height: clamp(14px, 2.2vw, 20px);
    }

    /* Accordions tablet */
    [b-qprs79yowd] .footer-tablet-accordions {
        display: flex;
        flex-direction: column;
    }

    [b-qprs79yowd] .footer-tablet-accordions .footer-accordion-header {
        padding: clamp(8px, 1.5vw, 14px) 0;
    }

    [b-qprs79yowd] .footer-tablet-accordions .footer-accordion-titulo {
        font-size: clamp(11px, 1.6vw, 14px);
        line-height: 20px;
        letter-spacing: 0.25px;
        color: #757575;
        white-space: nowrap;
    }

    [b-qprs79yowd] .footer-tablet-accordions .footer-accordion-arrow {
        font-size: clamp(14px, 2.2vw, 20px);
    }

    [b-qprs79yowd] .footer-tablet-accordions .footer-links-lista a {
        font-size: clamp(11px, 1.6vw, 14px);
    }


    /* Newsletter tablet */
    [b-qprs79yowd] .footer-newsletter-titulo {
        font-size: clamp(8px, 1.2vw, 12px);
    }

    [b-qprs79yowd] .footer-newsletter-row {
        flex-direction: column;
        align-items: stretch;
    }

    [b-qprs79yowd] .footer-newsletter-form {
        width: 100%;
    }

    [b-qprs79yowd] .footer-newsletter-input {
        flex: 1;
        width: auto;
        font-size: clamp(10px, 1.5vw, 14px);
        padding: clamp(8px, 1.2vw, 14px) 12px;
    }

    [b-qprs79yowd] .footer-newsletter-btn {
        font-size: clamp(11px, 1.6vw, 14px);
        padding: 0 clamp(12px, 1.8vw, 20px);
        height: clamp(34px, 5vw, 44px);
    }
}

/* ============================================================================
   RESPONSIVE: MÓVIL (≤480px)
   ============================================================================ */

@media (max-width: 480px) {
    [b-qprs79yowd] .sub-footer {
        padding: 20px 16px;
    }

    [b-qprs79yowd] .sub-footer-content {
        flex-direction: column;
        gap: 18px;
    }

    [b-qprs79yowd] .ventaja-item {
        width: 100%;
    }

    [b-qprs79yowd] .footer-nuevo {
        padding: 24px 16px;
    }

    [b-qprs79yowd] .footer-main-row {
        flex-direction: column;
        gap: 20px;
    }

    /* Tablet top: single column on mobile */
    [b-qprs79yowd] .footer-tablet-top {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    [b-qprs79yowd] .footer-col-left {
        --logo-gap-fila: 8px;
        --logo-gap-cert: 8px;
        --logo-gap-huella: 6px;
        --logo-gap-marca: 12px;
    }

    [b-qprs79yowd] .footer-newsletter-form {
        flex-direction: column;
    }

    [b-qprs79yowd] .footer-newsletter-btn {
        width: 100%;
        height: 40px;
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only {
        justify-content: center;
    }

    [b-qprs79yowd] .footer-legal-bar.footer-tablet-only .footer-legal-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-bg1nnwwy4o] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-bg1nnwwy4o] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-bg1nnwwy4o] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-bg1nnwwy4o] {
    font-size: 1.1rem;
}

.bi[b-bg1nnwwy4o] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-bg1nnwwy4o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-bg1nnwwy4o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-bg1nnwwy4o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-bg1nnwwy4o] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-bg1nnwwy4o] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-bg1nnwwy4o] {
        padding-bottom: 1rem;
    }

    .nav-item[b-bg1nnwwy4o]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-bg1nnwwy4o]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-bg1nnwwy4o]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-bg1nnwwy4o] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-bg1nnwwy4o] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-bg1nnwwy4o] {
        display: none;
    }

    .nav-scrollable[b-bg1nnwwy4o] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
/* Overlay de fondo */
.mobile-drawer-overlay[b-dnn05z4xll] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-drawer-overlay.active[b-dnn05z4xll] {
    opacity: 1;
    visibility: visible;
}

/* Contenedor principal del drawer */
.mobile-drawer[b-dnn05z4xll] {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: #FFFFFF;
    z-index: 2001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-drawer.active[b-dnn05z4xll] {
    transform: translateX(0);
}

/* Cabecera del drawer: language selector (izq) + botón cerrar (der) */
.mobile-drawer-header[b-dnn05z4xll] {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

/* Wrapper del language selector en el drawer.
   En tablet (≥768px) se muestra en el header — se oculta aquí.
   En móvil (<768px) el header lo esconde y se muestra en el sidebar. */
.mobile-drawer-lang[b-dnn05z4xll] {
    display: none;          /* oculto por defecto (tablet: está en el header) */
    align-items: center;
}

@media (max-width: 768px) {
    .mobile-drawer-lang[b-dnn05z4xll] {
        display: flex;      /* visible en móvil */
    }
}

.mobile-drawer-close[b-dnn05z4xll] {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #333;
    padding: 0;
    cursor: pointer;
}

/* Vistas del drawer */
.mobile-drawer-view[b-dnn05z4xll] {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    background: #FFFFFF;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Slide animation */
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.mobile-drawer-view.active[b-dnn05z4xll] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* Botones principales (Productos/Servicios) */
.mobile-drawer-main-buttons[b-dnn05z4xll] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-drawer-main-btn[b-dnn05z4xll] {
    width: 100%;
    padding: 16px;
    background: #F5F5F5;
    border: none;
    border-radius: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2D2E2E;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-drawer-main-btn:hover[b-dnn05z4xll] {
    background: #E0E0E0;
}

/* Breadcrumb nav */
.mobile-drawer-breadcrumb[b-dnn05z4xll] {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
    gap: 12px;
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
}

.mobile-drawer-back[b-dnn05z4xll] {
    background: none;
    border: none;
    font-size: 20px;
    color: #3CAA36;
    cursor: pointer;
    padding: 0;
}

/* Promo header */
.mobile-drawer-promo[b-dnn05z4xll] {
    background: #3CAA36;
    color: white;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-drawer-section-header[b-dnn05z4xll] {
    padding: 16px 20px;
    font-weight: 700;
    font-size: 16px;
    color: #2D2E2E;
    background: #FFFFFF;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

/* Contenido scrolleable */
.mobile-drawer-content[b-dnn05z4xll] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

/* Items de lista */
.mobile-category-item[b-dnn05z4xll],
.mobile-subcategory-item[b-dnn05z4xll],
.mobile-product-item[b-dnn05z4xll],
.mobile-service-item[b-dnn05z4xll] {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f5f5f5;
    min-height: 50px;
}

.mobile-category-icon[b-dnn05z4xll],
.mobile-service-icon[b-dnn05z4xll] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-category-icon img[b-dnn05z4xll],
.mobile-service-icon img[b-dnn05z4xll] {
    max-width: 100%;
    max-height: 100%;
}

.mobile-category-text[b-dnn05z4xll],
.mobile-subcategory-text[b-dnn05z4xll],
.mobile-product-text[b-dnn05z4xll],
.mobile-service-text[b-dnn05z4xll] {
    flex: 1;
    font-size: 14px;
    color: #333;
    font-family: 'Nunito Sans', sans-serif;
    cursor: pointer;
}

.mobile-category-arrow[b-dnn05z4xll],
.mobile-subcategory-arrow[b-dnn05z4xll] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    border-left: 1px solid #f0f0f0;
    margin-left: 8px;
}

/* Enlace servicio */
.mobile-service-item[b-dnn05z4xll] {
    text-decoration: none;
    color: inherit;
}
/* /Components/Pages/ArticuloDetalle.razor.rz.scp.css */
/* =========================================================
   ARTICULO DETALLE — Figma Pixel-Perfect + Responsive
   Design ref: Figma node 263-6871 (Producto)
   Fluid scaling via clamp() across breakpoints.
   ========================================================= */

/* -------- Design Tokens (scoped to page) -------- */
.articulo-detalle-page[b-mkz7nc7p1i] {
    /* Colors (from Figma variables) */
    --ad-negro: #212121;
    --ad-blanco: #FFFFFF;
    --ad-primario: #3CAA36;
    --ad-primario-dark: #2D8A2B;
    --ad-primario-10: #EBF6EB;
    --ad-gris-10: #F5F5F5;
    --ad-gris-20: #EEEEEE;
    --ad-gris-30: #E0E0E0;
    --ad-gris-40: #BDBDBD;
    --ad-gris-50: #9E9E9E;
    --ad-gris-60: #757575;
    --ad-oferta-50: #FF5449;
    --ad-oferta-60: #DE3730;
    --ad-black-900: #121212;
    --ad-neutral-07: #141718;
    --ad-alternativo: #FDD623;
    --ad-alternativo-oscuro: #ECC61B;

    /* Fluid horizontal paddings (mirrors Figma 1920 → mobile) */
    --ad-pad-x: clamp(16px, 6vw, 115px);

    /* Font */
    --ad-font: "Nunito Sans", Helvetica, Arial, sans-serif;

    /* Max content width */
    --ad-max-w: 1690px;

    width: 100%;
    margin: 0 auto;
    /* Márgenes laterales estándar del sitio (igual que el resto de secciones,
       p.ej. Artículos Relacionados): sin esto la primera sección queda
       borde a borde en anchos < max-width */
    padding-left: var(--ad-pad-x);
    padding-right: var(--ad-pad-x);
    font-family: var(--ad-font);
    color: var(--ad-negro);
    box-sizing: border-box;
}

.articulo-detalle-page *[b-mkz7nc7p1i],
.articulo-detalle-page *[b-mkz7nc7p1i]::before,
.articulo-detalle-page *[b-mkz7nc7p1i]::after {
    box-sizing: border-box;
}

/* =========================================================
   MAIN ROW: galería | divisor | info | rail specs
   Figma "Producto nova" (Frame 1000002299): ≈550 : 705 : 320 @1920
   ========================================================= */
.articulo-detalle-row[b-mkz7nc7p1i] {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) 1px minmax(0, 1fr) minmax(0, 0.46fr);
    gap: clamp(16px, 2.5vw, 44px);
    max-width: var(--ad-max-w);
    margin: 0 auto;
    position: relative;
}

.articulo-detalle-row[b-mkz7nc7p1i]::before {
    grid-column: 2;
    align-self: stretch;
    background-color: var(--ad-gris-30);
    width: 1px;
}

.articulo-detalle-col-left[b-mkz7nc7p1i] {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.articulo-detalle-col-right[b-mkz7nc7p1i] {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 20px);
    min-width: 0;
    padding-left: 0;
    width: 100%;
    /* Ocupar toda la altura del row para poder pinnear el bottom-group abajo */
    height: 100%;
}

/* Bottom group: se pega al fondo de la columna derecha
   → queda siempre alineado con las thumbnails de la columna izquierda */
.product-bottom-group[b-mkz7nc7p1i] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-bottom: 6px;
}

/* =========================================================
   RAIL DERECHO — Especificaciones / Documentación / Añadir
   ========================================================= */
.articulo-detalle-col-specs[b-mkz7nc7p1i] {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Zona scrolleable del rail: en desktop nunca estira la fila,
   si hay muchas especificaciones aparece scroll interno */
.rail-scroll[b-mkz7nc7p1i] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 28px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ad-gris-40) transparent;
    padding-right: 4px;
    margin-bottom: clamp(12px, 1.2vw, 18px);
}

.rail-scroll[b-mkz7nc7p1i]::-webkit-scrollbar {
    width: 4px;
}

.rail-scroll[b-mkz7nc7p1i]::-webkit-scrollbar-thumb {
    background: var(--ad-gris-40);
    border-radius: 2px;
}

.rail-section[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-shrink: 0;
}

/* Documentación fija: fuera del scroll, siempre visible sobre AÑADIR */
.rail-section--docs[b-mkz7nc7p1i] {
    margin-bottom: clamp(16px, 1.5vw, 24px);
}

/* Cabecera de sección del rail — botón acordeón */
.rail-title[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ad-negro);
    cursor: pointer;
    text-align: left;
    font-family: var(--ad-font);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ad-negro);
    margin: 0;
    padding: 0 0 clamp(8px, 1vw, 12px);
}

/* Documentación cerrada: línea gris (al desplegarla vuelve al negro por defecto) */
.rail-section--docs:not(.rail-section--open) .rail-title[b-mkz7nc7p1i] {
    border-bottom-color: var(--ad-gris-30);
}

.rail-title-chevron[b-mkz7nc7p1i] {
    font-size: 13px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.rail-section--open .rail-title-chevron[b-mkz7nc7p1i] {
    transform: rotate(180deg);
}

/* Contenido plegable de specs/documentacion: siempre en el DOM, la apertura
   se anima con grid-template-rows 0fr->1fr (no requiere conocer la altura) */
.rail-collapse[b-mkz7nc7p1i] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows 0.3s ease, opacity 0.2s ease;
}

.rail-section--open .rail-collapse[b-mkz7nc7p1i] {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease 0.05s;
}

.rail-collapse-inner[b-mkz7nc7p1i] {
    min-height: 0;
}

/* Filas compactas (Figma: nombre+valor pegados, ~52px por fila) */
.rail-spec-row[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: clamp(8px, 0.9vw, 12px) 0;
    border-bottom: 1px solid var(--ad-gris-30);
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    line-height: 20px;
}

.rail-spec-row:last-child[b-mkz7nc7p1i] {
    border-bottom: none;
}

.rail-spec-name[b-mkz7nc7p1i] {
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--ad-negro);
}

.rail-spec-value[b-mkz7nc7p1i] {
    font-weight: 400;
    letter-spacing: 0.25px;
    color: var(--ad-negro);
    overflow-wrap: anywhere;
}

.rail-docs[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
}

.rail-docs-loading[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(10px, 1.2vw, 14px) 0;
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    color: var(--ad-gris-60);
}

.rail-doc-link[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(8px, 1vw, 12px) 0;
    border-bottom: 1px solid var(--ad-gris-30);
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    color: var(--ad-negro);
    text-decoration: none;
    transition: color 0.2s ease;
}

.rail-doc-link:hover[b-mkz7nc7p1i] {
    color: var(--ad-primario);
}

.rail-doc-link--loading[b-mkz7nc7p1i] {
    opacity: 0.5;
    pointer-events: none;
}

.rail-doc-link i[b-mkz7nc7p1i] {
    font-size: 18px;
    flex-shrink: 0;
}

/* Boton AÑADIR pinneado al fondo del rail: se compensa con margin-bottom la altura de la fila de stock que en la columna izquierda queda debajo de COMPRAR, para que ambos botones se alineen */
.rail-add-container[b-mkz7nc7p1i] {
    margin-top: auto;
    margin-bottom: calc(clamp(10px, 2vw, 24px) + 46px);
    display: flex;
    flex-shrink: 0;
    padding-bottom: 6px;
}

.rail-add-container .btn-add-to-cart[b-mkz7nc7p1i] {
    width: 100%;
}


@media (min-width: 1401px) {
    .articulo-detalle-col-specs[b-mkz7nc7p1i] {
        height: 0;
        min-height: 100%;
        overflow: hidden;
    }

}

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb-container[b-mkz7nc7p1i] {
    font-size: clamp(12px, 1vw, 14px);

}

.breadcrumb-custom[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;        
    padding: 0;
    gap: 10px;
    padding-top: 5px;
}

.breadcrumb-home-arrow[b-mkz7nc7p1i] {
    width: clamp(16px, 1.5vw, 20px);
    height: clamp(16px, 1.5vw, 20px);
    transform: rotate(180deg);
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: brightness(0.3);
}

.breadcrumb-custom > a:hover .breadcrumb-home-arrow[b-mkz7nc7p1i] {
    transform: rotate(180deg) translateX(2px);
}

.breadcrumb[b-mkz7nc7p1i] {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: transparent;
    font-family: var(--ad-font);
}

.breadcrumb-item[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    color: var(--ad-gris-60);
}

.breadcrumb-item + .breadcrumb-item[b-mkz7nc7p1i]::before {
    content: "/";
    color: var(--ad-gris-50);
    font-weight: 400;
    padding: 0 8px;
}

.breadcrumb-item a[b-mkz7nc7p1i] {
    color: var(--ad-negro) !important;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover[b-mkz7nc7p1i] {
    color: var(--ad-primario) !important;
}

.breadcrumb-item.active[b-mkz7nc7p1i] {
    color: var(--ad-negro);
    font-weight: 400;
}

/* =========================================================
   LEFT COLUMN — Image gallery
   ========================================================= */
.product-image-gallery[b-mkz7nc7p1i] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-image-area[b-mkz7nc7p1i] {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 8px;
}

.product-main-image-large[b-mkz7nc7p1i] {
    position: relative;
    flex: 1;
    min-width: 0;
    /* Alto FIJO (no aspect-ratio): la fila mide siempre lo mismo aunque la
       imagen falle o el producto tenga poco contenido — evita que la sección
       se compacte, que los separadores se junten en doble línea y que
       ayuda/relacionados entren en el primer viewport */
    height: clamp(320px, 48vw, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
    user-select: none;
    border-radius: 14px;
}

.main-product-img[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
    transition: transform 0.4s ease;
}

.main-product-img:hover[b-mkz7nc7p1i] {
    transform: scale(1.02);
}

/* Vertical scroll indicator — flex item al lado de la imagen, sin solaparse */
.vertical-scroll-bar[b-mkz7nc7p1i] {
    position: relative;
    flex-shrink: 0;
    width: 3px;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.vertical-scroll-bar:hover[b-mkz7nc7p1i],
.product-image-area:hover .vertical-scroll-bar[b-mkz7nc7p1i] {
    opacity: 1;
}

.scroll-track[b-mkz7nc7p1i] {
    position: absolute;
    top: 10%;
    height: 80%;
    width: 100%;
    background: var(--ad-gris-30);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    pointer-events: auto !important;
}

.scroll-track:hover[b-mkz7nc7p1i] {
    background: var(--ad-gris-40);
}

.scroll-thumb[b-mkz7nc7p1i] {
    position: absolute;
    width: 3px;
    background: var(--ad-negro);
    border-radius: 2px;
    cursor: grab;
    min-height: 25px;
    left: 0;
    z-index: 15;
    pointer-events: auto !important;
    user-select: none;
    touch-action: none;
    transition: background-color 0.15s ease;
}

.scroll-thumb:hover[b-mkz7nc7p1i] {
    background: #000;
}

.scroll-thumb:active[b-mkz7nc7p1i] {
    cursor: grabbing !important;
    background: #000;
}

/* Thumbnails row */
.thumbnails-navigation-container[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(6px, 1vw, 12px);
    width: 100%;
}

.thumbnails-with-scroll[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(8px, 1vw, 14px);
    justify-content: flex-start;
    overflow-x: auto;
    padding: 6px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    scroll-behavior: smooth;
    /* Al llegar al extremo no encadena el gesto con el scroll de la pagina. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.thumbnails-with-scroll[b-mkz7nc7p1i]::-webkit-scrollbar {
    display: none;
}

/* .can-drag / .is-dragging las pone initThumbsStrip() en articulo-detalle.js */
.thumbnails-with-scroll.can-drag[b-mkz7nc7p1i] {
    cursor: grab;
}

.thumbnails-with-scroll.is-dragging[b-mkz7nc7p1i] {
    cursor: grabbing;
    /* scroll-behavior: smooth pelea con el arrastre (anima cada paso y se siente pastoso). */
    scroll-behavior: auto;
    user-select: none;
    -webkit-user-select: none;
}

    /* Mientras se arrastra, las miniaturas no reciben hover ni click. */
    .thumbnails-with-scroll.is-dragging .thumb-item[b-mkz7nc7p1i] {
        pointer-events: none;
    }

.thumb-item[b-mkz7nc7p1i] {
    width: clamp(80px, 9vw, 120px);
    height: clamp(80px, 9vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    background: var(--ad-gris-10);
    border-radius: 14px;
    padding: 8px;
    opacity: 0.7;
    filter: grayscale(40%);
}

.thumb-item:hover[b-mkz7nc7p1i] {
    opacity: 0.9;
    filter: grayscale(0);
}

.thumb-item.selected[b-mkz7nc7p1i] {
    opacity: 1;
    filter: grayscale(0);
    background: var(--ad-blanco);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.thumb-item img[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    /* Sin esto el navegador inicia su propio drag de imagen y rompe el arrastre. */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Las flechas solo tienen sentido si la tira desborda; el JS marca .can-scroll
   en el contenedor cuando scrollWidth > clientWidth. */
.thumbnails-navigation-container:not(.can-scroll) .thumb-nav-btn[b-mkz7nc7p1i] {
    display: none;
}

.thumb-nav-btn[b-mkz7nc7p1i] {
    width: clamp(28px, 3vw, 36px);
    height: clamp(28px, 3vw, 36px);
    border: 1px solid var(--ad-gris-30);
    background: var(--ad-blanco);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    color: var(--ad-negro);
}

.thumb-nav-btn:hover:not(:disabled)[b-mkz7nc7p1i] {
    background: var(--ad-gris-10);
    border-color: var(--ad-primario);
    color: var(--ad-primario);
}

.thumb-nav-btn:disabled[b-mkz7nc7p1i] {
    opacity: 0.3;
    cursor: not-allowed;
}

.thumb-nav-btn i[b-mkz7nc7p1i] {
    font-size: clamp(12px, 1.2vw, 14px);
}

/* =========================================================
   RIGHT COLUMN — Product info
   ========================================================= */

/* --- Top row: reference (left) + badges/heart (right) --- */
.product-badges[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: 100%;
    min-height: 28px;
}

.product-badges .badge[b-mkz7nc7p1i] {
    background-color: var(--ad-blanco);
    color: var(--ad-negro);
    font-family: var(--ad-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border: none;
    border-radius: 2px;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-align: center;
    white-space: nowrap;
}

/* Reference code — left, plain text */
.product-badges .badge.referencia[b-mkz7nc7p1i] {
    margin-right: auto;
    color: var(--ad-gris-60);
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
}

/* OFERTA badge — red */
.product-badges .badge.badge-oferta[b-mkz7nc7p1i],
.product-badges .badge.bg-danger[b-mkz7nc7p1i] {
    background-color: var(--ad-oferta-50) !important;
    color: var(--ad-blanco);
}

/* NUEVO badge — dark with subtle border (Figma: white bg with dark border & bold text) */
.product-badges .badge.badge-nuevo[b-mkz7nc7p1i] {
    background-color: var(--ad-blanco);
    color: var(--ad-negro);
    border: 1px solid var(--ad-gris-30);
}

/* ECO badge — green */
.product-badges .badge.bg-success[b-mkz7nc7p1i] {
    background-color: var(--ad-primario) !important;
    color: var(--ad-blanco);
}

/* Reembolso: la badge es un enlace clicable a la página de canje del fabricante */
.badge-reembolso-canje[b-mkz7nc7p1i] {
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
}

/* Badge clicable: lleva al listado de productos filtrado por esa etiqueta (oferta, homologado, regalo, reembolso) */
.badge-filter-link[b-mkz7nc7p1i] {
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
}

/* === REGALO en el rail derecho — mismo patrón que ESPECIFICACIONES/DOCUMENTACIÓN (título con su línea), discreto === */
.rail-title--static[b-mkz7nc7p1i] {
    cursor: default;
}

.rail-regalo[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 14px);
    padding: clamp(10px, 1.1vw, 14px) 0;
}

.rail-regalo__img[b-mkz7nc7p1i] {
    width: clamp(44px, 4vw, 56px);
    height: clamp(44px, 4vw, 56px);
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid var(--ad-gris-30);
    border-radius: 6px;
    background: var(--ad-blanco);
}

.rail-regalo__name[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 400;
    letter-spacing: 0.25px;
    color: var(--ad-negro);
    line-height: 20px;
    overflow-wrap: anywhere;
}

/* REGALO — check verde (umbral alcanzado) + condición de compra + progreso "te faltan X" */
.rail-regalo__check[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ad-primario);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.rail-regalo__cond[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(12px, 0.95vw, 13px);
    font-weight: 600;
    color: var(--ad-negro);
    margin: 6px 0 0 0;
    line-height: 18px;
}

.rail-regalo__progress[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(12px, 0.95vw, 13px);
    font-weight: 600;
    color: var(--ad-gris-60);
    margin: 4px 0 0 0;
    line-height: 18px;
}

.rail-regalo__progress--ok[b-mkz7nc7p1i] {
    color: var(--ad-primario);
}

/* Heart/Favorite */
.product-badges .favorite-icon[b-mkz7nc7p1i] {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--ad-gris-60);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.product-badges .favorite-icon:hover[b-mkz7nc7p1i] {
    transform: scale(1.15);
    color: var(--ad-oferta-60);
}

.product-badges .favorite-icon.text-danger[b-mkz7nc7p1i] {
    color: var(--ad-oferta-60) !important;
}

.product-badges .favorite-icon.text-muted[b-mkz7nc7p1i] {
    color: var(--ad-gris-60) !important;
}

.product-badges .favorite-icon:focus[b-mkz7nc7p1i] {
    outline: none;
    box-shadow: none !important;
}

.product-badges .spinner-border-sm[b-mkz7nc7p1i] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* --- Product title (h1) --- */
/* Clase propia (ad-*) para NO heredar la regla global .product-title de master.css
   (cursor pointer + subrayado verde tipo enlace), que es legado de la card antigua. */
.ad-product-title[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(20px, 2vw, 22px);
    font-weight: 400;
    line-height: 1.3;
    color: var(--ad-negro);
    margin: 0;
    padding: 0;
    letter-spacing: 0;
}

/* --- Description --- */
.product-description[b-mkz7nc7p1i] {
    margin: 0;
    padding: 0;
}

.product-description p[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--ad-gris-60);
    margin: 0;
}

/* --- Price row ---
   Sin borde inferior por defecto: solo lo lleva cuando Oferta Valida
   renderiza justo despues (product-price--with-offer), para no dejar una
   linea suelta cuando Precio es el ultimo elemento del bloque superior */
.product-price[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 1.5vw, 16px);
    padding: clamp(6px, 1vw, 10px) 0 clamp(12px, 1.5vw, 18px);
    flex-wrap: wrap;
}

.product-price--with-offer[b-mkz7nc7p1i] {
    border-bottom: 1px solid var(--ad-gris-30);
}

.product-price-values[b-mkz7nc7p1i] {
    display: flex;
    align-items: baseline;
    gap: clamp(8px, 1vw, 12px);
}

.current-price[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    color: var(--ad-negro);
    line-height: 1;
    margin: 0;
}

.current-price--offer[b-mkz7nc7p1i] {
    color: var(--ad-oferta-60);
}

.original-price[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--ad-gris-50);
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1;
}

/* Brand badge — text fallback (Lenovo-style red) */
.product-brand-badge[b-mkz7nc7p1i] {
    background-color: var(--ad-oferta-50);
    color: var(--ad-blanco);
    font-family: var(--ad-font);
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 2px;
    text-transform: none;
    letter-spacing: 0.3px;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

a.product-brand-badge:hover[b-mkz7nc7p1i] {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Brand badge — image variant (uses real brand logo PNG) */
.product-brand-badge--image[b-mkz7nc7p1i] {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    height: clamp(28px, 3vw, 40px);
    max-width: clamp(90px, 12vw, 140px);
}

.product-brand-badge--image img[b-mkz7nc7p1i] {
    display: block;
    height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Brand badge — skeleton mientras se resuelve la marca */
.product-brand-badge--skeleton[b-mkz7nc7p1i] {
    display: inline-block;
    background-color: var(--ad-gris-20);
    padding: 0;
    border-radius: 4px;
    box-shadow: none;
    height: clamp(28px, 3vw, 40px);
    width: clamp(90px, 12vw, 140px);
    position: relative;
    overflow: hidden;
    line-height: 0;
    color: transparent;
}

.product-brand-badge--skeleton[b-mkz7nc7p1i]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: brand-badge-shimmer-b-mkz7nc7p1i 1.2s ease-in-out infinite;
}

@keyframes brand-badge-shimmer-b-mkz7nc7p1i {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Respeta preferencia de usuarios con menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .product-brand-badge--skeleton[b-mkz7nc7p1i]::after {
        animation: none;
        opacity: 0.3;
    }
}

/* --- Offer validity message ---
   Sin borde inferior: siempre es el ultimo elemento del bloque superior
   (Precio + Oferta Valida), no necesita separador contra el hueco de abajo */
.offer-valid-message[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 400;
    color: var(--ad-oferta-60);
    margin: 0;
    padding: 15px 0;
    letter-spacing: 0;
}

/* --- Variants (Color) ---
   Sin border-bottom: la línea inferior la pone .recommended-unit-row
   (border-top); con ambas se duplicaba el separador */
.product-variants[b-mkz7nc7p1i] {
    padding: clamp(8px, 1.2vw, 14px) 0;
}

.variants-title[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 600;
    color: var(--ad-negro);
    margin: 0 0 clamp(10px, 1.2vw, 14px);
    letter-spacing: 0.1px;
}

.variants-options[b-mkz7nc7p1i] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 12px);
    align-items: center;
}

.variant-image[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ad-gris-10);
    border-radius: 14px;
    padding: 4px;
    width: clamp(60px, 8vw, 100px);
    height: clamp(60px, 8vw, 100px);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    overflow: hidden;
    box-sizing: border-box;
}

.variant-image img[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    pointer-events: none;
}

.variant-image:hover[b-mkz7nc7p1i] {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-color: var(--ad-gris-30);
}

.variant-image.variant-active[b-mkz7nc7p1i] {
    background: var(--ad-blanco);
    border-color: var(--ad-negro);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: default;
}

/* --- Recommended unit row (right-aligned above buttons) --- */
.recommended-unit-row[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.5vw, 18px);
    border-top: 1px solid var(--ad-gris-30);
    border-bottom: 1px solid var(--ad-gris-30);
    padding: clamp(10px, 1.5vw, 16px) 0;
    margin-bottom: clamp(12px, 1.5vw, 20px);
}

.recommended-unit-label[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 400;
    color: var(--ad-gris-60);
    letter-spacing: 0.25px;
}

.recommended-unit-value[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 700;
    color: var(--ad-negro);
    letter-spacing: 0;
    background: var(--ad-gris-10);
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 34px;
    text-align: center;
}

/* --- Actions (buttons) --- */
.product-actions[b-mkz7nc7p1i] {
    margin: 0;
}

/* Fila de compra: stepper + total + COMPRAR (Figma "Producto nova") */
.purchase-row[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(12px, 1.5vw, 24px);
    width: 100%;
    border-bottom: 1px solid var(--ad-gris-30);
    padding-bottom: clamp(10px, 2vw, 24px);
}

/* Selector de cantidad — mismo patrón compartido que Cesta/EditarPedido
   (.cantidad-control + .btn-menos/.btn-mas + InputNumero.cantidad-input) */
.cantidad-control[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.50vw, 8px);
    background-color: var(--ad-gris-10);
    border-radius: 8px;
    padding: 0 clamp(6px, 0.6vw, 12px);
    height: clamp(42px, 5vw, 52px);
    flex-shrink: 0;
}

.btn-menos[b-mkz7nc7p1i],
.btn-mas[b-mkz7nc7p1i] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.btn-menos:disabled[b-mkz7nc7p1i],
.btn-mas:disabled[b-mkz7nc7p1i] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-menos img[b-mkz7nc7p1i],
.btn-mas img[b-mkz7nc7p1i] {
    width: clamp(16px, 1.25vw, 24px);
    height: clamp(16px, 1.25vw, 24px);
}

.purchase-row[b-mkz7nc7p1i]  .cantidad-input {
    width: clamp(30px, 2.6vw, 50px);
    text-align: center;
    font-family: var(--ad-font);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--ad-negro);
    appearance: textfield;
    -moz-appearance: textfield;
}

.purchase-row[b-mkz7nc7p1i]  .cantidad-input:focus {
    outline: none;
}

.purchase-total[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    color: var(--ad-negro);
    white-space: nowrap;
    flex-shrink: 0;
}

.purchase-buttons[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(12px, 1.5vw, 24px);
    flex: 1 1 0;
    min-width: 0;
}

.purchase-buttons .btn-buy-now[b-mkz7nc7p1i] {
    flex: 1;
}

/* AÑADIR inline: solo visible cuando el rail pasa abajo (≤1200px) */
.purchase-buttons .btn-add-to-cart--inline[b-mkz7nc7p1i] {
    display: none;
}

/* COMPRAR con el MISMO ancho que AÑADIR: 46% = ratio col-rail/col-centro del
   grid (0.46fr / 1fr). Debe declararse DESPUÉS de la base .purchase-buttons */
@media (min-width: 1401px) {
    /* Una sola línea SIEMPRE: nada de wrap; si el total crece (cantidades
       altas), COMPRAR cede ancho de forma controlada en vez de descolgarse */
    .purchase-row[b-mkz7nc7p1i] {
        flex-wrap: nowrap;
        gap: clamp(10px, 1.2vw, 20px);
    }

    .purchase-buttons[b-mkz7nc7p1i] {
        flex: 0 1 46%;
        min-width: 150px;
        margin-left: auto;
    }
}

/* AÑADIR — green solid */
.btn-add-to-cart[b-mkz7nc7p1i] {
    background-color: var(--ad-primario);
    color: var(--ad-blanco);
    font-family: var(--ad-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.15px;
    text-transform: uppercase;
    padding: clamp(10px, 1.4vw, 10px) clamp(16px, 2vw, 24px);
    border: 2px solid var(--ad-primario);
    border-radius: 6px;
    flex: 1;
    min-height: clamp(42px, 5vw, 52px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-add-to-cart:hover:not(:disabled)[b-mkz7nc7p1i] {
    background-color: var(--ad-primario-dark);
    border-color: var(--ad-primario-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(60, 170, 54, 0.32);
    color: var(--ad-blanco);
}

.btn-add-to-cart[b-mkz7nc7p1i]  svg {
    width: clamp(14px, 1.2vw, 16px);
    height: clamp(14px, 1.2vw, 16px);
}

.btn-add-to-cart:disabled[b-mkz7nc7p1i] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* COMPRAR — white outline */
.btn-buy-now[b-mkz7nc7p1i] {
    background-color: var(--ad-blanco);
    color: var(--ad-primario);
    font-family: var(--ad-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.15px;
    text-transform: uppercase;
    padding: clamp(10px, 1.4vw, 10px) clamp(16px, 2vw, 24px);
    border: 1px solid var(--ad-primario);
    border-radius: 6px;
    flex: 1;
    min-height: clamp(42px, 5vw, 52px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-buy-now:hover:not(:disabled)[b-mkz7nc7p1i] {
    background-color: var(--ad-primario-10);
    color: var(--ad-primario-dark);
    border-color: var(--ad-primario-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 170, 54, 0.2);
}

.btn-buy-now:disabled[b-mkz7nc7p1i] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Footer info row: stock + rating --- */
.product-footer-info[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(10px, 1.5vw, 20px);
    padding-top: clamp(10px, 2vw, 24px);
}

.product-stock[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
}

.stock-indicator[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ad-font);
    font-size: clamp(12px, 1vw, 14px);
    color: var(--ad-negro);
    font-weight: 400;
    letter-spacing: 0.25px;
}

.stock-dot-indicator[b-mkz7nc7p1i] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--ad-primario);
    display: inline-block;
    flex-shrink: 0;
}

.stock-indicator--out .bi[b-mkz7nc7p1i] {
    color: var(--ad-oferta-60);
    font-size: 14px;
}

.stock-indicator--consult .bi[b-mkz7nc7p1i] {
    color: var(--ad-alternativo);
    font-size: 14px;
}

/* Disponibilidad personalizada (p. ej. "Plazo entrega 3 días"): icono informativo positivo
   (reloj), NUNCA el aspa roja de "sin stock". */
.stock-indicator--custom .bi[b-mkz7nc7p1i] {
    color: var(--ad-primario);
    font-size: 14px;
}

.product-stock span[b-mkz7nc7p1i] {
    font-weight: 400;
    color: var(--ad-negro);
    font-family: var(--ad-font);
}


/* =========================================================
   OFFER COUNTDOWN (preserved)
   ========================================================= */
.offer-countdown[b-mkz7nc7p1i] {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.offer-countdown p[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 600;
    color: var(--ad-negro);
    margin-bottom: 1rem;
}

.countdown-timer[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(8px, 1.5vw, 20px);
    margin-top: 1rem;
    justify-content: flex-start;
}

.countdown-block[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(48px, 5vw, 60px);
    background: var(--ad-gris-10);
    border-radius: 8px;
    padding: clamp(8px, 1vw, 12px) 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.countdown-value[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    color: var(--ad-negro);
    line-height: 1;
}

.countdown-label[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(9px, 0.8vw, 11px);
    margin-top: 6px;
    color: var(--ad-gris-60);
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================================
   TABS WRAPPER — tabs + help button side by side
   Figma: 1920w, paddings 58/115/40/115, gap 98px between tabs (1000px) and button (592px)
   Ratio 1000 : 98 : 592 preserved proporcionalmente con clamp()
   ========================================================= */
.product-tabs-wrapper[b-mkz7nc7p1i] {
    display: grid;
    /* 1000fr : 592fr = proporción Figma; gap 98px en diseño, fluido con clamp */
    grid-template-columns: minmax(0, 1000fr) minmax(0, 592fr);
    gap: clamp(24px, 5.1vw, 98px);
    /* Figma: 58px padding-top del contenedor inferior (separación respecto al producto) */
    margin-top: clamp(32px, 3vw, 58px);
    /* Figma: 40px padding-bottom */
    margin-bottom: clamp(24px, 2vw, 40px);
    max-width: var(--ad-max-w);
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
}

.product-tabs[b-mkz7nc7p1i] {
    padding: 0;
    min-width: 0;
    /* Figma: inferior producto → 68px alto (línea top + 28px texto + línea bottom) */
}

.tabs-header[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    /* Figma: 20px arriba + 28px línea + 20px abajo = 68px */
    gap: 20px;
    width: 100%;
}

.tabs-header-line[b-mkz7nc7p1i] {
    width: 100%;
    height: 1px;
    background-color: var(--ad-gris-30);
}

.tabs-nav[b-mkz7nc7p1i] {
    display: flex;
    /* Figma: gap-70 entre tabs */
    gap: clamp(24px, 4.5vw, 70px);
    align-items: center;
    flex-wrap: wrap;
}

.tab-btn[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    /* Figma: title/large → Nunito Sans Regular 22/28 */
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 400;
    line-height: 28px;
    color: var(--ad-negro);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease, font-weight 0.2s ease;
    position: relative;
    letter-spacing: 0;
}

.tab-btn:hover[b-mkz7nc7p1i] {
    opacity: 0.75;
}

.tab-btn.active[b-mkz7nc7p1i] {
    font-weight: 700;
}

.tab-btn.active[b-mkz7nc7p1i]::after {
    content: "";
    position: absolute;
    /* línea exactamente sobre la horizontal inferior (20px gap) */
    bottom: -21px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--ad-negro);
}

.tabs-content[b-mkz7nc7p1i] {
    padding-top: clamp(20px, 2.5vw, 32px);
}

/* Help button (right side of tabs) — yellow outline, Figma: 592×52 */
.help-button-container[b-mkz7nc7p1i] {
    display: flex;
    justify-content: stretch;
    align-items: flex-start;
    /* Alineado con la línea superior de los tabs (no con el texto) */
    padding-top: 0;
}

.help-button[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ad-blanco);
    color: var(--ad-negro);
    /* Figma: border 1px solid #ECC61B (alternativo-oscuro) */
    border: 1px solid var(--ad-alternativo-oscuro);
    /* Figma: border-radius 6px */
    border-radius: 6px;
    /* Figma: padding 10px 24px */
    padding: 10px 24px;
    /* Figma: altura fija 52px */
    height: clamp(44px, 3.5vw, 52px);
    width: 100%;
    /* Figma: ancho 592px (ya limitado por grid column) */
    max-width: 592px;
    font-family: var(--ad-font);
    /* Figma: title/medium → Nunito Sans SemiBold 16/24 letter-spacing 0.15 */
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.help-button:hover[b-mkz7nc7p1i] {
    background-color: var(--ad-alternativo);
    color: var(--ad-negro);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 214, 35, 0.3);
}

/* =========================================================
   SPECS TABLE
   ========================================================= */
.specs-table[b-mkz7nc7p1i] {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--ad-negro);
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 14px);
    line-height: 20px;
}

.spec-row[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(16px, 4vw, 75px);
    align-items: flex-start;
    padding: clamp(10px, 1.3vw, 15px) 0;
    border-bottom: 1px solid var(--ad-gris-30);
}

.spec-row:last-child[b-mkz7nc7p1i] {
    border-bottom: none;
}

.spec-name[b-mkz7nc7p1i] {
    font-weight: 600;
    letter-spacing: 0.1px;
    min-width: clamp(120px, 15vw, 200px);
    flex-shrink: 0;
}

.spec-value[b-mkz7nc7p1i] {
    font-weight: 400;
    letter-spacing: 0.25px;
}

/* =========================================================
   1WORLDSYNC MANUFACTURER CONTENT
   ========================================================= */
.manufacturer-content-section[b-mkz7nc7p1i] {
    max-width: var(--ad-max-w);
    margin: clamp(32px, 3vw, 58px) auto 0;
}

/* Contenido web de la ficha (Fase L8c): texto propio de la web encima de lo que
   viene del ERP. Se alinea con el bloque de contenido del fabricante para que los
   dos lean como la misma columna. */
.articulo-contenido-web[b-mkz7nc7p1i] {
    max-width: var(--ad-max-w);
    margin: clamp(32px, 3vw, 58px) auto 0;
}

.articulo-contenido-web-titulo[b-mkz7nc7p1i] {
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 600;
    margin: 0 0 12px;
}

.articulo-contenido-web-texto[b-mkz7nc7p1i] {
    line-height: 1.6;
}

.articulo-contenido-web-texto p:last-child[b-mkz7nc7p1i] {
    margin-bottom: 0;
}

/* Fila del botón de ayuda (sustituye al antiguo wrapper de tabs)
   Margen amplio: no debe asomar en el primer viewport al cargar */
.help-button-row[b-mkz7nc7p1i] {
    display: flex;
    justify-content: center;
    max-width: var(--ad-max-w);
    margin: clamp(60px, 6vw, 110px) auto 0;
}

.help-button-row .help-button[b-mkz7nc7p1i] {
    width: 100%;
    max-width: clamp(300px, 40vw, 592px);
}

.ows-separator[b-mkz7nc7p1i] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: clamp(24px, 3vw, 40px) 0 clamp(16px, 2vw, 24px);
}

.ows-separator[b-mkz7nc7p1i]::before,
.ows-separator[b-mkz7nc7p1i]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--ad-gris-30);
}

.ows-separator-text[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    color: var(--ad-gris-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* =========================================================
   DOCS GRID
   ========================================================= */
.docs-grid[b-mkz7nc7p1i] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 50px);
    align-items: flex-start;
    padding: 20px 0;
}

.doc-card[b-mkz7nc7p1i] {
    display: flex;
    gap: clamp(12px, 1.5vw, 30px);
    align-items: center;
    text-decoration: none;
    color: var(--ad-negro);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.doc-card:hover[b-mkz7nc7p1i] {
    opacity: 0.8;
    transform: translateY(-2px);
    color: var(--ad-negro);
}

.doc-card--loading[b-mkz7nc7p1i] {
    opacity: 0.5;
    pointer-events: none;
}

.doc-card-icon[b-mkz7nc7p1i] {
    width: clamp(48px, 6vw, 81px);
    height: clamp(64px, 8vw, 113px);
    flex-shrink: 0;
}

.doc-card-icon svg[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
}

.doc-card-title[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ad-negro);
    white-space: nowrap;
}

/* =========================================================
   RELATED PRODUCTS (Home body 3) — ORIGINAL (preserved)
   ========================================================= */
:root[b-mkz7nc7p1i] {
    --negro: rgba(33, 33, 33, 1);
    --blanco: rgba(255, 255, 255, 1);
    --primario: rgba(60, 170, 54, 1);
    --secundario: rgba(107, 152, 156, 1);
    --terciario: rgba(133, 149, 126, 1);
    --alternativo: rgba(253, 214, 35, 1);
    --alternativo-oscuro: rgba(236, 198, 27, 1);
    --gris-10: rgba(245, 245, 245, 1);
    --gris-20: rgba(238, 238, 238, 1);
    --gris-30: rgba(224, 224, 224, 1);
    --gris-40: rgba(189, 189, 189, 1);
    --gris-50: rgba(158, 158, 158, 1);
    --gris-60: rgba(117, 117, 117, 1);
    --oferta-50: rgba(255, 84, 73, 1);
    --oferta-60: rgba(222, 55, 48, 1);
    --dark-green-buttons: rgba(58, 79, 57, 1);
    --black-fonts-headings: rgba(45, 46, 46, 1);
}

.home-body-3[b-mkz7nc7p1i] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    --primary-10: #EBF6EB;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    padding: 60px var(--padding-lateral) 80px;
    position: relative;
    width: 100%;
    background-color: var(--blanco);
    margin-top: 3rem;
}

.frame-5[b-mkz7nc7p1i] {
    position: relative;
    width: 503px;
    height: 75px;
}

.title_relacionados[b-mkz7nc7p1i] {
    position: absolute;
    top: -1px;
    left: 8%;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
}

.vector-3[b-mkz7nc7p1i] {
    position: absolute;
    width: 504px;
    height: 1px;
    top: 74px;
    left: 0;
    object-fit: cover;
}

.frame-6[b-mkz7nc7p1i] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 0px;
    position: relative;
    margin-top: 50px;
}

.flechas-sliders[b-mkz7nc7p1i] {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin: 1%;
}

.flechas-sliders:hover[b-mkz7nc7p1i] {
    transform: scale(1.1);
}

.frame-7[b-mkz7nc7p1i] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.card-producto[b-mkz7nc7p1i],
.card-producto-2[b-mkz7nc7p1i],
.card-producto-3[b-mkz7nc7p1i] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 0px 0px 10px 20px;
    position: relative;
    flex: 0 0 auto;
    margin-top: -1.00px;
    margin-bottom: -1.00px;
    border-left-width: 1px;
    border-left-style: solid;
    border-color: var(--gris-30);
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.card-producto:hover[b-mkz7nc7p1i],
.card-producto-2:hover[b-mkz7nc7p1i],
.card-producto-3:hover[b-mkz7nc7p1i] {
    transform: translateY(-5px);
}

.card-producto[b-mkz7nc7p1i] {
    margin-left: -1.00px;
}

.card-producto-3[b-mkz7nc7p1i] {
    margin-right: -1.00px;
}

.frame-wrapper[b-mkz7nc7p1i],
.frame-9[b-mkz7nc7p1i],
.frame-10[b-mkz7nc7p1i],
.frame-11[b-mkz7nc7p1i],
.frame-12[b-mkz7nc7p1i] {
    position: relative;
    width: 300px;
    height: 300px;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 8px;
    overflow: hidden;
}

.frame-8[b-mkz7nc7p1i] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    top: 20px;
    left: 20px;
}

.grupo[b-mkz7nc7p1i],
.grupo-2[b-mkz7nc7p1i],
.grupo-3[b-mkz7nc7p1i],
.grupo-4[b-mkz7nc7p1i],
.grupo-5[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.grupo[b-mkz7nc7p1i] { background-color: var(--oferta-50); }
.grupo-2[b-mkz7nc7p1i] { background-color: #fdd623; }
.grupo-3[b-mkz7nc7p1i] { background-color: #ffffff; }
.grupo-4[b-mkz7nc7p1i] { background-color: #686aad; }
.grupo-5[b-mkz7nc7p1i] { background-color: #52b0ad; }

.new-wrapper[b-mkz7nc7p1i] {
    background-color: var(--primario);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.new[b-mkz7nc7p1i],
.new-2[b-mkz7nc7p1i],
.new-3[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.new[b-mkz7nc7p1i] { color: var(--negro); }
.new-2[b-mkz7nc7p1i] { color: #141414; }
.new-3[b-mkz7nc7p1i] { color: var(--negro); }

.pack-info-text[b-mkz7nc7p1i] {
    display: flex;
    width: 300px;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0px 20px;
    position: relative;
    flex: 0 0 auto;
}

.info-producto[b-mkz7nc7p1i] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
    flex: 0 0 auto;
    max-width: 75%;
}

.redondas[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    flex: 0 0 auto;
}

.redonda[b-mkz7nc7p1i],
.ellipse-wrapper[b-mkz7nc7p1i] {
    position: relative;
    width: 23px;
    height: 23px;
}

.redonda[b-mkz7nc7p1i] {
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.redonda:hover[b-mkz7nc7p1i] { transform: scale(1.1); }

.redonda-negra[b-mkz7nc7p1i] {
    background-color: #010101;
    border: 1px dashed #000000;
}

.redonda-blanca[b-mkz7nc7p1i] {
    background-color: #ffffff;
    border: 1px solid var(--gris-60);
}

.redonda-amarilla[b-mkz7nc7p1i] { background-color: #ffd600; }
.redonda-azul[b-mkz7nc7p1i]    { background-color: #3a37bd; }

.ellipse[b-mkz7nc7p1i],
.ellipse-2[b-mkz7nc7p1i],
.ellipse-3[b-mkz7nc7p1i],
.ellipse-4[b-mkz7nc7p1i] {
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 7.5px;
}

.ellipse[b-mkz7nc7p1i] { top: 3px; left: 3px; background-color: #010101; }
.ellipse-2[b-mkz7nc7p1i] { top: 4px; left: 4px; background-color: #ffffff; border: 1px solid; border-color: var(--gris-60); }
.ellipse-3[b-mkz7nc7p1i] { top: 4px; left: 4px; background-color: #ffd600; }
.ellipse-4[b-mkz7nc7p1i] { top: 4px; left: 4px; background-color: #3a37bd; }

.div-wrapper[b-mkz7nc7p1i] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px;
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-3[b-mkz7nc7p1i] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.text-wrapper-4[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    color: var(--negro);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0px;
    line-height: normal;
}

.text-wrapper-5[b-mkz7nc7p1i] {
    position: relative;
    align-self: stretch;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 400;
    color: var(--negro);
    font-size: 16px;
    letter-spacing: 0px;
    line-height: normal;
}

.price[b-mkz7nc7p1i] {
    display: inline-flex;
    align-items: flex-end;
    gap: 12px;
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-6[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    color: var(--oferta-60);
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-7[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 400;
    color: var(--gris-50);
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: line-through;
}

.text-wrapper-8[b-mkz7nc7p1i] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica;
    font-weight: 700;
    color: var(--negro);
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
}

.boton[b-mkz7nc7p1i] {
    width: 65px;
    height: 65px;
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    border: 1px solid;
    border-color: var(--primario);
    cursor: pointer;
    transition: all 0.3s ease;
}

.boton:hover[b-mkz7nc7p1i] { background-color: var(--primario); }
.boton:hover .iconos-2[b-mkz7nc7p1i] { filter: brightness(0) invert(1); }

.iconos-2[b-mkz7nc7p1i] {
    position: absolute;
    width: 23px;
    height: 24px;
    top: 19px;
    left: 20px;
    transition: all 0.3s ease;
}

.loader-container[b-mkz7nc7p1i] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
}

#relatedProductCarousel[b-mkz7nc7p1i] {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    flex: 1;
}

#relatedProductCarousel[b-mkz7nc7p1i]::-webkit-scrollbar { display: none; }

.carousel-container[b-mkz7nc7p1i] {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.carousel-container[b-mkz7nc7p1i]::-webkit-scrollbar { display: none; }

.carousel-track[b-mkz7nc7p1i] {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    width: max-content;
}

@keyframes addedToCart-b-mkz7nc7p1i {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.boton.added[b-mkz7nc7p1i] {
    animation: addedToCart-b-mkz7nc7p1i 0.5s ease;
    background-color: var(--primario);
}

.boton.added .iconos-2[b-mkz7nc7p1i] {
    filter: brightness(0) invert(1);
}

.grupo-oferta[b-mkz7nc7p1i] { background-color: var(--oferta-50); }
.grupo-eco[b-mkz7nc7p1i] { background-color: var(--primario); }

.badge-text[b-mkz7nc7p1i] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: var(--blanco);
    white-space: nowrap;
}

.grupo-stock[b-mkz7nc7p1i] {
    background-color: var(--primary-10);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    width: 59px;
    justify-content: flex-end;
}

.stock-dot[b-mkz7nc7p1i] {
    width: 9px;
    height: 9px;
    background-color: var(--primario);
    border-radius: 50%;
}

.stock-text[b-mkz7nc7p1i] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: #000000;
}

.colors-more[b-mkz7nc7p1i] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0px;
    line-height: normal;
}

.no-products-msg[b-mkz7nc7p1i] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 16px;
    color: var(--gris-50);
    text-align: center;
    padding: 40px;
}

.carousel-btn[b-mkz7nc7p1i] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.carousel-btn:hover[b-mkz7nc7p1i] { transform: scale(1.1); }
.carousel-btn:first-child img[b-mkz7nc7p1i] { transform: scaleX(-1); }

.img-4[b-mkz7nc7p1i] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.product-image-wrapper[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    position: relative;
}

/* Responsive related products */
@media (max-width: 1600px) {
    .frame-7[b-mkz7nc7p1i] {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
}

@media (max-width: 1200px) {
    .card-producto[b-mkz7nc7p1i],
    .card-producto-2[b-mkz7nc7p1i],
    .card-producto-3[b-mkz7nc7p1i] {
        border: 1px solid var(--gris-30);
        margin: 10px;
    }
}

@media (max-width: 768px) {
    .home-body-3[b-mkz7nc7p1i] {
        --padding-lateral: 16px;
        padding: 20px var(--padding-lateral);
    }

    .text-wrapper-3[b-mkz7nc7p1i] {
        font-size: 30px;
    }

    .frame-wrapper[b-mkz7nc7p1i],
    .frame-9[b-mkz7nc7p1i],
    .frame-10[b-mkz7nc7p1i],
    .frame-11[b-mkz7nc7p1i],
    .frame-12[b-mkz7nc7p1i] {
        width: 250px;
        height: 250px;
    }

    .pack-info-text[b-mkz7nc7p1i] {
        width: 250px;
    }
}

/* Más Información button */
.boton-mas-info[b-mkz7nc7p1i],
.boton-consultar[b-mkz7nc7p1i] {
    width: 100%;
    max-width: clamp(220px, 25vw, 320px);
    height: clamp(42px, 5vw, 52px);
    padding: 10px 24px;
    background-color: var(--ad-blanco);
    border: 2px solid var(--ad-primario);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boton-mas-info span[b-mkz7nc7p1i],
.boton-consultar span[b-mkz7nc7p1i] {
    font-family: var(--ad-font);
    font-weight: 600;
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.5;
    color: var(--ad-primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
    transition: color 0.3s ease;
}

.boton-mas-info:hover[b-mkz7nc7p1i] {
    background-color: var(--ad-primario-10);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 170, 54, 0.2);
}

/* "Consultar precio": hover igual que el boton de carrito de la card,
   relleno verde + texto blanco + la misma sombra, sin desplazamiento. */
.boton-consultar:hover[b-mkz7nc7p1i] {
    background-color: var(--ad-primario);
    box-shadow: 0px 2px 4px 0px #00000040;
}

.boton-consultar:hover span[b-mkz7nc7p1i] {
    color: var(--ad-blanco);
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Desktop pequeño / tablet horizontal: el rail pasa debajo
   de las dos columnas principales y AÑADIR vuelve a la fila de compra */
@media (max-width: 1400px) {
    .articulo-detalle-row[b-mkz7nc7p1i] {
        grid-template-columns: minmax(0, 0.78fr) 1px minmax(0, 1fr);
    }

    .articulo-detalle-col-specs[b-mkz7nc7p1i] {
        grid-column: 1 / -1;
        grid-row: 2;
        height: auto;
        margin-top: clamp(16px, 2vw, 32px);
    }

    .rail-add-container[b-mkz7nc7p1i] {
        display: none;
    }

    .purchase-buttons .btn-add-to-cart--inline[b-mkz7nc7p1i] {
        display: inline-flex;
    }
}

/* Tablet: collapse columns into stacked */
@media (max-width: 992px) {
    .articulo-detalle-row[b-mkz7nc7p1i] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .articulo-detalle-row[b-mkz7nc7p1i]::before {
        display: none;
    }

    .articulo-detalle-col-left[b-mkz7nc7p1i],
    .articulo-detalle-col-right[b-mkz7nc7p1i] {
        grid-column: 1;
    }

    .articulo-detalle-col-specs[b-mkz7nc7p1i] {
        grid-column: 1;
        grid-row: auto;
    }

    .help-button-row[b-mkz7nc7p1i] {
        justify-content: flex-start;
        padding-top: 16px;
    }

    .help-button-row .help-button[b-mkz7nc7p1i] {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .product-main-image-large[b-mkz7nc7p1i] {
        height: min(90vw, 400px);
    }

    .purchase-row[b-mkz7nc7p1i] {
        gap: 14px;
    }

    .purchase-total[b-mkz7nc7p1i] {
        margin-left: auto;
    }

    .purchase-buttons[b-mkz7nc7p1i] {
        flex-direction: column;
        flex-basis: 100%;
        gap: 10px;
    }

    .btn-add-to-cart[b-mkz7nc7p1i],
    .btn-buy-now[b-mkz7nc7p1i] {
        width: 100%;
    }

    .product-footer-info[b-mkz7nc7p1i] {
        align-items: flex-start;
        flex-direction: column;
    }

    .recommended-unit-row[b-mkz7nc7p1i] {
        justify-content: flex-start;
    }

    .tabs-nav[b-mkz7nc7p1i] {
        gap: 24px;
    }
}

@media (max-width: 576px) {
    .product-badges .badge[b-mkz7nc7p1i] {
        font-size: 10px;
        padding: 4px 7px;
    }

    .docs-grid[b-mkz7nc7p1i] {
        flex-direction: column;
        gap: 20px;
    }

    .doc-card[b-mkz7nc7p1i] {
        gap: 14px;
    }

    .doc-card-title[b-mkz7nc7p1i] {
        font-size: 14px;
        white-space: normal;
    }

    .spec-row[b-mkz7nc7p1i] {
        flex-direction: column;
        gap: 4px;
    }

    .spec-name[b-mkz7nc7p1i] {
        min-width: unset;
    }
}

/* Color variants images override (for image-style variants from agrupacion) */
.variant-color img[b-mkz7nc7p1i],
.variant-text img[b-mkz7nc7p1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Row — reset bootstrap stray */
.row[b-mkz7nc7p1i] {
    align-items: flex-start;
}

.col-md-6[b-mkz7nc7p1i] {
    padding: 0;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================= */
/* VARIABLES CSS */
/* ============================================= */
.new-home[b-1x2m0jbkfu] {
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --secundario: #6B989C;
    --terciario: #85957E;
    --alternativo: #FDD623;
    --alternativo-oscuro: #ECC61B;
    --gris-10: #F5F5F5;
    --gris-20: #EEEEEE;
    --gris-30: #E0E0E0;
    --gris-40: #BDBDBD;
    --gris-50: #9E9E9E;
    --gris-60: #757575;
    --oferta-50: #FF5449;
    --oferta-60: #DE3730;
    --dark-green-buttons: #3A4F39;
    --black-fonts-headings: #2D2E2E;
    --primary-10: #EBF6EB;

    /* ============================================= */
    /* SISTEMA RESPONSIVE - Max width layout */
    /* ============================================= */
    --max-layout-width: 1680px;

    /* Paddings laterales - fluido hasta el max */
    --padding-lateral: clamp(16px, 6vw, 115px);

    /* Gaps */
    --gap-sm: clamp(7px, 0.73vw, 14px);
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);

    /* Tamaños de categorías */
    --categoria-height: clamp(85px, 8.7vw, 167px);
    --categoria-img-height: clamp(65px, 6.51vw, 125px);

    /* Tamaños de productos */
    --producto-img-size: clamp(140px, 15.63vw, 300px);
    --producto-card-padding: clamp(10px, 1.04vw, 20px);

    /* Tipografía fluida */
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --font-title-lg: clamp(16px, 1.67vw, 32px);
    --font-title-md: clamp(14px, 1.25vw, 24px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-price: clamp(14px, 1.04vw, 20px);
    --font-badge: clamp(9px, 0.52vw, 10px);

    /* Border radius */
    --radius-card: clamp(7px, 0.73vw, 14px);

    /* Botones */
    --btn-cart-size: clamp(36px, 3.39vw, 65px);
    --btn-icon-size: clamp(16px, 1.25vw, 24px);

    /* Marcas */
    --brand-height: clamp(25px, 2.6vw, 50px);

    /* Línea decorativa */
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);
}

/* ============================================= */
/* ESTILOS GENERALES */
/* ============================================= */
.new-home[b-1x2m0jbkfu] {
    font-family: 'Nunito Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    background-color: var(--blanco);
    overflow-x: hidden;
    /* Previene hueco horizontal en móvil */
}

/* ============================================= */
/* SECCIÓN 1: BANNERS PRINCIPALES (Home Body 1) */
/* ============================================= */
.home-body-1[b-1x2m0jbkfu] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
    background-color: var(--blanco);
    overflow: hidden;
    padding: 0 var(--padding-lateral);
    gap: var(--gap-sm);
}

.banner-gran[b-1x2m0jbkfu] {
    display: flex;
    flex: 1;
    min-width: 0;
    position: relative;
}

.sin-titulo[b-1x2m0jbkfu] {
    position: relative;
    width: 100%;
    aspect-ratio: 838 / 520;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.sin-titulo img[b-1x2m0jbkfu],
.sin-titulo video[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.frame-2[b-1x2m0jbkfu] {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--gap-sm);
    position: relative;
}

.banner-medium[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--gap-sm);
    position: relative;
    flex: 0 0 auto;
}

/* ============================================= */
/* BANNER MEDIUM CON ANIMACIÓN HOVER */
/* ============================================= */
.banner-medium-wrapper[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}

.banner-medium-subtitle[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #141414;
    font-size: var(--font-title-lg);
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.banner-medium-img-container[b-1x2m0jbkfu] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: height 0.3s ease;
}

.renting-sharp-mesa[b-1x2m0jbkfu] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.banner-medium-wrapper:hover .banner-medium-img-container[b-1x2m0jbkfu] {
    height: calc(100% - clamp(30px, 2.86vw, 55px));
}

.banner-medium-wrapper:hover .banner-medium-subtitle[b-1x2m0jbkfu] {
    height: clamp(30px, 2.86vw, 55px);
    opacity: 1;
}

.frame-3[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--gap-sm);
    position: relative;
}

/* ============================================= */
/* BANNER PEQUE CON ANIMACIÓN HOVER */
/* ============================================= */
.banner-peque-wrapper[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}

.banner-peque-subtitle[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #141414;
    font-size: var(--font-title-lg);
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.banner-peque-img-container[b-1x2m0jbkfu] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: height 0.3s ease;
}

.img-2[b-1x2m0jbkfu] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.banner-peque-wrapper:hover .banner-peque-img-container[b-1x2m0jbkfu] {
    height: calc(100% - clamp(30px, 2.86vw, 55px));
}

.banner-peque-wrapper:hover .banner-peque-subtitle[b-1x2m0jbkfu] {
    height: clamp(30px, 2.86vw, 55px);
    opacity: 1;
}

/* ============================================= */
/* SECCIÓN 2: CATEGORÍAS (Home Body 2) */
/* ============================================= */
.home-body-2[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(10px, 1.04vw, 20px) var(--padding-lateral) clamp(14px, 1.46vw, 28px);
    gap: clamp(18px, 1.82vw, 35px);
    width: 100%;
    background-color: var(--blanco);
    position: relative;
}

.home-body-2[b-1x2m0jbkfu]::before {
    content: '';
    position: relative;
    display: block;
    width: var(--line-width);
    height: 1px;
    background-color: #ABABAB;
    border-radius: 0.5px;
    flex-shrink: 0;
}

.frame-4[b-1x2m0jbkfu] {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
    gap: var(--gap-sm);
}

.banner-material-de[b-1x2m0jbkfu],
.banner-categoria[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    height: var(--categoria-height);
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.banner-material-de:hover[b-1x2m0jbkfu],
.banner-categoria:hover[b-1x2m0jbkfu] {
    transform: translateY(-5px);
}

/* ============================================= */
/* CATEGORÍAS CON ANIMACIÓN DE ENTRADA           */
/* Efecto "desenrollar" (unroll blind):          */
/*   1. Imagen enrollada (tira fina arriba)      */
/*   2. Se desenrolla/estira hacia abajo         */
/*   3. Texto aparece suavemente                 */
/* ============================================= */

/* --- Fase 1→2: Desenrollar — movimiento continuo y fluido --- */
@keyframes catUnroll-b-1x2m0jbkfu {
    0% {
        opacity: 0;
        clip-path: inset(0 0 92% 0 round var(--radius-card));
        transform: scaleY(0.08);
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0% 0 round var(--radius-card));
        transform: scaleY(1);
    }
}

/* --- Fase 3: Texto aparece suavemente desde abajo --- */
@keyframes catTextReveal-b-1x2m0jbkfu {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Wrapper --- */
.banner-categoria-wrapper[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    align-items: center;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* --- Imagen --- */
.banner-categoria-img-container[b-1x2m0jbkfu] {
    position: relative;
    width: 100%;
    height: var(--categoria-img-height);
    border-radius: var(--radius-card);
    overflow: hidden;
    transform-origin: top center;
}

.img-3[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* --- Texto --- */
.text-wrapper-2[b-1x2m0jbkfu] {
    position: relative;
    margin-top: clamp(5px, 0.52vw, 10px);
    width: 100%;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--black-fonts-headings);
    font-size: var(--font-title-md);
    letter-spacing: 0;
    line-height: 1.33;
    text-align: left;
}

/* --- Animaciones solo en render interactivo --- */
.home-animated .banner-categoria-img-container[b-1x2m0jbkfu] {
    will-change: transform, clip-path, opacity;
    animation: catUnroll-b-1x2m0jbkfu 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-animated .text-wrapper-2[b-1x2m0jbkfu] {
    will-change: transform, opacity;
    animation: catTextReveal-b-1x2m0jbkfu 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Stagger en cascada (150ms entre cards) ---
   Imagen se desenrolla ~1s, texto aparece justo al final --- */
.home-animated .banner-categoria-wrapper:nth-child(1) .banner-categoria-img-container[b-1x2m0jbkfu] { animation-delay: 0.05s; }
.home-animated .banner-categoria-wrapper:nth-child(1) .text-wrapper-2[b-1x2m0jbkfu]              { animation-delay: 0.85s; }

.home-animated .banner-categoria-wrapper:nth-child(2) .banner-categoria-img-container[b-1x2m0jbkfu] { animation-delay: 0.20s; }
.home-animated .banner-categoria-wrapper:nth-child(2) .text-wrapper-2[b-1x2m0jbkfu]              { animation-delay: 1.00s; }

.home-animated .banner-categoria-wrapper:nth-child(3) .banner-categoria-img-container[b-1x2m0jbkfu] { animation-delay: 0.35s; }
.home-animated .banner-categoria-wrapper:nth-child(3) .text-wrapper-2[b-1x2m0jbkfu]              { animation-delay: 1.15s; }

.home-animated .banner-categoria-wrapper:nth-child(4) .banner-categoria-img-container[b-1x2m0jbkfu] { animation-delay: 0.50s; }
.home-animated .banner-categoria-wrapper:nth-child(4) .text-wrapper-2[b-1x2m0jbkfu]              { animation-delay: 1.30s; }



/* ============================================= */
/* SECCIÓN 3: PRODUCTOS DESTACADOS (Home Body 3) */
/* ============================================= */
.home-body-3[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    padding: clamp(30px, 3.13vw, 60px) var(--padding-lateral) clamp(40px, 4.17vw, 80px);
    position: relative;
    width: 100%;
    background-color: var(--blanco);
}

.frame-5[b-1x2m0jbkfu] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.text-wrapper-3[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title-xl);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.vector-3[b-1x2m0jbkfu] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #ABABAB;
    border-radius: 0.5px;
}

/* Slider productos */
.frame-6[b-1x2m0jbkfu] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    width: calc(100% + var(--padding-lateral) * 2);
}

.carousel-btn[b-1x2m0jbkfu] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.carousel-btn:hover[b-1x2m0jbkfu] {
    opacity: 0.6;
}

.carousel-btn svg[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
}

.frame-7[b-1x2m0jbkfu] {
    flex: 1;
    overflow: hidden;
}

.carousel-container[b-1x2m0jbkfu] {
    overflow: hidden;
    width: 100%;
}

.carousel-track[b-1x2m0jbkfu] {
    display: flex;
    gap: var(--gap-md);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track[b-1x2m0jbkfu]::-webkit-scrollbar {
    display: none;
}

/* ============================================= */
/* TARJETAS DE PRODUCTO */
/* ============================================= */
.card-producto[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    padding: 0 0 clamp(5px, 0.52vw, 10px) var(--producto-card-padding);
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.card-producto[b-1x2m0jbkfu]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gris-30);
    transition: background-color 0.35s ease, width 0.35s ease;
}

.card-producto:first-child[b-1x2m0jbkfu]::before {
    display: block;
}

.card-producto:hover[b-1x2m0jbkfu]::before {
    background-color: var(--primario);
    width: clamp(2px, 0.156vw, 3px);
}

.card-producto:first-child[b-1x2m0jbkfu] {
    padding-left: var(--producto-card-padding);
}

.card-producto:hover[b-1x2m0jbkfu] {
    transform: translateY(-2px);
}

.frame-wrapper[b-1x2m0jbkfu] {
    width: var(--producto-img-size);
    height: var(--producto-img-size);
    border-radius: var(--radius-card);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-wrapper[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-card);
    position: relative;
}

.frame-8[b-1x2m0jbkfu] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    left: clamp(8px, 1.04vw, 20px);
}

/* Badges/Etiquetas */
.grupo[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: relative;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.grupo-oferta[b-1x2m0jbkfu] {
    background-color: var(--oferta-50);
}

.grupo-eco[b-1x2m0jbkfu] {
    background-color: var(--primario);
}

.badge-text[b-1x2m0jbkfu] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-badge);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: var(--blanco);
    white-space: nowrap;
}

.grupo-stock[b-1x2m0jbkfu] {
    background-color: var(--primary-10);
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    right: clamp(8px, 1.04vw, 20px);
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    justify-content: flex-end;
}

.stock-dot[b-1x2m0jbkfu] {
    width: clamp(6px, 0.47vw, 9px);
    height: clamp(6px, 0.47vw, 9px);
    background-color: var(--primario);
    border-radius: 50%;
}

.stock-text[b-1x2m0jbkfu] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-badge);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: #000000;
}

.pack-info-text[b-1x2m0jbkfu] {
    display: flex;
    width: calc(var(--producto-img-size) - clamp(10px, 1.04vw, 20px) * 2);
    margin: 0 auto;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(8px, 0.78vw, 15px);
    flex-shrink: 0;
}

.info-producto[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(3px, 0.31vw, 6px);
    flex: 1;
    min-width: 0;
    max-width: calc(100% - var(--btn-cart-size) - clamp(8px, 0.78vw, 15px));
}

.redondas[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.21vw, 4px);
    position: relative;
    flex: 0 0 auto;
}

.redonda[b-1x2m0jbkfu] {
    width: clamp(14px, 1.2vw, 23px);
    height: clamp(14px, 1.2vw, 23px);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
}

.redonda:hover[b-1x2m0jbkfu] {
    transform: scale(1.1);
}

.redonda-negra[b-1x2m0jbkfu] {
    background-color: #010101;
    border: 1px dashed #000000;
}

.redonda-blanca[b-1x2m0jbkfu] {
    background-color: #ffffff;
    border: 1px solid var(--gris-60);
}

.redonda-amarilla[b-1x2m0jbkfu] {
    background-color: #ffd600;
}

.redonda-azul[b-1x2m0jbkfu] {
    background-color: #3a37bd;
}

.colors-more[b-1x2m0jbkfu] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: clamp(10px, 0.73vw, 14px);
    text-align: center;
    letter-spacing: 0px;
    line-height: normal;
}

.text-wrapper-5[b-1x2m0jbkfu] {
    display: block;
    width: clamp(80px, 9vw, 170px);
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #141718;
    font-size: var(--font-body);
    letter-spacing: 0px;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-wrapper-5 span[b-1x2m0jbkfu] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-producto:hover .text-wrapper-5 span[b-1x2m0jbkfu] {
    display: inline-block;
    text-overflow: clip;
    animation: marquee-scroll-b-1x2m0jbkfu 5s linear infinite;
}

@keyframes marquee-scroll-b-1x2m0jbkfu {

    0%,
    10% {
        transform: translateX(0);
    }

    90%,
    100% {
        transform: translateX(calc(-100% + clamp(80px, 8vw, 150px)));
    }
}

/* Precios */
.price[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: flex-end;
    gap: clamp(6px, 0.63vw, 12px);
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-6[b-1x2m0jbkfu] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--oferta-60);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-7[b-1x2m0jbkfu] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--gris-50);
    font-size: clamp(10px, 0.73vw, 14px);
    letter-spacing: 0;
    line-height: normal;
    text-decoration: line-through;
}

.text-wrapper-8[b-1x2m0jbkfu] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

/* Botón añadir al carrito */
.boton[b-1x2m0jbkfu] {
    width: var(--btn-cart-size);
    height: var(--btn-cart-size);
    position: relative;
    background-color: var(--blanco);
    border-radius: clamp(4px, 0.31vw, 6px);
    border: 1px solid var(--primario);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.boton:hover[b-1x2m0jbkfu] {
    background-color: var(--primario);
}

.boton:hover .iconos-2[b-1x2m0jbkfu] {
    color: var(--blanco);
}

.iconos-2[b-1x2m0jbkfu] {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    color: var(--primario);
    transition: color 0.3s ease;
    transform: translateY(1px);
}

@keyframes addedToCart-b-1x2m0jbkfu {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.boton.added[b-1x2m0jbkfu] {
    animation: addedToCart-b-1x2m0jbkfu 0.5s ease;
    background-color: var(--primario);
}

.boton.added .iconos-2[b-1x2m0jbkfu] {
    color: var(--blanco);
}

/* ============================================= */
/* SECCIÓN 4: MEJORES MARCAS (Home Body 4) */
/* ============================================= */
.home-body-4[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    padding: 0 var(--padding-lateral) 0;
    position: relative;
    width: 100%;
    background-color: var(--blanco);
}

.home-body-4 .frame-5[b-1x2m0jbkfu] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.home-body-4 .frame-5 .text-wrapper-3[b-1x2m0jbkfu] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title-xl);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.home-body-4 .frame-5 .vector-3[b-1x2m0jbkfu] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #ABABAB;
    border-radius: 0.5px;
}

.brands-slider-wrapper[b-1x2m0jbkfu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    width: calc(100% + var(--padding-lateral) * 2);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    align-self: center;
}

.brands-slider-container[b-1x2m0jbkfu] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.brands-slider-container[b-1x2m0jbkfu]::before,
.brands-slider-container[b-1x2m0jbkfu]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(50px, 5vw, 100px);
    z-index: 2;
    pointer-events: none;
}

.brands-slider-container[b-1x2m0jbkfu]::before {
    left: 0;
    background: linear-gradient(to right, var(--blanco) 0%, transparent 100%);
}

.brands-slider-container[b-1x2m0jbkfu]::after {
    right: 0;
    background: linear-gradient(to left, var(--blanco) 0%, transparent 100%);
}

.brands-nav-btn[b-1x2m0jbkfu] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.brands-nav-btn:hover[b-1x2m0jbkfu] {
    opacity: 0.6;
}

.brands-nav-btn svg[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
}

.brands-track-infinite[b-1x2m0jbkfu] {
    display: flex;
    width: max-content;
    gap: var(--gap-md);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.brand-item[b-1x2m0jbkfu] {
    flex-shrink: 0;
    height: var(--brand-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.brand-item:hover[b-1x2m0jbkfu] {
    transform: scale(1.1);
}

.brand-item img[b-1x2m0jbkfu] {
    max-height: var(--brand-height);
    width: auto;
    object-fit: contain;
}

/* ============================================= */
/* SECCIÓN 5: SERVICIOS (Home Body 5) */
/* ============================================= */
.home-body-5[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(14px, 1.46vw, 28px) var(--padding-lateral) clamp(37px, 3.85vw, 74px);
    flex: 0 0 auto;
    position: relative;
    width: 100%;
    background-color: var(--blanco);
}

/* ============================================= */
/* BANNER SERVICIO CON ANIMACIÓN HOVER */
/* ============================================= */
.banner-servicio-wrapper[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    aspect-ratio: 412 / 560;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 0.52vw, 10px);
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.banner-servicio-subtitle[b-1x2m0jbkfu] {
    width: 100%;
    height: 0;
    overflow: hidden;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #141414;
    font-size: var(--font-title-lg);
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.banner-servicio-img-container[b-1x2m0jbkfu] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: height 0.3s ease;
}

.banner-servicio-img[b-1x2m0jbkfu] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.banner-servicio-wrapper:hover .banner-servicio-img-container[b-1x2m0jbkfu] {
    height: calc(100% - clamp(30px, 2.86vw, 55px));
}

.banner-servicio-wrapper:hover .banner-servicio-subtitle[b-1x2m0jbkfu] {
    height: clamp(30px, 2.86vw, 55px);
    opacity: 1;
}

.banner-servicio[b-1x2m0jbkfu] {
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: var(--radius-card);
    cursor: pointer;
    overflow: hidden;
}

.banner-servicio img[b-1x2m0jbkfu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* ============================================= */
/* SECCIÓN 6: PRE-FOOTER (Links Categorías) */
/* ============================================= */
.pre-footer[b-1x2m0jbkfu] {
    display: flex;
    width: 100%;
    padding: clamp(30px, 3.125vw, 60px) var(--padding-lateral);
    align-items: center;
    justify-content: space-between;
    background-color: var(--blanco);
    gap: 0;
    --prefooter-col-padding: clamp(20px, 2.1vw, 40px);
}

.pre-footer-column[b-1x2m0jbkfu] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 24px);
    flex: 1;
    padding: 0 var(--prefooter-col-padding);
    justify-content: center;
    align-items: flex-start;
}

.pre-footer-separator[b-1x2m0jbkfu] {
    width: 1px;
    height: clamp(50px, 4.375vw, 84px);
    align-self: center;
    background-image: linear-gradient(to bottom, var(--gris-40) 50%, transparent 50%);
    background-size: 1px clamp(4px, 0.3125vw, 6px);
    background-repeat: repeat-y;
    flex-shrink: 0;
    position: relative;
}

.category-link[b-1x2m0jbkfu] {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 0.625vw, 12px);
    text-decoration: none;
    color: #9E9E9E;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 400;
    line-height: clamp(18px, 1.458vw, 28px);
    position: relative;
    padding-left: 0;
}

.link-indicator[b-1x2m0jbkfu] {
    position: absolute;
    left: calc(var(--prefooter-col-padding) * -1 - 1.5px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(2px, 0.156vw, 3px);
    height: clamp(25px, 2.1875vw, 42px);
    background-color: transparent;
    border-radius: 2px;
    transition: background-color 0.35s ease;
}

.link-icon[b-1x2m0jbkfu] {
    width: clamp(14px, 1.042vw, 20px);
    height: clamp(14px, 1.042vw, 20px);
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.link-text[b-1x2m0jbkfu] {
    white-space: nowrap;
    transition: transform 0.35s ease, color 0.35s ease;
}

.category-link:hover[b-1x2m0jbkfu] {
    color: #141718;
}

.category-link:hover .link-indicator[b-1x2m0jbkfu] {
    background-color: var(--primario);
}

.category-link:hover .link-icon[b-1x2m0jbkfu] {
    opacity: 1;
}

.category-link:hover .link-text[b-1x2m0jbkfu] {
    color: #141718;
}

/* ============================================= */
/* NO PRODUCTS MESSAGE */
/* ============================================= */
.no-products-msg[b-1x2m0jbkfu] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--font-body);
    color: var(--gris-50);
    text-align: center;
    padding: clamp(20px, 2.08vw, 40px);
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* Layout Figma: Video grande izq + columna 3 banners derecha */
/* ============================================= */
/* ============================================= */
@media (max-width: 1024px) {
    .new-home[b-1x2m0jbkfu] {
        --padding-lateral: 30px;
        --gap-sm: 7px;
        --gap-md: 14px;
        --gap-lg: 30px;
        --categoria-height: 140px;
        --categoria-img-height: 100px;
        --producto-img-size: 160px;
        --producto-card-padding: 14px;
        --font-title-xl: 22px;
        --font-title-lg: 16px;
        --font-title-md: 15px;
        --font-body: 13px;
        --font-price: 15px;
        --font-badge: 9px;
        --radius-card: 14px;
        --btn-cart-size: 44px;
        --btn-icon-size: 20px;
        --brand-height: 30px;
        --line-width: 200px;
        --line-height-section: 40px;
    }

    /* ========== REORDENAR SECCIONES ========== */
    /* En tablet: Slider productos (order:2) ANTES de Categorías (order:3) */
    .new-home .home-body-1[b-1x2m0jbkfu] {
        order: 1 !important;
    }

    .new-home .home-body-3[b-1x2m0jbkfu] {
        order: 2 !important;
    }

    /* Slider productos primero */
    .new-home .home-body-2[b-1x2m0jbkfu] {
        order: 3 !important;
    }

    /* Categorías después */
    .new-home .home-body-4[b-1x2m0jbkfu] {
        order: 4 !important;
    }

    .new-home .home-body-5[b-1x2m0jbkfu] {
        order: 5 !important;
    }

    .new-home .pre-footer[b-1x2m0jbkfu] {
        order: 6 !important;
    }

    /* ========== BANNERS TABLET ========== */
    /* Layout Figma: Video grande izq (flex-grow) + columna 163px der con 3 banners */
    .home-body-1[b-1x2m0jbkfu] {
        flex-direction: row;
        gap: 20px;
        padding: 0 var(--padding-lateral);
        box-sizing: border-box;
    }

    .banner-gran[b-1x2m0jbkfu] {
        flex: 1;
        min-width: 0;
    }

    .sin-titulo[b-1x2m0jbkfu] {
        aspect-ratio: 591 / 453;
        width: 100%;
        height: auto;
    }

    /* Columna derecha: ancho fijo 163px con 3 banners verticales */
    .frame-2[b-1x2m0jbkfu] {
        flex: 0 0 163px;
        width: 163px;
        flex-direction: column;
        gap: 7px;
    }

    /* Banner medium - altura fija 223px, ancho 100% de la columna */
    .banner-medium-wrapper[b-1x2m0jbkfu] {
        flex: 0 0 223px;
        height: 223px;
        width: 100%;
    }

    .banner-medium-img-container[b-1x2m0jbkfu] {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .renting-sharp-mesa[b-1x2m0jbkfu] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* frame-3: columna con los 2 banners pequeños */
    .frame-3[b-1x2m0jbkfu] {
        flex: 1;
        flex-direction: column;
        gap: 7px;
        width: 100%;
    }

    /* Banners pequeños - aspect ratio 412/273, full width de la columna */
    .banner-peque-wrapper[b-1x2m0jbkfu] {
        flex: 1;
        width: 100%;
        aspect-ratio: 412 / 273;
        height: auto;
    }

    .banner-peque-img-container[b-1x2m0jbkfu] {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .img-2[b-1x2m0jbkfu] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Desactivar hover animations en tablet */
    .banner-medium-wrapper:hover .banner-medium-img-container[b-1x2m0jbkfu],
    .banner-peque-wrapper:hover .banner-peque-img-container[b-1x2m0jbkfu] {
        height: 100%;
    }

    .banner-medium-wrapper:hover .banner-medium-subtitle[b-1x2m0jbkfu],
    .banner-peque-wrapper:hover .banner-peque-subtitle[b-1x2m0jbkfu] {
        height: 0;
        opacity: 0;
    }

    /* ========== CATEGORÍAS TABLET ========== */
    .home-body-2[b-1x2m0jbkfu] {
        gap: 20px;
    }

    .frame-4[b-1x2m0jbkfu] {
        gap: var(--gap-md);
    }



    /* ========== SLIDER PRODUCTOS TABLET ========== */
    .home-body-3[b-1x2m0jbkfu] {
        padding: 30px var(--padding-lateral) 40px;
    }

    .frame-6[b-1x2m0jbkfu] {
        margin-left: calc(var(--padding-lateral) * -1);
        margin-right: calc(var(--padding-lateral) * -1);
        padding: 10px var(--padding-lateral);
        width: calc(100% + var(--padding-lateral) * 2);
    }

    .carousel-btn[b-1x2m0jbkfu] {
        display: none;
    }

    .carousel-track[b-1x2m0jbkfu] {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left: 0;
    }

    .card-producto[b-1x2m0jbkfu] {
        scroll-snap-align: start;
    }

    .card-producto[b-1x2m0jbkfu]::before {
        display: none;
    }

    .card-producto:hover[b-1x2m0jbkfu]::before {
        display: none;
    }

    .card-producto:first-child[b-1x2m0jbkfu] {
        padding-left: 0;
    }

    .card-producto:hover[b-1x2m0jbkfu] {
        transform: none;
    }

    /* Ocultar botón carrito en tablet */
    .boton[b-1x2m0jbkfu] {
        display: none;
    }

    .pack-info-text[b-1x2m0jbkfu] {
        width: var(--producto-img-size);
    }

    .info-producto[b-1x2m0jbkfu] {
        max-width: 100%;
    }

    .text-wrapper-5[b-1x2m0jbkfu] {
        width: 100%;
    }

    .card-producto:hover .text-wrapper-5 span[b-1x2m0jbkfu] {
        animation: none;
    }

    /* ========== MARCAS TABLET ========== */
    .brands-slider-wrapper[b-1x2m0jbkfu] {
        padding: 10px var(--padding-lateral);
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .brands-nav-btn[b-1x2m0jbkfu] {
        display: none;
    }

    .brands-slider-container[b-1x2m0jbkfu]::before,
    .brands-slider-container[b-1x2m0jbkfu]::after {
        width: 30px;
    }

    .brands-track-infinite[b-1x2m0jbkfu] {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .brands-track-infinite[b-1x2m0jbkfu]::-webkit-scrollbar {
        display: none;
    }

    .brand-item[b-1x2m0jbkfu] {
        scroll-snap-align: start;
    }

    .brand-item:hover[b-1x2m0jbkfu] {
        transform: none;
    }

    /* ========== SERVICIOS TABLET ========== */
    .home-body-5 .frame-4[b-1x2m0jbkfu] {
        gap: var(--gap-md);
    }

    .banner-servicio-wrapper[b-1x2m0jbkfu] {
        aspect-ratio: 3 / 4;
    }

    .banner-servicio-wrapper:hover .banner-servicio-img-container[b-1x2m0jbkfu] {
        height: 100%;
    }

    .banner-servicio-wrapper:hover .banner-servicio-subtitle[b-1x2m0jbkfu] {
        height: 0;
        opacity: 0;
    }

    /* ========== PRE-FOOTER TABLET - Siempre horizontal ========== */
    .pre-footer[b-1x2m0jbkfu] {
        flex-wrap: nowrap;
        gap: 0;
        padding: 30px var(--padding-lateral);
        --prefooter-col-padding: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pre-footer[b-1x2m0jbkfu]::-webkit-scrollbar {
        display: none;
    }

    .pre-footer-column[b-1x2m0jbkfu] {
        flex: 1 0 auto;
        min-width: 100px;
        padding: 0 var(--prefooter-col-padding);
        gap: 8px;
    }

    .pre-footer-separator[b-1x2m0jbkfu] {
        display: block;
        flex-shrink: 0;
        height: 50px;
    }

    .link-indicator[b-1x2m0jbkfu] {
        display: none;
    }

    .category-link[b-1x2m0jbkfu] {
        font-size: 11px;
        gap: 4px;
    }

    .link-icon[b-1x2m0jbkfu] {
        width: 14px;
        height: 14px;
    }

    .link-text[b-1x2m0jbkfu] {
        white-space: nowrap;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* Layout Figma: Video arriba + fila (1 grande + columna 2 pequeños) */
/* ============================================= */
/* ============================================= */
@media (max-width: 768px) {
    .new-home[b-1x2m0jbkfu] {
        --padding-lateral: 16px;
        --gap-sm: 7px;
        --gap-md: 12px;
        --gap-lg: 24px;
        --categoria-height: 130px;
        --categoria-img-height: 90px;
        --producto-img-size: 140px;
        --producto-card-padding: 12px;
        --font-title-xl: 20px;
        --font-title-lg: 15px;
        --font-title-md: 14px;
        --font-body: 12px;
        --font-price: 14px;
        --font-badge: 8px;
        --radius-card: 14px;
        --btn-cart-size: 40px;
        --btn-icon-size: 18px;
        --brand-height: 24px;
        --line-width: 160px;
        --line-height-section: 35px;
        overflow-x: hidden;
    }

    /* ========== REORDENAR SECCIONES MÓVIL ========== */
    .new-home .home-body-1[b-1x2m0jbkfu] {
        order: 1 !important;
    }

    .new-home .home-body-3[b-1x2m0jbkfu] {
        order: 2 !important;
    }

    /* Slider productos segundo */
    .new-home .home-body-2[b-1x2m0jbkfu] {
        order: 3 !important;
    }

    /* Categorías tercero */
    .new-home .home-body-4[b-1x2m0jbkfu] {
        order: 4 !important;
    }

    /* Marcas cuarto */
    .new-home .home-body-5[b-1x2m0jbkfu] {
        order: 5 !important;
    }

    .new-home .pre-footer[b-1x2m0jbkfu] {
        order: 6 !important;
    }

    /* ========== BANNERS MÓVIL ========== */
    /* Layout: Video arriba (full width) + fila debajo (EPIs izq + columna 2 pequeños der) */
    .home-body-1[b-1x2m0jbkfu] {
        flex-direction: column;
        gap: 10px;
        padding: 0 var(--padding-lateral);
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .banner-gran[b-1x2m0jbkfu] {
        flex: none;
        width: 100%;
    }

    .sin-titulo[b-1x2m0jbkfu] {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
    }

    /* Fila con banner EPIs izq y columna 2 pequeños der */
    .frame-2[b-1x2m0jbkfu] {
        flex: none;
        width: 100%;
        flex-direction: row;
        gap: 10px;
        display: flex;
    }

    /* Banner EPIs - ocupa 50% del ancho */
    .banner-medium-wrapper[b-1x2m0jbkfu] {
        flex: 1;
        min-width: 0;
        height: auto;
        aspect-ratio: 1 / 1.2;
    }

    .banner-medium-img-container[b-1x2m0jbkfu] {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .renting-sharp-mesa[b-1x2m0jbkfu] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        background-color: #f5f5f5;
    }

    /* Columna con 2 banners pequeños - 50% del ancho */
    .frame-3[b-1x2m0jbkfu] {
        flex: 1;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        display: flex;
    }

    /* Banners pequeños - se reparten el espacio vertical equitativamente */
    .banner-peque-wrapper[b-1x2m0jbkfu] {
        flex: 1;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .banner-peque-img-container[b-1x2m0jbkfu] {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .img-2[b-1x2m0jbkfu] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        background-color: #f5f5f5;
    }

    /* ========== CATEGORÍAS MÓVIL - Grid 2x2 ========== */
    .home-body-2[b-1x2m0jbkfu] {
        gap: 16px;
    }

    .frame-4[b-1x2m0jbkfu] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-md);
    }

    .banner-categoria-wrapper[b-1x2m0jbkfu] {
        flex: none;
        width: 100%;
    }

    /* ========== SLIDER PRODUCTOS MÓVIL ========== */
    .home-body-3[b-1x2m0jbkfu] {
        padding: 24px var(--padding-lateral) 30px;
    }

    .frame-6[b-1x2m0jbkfu] {
        padding: 8px 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .carousel-track[b-1x2m0jbkfu] {
        padding: 0 var(--padding-lateral);
    }

    .card-producto[b-1x2m0jbkfu] {
        padding-left: var(--producto-card-padding);
    }

    /* ========== SERVICIOS MÓVIL - Grid 2x2 ========== */
    .home-body-5 .frame-4[b-1x2m0jbkfu] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-md);
    }

    .banner-servicio-wrapper[b-1x2m0jbkfu] {
        flex: none;
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    /* ========== PRE-FOOTER MÓVIL - Horizontal scroll ========== */
    .pre-footer[b-1x2m0jbkfu] {
        flex-wrap: nowrap;
        padding: 24px var(--padding-lateral);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        --prefooter-col-padding: 8px;
        max-width: 100%;
    }

    .pre-footer[b-1x2m0jbkfu]::-webkit-scrollbar {
        display: none;
    }

    .pre-footer-column[b-1x2m0jbkfu] {
        flex: 0 0 auto;
        min-width: 90px;
        padding: 0 var(--prefooter-col-padding);
        gap: 6px;
    }

    .pre-footer-separator[b-1x2m0jbkfu] {
        height: 40px;
        flex-shrink: 0;
    }

    .category-link[b-1x2m0jbkfu] {
        font-size: 10px;
        gap: 3px;
    }

    .link-icon[b-1x2m0jbkfu] {
        width: 12px;
        height: 12px;
    }
}

/* ============================================= */
/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
/* ============================================= */
@media (max-width: 480px) {
    .new-home[b-1x2m0jbkfu] {
        --padding-lateral: 12px;
        --producto-img-size: 120px;
        --font-title-xl: 18px;
        --font-title-md: 13px;
        --font-body: 11px;
        --font-price: 13px;
        overflow-x: hidden;
    }

    .sin-titulo[b-1x2m0jbkfu] {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .banner-medium-wrapper[b-1x2m0jbkfu] {
        aspect-ratio: 1 / 1.2;
        height: auto;
    }

    /* Frame-6 sin márgenes negativos en móvil pequeño */
    .frame-6[b-1x2m0jbkfu] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 8px 0;
    }

    .brands-slider-wrapper[b-1x2m0jbkfu] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }

    /* Pre-footer más compacto pero siempre horizontal */
    .pre-footer[b-1x2m0jbkfu] {
        padding: 20px var(--padding-lateral);
        --prefooter-col-padding: 6px;
        max-width: 100%;
    }

    .pre-footer-column[b-1x2m0jbkfu] {
        min-width: 75px;
        gap: 4px;
    }

    .pre-footer-separator[b-1x2m0jbkfu] {
        height: 35px;
    }

    .category-link[b-1x2m0jbkfu] {
        font-size: 9px;
    }

    .link-icon[b-1x2m0jbkfu] {
        width: 10px;
        height: 10px;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* ============================================================
   404 Error Page — Scoped Styles
   Matches Figma design: node 135:1216
   ============================================================ */

.error404-page[b-lpwi6yjfzf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white-background, #ffffff);
    padding: 0px 20px 120px;
    min-height: 60vh;
    overflow: hidden;
}

/* ── Broken pencil image ── */
.error404-image-wrapper[b-lpwi6yjfzf] {
    width: 100%;
    max-width: 743px;
    display: flex;
    justify-content: center;
}

.error404-image[b-lpwi6yjfzf] {
    width: 100%;
    max-width: 743px;
    height: auto;
    max-height: 495px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* ── Content block ── */
.error404-content[b-lpwi6yjfzf] {
    width: 100%;
    max-width: 692px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ── Title row: "404 | ¡Ups! Se nos ha roto" ── */
.error404-title-row[b-lpwi6yjfzf] {
    display: flex;
    align-items: center;
    gap: 50px;
}

.error404-code[b-lpwi6yjfzf] {
    font-family: var(--display-medium-font-family, "Nunito Sans", Helvetica, sans-serif);
    font-weight: 700;
    font-size: 48px;
    line-height: normal;
    color: var(--black-fonts-headings, #323332);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.error404-divider[b-lpwi6yjfzf] {
    width: 2px;
    height: 63px;
    background-color: var(--black-fonts-headings, #323332);
    flex-shrink: 0;
}

.error404-title[b-lpwi6yjfzf] {
    font-family: var(--display-large-font-family, "Nunito Sans", Helvetica, sans-serif);
    font-weight: var(--display-large-font-weight, 400);
    font-size: var(--display-large-font-size, 57px);
    line-height: var(--display-large-line-height, 64px);
    letter-spacing: var(--display-large-letter-spacing, -0.25px);
    margin: 0;
    white-space: nowrap;
}

.error404-ups[b-lpwi6yjfzf] {
    color: var(--primario, #3caa36);
}

.error404-broken[b-lpwi6yjfzf] {
    color: var(--black-fonts-headings, #323332);
}

/* ── Description block ── */
.error404-description-block[b-lpwi6yjfzf] {
    position: relative;
    width: 100%;
}

.error404-description[b-lpwi6yjfzf] {
    font-family: var(--l-body-0-font-family, "Nunito Sans", Helvetica, sans-serif);
    font-weight: var(--l-body-0-font-weight, 400);
    font-size: 18px;
    line-height: 1.6;
    color: var(--black-fonts-headings, #2d2e2e);
    margin: 0 0 12px 0;
    max-width: 520px;
}

.error404-back-link[b-lpwi6yjfzf] {
    display: block;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    color: var(--black-fonts-headings, #323332);
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.error404-back-link:hover[b-lpwi6yjfzf] {
    color: var(--primario, #3caa36);
    opacity: 0.85;
}

/* ── Responsive ── */

/* Tablets */
@media (max-width: 992px) {
    .error404-page[b-lpwi6yjfzf] {
        padding: 60px 30px 80px;
    }

    .error404-title-row[b-lpwi6yjfzf] {
        gap: 30px;
    }

    .error404-title[b-lpwi6yjfzf] {
        font-size: 42px;
        line-height: 50px;
    }

    .error404-code[b-lpwi6yjfzf] {
        font-size: 40px;
    }

    .error404-divider[b-lpwi6yjfzf] {
        height: 50px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .error404-page[b-lpwi6yjfzf] {
        padding: 40px 20px 60px;
        min-height: 50vh;
    }

    .error404-image-wrapper[b-lpwi6yjfzf] {
        margin-bottom: 24px;
    }

    .error404-title-row[b-lpwi6yjfzf] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .error404-divider[b-lpwi6yjfzf] {
        width: 60px;
        height: 2px;
    }

    .error404-code[b-lpwi6yjfzf] {
        font-size: 36px;
    }

    .error404-title[b-lpwi6yjfzf] {
        font-size: 28px;
        line-height: 36px;
        white-space: normal;
    }

    .error404-content[b-lpwi6yjfzf] {
        gap: 20px;
    }

    .error404-description[b-lpwi6yjfzf] {
        font-size: 15px;
    }
}
/* /Components/Pages/Productos.razor.rz.scp.css */
/* ============================================= */
/* CONTENEDOR PRINCIPAL Y TOOLBAR                */
/* Figma node: 3321:33013 "Texto superior"       */
/* ============================================= */
/* Sistema responsive (como Home.razor):          */
/*   - clamp() para fluid scaling                */
/*   - Breakpoints: 1024px / 768px / 480px       */
/* ============================================= */

.productos-page-container[b-6f5p5t4qkt] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================================
   TOOLBAR WRAPPER (sticky + background)
   ============================================= */
.productos-toolbar[b-6f5p5t4qkt] {
    width: 100%;
    background: #FFFFFF;
    position: sticky;
    top: var(--header-height, 0px) !important;
    z-index: 999;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estado scrolled: fondo gris claro */
.productos-toolbar.scrolled[b-6f5p5t4qkt] {
    background: #F5F5F5;
    box-shadow: none;
    margin-bottom: 0;
}

/* =============================================
   INNER CONTAINER
   ============================================= */
.toolbar-inner[b-6f5p5t4qkt] {
    width: 100%;
    padding: clamp(6px, 0.52vw, 10px) clamp(16px, 6vw, 115px);
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.21vw, 4px);
    box-sizing: border-box;
}

.productos-toolbar.scrolled .toolbar-inner[b-6f5p5t4qkt] {
    height: 54px;
    padding: 0 clamp(16px, 6vw, 115px);
    gap: 0;
    justify-content: center;
}

/* =============================================
   ROW 1: TÍTULO DE CATEGORÍA
   ============================================= */
.toolbar-title-row[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

/* 📦 (Colección) El antiguo enlace ".coleccion-ver-todo" junto al título se sustituyó por el
   breadcrumb "PMC / Productos / {colección}": el nivel "Productos" es el enlace al catálogo completo. */

.toolbar-title[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 1.46vw, 28px);
    line-height: clamp(17.1px, 1.15vw, 22px);
    color: #000000;
    margin: 0;
    padding: 0;
    min-width: 0;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ocultar título en modo scrolled */
.productos-toolbar.scrolled .toolbar-title-row[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   ROW 2: CONTROLES
   ============================================= */
.toolbar-controls-row[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: clamp(36px, 2.29vw, 44px);
}

/* --- LADO IZQUIERDO --- */
.toolbar-left[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(20px, 1.56vw, 30px);
    min-width: 0;
    flex: 1;
}

/* --- LADO DERECHO --- */
.toolbar-right[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.04vw, 20px);
    flex-shrink: 0;
    margin-left: clamp(12px, 1.04vw, 20px);
}

/* =============================================
   BOTONES DE ACCIÓN (Categorías / Filtros)
   ============================================= */
.toolbar-action-btn[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #121212;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.toolbar-action-btn:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

.toolbar-icon[b-6f5p5t4qkt] {
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
    flex-shrink: 0;
    color: currentColor;
}

/* Scrolled: texto oscuro en botones (fondo claro) */
.productos-toolbar.scrolled .toolbar-action-btn[b-6f5p5t4qkt] {
    color: #212121;
}

/* =============================================
   SEPARADOR VERTICAL
   ============================================= */
.toolbar-separator[b-6f5p5t4qkt] {
    width: 1px;
    height: 19px;
    background: #000;
    flex-shrink: 0;
}

/* Ocultar separadores en modo scrolled */
.productos-toolbar.scrolled .toolbar-separator[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.productos-breadcrumb[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    color: #757575;
}

.productos-breadcrumb a[b-6f5p5t4qkt] {
    color: #757575;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 300;
    flex-shrink: 0;
}

.productos-breadcrumb a:hover[b-6f5p5t4qkt] {
    color: #121212;
}

.productos-breadcrumb .separator[b-6f5p5t4qkt] {
    color: #757575;
    /* Corrección óptica: el glifo "/" no está centrado en su caja (su trazo
       diagonal invade más el hueco izquierdo que el derecho), así que con
       márgenes iguales el espacio "fin de palabra → /" se ve mayor que
       "/ → inicio de palabra". Se reduce el izquierdo para igualarlos a la vista. */
    margin: 0 4px 0 3px;
    font-weight: 300;
    flex-shrink: 0;
    user-select: none;
}

.productos-breadcrumb .active[b-6f5p5t4qkt] {
    color: #121212;
    font-weight: 300;
    flex-shrink: 0;
}

/* Ocultar breadcrumb en scrolled */
.productos-toolbar.scrolled .productos-breadcrumb[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   CONTADOR DE PRODUCTOS
   ============================================= */
.toolbar-product-count[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    color: #757575;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ocultar contador en scrolled */
.productos-toolbar.scrolled .toolbar-product-count[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   LABEL "VISTA"
   ============================================= */
.vista-label[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.5px;
    color: #121212;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ocultar vista en scrolled */
.productos-toolbar.scrolled .vista-label[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   VIEW TOGGLE (selector grid 4 / grid 16)
   Figma node: 3321:33032
   ============================================= */
.view-buttons-container[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    border: 1px solid #E0E0E0;
    border-radius: clamp(6px, 0.42vw, 8px);
    overflow: hidden;
    flex-shrink: 0;
    background: #FFFFFF;
}

.view-btn[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(38px, 2.4vw, 46px);
    height: clamp(34px, 2.08vw, 40px);
    background: #FFFFFF;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #BDBDBD;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

/* Separador entre botones */
.view-btn:first-child[b-6f5p5t4qkt] {
    border-right: 1px solid #E0E0E0;
}

.view-btn:last-child[b-6f5p5t4qkt] {
    border-right: none;
}

.view-btn.active[b-6f5p5t4qkt] {
    background-color: #F5F5F5;
    color: #121212;
}

.view-btn:hover:not(.active)[b-6f5p5t4qkt] {
    background-color: #FAFAFA;
    color: #757575;
}

.view-btn svg[b-6f5p5t4qkt] {
    width: clamp(16px, 1.15vw, 22px);
    height: clamp(16px, 1.15vw, 22px);
}

/* Ocultar toggle en scrolled */
.productos-toolbar.scrolled .view-buttons-container[b-6f5p5t4qkt] {
    display: none;
}

/* =============================================
   BOTÓN SUBIR (modo scrolled)
   ============================================= */
.btn-scroll-top[b-6f5p5t4qkt] {
    display: none;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: #212121;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(13px, 0.83vw, 16px);
    font-weight: 600;
    line-height: clamp(20px, 1.25vw, 24px);
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.productos-toolbar.scrolled .btn-scroll-top[b-6f5p5t4qkt] {
    display: flex;
}

.btn-scroll-top:hover[b-6f5p5t4qkt] {
    opacity: 0.8;
}

.btn-scroll-top img[b-6f5p5t4qkt] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* =============================================
   Eliminado: .productos-count-discrete ya está
   integrado en el toolbar como .toolbar-product-count
   ============================================= */

/* =================================
   ESTADOS DE CARGA Y ERROR
   ================================= */

.productos-loading[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 20px;
}

.loading-spinner[b-6f5p5t4qkt] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4CAF50;
    border-radius: 50%;
    animation: spin-b-6f5p5t4qkt 1s linear infinite;
}

@keyframes spin-b-6f5p5t4qkt {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.productos-loading p[b-6f5p5t4qkt] {
    color: #666;
    font-size: 16px;
    margin: 0;
}

.productos-error[b-6f5p5t4qkt] {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.productos-error h4[b-6f5p5t4qkt] {
    color: #c00;
    margin: 0 0 10px 0;
    font-size: 18px;
}

.productos-error p[b-6f5p5t4qkt] {
    color: #800;
    margin: 0;
}

.no-products-message[b-6f5p5t4qkt] {
    background: #e8f4fd;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.no-products-message p[b-6f5p5t4qkt] {
    color: #0c5460;
    margin: 0;
}

.category-info-message[b-6f5p5t4qkt] {
    background: #e8f4fd;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-info-message i[b-6f5p5t4qkt] {
    color: #0c5460;
    font-size: 18px;
}

.category-info-message span[b-6f5p5t4qkt] {
    color: #0c5460;
    font-size: 14px;
}

/* =================================
   LOAD MORE CONTAINER
   Figma node: 3380-33270
   ================================= */
.load-more-container[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 40px 0 0;
    gap: 10px;
}

/* Figma: pt 30px px 115px, flex-col gap 15px, items center */
.load-more-btn-container[b-6f5p5t4qkt] {
    width: 100%;
    box-sizing: border-box;
    padding: 40px clamp(16px, 6vw, 115px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Figma: horizontal separator line — 704px wide, #212121 (dark), centered */
.load-more-divider[b-6f5p5t4qkt] {
    width: 704px;
    max-width: 100%;
    height: 1px;
    background-color: #212121;
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Figma: "Ver más Productos" button — text + down arrow, no bg, no border */
.load-more-btn[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: transparent;
    border: none;
    padding: 15px 0 0;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    color: #121212;
    letter-spacing: 0;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.load-more-btn:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

/* «Ver productos anteriores» (se ha entrado por ?pagina=N): el mismo botón, encima de la rejilla y con la
   línea debajo. */
.load-more-previous[b-6f5p5t4qkt] {
    padding: 0 clamp(16px, 6vw, 115px) 30px;
}

.load-more-previous .load-more-btn[b-6f5p5t4qkt] {
    padding: 0 0 15px;
    text-decoration: none;
}

/* Hide the secondary count span — Figma design only shows main text + arrow */
.load-more-btn-count[b-6f5p5t4qkt] {
    display: none;
}

.load-more-btn-text[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    color: #121212;
}

/* Down arrow icon in load-more button */
.load-more-btn svg[b-6f5p5t4qkt] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #121212;
}

/* SEO (Creacom L54): "Ver más productos" es ahora un <a href="?pagina=N"> (antes <button>): que se vea igual. */
a.load-more-btn[b-6f5p5t4qkt],
a.load-more-btn:hover[b-6f5p5t4qkt],
a.load-more-btn:visited[b-6f5p5t4qkt] {
    text-decoration: none;
    color: #121212;
}

.load-more-next-link[b-6f5p5t4qkt],
.load-more-next-link:visited[b-6f5p5t4qkt] {
    color: inherit;
    text-decoration: none;
}

/* Paginación numerada bajo el listado (enlaces rastreables a ?pagina=N). Discreta: el usuario normal
   sigue con "Ver más" y el scroll infinito; está sobre todo para Google y para saltar de página. */
.productos-paginacion[b-6f5p5t4qkt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 28px 0 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: #5f6368;
}

.productos-paginacion__numero[b-6f5p5t4qkt],
.productos-paginacion__actual[b-6f5p5t4qkt],
.productos-paginacion__flecha[b-6f5p5t4qkt] {
    min-width: 32px;
    padding: 5px 8px;
    border-radius: 6px;
    text-align: center;
    box-sizing: border-box;
}

.productos-paginacion__numero[b-6f5p5t4qkt],
.productos-paginacion__flecha[b-6f5p5t4qkt] {
    color: #212121;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.productos-paginacion__numero:hover[b-6f5p5t4qkt],
.productos-paginacion__flecha:hover[b-6f5p5t4qkt] {
    background-color: #f1f3f4;
}

.productos-paginacion__actual[b-6f5p5t4qkt] {
    background-color: #212121;
    color: #ffffff;
    font-weight: 600;
}

.productos-paginacion__hueco[b-6f5p5t4qkt] {
    padding: 0 2px;
}


.loading-indicator[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
}

.loading-indicator .spinner[b-6f5p5t4qkt] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3CAA36;
    border-radius: 50%;
    animation: spin-b-6f5p5t4qkt 1s linear infinite;
}

@keyframes spin-b-6f5p5t4qkt {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-indicator p[b-6f5p5t4qkt] {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    text-align: center;
}

/* Elemento sentinel invisible para scroll infinito */
#scroll-sentinel[b-6f5p5t4qkt] {
    height: 1px;
    width: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* =================================
   ESTILOS PARA FILTRO DE CATEGORÍAS SIMPLE
   ================================= */

/* =================================
   GRID DE PRODUCTOS
   Figma: flex, justify-between, px 115px, gap-y 55px
   5 tarjetas × 300px + justify-between distribuye el espacio restante
   ================================= */
.product-grid[b-6f5p5t4qkt] {
    /* Variables de diseño (Figma 1920px).
       Card base 260px → 6 por fila en FHD: floor((1920 - 2*115) / 260) = 6.
       Tokens escalados ~0.87 respecto al 300px original para conservar la proporción. */
    --padding-lateral: 115px;
    --gap-vertical: 48px;
    --producto-img-size: 260px;
    --producto-card-padding: 20px;
    --font-body: 14px;
    --font-price: 17px;
    --font-badge: 9px;
    --radius-card: 14px;
    --btn-cart-size: 56px;
    --btn-icon-size: 21px;
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --oferta-60: #DE3730;
    --primary-10: #EBF6EB;

    /* Grid: auto-fill con ancho de card = --producto-img-size.
       justify-content: space-between → filas completas se distribuyen uniformemente;
       última fila incompleta queda alineada a la izquierda (las celdas vacías no tienen items). */
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--producto-img-size));
    justify-content: space-between;
    align-items: flex-start;
    row-gap: var(--gap-vertical);
    column-gap: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--padding-lateral);
    margin: 0;
}

/* =================================
   IMAGES-ONLY GRID VIEW
   Figma node: 209-26864
   8 tarjetas, 170px imagen, justify-between, px 115px
   Igual estructura que el grid normal pero con 8 columnas de 170px
   ================================= */
.product-grid.images-only-grid[b-6f5p5t4qkt] {
    --producto-img-size: 170px;
    --gap-vertical: 55px;
    /* Volver a flex para el grid de solo imágenes (cards 190px ≠ --producto-img-size 170px) */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 0;
}

/* =================================
   CARDS DE PRODUCTO
   Figma: fixed 300px width, border-l #e0e0e0, pl 20px, pb 10px, gap 8px
   ================================= */
.card-producto[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 10px 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
    flex: 0 0 260px;
    width: 260px;
    box-sizing: border-box;
}

.card-producto[b-6f5p5t4qkt]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gris-30);
    transition: background-color 0.35s ease, width 0.35s ease;
}

.card-producto:hover[b-6f5p5t4qkt]::before {
    background-color: var(--primario);
    width: 2px;
}

.card-producto:hover[b-6f5p5t4qkt] {
    transform: translateY(-5px);
}

/* Vista solo imágenes */
.card-producto.images-only-card[b-6f5p5t4qkt] {
    padding: 0 0 0 20px;
    gap: 0;
    flex: 0 0 190px;
    width: 190px;
}

.card-producto.images-only-card .frame-wrapper[b-6f5p5t4qkt] {
    /* Figma: imagen exactamente 170×170px, border-radius 14px */
    width: 170px;
    height: 170px;
    border-radius: 14px;
}

/* Hide badges in image-only view (Figma shows clean images) */
.card-producto.images-only-card .frame-8[b-6f5p5t4qkt] {
    display: none;
}

.frame-wrapper[b-6f5p5t4qkt] {
    /* Figma: 300px × 300px square image, border-radius 14px */
    width: var(--producto-img-size);
    height: var(--producto-img-size);
    flex-shrink: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-image-wrapper[b-6f5p5t4qkt] {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-card);
    position: relative;
}

/* =================================
   BADGES FIGMA
   ================================= */
.frame-8[b-6f5p5t4qkt] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    left: clamp(8px, 1.04vw, 20px);
}

/* Las badges de producto (descuento, oferta, eco, homologado…) se movieron al componente
   reutilizable Components/Shared/ProductBadge.razor (CSS aislado). Aquí solo queda el badge
   de stock (.grupo-stock), que sigue siendo markup propio de esta página. */

.grupo-stock[b-6f5p5t4qkt] {
    background-color: var(--primary-10);
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    right: clamp(8px, 1.04vw, 20px);
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    justify-content: flex-end;
}

.stock-dot[b-6f5p5t4qkt] {
    width: clamp(6px, 0.47vw, 9px);
    height: clamp(6px, 0.47vw, 9px);
    background-color: var(--primario);
    border-radius: 50%;
}

.stock-text[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-badge);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: #000000;
}

/* =================================
   CONTENIDO DE PRODUCTO
   ================================= */
/* Contenido bajo la imagen (Figma node 5835:38330): columna con gap 8px y px 20px,
   con el MISMO ancho que la imagen para que ambos queden alineados. */
.product-content[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: var(--producto-img-size);
    box-sizing: border-box;
    padding: 0 clamp(8px, 1.04vw, 20px);
    flex-shrink: 0;
}

/* Fila 1 — precio (izq) + swatches (der). Figma node 5851:38816 */
.price-row[b-6f5p5t4qkt] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

/* Fila 2 — título (izq, flexible) + botón carrito (der). Figma node 5851:38824 */
.title-row[b-6f5p5t4qkt] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.04vw, 20px);
    min-width: 0;
    box-sizing: border-box;
}

/* Referencia del producto cuando NO hay variantes de color (Figma node 5867:6065, body/large) */
.product-ref[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: #757575;
    letter-spacing: 0.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.text-wrapper-5[b-6f5p5t4qkt] {
    /* Figma body/medium: 2 líneas máximo con ellipsis, altura reservada para alinear las cards */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1 1 0;
    min-width: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #141718;
    font-size: var(--font-body);
    letter-spacing: 0.25px; /* Figma body/medium */
    line-height: 1.43;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: flex-end;
    gap: clamp(6px, 0.63vw, 12px);
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-6[b-6f5p5t4qkt] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--oferta-60);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-7[b-6f5p5t4qkt] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--gris-50);
    font-size: clamp(10px, 0.73vw, 14px);
    letter-spacing: 0;
    line-height: normal;
    text-decoration: line-through;
}

.text-wrapper-8[b-6f5p5t4qkt] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.boton[b-6f5p5t4qkt] {
    width: var(--btn-cart-size);
    height: var(--btn-cart-size);
    min-width: var(--btn-cart-size);
    min-height: var(--btn-cart-size);
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    border: 1px solid var(--primario);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .boton:hover[b-6f5p5t4qkt] {
        background-color: var(--primario);
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.boton:hover .iconos-2[b-6f5p5t4qkt] {
    color: var(--blanco);
}

.iconos-2[b-6f5p5t4qkt] {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    color: var(--primario);
    transition: color 0.3s ease;
    transform: translateY(1px);
}

@keyframes addedToCart-b-6f5p5t4qkt {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.boton.added[b-6f5p5t4qkt] {
    animation: addedToCart-b-6f5p5t4qkt 0.5s ease;
    background-color: var(--primario);
}

.boton.added .iconos-2[b-6f5p5t4qkt] {
    color: var(--blanco);
}

/* === Botón "Más Información" — Figma node 3086:8274 (Property 1=deliniado)
   Outlined: white bg, border #3CAA36, rounded 6px, px 24px py 10px, h ~53px
   Font: Nunito Sans SemiBold 16px, color #3CAA36, letter-spacing 0.15px === */
.boton-mas-info[b-6f5p5t4qkt] {
    width: 100%;
    height: clamp(36px, 2.76vw, 53px);
    padding: clamp(5px, 0.52vw, 10px) clamp(12px, 1.25vw, 24px);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boton-mas-info span[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.83vw, 16px);
    line-height: 24px;
    color: var(--primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
}

.boton-mas-info:hover[b-6f5p5t4qkt] {
    background-color: var(--primary-10);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.2);
}

/* === Botón "Consultar precio" — Same outlined style
   For SubFamilia con PrecioNoVisibleSinLogin y usuario no logueado === */
.boton-consultar[b-6f5p5t4qkt] {
    width: 100%;
    height: clamp(36px, 2.76vw, 53px);
    padding: clamp(5px, 0.52vw, 10px) clamp(12px, 1.25vw, 24px);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boton-consultar span[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.83vw, 16px);
    line-height: 24px;
    color: var(--primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
}

.boton-consultar:hover[b-6f5p5t4qkt] {
    background-color: var(--primary-10);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.2);
}



/* =================================
   PANEL LATERAL CATEGORÍAS
   Figma node: 241-5176
   Mismos tokens que .filtros-panel para consistencia
   ================================= */
.custom-offcanvas[b-6f5p5t4qkt] {
    /* Variables compartidas con .filtros-panel */
    --fp-width: clamp(300px, 33vw, 630px);
    --fp-padding-x: clamp(20px, 6.46vw, 124px);
    --fp-padding-top: clamp(24px, 2.08vw, 40px);
    --fp-padding-bottom: clamp(60px, 6.46vw, 124px);
    --fp-gap-sections: clamp(30px, 3.18vw, 61px);
    --fp-title-size: clamp(28px, 2.5vw, 48px);
    --fp-body-size: clamp(14px, 0.83vw, 16px);
    --fp-item-py: clamp(10px, 0.78vw, 15px);
    --fp-radius: clamp(10px, 0.78vw, 15px);

    position: fixed;
    top: 0;
    left: calc(-1 * var(--fp-width));
    width: var(--fp-width);
    height: 100vh;
    height: 100dvh;
    background-color: #FFFFFF;
    border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Nunito Sans', sans-serif;
    overscroll-behavior: contain;
}

.custom-offcanvas.open[b-6f5p5t4qkt] {
    left: 0;
}

/* --- CABECERA --- */
.custom-offcanvas-header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fp-padding-top) var(--fp-padding-x) 0;
    flex-shrink: 0;
}

.custom-offcanvas-header h5[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-title-size);
    line-height: 1;
    color: #2D2E2E;
    margin: 0;
    padding: 0;
}

/* --- BODY SCROLLABLE --- */
.custom-offcanvas-body[b-6f5p5t4qkt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--fp-gap-sections) var(--fp-padding-x) var(--fp-padding-bottom);
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.custom-offcanvas-body[b-6f5p5t4qkt]::-webkit-scrollbar {
    width: 4px;
}

.custom-offcanvas-body[b-6f5p5t4qkt]::-webkit-scrollbar-track {
    background: transparent;
}

.custom-offcanvas-body[b-6f5p5t4qkt]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* --- BOTÓN CERRAR --- */
.close-btn[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 20px;
    color: #2D2E2E;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.close-btn:hover[b-6f5p5t4qkt] {
    opacity: 0.6;
}

/* Overlay de fondo oscuro */
.offcanvas-overlay[b-6f5p5t4qkt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: block;
}

/* =================================
   BOTÓN VOLVER CATEGORÍA
   ================================= */
.btn-back-category[b-6f5p5t4qkt] {
    background: none;
    color: var(--primario);
    border: none;
    border-bottom: 1px solid #F5F5F5;
    padding: var(--fp-item-py) 0;
    padding-bottom: var(--fp-item-py);
    margin-bottom: var(--fp-item-py);
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--fp-body-size);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-back-category:hover[b-6f5p5t4qkt] {
    color: #2a7a26;
}

/* =================================
   LISTA DE CATEGORÍAS
   Figma: py-15px, border-b #F5F5F5, 16px Nunito Sans, tracking 0.5px
   ================================= */
.category-list[b-6f5p5t4qkt] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.category-list li[b-6f5p5t4qkt] {
    border-bottom: 1px solid #F5F5F5;
}

.category-list li:last-child[b-6f5p5t4qkt] {
    border-bottom: none;
}

.category-simple-item[b-6f5p5t4qkt] {
    padding: var(--fp-item-py) 0;
    cursor: pointer;
    color: #2D2E2E;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--fp-body-size);
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.category-simple-item:hover[b-6f5p5t4qkt] {
    color: var(--primario);
}


/* =================================
   BOTÓN CATEGORÍAS PRINCIPAL SIMPLEF
   ================================= */
#categoryToggleBtn[b-6f5p5t4qkt] {
    background: transparent !important;
    border: none !important;
    color: #121212 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
}

#categoryToggleBtn:hover[b-6f5p5t4qkt] {
    opacity: 0.7 !important;
}

#categoryToggleBtn i[b-6f5p5t4qkt] {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   PANEL DE FILTROS – FIGMA NODE 241-5331
   Responsive system: clamp() fluid – misma técnica que Home.razor
   Breakpoints: 1200px / 768px / 480px
   ============================================================ */
.filtros-panel[b-6f5p5t4qkt] {
    /* --- VARIABLES LOCALES --- */
    --fp-width: clamp(300px, 33vw, 630px);
    --fp-padding-x: clamp(20px, 6.46vw, 124px);
    --fp-padding-top: clamp(24px, 2.08vw, 40px);
    --fp-padding-bottom: clamp(60px, 6.46vw, 124px);
    --fp-content-width: 100%;
    --fp-gap-sections: clamp(30px, 3.18vw, 61px);
    --fp-title-size: clamp(28px, 2.5vw, 48px);
    --fp-body-size: clamp(14px, 0.83vw, 16px);
    --fp-item-py: clamp(10px, 0.78vw, 15px);
    --fp-btn-height: clamp(44px, 2.81vw, 54px);
    --fp-radius: clamp(10px, 0.78vw, 15px);

    /* --- LAYOUT --- */
    position: fixed;
    top: 0;
    left: calc(-1 * var(--fp-width));
    width: var(--fp-width);
    height: 100vh;
    height: 100dvh;
    background-color: #FFFFFF;
    border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Nunito Sans', sans-serif;
    overscroll-behavior: contain;
}

.filtros-panel.open[b-6f5p5t4qkt] {
    left: 0;
}

/* --- CABECERA --- */
.filtros-panel__header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fp-padding-top) var(--fp-padding-x) 0;
    flex-shrink: 0;
}

.filtros-panel__title[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-title-size);
    line-height: 1;
    color: #2D2E2E;
    margin: 0;
    padding: 0;
}

.filtros-panel__close[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.filtros-panel__close:hover[b-6f5p5t4qkt] {
    opacity: 0.6;
}

.filtros-panel__close svg[b-6f5p5t4qkt] {
    width: 24px;
    height: 24px;
}

/* --- CUERPO SCROLLABLE --- */
.filtros-panel__body[b-6f5p5t4qkt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--fp-gap-sections) var(--fp-padding-x);
    display: flex;
    flex-direction: column;
    gap: var(--fp-gap-sections);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.filtros-panel__body[b-6f5p5t4qkt]::-webkit-scrollbar {
    width: 4px;
}

.filtros-panel__body[b-6f5p5t4qkt]::-webkit-scrollbar-track {
    background: transparent;
}

.filtros-panel__body[b-6f5p5t4qkt]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* --- LISTA DE FILTROS --- */
.filtros-panel__list[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    width: var(--fp-content-width);
}

/* --- ITEM DE FILTRO COLAPSABLE --- */
.filtros-panel__item[b-6f5p5t4qkt] {
    width: 100%;
}

.filtros-panel__item--border[b-6f5p5t4qkt] {
    border-bottom: 1px solid #F5F5F5;
}

.filtros-panel__item--border:last-child[b-6f5p5t4qkt] {
    border-bottom: none;
}

.filtros-panel__item-header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--fp-item-py) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    transition: opacity 0.2s ease;
}

.filtros-panel__item-header:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

.filtros-panel__item-label-group[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.78vw, 15px);
}

.filtros-panel__item-label[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
}

.filtros-panel__item-hint[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #9E9E9E;
}

.filtros-panel__toggle-icon[b-6f5p5t4qkt] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* --- CONTENIDO EXPANDIDO --- */
.filtros-panel__item-content[b-6f5p5t4qkt] {
    padding: 0 0 clamp(8px, 0.52vw, 10px) 0;
}

/* --- SORT OPTIONS / CHECKBOXES --- */
.filtros-panel__sort-options[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.filtros-panel__sort-option[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.63vw, 12px);
    padding: clamp(6px, 0.42vw, 8px) 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 4px;
}

.filtros-panel__sort-option:hover[b-6f5p5t4qkt] {
    background-color: rgba(60, 170, 54, 0.04);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Custom checkbox (Figma-style) */
.filtros-panel__checkbox[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #BDBDBD;
    border-radius: 4px;
    background: #FCFCFD;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.filtros-panel__checkbox--checked[b-6f5p5t4qkt] {
    background: #3CAA36;
    border-color: #3CAA36;
}

.filtros-panel__checkbox--checked svg[b-6f5p5t4qkt] {
    display: block;
}

.filtros-panel__sort-text[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
}

/* --- COLOR SWATCH (filtro de color) --- */
.filtros-panel__color-swatch[b-6f5p5t4qkt] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    display: inline-block;
    flex-shrink: 0;
}

/* --- SEARCH INPUT (marcas) --- */
.filtros-panel__search-input[b-6f5p5t4qkt] {
    width: 100%;
    padding: clamp(6px, 0.42vw, 8px) clamp(10px, 0.63vw, 12px);
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--fp-body-size);
    color: #2D2E2E;
    margin-bottom: clamp(8px, 0.52vw, 10px);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.filtros-panel__search-input:focus[b-6f5p5t4qkt] {
    outline: none;
    border-color: #3CAA36;
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.1);
}

.filtros-panel__search-input[b-6f5p5t4qkt]::placeholder {
    color: #9E9E9E;
}

.filtros-panel__brands-list[b-6f5p5t4qkt] {
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.filtros-panel__brands-list[b-6f5p5t4qkt]::-webkit-scrollbar {
    width: 4px;
}

.filtros-panel__brands-list[b-6f5p5t4qkt]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

/* --- PRICE RANGE (Figma node: 241-5459) --- */
.filtros-panel__price-range[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(4px, 0.42vw, 8px) 0;
}

.filtros-panel__range-slider-wrapper[b-6f5p5t4qkt] {
    position: relative;
    width: 100%;
    height: 11px;
}

/* Base gray track */
.filtros-panel__range-track[b-6f5p5t4qkt] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #BDBDBD;
    transform: translateY(-50%);
    border-radius: 1px;
    pointer-events: none;
}

/* Active green segment between handles */
.filtros-panel__range-active[b-6f5p5t4qkt] {
    position: absolute;
    top: 50%;
    height: 2px;
    background: #3CAA36;
    transform: translateY(-50%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 2;
}

/* Range input base */
.filtros-panel__range-slider[b-6f5p5t4qkt] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 11px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
}

/* WebKit track (invisible – we use custom track divs) */
.filtros-panel__range-slider[b-6f5p5t4qkt]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: transparent;
    border: none;
}

/* WebKit thumb – solid green circle matching Figma */
.filtros-panel__range-slider[b-6f5p5t4qkt]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    background: #3CAA36;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: none;
    margin-top: -5px;
    transition: transform 0.15s ease;
}

.filtros-panel__range-slider[b-6f5p5t4qkt]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.filtros-panel__range-slider[b-6f5p5t4qkt]::-webkit-slider-thumb:active {
    transform: scale(1.4);
}

/* Firefox track */
.filtros-panel__range-slider[b-6f5p5t4qkt]::-moz-range-track {
    width: 100%;
    height: 2px;
    background: transparent;
    border: none;
}

/* Firefox thumb */
.filtros-panel__range-slider[b-6f5p5t4qkt]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    background: #3CAA36;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: none;
}

.filtros-panel__range-slider[b-6f5p5t4qkt]::-moz-range-thumb:hover {
    transform: scale(1.3);
}

.filtros-panel__range-slider--min[b-6f5p5t4qkt] {
    z-index: 3;
}

.filtros-panel__range-slider--max[b-6f5p5t4qkt] {
    z-index: 4;
}

.filtros-panel__range-slider:focus[b-6f5p5t4qkt] {
    outline: none;
}

.filtros-panel__range-slider:focus[b-6f5p5t4qkt]::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(60, 170, 54, 0.15);
}

.filtros-panel__range-slider:focus[b-6f5p5t4qkt]::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(60, 170, 54, 0.15);
}

/* Price labels below slider */
.filtros-panel__price-labels[b-6f5p5t4qkt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.filtros-panel__price-label[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #000000;
}

/* --- ESPECIFICACIONES --- */
.filtros-panel__specs-content[b-6f5p5t4qkt] {
    padding: 0;
}

.filtros-panel__spec-item[b-6f5p5t4qkt] {
    border-bottom: 1px solid #F5F5F5;
}

.filtros-panel__spec-item:last-child[b-6f5p5t4qkt] {
    border-bottom: none;
}

.filtros-panel__spec-header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(8px, 0.63vw, 12px) 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.filtros-panel__spec-header:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

.filtros-panel__spec-label[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
}

.filtros-panel__spec-values[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(6px, 0.42vw, 8px);
}

/* --- ETIQUETAS (Figma node: 241-6695) --- */
.filtros-panel__tags-section[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.52vw, 10px);
}

.filtros-panel__tags-header[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fp-item-py) 0;
    border-bottom: 1px solid #F5F5F5;
}

.filtros-panel__tags-grid[b-6f5p5t4qkt] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 0.52vw, 10px) clamp(6px, 0.42vw, 8px);
    padding: clamp(4px, 0.37vw, 7px) 0;
}

.filtros-panel__tag[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 2px clamp(10px, 0.78vw, 15px);
    border-radius: 4px;
    border: none;
    cursor: pointer;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.filtros-panel__tag:hover[b-6f5p5t4qkt] {
    transform: translateY(-1px);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
}

.filtros-panel__tag:active[b-6f5p5t4qkt] {
    transform: translateY(0);
}

.filtros-panel__tag span[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    text-align: center;
    white-space: nowrap;
}

/* Tag colors - matching Figma exactly */
.filtros-panel__tag--nuevo[b-6f5p5t4qkt] {
    background: #FFFFFF;
}

.filtros-panel__tag--nuevo span[b-6f5p5t4qkt] {
    color: #121212;
}

.filtros-panel__tag--porcentaje[b-6f5p5t4qkt] {
    background: #686AAD;
}

.filtros-panel__tag--porcentaje span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.filtros-panel__tag--eco[b-6f5p5t4qkt] {
    background: #3CAA36;
}

.filtros-panel__tag--eco span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.filtros-panel__tag--oferta[b-6f5p5t4qkt] {
    background: #FF5449;
}

.filtros-panel__tag--oferta span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.filtros-panel__tag--reembolso[b-6f5p5t4qkt] {
    background: #FDD623;
}

.filtros-panel__tag--reembolso span[b-6f5p5t4qkt] {
    color: #141414;
}

.filtros-panel__tag--regalo[b-6f5p5t4qkt] {
    background: #52B0AD;
}

.filtros-panel__tag--regalo span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.filtros-panel__tag--homologado[b-6f5p5t4qkt] {
    background: #FF9500;
}

.filtros-panel__tag--homologado span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

/* Active state for tags — box-shadow inset (never clipped by overflow) */
.filtros-panel__tag--active[b-6f5p5t4qkt] {
    box-shadow: inset 0 0 0 2px #2D2E2E, 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* Disabled/placeholder tags */
.filtros-panel__tag--disabled[b-6f5p5t4qkt] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- BOTONERA INFERIOR FIJA --- */
.filtros-panel__actions[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 0.78vw, 15px);
    padding: clamp(16px, 1.25vw, 24px) var(--fp-padding-x) clamp(24px, 2.08vw, 40px);
    flex-shrink: 0;
    background: #FFFFFF;
}

.filtros-panel__btn[b-6f5p5t4qkt] {
    flex: 1 1 0;
    height: var(--fp-btn-height);
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--fp-body-size);
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filtros-panel__btn--outline[b-6f5p5t4qkt] {
    background: #FFFFFF;
    border: 1px solid #3CAA36;
    color: #3CAA36;
}

.filtros-panel__btn--outline:hover[b-6f5p5t4qkt] {
    background: rgba(60, 170, 54, 0.06);
}

.filtros-panel__btn--filled[b-6f5p5t4qkt] {
    background: #3CAA36;
    border: 1px solid #3CAA36;
    color: #FFFFFF;
}

.filtros-panel__btn--filled:hover[b-6f5p5t4qkt] {
    background: #35982f;
}

.filtros-panel__btn--filled:active[b-6f5p5t4qkt] {
    background: #2e8628;
}

/* Spinner inside button */
.filtros-panel__spinner[b-6f5p5t4qkt] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: fp-spin-b-6f5p5t4qkt 0.8s linear infinite;
}

@keyframes fp-spin-b-6f5p5t4qkt {
    to {
        transform: rotate(360deg);
    }
}

/* Botón Filtros toolbar (estilo base) */
#filterToggleBtn[b-6f5p5t4qkt] {
    background: transparent;
    border: none;
    color: #121212;
    padding: 0;
    font-size: clamp(13px, 0.83vw, 16px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.50px;
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    transition: opacity 0.2s ease;
    cursor: pointer;
}

#filterToggleBtn:hover[b-6f5p5t4qkt] {
    opacity: 0.7;
}

.offcanvas-overlay[b-6f5p5t4qkt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: block;
    opacity: 1;
}

/* =================================
   SECCIÓN DE CONTENIDO SEO (Categorías y Marcas)
   ================================= */
.category-brand-seo-content[b-6f5p5t4qkt] {
    background-color: #FFFFFF;
    padding: 40px 115px 80px 115px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Header con título y línea */
.category-brand-seo-content .seo-header[b-6f5p5t4qkt] {
    position: relative;
    height: 75px;
    width: 503px;
}

.category-brand-seo-content h2[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    color: #000000;
    margin: 0;
    white-space: nowrap;
}

.category-brand-seo-content .seo-underline[b-6f5p5t4qkt] {
    position: absolute;
    left: 0;
    top: 75px;
    width: 503px;
    height: auto;
}

/* Texto descriptivo */
.category-brand-seo-content p[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #666666;
    margin: 0;
    text-align: left;
}

/* =================================
   RESPONSIVE DESIGN
   ================================= */

/* Responsive para sección SEO */
@media (max-width: 1200px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding-left: 25px;
        padding-right: 25px;
    }

    .category-brand-seo-content .seo-header[b-6f5p5t4qkt] {
        width: 100%;
        max-width: 503px;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 32px;
    }

    .category-brand-seo-content .seo-underline[b-6f5p5t4qkt] {
        width: 100%;
        max-width: 503px;
    }
}

@media (max-width: 768px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding-left: 15px;
        padding-right: 15px;
        gap: 20px;
    }

    .category-brand-seo-content .seo-header[b-6f5p5t4qkt] {
        height: auto;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 24px;
    }

    .category-brand-seo-content .seo-underline[b-6f5p5t4qkt] {
        position: static;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 40px;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 20px;
    }

    .category-brand-seo-content p[b-6f5p5t4qkt] {
        font-size: 14px;
    }
}

/* =================================
   RESPONSIVE BREAKPOINTS - GRID PRODUCTOS
   ================================= */



/* Tablets y pantallas medianas */
@media (max-width: 1200px) {
    .productos-page-container[b-6f5p5t4qkt] {
        margin: 0;
    }

    /* Truncar breadcrumb en tablets */
    .productos-breadcrumb[b-6f5p5t4qkt] {
        max-width: 400px;
    }


    .product-image[b-6f5p5t4qkt] {
        height: 240px;
    }

    .product-badges-left[b-6f5p5t4qkt],
    .badge-stock[b-6f5p5t4qkt] {
        top: 15px;
    }

    .product-badges-left[b-6f5p5t4qkt] {
        left: 15px;
    }

    .badge-stock[b-6f5p5t4qkt] {
        right: 15px;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .productos-page-container[b-6f5p5t4qkt] {
        margin: 0;
    }

    /* Toolbar: controles en 2 filas */
    .toolbar-controls-row[b-6f5p5t4qkt] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .toolbar-left[b-6f5p5t4qkt] {
        flex: 1 1 100%;
        order: 2;
        gap: 16px;
    }

    .toolbar-right[b-6f5p5t4qkt] {
        flex: 1 1 100%;
        order: 1;
        margin-left: 0;
        justify-content: flex-end;
    }

    /* Ocultar separadores y breadcrumb en móvil */
    .toolbar-separator[b-6f5p5t4qkt] {
        display: none;
    }

    .productos-breadcrumb[b-6f5p5t4qkt] {
        display: none;
    }

    /* En scrolled volver a 1 fila */
    .productos-toolbar.scrolled .toolbar-controls-row[b-6f5p5t4qkt] {
        flex-wrap: nowrap;
    }

    .productos-toolbar.scrolled .toolbar-left[b-6f5p5t4qkt] {
        flex: 0 1 auto;
        order: 1;
    }

    .productos-toolbar.scrolled .toolbar-right[b-6f5p5t4qkt] {
        flex: 0 1 auto;
        order: 2;
        margin-left: auto;
    }

    .product-grid[b-6f5p5t4qkt] {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en móvil */
        gap: 20px 10px;
        padding: 0 15px;
    }

    .product-image[b-6f5p5t4qkt] {
        height: 180px;
    }

    .product-badges-left[b-6f5p5t4qkt],
    .badge-stock[b-6f5p5t4qkt] {
        top: 10px;
    }

    .product-badges-left[b-6f5p5t4qkt] {
        left: 10px;
    }

    .badge-stock[b-6f5p5t4qkt] {
        right: 10px;
    }

    .badge span[b-6f5p5t4qkt],
    .badge-stock span[b-6f5p5t4qkt] {
        font-size: 9px;
    }

    .product-title[b-6f5p5t4qkt] {
        font-size: 13px;
    }

    .current-price[b-6f5p5t4qkt] {
        font-size: 16px;
    }

    .btn-cart[b-6f5p5t4qkt] {
        width: 40px;
        height: 40px;
    }

    .btn-cart i[b-6f5p5t4qkt] {
        font-size: 18px;
    }

    .custom-offcanvas[b-6f5p5t4qkt] {
        --fp-width: 85vw;
        --fp-padding-x: 20px;
        --fp-gap-sections: 24px;
    }

    .filtros-panel[b-6f5p5t4qkt] {
        --fp-width: 85vw;
        --fp-padding-x: 20px;
        --fp-gap-sections: 24px;
    }

}

@media (max-width: 480px) {
    .productos-page-container[b-6f5p5t4qkt] {
        margin: 0;
    }

    .product-grid[b-6f5p5t4qkt] {
        gap: 15px 8px;
    }

    .product-image[b-6f5p5t4qkt] {
        height: 150px;
    }

    .product-badges-left[b-6f5p5t4qkt],
    .badge-stock[b-6f5p5t4qkt] {
        top: 8px;
    }

    .product-badges-left[b-6f5p5t4qkt] {
        left: 8px;
    }

    .badge-stock[b-6f5p5t4qkt] {
        right: 8px;
    }

    .badge[b-6f5p5t4qkt],
    .badge-stock[b-6f5p5t4qkt] {
        padding: 1px 5px;
    }

    .badge span[b-6f5p5t4qkt],
    .badge-stock span[b-6f5p5t4qkt] {
        font-size: 8px;
    }

    .custom-offcanvas[b-6f5p5t4qkt] {
        --fp-width: 85vw;
        --fp-padding-x: 20px;
        --fp-gap-sections: 24px;
    }

    .filtros-panel[b-6f5p5t4qkt] {
        --fp-width: 90vw;
        --fp-padding-x: 16px;
        --fp-gap-sections: 20px;
        --fp-title-size: 28px;
    }

    .custom-offcanvas-header[b-6f5p5t4qkt] {
        padding: var(--fp-padding-top) var(--fp-padding-x) 0;
    }

    .custom-offcanvas-body[b-6f5p5t4qkt] {
        padding: var(--fp-gap-sections) var(--fp-padding-x) var(--fp-padding-bottom);
    }
}

/* Old filter styles removed – all filter CSS now in .filtros-panel block above */

/* =================================
   CONTADOR DISCRETO DE PRODUCTOS
   (Integrado en toolbar-product-count)
   ================================= */

/* =================================
   BOTÓN CARGAR MÁS (Página 1 → 2)
   Clic manual con SEO en mente.
   Páginas 2+ se cargan automáticamente.
   ================================= */


/* =================================
   SECCIÓN OPORTUNIDADES ONLINE
   ================================= */
.oportunidades-section[b-6f5p5t4qkt] {
    background-color: #FFFFFF;
    padding: 20px 115px 80px 115px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 60px;
}

/* Header común para secciones */
.section-header[b-6f5p5t4qkt] {
    position: relative;
    height: 75px;
    width: 503px;
}

.section-title[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    color: #000000;
    margin: 0;
    white-space: nowrap;
}

.section-underline[b-6f5p5t4qkt] {
    position: absolute;
    left: 0;
    top: 75px;
    width: 503px;
    height: auto;
}

/* Contenedor del slider */
.slider-container[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 10px 0;
}

/* Botones de navegación del carrusel */
.carousel-btn[b-6f5p5t4qkt] {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.carousel-btn:hover[b-6f5p5t4qkt] {
    transform: scale(1.1);
}

.carousel-btn img[b-6f5p5t4qkt] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Flecha izquierda - invertida (arrow.png apunta a la derecha por defecto) */
.carousel-btn-prev img[b-6f5p5t4qkt] {
    transform: scaleX(-1);
}

/* Flecha derecha - sin transformación (ya apunta a la derecha) */
.carousel-btn-next img[b-6f5p5t4qkt] {
    /* Sin transformación */
}

/* Wrapper del carrusel con scroll horizontal */
.carousel-wrapper[b-6f5p5t4qkt] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE y Edge */
}

.carousel-wrapper[b-6f5p5t4qkt]::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Track del carrusel de oportunidades */
.carousel-track.oportunidades-track[b-6f5p5t4qkt] {
    display: flex;
    gap: 0;
    min-width: max-content;
}

/* Card de producto de oportunidad */
.card-producto-oportunidad[b-6f5p5t4qkt] {
    border-left: 1px solid #E0E0E0;
    padding: 0 0 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    transition: border-left 0.2s ease;
    position: relative;
}

.card-producto-oportunidad:hover[b-6f5p5t4qkt] {
    border-left: 1px solid transparent;
}

.card-producto-oportunidad:hover[b-6f5p5t4qkt]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #3CAA36;
    border-radius: 0 2px 2px 0;
}

.product-link-oportunidad[b-6f5p5t4qkt] {
    text-decoration: none;
    color: inherit;
}

/* Wrapper de imagen de producto oportunidad */
.product-image-wrapper-oportunidad[b-6f5p5t4qkt] {
    width: 300px;
    height: 300px;
    border-radius: 14px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Badges izquierda en oportunidades */
.badges-left-oportunidad[b-6f5p5t4qkt] {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.badge-oportunidad[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.badge-oportunidad span[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    text-align: center;
}

.badge-oferta-oportunidad[b-6f5p5t4qkt] {
    background-color: #FF5449;
}

.badge-oferta-oportunidad span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

.badge-eco-oportunidad[b-6f5p5t4qkt] {
    background-color: #3CAA36;
}

.badge-eco-oportunidad span[b-6f5p5t4qkt] {
    color: #FFFFFF;
}

/* Badge de stock en oportunidades */
.badge-stock-oportunidad[b-6f5p5t4qkt] {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 7px;
    background-color: #EBF6EB;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.stock-dot-oportunidad[b-6f5p5t4qkt] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #3CAA36;
}

.stock-text-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    color: #000000;
    text-align: center;
}

/* Contenido de producto oportunidad */
.product-content-oportunidad[b-6f5p5t4qkt] {
    width: 300px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.product-info-oportunidad[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Colores en oportunidades */
.colors-oportunidad[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.color-circle-oportunidad[b-6f5p5t4qkt] {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.color-circle-oportunidad[b-6f5p5t4qkt]::after {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.color-black-op[b-6f5p5t4qkt]::after {
    background-color: #000000;
}

.color-white-op[b-6f5p5t4qkt]::after {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
}

.color-yellow-op[b-6f5p5t4qkt]::after {
    background-color: #FDD623;
}

.color-blue-op[b-6f5p5t4qkt]::after {
    background-color: #0066CC;
}

/* Color seleccionado con borde externo */
.color-circle-oportunidad.selected[b-6f5p5t4qkt] {
    border: 4px solid rgba(0, 0, 0, 0.2);
}

.more-colors-op[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #141718;
    text-align: center;
    margin-left: 2px;
}

/* Título en oportunidades */
.title-link-oportunidad[b-6f5p5t4qkt] {
    text-decoration: none;
    color: inherit;
}

.product-title-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #141718;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: block;
    transition: color 0.2s ease;
}

.title-link-oportunidad:hover .product-title-oportunidad[b-6f5p5t4qkt] {
    color: #3CAA36;
}

/* Precio en oportunidades */
.price-oportunidad[b-6f5p5t4qkt] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.current-price-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #212121;
}

.current-price-oportunidad.price-offer-op[b-6f5p5t4qkt] {
    color: #DE3730;
}

.original-price-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #9E9E9E;
    text-decoration: line-through;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

/* Botón carrito en oportunidades */
.btn-cart-oportunidad[b-6f5p5t4qkt] {
    width: 65px;
    height: 65px;
    border-radius: 6px;
    background-color: #FFFFFF;
    border: 1px solid #3CAA36;
    color: #3CAA36;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-cart-oportunidad:hover[b-6f5p5t4qkt] {
    background-color: #3CAA36;
    color: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.3);
}

.btn-cart-oportunidad:active[b-6f5p5t4qkt] {
    transform: scale(0.98);
}

.btn-cart-oportunidad i[b-6f5p5t4qkt] {
    font-size: 24px;
}

.no-products-oportunidad[b-6f5p5t4qkt] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #666;
    padding: 20px;
}

/* =================================
   SECCIÓN NUESTRAS MARCAS
   ================================= */
.marcas-section[b-6f5p5t4qkt] {
    background-color: #FFFFFF;
    padding: 40px 115px 0 115px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    box-sizing: border-box;
}

/* Wrapper del carrusel de marcas */
.marcas-carousel-wrapper[b-6f5p5t4qkt] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.marcas-carousel-wrapper[b-6f5p5t4qkt]::-webkit-scrollbar {
    display: none;
}

/* Track de marcas */
.marcas-track[b-6f5p5t4qkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    /* Sin gap, justificación space-between */
    width: 1690px;
}

.marcas-track img[b-6f5p5t4qkt] {
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.marcas-track img:hover[b-6f5p5t4qkt] {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Tamaños específicos de Figma para cada logo */
.marcas-track .logo-hp[b-6f5p5t4qkt] {
    width: 50px;
    height: 50px;
}

.marcas-track .logo-sharp[b-6f5p5t4qkt] {
    width: 103px;
    height: 14px;
}

.marcas-track .logo-navigator[b-6f5p5t4qkt] {
    width: 106px;
    height: 33px;
}

.marcas-track .element[b-6f5p5t4qkt] {
    width: 63.46px;
    height: 33px;
}

.marcas-track .logo-pilot[b-6f5p5t4qkt] {
    width: 108.6px;
    height: 30px;
}

.marcas-track .logo-fellowes[b-6f5p5t4qkt] {
    width: 122.18px;
    height: 28px;
}

.marcas-track .logo-poly-polycom[b-6f5p5t4qkt] {
    width: 107px;
    height: 50px;
}

.marcas-track .logo-petrus-azul[b-6f5p5t4qkt] {
    width: 99px;
    height: 33px;
}

.marcas-track .LOGO-EDDING[b-6f5p5t4qkt] {
    width: 132px;
    height: 33px;
}

.marcas-track .logo-bic[b-6f5p5t4qkt] {
    width: 101.64px;
    height: 33px;
}

/* =================================
   RESPONSIVE PARA SECCIONES DE SLIDER
   ================================= */

@media (max-width: 1200px) {

    .oportunidades-section[b-6f5p5t4qkt],
    .marcas-section[b-6f5p5t4qkt] {
        padding-left: 25px;
        padding-right: 25px;
    }

    .section-header[b-6f5p5t4qkt] {
        width: 100%;
        max-width: 503px;
    }

    .section-title[b-6f5p5t4qkt] {
        font-size: 32px;
    }

    .section-underline[b-6f5p5t4qkt] {
        width: 100%;
        max-width: 503px;
    }

    .product-image-wrapper-oportunidad[b-6f5p5t4qkt] {
        width: 260px;
        height: 260px;
    }

    .product-content-oportunidad[b-6f5p5t4qkt] {
        width: 260px;
    }
}

@media (max-width: 768px) {

    .oportunidades-section[b-6f5p5t4qkt],
    .marcas-section[b-6f5p5t4qkt] {
        padding-left: 15px;
        padding-right: 15px;
        gap: 30px;
    }

    .section-header[b-6f5p5t4qkt] {
        height: auto;
    }

    .section-title[b-6f5p5t4qkt] {
        font-size: 24px;
    }

    .section-underline[b-6f5p5t4qkt] {
        position: static;
        margin-top: 10px;
    }

    .slider-container[b-6f5p5t4qkt] {
        gap: 10px;
    }

    .carousel-btn[b-6f5p5t4qkt] {
        width: 20px;
        height: 20px;
    }

    .carousel-btn img[b-6f5p5t4qkt] {
        width: 20px;
        height: 20px;
    }

    .product-image-wrapper-oportunidad[b-6f5p5t4qkt] {
        width: 220px;
        height: 220px;
    }

    .product-content-oportunidad[b-6f5p5t4qkt] {
        width: 220px;
        padding: 0 10px;
    }

    .btn-cart-oportunidad[b-6f5p5t4qkt] {
        width: 50px;
        height: 50px;
    }

    .btn-cart-oportunidad i[b-6f5p5t4qkt] {
        font-size: 20px;
    }

    .marca-logo[b-6f5p5t4qkt] {
        height: 40px;
    }

    .marca-logo img[b-6f5p5t4qkt] {
        max-height: 40px;
        max-width: 100px;
    }
}

@media (max-width: 480px) {

    .oportunidades-section[b-6f5p5t4qkt],
    .marcas-section[b-6f5p5t4qkt] {
        padding-left: 10px;
        padding-right: 10px;
        gap: 20px;
        margin-top: 40px;
    }

    .section-title[b-6f5p5t4qkt] {
        font-size: 20px;
    }

    .product-image-wrapper-oportunidad[b-6f5p5t4qkt] {
        width: 180px;
        height: 180px;
    }

    .product-content-oportunidad[b-6f5p5t4qkt] {
        width: 180px;
    }

    .badges-left-oportunidad[b-6f5p5t4qkt],
    .badge-stock-oportunidad[b-6f5p5t4qkt] {
        top: 10px;
    }

    .badges-left-oportunidad[b-6f5p5t4qkt] {
        left: 10px;
    }

    .badge-stock-oportunidad[b-6f5p5t4qkt] {
        right: 10px;
    }

    .product-title-oportunidad[b-6f5p5t4qkt] {
        font-size: 14px;
        max-width: 120px;
    }

    .current-price-oportunidad[b-6f5p5t4qkt] {
        font-size: 16px;
    }

    .original-price-oportunidad[b-6f5p5t4qkt] {
        font-size: 12px;
    }

    .btn-cart-oportunidad[b-6f5p5t4qkt] {
        width: 45px;
        height: 45px;
    }

    .btn-cart-oportunidad i[b-6f5p5t4qkt] {
        font-size: 18px;
    }

    .marca-logo[b-6f5p5t4qkt] {
        height: 30px;
    }

    .marca-logo img[b-6f5p5t4qkt] {
        max-height: 30px;
        max-width: 80px;
    }
}

/* ============================================= */
/* SLIDER WRAPPERS                                */
/* These wrappers provide --padding-lateral and    */
/* overflow:hidden so the shared ProductSlider &   */
/* BrandSlider components can use negative margins */
/* without causing body overflow.                  */
/* Mirrors .home-body-3 / .home-body-4 from Home  */
/* ============================================= */

.productos-slider-wrapper[b-6f5p5t4qkt] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(30px, 3.13vw, 60px) var(--padding-lateral) clamp(20px, 2.08vw, 40px);
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    overflow: hidden;
    box-sizing: border-box;
}

.productos-brands-wrapper[b-6f5p5t4qkt] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(10px, 1.04vw, 20px) var(--padding-lateral) clamp(10px, 1.04vw, 20px);
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    overflow: hidden;
    box-sizing: border-box;
}

/* TABLET */
@media (max-width: 1024px) {
    .productos-slider-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 30px;
        padding: 30px var(--padding-lateral) 20px;
    }

    .productos-brands-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 30px;
        padding: 10px var(--padding-lateral);
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .productos-slider-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 16px;
        padding: 24px var(--padding-lateral) 16px;
    }

    .productos-brands-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 16px;
        padding: 8px var(--padding-lateral);
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .productos-slider-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 12px;
        padding: 20px var(--padding-lateral) 12px;
    }

    .productos-brands-wrapper[b-6f5p5t4qkt] {
        --padding-lateral: 12px;
        padding: 8px var(--padding-lateral);
    }
}

/* ============================================= */
/* SEO CONTENT SECTION (Info)                     */
/* Figma node: 3627:35656                         */
/* Responsive: clamp() fluid + breakpoints        */
/* ============================================= */

.category-brand-seo-content[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 0.83vw, 16px);
    align-items: flex-start;
    padding: clamp(25px, 2.6vw, 50px) clamp(16px, 6vw, 115px);
    width: 100%;
    box-sizing: border-box;
    font-family: "Nunito Sans", Helvetica, sans-serif;
}

.category-brand-seo-content h2[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.15vw, 22px);
    line-height: clamp(22px, 1.46vw, 28px);
    color: #212121;
    margin: 0;
    padding: 0;
}

.category-brand-seo-content p[b-6f5p5t4qkt] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.73vw, 14px);
    line-height: clamp(16px, 1.04vw, 20px);
    letter-spacing: 0.25px;
    color: #757575;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.seo-text-content[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.52vw, 10px);
}

/* TABLET */
@media (max-width: 1024px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding: 30px 30px;
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding: 24px 16px;
        gap: 12px;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 18px;
        line-height: 24px;
    }

    .category-brand-seo-content p[b-6f5p5t4qkt] {
        font-size: 13px;
        line-height: 18px;
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .category-brand-seo-content[b-6f5p5t4qkt] {
        padding: 20px 12px;
        gap: 10px;
    }

    .category-brand-seo-content h2[b-6f5p5t4qkt] {
        font-size: 16px;
    }

    .category-brand-seo-content p[b-6f5p5t4qkt] {
        font-size: 12px;
        line-height: 17px;
    }
}

/* ============================================= */
/* PRE-FOOTER (Links Categorías)                 */
/* Igual que Home - Figma: 3627:35660            */
/* ============================================= */
.pre-footer[b-6f5p5t4qkt] {
    display: flex;
    width: 100%;
    padding: clamp(25px, 2.6vw, 50px) clamp(16px, 6vw, 115px);
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    gap: 0;
    --prefooter-col-padding: clamp(20px, 2.1vw, 40px);
    box-sizing: border-box;
}

.pre-footer-column[b-6f5p5t4qkt] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 24px);
    flex: 1;
    padding: 0 var(--prefooter-col-padding);
    justify-content: center;
    align-items: flex-start;
}

.pre-footer-separator[b-6f5p5t4qkt] {
    width: 1px;
    height: clamp(50px, 4.375vw, 84px);
    align-self: center;
    background-image: linear-gradient(to bottom, #9E9E9E 50%, transparent 50%);
    background-size: 1px clamp(4px, 0.3125vw, 6px);
    background-repeat: repeat-y;
    flex-shrink: 0;
    position: relative;
}

.category-link[b-6f5p5t4qkt] {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 0.625vw, 12px);
    text-decoration: none;
    color: #9E9E9E;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 400;
    line-height: clamp(18px, 1.458vw, 28px);
    position: relative;
    padding-left: 0;
}

.link-indicator[b-6f5p5t4qkt] {
    position: absolute;
    left: calc(var(--prefooter-col-padding) * -1 - 1.5px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(2px, 0.156vw, 3px);
    height: clamp(25px, 2.1875vw, 42px);
    background-color: transparent;
    border-radius: 2px;
    transition: background-color 0.35s ease;
}

.link-icon[b-6f5p5t4qkt] {
    width: clamp(14px, 1.042vw, 20px);
    height: clamp(14px, 1.042vw, 20px);
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.link-text[b-6f5p5t4qkt] {
    white-space: nowrap;
    transition: transform 0.35s ease, color 0.35s ease;
}

.category-link:hover[b-6f5p5t4qkt] {
    color: #141718;
}

.category-link:hover .link-indicator[b-6f5p5t4qkt] {
    background-color: #3CAA36;
}

.category-link:hover .link-icon[b-6f5p5t4qkt] {
    opacity: 1;
}

.category-link:hover .link-text[b-6f5p5t4qkt] {
    color: #141718;
}

@media (max-width: 1024px) {
    .pre-footer[b-6f5p5t4qkt] {
        flex-wrap: nowrap;
        gap: 0;
        padding: 30px var(--padding-lateral, 30px);
        --prefooter-col-padding: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pre-footer[b-6f5p5t4qkt]::-webkit-scrollbar {
        display: none;
    }

    .pre-footer-column[b-6f5p5t4qkt] {
        flex: 1 0 auto;
        min-width: 100px;
        padding: 0 var(--prefooter-col-padding);
        gap: 8px;
    }

    .pre-footer-separator[b-6f5p5t4qkt] {
        display: block;
        flex-shrink: 0;
        height: 50px;
    }

    .link-indicator[b-6f5p5t4qkt] {
        display: none;
    }

    .category-link[b-6f5p5t4qkt] {
        font-size: 11px;
        gap: 4px;
    }

    .link-icon[b-6f5p5t4qkt] {
        width: 14px;
        height: 14px;
    }

    .link-text[b-6f5p5t4qkt] {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .pre-footer[b-6f5p5t4qkt] {
        flex-wrap: nowrap;
        padding: 24px var(--padding-lateral, 16px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        --prefooter-col-padding: 8px;
        max-width: 100%;
    }

    .pre-footer[b-6f5p5t4qkt]::-webkit-scrollbar {
        display: none;
    }

    .pre-footer-column[b-6f5p5t4qkt] {
        flex: 0 0 auto;
        min-width: 90px;
        padding: 0 var(--prefooter-col-padding);
        gap: 6px;
    }

    .pre-footer-separator[b-6f5p5t4qkt] {
        height: 40px;
        flex-shrink: 0;
    }

    .category-link[b-6f5p5t4qkt] {
        font-size: 10px;
        gap: 3px;
    }

    .link-icon[b-6f5p5t4qkt] {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .pre-footer[b-6f5p5t4qkt] {
        padding: 20px var(--padding-lateral, 12px);
        --prefooter-col-padding: 6px;
        max-width: 100%;
    }

    .pre-footer-column[b-6f5p5t4qkt] {
        min-width: 75px;
        gap: 4px;
    }

    .pre-footer-separator[b-6f5p5t4qkt] {
        height: 35px;
    }

    .category-link[b-6f5p5t4qkt] {
        font-size: 9px;
    }

    .link-icon[b-6f5p5t4qkt] {
        width: 10px;
        height: 10px;
    }
}

/* === Agrupaciones: swatches de variantes ===
   El markup se movió al componente compartido ProductSwatches
   (Components/Shared/ProductSwatches.razor) para que el grid y los sliders
   rendericen exactamente el mismo componente. Sus estilos viven ahora en
   ProductSwatches.razor.css (CSS aislado de Blazor). === */

/* =================================
   RESPONSIVE PRODUCT GRID
   Flex-wrap con cards de tamaño fijo escalado por breakpoint
   ================================= */

/* ≤1400px — 4 columnas de 280px, padding lateral menor */
@media (max-width: 1400px) {
    .product-grid[b-6f5p5t4qkt] {
        --padding-lateral: clamp(24px, 4vw, 80px);
        --producto-img-size: 240px;
        --btn-cart-size: 52px;
        --font-body: 14px;
        --font-price: 17px;
        --gap-vertical: 40px;
    }

    .card-producto[b-6f5p5t4qkt] {
        flex: 0 0 240px;
        width: 240px;
    }
}

/* ≤1100px — 3 columnas de 220px */
@media (max-width: 1100px) {
    .product-grid[b-6f5p5t4qkt] {
        --padding-lateral: clamp(16px, 3vw, 48px);
        --producto-img-size: 220px;
        --btn-cart-size: 48px;
        --radius-card: 10px;
        --font-body: 13px;
        --font-price: 15px;
        --font-badge: 9px;
        --gap-vertical: 32px;
    }

    .card-producto[b-6f5p5t4qkt] {
        flex: 0 0 220px;
        width: 220px;
        padding: 0 0 8px 12px;
        gap: 6px;
    }

    .boton[b-6f5p5t4qkt] {
        border-radius: 5px;
    }

    .load-more-btn[b-6f5p5t4qkt] {
        font-size: 18px;
    }
}

/* ≤768px — 2 columnas de 180px */
@media (max-width: 768px) {
    .product-grid[b-6f5p5t4qkt] {
        --padding-lateral: 16px;
        --producto-img-size: 180px;
        --btn-cart-size: 44px;
        --radius-card: 9px;
        --font-body: 12px;
        --font-price: 14px;
        --gap-vertical: 24px;
    }

    .card-producto[b-6f5p5t4qkt] {
        flex: 0 0 180px;
        width: 180px;
        padding: 0 0 6px 10px;
        gap: 4px;
    }

    .load-more-btn[b-6f5p5t4qkt] {
        font-size: 16px;
        gap: 10px;
    }

    .load-more-btn svg[b-6f5p5t4qkt] {
        width: 20px;
        height: 20px;
    }
}

/* ≤520px — columnas de 150px, auto-fill determina cuántas caben */
@media (max-width: 520px) {
    .product-grid[b-6f5p5t4qkt] {
        --padding-lateral: 12px;
        --producto-img-size: 150px;
        --btn-cart-size: 40px;
        --btn-icon-size: 18px;
        --radius-card: 8px;
        --font-price: 13px;
        --gap-vertical: 20px;
        justify-content: space-between;
    }

    .card-producto[b-6f5p5t4qkt] {
        flex: 0 0 150px;
        width: 150px;
    }
}

/* images-only grid responsive: escalar imagen y card a la vez */
@media (max-width: 1400px) {
    .product-grid.images-only-grid .card-producto[b-6f5p5t4qkt] {
        /* img 130px + pl 20px = 150px */
        flex: 0 0 150px;
        width: 150px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-6f5p5t4qkt] {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 1100px) {
    .product-grid.images-only-grid[b-6f5p5t4qkt] {
        --padding-lateral: clamp(16px, 3vw, 48px);
    }

    .product-grid.images-only-grid .card-producto[b-6f5p5t4qkt] {
        /* img 110px + pl 20px = 130px */
        flex: 0 0 130px;
        width: 130px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-6f5p5t4qkt] {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 768px) {
    .product-grid.images-only-grid[b-6f5p5t4qkt] {
        --padding-lateral: 16px;
        /* En móvil: 4 columnas */
        justify-content: space-around;
    }

    .product-grid.images-only-grid .card-producto[b-6f5p5t4qkt] {
        /* img 90px + pl 12px = 102px */
        flex: 0 0 102px;
        width: 102px;
        padding-left: 12px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-6f5p5t4qkt] {
        width: 90px;
        height: 90px;
        border-radius: 8px;
    }
}

/* /Components/Search/GlobalSearch.razor.rz.scp.css */
/* ============================================================================
   BUSCADOR DE LA CABECERA (GlobalSearch.razor)
   El desplegable de productos se ve COMO EN LA WEB: todo su aspecto (barra Categorías/Filtros, columna, filtros,
   parrilla, tarjetas, versión móvil) viene de wwwroot/css/global-search-dropdown.css con las clases de siempre
   (.search-toolbar-row, .search-sidebar, .search-category-btn, .search-sidebar-filters, .search-products-grid...).
   Aquí solo lo nuevo: la lista de sugerencias que cuelga del cuadro («over», como Google), su versión dentro de la
   capa del móvil y la barra fina de carga.
   NO añadir background, border-radius ni padding al contenedor de la barra: vienen de header-nuevo.css.
   ============================================================================ */

.header-nuevo-busqueda-inline:focus-within .header-nuevo-busqueda-linea-wrapper[b-46yfsnmuh6] {
    border-bottom-color: #3CAA36;
}

/* el navegador pinta su propia "x" en type=search: ya hay la nuestra */
.header-nuevo-busqueda-input[b-46yfsnmuh6]::-webkit-search-cancel-button,
.header-nuevo-busqueda-input[b-46yfsnmuh6]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* --- Barra de carga fina (se ve mientras llega la respuesta, sin tapar lo que ya hay) --- */
.bs-progreso[b-46yfsnmuh6] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
    z-index: 2;
    background: #EBF6EB;
}

.bs-progreso[b-46yfsnmuh6]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    background: #3CAA36;
    animation: bs-progreso-b-46yfsnmuh6 0.9s ease-in-out infinite;
}

@keyframes bs-progreso-b-46yfsnmuh6 {
    from { left: -30%; }
    to { left: 100%; }
}

/* --- «Over»: lista de sugerencias como la de Google. Cuelga del cuadro (.header-nuevo-busqueda-inline es
       position: relative), del mismo ancho, y flota sobre el desplegable (fixed, z-index 1100). Escritorio. --- */
.bs-lista[b-46yfsnmuh6] {
    position: absolute;
    top: calc(100% + 10px);
    left: -14px;
    right: -14px;
    z-index: 1150;
    max-height: min(60vh, 440px);
    overflow-y: auto;
    padding: 6px 0;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: bs-lista-entra-b-46yfsnmuh6 0.12s ease-out;
}

@keyframes bs-lista-entra-b-46yfsnmuh6 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.bs-lista .bs-grupo + .bs-grupo[b-46yfsnmuh6] {
    padding-top: 4px;
    border-top: 1px solid #F2F2F2;
}

.bs-opcion[b-46yfsnmuh6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 8px 15px;
    border-left: 3px solid transparent;
    color: #212121;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--search-font-body, 14px);
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.bs-opcion:hover[b-46yfsnmuh6],
.bs-opcion.activa[b-46yfsnmuh6] {
    background: #EBF6EB;
    border-left-color: #3CAA36;
    color: #212121;
}

.bs-opcion-icono[b-46yfsnmuh6] {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: #9E9E9E;
}

.bs-opcion.activa .bs-opcion-icono[b-46yfsnmuh6],
.bs-opcion:hover .bs-opcion-icono[b-46yfsnmuh6] {
    color: #3CAA36;
}

.bs-opcion-texto[b-46yfsnmuh6] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-opcion-texto strong[b-46yfsnmuh6] {
    font-weight: 700;
}

.bs-opcion-detalle[b-46yfsnmuh6] {
    flex: 0 1 auto;
    max-width: 55%;
    margin-left: auto;
    overflow: hidden;
    color: #757575;
    font-size: var(--search-font-small, 12px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Móvil: las sugerencias van dentro de la capa, encima del desplegable (no flotan) --- */
.bs-sugerencias[b-46yfsnmuh6] {
    flex: 0 0 auto;
    width: 100%;
    padding: 6px 0;
    border-bottom: 1px solid #E0E0E0;
    background: #FFFFFF;
}

.bs-sugerencias .bs-opcion[b-46yfsnmuh6] {
    min-height: 44px;   /* objetivo táctil */
    padding: 8px 16px 8px 13px;
    font-size: 15px;
}

/* sin productos pero con sugerencias: el aviso de la web, debajo */
.bs-sin-productos[b-46yfsnmuh6] {
    margin: 0;
    padding: 24px 16px;
    color: #757575;
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--search-font-body, 14px);
    text-align: center;
}

/* --- Filtros: lo que la web no tenía y sí el panel de /productos (con el aspecto de la web) --- */

/* "Ordenar por": la casilla redonda, como las cuadradas de la web */
.search-filter-checkbox-option input[type="radio"][b-46yfsnmuh6] {
    width: clamp(15px, 1.1vw, 18px);
    height: clamp(15px, 1.1vw, 18px);
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #3CAA36;
}

/* buscador de marcas (cuando hay más de 6) */
.bs-filtro-buscar[b-46yfsnmuh6] {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 6px;
    padding: 6px 10px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background: #FFFFFF;
    color: #212121;
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(12px, 0.85vw, 14px);
    outline: none;
}

.bs-filtro-buscar:focus[b-46yfsnmuh6] {
    border-color: #3CAA36;
}

/* cuántos filtros hay puestos, en el botón Filtros */
.bs-filtros-num[b-46yfsnmuh6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 9px;
    background: #3CAA36;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* en el móvil la web deja los botones en solo icono (esconde sus span): el número sí se ve, pegado al icono */
@media (max-width: 480px) {
    .mobile-search-overlay .toolbar-action-btn .bs-filtros-num[b-46yfsnmuh6] {
        display: inline-flex;
    }
}

/* los filtros puestos, encima de los productos: cada uno con su × */
.bs-chips[b-46yfsnmuh6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: var(--search-gap, 16px);
}

.bs-chip[b-46yfsnmuh6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px 0 12px;
    border: 1px solid #3CAA36;
    border-radius: 14px;
    background: #EBF6EB;
    color: #212121;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.bs-chip:hover[b-46yfsnmuh6] {
    background: #DDF0DC;
}

.bs-chip-x[b-46yfsnmuh6] {
    color: #3CAA36;
    font-size: 16px;
    line-height: 1;
}

.bs-chips-limpiar[b-46yfsnmuh6] {
    padding: 0 4px;
    border: 0;
    background: none;
    color: #3CAA36;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* nada con estos filtros: "Limpiar filtros" (el botón de la web, fuera de su barra) */
.bs-vacio-limpiar[b-46yfsnmuh6] {
    margin-top: 12px;
    padding: 8px 20px;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    background: #FFFFFF;
    color: #3CAA36;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.bs-vacio-limpiar:hover[b-46yfsnmuh6] {
    background: #EBF6EB;
}
/* /Components/Shared/AddToListModal.razor.rz.scp.css */
.add-to-list.modal-overlay[b-mb4xroq5os] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.add-to-list .modal-results[b-mb4xroq5os] {
    position: relative;
    width: min(700px, 90vw);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.add-to-list .modal-close[b-mb4xroq5os] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.add-to-list .modal-addtolist-body[b-mb4xroq5os] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.add-to-list .producto-modal[b-mb4xroq5os] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.add-to-list .producto-modal .product-image[b-mb4xroq5os] {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
}

.add-to-list .producto-modal .product-img[b-mb4xroq5os] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-to-list .producto-modal .producto-info[b-mb4xroq5os] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.add-to-list .producto-modal .descripcion[b-mb4xroq5os] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.add-to-list .producto-modal .referencia[b-mb4xroq5os] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.add-to-list .select-wrapper[b-mb4xroq5os] {
    position: relative;
}

    .add-to-list .select-wrapper:focus-within .arrow[b-mb4xroq5os] {
        transform: translateY(-50%) rotate(90deg);
    }

    .add-to-list .select-wrapper .img[b-mb4xroq5os] {
        position: relative;
        width: 11.5px;
        height: 6.5px;
        margin-right: -0.75px;
        margin-left: -0.75px;
    }

.add-to-list .form-select[b-mb4xroq5os] {
    appearance: none;
    background-color: var(--blanco);
    background-image: none;
    border: 2px solid var(--grisgris-10) !important;
    border-radius: 6px;
    color: var(--negro);
    flex: 1;
    font-family: "Nunito Sans-Regular", Helvetica;
    font-size: 16px;
    font-weight: 400;
    height: 59px;
    letter-spacing: 0.15px;
    line-height: 24px;
    margin-top: 10px;
    padding: 17px 16px;
    padding-right: 50px;
    position: relative;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .add-to-list .form-select:focus[b-mb4xroq5os] {
        border: 2px solid #3CAA36 !important;
        outline: none !important;
    }

.add-to-list .arrow[b-mb4xroq5os] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%) rotate(0deg); /* Estado por defecto */
    transition: transform 0.3s ease;
}

.add-to-list .modal-actions[b-mb4xroq5os] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.add-to-list .boton.new[b-mb4xroq5os]{
    margin-right: auto;
}

.add-to-list .boton[b-mb4xroq5os] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.add-to-list .boton:hover[b-mb4xroq5os] {
    background-color: #80C87C;
}

.add-to-list .state-layer[b-mb4xroq5os], .add-to-list .state-layer-2[b-mb4xroq5os] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.add-to-list .label-text[b-mb4xroq5os] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.add-to-list .boton-2[b-mb4xroq5os] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.add-to-list .boton-2:hover[b-mb4xroq5os] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.add-to-list .boton-2:hover .label-text-2[b-mb4xroq5os] {
    color: var(--blanco);
}

.add-to-list .label-text-2[b-mb4xroq5os] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.add-to-list .alert-success[b-mb4xroq5os], .add-to-list .alert-danger[b-mb4xroq5os] {
    text-align: center;
}
/* /Components/Shared/BotonAyuda.razor.rz.scp.css */
/* Estilo alineado con Figma (node 3499:34076, "boton" / "Te ayudamos"):
   fondo blanco, borde amarillo, radius 6px, Nunito Sans SemiBold 16/24. */
.ba-help-btn[b-ecv8lq5fy0] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blanco);
    color: var(--negro);
    border: 1px solid var(--alternativo-oscuro);
    border-radius: 6px;
    padding: 10px 24px;
    height: clamp(44px, 3.5vw, 52px);
    width: clamp(300px, 40vw, 592px);
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-decoration: none;
    text-decoration-line: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.ba-help-btn:hover[b-ecv8lq5fy0] {
    background-color: var(--alternativo);
    color: var(--negro);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 214, 35, 0.3);
}
/* /Components/Shared/BrandSlider.razor.rz.scp.css */
/* BRAND SLIDER COMPONENT */
.brand-slider-section[b-7whukxnpiq] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --btn-icon-size: clamp(16px, 1.25vw, 24px);
    --brand-height: clamp(25px, 2.6vw, 50px);
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);
    --blanco: #FFFFFF;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    background-color: var(--blanco);
}

.section-header[b-7whukxnpiq] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.section-title[b-7whukxnpiq] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title-xl);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    margin: 0;
}

.vector-3[b-7whukxnpiq] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #ABABAB;
    border-radius: 0.5px;
}

.brands-slider-wrapper[b-7whukxnpiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    width: calc(100% + var(--padding-lateral) * 2);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    align-self: center;
}

.brands-slider-container[b-7whukxnpiq] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.brands-slider-container[b-7whukxnpiq]::before,
.brands-slider-container[b-7whukxnpiq]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(50px, 5vw, 100px);
    z-index: 2;
    pointer-events: none;
}

.brands-slider-container[b-7whukxnpiq]::before {
    left: 0;
    background: linear-gradient(to right, var(--blanco) 0%, transparent 100%);
}

.brands-slider-container[b-7whukxnpiq]::after {
    right: 0;
    background: linear-gradient(to left, var(--blanco) 0%, transparent 100%);
}

.brands-nav-btn[b-7whukxnpiq] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.brands-nav-btn:hover[b-7whukxnpiq] {
    opacity: 0.6;
}

.brands-nav-btn svg[b-7whukxnpiq] {
    width: 100%;
    height: 100%;
}

.brands-track-infinite[b-7whukxnpiq] {
    display: flex;
    width: max-content;
    gap: var(--gap-md);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.brand-item[b-7whukxnpiq] {
    flex-shrink: 0;
    height: var(--brand-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.brand-item:hover[b-7whukxnpiq] {
    transform: scale(1.1);
}

.brand-item img[b-7whukxnpiq] {
    max-height: var(--brand-height);
    width: auto;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .brand-slider-section[b-7whukxnpiq] {
        --padding-lateral: 30px;
        --gap-md: 14px;
        --gap-lg: 30px;
        --brand-height: 30px;
    }

    .brands-slider-wrapper[b-7whukxnpiq] {
        padding: 10px var(--padding-lateral);
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .brands-nav-btn[b-7whukxnpiq] {
        display: none;
    }

    .brands-slider-container[b-7whukxnpiq]::before,
    .brands-slider-container[b-7whukxnpiq]::after {
        width: 30px;
    }

    .brands-track-infinite[b-7whukxnpiq] {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .brands-track-infinite[b-7whukxnpiq]::-webkit-scrollbar {
        display: none;
    }

    .brand-item[b-7whukxnpiq] {
        scroll-snap-align: start;
    }

    .brand-item:hover[b-7whukxnpiq] {
        transform: none;
    }
}

@media (max-width: 768px) {
    .brand-slider-section[b-7whukxnpiq] {
        --padding-lateral: 16px;
        --gap-md: 12px;
        --gap-lg: 24px;
        --brand-height: 24px;
    }

    .brands-slider-wrapper[b-7whukxnpiq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }
}

@media (max-width: 480px) {
    .brand-slider-section[b-7whukxnpiq] {
        --padding-lateral: 12px;
    }

    .brands-slider-wrapper[b-7whukxnpiq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }
}
/* /Components/Shared/CartArticulosRegalo.razor.rz.scp.css */
.articulos-regalo.modal-overlay[b-3ihdea1q26] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.articulos-regalo .modal-results[b-3ihdea1q26] {
    position: relative;
    width: min(700px, 90vw);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.articulos-regalo .modal-close[b-3ihdea1q26] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.articulos-regalo .modal-regalos-body[b-3ihdea1q26] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 270px;
    overflow-y: auto;
    padding-right: 8px; 
}

.articulos-regalo .producto-modal[b-3ihdea1q26] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.articulos-regalo .producto-modal:last-child[b-3ihdea1q26] {
    border-bottom: none;
}

.articulos-regalo .producto-modal .product-image[b-3ihdea1q26] {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
}

.articulos-regalo .producto-modal .product-img[b-3ihdea1q26] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.articulos-regalo .producto-modal .producto-info[b-3ihdea1q26] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.articulos-regalo .producto-modal .descripcion[b-3ihdea1q26] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.articulos-regalo .producto-modal .referencia[b-3ihdea1q26] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/* --- Skeleton de carga (mismo layout que .producto-modal, evita el flash de "No se han encontrado regalos") --- */
.articulos-regalo .regalo-skeleton .product-image .skeleton[b-3ihdea1q26] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line[b-3ihdea1q26] {
    margin-bottom: 0; /* el gap de .producto-info separa las líneas */
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line.desc[b-3ihdea1q26] {
    width: 65%;
    height: 18px;
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line.ref[b-3ihdea1q26] {
    width: 45%;
    height: 16px;
}

.articulos-regalo .label-text[b-3ihdea1q26] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.articulos-regalo .label-text-2[b-3ihdea1q26] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}
/* /Components/Shared/CartDropdown.razor.rz.scp.css */
/* ============================================= */
/* CART DROPDOWN - 100% Responsive (Figma match) */
/* ============================================= */

/* --- CSS Variables (sistema fluido con clamp) --- */
.cartDropdown.modal-overlay[b-q0wkuf3lfg] {
    /* Panel */
    --panel-width: min(756px, 100vw);
    --panel-padding-x: clamp(20px, 4.69vw, 90px);
    --panel-padding-top: clamp(20px, 2.08vw, 40px);
    --panel-padding-bottom: clamp(32px, 3.65vw, 70px);
    --panel-radius: 15px;
    /* Tipografía */
    --title-font: clamp(26px, 2.5vw, 48px);
    --body-font: clamp(13px, 0.83vw, 16px);
    --total-font: clamp(18px, 1.25vw, 24px);
    --btn-font: clamp(13px, 0.83vw, 16px);
    /* Espaciado */
    --gap-title-items: clamp(28px, 2.86vw, 55px);
    --gap-items: 0px;
    --gap-row: clamp(12px, 1.04vw, 20px);
    --gap-total: clamp(20px, 2.08vw, 40px);
    /* Producto */
    --img-size: clamp(60px, 5.21vw, 100px);
    --img-radius: clamp(8px, 0.73vw, 14px);
    --row-padding-y: clamp(4px, 0.312vw, 6px);
    /* Contador */
    --counter-width: clamp(100px, 6.68vw, 128px);
    --counter-height: clamp(36px, 2.4vw, 46px);
    --counter-radius: 8px;
    --counter-btn-size: clamp(16px, 1.08vw, 20px);
    /* Botones */
    --delete-btn-size: clamp(18px, 1.25vw, 24px);
    --close-btn-size: clamp(18px, 1.25vw, 24px);
    --cta-height: clamp(44px, 2.81vw, 54px);
    --cta-radius: 6px;
}

/* ============================================= */
/* OVERLAY */
/* ============================================= */
.cartDropdown.modal-overlay[b-q0wkuf3lfg] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    animation: overlayFadeIn-b-q0wkuf3lfg 0.25s ease;
}

@keyframes overlayFadeIn-b-q0wkuf3lfg {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================= */
/* PANEL PRINCIPAL */
/* ============================================= */
.cartDropdown-panel[b-q0wkuf3lfg] {
    position: relative;
    width: var(--panel-width);
    height: 100%;
    background: #FFFFFF;
    border-radius: var(--panel-radius) 0 0 var(--panel-radius);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: panelSlideIn-b-q0wkuf3lfg 0.3s ease;
}

@keyframes panelSlideIn-b-q0wkuf3lfg {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.cartDropdown-panel .dropdown-content[b-q0wkuf3lfg] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--panel-padding-top) var(--panel-padding-x) var(--panel-padding-bottom);
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    /* Reset master.css overrides */
    inset: unset;
    right: unset;
    top: unset;
    box-shadow: none;
}

/* ============================================= */
/* CABECERA (Título + Cerrar) */
/* ============================================= */
.cartDropdown-panel .carritohead[b-q0wkuf3lfg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.cartDropdown-panel .carritohead h2[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--title-font);
    color: #2D2E2E;
    margin: 0;
    line-height: 1.1;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    display: block;
}

.cartDropdown-panel #close[b-q0wkuf3lfg] {
    width: var(--close-btn-size);
    height: var(--close-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2D2E2E;
    font-size: var(--close-btn-size);
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
    margin: 0;
}

.cartDropdown-panel #close:hover[b-q0wkuf3lfg] {
    opacity: 0.6;
}

/* ============================================= */
/* LISTA DE PRODUCTOS */
/* ============================================= */
.cartDropdown-panel .cart-items[b-q0wkuf3lfg] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: var(--gap-title-items) 0 0 0;
    padding: 0;
    max-height: none;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.cartDropdown-panel .cart-items[b-q0wkuf3lfg]::-webkit-scrollbar {
    width: 4px;
}

.cartDropdown-panel .cart-items[b-q0wkuf3lfg]::-webkit-scrollbar-track {
    background: transparent;
}

.cartDropdown-panel .cart-items[b-q0wkuf3lfg]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

.cartDropdown-panel .cart-items-list[b-q0wkuf3lfg] {
    display: flex;
    flex-direction: column;
}

.cartDropdown-panel #labelCartEmpty[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--body-font);
    color: #9E9E9E;
    text-align: center;
    padding: clamp(30px, 3vw, 60px) 0;
    margin: 0;
}

/* ============================================= */
/* FILA DE PRODUCTO */
/* ============================================= */
.cartDropdown-panel .cart-item[b-q0wkuf3lfg] {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    padding: var(--row-padding-y) 0;
    border-bottom: 1px dashed #EEEEEE;
    max-height: none;
    width: 100%;
    box-sizing: border-box;
}

.cartDropdown-panel .cart-item:last-child[b-q0wkuf3lfg] {
    border-bottom: 1px dashed #EEEEEE;
}

/* Imagen */
.cartDropdown-panel .cart-item-image[b-q0wkuf3lfg] {
    flex-shrink: 0;
    width: var(--img-size);
    height: var(--img-size);
    border-radius: var(--img-radius);
    overflow: hidden;
}

.cartDropdown-panel .cart-item-image img[b-q0wkuf3lfg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--img-radius);
    mix-blend-mode: multiply;
}

/* Info (nombre + código) */
.cartDropdown-panel .cart-item-info[b-q0wkuf3lfg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    text-align: left;
}

.cartDropdown-panel .product-name[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.cartDropdown-panel .product-name:hover[b-q0wkuf3lfg] {
    color: #3CAA36;
}

.cartDropdown-panel .product-code[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Precio */
.cartDropdown-panel .cart-item-price[b-q0wkuf3lfg] {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cartDropdown-panel .price-label[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1;
    color: #000000;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.cartDropdown-panel .price-value[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Contador de cantidad */
.cartDropdown-panel .quantity-control[b-q0wkuf3lfg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F5F5F5;
    border-radius: var(--counter-radius);
    width: var(--counter-width);
    height: var(--counter-height);
    padding: 0 clamp(8px, 0.64vw, 12px);
    flex-shrink: 0;
    gap: 0;
    box-sizing: border-box;
}

.cartDropdown-panel .qty-btn[b-q0wkuf3lfg] {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    font-size: var(--counter-btn-size);
    width: var(--counter-btn-size);
    height: var(--counter-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.cartDropdown-panel .qty-btn:hover:not(:disabled)[b-q0wkuf3lfg] {
    color: #3CAA36;
}

.cartDropdown-panel .qty-btn:disabled[b-q0wkuf3lfg] {
    opacity: 0.3;
    cursor: not-allowed;
}

[b-q0wkuf3lfg] .cartDropdown-panel .qty-input {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--body-font);
    color: #121212;
    text-align: center;
    min-width: 20px;
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    padding: 0;
}

/* Botón eliminar (papelera) */
.cartDropdown-panel .delete-btn[b-q0wkuf3lfg] {
    background: none;
    border: none;
    cursor: pointer;
    color: #666666;
    width: var(--delete-btn-size);
    height: var(--delete-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    font-size: var(--delete-btn-size);
    transition: color 0.2s ease;
}

.cartDropdown-panel .delete-btn:hover[b-q0wkuf3lfg] {
    color: #dc3545;
}

/* ============================================= */
/* ZONA INFERIOR: TOTAL + BOTONES CTA (Figma match) */
/* ============================================= */

/* Ocultar el hr redundante del master */
.cartDropdown-panel .dropdown-content > div[style*="margin-left: 10%"][b-q0wkuf3lfg] {
    display: none !important;
}

/* Contenedor de total + botones */
.cartDropdown-panel .cart-bottom-section[b-q0wkuf3lfg] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.08vw, 40px);
    flex-shrink: 0;
    width: 100%;
    padding: clamp(16px, 2.34vw, 45px) 0 0 0;
    margin: 0;
}

/* Total Precios */
.cartDropdown-panel .total-price[b-q0wkuf3lfg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: clamp(14px, 1.04vw, 20px);
    border-bottom: 1px solid #BDBDBD;
    margin: 0;
    width: 100%;
}

.cartDropdown-panel .total-price p[b-q0wkuf3lfg] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--total-font);
    color: #141414;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Contenedor de los dos botones CTA */
.cartDropdown-panel .cta-buttons[b-q0wkuf3lfg] {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.3vw, 25px);
    width: 100%;
    margin: 0;
}

/* Estilo base compartido por ambos botones */
.cartDropdown-panel .cta-btn[b-q0wkuf3lfg] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--cta-height);
    border-radius: var(--cta-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--btn-font);
    letter-spacing: 0.15px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    box-sizing: border-box;
}

/* Botón "Añadir a una Lista" — borde amarillo, fondo blanco */
.cartDropdown-panel .cta-add-list[b-q0wkuf3lfg] {
    background: #FFFFFF;
    border: 1px solid #ECC61B;
    color: #212121;
}

    .cartDropdown-panel .cta-add-list:hover[b-q0wkuf3lfg] {
        background-color: #FDD623;
        border-color: #FDD623;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* Botón "IR A LA CESTA" — fondo verde */
.cartDropdown-panel .cta-go-cart[b-q0wkuf3lfg] {
    background: #3CAA36;
    border: 1px solid #3CAA36;
    color: #FFFFFF;
    text-transform: uppercase;
}

    .cartDropdown-panel .cta-go-cart:hover[b-q0wkuf3lfg] {
        background: #80C87C;
        border-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* Botón "IR A LA CESTA" en ancho completo (usuario anónimo, sin botón de lista) */
.cartDropdown-panel .cta-go-cart--full[b-q0wkuf3lfg] {
    flex: 1 1 100%;
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* ============================================= */
@media (max-width: 1024px) {
    .cartDropdown.modal-overlay[b-q0wkuf3lfg] {
        --panel-width: min(600px, 100vw);
        --panel-padding-x: clamp(20px, 5vw, 50px);
        --panel-padding-top: clamp(20px, 3vw, 30px);
        --panel-padding-bottom: clamp(28px, 4vw, 50px);
        --title-font: clamp(28px, 4vw, 36px);
        --body-font: clamp(13px, 1.5vw, 15px);
        --total-font: clamp(18px, 2.5vw, 22px);
        --img-size: clamp(60px, 10vw, 80px);
        --counter-width: clamp(100px, 14vw, 120px);
        --counter-height: clamp(36px, 5vw, 42px);
        --gap-title-items: clamp(24px, 4vw, 40px);
        --gap-row: clamp(12px, 2vw, 16px);
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* ============================================= */
@media (max-width: 768px) {
    .cartDropdown.modal-overlay[b-q0wkuf3lfg] {
        --panel-width: 100vw;
        --panel-padding-x: 20px;
        --panel-padding-top: 20px;
        --panel-padding-bottom: 24px;
        --panel-radius: 0px;
        --title-font: 28px;
        --body-font: 14px;
        --total-font: 20px;
        --btn-font: 14px;
        --img-size: 70px;
        --img-radius: 10px;
        --counter-width: 110px;
        --counter-height: 40px;
        --gap-title-items: 24px;
        --gap-row: 12px;
        --gap-total: 20px;
        --delete-btn-size: 22px;
        --close-btn-size: 22px;
        --cta-height: 48px;
    }

    .cartDropdown-panel[b-q0wkuf3lfg] {
        border-radius: 0;
    }

    .cartDropdown-panel .cart-item[b-q0wkuf3lfg] {
        flex-wrap: wrap;
    }

    .cartDropdown-panel .cart-item-info[b-q0wkuf3lfg] {
        flex: 1;
        min-width: calc(100% - var(--img-size) - var(--gap-row) - 60px);
    }

    .cartDropdown-panel .cart-item-price[b-q0wkuf3lfg] {
        flex-direction: row;
        gap: 6px;
        align-items: center;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .cartDropdown.modal-overlay[b-q0wkuf3lfg] {
        --panel-padding-x: 16px;
        --panel-padding-top: 16px;
        --panel-padding-bottom: 20px;
        --title-font: 24px;
        --body-font: 13px;
        --total-font: 18px;
        --btn-font: 13px;
        --img-size: 60px;
        --img-radius: 8px;
        --counter-width: 100px;
        --counter-height: 36px;
        --gap-title-items: 20px;
        --gap-row: 10px;
        --gap-total: 16px;
        --row-padding-y: 10px;
    }

    .cartDropdown-panel .cart-item[b-q0wkuf3lfg] {
        gap: 10px;
    }
}
/* /Components/Shared/ClienteSwitcher.razor.rz.scp.css */
/* ============================================
   ClienteSwitcher — Header inline dropdown
   Positioning: fixed under header (like GlobalSearch)
   Design tokens: Nunito Sans, #3CAA36, #2D2E2E, #9E9E9E
   ============================================ */

.cs-wrapper[b-wiuqfsf7dx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    outline: none;
    margin-left: -12px; /* Closer to profile icon */
}

/* ============================================
   TRIGGER — borderless, matching header font
   ============================================ */
.cs-trigger[b-wiuqfsf7dx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 0.8vw, 13px);
    line-height: 1.3;
    color: #3CAA36;
    white-space: nowrap;
    transition: font-weight 0.15s ease;
    outline: none;
}

.cs-trigger:hover[b-wiuqfsf7dx] {
    text-shadow: 0.4px 0 0 currentColor;
}

.cs-trigger:hover .cs-chevron[b-wiuqfsf7dx] {
    color: #2D8B2A;
}

.cs-trigger:disabled[b-wiuqfsf7dx] {
    opacity: 0.6;
    cursor: wait;
}

/* Company name */
.cs-empresa-name[b-wiuqfsf7dx] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron */
.cs-chevron[b-wiuqfsf7dx] {
    flex-shrink: 0;
    color: #3CAA36;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-chevron--open[b-wiuqfsf7dx] {
    transform: rotate(180deg);
}

/* Spinner */
.cs-spinner[b-wiuqfsf7dx] {
    width: 12px;
    height: 12px;
    border: 2px solid #E0E0E0;
    border-top-color: #3CAA36;
    border-radius: 50%;
    animation: cs-spin-b-wiuqfsf7dx 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes cs-spin-b-wiuqfsf7dx {
    to { transform: rotate(360deg); }
}

/* ============================================
   DROPDOWN — fixed under header (like GlobalSearch)
   ============================================ */
.cs-dropdown[b-wiuqfsf7dx] {
    position: fixed;
    top: var(--header-height, clamp(90px, 8vw, 153px));
    right: clamp(16px, 6vw, 115px);
    width: 320px;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    overflow: hidden;
    animation: cs-slideIn-b-wiuqfsf7dx 0.2s ease-out;
}

@keyframes cs-slideIn-b-wiuqfsf7dx {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header label */
.cs-dropdown-header[b-wiuqfsf7dx] {
    padding: 12px 16px 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #9E9E9E;
    border-bottom: 1px solid #F0F0F0;
    background: #FFFFFF;
}

/* Scrollable item list */
.cs-dropdown-list[b-wiuqfsf7dx] {
    max-height: min(50vh, 400px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Custom scrollbar */
.cs-dropdown-list[b-wiuqfsf7dx]::-webkit-scrollbar {
    width: 4px;
}

.cs-dropdown-list[b-wiuqfsf7dx]::-webkit-scrollbar-track {
    background: transparent;
}

.cs-dropdown-list[b-wiuqfsf7dx]::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 4px;
}

.cs-dropdown-list[b-wiuqfsf7dx]::-webkit-scrollbar-thumb:hover {
    background: #AAAAAA;
}

/* ============================================
   ITEMS
   ============================================ */
.cs-dropdown-item[b-wiuqfsf7dx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #F8F8F8;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
    font-family: 'Nunito Sans', sans-serif;
}

.cs-dropdown-item:last-child[b-wiuqfsf7dx] {
    border-bottom: none;
}

.cs-dropdown-item:hover[b-wiuqfsf7dx] {
    background-color: #F5FAF5;
}

.cs-dropdown-item--active[b-wiuqfsf7dx] {
    background-color: #EBF6EB;
}

.cs-dropdown-item--active:hover[b-wiuqfsf7dx] {
    background-color: #E0F2E0;
}

.cs-dropdown-item:disabled[b-wiuqfsf7dx] {
    opacity: 0.5;
    cursor: wait;
}

.cs-dropdown-item-left[b-wiuqfsf7dx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cs-dropdown-item-name[b-wiuqfsf7dx] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    color: #2D2E2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-dropdown-item--active .cs-dropdown-item-name[b-wiuqfsf7dx] {
    color: #2D7A2A;
}

.cs-dropdown-item-code[b-wiuqfsf7dx] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.3;
    color: #9E9E9E;
    letter-spacing: 0.2px;
}

.cs-check[b-wiuqfsf7dx] {
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .cs-empresa-name[b-wiuqfsf7dx] {
        max-width: 140px;
    }

    .cs-dropdown[b-wiuqfsf7dx] {
        width: 280px;
    }
}

/* Below desktop breakpoint: hide in header */
@media (max-width: 991px) {
    .cs-wrapper[b-wiuqfsf7dx] {
        display: none;
    }
}
/* /Components/Shared/CrearListaModal.razor.rz.scp.css */
/* ============================================= */
/* CREAR LISTA MODAL - Pixel-perfect Figma       */
/* Node: 4828:38319                               */
/* ============================================= */

/* ============================================= */
/* OVERLAY (fondo oscuro)                        */
/* ============================================= */
.crear-lista-overlay[b-3ugqkdy17n] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

/* ============================================= */
/* MODAL (caja blanca)                           */
/* Figma: w-703px, rounded-15px, shadow,         */
/* pt-50 pb-75 px-100                            */
/* ============================================= */
.crear-lista-modal[b-3ugqkdy17n] {
    position: relative;
    width: clamp(300px, 36.62vw, 703px);
    background-color: #FFFFFF;
    border-radius: clamp(10px, 0.78vw, 15px);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: clamp(30px, 2.60vw, 50px) clamp(24px, 5.21vw, 100px) clamp(40px, 3.91vw, 75px);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    animation: crearListaFadeIn-b-3ugqkdy17n 0.2s ease-out;
}

@keyframes crearListaFadeIn-b-3ugqkdy17n {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

/* ============================================= */
/* CLOSE BUTTON (X)                              */
/* Figma: absolute, top-30, right-30, 24x24      */
/* ============================================= */
.crear-lista-close[b-3ugqkdy17n] {
    position: absolute;
    top: clamp(16px, 1.56vw, 30px);
    right: clamp(16px, 1.56vw, 30px);
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.crear-lista-close:hover[b-3ugqkdy17n] {
    opacity: 0.6;
}

/* ============================================= */
/* CONTENT CONTAINER                             */
/* Figma: flex-col, gap-45                       */
/* ============================================= */
.crear-lista-content[b-3ugqkdy17n] {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.34vw, 45px);
    align-items: flex-start;
    width: 100%;
}

/* ============================================= */
/* TITLE                                         */
/* Figma: 28px, Regular, center, black           */
/* ============================================= */
.crear-lista-title[b-3ugqkdy17n] {
    width: 100%;
    margin: 0;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: clamp(20px, 1.46vw, 28px);
    line-height: clamp(28px, 1.88vw, 36px);
    text-align: center;
}

/* ============================================= */
/* INPUT FIELD                                   */
/* Figma: bg #F5F5F5, rounded-6, px-16 py-17,   */
/* placeholder 18px Light #9E9E9E                */
/* ============================================= */
.crear-lista-field[b-3ugqkdy17n] {
    width: 100%;
}

.crear-lista-input[b-3ugqkdy17n] {
    width: 100%;
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: clamp(12px, 0.89vw, 17px) 16px;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 0.94vw, 18px);
    color: #212121;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow 0.15s ease;
}

.crear-lista-input[b-3ugqkdy17n]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
}

.crear-lista-input:focus[b-3ugqkdy17n] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

/* ============================================= */
/* ALERTS                                        */
/* ============================================= */
.crear-lista-alert[b-3ugqkdy17n] {
    width: 100%;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    margin-top: -20px;
}

.crear-lista-alert-danger[b-3ugqkdy17n] {
    background-color: #fef2f2;
    color: #dc3545;
    border: 1px solid #f5c6cb;
}

.crear-lista-alert-success[b-3ugqkdy17n] {
    background-color: #f0fdf4;
    color: #3caa36;
    border: 1px solid #bbf7d0;
}

/* ============================================= */
/* CREAR BUTTON                                  */
/* Figma: h-54, green bg, rounded-6, full-width  */
/* text: 16px SemiBold white, tracking 0.15px    */
/* ============================================= */
.crear-lista-btn-wrapper[b-3ugqkdy17n] {
    width: 100%;
}

.crear-lista-btn[b-3ugqkdy17n] {
    width: 100%;
    height: clamp(44px, 2.81vw, 54px);
    background-color: #3CAA36;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.crear-lista-btn:hover[b-3ugqkdy17n] {
    background-color: #80C87C;
}

.crear-lista-btn-layer[b-3ugqkdy17n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    width: 100%;
    height: 100%;
}

.crear-lista-btn-text[b-3ugqkdy17n] {
    font-family: 'Nunito Sans', Helvetica, sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    font-size: clamp(14px, 0.83vw, 16px);
    text-align: center;
    letter-spacing: 0.15px;
    line-height: 24px;
    white-space: nowrap;
}

/* ============================================= */
/* SPINNER                                       */
/* ============================================= */
.crear-lista-btn .spinner-border[b-3ugqkdy17n] {
    color: #FFFFFF;
    width: 18px;
    height: 18px;
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px)         */
/* ============================================= */
@media (max-width: 768px) {
    .crear-lista-modal[b-3ugqkdy17n] {
        width: 100%;
        max-width: 500px;
        padding: 30px 24px 40px;
        border-radius: 12px;
    }

    .crear-lista-close[b-3ugqkdy17n] {
        top: 16px;
        right: 16px;
    }

    .crear-lista-content[b-3ugqkdy17n] {
        gap: 24px;
    }

    .crear-lista-title[b-3ugqkdy17n] {
        font-size: 22px;
        line-height: 30px;
    }

    .crear-lista-input[b-3ugqkdy17n] {
        font-size: 16px;
        padding: 14px 16px;
    }

    .crear-lista-btn[b-3ugqkdy17n] {
        height: 48px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .crear-lista-overlay[b-3ugqkdy17n] {
        padding: 12px;
    }

    .crear-lista-modal[b-3ugqkdy17n] {
        padding: 24px 16px 32px;
        border-radius: 10px;
    }

    .crear-lista-close[b-3ugqkdy17n] {
        top: 12px;
        right: 12px;
    }

    .crear-lista-content[b-3ugqkdy17n] {
        gap: 20px;
    }

    .crear-lista-title[b-3ugqkdy17n] {
        font-size: 20px;
        line-height: 28px;
    }

    .crear-lista-btn[b-3ugqkdy17n] {
        height: 46px;
    }
}
/* /Components/Shared/CustomDatePicker.razor.rz.scp.css */
/* ====================================================================
   CustomDatePicker — Scoped CSS
   Diseño basado en Figma node 389:15892
   Colores: Primario #3CAA36, Fondo #EBF6EB, Negro #212121, Blanco #FFF
   Tipografía: Nunito Sans
   ==================================================================== */

/* --- Wrapper --- */
.cdp-wrapper[b-itivid4d63] {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* --- Input --- */
.cdp-input-wrapper[b-itivid4d63] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.cdp-input[b-itivid4d63] {
    width: 100%;
    cursor: pointer;
    caret-color: transparent;
    padding-right: 40px !important;
}

.cdp-calendar-icon[b-itivid4d63] {
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* --- Popup --- */
.cdp-popup[b-itivid4d63] {
    position: absolute;
    left: 0;
    z-index: 1000;
    min-width: 320px;
}

/* Abajo del input (por defecto) */
.cdp-popup.cdp-popup-below[b-itivid4d63] {
    top: calc(100% + 8px);
    bottom: auto;
    animation: cdp-fadeInDown-b-itivid4d63 0.15s ease-out;
}

/* Arriba del input */
.cdp-popup.cdp-popup-above[b-itivid4d63] {
    bottom: calc(100% + 8px);
    top: auto;
    animation: cdp-fadeInUp-b-itivid4d63 0.15s ease-out;
}

@keyframes cdp-fadeInDown-b-itivid4d63 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

@keyframes cdp-fadeInUp-b-itivid4d63 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* --- Calendar container --- */
.cdp-calendar[b-itivid4d63] {
    background-color: #EBF6EB;
    border-radius: 15px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    font-family: 'Nunito Sans', sans-serif;
    color: #212121;
}

/* --- Header (Mes Año + flechas) --- */
.cdp-header[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px 4px 16px;
}

.cdp-month-btn[b-itivid4d63] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 10px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 100px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #212121;
    letter-spacing: 0.25px;
    line-height: 20px;
    transition: background-color 0.15s ease;
}

.cdp-month-btn:hover[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.08);
}

.cdp-dropdown-arrow[b-itivid4d63] {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.cdp-arrow-up[b-itivid4d63] {
    transform: rotate(180deg);
}

.cdp-nav-buttons[b-itivid4d63] {
    display: flex;
    align-items: center;
    gap: 0;
}

.cdp-nav-btn[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 100px;
    padding: 8px;
    transition: background-color 0.15s ease;
}

.cdp-nav-btn:hover[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.08);
}

.cdp-nav-btn svg[b-itivid4d63] {
    width: 8px;
    height: 14px;
    flex-shrink: 0;
}

/* --- Weekday headers --- */
.cdp-weekdays[b-itivid4d63] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 12px;
    height: 48px;
}

.cdp-weekday[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
    letter-spacing: 0.5px;
    line-height: 24px;
}

/* --- Days grid --- */
.cdp-days-grid[b-itivid4d63] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 12px 8px 12px;
}

.cdp-day[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    max-width: 48px;
    max-height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
    letter-spacing: 0.5px;
    line-height: 24px;
    border-radius: 100px;
    transition: background-color 0.15s ease;
    padding: 0;
    margin: 0 auto;
}

.cdp-day:hover:not(.cdp-day-selected):not(.cdp-day-empty)[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.12);
}

.cdp-day-empty[b-itivid4d63] {
    cursor: default;
}

.cdp-day-selected[b-itivid4d63] {
    background-color: #3CAA36;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.25px;
    line-height: 20px;
}

.cdp-day-today[b-itivid4d63] {
    border: 1px solid #3CAA36;
    color: #3CAA36;
    font-weight: 600;
}

/* --- Month selector grid --- */
.cdp-month-grid[b-itivid4d63] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px 12px 8px 12px;
}

.cdp-month-item[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #212121;
    letter-spacing: 0.25px;
    line-height: 20px;
    border-radius: 100px;
    transition: background-color 0.15s ease;
}

.cdp-month-item:hover[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.12);
}

.cdp-month-item-active[b-itivid4d63] {
    background-color: #3CAA36;
    color: #FFFFFF;
    font-weight: 700;
}

.cdp-year-nav[b-itivid4d63] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0 4px 0;
}

.cdp-year-btn[b-itivid4d63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 100px;
    transition: background-color 0.15s ease;
}

.cdp-year-btn:hover[b-itivid4d63] {
    background-color: rgba(60, 170, 54, 0.12);
}

.cdp-year-btn svg[b-itivid4d63] {
    width: 8px;
    height: 14px;
}

.cdp-year-label[b-itivid4d63] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #212121;
    min-width: 50px;
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .cdp-popup[b-itivid4d63] {
        min-width: 280px;
    }


    .cdp-day[b-itivid4d63] {
        font-size: 14px;
    }

    .cdp-weekday[b-itivid4d63] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cdp-popup[b-itivid4d63] {
        min-width: 260px;
    }

    .cdp-nav-btn[b-itivid4d63] {
        width: 40px;
        height: 40px;
    }
}
/* /Components/Shared/DuplicateArticleModal.razor.rz.scp.css */
/* ============================================= */
/* DUPLICATE ARTICLE MODAL (Figma 4560:37310)    */
/* Grouped selection of duplicate references     */
/* ============================================= */

.duplicate-modal-overlay[b-lmxnxv9s5p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dupOverlayIn-b-lmxnxv9s5p 0.2s ease;
}

@keyframes dupOverlayIn-b-lmxnxv9s5p {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.duplicate-modal[b-lmxnxv9s5p] {
    position: relative;
    width: 479px;
    max-width: calc(100vw - 32px);
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    padding: 30px 60px;
    animation: dupSlideIn-b-lmxnxv9s5p 0.25s ease;
}

@keyframes dupSlideIn-b-lmxnxv9s5p {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

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

.duplicate-modal-body[b-lmxnxv9s5p] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.duplicate-modal-text[b-lmxnxv9s5p] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.duplicate-modal-ref[b-lmxnxv9s5p] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #000000;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.duplicate-modal-question[b-lmxnxv9s5p] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #000000;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* ===== GRID DE PRODUCTOS ===== */
.duplicate-modal-grid[b-lmxnxv9s5p] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* ===== ITEM DE PRODUCTO ===== */
.dup-item[b-lmxnxv9s5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.dup-item:hover[b-lmxnxv9s5p] {
    transform: scale(1.03);
}

/* Wrapper de la imagen */
.dup-item-img-wrapper[b-lmxnxv9s5p] {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

/* Estado seleccionado: borde verde */
.dup-item--selected .dup-item-img-wrapper[b-lmxnxv9s5p] {
    border-color: #3CAA36;
}

.dup-item-img[b-lmxnxv9s5p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    mix-blend-mode: multiply;
    display: block;
}

/* Overlay verde semitransparente (solo cuando seleccionado) */
.dup-item-overlay[b-lmxnxv9s5p] {
    position: absolute;
    inset: 0;
    background: rgba(60, 170, 54, 0.5);
    border-radius: 12px;
    pointer-events: none;
}

/* Check icon (solo cuando seleccionado) */
.dup-item-check[b-lmxnxv9s5p] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 28px;
    pointer-events: none;
}

/* Referencia debajo */
.dup-item-ref[b-lmxnxv9s5p] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #000000;
    text-align: center;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* ===== ACTIONS ===== */
.duplicate-modal-actions[b-lmxnxv9s5p] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.duplicate-modal-btn-add[b-lmxnxv9s5p] {
    width: 100%;
    height: 40px;
    background: #3CAA36;
    border: none;
    border-radius: 6px;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.duplicate-modal-btn-add:hover[b-lmxnxv9s5p] {
    background: #2E8A2A;
}

.duplicate-modal-btn-add:disabled[b-lmxnxv9s5p] {
    opacity: 0.6;
    cursor: not-allowed;
}

.duplicate-modal-btn-cancel[b-lmxnxv9s5p] {
    background: none;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #212121;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    padding: 0;
    width: 100%;
}

.duplicate-modal-btn-cancel:hover[b-lmxnxv9s5p] {
    color: #666666;
}

.duplicate-modal-btn-cancel:disabled[b-lmxnxv9s5p] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== CLOSE ===== */
.duplicate-modal-close[b-lmxnxv9s5p] {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
}

.duplicate-modal-close:hover[b-lmxnxv9s5p] {
    opacity: 0.6;
}

/* ============================================= */
/* RESPONSIVE                                    */
/* ============================================= */
@media (max-width: 540px) {
    .duplicate-modal[b-lmxnxv9s5p] {
        padding: 24px 24px;
        width: calc(100vw - 32px);
    }

    .duplicate-modal-close[b-lmxnxv9s5p] {
        right: 16px;
        top: 16px;
    }

    .dup-item-img-wrapper[b-lmxnxv9s5p] {
        width: 60px;
        height: 60px;
    }

    .dup-item-ref[b-lmxnxv9s5p] {
        font-size: 12px;
    }

    .duplicate-modal-grid[b-lmxnxv9s5p] {
        padding: 0;
    }
}
/* /Components/Shared/FavoritosDropdown.razor.rz.scp.css */
/* ============================================= */
/* FAVORITOS DROPDOWN - 100% Responsive (Figma match) */
/* ============================================= */

/* --- CSS Variables (sistema fluido con clamp) --- */
.favoritos.modal-overlay[b-auzze9x471] {
    /* Panel */
    --panel-width: min(756px, 100vw);
    --panel-padding-x: clamp(20px, 4.69vw, 90px);
    --panel-padding-top: clamp(20px, 2.08vw, 40px);
    --panel-padding-bottom: clamp(32px, 3.65vw, 70px);
    --panel-radius: 15px;
    /* Tipografía */
    --title-font: clamp(26px, 2.5vw, 48px);
    --body-font: clamp(13px, 0.83vw, 16px);
    --total-font: clamp(18px, 1.25vw, 24px);
    --btn-font: clamp(13px, 0.83vw, 16px);
    /* Espaciado */
    --gap-title-items: clamp(28px, 2.86vw, 55px);
    --gap-items: 0px;
    --gap-row: clamp(12px, 1.04vw, 20px);
    --gap-total: clamp(20px, 2.08vw, 40px);
    /* Producto */
    --img-size: clamp(60px, 5.21vw, 100px);
    --img-radius: clamp(8px, 0.73vw, 14px);
    --row-padding-y: clamp(4px, 0.312vw, 6px);
    /* Contador */
    --counter-width: clamp(100px, 6.68vw, 128px);
    --counter-height: clamp(36px, 2.4vw, 46px);
    --counter-radius: 8px;
    --counter-btn-size: clamp(16px, 1.08vw, 20px);
    /* Botones */
    --cart-btn-width: clamp(44px, 3vw, 57.5px);
    --cart-btn-height: clamp(36px, 2.4vw, 46px);
    --heart-btn-size: clamp(26px, 1.67vw, 32px);
    --close-btn-size: clamp(18px, 1.25vw, 24px);
    --cta-height: clamp(44px, 2.81vw, 54px);
    --cta-radius: 6px;
}

/* ============================================= */
/* OVERLAY */
/* ============================================= */
.favoritos.modal-overlay[b-auzze9x471] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    animation: favOverlayFadeIn-b-auzze9x471 0.25s ease;
}

@keyframes favOverlayFadeIn-b-auzze9x471 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================= */
/* PANEL PRINCIPAL */
/* ============================================= */
.favorites-panel[b-auzze9x471] {
    position: relative;
    width: var(--panel-width);
    height: 100%;
    background: #FFFFFF;
    border-radius: var(--panel-radius) 0 0 var(--panel-radius);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: favPanelSlideIn-b-auzze9x471 0.3s ease;
}

@keyframes favPanelSlideIn-b-auzze9x471 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.favorites-panel .dropdown-content[b-auzze9x471] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--panel-padding-top) var(--panel-padding-x) var(--panel-padding-bottom);
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    /* Reset master.css overrides */
    inset: unset;
    right: unset;
    top: unset;
    box-shadow: none;
}

/* ============================================= */
/* CABECERA (Título + Cerrar) */
/* ============================================= */
.favorites-panel .carritohead[b-auzze9x471] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.favorites-panel .carritohead h2[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--title-font);
    color: #2D2E2E;
    margin: 0;
    line-height: 1.1;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    display: block;
}

.favorites-panel #close[b-auzze9x471] {
    width: var(--close-btn-size);
    height: var(--close-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2D2E2E;
    font-size: var(--close-btn-size);
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
    margin: 0;
}

.favorites-panel #close:hover[b-auzze9x471] {
    opacity: 0.6;
}

/* ============================================= */
/* LISTA DE PRODUCTOS */
/* ============================================= */
.favorites-panel .cart-items[b-auzze9x471] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: var(--gap-title-items) 0 0 0;
    padding: 0;
    max-height: none;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.favorites-panel .cart-items[b-auzze9x471]::-webkit-scrollbar {
    width: 4px;
}

.favorites-panel .cart-items[b-auzze9x471]::-webkit-scrollbar-track {
    background: transparent;
}

.favorites-panel .cart-items[b-auzze9x471]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

.favorites-panel .cart-items-list[b-auzze9x471] {
    display: flex;
    flex-direction: column;
}

.favorites-panel #labelFavoritesEmpty[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--body-font);
    color: #9E9E9E;
    text-align: center;
    padding: clamp(30px, 3vw, 60px) 0;
    margin: 0;
}

/* ============================================= */
/* FILA DE PRODUCTO */
/* ============================================= */
.favorites-panel .cart-item[b-auzze9x471] {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    padding: var(--row-padding-y) 0;
    border-bottom: 1px dashed #EEEEEE;
    max-height: none;
    width: 100%;
    box-sizing: border-box;
}

.favorites-panel .cart-item:last-child[b-auzze9x471] {
    border-bottom: 1px dashed #EEEEEE;
}

/* Imagen */
.favorites-panel .cart-item-image[b-auzze9x471] {
    flex-shrink: 0;
    width: var(--img-size);
    height: var(--img-size);
    border-radius: var(--img-radius);
    overflow: hidden;
}

.favorites-panel .cart-item-image img[b-auzze9x471] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--img-radius);
    mix-blend-mode: multiply;
}

/* Info (nombre + código) */
.favorites-panel .cart-item-info[b-auzze9x471] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    text-align: left;
}

.favorites-panel .product-name[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.favorites-panel .product-name:hover[b-auzze9x471] {
    color: #3CAA36;
}

.favorites-panel .product-code[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: var(--body-font);
    color: #000000;
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Contador de cantidad */
.favorites-panel .quantity-control[b-auzze9x471] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F5F5F5;
    border-radius: var(--counter-radius);
    width: var(--counter-width);
    height: var(--counter-height);
    padding: 0 clamp(8px, 0.64vw, 12px);
    flex-shrink: 0;
    gap: 0;
    box-sizing: border-box;
}

.favorites-panel .qty-btn[b-auzze9x471] {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    font-size: var(--counter-btn-size);
    width: var(--counter-btn-size);
    height: var(--counter-btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

    .favorites-panel .qty-btn:hover:not(:disabled)[b-auzze9x471] {
        color: #3CAA36;
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.favorites-panel .qty-btn:disabled[b-auzze9x471] {
    opacity: 0.3;
    cursor: not-allowed;
}

.favorites-panel .qty-number[b-auzze9x471] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: var(--body-font);
    color: #121212;
    text-align: center;
    min-width: 20px;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Botón añadir al carrito (borde verde) - Figma style */
.favorites-panel .cart-item > .qty-btn[b-auzze9x471] {
    background: #FFFFFF;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    width: var(--cart-btn-width);
    height: var(--cart-btn-height);
    cursor: pointer;
    color: #3CAA36;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: clamp(16px, 1.15vw, 22px);
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

/* CartIcon (svg, fill=currentColor): tamaño del icono dentro del botón de añadir */
.favorites-panel .cart-item > .qty-btn[b-auzze9x471]  svg {
    width: clamp(16px, 1.15vw, 22px);
    height: clamp(16px, 1.15vw, 22px);
}

.favorites-panel .cart-item > .qty-btn:hover:not(:disabled)[b-auzze9x471] {
    background: #3CAA36;
    color: #FFFFFF;
}

.favorites-panel .cart-item > .qty-btn:disabled[b-auzze9x471] {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #ccc;
    color: #ccc;
}

/* Botón favorito (corazón rojo con sombra) - Figma style */
.favorites-panel .delete-btn[b-auzze9x471] {
    background: #FFFFFF;
    border: none;
    border-radius: 50%;
    width: var(--heart-btn-size);
    height: var(--heart-btn-size);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
}

.favorites-panel .delete-btn i[b-auzze9x471] {
    font-size: clamp(12px, 0.83vw, 16px);
}

.favorites-panel .delete-btn:hover[b-auzze9x471] {
    background: #f8f8f8;
    transform: scale(1.1);
}

/* ============================================= */
/* ZONA INFERIOR: BOTONES CTA (Figma match) */
/* ============================================= */

/* Ocultar el hr redundante del master */
.favorites-panel .dropdown-content > div[style*="margin-left: 10%"][b-auzze9x471] {
    display: none !important;
}

/* Contenedor de los dos botones CTA */
.favorites-panel .cta-buttons[b-auzze9x471] {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.3vw, 25px);
    width: 100%;
    flex-shrink: 0;
    padding: clamp(16px, 2.34vw, 45px) 0 0 0;
    margin: 0;
}

/* Estilo base compartido por ambos botones */
.favorites-panel .cta-btn[b-auzze9x471] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--cta-height);
    border-radius: var(--cta-radius);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: var(--btn-font);
    letter-spacing: 0.15px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    padding: clamp(8px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    box-sizing: border-box;
}

/* Botón "Ver Listas" — borde amarillo, fondo blanco */
.favorites-panel .cta-ver-listas[b-auzze9x471] {
    background: #FFFFFF;
    border: 1px solid #ECC61B;
    color: #212121;
}

    .favorites-panel .cta-ver-listas:hover[b-auzze9x471] {
        background: #FDD623;
        border-color: #FDD623;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* Botón "Crear Lista" — fondo verde */
.favorites-panel .cta-crear-lista[b-auzze9x471] {
    background: #3CAA36;
    border: 1px solid #3CAA36;
    color: #FFFFFF;
}

    .favorites-panel .cta-crear-lista:hover[b-auzze9x471] {
        background: #80C87C;
        border-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* ============================================= */
@media (max-width: 1024px) {
    .favoritos.modal-overlay[b-auzze9x471] {
        --panel-width: min(600px, 100vw);
        --panel-padding-x: clamp(20px, 5vw, 50px);
        --panel-padding-top: clamp(20px, 3vw, 30px);
        --panel-padding-bottom: clamp(28px, 4vw, 50px);
        --title-font: clamp(28px, 4vw, 36px);
        --body-font: clamp(13px, 1.5vw, 15px);
        --total-font: clamp(18px, 2.5vw, 22px);
        --img-size: clamp(60px, 10vw, 80px);
        --counter-width: clamp(100px, 14vw, 120px);
        --counter-height: clamp(36px, 5vw, 42px);
        --cart-btn-width: clamp(40px, 6vw, 50px);
        --cart-btn-height: clamp(36px, 5vw, 42px);
        --heart-btn-size: clamp(24px, 3.5vw, 30px);
        --gap-title-items: clamp(24px, 4vw, 40px);
        --gap-row: clamp(12px, 2vw, 16px);
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL (max-width: 768px) */
/* ============================================= */
@media (max-width: 768px) {
    .favoritos.modal-overlay[b-auzze9x471] {
        --panel-width: 100vw;
        --panel-padding-x: 20px;
        --panel-padding-top: 20px;
        --panel-padding-bottom: 24px;
        --panel-radius: 0px;
        --title-font: 28px;
        --body-font: 14px;
        --total-font: 20px;
        --btn-font: 14px;
        --img-size: 70px;
        --img-radius: 10px;
        --counter-width: 110px;
        --counter-height: 40px;
        --cart-btn-width: 46px;
        --cart-btn-height: 40px;
        --heart-btn-size: 28px;
        --gap-title-items: 24px;
        --gap-row: 12px;
        --gap-total: 20px;
        --close-btn-size: 22px;
        --cta-height: 48px;
    }

    .favorites-panel[b-auzze9x471] {
        border-radius: 0;
    }

    .favorites-panel .cart-item[b-auzze9x471] {
        flex-wrap: wrap;
    }

    .favorites-panel .cart-item-info[b-auzze9x471] {
        flex: 1;
        min-width: calc(100% - var(--img-size) - var(--gap-row) - 80px);
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .favoritos.modal-overlay[b-auzze9x471] {
        --panel-padding-x: 16px;
        --panel-padding-top: 16px;
        --panel-padding-bottom: 20px;
        --title-font: 24px;
        --body-font: 13px;
        --total-font: 18px;
        --btn-font: 13px;
        --img-size: 60px;
        --img-radius: 8px;
        --counter-width: 100px;
        --counter-height: 36px;
        --cart-btn-width: 42px;
        --cart-btn-height: 36px;
        --heart-btn-size: 26px;
        --gap-title-items: 20px;
        --gap-row: 10px;
        --gap-total: 16px;
        --row-padding-y: 10px;
    }

    .favorites-panel .cart-item[b-auzze9x471] {
        gap: 10px;
    }
}
/* /Components/Shared/ListArticlesModal.razor.rz.scp.css */
/* ============================================= */
/* LIST ARTICLES MODAL (Figma 4523:36529)        */
/* ============================================= */

.list-articles-overlay[b-ipyfmzjvzk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lamOverlayIn-b-ipyfmzjvzk 0.2s ease;
}

@keyframes lamOverlayIn-b-ipyfmzjvzk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.list-articles-modal[b-ipyfmzjvzk] {
    position: relative;
    width: 703px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    padding: 50px 100px 75px;
    animation: lamSlideIn-b-ipyfmzjvzk 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

@keyframes lamSlideIn-b-ipyfmzjvzk {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

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

.list-articles-modal[b-ipyfmzjvzk]::-webkit-scrollbar {
    width: 4px;
}

.list-articles-modal[b-ipyfmzjvzk]::-webkit-scrollbar-track {
    background: transparent;
}

.list-articles-modal[b-ipyfmzjvzk]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* ===== CLOSE BUTTON ===== */
.lam-close[b-ipyfmzjvzk] {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.lam-close:hover[b-ipyfmzjvzk] {
    opacity: 0.6;
}

/* ===== CONTENT ===== */
.lam-content[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 45px;
    width: 100%;
}

/* ===== TITLE ===== */
.lam-title[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    color: #000000;
    text-align: center;
    margin: 0;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* ===== FIELDS GROUP ===== */
.lam-fields[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* ===== INPUT ===== */
.lam-input-wrapper[b-ipyfmzjvzk] {
    width: 100%;
}

.lam-input[b-ipyfmzjvzk] {
    width: 100%;
    background: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #212121;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.lam-input[b-ipyfmzjvzk]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
}

.lam-input:focus[b-ipyfmzjvzk] {
    box-shadow: 0 0 0 2px #3CAA36;
}

.lam-input:disabled[b-ipyfmzjvzk] {
    opacity: 0.6;
}

/* ===== ARTICLES BOX ===== */
.lam-articles-box[b-ipyfmzjvzk] {
    border: 1px solid #212121;
    border-radius: 15px;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
}

.lam-articles-list[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.lam-articles-list[b-ipyfmzjvzk]::-webkit-scrollbar {
    width: 4px;
}

.lam-articles-list[b-ipyfmzjvzk]::-webkit-scrollbar-track {
    background: transparent;
}

.lam-articles-list[b-ipyfmzjvzk]::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
}

/* ===== ARTICLE ROW ===== */
.lam-article-row[b-ipyfmzjvzk] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px dashed #E0E0E0;
    width: 100%;
}

.lam-article-row--last[b-ipyfmzjvzk] {
    border-bottom: none;
}

/* Imagen */
.lam-article-img[b-ipyfmzjvzk] {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 14px;
    overflow: hidden;
}

.lam-article-img img[b-ipyfmzjvzk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    mix-blend-mode: multiply;
}

/* Info */
.lam-article-info[b-ipyfmzjvzk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lam-article-name[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    margin: 0;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.lam-article-ref[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #000000;
    margin: 0;
    line-height: normal;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Contador */
.lam-article-counter[b-ipyfmzjvzk] {
    position: relative;
    flex-shrink: 0;
    width: 128px;
    height: 46px;
}

.lam-counter-bg[b-ipyfmzjvzk] {
    position: absolute;
    inset: 0;
    background: #F5F5F5;
    border-radius: 8px;
}

.lam-counter-controls[b-ipyfmzjvzk] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    z-index: 1;
}

.lam-counter-btn[b-ipyfmzjvzk] {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.lam-counter-btn:hover:not(:disabled)[b-ipyfmzjvzk] {
    color: #3CAA36;
}

.lam-counter-btn:disabled[b-ipyfmzjvzk] {
    opacity: 0.3;
    cursor: not-allowed;
}

.lam-counter-value[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #121212;
    text-align: center;
    min-width: 20px;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

/* Botón eliminar */
.lam-delete-btn[b-ipyfmzjvzk] {
    background: none;
    border: none;
    cursor: pointer;
    color: #666666;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    font-size: 18px;
    transition: color 0.2s ease;
}

.lam-delete-btn:hover[b-ipyfmzjvzk] {
    color: #dc3545;
}

/* Empty message */
.lam-empty[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #9E9E9E;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

/* ===== BUTTONS ===== */
.lam-buttons[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.lam-btn-create[b-ipyfmzjvzk] {
    width: 100%;
    height: 54px;
    background: #3CAA36;
    border: none;
    border-radius: 6px;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lam-btn-create:hover[b-ipyfmzjvzk] {
    background: #2E8A2A;
}

.lam-btn-create:disabled[b-ipyfmzjvzk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.lam-btn-existing[b-ipyfmzjvzk] {
    width: 100%;
    height: 53px;
    background: var(--buttons-white);
    border: 1px solid var(--buttons-border-yellow);
    border-radius: var(--buttons-border-radius);
    color: var(--buttons-text-black);
    font-family: var(--buttons-font-family);
    font-size: var(--buttons-font-size-label);
    font-weight: var(--buttons-font-weight-medium);
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lam-btn-existing:hover[b-ipyfmzjvzk] {
    background: var(--buttons-background-yellow);
    border-color: var(--buttons-border-yellow-hover);
}

.lam-btn-existing:disabled[b-ipyfmzjvzk] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Cancelar button */
.lam-btn-cancel[b-ipyfmzjvzk] {
    background: none;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #212121;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
    padding: 0;
    width: 100%;
}

.lam-btn-cancel:hover[b-ipyfmzjvzk] {
    color: #666666;
}

.lam-btn-cancel:disabled[b-ipyfmzjvzk] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== EXISTING LISTS PANEL ===== */
.lam-existing-panel[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.lam-existing-lists[b-ipyfmzjvzk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
}

.lam-list-option[b-ipyfmzjvzk] {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 4px 0;
}

.lam-list-option:hover[b-ipyfmzjvzk] {
    opacity: 0.8;
}

/* Radio button custom */
.lam-radio[b-ipyfmzjvzk] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #9E9E9E;
    background: #FFFFFF;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.lam-radio--selected[b-ipyfmzjvzk] {
    border-color: #3CAA36;
    background: #3CAA36;
}

.lam-list-name[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #000000;
    font-variation-settings: 'YTLC' 500, 'wdth' 100;
}

.lam-loading[b-ipyfmzjvzk] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #9E9E9E;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}

/* ============================================= */
/* RESPONSIVE - TABLET (max-width: 768px)        */
/* ============================================= */
@media (max-width: 768px) {
    .list-articles-modal[b-ipyfmzjvzk] {
        padding: 30px 24px 40px;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .lam-close[b-ipyfmzjvzk] {
        right: 16px;
        top: 16px;
    }

    .lam-title[b-ipyfmzjvzk] {
        font-size: 22px;
        line-height: 28px;
    }

    .lam-content[b-ipyfmzjvzk] {
        gap: 30px;
    }

    .lam-articles-box[b-ipyfmzjvzk] {
        padding: 16px;
    }

    .lam-article-row[b-ipyfmzjvzk] {
        gap: 10px;
    }

    .lam-article-img[b-ipyfmzjvzk] {
        width: 50px;
        height: 50px;
        border-radius: 10px;
    }

    .lam-article-img img[b-ipyfmzjvzk] {
        border-radius: 10px;
    }

    .lam-article-name[b-ipyfmzjvzk],
    .lam-article-ref[b-ipyfmzjvzk] {
        font-size: 14px;
    }

    .lam-article-counter[b-ipyfmzjvzk] {
        width: 100px;
        height: 38px;
    }

    .lam-counter-btn[b-ipyfmzjvzk] {
        font-size: 16px;
        width: 16px;
        height: 16px;
    }

    .lam-counter-value[b-ipyfmzjvzk] {
        font-size: 14px;
    }

    .lam-btn-create[b-ipyfmzjvzk] {
        height: 48px;
    }

    .lam-btn-existing[b-ipyfmzjvzk] {
        height: 46px;
    }

    .lam-input[b-ipyfmzjvzk] {
        font-size: 16px;
        padding: 14px 14px;
    }
}

/* ============================================= */
/* RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px) */
/* ============================================= */
@media (max-width: 480px) {
    .list-articles-modal[b-ipyfmzjvzk] {
        padding: 24px 16px 32px;
    }

    .lam-title[b-ipyfmzjvzk] {
        font-size: 20px;
        line-height: 26px;
    }

    .lam-content[b-ipyfmzjvzk] {
        gap: 24px;
    }

    .lam-article-img[b-ipyfmzjvzk] {
        width: 44px;
        height: 44px;
    }

    .lam-article-counter[b-ipyfmzjvzk] {
        width: 90px;
        height: 34px;
    }

    .lam-counter-controls[b-ipyfmzjvzk] {
        padding: 0 8px;
    }
}
/* /Components/Shared/Migas.razor.rz.scp.css */
/* Migas de pan de las páginas de contenido (Fase L8.5-8).
   Discretas a propósito: sirven para saber dónde estás y subir un nivel, no para
   competir con el título de la página. */

.migas[b-nk05vqgl6k] {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(10px, 1.04vw, 20px) clamp(16px, 3.33vw, 64px) 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.migas-lista[b-nk05vqgl6k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.migas-paso[b-nk05vqgl6k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.migas a[b-nk05vqgl6k] {
    color: #414a45;
    text-decoration: none;
}

/* Subrayado solo al pasar por encima o al llegar con el teclado: el enlace se distingue
   por el contexto, y cinco subrayados seguidos ensucian. */
.migas a:hover[b-nk05vqgl6k],
.migas a:focus-visible[b-nk05vqgl6k] {
    color: #2c7527;
    text-decoration: underline;
}

.migas a:focus-visible[b-nk05vqgl6k] {
    outline: 2px solid #3caa36;
    outline-offset: 2px;
    border-radius: 3px;
}

.migas-separador[b-nk05vqgl6k] {
    color: #8a938d;
}

/* La página actual: se lee, pero no invita a pulsar. */
.migas-actual[b-nk05vqgl6k] {
    color: #1d2420;
    font-weight: 600;
}

/* En el móvil las migas largas se van a varias líneas en vez de desbordar. */
@media (max-width: 640px) {
    .migas[b-nk05vqgl6k] {
        font-size: 12px;
    }
}
/* /Components/Shared/NewListModal.razor.rz.scp.css */
.new-list.modal-overlay[b-rfji4ixf6j] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.new-list .modal-results[b-rfji4ixf6j] {
    position: relative;
    width: min(700px, 90vw);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.new-list .modal-title[b-rfji4ixf6j] {
    margin-bottom: 40px;
}

.new-list .modal-close[b-rfji4ixf6j] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.new-list .modal-newlist-body[b-rfji4ixf6j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.new-list .modal-actions[b-rfji4ixf6j] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.new-list .boton[b-rfji4ixf6j] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--primario);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.new-list .boton:hover[b-rfji4ixf6j] {
    background-color: #80C87C;
}

.new-list .state-layer[b-rfji4ixf6j], .new-list .state-layer-2[b-rfji4ixf6j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    position: relative;
    flex: 1;
    align-self: stretch;
    width: 100%;
    flex-grow: 1;
}

.new-list .label-text[b-rfji4ixf6j] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.new-list .boton-2[b-rfji4ixf6j] {
    display: inline-flex;
    flex-direction: column;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--blanco);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--alternativo-oscuro);
}

.new-list .boton-2:hover[b-rfji4ixf6j] {
    background-color: var(--alternativo-oscuro);
    cursor: pointer;
}

.new-list .boton-2:hover .label-text-2[b-rfji4ixf6j] {
    color: var(--blanco);
}

.new-list .label-text-2[b-rfji4ixf6j] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.new-list .alert-success[b-rfji4ixf6j], .new-list .alert-danger[b-rfji4ixf6j] {
    text-align: center;
}
/* /Components/Shared/NotificationComponent.razor.rz.scp.css */
.notification-container[b-5rp61e7yy5] {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: slideIn-b-5rp61e7yy5 0.3s ease-out;
}

.notification-content[b-5rp61e7yy5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.notification-title[b-5rp61e7yy5] {
    font-weight: 600;
    margin-bottom: 4px;
}

.notification-message[b-5rp61e7yy5] {
    margin: 0;
}

.notification-close[b-5rp61e7yy5] {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    transition: opacity 0.2s ease;
}

.notification-close:hover[b-5rp61e7yy5] {
    opacity: 1;
}

.notification-success[b-5rp61e7yy5] {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.notification-error[b-5rp61e7yy5] {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.notification-warning[b-5rp61e7yy5] {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.notification-info[b-5rp61e7yy5] {
    color: #0c5460;
    background-color: #bee5eb;
    border-color: #abdde5;
}

@keyframes slideIn-b-5rp61e7yy5 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .notification-container[b-5rp61e7yy5] {
        padding: 12px 15px;
        font-size: 13px;
    }

    .notification-close[b-5rp61e7yy5] {
        margin-left: 10px;
    }
}
/* /Components/Shared/PedidoArticulosRegalo.razor.rz.scp.css */
.articulos-regalo.modal-overlay[b-f0h4j7vbtg] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.articulos-regalo .modal-results[b-f0h4j7vbtg] {
    position: relative;
    width: min(700px, 90vw);
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.articulos-regalo .modal-close[b-f0h4j7vbtg] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.articulos-regalo .modal-regalos-body[b-f0h4j7vbtg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 270px;
    overflow-y: auto;
    padding-right: 8px; 
}

.articulos-regalo .producto-modal[b-f0h4j7vbtg] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.articulos-regalo .producto-modal:last-child[b-f0h4j7vbtg] {
    border-bottom: none;
}

.articulos-regalo .producto-modal .product-image[b-f0h4j7vbtg] {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
}

.articulos-regalo .producto-modal .product-img[b-f0h4j7vbtg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.articulos-regalo .producto-modal .producto-info[b-f0h4j7vbtg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.articulos-regalo .producto-modal .descripcion[b-f0h4j7vbtg] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.articulos-regalo .producto-modal .referencia[b-f0h4j7vbtg] {
    color: var(--negro);
    font-family: "Nunito Sans-Bold", Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/* --- Skeleton de carga (mismo layout que .producto-modal, evita el flash de "No se han encontrado regalos") --- */
.articulos-regalo .regalo-skeleton .product-image .skeleton[b-f0h4j7vbtg] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line[b-f0h4j7vbtg] {
    margin-bottom: 0; /* el gap de .producto-info separa las líneas */
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line.desc[b-f0h4j7vbtg] {
    width: 65%;
    height: 18px;
}

.articulos-regalo .regalo-skeleton .regalo-skeleton-line.ref[b-f0h4j7vbtg] {
    width: 45%;
    height: 16px;
}

.articulos-regalo .label-text[b-f0h4j7vbtg] {
    position: relative;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--blanco);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}

.articulos-regalo .label-text-2[b-f0h4j7vbtg] {
    position: relative;
    text-decoration: none;
    width: fit-content;
    font-family: var(--title-medium-font-family);
    font-weight: var(--title-medium-font-weight);
    color: var(--negro);
    font-size: var(--title-medium-font-size);
    text-align: center;
    letter-spacing: var(--title-medium-letter-spacing);
    line-height: var(--title-medium-line-height);
    white-space: nowrap;
    font-style: var(--title-medium-font-style);
}
/* /Components/Shared/PopupAyudaOnline.razor.rz.scp.css */
.ao-overlay[b-f0vdlin30w] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1060;
    padding: 24px 16px;
    overflow-y: auto;
}

.ao-card[b-f0vdlin30w] {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    padding: 28px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    position: relative;
}

.ao-close[b-f0vdlin30w] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    color: #2D2E2E;
    cursor: pointer;
    line-height: 1;
}

.ao-title[b-f0vdlin30w] {
    text-align: center;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #2D2E2E;
    margin: 0 0 16px;
}

.ao-contacts[b-f0vdlin30w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 20px;
}

.ao-contact[b-f0vdlin30w] {
    color: #5FB246;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
}

.ao-contact:hover[b-f0vdlin30w] {
    text-decoration: underline;
}

.ao-grid[b-f0vdlin30w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
}

.ao-item[b-f0vdlin30w] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid #F0F0F0;
    padding-top: 16px;
}

.ao-grid .ao-item:nth-child(1)[b-f0vdlin30w],
.ao-grid .ao-item:nth-child(2)[b-f0vdlin30w] {
    border-top: none;
    padding-top: 0;
}

.ao-item-head[b-f0vdlin30w] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    color: #2D2E2E;
    margin-bottom: 8px;
}

.ao-item-head i[b-f0vdlin30w] {
    color: #5FB246;
    font-size: 1.15rem;
}

.ao-item-desc[b-f0vdlin30w] {
    color: #555;
    font-size: .85rem;
    line-height: 1.4;
    margin: 0 0 12px;
}

.ao-btn[b-f0vdlin30w] {
    margin-top: auto;
    background: #fff;
    color: #5FB246;
    border: 1px solid #5FB246;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ao-btn:hover[b-f0vdlin30w] {
    background: #5FB246;
    color: #fff;
}

.ao-btn:disabled[b-f0vdlin30w] {
    opacity: .6;
    cursor: not-allowed;
}

.ao-btn-full[b-f0vdlin30w] {
    width: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Sub-vista "Te llamamos" */
.ao-volver[b-f0vdlin30w] {
    background: none;
    border: none;
    color: #5FB246;
    font-weight: 700;
    cursor: pointer;
    padding: 0 0 12px;
}

.ao-llamada-head[b-f0vdlin30w] {
    font-size: 1.1rem;
}

.ao-llamada-fields[b-f0vdlin30w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
}

.ao-input[b-f0vdlin30w] {
    padding: 10px 12px;
    border: 1px solid #CCC;
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.ao-input:focus[b-f0vdlin30w] {
    outline: none;
    border-color: #5FB246;
}

.ao-ok[b-f0vdlin30w] {
    color: #5FB246;
    font-weight: 700;
}

.ao-error[b-f0vdlin30w] {
    color: #d33;
    font-size: .9rem;
    margin: 0;
}

.ao-spinner[b-f0vdlin30w] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ao-spin-b-f0vdlin30w .8s linear infinite;
}

@keyframes ao-spin-b-f0vdlin30w {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .ao-grid[b-f0vdlin30w] {
        grid-template-columns: 1fr;
    }

    .ao-grid .ao-item:nth-child(2)[b-f0vdlin30w] {
        border-top: 1px solid #F0F0F0;
        padding-top: 16px;
    }

    .ao-card[b-f0vdlin30w] {
        padding: 20px;
    }

    .ao-contacts[b-f0vdlin30w] {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
}
/* /Components/Shared/PopupBloqueoZona.razor.rz.scp.css */
/* ============================================================
   PopupBloqueoZona — modal multi-opción "artículo bloqueado por zona".
   Usa los tokens del sistema (variables.css) y los patrones del checkout
   (botones boton-1/boton-2, radios custom) para encajar con el estilo del sitio.
   ============================================================ */

.pbz-overlay[b-p1o7j37lkt] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pbz-fade-in-b-p1o7j37lkt 0.2s ease;
}

@keyframes pbz-fade-in-b-p1o7j37lkt {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pbz-modal[b-p1o7j37lkt] {
    position: relative;
    background: var(--blanco);
    border-radius: 12px;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 32px 40px 36px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: pbz-slide-up-b-p1o7j37lkt 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Nunito Sans", Helvetica, sans-serif;
}

@keyframes pbz-slide-up-b-p1o7j37lkt {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pbz-close[b-p1o7j37lkt] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pbz-close:hover[b-p1o7j37lkt] { background: var(--grisgris-10); }
.pbz-close svg path[b-p1o7j37lkt] { transition: stroke 0.15s ease; }
.pbz-close:hover svg path[b-p1o7j37lkt] { stroke: var(--primario); }

.pbz-body[b-p1o7j37lkt] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 20px;
}

.pbz-title[b-p1o7j37lkt] {
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: var(--black-fonts-headings);
    margin: 0;
    text-align: center;
}

.pbz-message[b-p1o7j37lkt] {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--negro);
    text-align: center;
    margin: 0;
}

/* ---- Lista de artículos bloqueados ---- */
.pbz-articulos[b-p1o7j37lkt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.pbz-articulo[b-p1o7j37lkt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--grisgris-10);
    border-radius: 8px;
    padding: 12px 16px;
}

.pbz-ref[b-p1o7j37lkt] {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--negro);
}

.pbz-accion[b-p1o7j37lkt] {
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
}

.pbz-accion--sustituir[b-p1o7j37lkt] { color: var(--primaryprimary-60); }
.pbz-accion--eliminar[b-p1o7j37lkt] { color: var(--ofertaoferta-60); }

/* ---- Sub-vista: cambiar dirección ---- */
.pbz-direcciones[b-p1o7j37lkt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.pbz-direccion[b-p1o7j37lkt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--grisgris-30);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pbz-direccion:hover[b-p1o7j37lkt] { border-color: var(--primario); }
.pbz-direccion.selected[b-p1o7j37lkt] { border-color: var(--primario); background: var(--primaryprimary-10); }

/* Radio custom, mismo criterio que el checkout (appearance:none, verde al marcar) */
.pbz-direccion input[type="radio"][b-p1o7j37lkt] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
    border: 1px solid var(--negro);
    border-radius: 50%;
    background: var(--blanco);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pbz-direccion input[type="radio"]:checked[b-p1o7j37lkt] {
    border-color: var(--primario);
    background: var(--primario);
    box-shadow: inset 0 0 0 3px var(--blanco);
}

.pbz-direccion-texto[b-p1o7j37lkt] {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--negro);
    overflow-wrap: break-word;
    min-width: 0;
}

/* ---- Botones (mismo estilo que boton-1/boton-2 del checkout) ---- */
.pbz-actions[b-p1o7j37lkt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.pbz-btn[b-p1o7j37lkt] {
    width: 100%;
    height: 52px;
    border-radius: 6px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}

/* Primario = boton-2 (verde sólido) */
.pbz-btn-primary[b-p1o7j37lkt] {
    background-color: var(--primario);
    border: 1px solid var(--primario);
    color: var(--blanco);
}

.pbz-btn-primary:hover[b-p1o7j37lkt] {
    background-color: var(--primaryprimary-40);
    border-color: var(--primaryprimary-40);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.pbz-btn-primary:active[b-p1o7j37lkt] { background-color: var(--primaryprimary-60); border-color: var(--primaryprimary-60); }

.pbz-btn-primary:disabled[b-p1o7j37lkt],
.pbz-btn-primary:disabled:hover[b-p1o7j37lkt] {
    background-color: var(--grisgris-30);
    border-color: var(--grisgris-30);
    color: var(--grisgris-50);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Secundario = boton-1 (blanco, borde verde; hover relleno verde) */
.pbz-btn-secondary[b-p1o7j37lkt] {
    background: var(--blanco);
    border: 1px solid var(--primario);
    color: var(--primario);
}

.pbz-btn-secondary:hover[b-p1o7j37lkt] {
    background: var(--primario);
    color: var(--blanco);
}

/* Cancelar/Volver = neutro (mismo criterio que PopupConfirmar) */
.pbz-btn-cancel[b-p1o7j37lkt] {
    background: var(--blanco);
    border: 1px solid var(--grisgris-30);
    color: var(--black-fonts-headings);
}

.pbz-btn-cancel:hover[b-p1o7j37lkt] { background: var(--grisgris-10); border-color: var(--grisgris-50); }

@media (max-width: 480px) {
    .pbz-modal[b-p1o7j37lkt] { padding: 26px 22px 30px 22px; }
    .pbz-title[b-p1o7j37lkt] { font-size: 20px; }
    .pbz-message[b-p1o7j37lkt] { font-size: 15px; line-height: 22px; }
}
/* /Components/Shared/PopupCompletarAlta.razor.rz.scp.css */
/* ============================================================
   PopupCompletarAlta — la página de alta (modo «completar») dentro de una ventana, con la
   estética común de los popups (overlay oscuro + modal blanco redondeado + X).
   Por encima de PopupLoginPrecios (10000), que también la abre.
   ============================================================ */

.pca-overlay[b-dkm4sr5dfj] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.pca-modal[b-dkm4sr5dfj] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 640px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 30px 30px 34px 30px;
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.pca-close[b-dkm4sr5dfj] {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pca-close:hover[b-dkm4sr5dfj] {
    background: #F5F5F5;
}

/* Móvil: menos margen dentro de la ventana, que el formulario va a dos columnas. */
@media (max-width: 480px) {
    .pca-overlay[b-dkm4sr5dfj] {
        padding: 10px;
    }

    .pca-modal[b-dkm4sr5dfj] {
        max-height: calc(100vh - 20px);
        padding: 22px 16px 24px 16px;
    }

    .pca-close[b-dkm4sr5dfj] {
        top: 14px;
        right: 10px;
    }
}
/* /Components/Shared/PopupConfirmar.razor.rz.scp.css */
/* ============================================================
   PopupConfirmar — confirmación sí/no con la estética común de los popups
   de la web (overlay oscuro + modal blanco redondeado, igual que PopupOlvidoContrasena).
   ============================================================ */

.pc-overlay[b-oa0i6755yh] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pc-fade-in-b-oa0i6755yh 0.2s ease;
}

@keyframes pc-fade-in-b-oa0i6755yh {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pc-modal[b-oa0i6755yh] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 30px 40px 40px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: pc-slide-up-b-oa0i6755yh 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pc-slide-up-b-oa0i6755yh {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pc-close[b-oa0i6755yh] {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pc-close:hover[b-oa0i6755yh] {
    background: #F5F5F5;
}

.pc-close svg path[b-oa0i6755yh] {
    transition: stroke 0.15s ease;
}

.pc-close:hover svg path[b-oa0i6755yh] {
    stroke: #3CAA36;
}

.pc-body[b-oa0i6755yh] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 28px;
}

.pc-title[b-oa0i6755yh] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #2D2E2E;
    margin: 0;
    text-align: center;
}

.pc-message[b-oa0i6755yh] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #212121;
    text-align: center;
    margin: 0;
    padding: 0 8px;
}

.pc-actions[b-oa0i6755yh] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.pc-btn[b-oa0i6755yh] {
    flex: 1;
    height: 52px;
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pc-btn-cancel[b-oa0i6755yh] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    color: #2D2E2E;
}

.pc-btn-cancel:hover[b-oa0i6755yh] {
    background: #F5F5F5;
    border-color: #9E9E9E;
}

.pc-btn-confirm[b-oa0i6755yh] {
    background-color: #3CAA36;
    border: none;
    color: #FFFFFF;
}

.pc-btn-confirm:hover[b-oa0i6755yh] {
    background-color: #80C87C;
    box-shadow: 0px 2px 4px 0px #00000040;
    transform: translateY(-2px);
}

.pc-btn-confirm:active[b-oa0i6755yh] {
    background-color: #246F20;
}

/* Variante peligro (eliminar y otras acciones destructivas): botón confirmar en rojo */
.pc-modal--peligro .pc-btn-confirm[b-oa0i6755yh] {
    background-color: #DE3730;
}

.pc-modal--peligro .pc-btn-confirm:hover[b-oa0i6755yh] {
    background-color: #E8645E;
}

.pc-modal--peligro .pc-btn-confirm:active[b-oa0i6755yh] {
    background-color: #B91C1C;
}

/* ---- Modo "escribe para confirmar" (type-to-confirm) ---- */
.pc-confirmacion[b-oa0i6755yh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.pc-confirmacion-label[b-oa0i6755yh] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #555555;
    text-align: center;
    margin: 0;
}

/* Valor a teclear, resaltado para que se vea sin cerrar el popup */
.pc-confirmacion-valor[b-oa0i6755yh] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: #2D2E2E;
    text-align: center;
    letter-spacing: 1px;
    background: #F5F5F5;
    border-radius: 6px;
    padding: 8px 12px;
    user-select: all;
}

.pc-confirmacion-input[b-oa0i6755yh] {
    height: 48px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 0 14px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #212121;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pc-confirmacion-input:focus[b-oa0i6755yh] {
    outline: none;
    border-color: #3CAA36;
    box-shadow: 0 0 0 3px rgba(60, 170, 54, 0.15);
}

.pc-modal--peligro .pc-confirmacion-input:focus[b-oa0i6755yh] {
    border-color: #DE3730;
    box-shadow: 0 0 0 3px rgba(222, 55, 48, 0.15);
}

/* Botón confirmar deshabilitado hasta que el texto coincida */
.pc-btn-confirm:disabled[b-oa0i6755yh],
.pc-btn-confirm:disabled:hover[b-oa0i6755yh],
.pc-modal--peligro .pc-btn-confirm:disabled[b-oa0i6755yh],
.pc-modal--peligro .pc-btn-confirm:disabled:hover[b-oa0i6755yh] {
    background-color: #E0E0E0;
    color: #9E9E9E;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 480px) {
    .pc-modal[b-oa0i6755yh] {
        padding: 26px 22px 30px 22px;
    }

    .pc-message[b-oa0i6755yh] {
        font-size: 16px;
        line-height: 24px;
    }

    .pc-actions[b-oa0i6755yh] {
        flex-direction: column-reverse;
    }
}
/* /Components/Shared/PopupLoginPrecios.razor.rz.scp.css */
/* ============================================
   PopupLoginPrecios — Figma node 3122:6694
   "PopUp login mobles"
   Pixel-perfect implementation
   ============================================ */

/* ── Overlay ── */
.popup-overlay[b-twgvrlfthc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: popupFadeIn-b-twgvrlfthc 0.2s ease;
}

/* ── Modal container ──
   Figma: 510px wide, bg white, rounded 15px, padding 50px,
   gap 10px between children, shadow 0px 4px 4px rgba(0,0,0,0.25),
   overflow clip */
.popup-login-precios[b-twgvrlfthc] {
    background: #FFFFFF;
    border-radius: 15px;
    padding: 50px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 510px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    animation: popupSlideUp-b-twgvrlfthc 0.3s ease;
    position: relative;
}

/* ── Close button row ──
   Figma: flex, items-start, justify-end, full width */
.popup-close-row[b-twgvrlfthc] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
}

/* ── Close button ──
   Figma: 24×24, icon X, color #2D2E2E */
.popup-close-btn[b-twgvrlfthc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.popup-close-btn:hover[b-twgvrlfthc] {
    opacity: 0.6;
}

.popup-close-btn svg[b-twgvrlfthc] {
    display: block;
}

/* ── Content wrapper ──
   Figma: flex, items-start, justify-center, full width */
.popup-login-content[b-twgvrlfthc] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

/* ── Inner container ──
   Figma: 410px wide, flex column, gap 24px */
.popup-login-inner[b-twgvrlfthc] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 410px;
    max-width: 100%;
    align-items: center;
}

/* ── Header row ──
   Figma: flex, space-between, full width, items-start */
.popup-login-header[b-twgvrlfthc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

/* ── Login titles block ──
   Figma: flex column, gap 10px */
.popup-login-titles[b-twgvrlfthc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

/* ── Login title ──
   Figma: Nunito Sans Regular 32px/40px, color #2D2E2E */
.popup-login-title[b-twgvrlfthc] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0;
    color: #2D2E2E;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

/* ── Subtitle ──
   Figma: Nunito Sans Regular 16px/24px, letter-spacing 0.5px, color #000000, text-center */
.popup-login-subtitle[b-twgvrlfthc] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #000000;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* ── PMC logo ──
   Figma: 100×40.078px, flex-shrink 0 */
.popup-login-logo[b-twgvrlfthc] {
    width: 100px;
    height: 40px;
    flex-shrink: 0;
}

.popup-login-logo img[b-twgvrlfthc] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Input field wrapper ──
   Figma: full width */
.popup-login-field[b-twgvrlfthc] {
    width: 100%;
    position: relative;
}

/* Ojito para ver la contraseña (solo el campo password lleva padding extra) */
.popup-input--pwd[b-twgvrlfthc] {
    padding-right: 48px;
}

.popup-eye-btn[b-twgvrlfthc] {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.popup-eye-btn:hover[b-twgvrlfthc] {
    opacity: 1;
}

/* ── Input ──
   Figma: bg #F5F5F5, rounded 6px, px 16px py 17px,
   Nunito Sans Light 18px, color #212121, placeholder #9E9E9E */
.popup-input[b-twgvrlfthc] {
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: normal;
    color: #212121;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

.popup-input[b-twgvrlfthc]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
}

.popup-input:focus[b-twgvrlfthc] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

.popup-input:disabled[b-twgvrlfthc] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Remember me ──
   Figma: flex, gap 12px, items-center, full width */
.popup-login-remember[b-twgvrlfthc] {
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Hide native checkbox */
.popup-remember-hidden[b-twgvrlfthc] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Check icon ──
   Figma: 19×19px, flex-shrink 0 */
.popup-remember-check[b-twgvrlfthc] {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-remember-check svg[b-twgvrlfthc] {
    display: block;
}

/* ── Remember me label ──
   Figma: Nunito Sans Regular 16px, color #323332 */
.popup-login-remember span:not(.popup-remember-check)[b-twgvrlfthc] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #323332;
}

/* ── Actions section ──
   Figma: flex column, gap 24px, items-start, justify-center, full width */
.popup-login-actions[b-twgvrlfthc] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

/* ── Button row ──
   Figma: flex, gap 16px, full width */
.popup-login-buttons[b-twgvrlfthc] {
    display: flex;
    gap: 16px;
    width: 100%;
}

/* ── Login button (filled) ──
   Figma: flex 1, bg #3CAA36, h 38px, rounded 6px,
   px 24px py 7px, Nunito Sans SemiBold 16px/24px, white,
   letter-spacing 0.15px, overflow clip */
.popup-btn-login-filled[b-twgvrlfthc] {
    flex: 1;
    min-width: 0;
    height: 38px;
    background-color: #3CAA36;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 7px 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-btn-login-filled:hover:not(:disabled)[b-twgvrlfthc] {
    background-color: #2D8C2B;
}

.popup-btn-login-filled:disabled[b-twgvrlfthc] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Create account button (outlined) ──
   Figma: flex 1, bg white, border 1px #3CAA36, rounded 6px,
   same font/sizing as filled button, text color #3CAA36 */
.popup-btn-login-outlined[b-twgvrlfthc] {
    flex: 1;
    min-width: 0;
    height: 38px;
    background-color: #FFFFFF;
    color: #3CAA36;
    border: 1px solid #3CAA36;
    border-radius: 6px;
    padding: 7px 24px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-btn-login-outlined:hover:not(:disabled)[b-twgvrlfthc] {
    background-color: #EBF6EB;
}

.popup-btn-login-outlined:disabled[b-twgvrlfthc] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Forgot password ──
   Figma: Nunito Sans Regular 16px, color #2D2E2E,
   text-center, full width */
.popup-forgot-password[b-twgvrlfthc] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #2D2E2E;
    text-align: center;
    width: 100%;
    margin: 0;
    cursor: pointer;
    position: relative;
    background-image: linear-gradient(#3CAA36, #3CAA36);
    background-size: 0% 2px;
    background-position: center 100%;
    background-repeat: no-repeat;
    transition: color 0.2s ease, background-size 0.3s ease-in-out;
}

.popup-forgot-password:hover[b-twgvrlfthc] {
    color: #3CAA36;
    text-decoration: none;
    background-size: 100% 2px;
}

/* ── Error message ── */
.popup-error[b-twgvrlfthc] {
    color: #D32F2F;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    padding: 8px 12px;
    background: #FFEBEE;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    animation: popupShake-b-twgvrlfthc 0.4s ease;
}

/* ── Loading spinner ── */
.popup-spinner[b-twgvrlfthc] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: popupSpin-b-twgvrlfthc 0.6s linear infinite;
}

/* ── Animations ── */
@keyframes popupFadeIn-b-twgvrlfthc {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popupSlideUp-b-twgvrlfthc {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes popupSpin-b-twgvrlfthc {
    to { transform: rotate(360deg); }
}

@keyframes popupShake-b-twgvrlfthc {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ── Responsive ──
   Below 550px: reduce padding, full-width inner, stack buttons vertically */
@media (max-width: 550px) {
    .popup-login-precios[b-twgvrlfthc] {
        padding: 32px 24px;
        width: calc(100vw - 32px);
    }

    .popup-login-inner[b-twgvrlfthc] {
        width: 100%;
    }

    .popup-login-title[b-twgvrlfthc] {
        font-size: 26px;
        line-height: 34px;
    }

    .popup-login-subtitle[b-twgvrlfthc] {
        font-size: 14px;
        line-height: 20px;
    }

    .popup-login-logo[b-twgvrlfthc] {
        width: 80px;
        height: 32px;
    }

    .popup-input[b-twgvrlfthc] {
        font-size: 16px;
        padding: 14px 14px;
    }

    .popup-input[b-twgvrlfthc]::placeholder {
        font-size: 16px;
    }

    .popup-login-buttons[b-twgvrlfthc] {
        flex-direction: column;
    }

    .popup-btn-login-filled[b-twgvrlfthc],
    .popup-btn-login-outlined[b-twgvrlfthc] {
        width: 100%;
    }
}
/* /Components/Shared/PopupMasInformacion.razor.rz.scp.css */
/* ============================================
   PopupMasInformacion — modal compacto y centrado,
   coherente con los popups de login (PopupOlvidoContrasena / PopupConfirmar).
   ============================================ */

/* Overlay oscuro */
.popup-overlay[b-1bzl0dbmno] {
    position: fixed;
    inset: 0;
    background: rgba(33, 33, 33, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 16px;
    animation: fadeIn-b-1bzl0dbmno 0.2s ease;
}

/* Modal — compacto (mismo lenguaje que el popup de login) */
.popup-mas-informacion[b-1bzl0dbmno] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 460px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: slideUp-b-1bzl0dbmno 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Botón cerrar — esquina superior derecha (como .poc-close del login) */
.popup-close-row[b-1bzl0dbmno] {
    position: absolute;
    top: 16px;
    right: 16px;
}

.popup-close-btn[b-1bzl0dbmno] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.popup-close-btn:hover[b-1bzl0dbmno] {
    background: #F5F5F5;
}

.popup-close-btn svg path[b-1bzl0dbmno] {
    transition: stroke 0.15s ease;
}

.popup-close-btn:hover svg path[b-1bzl0dbmno] {
    stroke: #3CAA36;
}

/* Cabecera (título + texto) */
.popup-content[b-1bzl0dbmno] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popup-text-block[b-1bzl0dbmno] {
    display: block;
}

.popup-title[b-1bzl0dbmno] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #2D2E2E;
    margin: 0;
}

.popup-subtitle[b-1bzl0dbmno] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #6B7280;
    margin: 6px 0 0 0;
}

/* Formulario — el <form> de EditForm NO recibe el atributo de CSS aislada (b-xxx),
   así que el espaciado entre campos se aplica en este wrapper propio, que sí está scoped. */
.popup-fields[b-1bzl0dbmno] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.popup-form-row[b-1bzl0dbmno] {
    display: flex;
    gap: 12px;
}

.popup-form-col[b-1bzl0dbmno] {
    flex: 1;
    min-width: 0;
}

/* Inputs — mismo estilo que el popup de login (#F5F5F5, radius 6px, foco verde) */
.popup-input[b-1bzl0dbmno] {
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    color: #212121;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

.popup-input[b-1bzl0dbmno]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
}

.popup-input:focus[b-1bzl0dbmno] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

.popup-textarea[b-1bzl0dbmno] {
    resize: vertical;
    min-height: 96px;
}

/* Aceptación de privacidad */
.popup-policies[b-1bzl0dbmno] {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #323332;
    cursor: pointer;
}

.popup-policies input[type="checkbox"][b-1bzl0dbmno] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #3CAA36;
    cursor: pointer;
}

/* Botón ENVIAR — verde, ancho completo (como .poc-btn-confirm) */
.popup-btn-enviar[b-1bzl0dbmno] {
    background-color: #3CAA36;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    height: 52px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.popup-btn-enviar:hover[b-1bzl0dbmno] {
    background-color: #80C87C;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.popup-btn-enviar:active[b-1bzl0dbmno] {
    background-color: #246F20;
    transform: none;
}

.popup-btn-enviar:disabled[b-1bzl0dbmno] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Estado de éxito */
.popup-success[b-1bzl0dbmno] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0;
    text-align: center;
}

.popup-success h3[b-1bzl0dbmno] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #2D2E2E;
    margin: 0;
}

.popup-success p[b-1bzl0dbmno] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #6B7280;
    margin: 0;
}

/* Spinner del botón */
.spinner-small[b-1bzl0dbmno] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-b-1bzl0dbmno 0.8s linear infinite;
}

/* Animaciones */
@keyframes fadeIn-b-1bzl0dbmno {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-1bzl0dbmno {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes spin-b-1bzl0dbmno {
    to { transform: rotate(360deg); }
}

/* Responsive — móvil: una sola columna */
@media (max-width: 520px) {
    .popup-mas-informacion[b-1bzl0dbmno] {
        padding: 32px 20px;
        gap: 20px;
    }

    .popup-title[b-1bzl0dbmno] {
        font-size: 20px;
        line-height: 28px;
    }

    .popup-form-row[b-1bzl0dbmno] {
        flex-direction: column;
        gap: 14px;
    }
}
/* /Components/Shared/PopupMensaje.razor.rz.scp.css */
/* ============================================================
   PopupMensaje — aviso/error del checkout con la MISMA estética que
   PopupConfirmar (overlay oscuro + modal blanco redondeado + X). Un solo
   botón "Aceptar". El mensaje admite HTML (p, a). Sin línea superior ni icono.
   ============================================================ */

.pm-overlay[b-oqn3llhw9v] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pm-fade-in-b-oqn3llhw9v 0.2s ease;
}

@keyframes pm-fade-in-b-oqn3llhw9v {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pm-modal[b-oqn3llhw9v] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 30px 40px 40px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: pm-slide-up-b-oqn3llhw9v 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pm-slide-up-b-oqn3llhw9v {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-close[b-oqn3llhw9v] {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.pm-close:hover[b-oqn3llhw9v] { background: #F5F5F5; }
.pm-close svg path[b-oqn3llhw9v] { transition: stroke 0.15s ease; }
.pm-close:hover svg path[b-oqn3llhw9v] { stroke: #3CAA36; }

.pm-body[b-oqn3llhw9v] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 28px;
}

.pm-title[b-oqn3llhw9v] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #2D2E2E;
    margin: 0;
    text-align: center;
}

.pm-message[b-oqn3llhw9v] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #212121;
    text-align: center;
    margin: 0;
    padding: 0 8px;
}

/* El mensaje admite HTML desde MapErrores (<p>, <a> mailto, etc.) */
.pm-message[b-oqn3llhw9v]  p { margin: 0 0 8px 0; }
.pm-message[b-oqn3llhw9v]  p:last-child { margin-bottom: 0; }
.pm-message[b-oqn3llhw9v]  a {
    color: #3CAA36;
    text-decoration: underline;
}
.pm-message[b-oqn3llhw9v]  a:hover { color: #246F20; }

.pm-btn[b-oqn3llhw9v] {
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: none;
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    background-color: #3CAA36;
    color: #FFFFFF;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pm-btn:hover[b-oqn3llhw9v] {
    background-color: #80C87C;
    box-shadow: 0px 2px 4px 0px #00000040;
    transform: translateY(-2px);
}

.pm-btn:active[b-oqn3llhw9v] {
    background-color: #246F20;
}

@media (max-width: 480px) {
    .pm-modal[b-oqn3llhw9v] {
        padding: 26px 22px 30px 22px;
    }

    .pm-message[b-oqn3llhw9v] {
        font-size: 16px;
        line-height: 24px;
    }
}
/* /Components/Shared/PopupModificacionDatos.razor.rz.scp.css */
.pmd-overlay[b-d6jpf1rrsw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 16px;
}

.pmd-card[b-d6jpf1rrsw] {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    max-height: 90vh;
    overflow-y: auto;
}

.pmd-close-row[b-d6jpf1rrsw] {
    display: flex;
    justify-content: flex-end;
}

.pmd-close-btn[b-d6jpf1rrsw] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}

.pmd-title[b-d6jpf1rrsw] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2D2E2E;
    margin: 0 0 8px;
}

.pmd-subtitle[b-d6jpf1rrsw] {
    color: #555;
    margin: 0 0 16px;
    font-size: .95rem;
}

.pmd-fields[b-d6jpf1rrsw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pmd-row[b-d6jpf1rrsw] {
    display: flex;
    gap: 12px;
}

.pmd-row .pmd-input[b-d6jpf1rrsw] {
    flex: 1;
    min-width: 0;
}

.pmd-input[b-d6jpf1rrsw] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #CCC;
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.pmd-input:focus[b-d6jpf1rrsw] {
    outline: none;
    border-color: #5FB246;
}

.pmd-textarea[b-d6jpf1rrsw] {
    resize: vertical;
    min-height: 72px;
}

.pmd-btn[b-d6jpf1rrsw] {
    background: #5FB246;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pmd-btn:disabled[b-d6jpf1rrsw] {
    opacity: .6;
    cursor: not-allowed;
}

.pmd-spinner[b-d6jpf1rrsw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pmd-spin-b-d6jpf1rrsw .8s linear infinite;
}

@keyframes pmd-spin-b-d6jpf1rrsw {
    to {
        transform: rotate(360deg);
    }
}

.pmd-error[b-d6jpf1rrsw] {
    color: #d33;
    font-size: .9rem;
    margin: 0;
}

.pmd-success[b-d6jpf1rrsw] {
    text-align: center;
    padding: 16px 0;
}

.pmd-success h3[b-d6jpf1rrsw] {
    color: #5FB246;
    margin: 0 0 8px;
}

@media (max-width: 480px) {
    .pmd-row[b-d6jpf1rrsw] {
        flex-direction: column;
    }
}
/* /Components/Shared/PopupOlvidoContrasena.razor.rz.scp.css */
/* ============================================================
   PopupOlvidoContrasena — Diseño fiel a Figma 84:1393
   ============================================================ */

/* Overlay oscuro */
.poc-overlay[b-wngy269cmb] {
    position: fixed;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: poc-fade-in-b-wngy269cmb 0.2s ease;
}

@keyframes poc-fade-in-b-wngy269cmb {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal — 393px ancho, bordes redondeados, fondo blanco */
.poc-modal[b-wngy269cmb] {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    width: 393px;
    max-width: calc(100vw - 32px);
    /* Figma: content empieza en top:64px, padding horizontal 54px */
    padding: 30px 54px 54px 54px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: poc-slide-up-b-wngy269cmb 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes poc-slide-up-b-wngy269cmb {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Botón cerrar — Figma: top:30px, right:30px */
.poc-close[b-wngy269cmb] {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.poc-close:hover[b-wngy269cmb] {
    background: #F5F5F5;
}

.poc-close svg path[b-wngy269cmb] {
    transition: stroke 0.15s ease;
}

.poc-close:hover svg path[b-wngy269cmb] {
    stroke: #3CAA36;
}

/* Cuerpo: contenido + botón
   margin-top: 34px → total desde top del modal: 30px padding + 34px = 64px (Figma) */
.poc-body[b-wngy269cmb] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    margin-top: 34px;
}

/* Título de la fase 1 */
.poc-title[b-wngy269cmb] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #2D2E2E;
    margin: 0;
    text-align: center;
    animation: poc-fade-in-b-wngy269cmb 0.18s ease;
}

/* Input de email — hereda .popup-input pero lo sobreescribimos
   para adaptarlo al tamaño de este modal más estrecho */
.poc-email-input[b-wngy269cmb] {
    background-color: #F5F5F5;
    border: none;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: normal;
    color: #212121;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
    animation: poc-fade-in-b-wngy269cmb 0.18s ease;
}

.poc-email-input[b-wngy269cmb]::placeholder {
    color: #9E9E9E;
    font-weight: 300;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
}

.poc-email-input:focus[b-wngy269cmb] {
    box-shadow: 0 0 0 2px rgba(60, 170, 54, 0.3);
}

/* Paso «usuario» (correo con varias cuentas): explicación + correo fijo + usuario, más juntos */
.poc-fields[b-wngy269cmb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.poc-intro[b-wngy269cmb] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #424242;
    text-align: center;
    margin: 0 0 4px 0;
    animation: poc-fade-in-b-wngy269cmb 0.18s ease;
}

.poc-input-fijo[b-wngy269cmb] {
    color: #757575;
    cursor: default;
}

.poc-input-fijo:focus[b-wngy269cmb] {
    box-shadow: none;
}

.poc-link[b-wngy269cmb] {
    align-self: center;
    background: none;
    border: none;
    padding: 4px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #3CAA36;
    text-decoration: underline;
    cursor: pointer;
}

.poc-link:disabled[b-wngy269cmb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Texto de confirmación — Figma: Nunito Sans Regular 24px / 32px */
.poc-message[b-wngy269cmb] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #212121;
    text-align: center;
    margin: 0;
    padding: 0 8px;
    animation: poc-fade-in-b-wngy269cmb 0.25s ease;
}

/* Botón confirmar — Figma: #3CAA36, height 54px, border-radius 6px */
.poc-btn-confirm[b-wngy269cmb] {
    background-color: #3CAA36;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    height: 54px;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .poc-btn-confirm:hover[b-wngy269cmb] {
        background-color: #80C87C;
        box-shadow: 0px 2px 4px 0px #00000040;
        transform: translateY(-2px);
    }

.poc-btn-confirm:active[b-wngy269cmb] {
    background-color: #246f20;
}

.poc-btn-confirm:disabled[b-wngy269cmb] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Error message */
.poc-error[b-wngy269cmb] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #b91c1c;
    margin: -24px 0 0 0;
    text-align: center;
    animation: poc-fade-in-b-wngy269cmb 0.18s ease;
}

/* Input error state */
.input-error[b-wngy269cmb] {
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.3) !important;
}

/* /Components/Shared/Prefooter.razor.rz.scp.css */
/* ============================================= */
/* PREFOOTER COMPONENT                           */
/* Figma node: 3627:35660                        */
/* Responsive: clamp() fluid + breakpoints       */
/* ============================================= */

.prefooter-section[b-hmsy47mmx9] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    --prefooter-py: clamp(25px, 2.6vw, 50px);
    --prefooter-item-h: clamp(45px, 3.65vw, 70px);
    --prefooter-font: clamp(14px, 1.15vw, 22px);
    --prefooter-icon-size: clamp(16px, 1.25vw, 24px);
    --prefooter-gap: clamp(6px, 0.52vw, 10px);
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--prefooter-py) var(--padding-lateral);
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.prefooter-grid[b-hmsy47mmx9] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.prefooter-row[b-hmsy47mmx9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.prefooter-item[b-hmsy47mmx9] {
    display: flex;
    flex: 1 0 0;
    gap: var(--prefooter-gap);
    height: var(--prefooter-item-h);
    align-items: center;
    justify-content: center;
    padding: 0 clamp(6px, 0.52vw, 10px);
    border-left: 1px dashed var(--gris-30);
    box-sizing: border-box;
}

.prefooter-icon[b-hmsy47mmx9] {
    width: var(--prefooter-icon-size);
    height: var(--prefooter-icon-size);
    flex-shrink: 0;
}

.prefooter-text[b-hmsy47mmx9] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--prefooter-font);
    line-height: clamp(18px, 1.46vw, 28px);
    color: var(--gris-50);
    text-align: center;
    white-space: nowrap;
}

/* ============================================= */
/* TABLET                                        */
/* ============================================= */
@media (max-width: 1024px) {
    .prefooter-section[b-hmsy47mmx9] {
        --padding-lateral: 30px;
    }

    .prefooter-row[b-hmsy47mmx9] {
        flex-wrap: wrap;
    }

    .prefooter-item[b-hmsy47mmx9] {
        flex: 1 0 calc(33.333% - 1px);
        min-width: 0;
    }
}

/* ============================================= */
/* MÓVIL                                         */
/* ============================================= */
@media (max-width: 768px) {
    .prefooter-section[b-hmsy47mmx9] {
        --padding-lateral: 16px;
        --prefooter-py: 30px;
    }

    .prefooter-grid[b-hmsy47mmx9] {
        gap: 0;
    }

    .prefooter-row[b-hmsy47mmx9] {
        flex-wrap: wrap;
    }

    .prefooter-item[b-hmsy47mmx9] {
        flex: 1 0 50%;
        max-width: 50%;
        height: 55px;
    }
}

/* ============================================= */
/* MÓVIL PEQUEÑO                                 */
/* ============================================= */
@media (max-width: 480px) {
    .prefooter-section[b-hmsy47mmx9] {
        --padding-lateral: 12px;
        --prefooter-py: 24px;
    }

    .prefooter-item[b-hmsy47mmx9] {
        flex: 1 0 50%;
        max-width: 50%;
        height: 50px;
        gap: 6px;
    }

    .prefooter-text[b-hmsy47mmx9] {
        font-size: 13px;
    }
}
/* /Components/Shared/ProductBadge.razor.rz.scp.css */
/* =================================================================
   ProductBadge — 1:1 con Figma "Grupo" (Web-PMC-Productos)
   Pill: padding 2px 7px, radius 2px, sombra 0 1px 3px rgba(0,0,0,.2)
   Texto: Nunito Sans Bold 10px (9px en pantallas pequeñas)
   ================================================================= */

.grupo[b-393qz2ddaz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: relative;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.badge-text[b-393qz2ddaz] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(9px, 0.52vw, 10px);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: inherit;
    white-space: nowrap;
}

/* ---- Tipos (fondo + color de texto/icono) ---- */
.grupo-nuevo[b-393qz2ddaz]      { background-color: #FFFFFF; color: #121212; }
.grupo-regalo[b-393qz2ddaz]     { background-color: #52B0AD; color: #FFFFFF; }
.grupo-reembolso[b-393qz2ddaz]  { background-color: #FDD623; color: #141414; }
.grupo-porcentaje[b-393qz2ddaz] { background-color: #686AAD; color: #FFFFFF; }
.grupo-oferta[b-393qz2ddaz]     { background-color: #FF5449; color: #FFFFFF; }
.grupo-eco[b-393qz2ddaz]        { background-color: #3CAA36; color: #FFFFFF; }
.grupo-homologado[b-393qz2ddaz] { background-color: #FF9500; color: #FFFFFF; }

/* ---- Variante "peque" ---- */
/* Las peque de letra mantienen el padding normal (Figma 174→475 mismo px).
   Solo regalo-peque cambia: icono centrado con padding 4px. */
.grupo-peque.grupo-regalo[b-393qz2ddaz] {
    padding: clamp(2px, 0.1vw, 2px) 4px;
    justify-content: center;
}

.badge-icon[b-393qz2ddaz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 11px;
    color: inherit;
}

.badge-icon svg[b-393qz2ddaz] {
    display: block;
    width: 100%;
    height: 100%;
}
/* /Components/Shared/ProductCard.razor.rz.scp.css */
/* ============================================================
   ProductCard — tarjeta de producto unificada (grid del catálogo + ProductSlider).
   CSS copiado VERBATIM desde Productos.razor.css (la card del grid es la referencia 1:1).
   Las variables de diseño (--producto-img-size, --radius-card, --font-*, --btn-*, colores)
   las aporta el CONTENEDOR: .product-grid (catálogo) o .product-slider-section (slider),
   y cascadean a esta card aunque viva en otro componente.
   ============================================================ */

/* =================================
   CARD DE PRODUCTO
   Figma: fixed 300px width, border-l #e0e0e0, pl 20px, pb 10px, gap 8px
   ================================= */
.card-producto[b-a4zy5fac07] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 10px 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
    flex: 0 0 260px;
    width: 260px;
    box-sizing: border-box;
}

.card-producto[b-a4zy5fac07]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gris-30);
    transition: background-color 0.35s ease, width 0.35s ease;
}

.card-producto:hover[b-a4zy5fac07]::before {
    background-color: var(--primario);
    width: 2px;
}

.card-producto:hover[b-a4zy5fac07] {
    transform: translateY(-5px);
}

/* Vista solo imágenes */
.card-producto.images-only-card[b-a4zy5fac07] {
    padding: 0 0 0 20px;
    gap: 0;
    flex: 0 0 190px;
    width: 190px;
}

.card-producto.images-only-card .frame-wrapper[b-a4zy5fac07] {
    /* Figma: imagen exactamente 170×170px, border-radius 14px */
    width: 170px;
    height: 170px;
    border-radius: 14px;
}

/* Hide badges in image-only view (Figma shows clean images) */
.card-producto.images-only-card .frame-8[b-a4zy5fac07] {
    display: none;
}

.frame-wrapper[b-a4zy5fac07] {
    /* Figma: 300px × 300px square image, border-radius 14px */
    width: var(--producto-img-size);
    height: var(--producto-img-size);
    flex-shrink: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-image-wrapper[b-a4zy5fac07] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    position: relative;
}

/* La foto: ocupa todo el contenedor y se encaja entera, igual que hacía el
   background-size: contain + background-position: center de antes. Absoluta y la
   primera del contenedor para que las etiquetas (Stock, Oferta, Regalo…) queden encima. */
.card-producto__img[b-a4zy5fac07] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
    display: block;
}

/* =================================
   BADGES FIGMA
   ================================= */
.frame-8[b-a4zy5fac07] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    left: clamp(8px, 1.04vw, 20px);
}

/* Las badges de producto (descuento, oferta, eco, homologado…) están en el componente
   reutilizable Components/Shared/ProductBadge.razor (CSS aislado). Aquí solo queda el badge
   de stock (.grupo-stock). */

.grupo-stock[b-a4zy5fac07] {
    background-color: var(--primary-10);
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(2px, 0.1vw, 2px) clamp(5px, 0.36vw, 7px);
    position: absolute;
    top: clamp(8px, 1.04vw, 20px);
    right: clamp(8px, 1.04vw, 20px);
    border-radius: 2px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    justify-content: flex-end;
}

.stock-dot[b-a4zy5fac07] {
    width: clamp(6px, 0.47vw, 9px);
    height: clamp(6px, 0.47vw, 9px);
    background-color: var(--primario);
    border-radius: 50%;
}

.stock-text[b-a4zy5fac07] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-badge);
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    color: #000000;
}

/* === REGALO: miniatura del artículo de regalo (esquina inferior derecha, cuadrada — no choca con badges/stock) === */
.card-regalo[b-a4zy5fac07] {
    position: absolute;
    bottom: clamp(8px, 1.04vw, 20px);
    right: clamp(8px, 1.04vw, 20px);
    width: clamp(40px, 3.4vw, 52px);
    height: clamp(40px, 3.4vw, 52px);
    background: var(--blanco, #ffffff);
    border: 1.5px solid var(--primario);
    border-radius: 10px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-regalo__img[b-a4zy5fac07] {
    width: 82%;
    height: 82%;
    object-fit: contain;
    border-radius: 6px;
}

.card-regalo__icon[b-a4zy5fac07] {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: clamp(16px, 1.4vw, 20px);
    height: clamp(16px, 1.4vw, 20px);
    padding: 3px;
    background: var(--primario);
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
}

/* =================================
   CONTENIDO DE PRODUCTO
   ================================= */
/* Contenido bajo la imagen (Figma node 5835:38330): columna con gap 8px y px 20px,
   con el MISMO ancho que la imagen para que ambos queden alineados. */
.product-content[b-a4zy5fac07] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: var(--producto-img-size);
    box-sizing: border-box;
    padding: 0 clamp(8px, 1.04vw, 20px);
    flex-shrink: 0;
}

/* Fila 1 — precio (izq) + swatches (der). Figma node 5851:38816 */
.price-row[b-a4zy5fac07] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

/* Fila 2 — título (izq, flexible) + botón carrito (der). Figma node 5851:38824 */
.title-row[b-a4zy5fac07] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.04vw, 20px);
    min-width: 0;
    box-sizing: border-box;
}

/* Referencia del producto cuando NO hay variantes de color (Figma node 5867:6065, body/large) */
.product-ref[b-a4zy5fac07] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--font-body);
    color: #757575;
    letter-spacing: 0.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.text-wrapper-5[b-a4zy5fac07] {
    /* Figma body/medium: 3 líneas máximo con ellipsis, altura reservada para alinear las cards */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    flex: 1 1 0;
    min-width: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: #141718;
    font-size: var(--font-body);
    letter-spacing: 0.25px; /* Figma body/medium */
    line-height: 1.43;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price[b-a4zy5fac07] {
    display: inline-flex;
    align-items: flex-end;
    gap: clamp(6px, 0.63vw, 12px);
    position: relative;
    flex: 0 0 auto;
}

.text-wrapper-6[b-a4zy5fac07] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--oferta-60);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-7[b-a4zy5fac07] {
    position: relative;
    width: fit-content;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--gris-50);
    font-size: clamp(10px, 0.73vw, 14px);
    letter-spacing: 0;
    line-height: normal;
    text-decoration: line-through;
}

.text-wrapper-8[b-a4zy5fac07] {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--negro);
    font-size: var(--font-price);
    letter-spacing: 0;
    line-height: normal;
}

.boton[b-a4zy5fac07] {
    width: var(--btn-cart-size);
    height: var(--btn-cart-size);
    min-width: var(--btn-cart-size);
    min-height: var(--btn-cart-size);
    position: relative;
    background-color: var(--blanco);
    border-radius: 6px;
    border: 1px solid var(--primario);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .boton:hover[b-a4zy5fac07] {
        background-color: var(--primario);
        box-shadow: 0px 2px 4px 0px #00000040;
    }

.boton:hover[b-a4zy5fac07]  .iconos-2 {
    color: var(--blanco);
}

/* ::deep porque el icono lo renderiza el componente hijo <CartIcon> (otro scope) */
.boton[b-a4zy5fac07]  .iconos-2 {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    color: var(--primario);
    transition: color 0.3s ease;
    transform: translateY(1px);
}

@keyframes addedToCart-b-a4zy5fac07 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.boton.added[b-a4zy5fac07] {
    animation: addedToCart-b-a4zy5fac07 0.5s ease;
    background-color: var(--primario);
}

.boton.added[b-a4zy5fac07]  .iconos-2 {
    color: var(--blanco);
}

/* === Botón "Más Información" — Figma node 3086:8274 (Property 1=deliniado)
   Outlined: white bg, border #3CAA36, rounded 6px, px 24px py 10px, h ~53px
   Font: Nunito Sans SemiBold 16px, color #3CAA36, letter-spacing 0.15px === */
.boton-mas-info[b-a4zy5fac07] {
    width: 100%;
    height: clamp(36px, 2.76vw, 53px);
    padding: clamp(5px, 0.52vw, 10px) clamp(12px, 1.25vw, 24px);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boton-mas-info span[b-a4zy5fac07] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.83vw, 16px);
    line-height: 24px;
    color: var(--primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
}

.boton-mas-info:hover[b-a4zy5fac07] {
    background-color: var(--primary-10);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(60, 170, 54, 0.2);
}

/* === Botón "Consultar precio" — Same outlined style
   For SubFamilia con PrecioNoVisibleSinLogin y usuario no logueado === */
.boton-consultar[b-a4zy5fac07] {
    width: 100%;
    height: clamp(36px, 2.76vw, 53px);
    padding: clamp(5px, 0.52vw, 10px) clamp(12px, 1.25vw, 24px);
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boton-consultar span[b-a4zy5fac07] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.83vw, 16px);
    line-height: 24px;
    color: var(--primario);
    letter-spacing: 0.15px;
    white-space: nowrap;
    text-align: center;
    transition: color 0.3s ease;
}

/* Hover igual que el botón de carrito (.boton): se rellena de verde,
   el texto pasa a blanco y la misma sombra. Sin desplazamiento vertical. */
.boton-consultar:hover[b-a4zy5fac07] {
    background-color: var(--primario);
    box-shadow: 0px 2px 4px 0px #00000040;
}

.boton-consultar:hover span[b-a4zy5fac07] {
    color: var(--blanco);
}

/* =================================
   CONTROL DE CANTIDAD (cuando el producto ya está en el carrito)
   Mismo look que el control del carrito (CartDropdown): fondo gris #F5F5F5, SIN borde,
   botones planos con hover verde, input transparente centrado, radio 8px.
   Altura = la del botón (--btn-cart-size) para no desplazar el layout al alternar.
   El <input> lo renderiza InputNumero (sin scope) → se estiliza con ::deep.
   ================================= */
.card-qty[b-a4zy5fac07] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: var(--btn-cart-size);
    background: #F5F5F5;
    border-radius: 8px;
    padding: 0 clamp(6px, 0.5vw, 10px);
    box-sizing: border-box;
    /* Entrada al pasar del botón de añadir al control de cantidad */
    animation: card-qty-in-b-a4zy5fac07 0.22s ease both;
}

.card-qty-btn[b-a4zy5fac07] {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    width: clamp(18px, 1.45vw, 24px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.card-qty-btn:hover:not(:disabled)[b-a4zy5fac07] {
    color: var(--primario);
}

/* Cuando el "−" es papelera (cantidad en el mínimo): hover ROJO para dejar claro que ese clic borra */
.card-qty-btn--remove:hover:not(:disabled)[b-a4zy5fac07] {
    color: var(--oferta-60);
}

.card-qty-btn:disabled[b-a4zy5fac07] {
    opacity: 0.3;
    cursor: not-allowed;
}

[b-a4zy5fac07] .card-qty-input {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: var(--font-body);
    color: #121212;
    text-align: center;
    width: clamp(24px, 2vw, 36px);
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
}

@keyframes card-qty-in-b-a4zy5fac07 {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}

/* =================================
   RESPONSIVE (mismos breakpoints y valores que el grid)
   ================================= */
@media (max-width: 1400px) {
    .card-producto[b-a4zy5fac07] {
        flex: 0 0 240px;
        width: 240px;
    }
}

@media (max-width: 1100px) {
    .card-producto[b-a4zy5fac07] {
        flex: 0 0 220px;
        width: 220px;
        padding: 0 0 8px 12px;
        gap: 6px;
    }

    .boton[b-a4zy5fac07] {
        border-radius: 5px;
    }
}

@media (max-width: 768px) {
    .card-producto[b-a4zy5fac07] {
        flex: 0 0 180px;
        width: 180px;
        padding: 0 0 6px 10px;
        gap: 4px;
    }
}

@media (max-width: 520px) {
    .card-producto[b-a4zy5fac07] {
        flex: 0 0 150px;
        width: 150px;
    }
}

/* images-only grid responsive: escalar imagen y card a la vez */
@media (max-width: 1400px) {
    .product-grid.images-only-grid .card-producto[b-a4zy5fac07] {
        /* img 130px + pl 20px = 150px */
        flex: 0 0 150px;
        width: 150px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-a4zy5fac07] {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 1100px) {
    .product-grid.images-only-grid .card-producto[b-a4zy5fac07] {
        /* img 110px + pl 20px = 130px */
        flex: 0 0 130px;
        width: 130px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-a4zy5fac07] {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 768px) {
    .product-grid.images-only-grid .card-producto[b-a4zy5fac07] {
        /* img 90px + pl 12px = 102px */
        flex: 0 0 102px;
        width: 102px;
        padding-left: 12px;
    }

    .product-grid.images-only-grid .card-producto .frame-wrapper[b-a4zy5fac07] {
        width: 90px;
        height: 90px;
        border-radius: 8px;
    }
}
/* /Components/Shared/ProductSlider.razor.rz.scp.css */
/* ============================================= */
/* PRODUCT SLIDER COMPONENT */
/* ============================================= */
.product-slider-section[b-vmd31682p7] {
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --ad-primario-40: #80C87C;
    /* Tokens de card alineados 1:1 con el grid del catálogo (.product-grid en Productos.razor.css)
       para que ProductCard se vea idéntica en el slider y en el grid. Responsive (mismos breakpoints
       y valores que el grid) al final del archivo. */
    --producto-img-size: 260px;
    --producto-card-padding: 20px;
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --font-title-md: clamp(14px, 1.25vw, 24px);
    --font-body: 14px;
    --font-price: 17px;
    --font-badge: 9px;
    --radius-card: 14px;
    --btn-cart-size: 56px;
    --btn-icon-size: 21px;
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);
    --negro: #212121;
    --blanco: #FFFFFF;
    --primario: #3CAA36;
    --gris-30: #E0E0E0;
    --gris-50: #9E9E9E;
    --oferta-60: #DE3730;
    --primary-10: #EBF6EB;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    background-color: var(--blanco);
}

.section-header[b-vmd31682p7] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.section-title[b-vmd31682p7] {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: var(--font-title-xl);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    margin: 0;
}

.vector-3[b-vmd31682p7] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #ABABAB;
    border-radius: 0.5px;
}

.slider-container-products[b-vmd31682p7] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    width: calc(100% + var(--padding-lateral) * 2);
}

.carousel-btn[b-vmd31682p7] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.carousel-btn:hover[b-vmd31682p7] {
    opacity: 0.6;
}

.carousel-btn svg[b-vmd31682p7] {
    width: 100%;
    height: 100%;
}

.carousel-container-products[b-vmd31682p7] {
    flex: 1;
    overflow: hidden;
}

.carousel-track[b-vmd31682p7] {
    display: flex;
    gap: var(--gap-md);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track[b-vmd31682p7]::-webkit-scrollbar {
    display: none;
}

.no-products-msg[b-vmd31682p7] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: var(--font-body);
    color: var(--gris-50);
    text-align: center;
    padding: clamp(20px, 2.08vw, 40px);
}

/* TABLET */
@media (max-width: 1024px) {
    .product-slider-section[b-vmd31682p7] {
        --padding-lateral: 30px;
        --gap-md: 14px;
        --gap-lg: 30px;
        padding: 30px var(--padding-lateral) 40px;
    }

    .slider-container-products[b-vmd31682p7] {
        margin-left: calc(var(--padding-lateral) * -1);
        margin-right: calc(var(--padding-lateral) * -1);
        padding: 10px var(--padding-lateral);
        width: calc(100% + var(--padding-lateral) * 2);
    }

    .carousel-btn[b-vmd31682p7] {
        display: none;
    }

    .carousel-track[b-vmd31682p7] {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left: 0;
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .product-slider-section[b-vmd31682p7] {
        --padding-lateral: 16px;
        --gap-md: 12px;
        --gap-lg: 24px;
        padding: 24px var(--padding-lateral) 30px;
    }

    .slider-container-products[b-vmd31682p7] {
        padding: 8px 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .carousel-track[b-vmd31682p7] {
        padding: 0 var(--padding-lateral);
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .product-slider-section[b-vmd31682p7] {
        --padding-lateral: 12px;
    }

    .slider-container-products[b-vmd31682p7] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 8px 0;
    }
}

/* ============================================================
   Tamaño de la ProductCard alineado 1:1 con el grid del catálogo
   (mismos breakpoints y valores que .product-grid en Productos.razor.css),
   para que la tarjeta se vea idéntica en el slider y en el grid.
   ============================================================ */
@media (max-width: 1400px) {
    .product-slider-section[b-vmd31682p7] {
        --producto-img-size: 240px;
        --btn-cart-size: 52px;
        --font-body: 14px;
        --font-price: 17px;
    }
}

@media (max-width: 1100px) {
    .product-slider-section[b-vmd31682p7] {
        --producto-img-size: 220px;
        --btn-cart-size: 48px;
        --radius-card: 10px;
        --font-body: 13px;
        --font-price: 15px;
        --font-badge: 9px;
    }
}

@media (max-width: 768px) {
    .product-slider-section[b-vmd31682p7] {
        --producto-img-size: 180px;
        --btn-cart-size: 44px;
        --radius-card: 9px;
        --font-body: 12px;
        --font-price: 14px;
    }
}

@media (max-width: 520px) {
    .product-slider-section[b-vmd31682p7] {
        --producto-img-size: 150px;
        --btn-cart-size: 40px;
        --btn-icon-size: 18px;
        --radius-card: 8px;
        --font-price: 13px;
    }
}
/* /Components/Shared/ProductSwatches.razor.rz.scp.css */
/* ============================================================
   SWATCHES DE VARIANTES (Figma "Redondas" — node 171:2128)
   Círculos de color 23px, gap 4px, activo con anillo,
   overflow "+N" en Nunito Sans Bold 14px #141718.
   ============================================================ */
.agrupacion-swatches[b-n87mbo3u9g] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-height: 23px;
    /* No desbordar la tarjeta ni pisar la vecina: ocupar solo el espacio disponible y recortar. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Cada swatch (Figma "Redonda", node 171:2018): área de 23px con un punto de color
   de 15px centrado. El borde discontinuo se reserva transparente y aparece (oscuro)
   sólo en el estado seleccionado — así no hay salto de layout. */
.swatch-color[b-n87mbo3u9g] {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1.5px dashed transparent;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.swatch-color[b-n87mbo3u9g]::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--swatch-color, #CCCCCC);
    border: 1px solid rgba(0, 0, 0, 0.12); /* borde sutil para que el blanco se distinga */
    box-sizing: border-box;
}

.swatch-color:hover:not(.swatch-active)[b-n87mbo3u9g] {
    border-color: #BDBDBD;
}

/* Seleccionado: anillo discontinuo oscuro alrededor del punto de color. */
.swatch-color.swatch-active[b-n87mbo3u9g] {
    border-color: #141718;
}

/* Variante sin color (talla, medida…): chip de texto. */
.swatch-text[b-n87mbo3u9g] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: clamp(10px, 0.73vw, 12px);
    line-height: 1.4;
    color: #757575;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    /* Valores largos ("A5 C5 160 hojas") no deben ensanchar la fila: recortar con elipsis. */
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.swatch-text:hover[b-n87mbo3u9g] {
    border-color: #999999;
    color: #333333;
}

.swatch-text.swatch-active[b-n87mbo3u9g] {
    border-color: #141718;
    color: #141718;
    font-weight: 700;
}

/* Contador de variantes ocultas "+N" — Figma N Body 2 (Nunito Sans Bold 14). */
.swatch-more[b-n87mbo3u9g] {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 0.93vw, 14px);
    line-height: 1;
    color: #141718;
    padding: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* /Components/Shared/SkeletonBrandSlider.razor.rz.scp.css */
/* ==============================================
   SKELETON BRAND SLIDER - Replica exacta del BrandSlider.razor.css
   ============================================== */
.skel-brand-slider-section[b-3oc002wmlq] {
    --padding-lateral: clamp(16px, 6vw, 115px);
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --btn-icon-size: clamp(16px, 1.25vw, 24px);
    --brand-height: clamp(25px, 2.6vw, 50px);
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    background-color: #FFFFFF;
}

/* Section header */
.skel-brand-section-header[b-3oc002wmlq] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.skel-brand-section-title[b-3oc002wmlq] {
    width: clamp(160px, 16vw, 320px);
    height: var(--font-title-xl);
    border-radius: 6px;
}

.skel-brand-vector-3[b-3oc002wmlq] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #E0E0E0;
    border-radius: 0.5px;
}

/* Slider wrapper */
.skel-brands-slider-wrapper[b-3oc002wmlq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    width: calc(100% + var(--padding-lateral) * 2);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    align-self: center;
}

.skel-brands-nav-btn[b-3oc002wmlq] {
    background: transparent;
    border: none;
    padding: 0;
    flex-shrink: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skel-brands-nav-btn svg[b-3oc002wmlq] {
    width: 100%;
    height: 100%;
}

.skel-brands-slider-container[b-3oc002wmlq] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.skel-brands-track-infinite[b-3oc002wmlq] {
    display: flex;
    width: max-content;
    gap: var(--gap-md);
}

.skel-brand-item[b-3oc002wmlq] {
    flex-shrink: 0;
    height: var(--brand-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skel-brand-logo[b-3oc002wmlq] {
    width: clamp(60px, 6vw, 120px);
    height: var(--brand-height);
    border-radius: 4px;
}

/* ======== RESPONSIVE — replica exacta del BrandSlider ======== */

@media (max-width: 1024px) {
    .skel-brand-slider-section[b-3oc002wmlq] {
        --padding-lateral: 30px;
        --gap-md: 14px;
        --gap-lg: 30px;
        --brand-height: 30px;
    }

    .skel-brands-slider-wrapper[b-3oc002wmlq] {
        padding: 10px var(--padding-lateral);
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .skel-brands-nav-btn[b-3oc002wmlq] {
        display: none;
    }
}

@media (max-width: 768px) {
    .skel-brand-slider-section[b-3oc002wmlq] {
        --padding-lateral: 16px;
        --gap-md: 12px;
        --gap-lg: 24px;
        --brand-height: 24px;
    }

    .skel-brands-slider-wrapper[b-3oc002wmlq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }
}

@media (max-width: 480px) {
    .skel-brand-slider-section[b-3oc002wmlq] {
        --padding-lateral: 12px;
    }

    .skel-brands-slider-wrapper[b-3oc002wmlq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 10px 0;
    }
}
/* /Components/Shared/SkeletonProductDetail.razor.rz.scp.css */
/* ==============================================
   SKELETON PRODUCT DETAIL — réplica del layout de ArticuloDetalle.razor.css
   (.articulo-detalle-page / .articulo-detalle-row): galería | divisor | info | rail
   ============================================== */
.skel-detail-page[b-yhltkqmxjr] {
    --ad-pad-x: clamp(16px, 6vw, 115px);
    --ad-max-w: 1690px;

    width: 100%;
    margin: 0 auto;
    padding: clamp(12px, 1.5vw, 24px) var(--ad-pad-x);
    box-sizing: border-box;
}

.skel-detail-breadcrumb[b-yhltkqmxjr] {
    width: clamp(180px, 30vw, 420px);
    height: 16px;
    border-radius: 4px;
    margin-bottom: clamp(12px, 1.5vw, 24px);
}

/* Mismo grid que .articulo-detalle-row: gallery | 1px | info | rail */
.skel-detail-row[b-yhltkqmxjr] {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) 1px minmax(0, 1fr) minmax(0, 0.46fr);
    gap: clamp(16px, 2.5vw, 44px);
    max-width: var(--ad-max-w);
    margin: 0 auto;
}

.skel-detail-divider[b-yhltkqmxjr] {
    width: 1px;
    align-self: stretch;
    background-color: #E0E0E0;
}

/* Columna galería */
.skel-detail-gallery[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.skel-detail-main-image[b-yhltkqmxjr] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

.skel-detail-thumbs[b-yhltkqmxjr] {
    display: flex;
    gap: 12px;
}

.skel-detail-thumb[b-yhltkqmxjr] {
    width: clamp(56px, 5vw, 88px);
    height: clamp(56px, 5vw, 88px);
    border-radius: 8px;
    flex-shrink: 0;
}

/* Columna info */
.skel-detail-info[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.skel-detail-badges[b-yhltkqmxjr] {
    display: flex;
    gap: 8px;
}

.skel-detail-badge[b-yhltkqmxjr] {
    width: 80px;
    height: 26px;
    border-radius: 13px;
}

.skel-detail-ref[b-yhltkqmxjr] {
    width: 120px;
    height: 14px;
    border-radius: 4px;
}

.skel-detail-title[b-yhltkqmxjr] {
    width: 90%;
    height: 40px;
    border-radius: 6px;
}

.skel-detail-desc[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-line[b-yhltkqmxjr] {
    width: 100%;
    height: 14px;
    border-radius: 4px;
}

.skel-line.w-75[b-yhltkqmxjr] { width: 75%; }
.skel-line.w-50[b-yhltkqmxjr] { width: 50%; }
.skel-line.w-25[b-yhltkqmxjr] { width: 25%; }

.skel-detail-price[b-yhltkqmxjr] {
    width: 140px;
    height: 36px;
    border-radius: 6px;
}

.skel-detail-actions[b-yhltkqmxjr] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.skel-detail-qty[b-yhltkqmxjr] {
    width: 120px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
}

.skel-detail-cart[b-yhltkqmxjr] {
    flex: 1;
    height: 48px;
    border-radius: 8px;
}

/* Columna rail (especificaciones / documentos) */
.skel-detail-rail[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.skel-rail-header[b-yhltkqmxjr] {
    width: 70%;
    height: 24px;
    border-radius: 6px;
}

.skel-rail-item[b-yhltkqmxjr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EEEEEE;
}

/* ======== RESPONSIVE — replica el comportamiento del layout real ======== */

/* El rail se apila debajo en pantallas medianas */
@media (max-width: 1200px) {
    .skel-detail-row[b-yhltkqmxjr] {
        grid-template-columns: minmax(0, 0.85fr) 1px minmax(0, 1fr);
    }
    .skel-detail-rail[b-yhltkqmxjr] {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px 32px;
    }
    .skel-rail-item[b-yhltkqmxjr] {
        flex: 1 1 280px;
    }
}

/* Una sola columna en móvil/tablet (igual que el layout real) */
@media (max-width: 768px) {
    .skel-detail-row[b-yhltkqmxjr] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .skel-detail-divider[b-yhltkqmxjr] {
        display: none;
    }
    .skel-detail-rail[b-yhltkqmxjr] {
        flex-direction: column;
    }
}
/* /Components/Shared/SkeletonProductSlider.razor.rz.scp.css */
/* ==============================================
   SKELETON PRODUCT SLIDER - Replica exacta del ProductSlider.razor.css
   ============================================== */
.skel-product-slider-section[b-vv30qtcp2i] {
    --gap-md: clamp(10px, 1.04vw, 20px);
    --gap-lg: clamp(25px, 2.6vw, 50px);
    --producto-img-size: clamp(140px, 15.63vw, 300px);
    --producto-card-padding: clamp(10px, 1.04vw, 20px);
    --font-title-xl: clamp(22px, 2.08vw, 40px);
    --font-body: clamp(12px, 0.83vw, 16px);
    --font-price: clamp(14px, 1.04vw, 20px);
    --radius-card: clamp(7px, 0.73vw, 14px);
    --btn-cart-size: clamp(36px, 3.39vw, 65px);
    --btn-icon-size: clamp(16px, 1.25vw, 24px);
    --line-width: clamp(200px, 26.2vw, 503px);
    --line-height-section: clamp(35px, 3.91vw, 75px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    background-color: #FFFFFF;
}

/* Section header */
.skel-section-header[b-vv30qtcp2i] {
    position: relative;
    width: var(--line-width);
    height: var(--line-height-section);
}

.skel-section-title[b-vv30qtcp2i] {
    width: clamp(180px, 18vw, 350px);
    height: var(--font-title-xl);
    border-radius: 6px;
}

.skel-vector-3[b-vv30qtcp2i] {
    position: absolute;
    width: var(--line-width);
    height: 1px;
    top: var(--line-height-section);
    left: 0;
    background-color: #E0E0E0;
    border-radius: 0.5px;
}

/* Slider container */
.skel-slider-container-products[b-vv30qtcp2i] {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-left: calc(var(--padding-lateral) * -1);
    margin-right: calc(var(--padding-lateral) * -1);
    padding: clamp(5px, 0.52vw, 10px) clamp(35px, 3.7vw, 71px);
    width: calc(100% + var(--padding-lateral) * 2);
}

.skel-carousel-btn[b-vv30qtcp2i] {
    background: transparent;
    border: none;
    padding: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.skel-carousel-btn svg[b-vv30qtcp2i] {
    width: 100%;
    height: 100%;
}

.skel-carousel-container-products[b-vv30qtcp2i] {
    flex: 1;
    overflow: hidden;
}

.skel-carousel-track[b-vv30qtcp2i] {
    display: flex;
    gap: var(--gap-md);
    overflow: hidden;
}

/* Card producto skeleton */
.skel-card-producto[b-vv30qtcp2i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.42vw, 8px);
    padding: 0 0 clamp(5px, 0.52vw, 10px) var(--producto-card-padding);
    flex: 0 0 auto;
    position: relative;
}

.skel-card-producto[b-vv30qtcp2i]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #E0E0E0;
}

.skel-card-producto:first-child[b-vv30qtcp2i] {
    padding-left: var(--producto-card-padding);
}

/* Imagen */
.skel-frame-wrapper[b-vv30qtcp2i] {
    width: var(--producto-img-size);
    height: var(--producto-img-size);
    border-radius: var(--radius-card);
    overflow: hidden;
    flex-shrink: 0;
}

.skel-product-image[b-vv30qtcp2i] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
}

/* Info */
.skel-pack-info-text[b-vv30qtcp2i] {
    display: flex;
    width: calc(var(--producto-img-size) - clamp(10px, 1.04vw, 20px) * 2);
    margin: 0 auto;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(8px, 0.78vw, 15px);
    flex-shrink: 0;
}

.skel-info-producto[b-vv30qtcp2i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(3px, 0.31vw, 6px);
    flex: 1;
    min-width: 0;
    max-width: calc(100% - var(--btn-cart-size) - clamp(8px, 0.78vw, 15px));
}

.skel-product-title[b-vv30qtcp2i] {
    width: clamp(80px, 8vw, 150px);
    height: var(--font-body);
    border-radius: 4px;
}

.skel-product-price[b-vv30qtcp2i] {
    width: clamp(50px, 5vw, 80px);
    height: var(--font-price);
    border-radius: 4px;
}

.skel-cart-btn[b-vv30qtcp2i] {
    width: var(--btn-cart-size);
    height: var(--btn-cart-size);
    border-radius: clamp(4px, 0.31vw, 6px);
    flex-shrink: 0;
}

/* ======== RESPONSIVE — replica exacta del ProductSlider ======== */

/* TABLET */
@media (max-width: 1024px) {
    .skel-product-slider-section[b-vv30qtcp2i] {
        --padding-lateral: 30px;
        --gap-md: 14px;
        --gap-lg: 30px;
        --producto-img-size: 160px;
        --producto-card-padding: 14px;
        padding: 30px var(--padding-lateral) 40px;
    }

    .skel-slider-container-products[b-vv30qtcp2i] {
        margin-left: calc(var(--padding-lateral) * -1);
        margin-right: calc(var(--padding-lateral) * -1);
        padding: 10px var(--padding-lateral);
        width: calc(100% + var(--padding-lateral) * 2);
    }

    .skel-carousel-btn[b-vv30qtcp2i] {
        display: none;
    }

    .skel-card-producto[b-vv30qtcp2i]::before {
        display: none;
    }

    .skel-card-producto:first-child[b-vv30qtcp2i] {
        padding-left: 0;
    }

    .skel-pack-info-text[b-vv30qtcp2i] {
        width: var(--producto-img-size);
    }

    .skel-info-producto[b-vv30qtcp2i] {
        max-width: 100%;
    }

    .skel-product-title[b-vv30qtcp2i] {
        width: 100%;
    }

    .skel-cart-btn[b-vv30qtcp2i] {
        display: none;
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .skel-product-slider-section[b-vv30qtcp2i] {
        --padding-lateral: 16px;
        --gap-md: 12px;
        --gap-lg: 24px;
        --producto-img-size: 140px;
        --producto-card-padding: 12px;
        padding: 24px var(--padding-lateral) 30px;
    }

    .skel-slider-container-products[b-vv30qtcp2i] {
        padding: 8px 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .skel-carousel-track[b-vv30qtcp2i] {
        padding: 0 var(--padding-lateral);
    }

    .skel-card-producto[b-vv30qtcp2i] {
        padding-left: var(--producto-card-padding);
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .skel-product-slider-section[b-vv30qtcp2i] {
        --padding-lateral: 12px;
        --producto-img-size: 120px;
    }

    .skel-slider-container-products[b-vv30qtcp2i] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 8px 0;
    }
}
/* /Components/Shared/UserAccountMenu.razor.rz.scp.css */
/* ============================================
   USER ACCOUNT MENU - Diseño basado en Figma
   ============================================ */

/* Overlay oscuro de fondo */
.user-menu-overlay[b-kb2j99nqwf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Mostrar overlay cuando el menú está visible */
.user-account-menu.show~.user-menu-overlay[b-kb2j99nqwf],
.user-menu-overlay:has(+ .user-account-menu.show)[b-kb2j99nqwf] {
    opacity: 1;
    pointer-events: auto;
}

/* Contenedor principal del menú */
.user-account-menu[b-kb2j99nqwf] {
    position: fixed;
    top: 0;
    right: -700px;
    /* Oculto fuera de la pantalla a la derecha */
    height: 100vh;
    width: 629px;
    /* 381px contenido + 124px padding horizontal x2 */
    background-color: #FFFFFF;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
    border-radius: 15px 0 0 15px;
    /* ✅ Border radius en IZQUIERDA (top-left, bottom-left) */
    padding: 40px 124px 80px 124px;
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 61px;
}

/* Estado visible del menú */
.user-account-menu.show[b-kb2j99nqwf] {
    right: 0;
}

/* ============================================
   HEADER DEL MENÚ
   ============================================ */

.user-menu-header[b-kb2j99nqwf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 381px;
    flex-shrink: 0;
}

/* Bloque título + nombre de usuario (columna a la izquierda del botón cerrar) */
.user-menu-titles[b-kb2j99nqwf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Título "Mi Cuenta" */
.user-menu-title[b-kb2j99nqwf] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: normal;
    color: #2D2E2E;
    margin: 0;
    white-space: nowrap;
}

/* Nombre del usuario — claramente más pequeño que el título */
.user-menu-username[b-kb2j99nqwf] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #757575;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón cerrar (X) */
.user-menu-close[b-kb2j99nqwf] {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-menu-close span[b-kb2j99nqwf] {
    font-size: 32px;
    line-height: 1;
    color: #2D2E2E;
    font-weight: 300;
}

.user-menu-close:hover span[b-kb2j99nqwf] {
    color: #000000;
}

/* ============================================
   LISTA DE OPCIONES
   ============================================ */

.user-menu-list[b-kb2j99nqwf] {
    display: flex;
    flex-direction: column;
    width: 381px;
    flex-shrink: 0;
}

/* Items del menú */
.user-menu-item[b-kb2j99nqwf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0 15px 10px;
    border-bottom: 1px solid #E0E0E0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #2D2E2E;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border-left: 3px solid transparent;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    transition: all 0.15s ease;
    position: relative;
}

/* Hover effect — mirrors megamenu/services sidebar */
.user-menu-item:hover[b-kb2j99nqwf] {
    background-color: #F5F5F5;
    font-weight: 700;
    border-left: 3px solid #3CAA36;
    color: #2D2E2E;
}

/* Botón de Cerrar Sesión (último item, sin border-bottom) */
.user-menu-logout[b-kb2j99nqwf] {
    border-bottom: none;
    color: #dc3545;
    font-weight: 600;
}

.user-menu-logout:hover[b-kb2j99nqwf] {
    color: #dc3545;
    background-color: #F5F5F5;
    border-left: 3px solid #dc3545;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet (< 900px) */
@media (max-width: 900px) {
    .user-account-menu[b-kb2j99nqwf] {
        width: 500px;
        padding: 30px 60px 60px 60px;
    }

    .user-menu-header[b-kb2j99nqwf],
    .user-menu-list[b-kb2j99nqwf] {
        width: 100%;
    }

    .user-menu-title[b-kb2j99nqwf] {
        font-size: 36px;
    }
}

/* Mobile (< 600px) */
@media (max-width: 600px) {
    .user-account-menu[b-kb2j99nqwf] {
        width: 100%;
        max-width: 400px;
        padding: 30px 30px 60px 30px;
        border-radius: 15px 0 0 15px;
    }

    .user-menu-header[b-kb2j99nqwf],
    .user-menu-list[b-kb2j99nqwf] {
        width: 100%;
    }

    .user-menu-title[b-kb2j99nqwf] {
        font-size: 32px;
    }

    .user-menu-item[b-kb2j99nqwf] {
        font-size: 14px;
    }
}

/* Mobile muy pequeño (< 400px) */
@media (max-width: 400px) {
    .user-account-menu[b-kb2j99nqwf] {
        width: 100vw;
        border-radius: 0;
    }
}
/* /Components/Shared/VariantSelector.razor.rz.scp.css */
.variant-selector[b-plzyfrp5id] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 8px 0 4px;
}

.variant-axis[b-plzyfrp5id] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.variant-axis-label[b-plzyfrp5id] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Nunito Sans', sans-serif;
}

.variant-axis-name[b-plzyfrp5id] {
    font-weight: 700;
    font-size: 14px;
    color: #2D2E2E;
}

.variant-axis-current[b-plzyfrp5id] {
    font-weight: 400;
    font-size: 13px;
    color: #6b6b6b;
}

.variant-axis-options[b-plzyfrp5id] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ---- Chips de color ---- */
.variant-swatch[b-plzyfrp5id] {
    --swatch-color: #e0e0e0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 4px;
    border-radius: 50%;
    background-color: var(--swatch-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cfcfcf;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}

.variant-swatch:hover[b-plzyfrp5id] {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px #9b9b9b;
}

.variant-swatch.variant-active[b-plzyfrp5id] {
    box-shadow: 0 0 0 2px #3CAA36;
}

.variant-swatch-txt[b-plzyfrp5id] {
    font-size: 11px;
    font-weight: 600;
    color: #2D2E2E;
    padding: 0 4px;
    white-space: nowrap;
}

/* Chips de texto (talla, capacidad, etc.) reutilizan forma de "pastilla" */
.variant-btn[b-plzyfrp5id] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    background: #fff;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2D2E2E;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.variant-btn:hover[b-plzyfrp5id] {
    border-color: #3CAA36;
    color: #3CAA36;
}

.variant-btn.variant-active[b-plzyfrp5id] {
    border-color: #3CAA36;
    color: #3CAA36;
    background: #f2fbf1;
    font-weight: 700;
}

/* Sin SKU visible para esa combinación */
.variant-disabled[b-plzyfrp5id] {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
    pointer-events: none;
}

.variant-swatch.variant-disabled[b-plzyfrp5id] {
    text-decoration: none;
}
/* /Components/Shared/WelcomeModal.razor.rz.scp.css */
/* ============================================
   WelcomeModal Component Styles
   ============================================ */

.welcome-modal-overlay[b-d8me73q3qw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-d8me73q3qw 0.2s ease-out;
}

.welcome-modal[b-d8me73q3qw] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    padding: 32px;
    position: relative;
    animation: slideIn-b-d8me73q3qw 0.3s ease-out;
}

.welcome-modal-close[b-d8me73q3qw] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.welcome-modal-close:hover[b-d8me73q3qw] {
    background-color: #f0f0f0;
    color: #333;
}

.welcome-modal-header[b-d8me73q3qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.welcome-modal-logo[b-d8me73q3qw] {
    height: 50px;
    width: auto;
}

.welcome-modal-title[b-d8me73q3qw] {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    text-align: center;
}

.welcome-modal-body[b-d8me73q3qw] {
    margin-bottom: 24px;
}

.welcome-modal-message[b-d8me73q3qw] {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 16px;
    border-radius: 8px;
}

.welcome-modal-footer[b-d8me73q3qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.welcome-modal-timer[b-d8me73q3qw] {
    font-size: 13px;
    color: #888;
}

/* Animations */
@keyframes fadeIn-b-d8me73q3qw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-d8me73q3qw {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

/* Responsive */
@media (max-width: 576px) {
    .welcome-modal[b-d8me73q3qw] {
        padding: 24px;
        margin: 16px;
    }

    .welcome-modal-title[b-d8me73q3qw] {
        font-size: 20px;
    }

    .welcome-modal-message[b-d8me73q3qw] {
        font-size: 14px;
        padding: 12px;
    }
}