/* ═══════════════════════════════════════════════════════════════
   NATURE'S GREEN — Sistema de Promociones "Dopamínico" · promo.css
   Badges dorados, sellos gigantes (2X1 ¡LLEVA YA!), precios,
   banner de carrito y resaltado de tarjetas en promoción.
   Se carga DESPUÉS del CSS de cada módulo para poder sobreescribir.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ngp-gold-0: #fffbe0;
    --ngp-gold-1: #ffe27a;
    --ngp-gold-2: #ffc933;
    --ngp-gold-3: #f5a300;
    --ngp-gold-4: #c47a00;
    --ngp-gold-5: #7a4700;
    --ngp-gold-6: #3a1f00;
    --ngp-red: #e5484d;
    --ngp-font: 'Outfit', 'DM Sans', -apple-system, sans-serif;
}

/* ══════════════════════════════════════════════
   1. BADGE DORADO (pastilla con brillo animado)
   ══════════════════════════════════════════════ */
.ngp-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 999px;
    font-family: var(--ngp-font);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #3a2500;
    background: linear-gradient(110deg, #c47a00 0%, #ffd54a 22%, #fff6c4 42%, #ffd54a 58%, #c47a00 100%);
    background-size: 250% 100%;
    border: 1px solid rgba(255, 246, 196, .9);
    box-shadow:
        0 0 0 2px rgba(255, 201, 51, .25),
        0 4px 16px rgba(240, 165, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .8);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    overflow: hidden;
    z-index: 30;
    align-self: flex-start;
    /* El brillo lo aporta ngpSweep (transform, composited). Sin animación de
       background-position para no repintar el badge en cada frame (H-24). */
    animation: ngpBadgePulse 1.8s ease-in-out infinite;
}

/* En la fila de etiquetas del producto, centrado vertical */
.prod-tags-row .ngp-badge {
    align-self: center;
}

.ngp-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent);
    transform: skewX(-20deg);
    animation: ngpSweep 2.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes ngpBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Antes animaba `left`; ahora transform (recorrido 240% del badge sobre un
   pseudo de 45% → 533.3% de su propio ancho, H-24). */
@keyframes ngpSweep {
    0%, 55% { transform: translate3d(0, 0, 0) skewX(-20deg); }
    100%    { transform: translate3d(533.3%, 0, 0) skewX(-20deg); }
}

/* ══════════════════════════════════════════════
   2. SELLO GIGANTE — "2X1 ¡LLEVA YA!"
   ══════════════════════════════════════════════ */
.ngp-burst {
    position: absolute;
    z-index: 25;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    isolation: isolate;
}

.ngp-burst--tr { top: 12px;    right: 16px; --ngp-rot: 8deg; }
.ngp-burst--tl { top: 12px;    left: 16px;  --ngp-rot: -8deg; }
.ngp-burst--br { bottom: 12px; right: 16px; --ngp-rot: -6deg; }
.ngp-burst--bl { bottom: 12px; left: 16px;  --ngp-rot: 6deg; }

.ngp-burst--inline {
    position: relative;
    inset: auto;
    align-self: flex-start;
    width: fit-content;
    padding: 0;
    margin: 0 0 16px;
    --ngp-rot: -3deg;
}

/* Rayos giratorios detrás del sello */
.ngp-burst__rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 201, 51, .32) 0deg 6deg,
            rgba(255, 201, 51, 0) 6deg 18deg);
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 72%);
    mask-image: radial-gradient(circle, #000 28%, transparent 72%);
    animation: ngpSpin 16s linear infinite;
    z-index: -1;
    opacity: .9;
}

.ngp-burst__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(var(--ngp-rot, -6deg));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
    animation:
        ngpPop .7s cubic-bezier(.18, 1.7, .4, 1) both,
        ngpWobble 3.4s ease-in-out .7s infinite;
}

.ngp-burst__main {
    font-family: var(--ngp-font);
    font-weight: 900;
    font-size: clamp(2.4rem, 5.4vw, 4.4rem);
    line-height: .92;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #ffd54a;
    text-shadow: 0 2px 0 #5c3300, 0 0 18px rgba(255, 190, 0, .7);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ngp-burst__main {
        background: linear-gradient(180deg,
                #fffbe0 0%, #ffe27a 24%, #ffb700 52%, #fff2b0 66%, #e08a00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-stroke: 2px #5c3300;
        paint-order: stroke fill;
        text-shadow: none;
    }
}

.ngp-burst__sub {
    margin-top: 3px;
    padding: 3px 13px 4px;
    border-radius: 8px;
    font-family: var(--ngp-font);
    font-weight: 800;
    font-size: clamp(.9rem, 1.7vw, 1.35rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffd54a;
    background: linear-gradient(180deg, #3a1f00, #1e0f00);
    border: 1.5px solid rgba(255, 201, 51, .75);
    box-shadow:
        0 0 16px rgba(255, 180, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    text-shadow: 0 0 10px rgba(255, 201, 51, .6);
}

/* Destellos */
.ngp-spark {
    position: absolute;
    width: 14px;
    height: 14px;
    background: linear-gradient(180deg, #fff8c4, #ffc933);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    filter: drop-shadow(0 0 6px rgba(255, 201, 51, .9));
    animation: ngpTwinkle 1.6s ease-in-out infinite;
}

.ngp-spark--a { top: -4%; left: -12%; animation-delay: 0s; }
.ngp-spark--b { top: 22%; right: -14%; width: 10px; height: 10px; animation-delay: .5s; }
.ngp-spark--c { bottom: -8%; left: 6%; width: 8px; height: 8px; animation-delay: 1s; }

/* Tamaños */
.ngp-burst--sm .ngp-burst__main {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    -webkit-text-stroke-width: 1.4px;
}

.ngp-burst--sm .ngp-burst__sub {
    font-size: clamp(.62rem, 1vw, .82rem);
    padding: 2px 9px 3px;
}

.ngp-burst--mini { padding: 3px; }

.ngp-burst--mini .ngp-burst__main {
    font-size: 1.05rem;
    -webkit-text-stroke-width: 1px;
}

.ngp-burst--mini .ngp-burst__sub {
    font-size: .52rem;
    padding: 1px 6px 2px;
    margin-top: 1px;
    border-width: 1px;
}

.ngp-burst--mini .ngp-spark { width: 8px; height: 8px; }
.ngp-burst--mini .ngp-spark--b { width: 6px; height: 6px; }

@keyframes ngpPop {
    0%   { opacity: 0; transform: rotate(var(--ngp-rot, -6deg)) scale(.3); }
    60%  { opacity: 1; transform: rotate(var(--ngp-rot, -6deg)) scale(1.14); }
    100% { opacity: 1; transform: rotate(var(--ngp-rot, -6deg)) scale(1); }
}

@keyframes ngpWobble {
    0%, 100% { transform: rotate(var(--ngp-rot, -6deg)); }
    50%      { transform: rotate(calc(var(--ngp-rot, -6deg) - 3.5deg)); }
}

@keyframes ngpSway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

@keyframes ngpSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ngpTwinkle {
    0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* ══════════════════════════════════════════════
   3. TARJETA EN PROMOCIÓN (borde dorado latiendo)
   ══════════════════════════════════════════════ */
.ngp-card--promo {
    box-shadow:
        0 0 0 2px rgba(255, 201, 51, .8),
        0 10px 46px rgba(224, 138, 0, .38),
        0 4px 20px rgba(0, 0, 0, .25) !important;
}

.ngp-card--promo::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid rgba(255, 213, 74, .55);
    pointer-events: none;
    animation: ngpBorderPulse 2s ease-in-out infinite;
    z-index: 24;
}

@keyframes ngpBorderPulse {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* ══════════════════════════════════════════════
   4. PRECIOS
   ══════════════════════════════════════════════ */
.ngp-price-old {
    text-decoration: line-through;
    opacity: .62;
    font-weight: 500;
    font-size: .72em;
    margin-right: 8px;
}

.ngp-price-now {
    color: #d98200 !important;
    font-weight: 800;
}

/* Sobre fondos oscuros (hero, tarjetas con overlay) brillamos más */
.ng-cnt .ngp-price-now,
.cat-cnt .ngp-price-now,
.prod-cnt--r .ngp-price-now,
.car-promo-banner .ngp-price-now {
    color: #ffc933 !important;
    text-shadow: 0 0 14px rgba(255, 180, 0, .55);
}

.ngp-price-pair {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    vertical-align: middle;
    font-family: var(--ngp-font);
    font-size: .55em;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #3a2500;
    background: linear-gradient(110deg, #c47a00, #ffd54a 40%, #fff6c4 60%, #c47a00);
    box-shadow: 0 0 12px rgba(255, 180, 0, .6);
    animation: ngpBadgePulse 1.8s ease-in-out infinite;
}

.ngp-price-box--promo {
    border-color: rgba(255, 201, 51, .85) !important;
    background: linear-gradient(110deg, rgba(255, 201, 51, .14), rgba(255, 201, 51, .03)) !important;
    box-shadow:
        0 0 24px rgba(255, 180, 0, .35),
        inset 0 0 18px rgba(255, 180, 0, .1) !important;
}

/* Bloques de promo existentes (categoría) en versión dorada */
.cat-promo-block {
    background: linear-gradient(110deg, rgba(255, 201, 51, .16), rgba(255, 201, 51, .05)) !important;
    border: 1.5px solid rgba(255, 201, 51, .55) !important;
    border-left: 5px solid #ffc933 !important;
    box-shadow: 0 0 22px rgba(255, 180, 0, .25), inset 0 0 18px rgba(255, 180, 0, .08);
}

.cat-promo-desc {
    color: #ffe9a8 !important;
}

/* Ajustes de layout donde convive el precio promocional */
.bs-card-footer {
    flex-wrap: wrap;
    gap: 6px;
}

.bs-list-card-aside {
    flex-wrap: wrap;
    gap: 6px;
}

/* ══════════════════════════════════════════════
   5. BANNER DE PROMOS EN EL CARRITO
   ══════════════════════════════════════════════ */
.car-promo-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 22px;
    border-radius: 16px;
    text-align: center;
    background: radial-gradient(130% 170% at 50% 0%, #4a2900 0%, #1c0d00 62%, #000 100%);
    border: 2px solid rgba(255, 201, 51, .8);
    box-shadow:
        0 0 0 3px rgba(255, 201, 51, .18),
        0 12px 40px rgba(224, 138, 0, .35),
        inset 0 0 44px rgba(255, 180, 0, .14);
}

/* Pulso del banner con opacidad sobre un pseudo (composited). Antes animaba
   box-shadow en el propio banner, repintando en cada frame (H-24). */
.car-promo-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 0 5px rgba(255, 201, 51, .3),
        0 16px 54px rgba(224, 138, 0, .5),
        inset 0 0 60px rgba(255, 180, 0, .22);
    opacity: .15;
    animation: ngpBannerGlow 2.4s ease-in-out infinite;
}

.car-promo-banner__rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 620px;
    height: 620px;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 201, 51, .18) 0deg 6deg,
            rgba(255, 201, 51, 0) 6deg 20deg);
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
    mask-image: radial-gradient(circle, #000 25%, transparent 70%);
    animation: ngpSpin 18s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.car-promo-banner__txt {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.car-promo-banner__title {
    font-family: var(--ngp-font);
    font-weight: 900;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #ffd54a;
    text-shadow: 0 2px 0 #5c3300, 0 0 18px rgba(255, 190, 0, .7);
    animation: ngpSway 3s ease-in-out infinite;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .car-promo-banner__title {
        background: linear-gradient(180deg,
                #fffbe0 0%, #ffe27a 24%, #ffb700 52%, #fff2b0 66%, #e08a00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-stroke: 1.5px #5c3300;
        paint-order: stroke fill;
        text-shadow: none;
        filter: drop-shadow(0 0 16px rgba(255, 190, 0, .7));
    }
}

.car-promo-banner__sub {
    font-size: .92rem;
    font-weight: 600;
    color: #ffe9a8;
    letter-spacing: .02em;
}

.car-promo-banner__sub strong {
    color: #ffd54a;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(255, 201, 51, .8);
}

@keyframes ngpBannerGlow {
    0%, 100% { opacity: .15; }
    50%      { opacity: .75; }
}

.car-promo-banner[hidden],
.car-promo-saving[hidden] {
    display: none !important;
}

/* Ahorro bajo las acciones */
.car-promo-saving {
    margin-top: 14px;
    text-align: right;
    font-family: var(--ngp-font);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ngp-gold-4);
    text-shadow: 0 0 16px rgba(255, 180, 0, .45);
    animation: ngpBadgePulse 1.8s ease-in-out infinite;
}

/* Filas con promo en la tabla del carrito */
.car-table tbody tr.ngp-row--promo {
    background: linear-gradient(90deg, rgba(255, 201, 51, .16), rgba(255, 201, 51, .02) 62%);
    box-shadow: inset 4px 0 0 #ffc933;
}

.car-table tbody tr.ngp-row--promo:hover {
    background: linear-gradient(90deg, rgba(255, 201, 51, .24), rgba(255, 201, 51, .06) 62%);
}

.car-total-val.ngp-total--promo {
    color: #b87400 !important;
    text-shadow: 0 0 18px rgba(255, 180, 0, .5);
}

/* ══════════════════════════════════════════════
   6. RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .ngp-burst__main { font-size: clamp(1.9rem, 6.5vw, 3rem); }
    .ngp-burst--sm .ngp-burst__main { font-size: clamp(1.2rem, 4vw, 1.8rem); }
}

@media (max-width: 640px) {
    /* En móvil el texto vive a la izquierda: los sellos se van arriba a la derecha */
    .ngp-burst--tr,
    .ngp-burst--tl,
    .ngp-burst--br,
    .ngp-burst--bl {
        top: 8px;
        bottom: auto;
        left: auto;
        right: 8px;
        padding: 4px;
    }

    .ngp-burst__main { font-size: clamp(1.7rem, 9vw, 2.6rem); -webkit-text-stroke-width: 1.4px; }
    .ngp-burst__sub { font-size: .72rem; padding: 2px 9px 3px; }

    .ngp-burst--mini .ngp-burst__main { font-size: .9rem; }
    .ngp-burst--mini .ngp-burst__sub { font-size: .45rem; }

    .car-promo-banner { padding: 14px 14px; }
    .car-promo-saving { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ngp-badge,
    .ngp-badge::after,
    .ngp-burst__inner,
    .ngp-burst__rays,
    .ngp-spark,
    .ngp-card--promo::after,
    .car-promo-banner,
    .car-promo-banner__rays,
    .car-promo-banner__title,
    .ngp-price-pair,
    .car-promo-saving {
        animation: none !important;
    }
}