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

        body {
            background: var(--bg-color);
            color: var(--text-color);
            overflow-x: hidden;
        }

        /* Hero Section */
        .hero {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .hero-image {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
            opacity: 0;
            transform: scale(1.05);
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .hero-image.loaded {
            opacity: 1;
            transform: scale(1);
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            justify-content: center; /* centrado vertical */
            align-items: flex-start; /* alinear contenido a la izquierda */
            text-align: left; /* texto alineado a la izquierda */
  padding: 20px 5%; /* margen interno con respiro lateral */
  z-index: 2;
        }

        .hero-content {
            transform: translateY(100px);
            opacity: 0;
            transition: all 1s ease-out 0.5s;
            max-width: 800px; /* limita el ancho del texto para legibilidad */
        }

        .hero-content.visible {
            transform: translateY(0);
            opacity: 1;
        }

.hero-title {
            font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem);
            font-weight: 400;
            margin-bottom: 14px;
            color: #ffffff !important;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        }

        .hero-subtitle {
            font-size: clamp(0.95rem, 0.8rem + 1vw, 1.2rem);
            font-weight: 300;
            opacity: 0.95;
            color: #ffffff !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* Content Sections */
        .content-section {
            min-height: auto; /* evitar huecos innecesarios */
            display: flex;
            align-items: center;
            padding: 90px 5%;
            position: relative;
        }

        .section-left {
            justify-content: flex-start;
        }

        .section-right {
            justify-content: flex-end;
        }

        .section-content {
            max-width: 1400px;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 70px;
            align-items: center;
            margin: 0 auto;
        }

        /* Dar más ancho a la columna de imagen según el lado */
        .section-left .section-content {
            grid-template-columns: 1.25fr 0.75fr;
        }

        .section-right .section-content {
            grid-template-columns: 0.75fr 1.25fr;
        }

        .section-image {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

.section-image-desktop {
  display: block;
}

.section-image-mobile {
  display: none;
}

        .content-image {
            width: 100%;
            height: min(520px, 65vh);
            object-fit: cover;
            opacity: 0;
            transform: scale(1.1) translateY(50px);
            transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border-radius: 20px;
        }

        .content-image.loaded {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        .text-content {
            padding: 48px;
            opacity: 1;
            transform: translateY(50px);
            transition: all 1s ease-out;
        }

        .text-content.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .section-title {
            font-size: 3.4rem;
            font-weight: 300;
            margin-bottom: 24px;
            color: var(--text-white);
        }

        .section-description {
            font-size: 1.3rem;
            line-height: 1.9;
            color: var(--text-white);
            margin-bottom: 34px;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 40px;
            background: var(--primary-color);
            color: #fff;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 500;
            transition: transform 0.3s ease;
        }

        .cta-button:hover {
            transform: translateY(-2px);
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .section-content {
                display: flex;
                flex-direction: column;
                gap: 32px;
                text-align: left;
            }
            .section-image-desktop {
                display: none;
            }
            .section-image-mobile {
                display: block;
                margin: 20px 0;
            }
            .text-content {
                padding: 0;
            }
            .hero-title {
                font-size: 2.3rem;
            }

            .hero-subtitle {
                font-size: 1.1rem;
            }

            .section-title {
                font-size: 2.8rem;
            }
            .content-image { height: auto; }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 1.8rem;
            }

            .hero-subtitle {
                font-size: 0.95rem;
            }

            .section-title {
                font-size: 2.3rem;
            }

            .section-description {
                font-size: 1.2rem;
            }

            .content-image {
                height: min(360px, 50vh);
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem;
            }

            .hero-subtitle {
                font-size: 0.85rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .content-image {
                height: min(280px, 45vh);
            }

            .text-content {
                padding: 24px;
            }
        }

        /* Loading overlay */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: 20px;
        }

        [data-theme="dark"] .loading-overlay {
            background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
        }

        [data-theme="light"] .loading-overlay {
            background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
        }

        
        @keyframes loading {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        .loading-overlay.hidden {
            display: none;
        }

        /* Image Grid Section */
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 40px 5%;
            position: relative;
        }

        .grid-image {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }

        .grid-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .grid-image:hover img {
            transform: scale(1.03);
        }

        /* Cross Divider */
        .image-grid::before,
        .image-grid::after {
            content: '';
            position: absolute;
            background: gray;
        }

        /* Oculta la cruz gris solo para obra-1 */
        body.obra-1 .image-grid::before,
        body.obra-1 .image-grid::after {
            display: none;
        }

        .image-grid::before {
            width: 2px; /* Vertical line */
            height: 100%;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
        }

        .image-grid::after {
            height: 2px; /* Horizontal line */
            width: 100%;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        @media (max-width: 768px) {
            .image-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ===== Ajustes específicos para páginas de obra ===== */
        body[class*="obra-"] .mobile-menu {
            background: linear-gradient(180deg, #051427 0%, #0a1a30 100%);
            color: #f4fbff;
            border-right: none;
            box-shadow: 8px 0 28px rgba(0, 0, 0, 0.6);
        }
        body[class*="obra-"] .mobile-menu-header {
            background: transparent;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            padding: 20px 24px;
        }
        body[class*="obra-"] .mobile-menu-header h3,
        body[class*="obra-"] .mobile-menu-close {
            color: #ffffff;
        }
        body[class*="obra-"] .mobile-menu a {
            color: #e5f4ff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 18px 24px;
        }
        body[class*="obra-"] .mobile-menu a:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
        }
        body[class*="obra-"] .mobile-menu a.active {
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
        }