.gg-promotion-grid {
    display: grid;
    /* Always 3 equal columns regardless of item count — a single card no
       longer stretches full-width, two cards no longer split 50/50; every
       card always renders at one third of the container. */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.gg-promotion-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform var(--gg-hover-duration, 200ms) ease,
                box-shadow var(--gg-hover-duration, 200ms) ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* The widget controls (Style > "Efecto al pasar el mouse") only set CSS
   variables on .gg-promotion-grid; they're combined here into a single
   transform per card (Elementor's native Motion Effects would animate the
   whole grid at once, not each card separately). The shadow is applied
   directly by the widget's Group Control Box Shadow. */
.gg-promotion-card:hover {
    transform: translate(var(--gg-hover-move-x, 0px), calc(-1 * var(--gg-hover-lift, 2px)))
               scale(var(--gg-hover-scale, 1));
}

.gg-promotion-card__media {
    width: 100%;
    /* Poster/flyer proportions (taller than wide) instead of the old
       video-thumbnail-style 4:3 landscape ratio. */
    aspect-ratio: 3 / 4;
    background: #f3f4f6;
    overflow: hidden;
}

.gg-promotion-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gg-promotion-card__body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.gg-promotion-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.gg-promotion-pdf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    padding: 8px 14px;
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid #FFC800;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
}

.gg-promotion-pdf {
    margin-top: auto;
    border: 1px solid #e5e7eb;
    border-left: 5px solid #FFC800;
    border-radius: 8px;
    overflow: hidden;
}

.gg-promotion-pdf-btn,
.gg-promotion-pdf-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: #1f2937;
    text-decoration: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
}

.gg-promotion-pdf-btn:hover,
.gg-promotion-pdf-link:hover {
    background-color: #fbfbfb;
}

.gg-promotion-pdf-btn:focus-visible,
.gg-promotion-pdf-link:focus-visible {
    outline: 2px solid #FFC800;
    outline-offset: -2px;
}

.gg-promotion-pdf-label {
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.gg-promotion-pdf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fffbeb;
    color: #d97706;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.gg-promotion-pdf-btn[aria-expanded="true"] .gg-promotion-pdf-icon {
    transform: rotate(180deg);
    background: #FFC800;
    color: #111827;
}

.gg-promotion-pdf-viewer {
    position: relative;
    display: none;
    width: 100%;
    height: 550px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.gg-promotion-pdf-viewer.is-open {
    display: block;
}

.gg-promotion-pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.gg-promotion-pdf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a382d;
    background: #FFC800;
    padding: 7px 12px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gg-promotion-detail {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

.gg-promotion-detail__media {
    width: 100%;
    margin-bottom: 24px;
}

.gg-promotion-detail__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.gg-promotion-detail__title {
    margin: 0 0 24px;
    font-size: 1.8rem;
    color: #111827;
    line-height: 1.3;
}

.gg-promotion-empty {
    padding: 16px;
    background: #fffbeb;
    border-left: 4px solid #FFC800;
    color: #92400e;
    font-size: 0.95rem;
    border-radius: 4px;
}

.gg-promotion-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: pan-y;
}

.gg-promotion-carousel.gg-dragging {
    cursor: grabbing;
}

.gg-promotion-carousel__track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation-name: gg-promotion-carousel-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--gg-carousel-duration, 30s);
    will-change: transform;
}

.gg-promotion-carousel:hover .gg-promotion-carousel__track,
.gg-promotion-carousel:focus-within .gg-promotion-carousel__track {
    animation-play-state: paused;
}

.gg-promotion-carousel__track.gg-js-ready {
    animation: none;
}

@keyframes gg-promotion-carousel-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.gg-promotion-carousel__item {
    position: relative;
    /* Narrower than before to match the new poster-style (taller than wide)
       thumbnail, instead of the old video-thumbnail-style 4:3 landscape. */
    flex: 0 0 240px;
    width: 240px;
    display: block;
    line-height: 0;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
    transition: transform var(--gg-hover-duration, 200ms) ease,
                box-shadow var(--gg-hover-duration, 200ms) ease;
}

/* The widget controls (Style > "Efecto al pasar el mouse") only set CSS
   variables on .gg-promotion-carousel; they're combined here into a single
   transform per item (Elementor's native Motion Effects would animate the
   whole strip at once, not each card separately). */
.gg-promotion-carousel__item:hover {
    transform: translate(var(--gg-hover-move-x, 0px), calc(-1 * var(--gg-hover-lift, 0px)))
               scale(var(--gg-hover-scale, 1.03));
}

.gg-promotion-carousel__item img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 14px;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.gg-promotion-carousel__number {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.72);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .gg-promotion-carousel__track {
        animation: none;
    }
}

.gg-promotion-history {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.gg-promotion-history__title {
    margin: 0 0 4px;
    padding: 0 24px 16px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #111827;
    border-bottom: 2px solid #FFC800;
}

.gg-promotion-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Set on the <li> itself: the theme gives every list inside the page content (.gg-entry-content ul)
   a disc, and the <li> would inherit it from the <ul> despite the list-style: none above. */
.gg-promotion-history__item {
    list-style: none;
}

.gg-promotion-history__item + .gg-promotion-history__item {
    border-top: 1px solid #f1f5f9;
}

.gg-promotion-history__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    text-decoration: none;
    color: #1f2937;
    transition: background-color 0.2s ease;
}

.gg-promotion-history__link:hover {
    background-color: #fffbeb;
}

.gg-promotion-history__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.gg-promotion-history__arrow {
    display: inline-flex;
    color: #d97706;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.gg-promotion-history__link:hover .gg-promotion-history__arrow {
    transform: translateX(3px);
}

.gg-promotion-history__pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 0 24px;
}

.gg-promotion-history__pagination ul.page-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.gg-promotion-history__pagination .page-numbers li {
    display: flex;
}

.gg-promotion-history__pagination a.page-numbers,
.gg-promotion-history__pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    background: #f3f4f6;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.gg-promotion-history__pagination a.page-numbers:hover {
    background: #fde68a;
}

.gg-promotion-history__pagination span.page-numbers.current {
    background: #FFC800;
    color: #111827;
}

@media (max-width: 768px) {
    .gg-promotion-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .gg-promotion-pdf-btn,
    .gg-promotion-pdf-link {
        padding: 12px 14px;
    }
    .gg-promotion-pdf-viewer {
        height: 460px;
    }
    .gg-promotion-history__link {
        padding: 12px 16px;
    }
    .gg-promotion-history__title {
        padding: 0 16px 14px;
    }
    .gg-promotion-history__pagination {
        padding: 0 16px;
    }
    .gg-promotion-carousel__item {
        flex: 0 0 180px;
        width: 180px;
    }
}