/* =========================
   BASE
========================= */
nav {
    background: white !important;
}

body {
    padding-top: 80px;
}


/*==========
    BALANZA EN 3D*/
.balanza-escena {
    width: 300px;
    margin: auto;
    perspective: 1400px;
}

.balanza-3d {
    width: 100%;
    transform-style: preserve-3d;

    /*CLAVE: eje de rotación */
    transform-origin: 50% 85%;
    animation: balanceoEje 8s ease-in-out infinite;
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.35));
}

@keyframes balanceoEje {
    0% {
        transform: rotateY(-22deg) rotateX(4deg);
        }
    50% {
        transform: rotateY(22deg) rotateX(4deg);
        }
    100% {
        transform: rotateY(-22deg) rotateX(4deg);
        }
}



/* =========================
MARQUEE (STACK TECNOLÓGICO)*/
.marquee {
    width: 100%;
    overflow: hidden;
}

.marquee-track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: marquee 50s linear infinite;
}

.marquee.reverse .marquee-track {
    animation-direction: reverse;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* =========================
    TEXTO STACK
========================= */
.outline-text {
    font-size: clamp(2.2rem, 5.5vw, 4.8rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(26, 94, 63, 0.55);
}

.solid-text {
    font-size: clamp(2.2rem, 5.5vw, 4.8rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #2563eb;
}