.pending-page-wrapper {
    position: relative;
    isolation: isolate;
    min-height: min(780px, calc(100vh - var(--header-height) - 2rem));
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem);
    background: transparent;
}

.pending-page-wrapper::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    opacity: 0.08;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.55) 0.5px, transparent 0.5px);
    background-size: 5px 5px;
    mix-blend-mode: soft-light;
}

.pending-bg {
    position: absolute;
    inset: -4% 0;
    z-index: -3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) scale(1.04);
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 600ms ease, filter 600ms ease;
    animation: pending-background-in 900ms ease-out 80ms forwards;
}

.pending-cover {
    position: absolute;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1;
    opacity: 0.3;
    transform: translate3d(var(--push-x, 0px), var(--push-y, 0px), 0);
    transition: opacity 500ms ease, filter 500ms ease, transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform, opacity;
}

.pending-cover img {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.42);
    filter: saturate(0.86);
    transform: rotate(var(--cover-rotation)) scale(1);
}

.pending-cover-far { opacity: 0.28; filter: blur(7px); }
.pending-cover-mid { opacity: 0.4; filter: blur(4px); }
.pending-cover-near { opacity: 0.52; filter: blur(1.5px); }
.pending-cover.is-near-pointer { z-index: 4; opacity: 0.92; filter: blur(0); }
.pending-cover.is-near-pointer img { filter: saturate(1.18) contrast(1.1) brightness(1.12); transform: rotate(var(--cover-rotation)) scale(calc(1 + (var(--influence) * 0.22))); box-shadow: 0 0 34px rgba(255, 121, 170, 0.34), 0 18px 35px rgba(0, 0, 0, 0.5); }

.pending-bg-column {
    position: relative;
    height: 108%;
    overflow: hidden;
}

.pending-bg-track {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    width: 100%;
    will-change: transform;
}

.pending-bg-column-up .pending-bg-track { animation: pending-column-up 34s linear infinite; }
.pending-bg-column-down .pending-bg-track { animation: pending-column-down 38s linear infinite; }

.pending-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-background) 20%, transparent) 0%, color-mix(in srgb, var(--color-background) 46%, transparent) 72%, color-mix(in srgb, var(--color-background) 68%, transparent) 100%);
    transition: opacity 600ms ease;
}

.pending-content {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    color: var(--color-text-primary);
    text-align: left;
}

.pending-heading {
    grid-column: 1 / -1;
    margin-bottom: clamp(0.8rem, 2vw, 1.25rem);
    animation: pending-hero-in 650ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.pending-kicker { display: block; margin-bottom: 0.8rem; color: #ff79aa; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; }
.pending-heading h1 { margin: 0; color: var(--color-text-primary); font-size: clamp(2.25rem, 5vw, 4.2rem); font-weight: 800; line-height: 0.98; letter-spacing: 0; text-wrap: balance; }
.pending-heading p { margin: 0.9rem 0 0; color: var(--color-text-secondary); font-size: 1rem; }

.pending-section {
    position: relative;
    min-height: 246px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: color-mix(in srgb, var(--season-card, var(--color-surface)) 34%, transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: pending-section-in 520ms ease-out 100ms both;
    transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.pending-section::before { position: absolute; top: 0; right: 0; width: 48%; height: 3px; content: ''; background: var(--color-primary); box-shadow: 0 0 18px var(--season-glow, rgba(29, 185, 84, 0.55)); }
.pending-section-maxpa { animation-delay: 180ms; }
.pending-section-maxpa::before { background: var(--color-primary-light); box-shadow: 0 0 18px var(--season-glow, rgba(29, 185, 84, 0.4)); }
.pending-section:hover { transform: translateY(-4px); }
.pending-section-anthony:hover { border-color: color-mix(in srgb, var(--color-primary) 64%, transparent); box-shadow: 0 8px 24px var(--season-glow, rgba(29, 185, 84, 0.18)), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.pending-section-maxpa:hover { border-color: color-mix(in srgb, var(--color-primary-light) 64%, transparent); box-shadow: 0 8px 24px var(--season-glow, rgba(29, 185, 84, 0.18)), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.pending-section h2 { margin: 0; color: var(--color-text-primary); font-size: 1.45rem; font-weight: 800; letter-spacing: 0.08em; }
.pending-section h2::before { display: block; margin-bottom: 0.4rem; content: 'Pendientes de '; color: var(--color-text-secondary); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.pending-section p { max-width: 23ch; margin: 0.75rem 0 1.75rem; color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; }

.pending-count { position: absolute; top: 1.25rem; right: 1.25rem; display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.7rem; color: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50px; background: rgba(255, 255, 255, 0.07); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.pending-count strong { color: #fff; font-size: 1rem; }
.pending-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: auto; }
.pending-actions a { position: relative; overflow: hidden; }
.pending-actions .button-primary, .pending-actions .button-secondary { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0.65rem 0.9rem; border: 1px solid transparent; border-radius: 50px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.pending-actions .button-primary { color: color-mix(in srgb, var(--color-background) 78%, #000); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); box-shadow: 0 7px 20px var(--season-glow, rgba(29, 185, 84, 0.24)); animation: pending-primary-breathe 3.5s ease-in-out infinite; }
.pending-actions .button-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 27px var(--season-glow, rgba(29, 185, 84, 0.46)); }
.pending-actions .button-secondary { color: var(--color-text-primary); border-color: rgba(255, 255, 255, 0.3); background: transparent; }
.pending-actions .button-secondary:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 22px rgba(255, 255, 255, 0.1); }
.pending-actions a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.pending-ambient, .pending-button-particles, .pending-click-burst { pointer-events: none; }
.pending-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pending-ambient-particle { position: absolute; top: calc(12% + (var(--particle-index) * 10%)); left: calc(8% + (var(--particle-index) * 11%)); width: 2px; height: 2px; border-radius: 50%; background: #ffb3cf; box-shadow: 0 0 9px #ff79aa; opacity: 0.36; animation: pending-particle-drift 7s ease-in-out calc(var(--particle-index) * -0.7s) infinite alternate; }
.pending-button-particles { position: absolute; inset: 0; }
.pending-button-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 300ms ease; }
.pending-button-particle:nth-child(1) { top: 12%; left: 15%; }.pending-button-particle:nth-child(2) { top: 80%; left: 24%; }.pending-button-particle:nth-child(3) { top: 20%; right: 14%; }.pending-button-particle:nth-child(4) { right: 8%; bottom: 18%; }.pending-button-particle:nth-child(5) { top: 6%; left: 52%; }.pending-button-particle:nth-child(6) { bottom: 5%; left: 62%; }
.pending-actions a:hover .pending-button-particle { opacity: 0.72; animation: pending-particle-pulse 1.2s ease-in-out infinite alternate; }
.pending-click-burst { position: absolute; width: 8px; height: 8px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50%; transform: translate(-50%, -50%); animation: pending-ripple 650ms ease-out forwards; }

.pending-page-wrapper.is-navigating .pending-content { opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 500ms ease, transform 500ms ease; }
.pending-page-wrapper.is-navigating .pending-bg { opacity: 0 !important; filter: blur(10px); }
.pending-page-wrapper.is-navigating .pending-overlay { opacity: 0.45; }

@keyframes pending-background-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pending-column-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes pending-column-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes pending-hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pending-section-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pending-primary-breathe { 0%, 100% { box-shadow: 0 7px 20px rgba(255, 77, 141, 0.22); } 50% { box-shadow: 0 9px 25px rgba(255, 77, 141, 0.36); } }
@keyframes pending-particle-drift { from { transform: translate3d(0, 5px, 0); opacity: 0.18; } to { transform: translate3d(14px, -10px, 0); opacity: 0.6; } }
@keyframes pending-particle-pulse { from { transform: scale(0.7); } to { transform: scale(1.5); } }
@keyframes pending-ripple { from { opacity: 0.8; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } to { opacity: 0; transform: translate(-50%, -50%) scale(15); box-shadow: 0 0 0 8px transparent; } }

@media (max-width: 720px) {
    .pending-page-wrapper { min-height: 640px; align-items: start; padding-top: 3rem; }
    .pending-bg { inset: -8% -18%; }
    .pending-cover { opacity: 0.34; }
    .pending-content { width: min(100%, 420px); grid-template-columns: 1fr; }
    .pending-heading h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
    .pending-section { min-height: 0; }
    .pending-section p { margin-bottom: 1.2rem; }
    .pending-ambient-particle:nth-child(n + 5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pending-bg, .pending-bg-track, .pending-cover img, .pending-heading, .pending-section, .pending-actions .button-primary, .pending-ambient-particle { animation: none !important; }
    .pending-cover, .pending-section, .pending-content, .pending-bg { transition: none !important; }
    .pending-button-particle { display: none; }
}