/* BoomInformativo - Original Theme CSS */
:root {
            --bg-navy: #0A192F;
            --text-light: #E6F1FF;
            --accent-pink: #FF007F;
            --accent-cyan: #00E5FF;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Space Grotesk', 'Arial Black', sans-serif;
            background-color: var(--bg-navy);
            color: var(--text-light);
            overflow-x: hidden;
        }

        /* HEADER — injected by components.js */
        header {
            padding: 0;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 30px;
            transform: rotate(-2deg); /* Ligera inclinación para romper la norma */
        }

        nav a {
            text-decoration: none;
            color: var(--text-light);
            font-size: 1.1rem;
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 1px;
            position: relative;
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--accent-pink);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }

        nav a:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        /* TOP SECTION: SUPERPOSICIÓN */
        .hero-section {
            position: relative;
            padding: 50px 5%;
            min-height: 80vh;
            display: flex;
            align-items: center;
        }

        .hero-img-box {
            position: absolute;
            right: 5%;
            top: 10%;
            width: 55%;
            height: 70vh;
            background: linear-gradient(45deg, #112240, #233554); /* Placeholder para Collage */
            border: 2px solid var(--accent-cyan);
            box-shadow: -15px 15px 0px var(--accent-pink);
            z-index: 1;
        }

        .hero-text-box {
            position: relative;
            z-index: 2;
            width: 60%;
            background: rgba(10, 25, 47, 0.85); /* Fondo semitransparente para legibilidad */
            padding: 40px;
            backdrop-filter: blur(5px);
            border-left: 5px solid var(--accent-pink);
        }

        .hero-text-box h1 {
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            line-height: 1.1;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .hero-text-box p {
            font-size: 1.2rem;
            font-family: sans-serif;
            line-height: 1.5;
            color: #8892B0;
        }

        /* MID SECTION: DIAGONAL */
        .diagonal-section {
            background-color: var(--accent-pink);
            color: var(--bg-navy);
            padding: 60px 5%;
            transform: skewY(-3deg);
            margin: 100px 0;
            position: relative;
            z-index: 0;
        }

        /* Deshacer el skew para el contenido interno */
        .diagonal-content {
            transform: skewY(3deg);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .diagonal-content h2 {
            font-size: 3rem;
            text-transform: uppercase;
            line-height: 1;
        }

        /* GRID SECTION: TETRIS / MASONRY FAKE */
        .asymmetric-grid {
            padding: 0 5% 100px 5%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 250px;
            gap: 20px;
        }

        .grid-item {
            position: relative;
            background-color: #112240;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            padding: 20px;
            transition: transform 0.3s;
        }

        .grid-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,229,255,0.2);
            border: 1px solid var(--accent-cyan);
        }

        /* Tamaños asimétricos */
        .item-large {
            grid-column: span 2;
            grid-row: span 2;
            background: linear-gradient(to bottom, transparent, rgba(10,25,47,0.9)), #233554;
        }

        .item-tall {
            grid-column: span 1;
            grid-row: span 2;
        }

        .item-wide {
            grid-column: span 2;
            grid-row: span 1;
        }

        .grid-item h3 {
            font-size: 1.2rem;
            position: relative;
            z-index: 2;
            text-transform: uppercase;
            line-height: 1.2;
        }

        .item-large h3 {
            font-size: 1.8rem;
        }

        .grid-item .tag {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-pink);
            color: var(--bg-navy);
            padding: 5px 10px;
            font-size: 0.8rem;
            font-weight: bold;
            z-index: 2;
        }

        /* FOOTER */
        footer {
            padding: 50px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid rgba(230, 241, 255, 0.1);
        }

        .footer-links a {
            color: var(--text-light);
            text-decoration: none;
            margin-left: 20px;
            font-family: sans-serif;
            font-size: 0.9rem;
        }
        
        .footer-links a:hover {
            color: var(--accent-cyan);
        }

        /* RESPONSIVE */
        @media (max-width: 900px) {
            .hero-img-box {
                position: relative;
                width: 100%;
                right: 0;
                top: 0;
                height: 40vh;
                margin-bottom: 20px;
            }
            .hero-text-box {
                width: 100%;
                border-left: none;
                border-top: 5px solid var(--accent-pink);
            }
            .hero-section {
                flex-direction: column;
                padding-top: 20px;
            }
            .asymmetric-grid {
                grid-template-columns: 1fr;
                grid-auto-rows: minmax(250px, auto);
            }
            .item-large, .item-tall, .item-wide {
                grid-column: span 1;
                grid-row: span 1;
            }
            .diagonal-content {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }
            nav ul {
                transform: none;
            }
        }