:root {
            --color-background: #fff;
            --color-text: #222;
            --color-accent: #888888;
            --color-light: #f8f8f8;
            --font-sans: 'Poppins', sans-serif;
            --font-serif: 'Playfair Display', serif;
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 2rem;
            --spacing-lg: 4rem;
            --spacing-xl: 8rem;
        }
        body {
            font-family: var(--font-sans);
            color: var(--color-text);
            background: var(--color-background);
        }
        .container {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
            box-sizing: border-box;
        }
        .ilustracion-title {
            font-family: var(--font-serif);
            font-size: 2.8rem;
            font-style: italic;
            font-weight: 700;
            text-align: center;
            margin-top: 6.5rem;
            margin-bottom: 0.5rem;
        }
        .ilustracion-subtitle {
            text-align: center;
            font-size: 1.1rem;
            color: var(--color-text);
            margin-bottom: 2.5rem;
            letter-spacing: 0.04em;
        }
        .ilustracion-grid {
            column-count: 4;
            column-gap: 1.5rem;
            margin-bottom: 3rem;
        }
        @media (max-width: 1200px) {
            .ilustracion-grid { column-count: 3; }
        }
        @media (max-width: 900px) {
            .ilustracion-grid { column-count: 2; }
        }
        @media (max-width: 600px) {
            .ilustracion-grid { column-count: 1; }
        }
        .ilustracion-item {
            display: block;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: none;
            margin-bottom: 1.5rem;
            transition: transform 0.2s;
        }
        .ilustracion-item img,
        .ilustracion-item video {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s;
        }
        .ilustracion-item:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: none;
        }
        @media (max-width: 900px) {
            .ilustracion-title { font-size: 2rem; margin-top: 5.5rem; }
        }
        @media (max-width: 600px) {
            .ilustracion-title { font-size: 1.4rem; margin-top: 4.5rem; }
            .ilustracion-subtitle { font-size: 0.95rem; }
            .ilustracion-grid { grid-template-columns: 1fr; }
        }

        /* Popup Styles */
        .image-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .image-popup.active {
            display: flex;
            opacity: 1;
        }
        .popup-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: none;
            overflow: hidden; /* To contain the image if it's larger */
        }
        .popup-image,
        .popup-video {
            display: block;
            max-width: 100%;
            max-height: 90vh; /* Ensure image fits viewport height */
            object-fit: contain; /* Maintain aspect ratio */
            border-radius: 8px; /* Match popup content radius */
        }
        .popup-close {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background-color: rgba(0,0,0,0.2);
            color: #000;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.2s ease;
            z-index: 1001;
        }
        .popup-close:hover {
            background-color: rgba(0,0,0,0.4);
        }