/* ================================================================
   PROMO BANNERS v4 — Sección Ofertas & Promociones
   Paleta NYXIVO: Navy #0f172a · Blue #3b82f6 · Sky #0ea5e9 · Ice #e0f2fe
   Regla: SIN violeta, SIN dorado. Familia fría uniforme.
================================================================ */

:root {
    --pb-ice:         #e0f2fe;     /* antes gold — chip descuento */
    --pb-ice-mid:     #bae6fd;     /* antes gold-light */
    --pb-blue:        #3b82f6;
    --pb-blue-light:  #60a5fa;
    --pb-sky:         #0ea5e9;
    --pb-cyan:        #22d3ee;
    --pb-radius:      18px;
}

/* ── Sección ── */
.promo-banners-section {
    position: relative;
    isolation: isolate;
    background:
        /* Glow izquierdo — azul cálido */
        radial-gradient(ellipse 55% 65% at 5% 55%,  rgba(59,130,246,.14) 0%, transparent 58%),
        /* Glow derecho — sky frío */
        radial-gradient(ellipse 48% 55% at 95% 38%, rgba(14,165,233,.14) 0%, transparent 52%),
        /* Glow central inferior — profundidad */
        radial-gradient(ellipse 80% 45% at 50% 110%, rgba(37,99,235,.08) 0%, transparent 60%),
        /* Micro-grid 40px — sensación tech */
        repeating-linear-gradient(
            0deg,
            rgba(59,130,246,.025) 0px, rgba(59,130,246,.025) 1px,
            transparent 1px, transparent 40px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(59,130,246,.018) 0px, rgba(59,130,246,.018) 1px,
            transparent 1px, transparent 40px
        ),
        #0f172a;   /* mismo base que el body — se funde con la página */
    padding: 4rem 0;   /* alineado con --tech-spacing-3xl del resto de tech-section */
    overflow: hidden;
}

/* Fade superior — fusión suave con body */
.promo-banners-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 96px;
    background: linear-gradient(180deg, #0f172a 0%, transparent 100%);
    pointer-events: none; z-index: 1;
}

/* Fade inferior */
.promo-banners-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 96px;
    background: linear-gradient(0deg, #0f172a 0%, transparent 100%);
    pointer-events: none; z-index: 1;
}

/* Topline — eliminado: corte visual abruptor sin equivalente en otras secciones */
.pb-topline { display: none; }

/* ── Header — centrado como todos los tech-section-header de la página ── */
.pb-section-header {
    text-align: center;
    margin-bottom: 2.4rem;
    position: relative;
    z-index: 3;
}
.pb-nav-arrows {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.pb-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(59,130,246,.38);
    color: var(--pb-blue-light);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .36rem 1rem;
    border-radius: 20px;
    margin: 0 auto .7rem;   /* centrado horizontal cuando el padre es text-align:center */
    box-shadow:
        0 0 22px rgba(59,130,246,.20),
        0 0 60px rgba(59,130,246,.08),
        inset 0 1px 0 rgba(255,255,255,.10);
    transition: box-shadow .4s ease;
}
.pb-section-eyebrow:has(.pb-live-dot) {
    box-shadow:
        0 0 28px rgba(59,130,246,.28),
        0 0 70px rgba(59,130,246,.10),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.pb-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    animation: pbLivePulse 2s ease-in-out infinite;
}
@keyframes pbLivePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); transform: scale(1); }
    50%      { box-shadow: 0 0 0 5px rgba(239,68,68,0); transform: scale(1.15); }
}

.pb-section-title {
    font-size: clamp(2rem, 4.2vw, 2.8rem);
    font-weight: 900;   /* alineado con tech-section-title del resto de la página */
    color: #fff; margin: 0; line-height: 1.15;
    letter-spacing: -.03em;
}
/* Operador "&" — tipografía refinada, no compite con el título */
.pb-amp {
    font-style: normal;
    font-weight: 300;
    font-size: 2rem;
    color: rgba(255,255,255,.28);
    letter-spacing: 0;
    vertical-align: baseline;
}
.pb-section-title span {
    background: linear-gradient(90deg,
        var(--pb-blue-light) 10%,
        var(--pb-cyan)       40%,
        var(--pb-ice)        55%,
        var(--pb-cyan)       70%,
        var(--pb-blue-light) 90%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pbTitleShimmer 5s linear infinite;
}
@keyframes pbTitleShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
.pb-section-subtitle {
    font-size: 1rem;            /* igual que tech-section-subtitle */
    font-weight: 500;
    color: rgba(255,255,255,.68);
    margin: .5rem auto 0;
    max-width: 540px;           /* limita el ancho del subtítulo centrado */
    line-height: 1.55;
}

.pb-nav-arrows { display: flex; gap: .5rem; }
.pb-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(96,165,250,.30);
    background: rgba(59,130,246,.08);
    color: var(--pb-blue-light);
    font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; outline: none;
    /* ⚠️ Nunca "transition: all" — evalúa TODAS las propiedades cada frame */
    transition: background .2s ease, color .2s ease,
                border-color .2s ease, transform .2s ease,
                box-shadow .2s ease;
}
.pb-arrow:hover {
    background: var(--pb-blue); color: #fff;
    border-color: var(--pb-blue); transform: scale(1.08);
    box-shadow: 0 0 20px rgba(59,130,246,.40), 0 4px 12px rgba(0,0,0,.25);
}
.pb-arrow:focus-visible {
    outline: 2px solid var(--pb-blue-light);
    outline-offset: 3px;
}
.pb-arrow.swiper-button-disabled { opacity: .28; pointer-events: none; }

/* ── Swiper ── */
.pb-swiper-wrap { position: relative; z-index: 3; }
.pb-swiper { overflow: visible !important; padding-bottom: 2.4rem !important; }

/* ════════════════════════════════════════════
   CARD — contraste claro vs sección (#07101e)
   Card base: #101f3c  →  visiblemente más clara
════════════════════════════════════════════ */
.pb-card {
    position: relative;
    z-index: 2;
    border-radius: var(--pb-radius);
    overflow: hidden;
    height: 292px;
    color: #fff;
    text-decoration: none;

    background: linear-gradient(145deg, #0d1b36 0%, #162e5e 38%, #0d1b36 70%, #060b18 100%);

    border: 1px solid color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 48%, rgba(255,255,255,.08));
    box-shadow:
        0 2px 12px rgba(0,0,0,.40),
        0 10px 36px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Spring suave: overshoot mínimo en hover, sin brusquedad */
    transition: transform .42s cubic-bezier(.34,1.4,.64,1),
                box-shadow .38s cubic-bezier(.4,0,.2,1),
                border-color .30s ease;
    cursor: pointer;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════
   UNIVERSOS DE COLOR POR TIPO — alineados al design system de la página
   Oferta = Amber  (#f59e0b) — igual que tech-section-icon--ofertas
   Cupón  = Blue   (#60a5fa) — acento primario de la página
   Misión = Emerald (#34d399) — igual que tech-section-icon--best
   Hardcoded (sin color-mix) → compatible con Safari ≤16.1
══════════════════════════════════════════════════════════════════ */

/* OFERTA — Universo Amber: urgencia · deal · cálido dorado sobre navy */
.pb-card--oferta {
    background:
        linear-gradient(90deg, rgba(251,191,36,.95) 0px, rgba(245,158,11,.58) 4px, transparent 4px),
        radial-gradient(ellipse 82% 120% at 92% 42%, rgba(161,98,7,.62)   0%, transparent 56%),
        radial-gradient(ellipse 58% 68% at  6%  8%, rgba(120,53,15,.38)   0%, transparent 54%),
        radial-gradient(ellipse 62% 58% at  2% 100%, rgba(161,98,7,.22)  0%, transparent 58%),
        linear-gradient(148deg, #110900 0%, #2d1800 36%, #1a0e00 68%, #080400 100%);
}

/* CUPÓN — Universo Blue: acento primario de la página */
.pb-card--cupon {
    background:
        linear-gradient(90deg, rgba(96,165,250,.95) 0px, rgba(59,130,246,.55) 4px, transparent 4px),
        radial-gradient(ellipse 82% 120% at 92% 42%, rgba(29,78,216,.58)   0%, transparent 56%),
        radial-gradient(ellipse 58% 68% at  6%  8%, rgba(30,64,175,.33)    0%, transparent 54%),
        radial-gradient(ellipse 62% 58% at  2% 100%, rgba(29,78,216,.20)  0%, transparent 58%),
        linear-gradient(148deg, #040c1a 0%, #0c1f4a 36%, #071530 68%, #030a18 100%);
}

/* MISIÓN — Universo Emerald: logro · XP · gamificación */
.pb-card--mision {
    background:
        linear-gradient(90deg, rgba(52,211,153,.95) 0px, rgba(16,185,129,.58) 4px, transparent 4px),
        radial-gradient(ellipse 82% 120% at 92% 42%, rgba(4,120,87,.62)   0%, transparent 56%),
        radial-gradient(ellipse 58% 68% at  6%  8%, rgba(6,95,70,.38)     0%, transparent 54%),
        radial-gradient(ellipse 62% 58% at  2% 100%, rgba(4,120,87,.22)  0%, transparent 58%),
        linear-gradient(148deg, #020e09 0%, #072b1c 36%, #041a11 68%, #020a06 100%);
}

/* Bordes hardcoded por tipo */
.pb-card--oferta { border-color: rgba(245,158,11,.52); }
.pb-card--cupon  { border-color: rgba(59,130,246,.50); }
.pb-card--mision { border-color: rgba(16,185,129,.50); }

/* Hover border por tipo — más saturado */
.pb-card--oferta:hover { border-color: rgba(251,191,36,.82); }
.pb-card--cupon:hover  { border-color: rgba(96,165,250,.75); }
.pb-card--mision:hover { border-color: rgba(52,211,153,.80); }

/* Overlay más liviano en no-img — deja respirar el gradiente de tipo */
.pb-card--no-img .pb-card-overlay {
    background: linear-gradient(
        125deg,
        rgba(4,8,20,.45) 0%,
        rgba(4,8,20,.18) 48%,
        rgba(4,8,20,.00) 100%
    );
}

/* Promueve a GPU layer solo cuando el contenedor está activo
   Evita N capas permanentes para N cards en pantalla           */
.pb-swiper-wrap:hover .pb-card,
.pb-swiper-wrap:focus-within .pb-card {
    will-change: transform;
}

/* ── Dimming controlado por JS (applyDimming) via clase .pb-dim ──────────────
   Desktop (≥768px): los 3 slides del grupo activo = 100%, el resto = dim.
   Mobile  (<768px): solo el slide activo = 100%, el resto = dim.
   Curva: cubic-bezier(.4,0,.2,1) = Material Design "standard easing"
   — acelera rápido, desacelera suave. Sincronizado con speed:680ms JS. */
.pb-swiper .swiper-slide {
    transition: opacity   .55s cubic-bezier(.4,0,.2,1),
                filter    .55s cubic-bezier(.4,0,.2,1),
                transform .55s cubic-bezier(.4,0,.2,1);
    /* Por defecto: visible (JS añade pb-dim a los que quedan fuera del grupo) */
    opacity  : 1;
    filter   : none;
    transform: scale(1);
}

/* Slides fuera del grupo visible — JS aplica esta clase */
.pb-swiper .swiper-slide.pb-dim {
    opacity  : .32;
    filter   : brightness(.45) blur(1px);
    transform: scale(.91);
}


/* Accesibilidad — anillo visible con teclado */
.pb-card:focus-visible {
    outline: 2px solid var(--pb-blue-light);
    outline-offset: 3px;
}

.pb-card:hover {
    transform: translateY(-6px) scale(1.018);    /* más energía — perceptible */
    border-color: color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 72%, transparent);
    box-shadow:
        0 24px 56px rgba(0,0,0,.55),
        0 0 44px 4px color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 28%, transparent),
        0 0 0 1.5px color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 60%, transparent),
        inset 0 1px 0 rgba(255,255,255,.12);
}

/* Línea de acento superior — 2px con halo difuso */
.pb-card::before {
    content: '';
    position: absolute;
    top: 0; left: 6%; right: 6%; height: 2px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 80%, white) 50%,
        transparent);
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 50%, transparent);
    z-index: 5; pointer-events: none;
    border-radius: 0 0 2px 2px;
}
/* Horizon glow inferior — reflejo sutil del acento */
.pb-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 35%, transparent) 50%,
        transparent);
    z-index: 5; pointer-events: none;
    opacity: .65;
}

/* Imagen de fondo */
.pb-card-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform .5s ease;
}
.pb-card:hover .pb-card-img { transform: scale(1.04); }

/* Overlay — no tan oscuro para dejar ver el gradiente */
.pb-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        120deg,
        rgba(6,10,24,.58) 0%,
        rgba(6,10,24,.28) 50%,
        rgba(6,10,24,.02) 100%
    );
}

/* Sin imagen */
.pb-card--no-img .pb-card-bg { position: absolute; inset: 0; }
.pb-card--no-img .pb-card-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(130deg, rgba(0,0,0,.35) 0%, transparent 55%);
}

/* Brillo diagonal hover
   ⚠️ transform en lugar de left — compositor only, cero layout/paint
   translateX(-120%) × 50% ancho = -60% del card (inicio)
   translateX(240%)  × 50% ancho = 120% del card (fin)   */
.pb-card-shine {
    position: absolute;
    top: -60%; left: 0;
    width: 50%; height: 220%;
    transform: translateX(-120%);
    background: linear-gradient(105deg,
        transparent 36%, rgba(255,255,255,.072) 50%, transparent 64%);
    transition: transform .48s ease;
    pointer-events: none;
}
.pb-card:hover .pb-card-shine { transform: translateX(240%); }

/* ── Ícono decorativo de fondo — solo en cards sin imagen ── */
.pb-card-decor {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 7.5rem;
    color: var(--pb-accent, rgba(255,255,255,.5));
    opacity: .065;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    filter: blur(1.5px);
    transition: opacity .4s ease;
}
.pb-card:hover .pb-card-decor { opacity: .10; }

/* ── Body de la card ── */
.pb-card-body {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 1.45rem 1.3rem 1.6rem;  /* izq más grande por la stripe */
    z-index: 2;
}

.pb-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Badge — efecto glass sutil: inner glow + drop shadow mínimo */
.pb-badge {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .30rem .76rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    white-space: nowrap;
    /* Glass lift — profundidad sin backdrop-filter */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
                0 1px 6px rgba(0,0,0,.22);
}
/* Oferta → amber-200 (#fde68a) — dorado cálido, igual que la sección "Ofertas Especiales" */
.pb-badge--oferta {
    background: rgba(245,158,11,.18);
    border-color: rgba(245,158,11,.48);
    color: #fde68a;
    box-shadow: inset 0 1px 0 rgba(253,230,138,.20), 0 0 12px rgba(245,158,11,.18), 0 1px 6px rgba(0,0,0,.22);
}
/* Cupón → blue-200 (#bfdbfe) — acento primario de la página */
.pb-badge--cupon {
    background: rgba(59,130,246,.16);
    border-color: rgba(59,130,246,.44);
    color: #bfdbfe;
    box-shadow: inset 0 1px 0 rgba(191,219,254,.16), 0 0 10px rgba(59,130,246,.12), 0 1px 6px rgba(0,0,0,.22);
}
/* Misión → emerald-200 (#a7f3d0) — igual que tech-section-icon--best */
.pb-badge--mision {
    background: rgba(16,185,129,.15);
    border-color: rgba(16,185,129,.44);
    color: #a7f3d0;
    box-shadow: inset 0 1px 0 rgba(167,243,208,.18), 0 0 10px rgba(16,185,129,.14), 0 1px 6px rgba(0,0,0,.22);
}

/* Chip descuento — contenedor con fondo de acento + texto gradiente shimmer  */
.pb-chip-wrap {
    display: inline-flex;
    align-items: center;
    /* Fondo dinámico por tipo de banner */
    background: color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 30%, transparent);
    border-radius: 10px;
    padding: .12rem .45rem .12rem .32rem;
    box-shadow: 0 0 16px color-mix(in srgb, var(--pb-accent, var(--pb-blue)) 22%, transparent),
                inset 0 1px 0 rgba(255,255,255,.09);
}
/* Fallback sin color-mix — fondo azul estático */
@supports not (color-mix(in srgb, red 50%, blue)) {
    .pb-chip-wrap {
        background: rgba(59,130,246,.10);
        border-color: rgba(59,130,246,.25);
        box-shadow: none;
    }
}

.pb-discount-chip {
    font-size: 1.48rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    /* Adapta al tipo: --pb-accent es rose en oferta, sky en cupón, green en misión */
    background: linear-gradient(90deg,
        var(--pb-accent, var(--pb-blue-light)) 0%,
        color-mix(in srgb, var(--pb-accent, var(--pb-blue-light)) 80%, #fff) 50%,
        var(--pb-accent, var(--pb-blue-light)) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pbDiscountShimmer 3.2s linear infinite;
}
/* Fallback sin color-mix (Safari ≤16.1) */
@supports not (color-mix(in srgb, red 50%, blue)) {
    .pb-discount-chip {
        background: none;
        -webkit-text-fill-color: var(--pb-accent, var(--pb-blue-light));
        animation: none;
    }
}
@keyframes pbDiscountShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Zona central */
.pb-card-center {
    flex: 1; display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: .5rem;
    gap: .40rem;
}

.pb-card-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.22;
    text-shadow: 0 2px 16px rgba(0,0,0,.75);
    max-width: 88%;   /* antes 72% — se reservaba espacio para el countdown absoluto, ya no necesario */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-card-subtitle {
    font-size: .80rem;
    color: rgba(255,255,255,.65);
    margin: 0;
    max-width: 80%;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── CTA por tipo ── */
.pb-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    padding: .46rem 1.05rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.14);
    cursor: pointer;
    transition: transform .18s, filter .18s, box-shadow .18s;
    text-decoration: none;
    width: fit-content;
    letter-spacing: .030em;
    /* Oferta: amber-600 → amber-700 · contraste #fff = 4.8:1 ✅ · coincide con tech-section--ofertas */
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #fff;
    box-shadow: 0 2px 14px rgba(217,119,6,.42);
    padding: .52rem 1.18rem;
}
.pb-cta:hover {
    transform: translateX(3px);
    filter: brightness(1.15);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 5px 22px rgba(217,119,6,.58);
}
.pb-cta:focus-visible { outline: 2px solid var(--pb-blue-light); outline-offset: 3px; }
.pb-cta i { font-size: .70rem; transition: transform .20s cubic-bezier(.34,1.56,.64,1); }
.pb-cta:hover i { transform: translateX(4px) scale(1.22); }   /* spring + scale en hover */

/* Cupón: blue-800 → blue-600 · contraste #fff = 8.8:1 / 5.0:1 ✅ */
.pb-cta--cupon  {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    box-shadow: 0 2px 12px rgba(30,58,138,.35);
}
.pb-cta--cupon:hover  { color: #fff; box-shadow: 0 4px 20px rgba(30,58,138,.50); }
/* Misión: emerald-700 → emerald-800 · alineado con tech-section-icon--best */
.pb-cta--mision {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    box-shadow: 0 2px 12px rgba(4,120,87,.38);
}
.pb-cta--mision:hover { color: #fff; box-shadow: 0 4px 20px rgba(4,120,87,.55); }

/* ── Countdown — en flujo dentro de .pb-card-top (flex row) ── */
.pb-countdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .18rem;
    flex-shrink: 0;
    pointer-events: none;
}
/* "EXPIRA EN" — contexto para el cliente */
.pb-countdown-header {
    font-size: .48rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255,255,255,.58);
    text-transform: uppercase;
}
.pb-countdown-units {
    display: flex;
    gap: .22rem;
}
.pb-countdown-unit {
    background: rgba(0,0,0,.52);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    padding: .24rem .32rem;
    text-align: center;
    min-width: 30px;
    transition: border-color .3s, background .3s;
}
.pb-countdown-num {
    font-size: .78rem; font-weight: 800;
    /* Color adapta al tipo: rose en oferta, sky en cupón, green en misión */
    color: var(--pb-accent, var(--pb-blue-light));
    display: block; line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.pb-countdown-lbl {
    font-size: .48rem;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: block; margin-top: 1px;
}

/* Urgente < 24 h */
.pb-countdown--urgent .pb-countdown-unit {
    background: rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.45);
    animation: pbUrgentPulse 1s ease-in-out infinite;
}
.pb-countdown--urgent .pb-countdown-num { color: #fca5a5; }
@keyframes pbUrgentPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
    50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* ── Paginación Swiper ── */
.pb-pagination { margin-top: 1.2rem !important; padding-bottom: .5rem !important; z-index: 3; position: relative; }
.pb-pagination .swiper-pagination-bullet {
    width: 6px; height: 6px;
    background: rgba(255,255,255,.35);
    opacity: 1; transition: all .25s;
}
.pb-pagination .swiper-pagination-bullet-active {
    width: 26px; height: 8px;    /* pill más prominente — se ve de un vistazo */
    border-radius: 4px;
    background: var(--pb-blue-light);
    box-shadow: 0 0 10px rgba(96,165,250,.45);
}

/* ── Skeleton loading — anatomía de card ── */
.pb-skeleton {
    height: 292px;
    border-radius: var(--pb-radius);
    background: linear-gradient(
        90deg,
        #0d1a35 0%,
        #162c50 25%,
        #1a3460 50%,
        #162c50 75%,
        #0d1a35 100%
    );
    background-size: 300% 100%;
    animation: pbSkeletonShimmer 1.8s ease-in-out infinite;
    border: 1px solid rgba(59,130,246,.12);
    position: relative;
    overflow: hidden;
}
@keyframes pbSkeletonShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
/* Badge ghost */
.pb-skeleton-badge {
    position: absolute;
    top: 1.15rem; left: 1.35rem;
    width: 76px; height: 22px;
    border-radius: 20px;
    background: rgba(96,165,250,.10);
    border: 1px solid rgba(96,165,250,.16);
}
/* Contenido inferior ghost */
.pb-skeleton-body {
    position: absolute;
    bottom: 1.15rem; left: 1.35rem;
    display: flex; flex-direction: column; gap: .38rem;
}
.pb-skeleton-title {
    width: 155px; height: 15px;
    border-radius: 6px;
    background: rgba(255,255,255,.09);
}
.pb-skeleton-title-2 {
    width: 110px; height: 15px;
    border-radius: 6px;
    background: rgba(255,255,255,.06);
}
.pb-skeleton-sub {
    width: 130px; height: 11px;
    border-radius: 6px;
    background: rgba(255,255,255,.05);
    margin-top: .1rem;
}
.pb-skeleton-cta {
    width: 90px; height: 28px;
    border-radius: 30px;
    background: rgba(59,130,246,.13);
    border: 1px solid rgba(59,130,246,.18);
    margin-top: .15rem;
}

/* ── Eyebrow loading spinner ── */
.pb-eyebrow-spin {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(96,165,250,.35);
    border-top-color: var(--pb-blue-light);
    animation: pbEyebrowSpin .75s linear infinite;
    flex-shrink: 0;
}
@keyframes pbEyebrowSpin {
    to { transform: rotate(360deg); }
}

/* ── Envío Gratis badge — blue, coherente con acento primario de la página ── */
.pb-shipping-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 800;
    padding: .28rem .72rem;
    border-radius: 20px;
    background: rgba(59,130,246,.15);
    border: 1px solid rgba(59,130,246,.42);
    color: #bfdbfe;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — sincronizado con Swiper JS
   ┌─────────────┬──────────────┬──────────────────────────────────┐
   │  < 768px    │   ≥ 768px    │   ≥ 1200px                       │
   │  1 card     │   3 cards    │   3 cards + peek mayor            │
   └─────────────┴──────────────┴──────────────────────────────────┘
═══════════════════════════════════════════════════════════════════ */

/* ── 768–1199px: 3 cards en container Bootstrap md/lg (720–1140px) ── */
@media (max-width: 1199px) {
    .promo-banners-section    { padding: 3.5rem 0; }
    .pb-section-title         { font-size: 1.9rem; letter-spacing: -.025em; }
    .pb-card                  { height: 252px; border-radius: 14px; }
    .pb-card-decor            { font-size: 5rem; }
    .pb-card-body             { padding: 1rem 1.1rem 1rem 1.25rem; }
    .pb-card-title            { font-size: 1.1rem; max-width: 90%; }
    .pb-card-subtitle         { font-size: .74rem; max-width: 90%; }
    .pb-discount-chip         { font-size: 1.22rem; }
    .pb-skeleton              { height: 252px; }
}

/* ── < 768px: 1 card móvil — ocultar flechas (gestos táctiles) ───── */
@media (max-width: 767px) {
    .promo-banners-section    { padding: 2.5rem 0; }
    .pb-section-title         { font-size: 1.7rem; letter-spacing: -.02em; }
    .pb-section-subtitle      { display: none; }
    .pb-nav-arrows            { display: none; }
    .pb-countdown             { display: none; }
    .pb-card                  { height: 210px; border-radius: 13px;
                                backdrop-filter: none; -webkit-backdrop-filter: none;
                                will-change: auto; }
    .pb-card-decor            { font-size: 4.5rem; }
    .pb-card-body             { padding: .9rem 1rem .9rem 1.1rem; }
    .pb-card-title            { font-size: 1rem; max-width: 90%; }
    .pb-card-subtitle         { font-size: .73rem; max-width: 90%; }
    .pb-discount-chip         { font-size: 1.15rem; }
    .pb-cta                   { font-size: .72rem; padding: .42rem .92rem; }
    .pb-skeleton              { height: 210px; }
}

/* ── < 480px: móvil estándar ─────────────────────────────────────── */
@media (max-width: 479px) {
    .promo-banners-section    { padding: 2rem 0; }
    .pb-section-title         { font-size: 1.46rem; }
    .pb-section-eyebrow       { font-size: .66rem; padding: .28rem .8rem; }
    .pb-card                  { height: 190px; border-radius: 12px; }
    .pb-card-decor            { font-size: 3.8rem; }
    .pb-card-body             { padding: .85rem .9rem .85rem 1rem; }
    .pb-card-title            { font-size: .95rem; max-width: 92%; }
    .pb-card-subtitle         { display: none; }
    .pb-badge                 { font-size: .58rem; padding: .24rem .6rem; }
    .pb-discount-chip         { font-size: 1.05rem; }
    .pb-cta                   { font-size: .68rem; padding: .38rem .85rem; }
    .pb-skeleton              { height: 190px; }
}

/* ── < 375px: móvil pequeño ─────────────────────────────────────── */
@media (max-width: 374px) {
    .promo-banners-section    { padding: 1.75rem 0; }
    .pb-section-title         { font-size: 1.28rem; }
    .pb-card                  { height: 170px; border-radius: 10px; }
    .pb-card-decor            { display: none; }
    .pb-card-body             { padding: .75rem .8rem; }
    .pb-card-title            { font-size: .88rem; }
    .pb-badge                 { font-size: .55rem; padding: .2rem .5rem; }
    .pb-cta                   { font-size: .65rem; padding: .34rem .75rem; }
    .pb-skeleton              { height: 170px; }
}

/* Feedback táctil — solo en dispositivos sin cursor (móvil/tablet) */
@media (hover: none) and (pointer: coarse) {
    .pb-card:active {
        transform: scale(.96);
        opacity: .80;
        transition: transform .10s ease, opacity .10s ease;
    }
}

/* ── Staggered entrance — reemplaza skeleton con cards reales ───────────────
   Fase 1 (0→60%): sube y deblura — el contenido "materializa"
   Fase 2 (60→100%): pequeño overshoot de escala → sensación de peso           */
.pb-slide-enter {
    animation: pbSlideEnter .70s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pbSlideEnter {
    0%   { opacity: 0; transform: translateY(32px) scale(.94); filter: blur(6px);  }
    60%  { opacity: 1;                                          filter: blur(0);    }
    100% { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0);    }
}

/* ── prefers-reduced-motion — WCAG 2.1 §2.3.3 ─────────────────────────────
   Usuarios con vestibular disorders, epilepsia o configuración de SO.
   Regla: detener decorativas, mantener feedback de estado (transiciones cortas).
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Animaciones puramente decorativas → off */
    .pb-topline::after,
    .pb-live-dot,
    .pb-section-title span,
    .pb-discount-chip,
    .pb-skeleton,
    .pb-eyebrow-spin {
        animation: none;
    }

    /* Countdown urgente — el pulso puede ser molesto; mantener color */
    .pb-countdown--urgent .pb-countdown-unit {
        animation: none;
    }

    /* Shine — ocultar para evitar flash de movimiento */
    .pb-card-shine {
        display: none;
    }

    /* Imagen de fondo — sin zoom en hover */
    .pb-card:hover .pb-card-img {
        transform: none;
    }

    /* Transiciones de estado → instantáneas (feedback visual sin movimiento) */
    .pb-card,
    .pb-cta,
    .pb-arrow,
    .pb-card-img,
    .pb-discount-chip,
    .pb-swiper .swiper-slide {
        transition-duration: .01ms !important;
    }

    /* Shimmer del título — dejar gradiente estático */
    .pb-section-title span {
        background-position: 0% center;
    }

    /* Entrada de cards — aparecen directo sin movimiento */
    .pb-slide-enter {
        animation: none;
        opacity: 1;
        transform: none;
    }
}