/* --------------------------------------
   Home Background (Blue — distinct from Terminales)
   -------------------------------------- */
.page-top-bg-home {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1100px;
    background-color: #041428;
    background-image:
        radial-gradient(circle at 8% 88%, #408CD0 0%, transparent 55%),
        radial-gradient(circle at 92% 8%, #5BB3FF 0%, transparent 50%),
        radial-gradient(circle at 60% 45%, #1a3d6e 0%, transparent 90%);
    background-size: 130% 130%, 120% 120%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 100%, 100% 0%, 55% 40%;
    will-change: background-position;
    animation: floatBackgroundsHome 18s ease-in-out infinite alternate;
    clip-path: polygon(0 0, 100% 0, 100% 74%, 0 92%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------
   Terminales / Product pages Background (Blue)
   -------------------------------------- */
.page-top-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000px;
    background-color: #030a21;
    background-image:
        radial-gradient(circle at 10% 10%, #00e0ff 0%, transparent 60%),
        radial-gradient(circle at 90% 10%, #1379F0 0%, transparent 60%),
        radial-gradient(circle, #471c86 0%, transparent 95%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    will-change: background-position;
    animation: floatBackgrounds 15s ease-in-out infinite alternate;
    clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------
   Tocas i Pagas Background (Green)
   -------------------------------------- */
.page-top-bg-tocas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 850px;
    background-color: #99CC33;
    background-image:
        radial-gradient(circle at 85% 15%, #99CC33 0%, transparent 55%),
        radial-gradient(circle at 15% 85%, #5F8018 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, #204020 0%, transparent 90%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    will-change: background-position;
    animation: floatBackgrounds 15s ease-in-out infinite alternate;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 75%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------
   E-commerce Background (Orange)
   -------------------------------------- */
.page-top-bg-ecommerce {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 720px;
    background-color: #FF722F;
    /* Fondo base oscuro anaranjado */
    background-image:
        radial-gradient(circle at 15% 15%, #FF722F 0%, transparent 60%),
        radial-gradient(circle at 85% 85%, #B3440C 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, #4a1500 0%, transparent 95%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    will-change: background-position;
    animation: floatBackgrounds 15s ease-in-out infinite alternate;
    clip-path: ellipse(110% 100% at 50% 0%);
    /* Curved bottom edge */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------
   Tienda Background (Danger/Red)
   -------------------------------------- */
.page-top-bg-tienda {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 720px;
    background-color: #DA2A47;
    background-image:
        radial-gradient(circle at 10% 10%, #DA2A47 0%, transparent 60%),
        radial-gradient(circle at 90% 90%, #91162B 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, #C01F3A 0%, transparent 95%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    will-change: background-position;
    animation: floatBackgrounds 15s ease-in-out infinite alternate;
    clip-path: ellipse(120% 100% at 50% 0%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------
   Portal Background (Info/Purple)
   -------------------------------------- */
.page-top-bg-portal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900px;
    background-color: #732ED5;
    background-image:
        radial-gradient(circle at 20% 80%, #732ED5 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, #471C86 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, #1f083f 0%, transparent 95%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    will-change: background-position;
    animation: floatBackgrounds 15s ease-in-out infinite alternate;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 99% 79.25%, 98% 78.51%, 97% 77.79%, 96% 77.11%,
            95% 76.47%, 94% 75.89%, 93% 75.38%, 92% 74.93%, 91% 74.57%, 90% 74.29%,
            89% 74.11%, 88% 74.01%, 87% 74.01%, 86% 74.11%, 85% 74.29%, 84% 74.57%,
            83% 74.93%, 82% 75.38%, 81% 75.89%, 80% 76.47%, 79% 77.11%, 78% 77.79%,
            77% 78.51%, 76% 79.25%, 75% 80%, 74% 80.75%, 73% 81.49%, 72% 82.21%,
            71% 82.89%, 70% 83.53%, 69% 84.11%, 68% 84.62%, 67% 85.07%, 66% 85.43%,
            65% 85.71%, 64% 85.89%, 63% 85.99%, 62% 85.99%, 61% 85.89%, 60% 85.71%,
            59% 85.43%, 58% 85.07%, 57% 84.62%, 56% 84.11%, 55% 83.53%, 54% 82.89%,
            53% 82.21%, 52% 81.49%, 51% 80.75%, 50% 80%, 49% 79.25%, 48% 78.51%,
            47% 77.79%, 46% 77.11%, 45% 76.47%, 44% 75.89%, 43% 75.38%, 42% 74.93%,
            41% 74.57%, 40% 74.29%, 39% 74.11%, 38% 74.01%, 37% 74.01%, 36% 74.11%,
            35% 74.29%, 34% 74.57%, 33% 74.93%, 32% 75.38%, 31% 75.89%, 30% 76.47%,
            29% 77.11%, 28% 77.79%, 27% 78.51%, 26% 79.25%, 25% 80%, 24% 80.75%,
            23% 81.49%, 22% 82.21%, 21% 82.89%, 20% 83.53%, 19% 84.11%, 18% 84.62%,
            17% 85.07%, 16% 85.43%, 15% 85.71%, 14% 85.89%, 13% 85.99%, 12% 85.99%,
            11% 85.89%, 10% 85.71%, 9% 85.43%, 8% 85.07%, 7% 84.62%, 6% 84.11%,
            5% 83.53%, 4% 82.89%, 3% 82.21%, 2% 81.49%, 1% 80.75%, 0% 80%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------
   Crypto Background (Caution/Yellow)
   -------------------------------------- */
.page-top-bg-crypto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 450px;
    background-color: #FEC524;
    background-image:
        radial-gradient(circle at 80% 80%, #F3B70F 0%, transparent 50%),
        radial-gradient(circle at 20% 20%, #F3B70F 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, #FEC524 0%, transparent 95%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    will-change: background-position;
    animation: floatBackgrounds 15s ease-in-out infinite alternate;
    /*clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);*/
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------
   Secondary / Internal Pages Background (Conciliation, Scheme, Contact)
   -------------------------------------- */
.page-top-bg-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    background-color: #334155;
    background-image:
        radial-gradient(circle at 10% 20%, #334155 0%, transparent 60%),
        radial-gradient(circle at 100% 80%, #405076 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, #7E90AA 0%, transparent 95%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    will-change: background-position;
    animation: floatBackgrounds 15s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Modificadores de alto independientes para páginas que usan el fondo secundario */

.page-top-bg-secondary.bg-secondary-conciliation {
    height: 850px;
}

.page-top-bg-secondary.bg-secondary-scheme {
    height: 800px;
}

.page-top-bg-secondary.bg-secondary-contact {
    height: 700px;
}

.page-top-bg-secondary.bg-secondary-developers {
    height: 510px;
}

/* --------------------------------------
   Cross-browser Compatible Ambient Float Animations
   -------------------------------------- */
@keyframes floatBackgrounds {
    0% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
    }

    50% {
        background-position: 30% 15%, 70% 85%, 50% 50%;
    }

    100% {
        background-position: 10% 30%, 90% 70%, 50% 50%;
    }
}

@keyframes floatBackgroundsHome {
    0% {
        background-position: 0% 100%, 100% 0%, 55% 40%;
    }

    50% {
        background-position: 15% 70%, 85% 20%, 45% 55%;
    }

    100% {
        background-position: 5% 85%, 95% 10%, 60% 35%;
    }
}

/* --------------------------------------
   Subtle Floating Particles (Bokeh Effect)
   -------------------------------------- */
.bg-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    display: block;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    animation: floatParticle 12s infinite linear;
}

@keyframes floatParticle {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.35;
    }

    90% {
        opacity: 0.35;
    }

    100% {
        transform: translateY(-250px) translateX(80px) scale(0.8);
        opacity: 0;
    }
}

/* Randomized styles using nth-child for organic drift (35% faster durations) */
.particle:nth-child(1) {
    left: 10%;
    top: 75%;
    width: 5px;
    height: 5px;
    animation-duration: 13s;
    animation-delay: -2s;
}

.particle:nth-child(2) {
    left: 25%;
    top: 60%;
    width: 9px;
    height: 9px;
    filter: blur(1px);
    animation-duration: 17s;
    animation-delay: -5s;
}

.particle:nth-child(3) {
    left: 40%;
    top: 70%;
    width: 4px;
    height: 4px;
    animation-duration: 12s;
    animation-delay: -10s;
}

.particle:nth-child(4) {
    left: 55%;
    top: 55%;
    width: 12px;
    height: 12px;
    filter: blur(2px);
    animation-duration: 21s;
    animation-delay: -4s;
}

.particle:nth-child(5) {
    left: 70%;
    top: 80%;
    width: 7px;
    height: 7px;
    animation-duration: 14s;
    animation-delay: -15s;
}

.particle:nth-child(6) {
    left: 85%;
    top: 65%;
    width: 5px;
    height: 5px;
    animation-duration: 10s;
    animation-delay: -1s;
}

.particle:nth-child(7) {
    left: 15%;
    top: 50%;
    width: 14px;
    height: 14px;
    filter: blur(2px);
    animation-duration: 18s;
    animation-delay: -8s;
}

.particle:nth-child(8) {
    left: 45%;
    top: 45%;
    width: 6px;
    height: 6px;
    animation-duration: 16s;
    animation-delay: -12s;
}

.particle:nth-child(9) {
    left: 75%;
    top: 50%;
    width: 8px;
    height: 8px;
    filter: blur(1px);
    animation-duration: 16s;
    animation-delay: -6s;
}

.particle:nth-child(10) {
    left: 90%;
    top: 55%;
    width: 5px;
    height: 5px;
    animation-duration: 12s;
    animation-delay: -3s;
}

.particle:nth-child(11) {
    left: 33%;
    top: 78%;
    width: 4px;
    height: 4px;
    animation-duration: 11s;
    animation-delay: -7s;
}

.particle:nth-child(12) {
    left: 48%;
    top: 52%;
    width: 11px;
    height: 11px;
    filter: blur(1.5px);
    animation-duration: 19s;
    animation-delay: -14s;
}

.particle:nth-child(13) {
    left: 62%;
    top: 82%;
    width: 5px;
    height: 5px;
    animation-duration: 13s;
    animation-delay: -9s;
}

.particle:nth-child(14) {
    left: 8%;
    top: 48%;
    width: 8px;
    height: 8px;
    animation-duration: 15s;
    animation-delay: -11s;
}

.particle:nth-child(15) {
    left: 80%;
    top: 42%;
    width: 13px;
    height: 13px;
    filter: blur(2px);
    animation-duration: 20s;
    animation-delay: -13s;
}

.particle:nth-child(16) {
    left: 95%;
    top: 70%;
    width: 6px;
    height: 6px;
    animation-duration: 12s;
    animation-delay: -2s;
}