/* Base Resets for seamless imagery */
        body {
            background-color: #050505;
            color: #F9F9F9;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Hide scrollbar for a cleaner cinematic feel */
        ::-webkit-scrollbar {
            width: 0px;
            background: transparent;
        }

        /* Continuous Image Flow Specifics */
        .portfolio-image {
            width: 100%;
            height: auto;
            display: block;
            margin: 0;
            padding: 0;
            border: none;
            vertical-align: bottom; /* Removes baseline gap */
        }

        /* Cinematic Intro Animation */
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        
        .delay-1 { animation-delay: 0.3s; }
        .delay-2 { animation-delay: 0.6s; }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Scroll reveal utility */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animaciones Slide Left / Right */
        .reveal-left {
            opacity: 0;
            transform: translateX(-100px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .reveal-right {
            opacity: 0;
            transform: translateX(100px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .reveal-left.active, .reveal-right.active {
            opacity: 1;
            transform: translateX(0);
        }

        /* Typographic composition scaling for Brands section */
        .brand-scale-1 { font-size: clamp(3rem, 12vw, 9rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; }
        .brand-scale-2 { font-size: clamp(2rem, 8vw, 6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
        .brand-scale-3 { font-size: clamp(1.5rem, 5vw, 4rem); font-weight: 600; font-style: italic; }
        .brand-scale-4 { font-size: clamp(1rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: 0.05em; }

        /* Utility used by the service headings. Tailwind CDN does not provide
           this custom class automatically, so define it explicitly. */
        .overflow-wrap-anywhere {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        /* Prevent focus outlines from disappearing when keyboard navigating. */
        a:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 4px;
        }

        /* Debug helper: visible only when the page is launched with ?debug=1. */
        #debug-panel {
            display: none;
            position: fixed;
            right: 12px;
            bottom: 12px;
            z-index: 9999;
            max-width: min(520px, calc(100vw - 24px));
            max-height: 40vh;
            overflow: auto;
            padding: 12px;
            background: rgba(0,0,0,.92);
            color: #00ff88;
            border: 1px solid #00ff88;
            font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
            white-space: pre-wrap;
            pointer-events: none;
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto !important;
            }

            .fade-in-up,
            .reveal,
            .reveal-left,
            .reveal-right {
                animation: none !important;
                transition: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

/* =========================================================
   PLASTIKA CREATIVE MAFIA
   Custom styles extracted from the original HTML.
   ========================================================= */

.overflow-wrap-anywhere {
    overflow-wrap: anywhere;
}

.site-logo {
    width: min(300px, 70vw);
    height: auto;
    display: block;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .fade-in-up,
    .reveal,
    .reveal-left,
    .reveal-right {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}