/* ================================================
   HDR-MID — New Header Middle Styles
   Base: 1rem = 10px (establecido por el proyecto)
   ================================================ */

:root {
    --hdr-primary: #1d3461;
    --hdr-primary-light: #f8f9fb;
    --hdr-accent: #f7a800;
    --hdr-bg: #ffffff;
    --hdr-text: #222222;
    --hdr-text-muted: #666666;
    --hdr-border: #e5e7eb;
    --hdr-search-bg: #f5f5f7;
    --hdr-hover-bg: #f0f2f5;
    --hdr-radius: 0.8rem; /* 8px */
    --hdr-radius-pill: 1.6rem; /* 16px — suficiente para forma píldora */
}

*,
*::before,
*::after {
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    box-sizing: border-box;
}

/* Base tipográfica del sitio */
body {
    font-family: "Poppins", sans-serif;
    font-size: 1.6rem; /* 16px */
    font-weight: 400;
    line-height: 1.5;
    color: var(--hdr-text);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.section-home {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media screen and (min-width: 768px) {
    .section-home {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* Wrapper */
.hdr-mid {
    background: var(--hdr-bg);
    border-bottom: 1px solid var(--hdr-border);
    padding: 0;
    min-height: unset;
}

/* Base mobile (320px+) */
.hdr-mid > .container-fluid {
    padding: 0.8rem 1.2rem; /* 8px 12px */
}

/* Flex row principal */
.hdr-mid__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem; /* 12px */
    width: 100%;
}

/* ---- LEFT: logo + menu ---- */
.hdr-mid__left {
    display: flex;
    align-items: center;
    gap: 1.2rem; /* 12px */
    flex: 0 0 auto;
}

.btn-menu-toggler {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--colorNeutral);
    border-radius: 0.5rem;
    margin-left: 0;
}

.hdr-mid__logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.hdr-mid__logo-link img {
    height: 4rem; /* 40px */
    width: auto;
    display: block;
}

/* ---- CENTER: buscador ---- */
.hdr-mid__center {
    order: 3;
    flex: 0 0 100%;
    min-width: 0;
    padding-bottom: 0.8rem; /* 8px */
}

.hdr-mid__form {
    margin-bottom: 0;
}

.hdr-mid__search-wrap {
    display: flex;
    align-items: center;
    background: var(--hdr-search-bg);
    border: 1.5px solid var(--hdr-border);
    border-radius: var(--hdr-radius);
    overflow: hidden;
}

.hdr-mid__search-wrap:focus-within {
    border-color: var(--hdr-primary);
}

.hdr-mid__search-input.form-control {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 1.2rem 1.6rem; /* 12px 16px */
    font-size: 1.4rem; /* 14px */
    font-family: "Poppins", sans-serif;
    color: var(--hdr-text);
    min-width: 0;
    margin-bottom: 0;
}

.hdr-mid__search-input.form-control::placeholder {
    color: var(--hdr-text-muted);
}

.hdr-mid__search-input.form-control:focus {
    outline: none;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

.hdr-mid__search-btn {
    background: var(--hdr-primary);
    border: none;
    padding: 1.2rem 1.8rem; /* 12px 18px */
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hdr-mid__search-btn:hover {
    background: #162a52;
}

.hdr-mid__search-btn svg {
    display: block;
}

/* ---- RIGHT: acciones ---- */
.hdr-mid__right {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 4px */
    flex: 0 0 auto;
    margin-left: auto;
}

.hdr-mid__action {
    position: relative;
}

.hdr-mid__action-link {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.8rem; /* 8px */
    padding: 0.8rem 1.2rem; /* 8px 12px */
    border-radius: var(--hdr-radius);
    color: var(--hdr-text) !important;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    border: none;
}

.hdr-mid__action-link:hover {
    background: var(--hdr-hover-bg);
    color: var(--hdr-primary) !important;
}

.hdr-mid__action-link:hover .hdr-mid__action-icon {
    color: var(--hdr-primary);
}

.hdr-mid__action-icon {
    color: var(--hdr-primary);
    flex-shrink: 0;
    display: block;
}

.hdr-mid__action-label {
    display: none;
    font-size: 1.4rem; /* 14px */
    font-weight: 500;
    font-family: "Poppins", sans-serif;
}

/* Carrito: badge */
.hdr-mid__cart-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.hdr-mid__cart-badge {
    position: absolute !important;
    top: -0.8rem !important; /* -8px */
    right: -0.8rem !important; /* -8px */
    left: auto !important;
    background: var(--hdr-accent) !important;
    color: #fff !important;
    font-size: 1.2rem !important; /* 12px */
    font-weight: 700 !important;
    min-width: 1.8rem; /* 18px */
    height: 1.8rem; /* 18px */
    border-radius: var(--hdr-radius-pill) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    padding: 0 0.4rem; /* 0 4px */
    line-height: 1;
    pointer-events: none;
}

/* Promo */
.hdr-mid__promo {
    position: relative;
    display: flex;
    align-items: center;
}

/* ---- RESPONSIVE: Mobile First ---- */

@media (min-width: 576px) {
    .hdr-mid > .container-fluid {
        padding: 1.2rem 1.6rem; /* 12px 16px */
    }

    .hdr-mid__logo-link img {
        height: 4.8rem; /* 48px */
    }
}

@media (min-width: 768px) {
    .hdr-mid__inner {
        flex-wrap: nowrap;
    }

    .hdr-mid__center {
        order: unset;
        flex: 1;
        padding-bottom: 0;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Ocultar container-menu-header del hdr-mid en tablet/desktop */
    .hdr-mid__left .container-menu-header {
        display: none;
    }
}

@media (min-width: 992px) {
    .hdr-mid > .container-fluid {
        padding: 1.2rem 2.4rem; /* 12px 24px */
    }

    .hdr-mid__inner {
        gap: 2.4rem; /* 24px */
    }

    .hdr-mid__action-label {
        display: block;
    }
}

/* ================================================
   HDR-NAV — Header Bottom / Barra de navegación
   ================================================ */

/* Oculto en mobile, la navegación la maneja el menú móvil existente */
.hdr-nav {
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--hdr-border);
}

.hdr-nav > .container-fluid {
    padding: 0 1.6rem; /* 0 16px */
}

.hdr-nav__inner {
    display: flex;
    align-items: stretch;
    min-height: 4.8rem; /* 48px */
}

/* ---- Categorías ---- */
.hdr-nav__categories {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
}

.hdr-nav__cat-btn {
    display: flex;
    align-items: center;
    gap: 1.2rem; /* 12px */
    background: var(--hdr-primary);
    border-radius: var(--pc-radius);
    color: #fff;
    border: none;
    padding: 0 1.6rem; /* 0 16px */
    font-size: 1.4rem; /* 14px */
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    white-space: nowrap;
    margin: 0.5rem 0;
}

.hdr-nav__cat-btn:hover {
    background: #162a52;
    color: #fff;
}

.hdr-nav__cat-btn svg {
    flex-shrink: 0;
}

/* ---- Panel de categorías: slide desde la izquierda ---- */
.hdr-mega-trigger {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(32rem, 88vw);
    background: #fff;
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform 0.25s ease-in-out;
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.14);
}

.hdr-mega-trigger.show {
    transform: translateX(0);
}

/* Header sticky del panel */
.side-nav__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid var(--hdr-border);
    background: var(--hdr-primary-light);
}

.side-nav__head h5 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: var(--hdr-text);
    line-height: 1.2;
}

.side-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: none;
    background: transparent;
    border-radius: var(--hdr-radius);
    cursor: pointer;
    opacity: 0.45;
    flex-shrink: 0;
    padding: 0;
}

.side-nav__close:hover {
    background: var(--hdr-hover-bg);
    opacity: 1;
}

/* Lista con scroll */
.hdr-mega-trigger .side-nav {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--hdr-border) transparent;
}

.hdr-mega-trigger .side-nav::-webkit-scrollbar {
    width: 4px;
}
.hdr-mega-trigger .side-nav::-webkit-scrollbar-thumb {
    background: var(--hdr-border);
    border-radius: 0.4rem;
}

/* ---- Menú horizontal ---- */
.hdr-nav__menu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-left: 0.4rem; /* 4px */
    overflow-x: auto;
    scrollbar-width: none;
}

.hdr-nav__menu::-webkit-scrollbar {
    display: none;
}

.hdr-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.hdr-nav__item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hdr-nav__link {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* 8px */
    padding: 1.4rem 1.2rem; /* 14px 12px */
    color: var(--hdr-text) !important;
    text-decoration: none !important;
    font-size: 1.4rem; /* 14px */
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    white-space: nowrap;
    line-height: 1;
}

.hdr-nav__link--accent {
    color: #e02020 !important;
}

.hdr-nav__link--accent .hdr-nav__icon-svg {
    color: #e02020;
}

.hdr-nav__link--accent:hover {
    color: #b91c1c !important;
}

.hdr-nav__link:hover {
    color: var(--hdr-primary) !important;
    background: var(--hdr-hover-bg);
}

.hdr-nav__icon {
    width: 1.8rem; /* 18px */
    height: 1.8rem; /* 18px */
    object-fit: contain;
    flex-shrink: 0;
}

.hdr-nav__icon-svg {
    flex-shrink: 0;
    color: inherit;
}

/* Visible en tablet+ */
@media (min-width: 992px) {
    .hdr-nav {
        display: block;
    }

    .hdr-mid__right {
        margin-left: unset;
    }
}

/* Ajustes desktop */
@media (min-width: 992px) {
    .hdr-nav > .container-fluid {
        padding: 0 2.4rem; /* 0 24px */
    }

    .hdr-nav__cat-btn {
        padding: 0 2.4rem; /* 0 24px */
    }

    .hdr-nav__link {
        padding: 1.4rem 1.6rem; /* 14px 16px */
    }
}

/* ================================================
   CART-DROPDOWN-ITEM — Ítem del carrito desplegable
   ================================================ */

.cart-dropdown-item {
    display: flex;
    align-items: center;
    gap: 1.2rem; /* 12px */
    padding: 1.2rem 1.6rem; /* 12px 16px */
    border-bottom: 1px solid var(--hdr-border);
}

.cart-dropdown-item:last-child {
    border-bottom: none;
}

/* Imagen */
.cart-dropdown-item__image {
    flex-shrink: 0;
    margin: 0;
    width: 6rem; /* 60px */
    height: 6rem; /* 60px */
    border-radius: var(--hdr-radius);
    overflow: hidden;
    background: var(--hdr-search-bg);
}

.cart-dropdown-item__image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.cart-dropdown-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Contenido */
.cart-dropdown-item__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* 4px */
}

/* Título */
.cart-dropdown-item__title {
    margin: 0;
    font-size: 1.4rem; /* 14px */
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    line-height: 1.3;
}

.cart-dropdown-item__title a {
    color: var(--hdr-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-dropdown-item__title a:hover {
    color: var(--hdr-primary);
}

/* Detalles: cantidad x precio */
.cart-dropdown-item__details {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 4px */
    font-size: 1.2rem; /* 12px */
    font-family: "Poppins", sans-serif;
}

.cart-dropdown-item__quantity {
    font-weight: 600;
    color: var(--hdr-primary);
}

.cart-dropdown-item__price {
    color: var(--hdr-text-muted);
}

/* Acciones */
.cart-dropdown-item__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Botón eliminar (renderizado por RemoveFromCartButton) */
.cart-dropdown-item__actions .btn-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem; /* 24px */
    height: 2.4rem; /* 24px */
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.cart-dropdown-item__actions .btn-remove:hover {
    background: #fee2e2;
}

.cart-dropdown-item__actions .btn-remove img {
    width: 1.2rem; /* 12px */
    height: 1.2rem; /* 12px */
    display: block;
    opacity: 0.45;
}

.cart-dropdown-item__actions .btn-remove:hover img {
    opacity: 1;
}

/* ================================================
   CART-ASIDE HEAD — Cabecera fija del carrito
   ================================================ */

/* ---- Dropdown: flex column con scroll solo en productos ---- */
.cart-dropdown .dropdown-menu.dropdown-cart {
    padding-top: 0; /* el head provee el espacio superior */
    padding-bottom: 0; /* el foot provee el espacio inferior */
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Lista de productos: el único sector que scrollea */
.cart-dropdown .dropdown-cart-products {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* permite que el flex child se encoja */
    margin-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--hdr-border) transparent;
}

.cart-dropdown .dropdown-cart-products::-webkit-scrollbar {
    width: 4px;
}

.cart-dropdown .dropdown-cart-products::-webkit-scrollbar-thumb {
    background: var(--hdr-border);
    border-radius: 0.4rem;
}

/* ---- Cabecera: siempre visible arriba (no necesita sticky en flex column) ---- */
.cart-aside {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: unset;
    max-width: 380px;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: transform 0.2s ease-in-out 0s;
    background-color: var(--colorblanco);
    z-index: 9999;
    overflow-y: auto;
    box-shadow: 0px 0px 8px 0px rgba(6, 6, 6, 0.2);
}

.cart-aside__head {
    flex-shrink: 0;
    background: var(--hdr-primary-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 3rem;
    border-bottom: 1px solid var(--hdr-border);
}

.cart-aside__head h5 {
    margin: 0;
    font-size: 1.6rem; /* 16px */
    font-weight: 600;
    color: var(--hdr-text);
    font-family: "Poppins", sans-serif;
    line-height: 1.2;
}

.cart-aside__head .cart-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem; /* 32px */
    height: 3.2rem; /* 32px */
    border-radius: var(--hdr-radius);
    cursor: pointer;
    opacity: 0.45;
    text-decoration: none;
    flex-shrink: 0;
}

.cart-aside__head .cart-close:hover {
    background: var(--hdr-hover-bg);
    opacity: 1;
}

.cart-aside__head .cart-close img {
    display: block;
    width: 1.6rem; /* 16px */
    height: 1.6rem; /* 16px */
}

.btn-removed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--hdr-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.btn-removed svg {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
}

.btn-removed:hover {
    background: #fde8e8;
    color: #c0392b;
}

/* ------ body: iitems de productos ------ */
.dropdown-cart-products {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---- Pie: siempre visible abajo (fijo por ser último hijo del flex column) ---- */
.cart-aside__foot {
    flex-shrink: 0;
    background: var(--hdr-primary-light);
    padding: 1.2rem 3rem 1.6rem;
    border-top: 1px solid var(--hdr-border);
}

/* Heredar estilos del total y acción dentro del foot */
.cart-aside__foot-total {
    padding: 1rem 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--hdr-text);
    margin-bottom: 1rem;
}

.cart-aside__foot .dropdown-cart-action {
    padding: 0;
}

/* ================================================
   HERO — Banner principal de portada
   Bloque BEM: hero
   Base: 1rem = 10px (establecido por el proyecto)
   ================================================ */

/* Slide: contexto de posicionamiento */
.hero-section .swiper-slide {
    position: relative;
    overflow: hidden;
}

/* Imagen: ocupa todo el ancho del slide */
.hero__image {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Overlay gradiente — solo cuando hay contenido textual visible */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    pointer-events: none;
    z-index: 1;
}

@media (min-width: 992px) {
    .hero__overlay {
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.68) 42%,
            transparent 72%
        );
    }
}

/* Contenedor del contenido — alineado a la izquierda */
.hero__content {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    width: 88%;
    text-align: left;
    z-index: 2;
}

/* Título principal */
.hero__title {
    color: var(--newColorPrincipal);
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.02rem;
    line-height: 1.15;
    margin-bottom: 1rem;
}

/* Texto descriptivo */
.hero__description {
    color: var(--colorText);
    font-size: 1.4rem;
    line-height: 1.65;
    margin-bottom: 0;
    max-width: 42rem;
}

/* Grupo de botones CTA */
.hero__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Botón CTA primario (amarillo) */
.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 2.4rem;
    background-color: var(--newColorAmarillo);
    color: var(--newColorPrincipal);
    border: 2px solid var(--newColorAmarillo);
    border-radius: var(--border-radius);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.hero__cta:hover,
.hero__cta:focus {
    background-color: #e8a200;
    border-color: #e8a200;
    color: var(--newColorPrincipal);
    text-decoration: none;
}

/* Botón CTA secundario (outline oscuro) */
.hero__cta--secondary {
    background-color: transparent;
    border-color: var(--newColorPrincipal);
    color: var(--newColorPrincipal);
}

.hero__cta--secondary:hover,
.hero__cta--secondary:focus {
    background-color: var(--newColorPrincipal);
    border-color: var(--newColorPrincipal);
    color: var(--colorblanco);
    text-decoration: none;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .hero__content {
        left: 5%;
        width: 50%;
    }

    .hero__title {
        font-size: 3.8rem;
    }

    .hero__description {
        font-size: 1.5rem;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .hero__content {
        left: 6%;
        width: 42%;
    }

    .hero__title {
        font-size: 4.8rem;
    }

    .hero__description {
        font-size: 1.6rem;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .hero__content {
        left: 8%;
    }

    .hero__title {
        font-size: 5.5rem;
    }
}

/* ================================================
   PRODUCT-CARD — Tarjeta de producto
   BEM Block: product-card
   Base: 1rem = 10px
   ================================================ */

:root {
    --pc-radius: 0.8rem; /* 8px */
    --pc-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    --pc-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.13);
    --pc-border: #e5e7eb;
    --pc-bg: #ffffff;
    --pc-img-bg: #f8f9fa;
}

/* ---- Block ---- */
.product-card {
    container-type: inline-size;
    container-name: product-card;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    overflow: hidden;
    box-shadow: var(--pc-shadow);
    transition: box-shadow 0.18s ease;
}

.product-card:hover {
    box-shadow: var(--pc-shadow-hover);
}

/* ---- Media: área de imagen ---- */
.product-card__media {
    position: relative;
    margin: 0;
    /* background: var(--pc-img-bg); */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
}

/* ---- Badges: etiquetas y tags ---- */
.product-card__badges {
    position: absolute;
    top: 0.8rem; /* 8px */
    left: 0.8rem; /* 8px */
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* 4px */
    pointer-events: none;
}

.product-card__badge {
    display: inline-flex;
    align-items: center;
}

.product-card__badge img {
    max-width: 7rem; /* 70px */
    height: auto;
    display: block;
}

.product-card__badge--label {
    background: var(--hdr-primary);
    color: #fff;
    font-size: 1rem; /* 10px */
    font-weight: 600;
    padding: 0.3rem 0.6rem; /* 3px 6px */
    border-radius: 0.4rem; /* 4px */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* ---- Link: enlace de la imagen ---- */
.product-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    min-width: 0;
}

/* ---- Image: imagen del producto ---- */
.product-card__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.product-image-hover {
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.42s ease, transform 0.7s ease;
}

.product-card:hover .product-image-hover {
    opacity: 1;
    transform: scale(1.04);
}

/* ---- Wishlist: botón de favoritos ---- */
.product-card__wishlist {
    position: absolute;
    top: 0.8rem; /* 8px */
    right: 0.8rem; /* 8px */
    z-index: 2;
}

/* ---- Body: área de contenido ---- */
.product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 1.2rem 1.4rem; /* 10px 12px 14px */
    gap: 0.6rem; /* 6px */
}

/* ---- Brand: nombre de marca ---- */
.product-card__brand {
    font-size: 1.1rem; /* 11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.product-card__brand a {
    color: var(--hdr-primary);
    text-decoration: none;
}

.product-card__brand a:hover {
    text-decoration: underline;
}

/* ---- Title: nombre del producto ---- */
.product-card__title {
    font-size: 1.3rem; /* 13px */
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__title a {
    color: rgb(36, 36, 51);
    letter-spacing: 1%;
    text-decoration: none;
}

.product-card__title a:hover {
    color: var(--hdr-primary);
}

/* ---- Pricing: bloque de precios ---- */
.product-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: var(--pc-radius);
    margin-top: 0.2rem; /* 2px */
}

.product-card__price-old {
    display: block;
    font-size: 1.2rem; /* 12px */
    text-decoration: line-through;
    opacity: 0.65;
    line-height: 1.2;
    color: rgb(141, 141, 166);
}

.product-card__price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem; /* 5px */
}

.product-card__price-current {
    color: #111;
    font-size: 1.6rem; /* 16px */
    font-weight: 700;
    line-height: 1.2;
}

.product-card__discount {
    background: #ff4444;
    color: #fff;
    font-size: 1.1rem; /* 11px */
    font-weight: 700;
    padding: 0.2rem 0.6rem; /* 2px 6px */
    border-radius: 0.3rem; /* 3px */
    white-space: nowrap;
    line-height: 1.1;
}

/* ---- Footer: acción de carrito ---- */
.product-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 5px */
    margin-top: 1rem;
}

.product-card__label {
    font-size: 1.1rem; /* 11px */
    color: var(--hdr-text-muted);
    margin: 0;
    line-height: 1.2;
}

/* ---- Benefits: tags tipo pill ---- */
.product-card__benefits {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.product-card__benefit {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.35rem 0.8rem;
    border-radius: 10rem;
    background: #d1fae5;
    color: #065f46;
}

/* ---- Responsive: Mobile First ---- */

@media (min-width: 768px) {
    .product-card__body {
        padding: 1.2rem 1.6rem 1.6rem; /* 12px 16px 16px */
    }

    .product-card__title {
        font-size: 1.4rem; /* 14px */
    }
}

@media (min-width: 1024px) {
    .product-card__body {
        padding: 1.4rem 1.6rem 1.8rem; /* 14px 16px 18px */
    }
}

@media (min-width: 1400px) {
    .product-card__price-current {
        font-size: 1.8rem; /* 18px */
    }
}

.products-wrapper {
    background-color: var(--hdr-primary-light);
    border: 1px solid var(--hdr-primary);
    border-radius: 1.6rem;
    padding: 2rem;
}

@media (min-width: 992px) {
    .products-wrapper {
        padding: 3rem;
    }
}

/* ================================================
   PRODUCT-SLIDER — Carrusel genérico de productos
   BEM Block: product-slider
   ================================================ */

.title-section-product {
    color: var(--hdr-primary);
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-align: center;
    margin-top: 0;
    margin-bottom: 3rem;
}

.product-slider {
    position: relative;
}

.product-slider__track {
    overflow: hidden;
}

.product-slider__slide {
    height: auto;
}

/* Navegación: overlay sobre el swiper-wrapper.
   position:absolute relativo a .product-slider (positioned ancestor externo al overflow:hidden del track),
   escapa el recorte y se superpone visualmente sobre los slides. */
.product-slider__navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    pointer-events: none;
    z-index: 10;
}

.product-slider__prev,
.product-slider__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    pointer-events: auto;
    border: 1px solid var(--hdr-border);
    border-radius: 50%;
    background: #fff;
    color: var(--hdr-text);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.product-slider__prev:hover,
.product-slider__next:hover {
    background: var(--hdr-primary);
    border-color: var(--hdr-primary);
    color: #fff;
}

.product-slider__prev.swiper-button-disabled,
.product-slider__next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================================
   CARRUSEL-PRODUCTOS — Carruseles del home (1 a 5 y combos)
   BEM Block: carrusel-productos
   El panel y el login comparten el mismo patron de fondo y la misma
   intensidad: --patron-bg-opacity (subir/bajar ese numero es todo el ajuste).
   En el carrusel se aplica como opacity del patron; en el login, como velo
   blanco por encima (ver .overlay-login mas abajo).
   ================================================ */

:root {
    --carrusel-bg-image: url("../images/login-bg-1.png");
    --patron-bg-opacity: 0.2;
}

.carrusel-productos {
    padding: 2.4rem 0;
}

.carrusel-productos__panel {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-radius: 1.6rem;
    padding: 2rem;
}

.carrusel-productos__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Igual que el login: una sola imagen que cubre todo el panel, sin mosaico */
    background-image: var(--carrusel-bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: var(--patron-bg-opacity);
    pointer-events: none;
    z-index: 0;
}

/* Login (front/login.blade.php y front/carrito_login.blade.php): el patron va
   como background-image del contenedor y .overlay-login lo tapa con un velo
   blanco. Para que se vea igual que el carrusel, el velo es el complemento de
   --patron-bg-opacity (0.2 de patron visible => velo blanco al 0.8). */
.overlay-login {
    background-color: rgba(255, 255, 255, calc(1 - var(--patron-bg-opacity)));
}

/* El contenido va siempre por encima del patrón */
.carrusel-productos__panel > * {
    position: relative;
    z-index: 1;
}

/* Variante sin patrón: el panel liso original, fondo claro y borde */
.carrusel-productos__panel--plano {
    background-color: var(--hdr-primary-light);
    border: 1px solid var(--hdr-primary);
}

.carrusel-productos__panel--plano::before {
    display: none;
}

/* Sin patrón detrás, el título no necesita el chip blanco */
.carrusel-productos__panel--plano .carrusel-productos__title {
    background-color: transparent;
    padding: 0;
}

.carrusel-productos__header {
    text-align: center;
}

/* Chip blanco detrás del título: el patrón es fuerte y el texto necesita fondo */
.carrusel-productos__title {
    display: inline-block;
    max-width: 100%;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: var(--hdr-radius-pill);
    padding: 0.8rem 2.4rem;
    margin-bottom: 2.4rem;
    font-size: 2.4rem;
}

.carrusel-productos__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    align-items: start;
}

.carrusel-productos__portada {
    margin: 0;
    overflow: hidden;
    border-radius: var(--pc-radius);
}

.carrusel-productos__portada img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 24rem;
    object-fit: cover;
}

/* min-width:0 evita que el swiper desborde la columna del grid */
.carrusel-productos__slider {
    min-width: 0;
}

@media (min-width: 768px) {
    .carrusel-productos__panel {
        padding: 2.4rem;
    }

    .carrusel-productos__title {
        font-size: 3rem;
    }
}

@media (min-width: 992px) {
    .carrusel-productos {
        padding: 3.2rem 0;
    }

    .carrusel-productos__panel {
        padding: 3rem;
    }

    .carrusel-productos__layout--con-portada {
        grid-template-columns: minmax(22rem, 1fr) 3fr;
        gap: 2.4rem;
    }

    .carrusel-productos__layout--con-portada .carrusel-productos__portada {
        height: 100%;
    }

    .carrusel-productos__layout--con-portada .carrusel-productos__portada img {
        max-height: none;
    }
}

/* ================================================
   SECONDARY-BANNERS — Banners secundarios
   BEM Block: secondary-banners
   Base: 1rem = 10px
   ================================================ */

:root {
    --sb-radius: 1.2rem; /* 12px */
    --sb-gap: 1.6rem; /* 16px */
    --sb-overlay: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.28) 55%,
        transparent 100%
    );
}

/* Section */
.secondary-banners {
    padding: 2.4rem 0; /* 24px */
}

.secondary-banners > .container-fluid {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

/* Grid: 1 columna mobile */
.secondary-banners__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sb-gap);
}

/* Item */
.secondary-banners__item {
    position: relative;
    border-radius: var(--sb-radius);
    overflow: hidden;
    background: #f0f2f5;
}

/* Link: cubre todo el item */
.secondary-banners__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.secondary-banners__link:hover .secondary-banners__image {
    transform: scale(1.04);
}

.secondary-banners__link:hover .secondary-banners__button {
    background-color: var(--newColorAmarillo, #f7a800);
    color: var(--newColorPrincipal, #1d3461);
}

/* Media */
.secondary-banners__media {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    overflow: hidden;
}

/* Image */
.secondary-banners__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.38s ease;
}

/* Overlay degradado */
.secondary-banners__overlay {
    position: absolute;
    inset: 0;
    background: var(--sb-overlay);
    pointer-events: none;
    z-index: 1;
}

/* Content */
.secondary-banners__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 2.4rem; /* 20px 24px */
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* 8px */
}

/* Title */
.secondary-banners__title {
    margin: 0;
    font-size: 2rem; /* 20px */
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

/* Description */
.secondary-banners__description {
    margin: 0;
    font-size: 1.3rem; /* 13px */
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}

/* Button */
.secondary-banners__button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem; /* 6px */
    align-self: flex-start;
    margin-top: 0.4rem; /* 4px */
    padding: 0.8rem 1.6rem; /* 8px 16px */
    background-color: #fff;
    color: var(--newColorPrincipal, #1d3461);
    border-radius: 0.6rem; /* 6px */
    font-size: 1.3rem; /* 13px */
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.secondary-banners__button img {
    width: 1.4rem; /* 14px */
    height: 1.4rem;
    display: block;
    flex-shrink: 0;
}

/* ---- Responsive: Mobile First ---- */

@media (min-width: 768px) {
    .secondary-banners {
        padding: 3.2rem 0; /* 32px */
    }

    .secondary-banners__grid {
        gap: 2rem; /* 20px */
    }

    .secondary-banners__title {
        font-size: 2.4rem; /* 24px */
    }

    .secondary-banners__description {
        font-size: 1.4rem; /* 14px */
    }
}

/* Desktop (992px+): 2 columnas */
@media (min-width: 992px) {
    .secondary-banners__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.4rem; /* 24px */
    }

    .secondary-banners__content {
        padding: 2.4rem 3.2rem; /* 24px 32px */
    }

    .secondary-banners__title {
        font-size: 2.8rem; /* 28px */
    }
}

@media (min-width: 1200px) {
    .secondary-banners > .container-fluid {
        padding-left: 2.4rem;
        padding-right: 2.4rem;
    }

    .secondary-banners__grid {
        gap: 3.2rem; /* 32px */
    }
}

/* ================================================
   PRODUCT-HOTSPOTS-SECTION — Imágenes con hotspots interactivos
   BEM: product-hotspots-section / product-hotspots-card / product-hotspot
   Base: 1rem = 10px
   ================================================ */

:root {
    --hs-gap: 2rem;
    --hs-radius: 1.2rem;
    --hs-btn-size: 3.6rem;
    --hs-card-w: 22rem;
    --hs-primary: #1d3461;
}

/* Section */
.product-hotspots-section {
    padding: 2.4rem 0;
}

.product-hotspots-section > .container-fluid {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

/* Header */
.product-hotspots-section__header {
    margin-bottom: 2rem;
    text-align: center;
}

.product-hotspots-section__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--hs-primary);
    margin: 0 0 0.8rem;
    line-height: 1.25;
}

.product-hotspots-section__subtitle {
    font-size: 1.4rem;
    color: var(--hdr-text-muted, #666666);
    margin: 0;
    line-height: 1.5;
}

/* Grid — Mobile First: 1 columna */
.product-hotspots-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hs-gap);
}

/* ---- Card ---- */
.product-hotspots-card {
    position: relative;
}

/* Scene: contexto de posicionamiento y ratio de aspecto */
.product-hotspots-card__scene {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
}

/* Figure: recorta la imagen al border-radius */
.product-hotspots-card__figure {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: var(--hs-radius);
    overflow: hidden;
}

.product-hotspots-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hotspots layer: superpuesta al scene sin recorte */
.product-hotspots-card__hotspots-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ---- Hotspot ---- */
.product-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* Trigger */
.product-hotspot__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hs-btn-size);
    height: var(--hs-btn-size);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    transition: background 0.2s ease, color 0.2s ease;
}

.product-hotspot__trigger span {
    display: block;
    transition: transform 0.2s ease;
    line-height: 1;
}

.product-hotspot:hover .product-hotspot__trigger,
.product-hotspot.is-open .product-hotspot__trigger {
    background: rgba(255, 255, 255, 0.92);
    color: var(--hs-primary);
}

.product-hotspot.is-open .product-hotspot__trigger span {
    transform: rotate(45deg);
}

/* ---- Tarjeta flotante (aparece encima del trigger) ---- */
.product-hotspot__content {
    position: absolute;
    bottom: calc(100% + 1.2rem);
    left: 50%;
    transform: translateX(-50%);
    width: var(--hs-card-w);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    z-index: 20;
    display: flex;
    flex-direction: row;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.product-hotspot.is-open .product-hotspot__content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Modificadores de alineación horizontal */
.product-hotspot--align-left .product-hotspot__content {
    left: 0;
    transform: none;
}

.product-hotspot--align-right .product-hotspot__content {
    left: auto;
    right: 0;
    transform: none;
}

/* Thumbnail */
.product-hotspot__thumb {
    margin: 0;
    flex-shrink: 0;
    width: 8rem;
    align-self: stretch;
    background: #f5f5f7;
}

.product-hotspot__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info */
.product-hotspot__info {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.product-hotspot__name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hdr-text, #222222);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-hotspot__category {
    margin: 0;
    font-size: 1.1rem;
    color: var(--hdr-text-muted, #666666);
    line-height: 1.2;
}

.product-hotspot__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 0.6rem 1rem;
    background: var(--hs-primary);
    color: #fff;
    border-radius: 0.6rem;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    align-self: flex-start;
}

.product-hotspot__btn:hover {
    background: #162a52;
    color: #fff;
    text-decoration: none;
}

/* ---- Responsive — Mobile First ---- */

@media (min-width: 576px) {
    .product-hotspots-section__title {
        font-size: 2.4rem;
    }
}

@media (min-width: 768px) {
    .product-hotspots-section {
        padding: 3.2rem 0;
    }

    .product-hotspots-section__header {
        margin-bottom: 2.8rem;
    }

    .product-hotspots-section__grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-hotspots-section__title {
        font-size: 2.8rem;
    }
}

@media (min-width: 992px) {
    .product-hotspots-section__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .product-hotspots-section > .container-fluid {
        padding-left: 2.4rem;
        padding-right: 2.4rem;
    }

    :root {
        --hs-gap: 2.4rem;
    }
}

/* ================================================
   BANCO-PROMOS — Sección de promociones de bancos
   BEM: banco-promos / banco-imgs-slider
   Base: 1rem = 10px
   ================================================ */

.banco-promos {
    background: #f5f7fa;
}

.banco-promos > .container-fluid {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

/* Header */
.banco-promos__header {
    text-align: center;
    margin-bottom: 2.4rem;
}

.banco-promos__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--hdr-primary);
    margin: 0 0 0.8rem;
    line-height: 1.25;
}

.banco-promos__subtitle {
    font-size: 1.4rem;
    color: var(--hdr-text-muted, #666666);
    margin: 0;
    line-height: 1.5;
}

/* ---- Carrusel 1: banners dinámicos ---- */
.banco-promos__slider {
    border-radius: 1.2rem;
    overflow: hidden;
}

.banco-promos__track {
    overflow: hidden;
}

.banco-promos__slide {
    position: relative;
    overflow: hidden;
}

.banco-promos__slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.banco-promos__slide-media {
    margin: 0;
    display: block;
}

.banco-promos__slide-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.banco-promos__slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 2.4rem;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.68) 0%,
        transparent 100%
    );
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.banco-promos__slide-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.banco-promos__slide-desc {
    margin: 0;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}

.banco-promos__slide-btn {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.8rem 1.6rem;
    background: var(--hdr-accent, #f7a800);
    color: var(--hdr-primary, #1d3461);
    border-radius: 0.6rem;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0.4rem;
}

/* Botones nav carrusel 1 */
.banco-promos__prev,
.banco-promos__next {
    display: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    pointer-events: auto;
    border: 1px solid var(--hdr-border);
    border-radius: 50%;
    background: #fff;
    color: var(--hdr-text);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.banco-promos__prev:hover,
.banco-promos__next:hover {
    background: var(--hdr-primary);
    border-color: var(--hdr-primary);
    color: #fff;
}

.banco-promos__prev.swiper-button-disabled,
.banco-promos__next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

@media (min-width: 992px) {
    .banco-promos__prev,
    .banco-promos__next {
        display: flex;
    }
}

/* ---- Carrusel 2: imágenes estáticas de bancos ---- */
.banco-imgs-slider {
    position: relative;
    margin-top: 3.2rem;
}

.banco-imgs-slider__track {
    overflow: hidden;
}

.banco-imgs-slider__slide {
    height: auto;
}

/* La proporcion se fija por CSS para que el slide reserve su alto antes de que baje
   la imagen (si no, el home pega un salto al cargar) y para que un banner subido con
   otra medida se recorte en vez de descuadrar el carrusel. Abajo de 769px manda el
   <source> mobile del <picture>, que tiene otra proporcion. */
.banco-imgs-slider__img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1024 / 401;
    object-fit: cover;
    border-radius: 1rem;
}

@media (min-width: 769px) {
    .banco-imgs-slider__img {
        aspect-ratio: 1920 / 500;
    }
}

/* Botones nav carrusel 2 */
.banco-imgs-slider__prev,
.banco-imgs-slider__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--hdr-border);
    border-radius: 50%;
    background: #fff;
    color: var(--hdr-text);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.banco-imgs-slider__prev:hover,
.banco-imgs-slider__next:hover {
    background: var(--hdr-primary);
    border-color: var(--hdr-primary);
    color: #fff;
}

.banco-imgs-slider__prev.swiper-button-disabled,
.banco-imgs-slider__next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Responsive: Mobile First ---- */

@media (min-width: 576px) {
    .banco-promos__title {
        font-size: 2.4rem;
    }
}

@media (min-width: 768px) {
    .banco-promos > .container-fluid {
        padding-left: 2.4rem;
        padding-right: 2.4rem;
    }

    .banco-promos__title {
        font-size: 2.8rem;
    }

    .banco-promos__slide-title {
        font-size: 2.4rem;
    }

    .banco-promos__slide-content {
        padding: 3.2rem 4rem;
        gap: 0.8rem;
    }
}

@media (min-width: 1200px) {
    .banco-promos > .container-fluid {
        padding-left: 2.4rem;
        padding-right: 2.4rem;
    }

    .banco-promos__slide-title {
        font-size: 3rem;
    }
}

/* =========================
   BLOG SLIDER
========================= */

.blog-slider {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.blog-slider__track {
    overflow: hidden;
}

.blog-slider__navigation {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    pointer-events: none;
}

.blog-slider__prev,
.blog-slider__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    background-color: #fff;
    cursor: pointer;
    color: #333333;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    pointer-events: all;
}

.blog-slider__prev:hover,
.blog-slider__next:hover {
    background-color: #006699;
    border-color: #006699;
    color: #fff;
}

.blog-slider__prev.swiper-button-disabled,
.blog-slider__next.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* =========================
   BENEFITS SECTION
========================= */

.benefits-section {
    padding: 1.6rem 0;
    background-color: #fff;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid #ebebeb;
}

.benefit-item:last-child {
    border-bottom: none;
}

.benefit-item__icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-item__icon {
    width: 2.8rem;
    height: auto;
    filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(511%)
        hue-rotate(163deg) brightness(96%) contrast(101%);
}

.benefit-item__content {
    flex: 1;
    min-width: 0;
}

.benefit-item__title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.benefit-item__desc {
    font-size: 1.1rem;
    color: #999999;
    margin-bottom: 0;
    line-height: 1.4;
}

@media screen and (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefit-item {
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #ebebeb;
    }

    .benefit-item:nth-child(2n) {
        border-right: none;
    }

    .benefit-item:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .benefit-item:last-child {
        border-bottom: none;
    }
}

@media screen and (min-width: 992px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .benefit-item:nth-child(2n) {
        border-right: 1px solid #ebebeb;
    }

    .benefit-item:nth-child(3n) {
        border-right: none;
    }

    .benefit-item:nth-last-child(-n + 3) {
        border-bottom: none;
    }
}

@media screen and (min-width: 1100px) {
    .benefits-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .benefit-item {
        border-bottom: none;
        border-right: 1px solid #ebebeb;
    }

    .benefit-item:nth-child(3n) {
        border-right: 1px solid #ebebeb;
    }

    .benefit-item:last-child {
        border-right: none;
    }
}

/* ================================================
   FOOTER-MAIN — Footer Principal
   BEM Block: footer-main
   Base: 1rem = 10px
   ================================================ */
.footer-main {
    background: #f8f9fb;
}

.footer-main__container {
    width: 100%;
    max-width: 140rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

/* ---- TOP BAR ---- */

.footer-main__topbar {
    padding: 3.2rem 0;
    border-top: 0.4rem solid var(--hdr-primary, #1d3461);
    border-bottom: 1px solid #e5e7eb;
}

.footer-main__topbar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

/* Brand */
.footer-main__brand {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.footer-main__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-main__logo {
    height: 3.2rem;
    width: auto;
    display: block;
}

/* Social */
.footer-main__social {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.footer-main__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #f5f5f7;
    text-decoration: none;
}

.footer-main__social-link:hover {
    background: var(--hdr-primary, #1d3461);
    border-color: var(--hdr-primary, #1d3461);
}

.footer-main__social-link:hover .footer-main__social-icon {
    filter: brightness(0) invert(1);
}

.footer-main__social-icon {
    width: 2rem;
    height: 2rem;
    display: block;
}

/* Contact */
.footer-main__contact {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-main__contact-label {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hdr-primary, #1d3461);
    margin: 0;
    line-height: 1.2;
}

.footer-main__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-main__contact-item {
    display: flex;
}

.footer-main__contact-link {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--hdr-text, #222222);
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1.45;
}

.footer-main__contact-link:hover {
    color: var(--hdr-primary, #1d3461);
}

.footer-main__contact-link--corporativa {
    font-size: 1.6rem;
    font-weight: 700;
}

.footer-main__contact-link--corporativa .footer-main__contact-icon {
    width: 2.2rem;
    height: 2.2rem;
}

.footer-main__contact-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
    display: block;
}

/* Hours */
.footer-main__hours {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.footer-main__hours-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hdr-primary, #1d3461);
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.footer-main__hours-row {
    margin: 0;
    font-size: 1.3rem;
    color: var(--hdr-text, #222222);
    line-height: 1.4;
}

.footer-main__hours-row--time {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--hdr-primary, #1d3461);
}

/* ---- BODY ---- */

.footer-main__body {
    background: #f8f9fb;
    padding: 3.2rem 0;
}

.footer-main__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

/* Newsletter */
.footer-main__newsletter {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.footer-main__newsletter-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--hdr-primary, #1d3461);
    margin: 0;
    line-height: 1.45;
}

.footer-main__newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-main__newsletter-input {
    width: 100%;
    padding: 1.1rem 1.4rem;
    border: 1.5px solid #d1d5db;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    font-family: "Poppins", sans-serif;
    color: var(--hdr-text, #222222);
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
}

.footer-main__newsletter-input::placeholder {
    color: var(--hdr-text-muted, #666666);
}

.footer-main__newsletter-input:focus {
    border-color: var(--hdr-primary, #1d3461);
}

.footer-main__newsletter-btn {
    width: 100%;
    padding: 1.1rem 2rem;
    background: var(--hdr-primary, #1d3461);
    color: #ffffff;
    border: none;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
}

.footer-main__newsletter-btn:hover {
    background: #162a52;
}

/* Navigation */
.footer-main__navigation {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.footer-main__navigation-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--hdr-primary, #1d3461);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.2;
}

.footer-main__navigation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-main__navigation-link {
    display: block;
    color: var(--hdr-text, #222222);
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1.4;
}

.footer-main__navigation-link:hover {
    color: var(--hdr-primary, #1d3461);
    text-decoration: underline;
}

/* ---- BOTTOM ---- */

.footer-main__bottom {
    background: var(--hdr-primary, #1d3461);
    padding: 1.6rem 0;
}

.footer-main__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.footer-main__copyright {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.footer-main__credits {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
    flex-shrink: 0;
}

.footer-main__credits a {
    color: var(--hdr-accent, #f7a800);
    text-decoration: none;
}

.footer-main__credits a:hover {
    text-decoration: underline;
}

/* ---- RESPONSIVE ---- */

@media (min-width: 768px) {
    .footer-main__container {
        padding-left: 2.4rem;
        padding-right: 2.4rem;
    }

    .footer-main__topbar-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3.2rem 4rem;
    }

    .footer-main__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

    .footer-main__newsletter-btn {
        width: auto;
        align-self: flex-start;
        min-width: 18rem;
    }

    .footer-main__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 1.6rem;
    }
}

@media (min-width: 1024px) {
    .footer-main__topbar {
        padding: 4rem 0;
    }

    .footer-main__topbar-grid {
        grid-template-columns: 15rem 1fr 1.2fr 1fr 15rem;
        gap: 3.2rem;
        align-items: start;
    }

    .footer-main__body {
        padding: 4rem 0;
    }

    .footer-main__grid {
        grid-template-columns: 30rem 1fr;
        gap: 8rem;
        align-items: start;
    }

    .footer-main__navigation-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2.4rem;
        row-gap: 0.6rem;
    }
}

@media (min-width: 1200px) {
    .footer-main__container {
        padding-left: 3.2rem;
        padding-right: 3.2rem;
    }

    .footer-main__topbar-grid {
        grid-template-columns: 16rem 1fr 1.2fr 1fr 16rem;
    }
}

/* ================================================
   FOOTER-NAVIGATION — Grupos de enlaces agrupados
   ================================================ */

.footer-main__navigation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.footer-main__nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-main__nav-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hdr-primary, #1d3461);
    margin: 0;
    padding-bottom: 0.8rem;
    line-height: 1.2;
}

.footer-main__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-main__nav-link {
    display: block;
    color: var(--hdr-text, #222222);
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1.4;
}

.footer-main__nav-link:hover {
    color: var(--hdr-primary, #1d3461);
    text-decoration: underline;
}

/* Tablet (768px+): 2x2 */
@media (min-width: 768px) {
    .footer-main__navigation {
        grid-template-columns: 1fr 1fr;
        gap: 2.4rem;
    }
}

/* Desktop (1024px+): 4 columnas + ajuste del grid padre */
@media (min-width: 1024px) {
    .footer-main__navigation {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.4rem;
    }

    .footer-main__grid {
        grid-template-columns: 26rem 1fr;
        gap: 5rem;
    }
}

/* Layout */
.split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.splitSwiper {
    width: 100%;
}

.split-layout__image {
    overflow: hidden;
    border-radius: var(--pc-radius);
}

@media screen and (min-width: 768px) {
    /* ==== INICIO SPLIT SECTION ==== */
    .split-layout {
        gap: 2rem;
    }
    /* ==== FIN SPLIT SECTION ==== */
}

@media screen and (min-width: 992px) {
    /* ==== INICIO SPLIT SECTION ==== */
    .split-layout {
        grid-template-columns: 1fr 3fr;
        align-items: start;
    }

    .split-layout__image {
        height: 100%;
    }

    .split-layout__image img {
        height: 100%;
        aspect-ratio: unset;
    }
    /* ==== FIN SPLIT SECTION ==== */
}

/* ================================================
   HERO SWIPER — Navegación y paginación personalizadas
   ================================================ */

/* display:contents hace el wrapper transparente al layout para que
   Swiper siga posicionando los botones con su CSS nativo */
.hero-swiper__navigation {
    display: contents;
}

/* Botones: prev y next */
.hero-swiper__prev,
.hero-swiper__next {
    display: none;
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    color: var(--hdr-primary);
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.18);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.hero-swiper__prev::after,
.hero-swiper__next::after {
    font-size: 1.4rem;
    font-weight: 700;
    color: inherit;
}

.hero-swiper__prev:hover,
.hero-swiper__next:hover {
    background: var(--hdr-primary);
    color: #fff;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.28);
}

/* Paginación: contenedor */
.hero-swiper__pagination.swiper-pagination {
    bottom: 1.6rem;
}

/* Bullets — Swiper los genera dinámicamente vía JS; se apunta con el padre:
   .hero-swiper__bullet        → .hero-swiper__pagination .swiper-pagination-bullet
   .hero-swiper__bullet--active → .hero-swiper__pagination .swiper-pagination-bullet-active */
.hero-swiper__pagination .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    border-radius: 50%;
    transition: background 0.2s, transform 0.2s;
}

.hero-swiper__pagination .swiper-pagination-bullet-active {
    background: var(--hdr-accent);
    transform: scale(1.3);
}

@media (min-width: 768px) {
    .hero-swiper__prev,
    .hero-swiper__next {
        width: 5rem;
        height: 5rem;
    }

    .hero-swiper__prev::after,
    .hero-swiper__next::after {
        font-size: 1.8rem;
    }

    .hero-swiper__pagination .swiper-pagination-bullet {
        width: 1.2rem;
        height: 1.2rem;
    }
}

@media (min-width: 992px) {
    .hero-swiper__prev,
    .hero-swiper__next {
        display: flex;
    }
}

/* ================================================
   CATALOG-PAGE — UX/UI Refactor
   Mobile First | Base: 1rem = 10px
   ================================================ */

:root {
    --cat-sidebar-w: 28rem;
    --cat-gap: 2.4rem;
    --cat-radius: 0.8rem;
    --cat-primary: var(--hdr-primary);
    --cat-accent: var(--hdr-accent);
    --cat-text: var(--hdr-text);
    --cat-text-muted: var(--hdr-text-muted);
    --cat-border: var(--hdr-border);
    --cat-bg: #ffffff;
    --cat-hover-bg: var(--hdr-hover-bg);
    --cat-search-bg: var(--hdr-search-bg);
    --cat-pagination-size: 3.6rem;
    --cat-sidebar-z: 900;
}

/* ================================================
   BREADCRUMB
   ================================================ */

.catalog-page__breadcrumb {
    padding: 1rem 0;
    background: transparent;
    margin-bottom: 0;
    border-bottom: 1px solid var(--cat-border);
}

.catalog-page__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0 1.6rem;
    font-size: 1.3rem;
}

.catalog-page__breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--cat-text-muted);
    line-height: 2;
}

.catalog-page__breadcrumb-item + .catalog-page__breadcrumb-item::before {
    content: "/";
    padding: 0 0.6rem;
    color: var(--cat-border);
}

.catalog-page__breadcrumb-item a {
    color: var(--cat-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.catalog-page__breadcrumb-item a:hover {
    color: var(--cat-primary);
}

.catalog-page__breadcrumb-item--active,
.catalog-page__breadcrumb-item--active a {
    color: var(--cat-text);
    font-weight: 500;
    pointer-events: none;
}

/* ================================================
   CATALOG LAYOUT
   ================================================ */

.catalog-layout__header {
    margin-bottom: 1.6rem;
}

.catalog-layout__body {
    display: flex;
    flex-direction: column;
    gap: var(--cat-gap);
    position: relative;
}

@media (min-width: 992px) {
    .catalog-layout__body {
        display: grid;
        grid-template-columns: var(--cat-sidebar-w) 1fr;
        grid-template-areas: "sidebar content";
        align-items: start;
        gap: 3.2rem;
    }

    .catalog-layout__content {
        grid-area: content;
    }

    .catalog-layout__sidebar {
        grid-area: sidebar;
    }
}

/* ================================================
   CATALOG TITLE
   ================================================ */

.catalog-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cat-primary);
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 992px) {
    .catalog-title {
        font-size: 2.4rem;
    }
}

/* ================================================
   CATALOG TOOLBAR (mobile filter toggle)
   ================================================ */

.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--cat-border);
}

@media (min-width: 992px) {
    .catalog-toolbar {
        display: none;
    }
}

.catalog-toolbar__item {
    display: flex;
}

.catalog-toolbar__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.8rem;
    background: var(--cat-primary);
    color: #fff !important;
    border-radius: var(--cat-radius);
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s;
}

.catalog-toolbar__filter-btn:hover {
    background: #162a52;
    color: #fff !important;
}

.catalog-toolbar__filter-btn i {
    font-size: 1.4rem;
}

/* ================================================
   CATALOG PRODUCTS
   ================================================ */

.catalog-products {
    margin-bottom: 1.6rem;
}

.catalog-products__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

@media (min-width: 768px) {
    .catalog-products__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.6rem;
    }
}

@media (min-width: 1200px) {
    .catalog-products__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.catalog-products__item {
    display: flex;
    flex-direction: column;
}

/* ================================================
   CATALOG COMBOS
   ================================================ */

.catalog-combos {
    grid-column: 1 / -1;
    margin-bottom: 2.4rem;
}

.catalog-combos__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cat-primary);
    margin-bottom: 1.6rem;
}

.catalog-combos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

@media (min-width: 768px) {
    .catalog-combos__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.6rem;
    }
}

@media (min-width: 1200px) {
    .catalog-combos__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.catalog-combos__item {
    display: flex;
    flex-direction: column;
}

/* ================================================
   CATALOG PAGINATION
   ================================================ */

.catalog-pagination {
    display: flex;
    justify-content: center;
    padding: 1.6rem 0;
}

.catalog-pagination__list {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.catalog-pagination__item {
    display: flex;
}

.catalog-pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cat-pagination-size);
    height: var(--cat-pagination-size);
    padding: 0 1.2rem;
    border-radius: var(--cat-radius);
    border: 1px solid var(--cat-border);
    background: var(--cat-bg);
    color: var(--cat-text) !important;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    cursor: pointer;
}

.catalog-pagination__link:hover {
    background: var(--cat-hover-bg);
    border-color: var(--cat-primary);
    color: var(--cat-primary) !important;
}

.catalog-pagination__item--active .catalog-pagination__link {
    background: var(--cat-primary);
    border-color: var(--cat-primary);
    color: #fff !important;
    pointer-events: none;
}

/* ================================================
   CATALOG SIDEBAR OVERLAY
   ================================================ */

.catalog-sidebar__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: calc(var(--cat-sidebar-z) - 1);
}

body.sidebar-filter-active .catalog-sidebar__overlay {
    display: block;
}

/* ================================================
   CATALOG SIDEBAR
   ================================================ */

.catalog-sidebar {
    background: var(--cat-bg);
    border-radius: var(--cat-radius);
    border: 1px solid var(--cat-border);
    overflow: hidden;
}

.catalog-sidebar__close {
    display: flex;
    justify-content: flex-end;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--cat-border);
}

@media (min-width: 992px) {
    .catalog-sidebar__close {
        display: none;
    }
}

.catalog-sidebar__close-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: var(--cat-text);
    padding: 0.4rem 0.8rem;
    border-radius: var(--cat-radius);
    transition: background 0.15s;
}

.catalog-sidebar__close-btn:hover {
    background: var(--cat-hover-bg);
}

.catalog-sidebar__body {
    padding: 1.6rem;
}

@media (max-width: 991px) {
    .catalog-sidebar {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .catalog-sidebar__body {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.catalog-sidebar__heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cat-primary);
    margin: 0 0 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--cat-accent);
    display: inline-block;
}

/* ================================================
   CATALOG SORT
   ================================================ */

.catalog-sort {
    margin-bottom: 2rem;
}

.catalog-sort__label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cat-text-muted);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.catalog-sort__select-wrap {
    position: relative;
}

.catalog-sort__select-wrap::after {
    content: "";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.5rem solid var(--cat-text-muted);
    pointer-events: none;
}

.catalog-sort__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--cat-search-bg);
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius);
    padding: 0.9rem 3.2rem 0.9rem 1.2rem;
    font-size: 1.4rem;
    font-family: "Poppins", sans-serif;
    color: var(--cat-text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.catalog-sort__select:focus {
    outline: none;
    border-color: var(--cat-primary);
}

/* ================================================
   CATALOG FILTERS (widgets accordion)
   ================================================ */

.catalog-filter {
    border-bottom: 1px solid var(--cat-border);
}

.catalog-filter:last-child {
    border-bottom: none;
}

.catalog-filter__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cat-text);
    margin: 0;
}

.catalog-filter__title > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 0;
    color: var(--cat-text) !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

.catalog-filter__title > a:hover {
    color: var(--cat-primary) !important;
}

.catalog-filter__title > a::after {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 0.8rem;
}

.catalog-filter__title > a.collapsed::after {
    transform: rotate(-45deg);
}

.catalog-filter__body {
    padding-bottom: 1.2rem;
}

.catalog-filter__body--sub {
    padding-left: 1.6rem;
    padding-bottom: 0.4rem;
}

.catalog-filter__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.catalog-filter__item {
    display: flex;
    flex-direction: column;
}

.catalog-filter__clear {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius);
    padding: 0.4rem 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: var(--cat-text-muted);
    cursor: pointer;
    margin-bottom: 0.8rem;
    transition: border-color 0.15s, color 0.15s;
}

.catalog-filter__clear:hover {
    border-color: var(--cat-primary);
    color: var(--cat-primary);
}

.catalog-filter__option.custom-control {
    padding-left: 2.4rem !important;
    min-height: 2.2rem;
    display: flex;
    align-items: center;
}

.catalog-filter__option .custom-control-label {
    font-size: 1.4rem;
    color: var(--cat-text);
    cursor: pointer;
    line-height: 1.4;
    padding-top: 0.1rem;
}

.catalog-filter__option .custom-control-label:hover {
    color: var(--cat-primary);
}

.catalog-filter__option .custom-control-input:checked ~ .custom-control-label {
    color: var(--cat-primary);
    font-weight: 500;
}

.catalog-filter__option
    .custom-control-input:checked
    ~ .custom-control-label::before {
    background-color: var(--cat-primary) !important;
    border-color: var(--cat-primary) !important;
}

.catalog-filter__subcategory-title {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
    display: inline;
}

.catalog-filter__subcategory-title a {
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.catalog-filter__subcategory-title a::after {
    display: none !important;
}

/* ================================================
   CATALOG HERO (banner de categoría — blade)
   ================================================ */

.catalog-hero {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.catalog-hero__img {
    width: 100%;
    display: block;
    border-radius: var(--cat-radius);
    object-fit: cover;
}

/* ================================================
   CATALOG PROMO (banner de promoción — blade)
   ================================================ */

.catalog-promo {
    margin-bottom: 2rem;
}

.catalog-promo__card {
    background: transparent;
    /* Referencia de los cqw del cronometro: el arte de la promo trae el mismo
       hueco reservado que en el home, aunque aca el card sea mas angosto. */
    container-type: inline-size;
    container-name: catalog-promo;
    position: relative;
    width: 100%;
}

@media screen and (min-width: 992px) {
    .catalog-promo__card {
        width: calc(100% - (var(--cat-sidebar-w) + 3rem));
        margin-left: auto;
    }
}

.catalog-promo__banner {
    display: block;
    width: 100%;
}

.catalog-promo__banner img {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 14 / 3;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: var(--cat-radius);
}

.catalog-promo__header {
    padding: 2rem 2rem 1.6rem;
    text-align: center;
}

.catalog-promo__header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cat-primary);
    margin-bottom: 0.8rem;
}

.catalog-promo__header p {
    font-size: 1.5rem;
    color: var(--cat-text-muted);
    margin-bottom: 0;
}

.catalog-promo__countdown-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding-top: 1.6rem;
}

.catalog-promo__countdown-divider {
    width: 4rem;
    height: 2px;
    background: var(--cat-accent);
    border-radius: 1px;
}

.catalog-promo__footer {
    padding: 1.6rem;
    text-align: center;
}

/* ============================================================
   CATALOG FEATURED SLIDER
   ============================================================ */

.catalog-featured {
    margin: 0 0 2.4rem;
    padding: 2rem 0;
    overflow: hidden;
}

.catalog-featured-box {
    background-color: var(--hdr-primary-light);
    border: 1px solid var(--hdr-primary);
    border-radius: 1.6rem;
    padding: 2rem;
}

.catalog-featured__header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 2rem;
}

.catalog-featured__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cat-primary);
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.2;
}

.catalog-featured__desc {
    font-size: 1.4rem;
    color: var(--cat-text-muted);
    margin-bottom: 0;
}

.catalog-featured-slider {
    position: relative;
}

.catalog-featured-slider__track {
    overflow: hidden;
    width: 100%;
}

.catalog-featured-slider__wrapper {
    display: flex;
    align-items: stretch;
}

.catalog-featured-slider__navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    padding: 0 0.4rem;
}

.catalog-featured-slider__prev,
.catalog-featured-slider__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 1px solid var(--cat-border);
    background: #fff;
    color: var(--cat-primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
    padding: 0;
    pointer-events: all;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.catalog-featured-slider__prev:hover,
.catalog-featured-slider__next:hover {
    background: var(--cat-primary);
    color: #fff;
    border-color: var(--cat-primary);
}

.catalog-featured-slider__prev.swiper-button-disabled,
.catalog-featured-slider__next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

@media (min-width: 768px) {
    .catalog-featured {
        padding: 2.4rem 0;
    }

    .catalog-featured__header {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }
}

@media (min-width: 992px) {
    .catalog-featured {
        padding: 3.2rem 0;
        margin-bottom: 3.2rem;
    }

    .catalog-featured-box {
        padding: 3rem;
    }

    .catalog-featured__header {
        margin-bottom: 2.4rem;
    }

    .catalog-featured__title {
        font-size: 2.75rem;
    }
}

/* ============================================================
   CATALOG QUICK FILTERS — toggle switches
   ============================================================ */

.catalog-quick-filters {
    margin-bottom: 2rem;
    background: #fff;
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius);
    overflow: hidden;
}

.catalog-quick-filters__list {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 0;
}

.catalog-quick-filters__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    margin-bottom: 0;
    cursor: pointer;
    border-bottom: 1px solid var(--cat-border);
    transition: background 0.15s;
    user-select: none;
}

.catalog-quick-filters__item:last-child {
    border-bottom: none;
}

.catalog-quick-filters__item:hover {
    background: var(--cat-hover-bg);
}

.catalog-quick-filters__item--active .catalog-quick-filters__label {
    color: var(--cat-primary);
    font-weight: 600;
}

.catalog-quick-filters__item--active .catalog-quick-filters__track {
    background: var(--cat-primary);
}

.catalog-quick-filters__item--active .catalog-quick-filters__track::after {
    transform: translateX(2rem);
}

.catalog-quick-filters__label {
    font-size: 1.4rem;
    color: var(--cat-text);
    line-height: 1.4;
    flex: 1;
    transition: color 0.15s;
}

.catalog-quick-filters__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.catalog-quick-filters__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.catalog-quick-filters__track {
    display: inline-block;
    width: 4.2rem;
    height: 2.2rem;
    background: #d0d5dd;
    border-radius: 1.1rem;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.catalog-quick-filters__track::after {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: 1.6rem;
    height: 1.6rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.catalog-quick-filters__input:checked + .catalog-quick-filters__track {
    background: var(--cat-primary);
}

.catalog-quick-filters__input:checked + .catalog-quick-filters__track::after {
    transform: translateX(2rem);
}

@media (min-width: 992px) {
    .catalog-quick-filters__item {
        padding: 1.2rem 1.6rem;
    }

    .catalog-quick-filters__label {
        font-size: 1.35rem;
    }
}

/* ============================================================
   CATALOG PRICE FILTER — rango personalizado
   ============================================================ */

.catalog-price-filter {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--cat-border);
}

.catalog-price-filter__title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1.2rem;
}

.catalog-price-filter__range {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.catalog-price-filter__field {
    flex: 1;
}

.catalog-price-filter__input {
    width: 100%;
    height: 3.6rem;
    padding: 0 1.2rem;
    font-size: 1.4rem;
    color: var(--cat-text);
    background: var(--cat-search-bg);
    border: 1px solid var(--cat-border);
    border-radius: 0.6rem;
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}

.catalog-price-filter__input::-webkit-outer-spin-button,
.catalog-price-filter__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.catalog-price-filter__input:focus {
    border-color: var(--cat-primary);
    background: #fff;
}

.catalog-price-filter__input::placeholder {
    color: var(--cat-text-muted);
    font-size: 1.3rem;
}

.catalog-price-filter__actions {
    display: flex;
    justify-content: flex-end;
}

.catalog-price-filter__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.6rem;
    padding: 0 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    background: var(--cat-primary);
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: opacity 0.15s;
    width: 100%;
}

.catalog-price-filter__button:hover {
    opacity: 0.85;
}

@media (min-width: 576px) {
    .catalog-price-filter__range {
        flex-direction: row;
    }

    .catalog-price-filter__button {
        width: auto;
    }
}

.catalog-results-count {
    font-size: 1.3rem;
    color: var(--cat-text-muted);
    margin-bottom: 0;
    margin-top: 0.4rem;
}

/* ===========================
   CATALOG IMAGE FILTER
   =========================== */

.catalog-sidebar-banner__image {
    height: auto;
    width: 100%;
    object-fit: contain;
}

/* ===========================
   CATALOG INFO SECTION
   =========================== */

.catalog-banner {
    display: block;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.catalog-banner__img {
    width: 100%;
    border-radius: var(--pc-radius);
}

.catalog-info-section {
    margin-top: 2.4rem;
    padding: 2.4rem 0 3.2rem;
    border-top: 1px solid var(--cat-border);
}

.catalog-info-section__header {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.catalog-info-section__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cat-text);
    margin: 0;
    line-height: 1.3;
}

.catalog-info-section__description {
    font-size: 1.4rem;
    color: var(--cat-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- FAQ toggle button --- */

.catalog-faq__toggle {
    margin-bottom: 1.6rem;
}

.catalog-faq__button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cat-primary);
    background: transparent;
    border: 1px solid var(--cat-primary);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.catalog-faq__button:hover {
    background: var(--cat-primary);
    color: #fff;
}

.catalog-faq__button-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.catalog-faq__button--open .catalog-faq__button-icon {
    transform: rotate(180deg);
}

/* --- FAQ collapsible content --- */

.catalog-faq {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* --- FAQ grid --- */

.catalog-faq__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding-top: 1.6rem;
}

.catalog-faq__question {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cat-text);
    margin: 0;
}

.catalog-faq__answer {
    font-size: 1.4rem;
    color: var(--cat-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* --- Responsive desktop --- */

@media (min-width: 768px) {
    .catalog-promo__card {
        width: calc(100% - (var(--cat-sidebar-w) + 3rem));
        margin-left: auto;
    }

    .catalog-info-section__title {
        flex: 0 0 35%;
        font-size: 2rem;
    }

    .catalog-info-section__description {
        columns: 2;
        max-height: 11rem;
        flex: 1;
        overflow: hidden;
    }

    .catalog-faq__grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 4rem;
        gap: 0;
    }

    .catalog-faq__question,
    .catalog-faq__answer {
        padding: 2rem 0;
        border-bottom: 1px solid var(--cat-border);
    }

    .catalog-faq__grid > p:nth-last-child(1),
    .catalog-faq__grid > p:nth-last-child(2) {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* ===========================
   CATALOG FAQ — INTERACTIVE (refactor)
   =========================== */

/* Reset old grid styles */
.catalog-faq__grid {
    display: block;
}

.catalog-faq__layout {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding-top: 1.6rem;
}

/* --- Questions list --- */

.catalog-faq__questions-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.catalog-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    padding: 1.4rem 1.6rem;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--cat-text);
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--cat-border);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-left-color 0.15s;
    line-height: 1.4;
}

.catalog-faq__question:last-child {
    border-bottom: none;
}

.catalog-faq__question:hover {
    background: var(--cat-hover-bg);
    color: var(--cat-primary);
}

.catalog-faq__question--active {
    background: var(--cat-hover-bg);
    color: var(--cat-primary);
    font-weight: 600;
    border-left-color: var(--cat-primary);
}

.catalog-faq__question-text {
    flex: 1;
}

.catalog-faq__question-icon {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.2s;
}

.catalog-faq__question--active .catalog-faq__question-icon {
    opacity: 1;
    transform: rotate(90deg);
}

/* --- Answers panel --- */

.catalog-faq__answers-panel {
    background: var(--cat-hover-bg);
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius);
    padding: 2rem;
    min-height: 8rem;
}

.catalog-faq__answer {
    font-size: 1.45rem;
    color: var(--cat-text-muted);
    line-height: 1.7;
    margin: 0;
    border-bottom: none;
    padding: 0;
}

.catalog-faq__answer--active {
    display: block;
}

/* --- Desktop: 2-column layout --- */

@media (min-width: 992px) {
    .catalog-faq__layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 3.2rem;
    }

    .catalog-faq__questions-list {
        flex: 0 0 42%;
    }

    .catalog-faq__answers-panel {
        flex: 1;
        align-self: stretch;
        display: flex;
        align-items: center;
        padding: 2.4rem;
    }

    .catalog-faq__answer {
        font-size: 1.5rem;
    }
}

/* ===========================
   CATALOG FAQ — ACCORDION + 2-COL (v3)
   =========================== */

/* Override layout from previous version */
.catalog-faq__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 1.6rem;
    border: 1px solid var(--cat-border);
    border-radius: var(--cat-radius);
    overflow: hidden;
}

.catalog-faq__item {
    border-bottom: 1px solid var(--cat-border);
}

.catalog-faq__item:last-child {
    border-bottom: none;
}

/* Answer body: collapsed by default (accordion) */
.catalog-faq__answer-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
    background: var(--cat-hover-bg);
}

.catalog-faq__answer-inner {
    padding: 1.2rem 1.6rem 1.6rem 1.9rem;
    font-size: 1.4rem;
    color: var(--cat-text-muted);
    line-height: 1.65;
}

/* --- Desktop: 2-column layout --- */
@media (min-width: 992px) {
    .catalog-faq__layout {
        padding-top: 0;
        overflow: hidden;
    }

    .catalog-faq__item {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        border-bottom: 1px solid var(--cat-border);
        border-radius: 0;
    }

    .catalog-faq__item:last-child {
        border-bottom: none;
    }

    .catalog-faq__question {
        flex: 0 0 42%;
        border-right: 1px solid var(--cat-border);
    }

    /* On desktop, remove accordion behavior: show active answer inline */
    .catalog-faq__answer-body {
        flex: 1;
        max-height: none !important;
        overflow: visible !important;
        transition: none;
        display: none;
    }

    .catalog-faq__item--active .catalog-faq__answer-body {
        display: flex;
        align-items: center;
    }

    .catalog-faq__answer-inner {
        padding: 1.6rem 2rem;
        font-size: 1.45rem;
    }
}

/* ===========================
   CATALOG FAQ v4 — Desktop 2-col + Mobile details
   =========================== */

/* Mobile first: mostrar solo mobile, ocultar desktop */
.catalog-faq--desktop {
    display: none;
}

.catalog-faq--mobile {
    display: block;
    padding-top: 1.2rem;
}

/* --- Mobile: details/summary --- */
.catalog-faq-mobile__item {
    border-bottom: 1px solid var(--cat-border);
}

.catalog-faq-mobile__item:first-child {
    border-top: 1px solid var(--cat-border);
}

.catalog-faq-mobile__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.6rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--cat-text);
    cursor: pointer;
    line-height: 1.4;
    gap: 1.2rem;
}

.catalog-faq-mobile__summary::-webkit-details-marker {
    display: none;
}

.catalog-faq-mobile__summary::after {
    content: '';
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 0.2s, opacity 0.2s;
    margin-top: -0.25rem;
}

.catalog-faq-mobile__item[open] .catalog-faq-mobile__summary {
    color: var(--cat-primary);
}

.catalog-faq-mobile__item[open] .catalog-faq-mobile__summary::after {
    transform: rotate(225deg);
    opacity: 1;
}

.catalog-faq-mobile__content {
    padding: 0.4rem 1.6rem 1.6rem;
    font-size: 1.4rem;
    color: var(--cat-text-muted);
    line-height: 1.65;
    background: var(--cat-hover-bg);
}

/* --- Desktop: 2 columnas --- */
@media (min-width: 992px) {
    .catalog-faq--desktop {
        display: grid;
        grid-template-columns: 42% 1fr;
        border: 1px solid var(--cat-border);
        border-radius: var(--cat-radius);
        overflow: hidden;
    }

    .catalog-faq--mobile {
        display: none;
    }

    .catalog-faq__questions-col {
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--cat-border);
    }

    .catalog-faq--desktop .catalog-faq__question {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 1.4rem 1.6rem;
        text-align: left;
        font-size: 1.4rem;
        font-weight: 500;
        color: var(--cat-text);
        background: #fff;
        border: none;
        border-bottom: 1px solid var(--cat-border);
        border-left: 3px solid transparent;
        cursor: pointer;
        line-height: 1.45;
        transition: background 0.15s, color 0.15s, border-left-color 0.15s;
    }

    .catalog-faq--desktop .catalog-faq__question:last-child {
        border-bottom: none;
    }

    .catalog-faq--desktop .catalog-faq__question:hover {
        background: var(--cat-hover-bg);
        color: var(--cat-primary);
    }

    .catalog-faq--desktop .catalog-faq__question--active {
        background: var(--cat-hover-bg);
        color: var(--cat-primary);
        font-weight: 600;
    }

    .catalog-faq__answers-col {
        display: flex;
        align-items: center;
        padding: 2rem 2.4rem;
        background: var(--cat-hover-bg);
    }

    .catalog-faq__answers-col .catalog-faq__answer {
        font-size: 1.45rem;
        color: var(--cat-text-muted);
        line-height: 1.7;
        margin: 0;
    }
}

/* ================================================
   CATALOG SIDEBAR BANNER
   ================================================ */

.catalog-sidebar-banner {
    margin-top: 1.6rem;
    border-radius: var(--cat-radius);
    overflow: hidden;
    border: 1px solid var(--cat-border);
}

.catalog-sidebar-banner__link {
    display: block;
    line-height: 0;
    transition: opacity 0.2s ease;
}

.catalog-sidebar-banner__link:hover {
    opacity: 0.88;
}

.catalog-sidebar-banner__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ================================================
   PRODUCTO — producto.blade.php
   ================================================ */

:root {
    --pv-primary: var(--hdr-primary);
    --pv-accent: var(--hdr-accent);
    --pv-text: var(--hdr-text);
    --pv-text-muted: var(--hdr-text-muted);
    --pv-border: var(--hdr-border);
    --pv-radius: 0.8rem;
    --pv-gap: 2rem;
}

.ficha_producto-page {
    padding-top: 2rem;
}

/* Imagen principal */
.container-img {
    overflow: hidden;
    height: 500px;
    aspect-ratio: 1 / 1;
}

/* ---- product-view: bloque de información ---- */

.product-view {
    display: flex;
    flex-direction: column;
    gap: var(--pv-gap);
    padding: 1.6rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
}

/* Meta: marca + SKU */
.product-view__meta {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.product-view__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s;
}

.product-view__brand:hover {
    opacity: 0.75;
}

.product-view__brand-logo {
    display: block;
    height: 3.2rem;
    width: auto;
    max-width: 12rem;
    object-fit: contain;
}

/* SKU: va suelto debajo del título, ya no al lado del logo de la marca, así que
   pierde el separador vertical que tenía. */
.product-view__sku {
    font-size: 1.2rem;
    color: var(--pv-text-muted);
    margin: -1.2rem 0 0;
}

/* Título */
.product-view__title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pv-text);
    margin: 0;
}

@media (min-width: 768px) {
    .product-view__title {
        font-size: 2.2rem;
    }
}

/* Badges */
.product-view__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.product-view__badges:empty {
    display: none;
}

.product-view__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1.2rem;
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
}

.product-view__badge--online {
    background: #e8f4fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.product-view__badge--stock {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.product-view__badge--armable {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

/* Tiempo de entrega por categoría. Misma paleta que el pill de la card del catálogo
   (.product-card__benefit) para que se lea como el mismo dato en las dos pantallas. */
.product-view__badge--entrega {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* Resumen corto */
.product-view__summary {
    border-top: 1px solid var(--pv-border);
    padding-top: 1.6rem;
}

.product-view__summary-text {
    font-size: 1.4rem;
    color: var(--pv-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Acciones — wrapper del componente Vue add-to-cart */
.product-view__actions {
    border-top: 1px solid var(--pv-border);
    padding-top: 1.6rem;
}

/* Lista de bodas — wrapper del componente Vue add-lista-boda */
.product-view__wishlist {
    border-top: 1px solid var(--pv-border);
    padding-top: 1.2rem;
}

/* Aviso precio web exclusivo */
.product-view__notice {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: var(--pv-radius);
    padding: 1.2rem 1.6rem;
}

.product-view__notice p {
    font-size: 1.3rem;
    color: #5d4037;
    margin: 0;
    line-height: 1.6;
}

/* Banners de producto y configuración */
.product-view__banner {
    border-radius: var(--pv-radius);
    overflow: hidden;
    line-height: 0;
}

.product-view__banner picture img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- product-share: botón de compartir ---- */

.product-gallery-frame {
    display: flex;
    align-items: flex-start;
}

.product-gallery-frame .product-main-image {
    flex: 1 1 0;
    min-width: 0;
}

.product-share {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 0.4rem;
    flex-shrink: 0;
    width: 4rem;
}

.product-share__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid var(--pv-border);
    border-radius: var(--pc-radius);
    background: #fff;
    color: var(--pv-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.product-share__toggle:hover,
.product-share__toggle[aria-expanded="true"] {
    background: var(--pv-primary);
    border-color: var(--pv-primary);
    color: #fff;
}

.product-share__menu {
    position: absolute;
    top: 0.8rem;
    right: calc(100% + 0.8rem);
    min-width: 16rem;
    background: #fff;
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    padding: 0.8rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(0.6rem);
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
}

.product-share__menu--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.product-share__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: calc(var(--pv-radius) - 0.2rem);
    text-decoration: none;
    color: var(--pv-text);
    font-size: 1.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.product-share__item:hover {
    background: #f5f5f5;
    color: var(--pv-primary);
}

#share-whatsapp .product-share__icon {
    color: #25d366;
}

.product-share__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.product-share__label {
    white-space: nowrap;
}

.product-share__feedback {
    font-size: 1.2rem;
    color: #2e7d32;
    padding: 0.4rem 1rem;
    opacity: 0;
    transition: opacity 0.2s;
    text-align: center;
}

.product-share__feedback--visible {
    opacity: 1;
}

/* ================================================
   SECTION DETALLES — product-accordion
   ================================================ */

.product-accordion {
    padding: 4rem 0;
    background: #fafafa;
    margin-top: 3rem;
}

.product-accordion__wrapper {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d3461'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d3461'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-active-color: var(--pv-primary);
    --bs-accordion-active-bg: #fff;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.15rem rgba(29, 52, 97, 0.1);
    --bs-accordion-border-color: var(--pv-border);
    border-radius: var(--pv-radius);
    overflow: hidden;
    border: 1px solid var(--pv-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 0;
}

.product-accordion__item {
    border-color: var(--pv-border);
    background: #fff;
}

.product-accordion__header {
    margin: 0;
}

.product-accordion__button {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--pv-text);
    letter-spacing: 1%;
    padding: 1.6rem 2rem;
    background: #fff;
    box-shadow: none !important;
    transition: color 0.15s, background 0.15s;
}

.product-accordion__button:not(.collapsed) {
    color: var(--pv-primary);
    background: #fff;
}

.product-accordion__button:focus {
    box-shadow: none !important;
}

.product-accordion__body {
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--pv-text);
    padding: 1.6rem 2rem 2.4rem;
}

.product-accordion__body p {
    margin-bottom: 1.2rem;
}

.product-accordion__body p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .product-accordion {
        padding: 6rem 0;
    }

    .product-accordion__button {
        font-size: 1.6rem;
        padding: 2rem 2.4rem;
    }

    .product-accordion__body {
        padding: 2rem 2.4rem 3.2rem;
        max-width: 72rem;
    }
}

/* ================================================
   PRODUCT PURCHASE — AddToCartWithInput
   ================================================ */

.product-purchase {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* ---- Quantity ---- */

.product-purchase__quantity {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.product-purchase__quantity-label {
    font-size: 1.4rem;
    color: var(--pv-text);
    font-weight: 500;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    line-height: 1.4;
}

.product-purchase__quantity-control {
    border: 1px solid var(--pv-border);
    border-radius: 0.8rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: fit-content;
}

.product-purchase__qty-btn {
    font-size: 1.6rem;
    color: var(--pv-text);
    border: 0;
    outline: 0;
    background: #fff;
    height: 3.5rem;
    width: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.product-purchase__qty-btn:hover {
    background: var(--pv-primary);
    color: #fff;
}

.product-purchase__qty-input {
    font-size: 1.6rem;
    color: var(--pv-text);
    text-align: center;
    height: 3.5rem;
    width: 3.5rem;
    border: 0;
    outline: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.product-purchase__qty-input::-webkit-outer-spin-button,
.product-purchase__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* ---- Section title ---- */

.product-purchase__section-title {
    font-size: 1.4rem;
    color: var(--pv-text);
    font-weight: 500;
    letter-spacing: 1%;
    margin-bottom: 0.8rem;
}

/* ---- Pricing card ---- */

.product-purchase__pricing {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.8rem;
}

.product-purchase__price-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.product-purchase__price-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ---- Old price ---- */

.product-purchase__old-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 1.6rem;
    line-height: 1.2;
}

.product-purchase__old-price-text {
    color: rgb(141, 141, 166);
    text-decoration: line-through;
    line-height: 1.1;
}

/* ---- Discount badge ---- */

.product-purchase__badge {
    display: inline-block;
    background: #ff4444;
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.4;
}

/* ---- Current price ---- */

.product-purchase__price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1;
}

/* ---- Out of stock ---- */

.product-purchase__out-of-stock {
    font-size: 2.2rem;
    font-weight: 500;
    color: #d32f2f;
}

/* ---- WA / external action button wrapper ---- */

.product-purchase__actions {
    flex-shrink: 0;
}

/* ---- Cart buttons (AddCartButton renders .product-details-action > .btn-cart) ---- */

.product-purchase__btn-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-purchase__price-grid .product-details-action .btn-cart {
    position: relative;
    font-size: 1.3rem;
    letter-spacing: 0.05rem;
    min-width: 23rem;
    border-radius: 3rem;
    min-height: 48px;
}

.product-purchase__price-grid .product-details-action .btn-cart span {
    position: relative;
    left: 1.5rem;
}

.product-purchase__price-grid .product-details-action .btn-cart:hover::after {
    filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(9%)
        hue-rotate(183deg) brightness(104%) contrast(102%);
}

.product-purchase__price-grid--cuotas .product-details-action .btn-cart::after {
    width: 2.1rem;
    height: 2.1rem;
    background-image: url(../images/cuota.svg);
    left: 4rem;
}

.product-purchase__credito .product-details-action .btn-cart {
    background-color: var(--newColorPrincipal);
    border-color: var(--newColorPrincipal);
}

.product-purchase__credito .btn-cart {
    color: var(--colorblanco);
}

/* ---- Installments section ---- */

.product-purchase__installments-form {
    margin: 0;
    width: 100%;
}

.product-purchase__installments-select {
    width: 100%;
    font-size: 1.4rem;
    color: var(--pv-text);
    background: #fff;
    border: 1px solid var(--pv-border);
    border-radius: 0.6rem;
    padding: 0.8rem 1.2rem;
    height: auto;
    appearance: auto;
}

/* ---- TEMPORARY: installment debug block ---- */

.product-purchase__debug-installments {
    background: #fffde7;
    border: 1px dashed #f9a825;
    border-radius: 0.6rem;
    padding: 1.2rem 1.6rem;
}

.product-purchase__debug-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f57f17;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
}

.product-purchase__debug-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.product-purchase__debug-item {
    font-size: 1.4rem;
    color: var(--pv-text);
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(249, 168, 37, 0.25);
}

.product-purchase__debug-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* ---- Responsive (tablet+) ---- */

@media (min-width: 768px) {
    .product-purchase__price-grid {
        justify-content: space-between;
    }

    .product-purchase__price-grid--cuotas #plan-financiado-container {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ---- TEMPORARY: credito raw data block ---- */

.product-purchase__raw-data {
    background: #e8f5e9;
    border: 1px dashed #43a047;
    border-radius: 0.6rem;
    padding: 1.2rem 1.6rem;
}

.product-purchase__raw-data-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
}

.product-purchase__raw-data-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.2rem;
    margin: 0;
    font-size: 1.3rem;
}

.product-purchase__raw-data-list dt {
    font-weight: 700;
    color: #1b5e20;
    white-space: nowrap;
    padding-top: 0.2rem;
}

.product-purchase__raw-data-list dd {
    margin: 0;
    color: var(--pv-text);
    word-break: break-all;
}

.product-purchase__raw-data-list pre {
    margin: 0;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.4rem;
    padding: 0.4rem 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1b5e20;
}

/* ================================================
   RELATED PRODUCTS SLIDER
   BEM Block: related-products-slider
   Mobile First — base: 1rem = 10px
   ================================================ */

.related-products-slider {
    position: relative;
}

.related-products-slider__track {
    overflow: hidden;
}

.related-products-slider__navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.related-products-slider__prev,
.related-products-slider__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    pointer-events: auto;
    border: 1px solid var(--hdr-border);
    border-radius: 50%;
    background: #fff;
    color: var(--hdr-text);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.related-products-slider__prev:hover,
.related-products-slider__next:hover {
    background: var(--hdr-primary);
    border-color: var(--hdr-primary);
    color: #fff;
}

.related-products-slider__prev.swiper-button-disabled,
.related-products-slider__next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================================
   ATC-MODAL — Modal "Producto agregado al carrito"
   BEM Block: atc-modal
   Mobile First | Base: 1rem = 10px
   ================================================ */

:root {
    --atc-success: #22c55e;
    --atc-success-bg: #f0fdf4;
    --atc-success-border: #bbf7d0;
    --atc-success-text: #15803d;
    --atc-veloz: #e63946;
    --atc-veloz-hover: #c1121f;
}

/* Dialog */
.atc-modal-dialog {
    max-width: 54rem;
}

/* Content */
.atc-modal {
    border: none;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.18);
}

/* ---- Header ---- */
.atc-modal__header {
    background: var(--atc-success-bg);
    border-bottom: 1px solid var(--atc-success-border);
    padding: 1.4rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.atc-modal__title-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.atc-modal__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    background: var(--atc-success);
    border-radius: 50%;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
}

.atc-modal__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--atc-success-text);
    line-height: 1.3;
}

.atc-modal__close {
    flex-shrink: 0;
}

/* ---- Body ---- */
.atc-modal__body {
    padding: 1.6rem;
}

/* Grid: mobile = columna única */
.atc-modal__grid {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* ---- Producto ---- */
.atc-modal__product {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem;
    background: #f8f9fb;
    border-radius: 0.8rem;
    border: 1px solid var(--hdr-border);
}

.atc-modal__product-img {
    flex-shrink: 0;
    width: 8rem;
    height: 8rem;
    background: #fff;
    border-radius: 0.6rem;
    border: 1px solid var(--hdr-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atc-modal__product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.atc-modal__product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.atc-modal__product-name {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--hdr-text);
    line-height: 1.4;
}

.atc-modal__product-qty {
    margin: 0;
    font-size: 1.2rem;
    color: var(--hdr-text-muted);
}

.atc-modal__product-price {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--hdr-primary);
}

/* ---- Resumen del carrito ---- */
.atc-modal__summary {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.atc-modal__summary-info {
    padding: 1.2rem 1.4rem;
    background: var(--hdr-primary-light);
    border-radius: 0.8rem;
    border: 1px solid var(--hdr-border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.atc-modal__cart-desc {
    display: block;
    font-size: 1.3rem;
    color: var(--hdr-text-muted);
    line-height: 1.4;
}

.atc-modal__cart-total {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hdr-primary);
}

/* ---- Botones ---- */
.atc-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.atc-modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.1rem 1.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 0.8rem;
    text-decoration: none;
    min-height: 4.4rem;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    letter-spacing: 0.02em;
}

/* Ver más productos */
.atc-modal__btn--outline {
    border-radius: var(--hdr-radius-pill);
    background: transparent;
    border: 2px solid var(--hdr-primary);
    color: var(--hdr-primary) !important;
}

.atc-modal__btn--outline:hover {
    border-radius: var(--hdr-radius-pill);
    background: var(--hdr-primary);
    color: #fff !important;
    text-decoration: none;
}

/* Compra Veloz */
.atc-modal__btn--veloz {
    border-radius: var(--hdr-radius-pill);
    background: var(--atc-veloz);
    border: 2px solid var(--atc-veloz);
    color: #fff !important;
}

.atc-modal__btn--veloz:hover {
    border-radius: var(--hdr-radius-pill);
    background: var(--atc-veloz-hover);
    border-color: var(--atc-veloz-hover);
    color: #fff !important;
    text-decoration: none;
}

/* Ver carrito */
.atc-modal__btn--cart {
    border-radius: var(--hdr-radius-pill);
    background: var(--hdr-primary);
    border: 2px solid var(--hdr-primary);
    color: #fff !important;
}

.atc-modal__btn--cart:hover {
    background: #162a52;
    border-color: #162a52;
    border-radius: var(--hdr-radius-pill);
    color: #fff !important;
    text-decoration: none;
}

/* ---- Tablet+ (768px): 2 columnas ---- */
@media (min-width: 768px) {
    .atc-modal-dialog {
        max-width: 60rem;
    }

    .atc-modal__body {
        padding: 2rem 2.4rem 2.4rem;
    }

    .atc-modal__grid {
        flex-direction: row;
        align-items: center;
    }

    .atc-modal__product {
        flex: 0 0 22rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .atc-modal__product-img {
        width: 12rem;
        height: 12rem;
    }

    .atc-modal__product-info {
        align-items: center;
    }

    .atc-modal__summary {
        flex: 1;
    }

    .atc-modal__title {
        font-size: 1.5rem;
    }
}

/* ================================================
   HDR-ACCOUNT — Menú de cuenta flyout
   ================================================ */

.hdr-account {
    position: relative;
}

.hdr-account__trigger {
    font-family: inherit;
}

.hdr-account__panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 22rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem);
    transition: opacity 0.18s ease, transform 0.18s ease,
        visibility 0s linear 0.18s;
    pointer-events: none;
}

.hdr-account--open .hdr-account__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: auto;
}

.hdr-account__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--hdr-border);
}

.hdr-account__panel-greeting {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--hdr-text);
    font-family: "Poppins", sans-serif;
}

.hdr-account__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}

.hdr-account__close:hover {
    opacity: 1;
    background: var(--hdr-hover-bg);
}

.hdr-account__list {
    list-style: none;
    margin: 0;
    padding: 0.6rem 0;
}

.hdr-account__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.6rem;
    color: var(--hdr-text);
    text-decoration: none;
    font-size: 1.4rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.hdr-account__item:hover {
    background: var(--hdr-hover-bg);
    color: var(--hdr-primary);
    text-decoration: none;
}

.hdr-account__item i {
    font-size: 1.4rem;
    width: 1.6rem;
    text-align: center;
    color: var(--hdr-primary);
    flex-shrink: 0;
}

.hdr-account__item img {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

.hdr-account__item--logout {
    color: #dc2626;
    border-top: 1px solid var(--hdr-border);
    margin-top: 0.4rem;
    padding-top: 1rem;
}

.hdr-account__item--logout:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.hdr-account__item--logout i {
    color: #dc2626;
}

@media (max-width: 575.98px) {
    .hdr-account__panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: unset;
        width: 100%;
        border-radius: 1.2rem 1.2rem 0 0;
        transform: translateY(1.6rem);
    }

    .hdr-account--open .hdr-account__panel {
        transform: translateY(0);
    }
}

/* ================================================
   SIDE-NAV + MEGAMENU — Comportamiento corregido
   ================================================ */

/* ---- Base: mobile first ---- */

.buttom-menu {
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.buttom-menu img {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Override estilos.css: estado activo mobile */
.megamenu-container.active .buttom-menu {
    background: var(--hdr-primary-light);
    color: var(--hdr-primary);
    border-radius: var(--hdr-radius);
}

.megamenu-container.active .buttom-menu img {
    transform: rotate(90deg);
    filter: none; /* cancela el invert de estilos.css */
}

/* Acordeón mobile: visible/oculto */
.megamenu-container .megamenu-vertical-new {
    display: none;
}

.megamenu-container.active .megamenu-vertical-new {
    display: block;
}

/* Lista del megamenú: mobile */
.megamenu-vertical-new .megamenu-col-vertical {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0 0.8rem;
    background: var(--hdr-hover-bg, #f5f7fa);
}

.megamenu-vertical-new .megamenu-col-vertical li a {
    display: block;
    padding: 0.8rem 1.9rem 0.8rem 3rem;
    color: var(--hdr-text);
    text-decoration: none;
    font-size: 1.3rem;
    font-family: "Poppins", sans-serif;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    transition: color 0.15s;
}

.megamenu-vertical-new .megamenu-col-vertical li:first-child a {
    border-top: none;
}

.megamenu-vertical-new .megamenu-col-vertical li a:hover {
    color: var(--hdr-primary);
    text-decoration: underline;
}

.megamenu-vertical-new .megamenu-col-vertical li a.item-ver-mas {
    font-weight: 500;
    color: var(--hdr-primary);
}

/* ---- Desktop: flyout lateral ---- */
@media (min-width: 992px) {
    /* Panel flotante a la derecha del side-nav */
    .megamenu-container .megamenu-vertical-new {
        position: fixed;
        left: min(32rem, 88vw);
        top: 0;
        bottom: 0;
        width: min(28rem, calc(100vw - min(32rem, 88vw)));
        background: #fff;
        border-left: 1px solid var(--hdr-border);
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.1);
        z-index: 1059;
        overflow-y: auto;
        padding: 1.6rem 0;
        scrollbar-width: thin;
        scrollbar-color: var(--hdr-border) transparent;
        /* opacity+pointer-events en lugar de display:none/flex */
        display: block;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-0.4rem);
        transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .megamenu-container.active .megamenu-vertical-new {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    /* Botón activo en desktop */
    .megamenu-container.active .buttom-menu {
        background: var(--hdr-primary);
        color: #fff;
        border-radius: var(--hdr-radius);
    }

    .megamenu-container.active .buttom-menu img {
        transform: none;
        filter: brightness(0) saturate(100%) invert(100%);
    }

    /* Lista del megamenú: desktop */
    .megamenu-vertical-new .megamenu-col-vertical {
        background: transparent;
        padding: 0;
    }

    .megamenu-vertical-new .megamenu-col-vertical li a {
        padding: 0.9rem 2rem;
        font-size: 1.4rem;
        border-top: 1px solid var(--hdr-border);
    }

    .megamenu-vertical-new .megamenu-col-vertical li:first-child a {
        border-top: none;
        padding-top: 0.6rem;
    }

    .megamenu-vertical-new .megamenu-col-vertical::-webkit-scrollbar {
        width: 4px;
    }
}

/* Título de categoría dentro del panel megamenu */
.megamenu-vertical-new__title {
    margin: 0;
    padding: 1.4rem 2rem 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: var(--hdr-primary);
    border-bottom: 1px solid var(--hdr-border);
}

/* ================================================
   MEGAMENU — Accesibilidad teclado (focus)
   ================================================ */

.buttom-menu:focus-visible {
    outline: 2px solid var(--hdr-primary);
    outline-offset: -2px;
    border-radius: var(--hdr-radius);
}

/* ================================================
   SCROLL LOCK — Bloqueo de scroll de página
   ================================================ */

body.scroll-locked,
body.sidebar-filter-active {
    overflow: hidden;
}

/* ================================================
   DRAWER MENU — Menú mobile tipo panel deslizante
   BEM Block: drawer-menu
   Base: 1rem = 10px
   ================================================ */

:root {
    --drawer-w: min(32rem, 88vw);
    --drawer-z: 1070;
}

/* ---- Ocultar toggler en desktop ---- */
@media (min-width: 992px) {
    .btn-menu-toggler {
        display: none !important;
    }
}

/* ---- Overlay ---- */
.drawer-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: calc(var(--drawer-z) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.drawer-menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ---- Panel ---- */
.drawer-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--drawer-w);
    background: #fff;
    z-index: var(--drawer-z);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14);
    overscroll-behavior: contain;
    overflow-y: auto;
}

.drawer-menu.is-open {
    transform: translateX(0);
}

/* ---- Wrapper interno ---- */
.drawer-menu__wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ---- Header ---- */
.drawer-menu__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid var(--hdr-border);
    background: var(--hdr-primary-light);
}

.drawer-menu__title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--hdr-text);
    font-family: "Poppins", sans-serif;
    line-height: 1.2;
}

.drawer-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border: none;
    background: transparent;
    border-radius: var(--hdr-radius);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: var(--hdr-text);
    transition: background 0.15s;
}

.drawer-menu__close:hover {
    background: var(--hdr-hover-bg);
}

.drawer-menu__close img {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
}

/* ---- Body ---- */
.drawer-menu__body {
    scrollbar-width: thin;
    scrollbar-color: var(--hdr-border) transparent;
}

.drawer-menu__body::-webkit-scrollbar {
    width: 4px;
}

.drawer-menu__body::-webkit-scrollbar-thumb {
    background: var(--hdr-border);
    border-radius: 0.4rem;
}

/* ---- Nav ---- */
.drawer-menu__nav {
    padding: 0.8rem 0;
}

/* Link simple (ej: Nuevos) */
.drawer-menu__link {
    display: flex;
    align-items: center;
    padding: 1.2rem 2rem;
    color: var(--hdr-text) !important;
    text-decoration: none !important;
    font-size: 1.4rem;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    border-bottom: 1px solid var(--hdr-border);
    transition: background 0.15s, color 0.15s;
}

.drawer-menu__link:hover,
.drawer-menu__link:focus {
    background: var(--hdr-hover-bg);
    color: var(--hdr-primary) !important;
    outline: none;
}

/* ---- Categoría: <details> / <summary> ---- */
.drawer-menu__category {
    border-bottom: 1px solid var(--hdr-border);
}

.drawer-menu__category-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 2rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    gap: 1.2rem;
    transition: background 0.15s;
}

.drawer-menu__category-trigger::-webkit-details-marker {
    display: none;
}

.drawer-menu__category-trigger::marker {
    display: none;
}

.drawer-menu__category-trigger:hover {
    background: var(--hdr-hover-bg);
}

.drawer-menu__category-trigger:focus {
    outline: 2px solid var(--hdr-primary);
    outline-offset: -2px;
}

.drawer-menu__category-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.drawer-menu__category-icon {
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.drawer-menu__category-label {
    font-size: 1.4rem;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: var(--hdr-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flecha: rota cuando está abierto */
.drawer-menu__category-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--hdr-text-muted);
    transition: transform 0.22s ease, color 0.15s;
}

.drawer-menu__category[open] .drawer-menu__category-arrow {
    transform: rotate(180deg);
    color: var(--hdr-primary);
}

.drawer-menu__category[open] .drawer-menu__category-label {
    color: var(--hdr-primary);
}

/* ---- Contenido de categoría ---- */
.drawer-menu__category-content {
    display: flex;
    flex-direction: column;
    background: var(--hdr-hover-bg, #f5f7fa);
    border-top: 1px solid var(--hdr-border);
}

/* "Ver todo X" */
.drawer-menu__category-all {
    display: flex;
    align-items: center;
    padding: 1rem 2rem 1rem 3.2rem;
    color: var(--hdr-primary) !important;
    text-decoration: none !important;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    transition: background 0.15s;
}

.drawer-menu__category-all:hover,
.drawer-menu__category-all:focus {
    background: #e6eaf3;
    outline: none;
}

/* Subcategorías */
.drawer-menu__subcategory-link {
    display: flex;
    align-items: center;
    padding: 0.9rem 2rem 0.9rem 3.2rem;
    color: var(--hdr-text) !important;
    text-decoration: none !important;
    font-size: 1.3rem;
    font-family: "Poppins", sans-serif;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.15s, color 0.15s;
}

.drawer-menu__subcategory-link:first-of-type {
    border-top: none;
}

.drawer-menu__subcategory-link:hover,
.drawer-menu__subcategory-link:focus {
    background: #e6eaf3;
    color: var(--hdr-primary) !important;
    outline: none;
}

/* ---- Footer ---- */
.drawer-menu__footer {
    border-top: 2px solid var(--hdr-border);
    padding: 1.6rem 2rem;
    background: var(--hdr-primary-light);
}

.drawer-menu__footer-links {
    display: flex;
    flex-direction: column;
}

.drawer-menu__footer-link {
    display: flex;
    align-items: center;
    padding: 0.9rem 0;
    color: var(--hdr-text-muted) !important;
    text-decoration: none !important;
    font-size: 1.3rem;
    font-family: "Poppins", sans-serif;
    border-bottom: 1px solid var(--hdr-border);
    transition: color 0.15s;
}

.drawer-menu__footer-link:last-child {
    border-bottom: none;
}

.drawer-menu__footer-link:hover,
.drawer-menu__footer-link:focus {
    color: var(--hdr-primary) !important;
    outline: none;
}

/* ================================================
   CART QTY — Selector de cantidad en carrito
   ================================================ */
.cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--hdr-border);
    border-radius: 0.8rem;
    overflow: hidden;
    background: #fff;
}

.cart-qty__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border: none;
    background: transparent;
    color: var(--hdr-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.cart-qty__btn:hover {
    background: var(--hdr-hover-bg);
    color: var(--hdr-primary);
}

.cart-qty__btn:active {
    background: var(--hdr-primary);
    color: #fff;
}

.cart-qty__btn:focus-visible {
    outline: 2px solid var(--hdr-primary);
    outline-offset: -2px;
}

.cart-qty__input {
    width: 4.8rem !important;
    height: 3.6rem;
    border: none !important;
    border-left: 1px solid var(--hdr-border) !important;
    border-right: 1px solid var(--hdr-border) !important;
    border-radius: 0 !important;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--hdr-text);
    padding: 0 0.4rem !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cart-qty__input::-webkit-inner-spin-button,
.cart-qty__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (min-width: 768px) {
    .cart-qty__input {
        width: 4.5rem !important;
        height: 4rem;
        font-size: 1.4rem;
    }
}

/* ================================================
   CHECKOUT
   Base: 1rem = 10px
   ================================================ */
.group-process-checkout {
    border: 1px solid var(--cs-border);
    border-radius: 0.8rem;
    padding: 2.4rem;
}

.item-process-checkout:not(:last-child) {
    border-bottom: 1px solid var(--cs-border);
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}

.title-checkout {
    color: var(--hdr-primary);
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1.8rem;
}

.coprywrite-checkout {
    font-size: 1.2rem;
    margin-top: 1.5rem;
}

/* ================================================
   CHECKOUT-SUMMARY — Resumen lateral del checkout
   BEM Block: checkout-summary
   Base: 1rem = 10px
   ================================================ */

:root {
    --cs-bg: #ffffff;
    --cs-border: #e5e7eb;
    --cs-radius: 1.2rem;
    --cs-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    --cs-header-bg: #f8f9fb;
    --cs-header-border: #e5e7eb;
    --cs-title-color: #1d3461;
    --cs-title-size: 1.4rem;
    --cs-sep: #f0f2f5;
    --cs-img-size: 5.6rem;
    --cs-product-title-color: #222222;
    --cs-meta-color: #888888;
    --cs-price-color: #1d3461;
    --cs-grand-bg: #eef2ff;
    --cs-grand-color: #1d3461;
    --cs-grand-size: 1.5rem;
    --cs-label-color: #555555;
    --cs-value-size: 1.3rem;
}

/* ---- Aside wrapper ---- */
.checkout-summary-aside {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* ---- Block ---- */
.checkout-summary {
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
}

/* ---- Header ---- */
.checkout-summary__header {
    background: var(--cs-header-bg);
    border-bottom: 1px solid var(--cs-header-border);
    padding: 1.2rem 1.6rem;
}

.checkout-summary__title {
    font-size: var(--cs-title-size);
    font-weight: 700;
    color: var(--cs-title-color);
    margin: 0;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Body: lista de productos ---- */
.checkout-summary__body {
    padding: 0;
    max-height: 32rem;
    overflow-y: auto;
}

/* ---- Product item ---- */
.checkout-summary__product {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--cs-sep);
}

.checkout-summary__product:last-child {
    border-bottom: none;
}

/* ---- Product image ---- */
.checkout-summary__product-image-link {
    flex-shrink: 0;
    display: block;
}

.checkout-summary__product-image {
    width: var(--cs-img-size);
    height: var(--cs-img-size);
    object-fit: contain;
    border-radius: 0.6rem;
    background: #f8f9fa;
    border: 1px solid var(--cs-border);
    display: block;
}

/* ---- Product content ---- */
.checkout-summary__product-content {
    flex: 1 1 0;
    min-width: 0;
}

.checkout-summary__product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cs-product-title-color);
    line-height: 1.4;
    text-decoration: none;
    margin-bottom: 0.4rem;
}

.checkout-summary__product-title:hover {
    color: var(--cs-title-color);
    text-decoration: underline;
}

.checkout-summary__product-meta,
.checkout-summary__product-quantity {
    font-size: 1.1rem;
    color: var(--cs-meta-color);
    margin: 0 0 0.2rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---- Product price ---- */
.checkout-summary__product-price {
    flex-shrink: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cs-price-color);
    white-space: nowrap;
    padding-top: 0.2rem;
}

/* ---- Totals block ---- */
.checkout-summary__totals {
    padding: 0;
}

/* ---- Total row ---- */
.checkout-summary__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.6rem;
    border-bottom: 1px solid var(--cs-sep);
}

.checkout-summary__total-row:last-child {
    border-bottom: none;
}

.checkout-summary__total-label {
    font-size: var(--cs-value-size);
    color: var(--cs-label-color);
    font-weight: 400;
}

.checkout-summary__total-value {
    font-size: var(--cs-value-size);
    font-weight: 600;
    color: var(--cs-product-title-color);
}

/* ---- Grand total row ---- */
.checkout-summary__total-row--grand {
    background: var(--cs-grand-bg);
    padding: 1.4rem 1.6rem;
    border-bottom: none;
}

.checkout-summary__total-row--grand .checkout-summary__total-label,
.checkout-summary__total-row--grand .checkout-summary__total-value {
    font-size: var(--cs-grand-size);
    font-weight: 700;
    color: var(--cs-grand-color);
}

/* ---- Notice (badge solo online) ---- */
.checkout-summary__notice {
    padding: 0.8rem 1.6rem;
    border-bottom: 1px solid var(--cs-sep);
}

/* ---- Desktop ---- */
@media (min-width: 992px) {
    .checkout-summary-aside {
        position: sticky;
        top: 2rem;
    }

    .checkout-summary__body {
        max-height: 40rem;
    }

    .checkout-summary__product-image {
        width: 6.4rem;
        height: 6.4rem;
    }

    .checkout-summary__product-title {
        font-size: 1.3rem;
    }

    .checkout-summary__product-price {
        font-size: 1.3rem;
    }

    .checkout-summary__total-label,
    .checkout-summary__total-value {
        font-size: 1.4rem;
    }

    .checkout-summary__title {
        font-size: 1.5rem;
    }

    .checkout-summary__total-row--grand .checkout-summary__total-label,
    .checkout-summary__total-row--grand .checkout-summary__total-value {
        font-size: 1.8rem;
    }
}

/* ================================================
   CHECKOUT-ACCORDION — Selección de método de envío
   BEM Block: checkout-accordion
   Reutiliza variables --cs-* de checkout-summary
   Base: 1rem = 10px
   ================================================ */

/* ---- Contenedor del acordeón ---- */
.checkout-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
}

/* ---- Item individual (.card override) ---- */
.checkout-accordion__item {
    background: var(--cs-bg) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius) !important;
    box-shadow: var(--cs-shadow) !important;
    overflow: hidden;
    margin-bottom: 0 !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-accordion__item:has(.checkout-accordion__button[aria-expanded="true"]) {
    border-color: var(--cs-title-color) !important;
    box-shadow: 0 4px 20px rgba(29, 52, 97, 0.14) !important;
}

/* ---- Header (.card-header override) ---- */
.checkout-accordion__header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.checkout-accordion__header .card-title {
    margin: 0 !important;
    width: 100%;
}

/* ---- Botón toggle (<a> element) ---- */
.checkout-accordion__button {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 6rem;
    text-decoration: none !important;
    color: inherit !important;
}

.checkout-accordion__header .card-title a,
.checkout-accordion__button:hover,
.checkout-accordion__button:focus {
    text-decoration: none !important;
    color: inherit !important;
    padding: 0 !important;
}

.checkout-accordion__button:focus-visible {
    outline: 2px solid var(--cs-title-color);
    outline-offset: -2px;
}

/* Chevron indicator */
.checkout-accordion__button::after {
    content: '';
    flex-shrink: 0;
    width: 0.9rem;
    height: 0.9rem;
    border-right: 0.2rem solid var(--cs-title-color);
    border-bottom: 0.2rem solid var(--cs-title-color);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-right: 1.8rem;
    margin-bottom: 0.3rem;
}

.checkout-accordion__button[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-bottom: -0.3rem;
}

/* ---- Área de contenido del trigger ---- */
.checkout-accordion__trigger-content {
    flex: 1 1 0;
    padding: 1.4rem 1.6rem !important;
    transition: background 0.15s;
}

.checkout-accordion__button:hover .checkout-accordion__trigger-content {
    background: var(--cs-header-bg);
}

.checkout-accordion__button[aria-expanded="true"] .checkout-accordion__trigger-content {
    background: var(--cs-header-bg);
}

/* ---- Título del item (.element-title override) ---- */
.checkout-accordion__title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--cs-title-color) !important;
    margin: 0 0 0.2rem 0 !important;
    line-height: 1.3;
}

/* ---- Subtítulo descriptivo ---- */
.checkout-accordion__subtitle {
    display: block;
    font-size: 1.2rem;
    color: var(--cs-meta-color);
    line-height: 1.4;
    margin-top: 0.2rem;
}

/* ---- Panel colapsable ---- */
.checkout-accordion__content {
    border-top: 1px solid var(--cs-sep);
}

/* ---- Cuerpo del panel (.card-body override) ---- */
.checkout-accordion__body {
    padding: 1.6rem !important;
    background: var(--cs-bg);
}

/* ---- Desktop ---- */
@media (min-width: 992px) {
    .checkout-accordion {
        gap: 1.2rem;
    }

    .checkout-accordion__button {
        min-height: 7rem;
    }

    .checkout-accordion__trigger-content {
        padding: 1.6rem 2rem !important;
    }

    .checkout-accordion__title {
        font-size: 1.5rem !important;
    }

    .checkout-accordion__subtitle {
        font-size: 1.3rem;
    }

    .checkout-accordion__body {
        padding: 2rem !important;
    }
}

/* ================================================
   PAYMENT-METHODS — Selección de forma de pago
   BEM Block: payment-methods
   Reutiliza variables --cs-* de checkout-summary
   Base: 1rem = 10px
   ================================================ */

/* ---- Grid (Mobile First: 1 columna) ---- */
.payment-methods__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
        padding-bottom: 3rem;
}

/* ---- Item (li) ---- */
.payment-methods__item {
    display: flex;
    flex-direction: column;
}

/* ---- Card — selector de método de pago ---- */
.payment-methods__card {
    display: flex !important;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem !important;
    border: 1.5px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-bg);
    cursor: pointer;
    min-height: 5.6rem;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.payment-methods__card:hover {
    border-color: var(--cs-title-color);
    box-shadow: var(--cs-shadow);
}

/* Estado seleccionado — JS añade .active a .element; :has() como refuerzo CSS */
.payment-methods__card.active,
.payment-methods__card:has(input:checked) {
    border-color: var(--cs-title-color);
    background: var(--cs-grand-bg);
    box-shadow: 0 0 0 2px rgba(29, 52, 97, 0.12);
}

/* ---- Radio input ---- */
.payment-methods__card input[type="radio"] {
    display: none;
    width: 1.8rem;
    height: 1.8rem;
    accent-color: var(--cs-title-color);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

/* ---- Label del método de pago ---- */
.payment-methods__label {
        display: flex;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--cs-product-title-color);
    cursor: pointer;
    margin: 0;
    flex: 1;
    line-height: 1.1;
}

/* ---- Panel de detalles del método seleccionado ---- */
.payment-methods__details {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 1.4rem 1.6rem;
    background: var(--cs-header-bg);
    margin-top: 0.6rem;
}

.payment-methods__details .payment_box h6 {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--cs-title-color);
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.payment-methods__details .payment_box p {
    font-size: 1.3rem;
    color: var(--cs-label-color);
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

/* ---- Desktop: 2 columnas ---- */
@media (min-width: 768px) {
    .payment-methods__grid {
        grid-template-columns: 1fr 1fr;
    }

    .payment-methods__card {
        min-height: 6.4rem;
        gap: 1.4rem;
    }

    .payment-methods__label {
        font-size: 1.4rem;
    }

    .payment-methods__details {
        padding: 1.6rem 2rem;
    }
}

/* ================================================
   CRONOMETRO — Contador regresivo de promociones
   BEM: cronometro
   Base: 1rem = 10px
   ================================================ */

:root {
    --cr-bg: #ffffff;
    --cr-radius: 1.2rem;
    --cr-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.12);
    --cr-text: var(--hdr-primary, #1d3461);
    --cr-muted: var(--hdr-text-muted, #666666);
    --cr-badge-bg: var(--newColorAmarillo, #f9b233);
    --cr-badge-text: var(--newColorPrincipal, #022272);

    /* Jerarquia tipografica: el numero domina al label ~3.2:1 en mobile */
    --cr-value-size: 3.2rem;
    --cr-label-size: 1rem;
    --cr-title-size: 1.3rem;
    --cr-gap: 1.6rem;
    --cr-pad: 1.6rem 2rem;
    --cr-unit-min: 5.6rem;

    /* Posicion del hueco reservado en el arte, medida sobre la referencia:
       borde izquierdo del bloque al 27.2% del ancho, centro vertical al 51%.
       Ajustables por promocion desde el @include con
       'estilo' => '--cr-pos-x: 22%; --cr-pos-y: 60%'. */
    --cr-pos-x: 27.15%;
    --cr-pos-y: 51.45%;
}

.cronometro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.2rem 2rem;
    background: var(--cr-bg);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow);
    padding: var(--cr-pad);
}

.cronometro--finalizado {
    display: none;
}

.cronometro__badge {
    display: inline-block;
    background: var(--cr-badge-bg);
    color: var(--cr-badge-text);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 0.8rem 1.2rem;
    border-radius: 0.6rem;
    white-space: nowrap;
}

.cronometro__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cronometro__title {
    font-size: var(--cr-title-size);
    font-weight: 600;
    color: var(--cr-muted);
    margin: 0 0 0.6rem;
    line-height: 1;
}

/* Reloj: 3 bloques, sin separadores */
.cronometro__clock {
    display: flex;
    align-items: flex-start;
    gap: var(--cr-gap);
}

.cronometro__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--cr-unit-min);
}

.cronometro__value {
    font-size: var(--cr-value-size);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--cr-text);
    /* Sin esto el bloque se sacude cada segundo al cambiar de ancho el digito */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.cronometro__label {
    font-size: var(--cr-label-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cr-muted);
    margin-top: 0.5rem;
    line-height: 1;
    white-space: nowrap;
}

/* ---- Sobre-arte ----
   El JPG que se sube desde el panel ya trae la tarjeta, la etiqueta
   "SOLO POR HOY" y los productos, y deja un hueco en blanco reservado
   para el contador. El HTML aporta solo los numeros, encajados ahi.

   <992px: la tira 14:3 mide ~80px de alto en un telefono; nada legible
   entra superpuesto, asi que cae a tarjeta apilada mordiendo el borde
   inferior de la imagen (hereda la tarjeta de .cronometro base). */
.cronometro--sobre-arte {
    position: relative;
    width: 100%;
    margin-top: -2.4rem;
    z-index: 2;
}

@media screen and (min-width: 992px) {
    .cronometro--sobre-arte {
        position: absolute;
        left: var(--cr-pos-x);
        top: var(--cr-pos-y);
        /* Sin translateX: se ancla por el borde izquierdo, que es donde
           arranca el bloque en el arte. Solo se centra en vertical. */
        transform: translateY(-50%);
        width: auto;
        max-width: none;
        margin-top: 0;

        /* Reset de la tarjeta: el arte ya la dibujo */
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        gap: 0;
        justify-content: flex-start;

        /* Tapa parte del banner; sin esto ese pedazo deja de ser clickeable. */
        pointer-events: none;
    }

    /* Titulo y numeros arrancan en la misma x, y cada unidad va centrada
       sobre su label (asi esta medido en el arte de referencia). */
    .cronometro--sobre-arte .cronometro__body {
        align-items: flex-start;
    }

    .cronometro--sobre-arte .cronometro__unit {
        min-width: 0;
    }

    /* Escalado proporcional al ancho del banner: el hueco del arte es una
       fraccion fija del ancho, con rem/px el contador se le sale al cambiar
       el viewport. Medidas tomadas de la referencia (1543px de tarjeta):
       numero 54px = 3.5%, titulo 37px = 2.4%, label 14px = 0.95%.

       vw primero, cqw despues: si el navegador no soporta cqw descarta la
       segunda declaracion y sobrevive la primera. Los valores NO pueden ir
       en las custom props --cr-*: una custom prop con unidad no soportada
       se acepta al parsear y recien falla al computar var(), dejando la
       propiedad en unset. */
    .cronometro--sobre-arte .cronometro__title {
        font-size: 2.1vw;
        font-size: 2.1cqw;
        margin: 0 0 0.87vw;
        margin: 0 0 0.87cqw;
        font-weight: 700;
        color: #1f2937;
    }

    .cronometro--sobre-arte .cronometro__clock {
        gap: 2.1vw;
        gap: 2.1cqw;
        align-items: flex-start;
    }

    .cronometro--sobre-arte .cronometro__value {
        font-size: 3.15vw;
        font-size: 3.15cqw;
        line-height: 1;
        color: #111827;
    }

    /* Margen negativo a proposito: con line-height 1 una fuente de este
       tamano deja bastante aire bajo los digitos, y en el arte el label
       va pegado al numero. */
    .cronometro--sobre-arte .cronometro__label {
        font-size: 0.92vw;
        font-size: 0.92cqw;
        margin-top: -0.09vw;
        margin-top: -0.09cqw;
        color: #6b7280;
    }
}

/* ================================================
   PROMO-BANNER — Banner dinamico de promociones (home)
   BEM: promo-banner
   Base: 1rem = 10px
   ================================================ */

.promo-banner__item {
    margin-bottom: 3.2rem;
}

.promo-banner__item:last-child {
    margin-bottom: 0;
}

.promo-banner__media {
    /* Referencia de los cqw del cronometro: mide lo mismo que la imagen,
       asi 1cqw = 1% del ancho del banner y el contador queda encajado en el
       hueco del arte a cualquier viewport. */
    container-type: inline-size;
    container-name: promo-banner;
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
}

.promo-banner__link {
    display: block;
}

.promo-banner__image {
    width: 100%;
    /* Reserva la caja antes de que cargue la imagen (evita CLS y que el
       contador absoluto flote fuera) y encuadra a 14:3 un arte con la
       proporcion equivocada en vez de romper el layout. */
    aspect-ratio: 14 / 3;
    height: auto;
    display: block;
    object-fit: cover;
}

.promo-banner__products {
    margin-top: 2.4rem;
}

.promo-banner__footer {
    text-align: center;
    margin-top: 2rem;
}

.promo-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hdr-primary, #1d3461);
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    padding: 1.2rem 3.2rem;
    border-radius: 0.6rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.promo-banner__cta:hover,
.promo-banner__cta:focus {
    background: var(--hdr-accent, #f7a800);
    color: var(--hdr-primary, #1d3461);
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .promo-banner__item {
        margin-bottom: 4.8rem;
    }

    .promo-banner__products {
        margin-top: 3.2rem;
    }
}

/* ================================================
   BENEFICIOS-BANCARIOS — Página pública de beneficios
   BEM: beneficios-bancarios
   Mobile First | Base: 1rem = 10px
   ================================================ */

:root {
    --bb-bg: #f5f7fa;
    --bb-card-bg: #ffffff;
    --bb-border: var(--hdr-border, #e5e7eb);
    --bb-radius: 1.2rem;
    --bb-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05);
    --bb-gap: 1.6rem;
}

.beneficios-bancarios {
    background: var(--bb-bg);
    padding-top: 3.2rem;
    padding-bottom: 4.8rem;
}

/* Header */
.beneficios-bancarios__header {
    text-align: center;
    margin-bottom: 2.4rem;
}

.beneficios-bancarios__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--hdr-primary);
    margin: 0 0 0.8rem;
    line-height: 1.25;
}

.beneficios-bancarios__subtitle {
    font-size: 1.4rem;
    color: var(--hdr-text-muted, #666666);
    margin: 0;
    line-height: 1.5;
}

/* Listado */
.beneficios-bancarios__list {
    display: flex;
    flex-direction: column;
    gap: var(--bb-gap);
}

.beneficios-bancarios__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bb-gap);
    background: var(--bb-card-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    padding: 2rem;
    text-align: center;
}

.beneficios-bancarios__logo {
    flex: 0 0 auto;
}

.beneficios-bancarios__logo img {
    max-width: 16rem;
    max-height: 8rem;
    object-fit: contain;
}

.beneficios-bancarios__info {
    flex: 1 1 auto;
    min-width: 0;
}

.beneficios-bancarios__entidad {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hdr-primary);
    margin: 0 0 0.4rem;
}

.beneficios-bancarios__tarjeta {
    font-size: 1.3rem;
    color: var(--hdr-text-muted, #666666);
    margin: 0 0 0.8rem;
}

.beneficios-bancarios__card-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--hdr-text, #222222);
    margin: 0 0 0.8rem;
    line-height: 1.3;
}

.beneficios-bancarios__cuotas {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--hdr-primary);
    background: var(--hdr-primary-light, #f8f9fb);
    border-radius: 1.6rem;
    padding: 0.4rem 1.2rem;
    margin: 0 0 1.2rem;
}

.beneficios-bancarios__descripcion {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--hdr-text, #222222);
}

.beneficios-bancarios__descripcion p {
    margin-bottom: 0.8rem;
}

.beneficios-bancarios__descripcion ul,
.beneficios-bancarios__descripcion ol {
    padding-left: 2rem;
    margin-bottom: 1.2rem;
    text-align: left;
}

.beneficios-bancarios__banner {
    flex: 0 0 auto;
}

.beneficios-bancarios__banner img {
    max-width: 20rem;
    max-height: 20rem;
    object-fit: contain;
}

.beneficios-bancarios__empty {
    text-align: center;
    font-size: 1.4rem;
    color: var(--hdr-text-muted, #666666);
    padding: 3.2rem 0;
}

/* ---- Responsive: Mobile First ---- */
@media screen and (min-width: 768px) {
    .beneficios-bancarios {
        padding-top: 4.8rem;
        padding-bottom: 6.4rem;
    }

    .beneficios-bancarios__title {
        font-size: 2.8rem;
    }

    .beneficios-bancarios__card {
        flex-direction: row;
        text-align: left;
        gap: 2.4rem;
        padding: 2.4rem;
    }

    .beneficios-bancarios__logo {
        flex: 0 0 16rem;
        text-align: center;
    }

    .beneficios-bancarios__cuotas {
        margin-bottom: 1.2rem;
    }

    .beneficios-bancarios__descripcion ul,
    .beneficios-bancarios__descripcion ol {
        text-align: inherit;
    }

    .beneficios-bancarios__banner {
        flex: 0 0 20rem;
        text-align: center;
    }
}

/* ================================================
   PRODUCT-VIEW CUOTAS + CALCULADORA — Beneficios bancarios en la ficha
   BEM: product-view__cuotas / calc-beneficios
   Mobile First | Base: 1rem = 10px
   ================================================ */

/* ---- Bloque informativo de cuotas ---- */
.product-view__cuotas {
    border: 1px solid var(--bb-border, #e5e7eb);
    border-radius: var(--bb-radius, 1.2rem);
    background: var(--bb-card-bg, #ffffff);
    box-shadow: var(--bb-shadow, 0 0.2rem 1rem rgba(0, 0, 0, 0.05));
    overflow: hidden;
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}

.product-view__cuotas-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 1.6rem;
    color: var(--hdr-primary);
    background: var(--hdr-primary-light, #f8f9fb);
    border-bottom: 2px solid var(--hdr-primary);
}

.product-view__cuotas-icon {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
}

.product-view__cuotas-title {
    font-size: 1.4rem;
    font-weight: 700;
}

.product-view__cuotas-body {
    padding: 0 1.6rem;
}

.product-view__cuotas-grupo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 1.4rem 0;
}

.product-view__cuotas-grupo + .product-view__cuotas-grupo {
    border-top: 1px solid var(--bb-border, #e5e7eb);
}

.product-view__cuotas-badge {
    flex: 0 0 auto;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 1.2rem;
    background: var(--hdr-primary);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.product-view__cuotas-badge-num {
    font-size: 2rem;
    font-weight: 700;
}

.product-view__cuotas-badge-txt {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin-top: 0.3rem;
    opacity: 0.9;
}

.product-view__cuotas-monto {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.product-view__cuotas-monto-label {
    font-size: 1.2rem;
    color: var(--hdr-text-muted, #666666);
}

.product-view__cuotas-monto-valor {
    font-size: 1.8rem;
    color: var(--hdr-text, #222222);
}

.product-view__cuotas-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-left: auto;
}

.product-view__cuotas-logo {
    width: 8rem;
    height: 4rem;
    background: #ffffff;
    border: 1px solid var(--bb-border, #e5e7eb);
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
}

.product-view__cuotas-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-view__cuotas-link {
    display: block;
    padding: 1.2rem 1.6rem;
    border-top: 1px solid var(--bb-border, #e5e7eb);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--hdr-primary);
    text-decoration: none;
}

.product-view__cuotas-link:hover {
    background: var(--hdr-hover-bg, #f0f2f5);
    color: var(--hdr-primary);
    text-decoration: none;
}

/* ---- Calculadora de cuotas ---- */
.calc-beneficios {
    border: 1px solid var(--bb-border, #e5e7eb);
    border-radius: var(--bb-radius, 1.2rem);
    background: var(--bb-card-bg, #ffffff);
    padding: 1.6rem;
    margin-bottom: 1.6rem;
}

.calc-beneficios__header {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2rem;
}

.calc-beneficios__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--hdr-primary);
}

.calc-beneficios__subtitle {
    font-size: 1.2rem;
    color: var(--hdr-text-muted, #666666);
    margin-top: 0.4rem;
}

.calc-beneficios__form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.calc-beneficios__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.calc-beneficios__label {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hdr-text, #222222);
    margin: 0;
}

.calc-beneficios__select {
    width: 100%;
    font-size: 1.4rem;
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--bb-border, #e5e7eb);
    border-radius: 0.8rem;
    background: #ffffff;
    color: var(--hdr-text, #222222);
}

.calc-beneficios__select:disabled {
    background: var(--hdr-search-bg, #f5f5f7);
    color: var(--hdr-text-muted, #666666);
    cursor: not-allowed;
}

.calc-beneficios__btn {
    width: 100%;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 1rem 1.6rem;
    border: 0;
    border-radius: 0.8rem;
    background: var(--hdr-primary);
    color: #ffffff;
    cursor: pointer;
}

.calc-beneficios__btn:disabled {
    background: var(--hdr-border, #e5e7eb);
    color: var(--hdr-text-muted, #666666);
    cursor: not-allowed;
}

.calc-beneficios__resultado {
    margin: 1.2rem 0 0;
    padding: 1.2rem;
    border-radius: 0.8rem;
    background: var(--hdr-primary-light, #f8f9fb);
    font-size: 1.4rem;
    color: var(--hdr-text, #222222);
}

.calc-beneficios__resultado-cuotas,
.calc-beneficios__resultado-monto {
    color: var(--hdr-primary);
}

.calc-beneficios__resultado-monto {
    font-size: 1.8rem;
}

.calc-beneficios__resultado-nota {
    display: block;
    font-size: 1.2rem;
    color: var(--hdr-text-muted, #666666);
    margin-top: 0.4rem;
}

.calc-beneficios__disclaimer {
    margin: 0.8rem 0 0;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--hdr-text-muted, #666666);
}

/* ---- Responsive: Mobile First ---- */
@media screen and (min-width: 768px) {
    .calc-beneficios__form {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .calc-beneficios__field {
        flex: 1 1 16rem;
    }

    .calc-beneficios__btn {
        width: auto;
        flex: 0 0 auto;
    }
}

/* ================================================
   PRODUCT-PURCHASE EXTRAS — adelanto de descripción + accesos rápidos
   BEM: product-purchase__extras
   Mobile First | Base: 1rem = 10px
   ================================================ */

.product-purchase__extras {
    border-top: 1px solid var(--pv-border, #e5e7eb);
    padding-top: 1.6rem;
    margin-top: 0.4rem;
}

.product-purchase__resumen {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--pv-text-muted, #666666);
    margin: 0 0 1.2rem;
}

.product-purchase__links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.product-purchase__ver-mas {
    align-self: flex-start;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--pv-primary);
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 0 0 0.2rem;
    cursor: pointer;
}

.product-purchase__ver-mas:hover {
    opacity: 0.75;
}

/* Mismas medidas que .btn-ir-carrito y .btn-cart para que los tres botones se
   lean como un grupo. */
.product-purchase__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    min-height: 48px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    background: #25d366;
    border-radius: 3rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    transition: opacity 0.15s;
}

.product-purchase__whatsapp:hover,
.product-purchase__whatsapp:focus {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
}

.product-purchase__whatsapp svg {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
}

/* El botón acompaña el ancho de "Comprar ahora" y del botón de carrito, que son
   width:100% dentro de .product-purchase__btn-group, así que no se angosta en
   desktop. */

/* ==========================================================================
   Landing de costos de envío (/costos-de-envio)
   La tabla sale del módulo de ciudades; acá solo el layout.
   ========================================================================== */
.costos-envio {
    padding: 3rem 0 5rem;
}

.costos-envio__title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.costos-envio__lead {
    font-size: 1.6rem;
    color: #4b5563;
    max-width: 70rem;
}

.costos-envio__gratis {
    display: inline-block;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 0.6rem;
    padding: 0.8rem 1.4rem;
    font-size: 1.5rem;
    margin: 0 0 2rem;
}

/* La tabla puede tener varias columnas de monto: en mobile scrollea sola en vez de
   romper el ancho de la página. */
.costos-envio__tabla-wrap {
    overflow-x: auto;
    margin-bottom: 3.5rem;
}

.costos-envio__tabla {
    width: 100%;
    min-width: 60rem;
    border-collapse: collapse;
    font-size: 1.5rem;
}

.costos-envio__tabla th,
.costos-envio__tabla td {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: right;
    white-space: nowrap;
}

.costos-envio__tabla thead th {
    background: #0d2a5c;
    color: #fff;
    font-weight: 600;
    text-align: right;
}

.costos-envio__tabla thead th:first-child,
.costos-envio__tabla tbody th {
    text-align: left;
}

.costos-envio__tabla tbody th {
    background: #f3f4f6;
    font-weight: 700;
}

.costos-envio__tabla tbody tr:hover td {
    background: #f9fafb;
}

.costos-envio__gratis-celda {
    color: #065f46;
    font-weight: 700;
}

.costos-envio__consultar {
    color: #6b7280;
    font-style: italic;
}

.costos-envio__subtitle {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1.6rem;
}

.costos-envio__cant {
    color: #6b7280;
    font-weight: 400;
    font-size: 1.4rem;
}

.costos-envio__ciudades {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 0.6rem 2rem;
}

.costos-envio__ciudades li {
    font-size: 1.5rem;
}

.costos-envio__depto {
    color: #6b7280;
    font-size: 1.3rem;
}

.costos-envio__depto::before {
    content: '· ';
}

.costos-envio__aclaraciones {
    margin-top: 3.5rem;
    padding: 2rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.8rem;
}

.costos-envio__aclaraciones p {
    font-size: 1.5rem;
    color: #4b5563;
    margin: 0;
}

.costos-envio__vacio {
    font-size: 1.6rem;
    color: #4b5563;
}