.style-roble-nav {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 999;
        }

        .livewire-selector-wrapper {
            position: relative;
            min-width: 130px;
        }

        /* ==========================================================================
       Swiper Layout: SOLUCIÓN DE SINCRONIZACIÓN Y ZOOM INCREMENTADO
       ========================================================================== */
        .tc-header-style1 .slider-card .img {
            overflow: hidden;
            position: relative;
            height: 100vh;
            background-color: #000;
            /* Fondo negro base para evitar destellos blancos */
        }

        .tc-header-style1 .slider-card .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1);
            will-change: transform;
        }

        /* Usamos una animación directa para congelar el inicio en scale(1) y eliminar el golpe */
        .swiper-slide-active .slider-card .img img {
            animation: premiumZoom 6500ms cubic-bezier(0.25, 1, 0.3, 1) forwards;
        }

        /* Las diapositivas ocultas se mantienen estáticas en su tamaño base */
        .swiper-slide-next .slider-card .img img,
        .swiper-slide-prev .slider-card .img img {
            animation: none !important;
            transform: scale(1) !important;
        }

        /* Línea de tiempo de la animación: Control total del ritmo y el tamaño del Zoom */
        @keyframes premiumZoom {
            0% {
                transform: scale(1);
                /* Fuerza a la imagen a empezar limpia y sin saltos */
            }

            100% {
                transform: scale(1.28);
                /* Zoom ampliado y dramático para pantallas premium */
            }
        }

        .tc-header-style1 .slider-card .img::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%);
            z-index: 1;
        }

        .tc-header-style1 .info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 5;
            padding-bottom: 100px;
        }

        /* Detalle Dorado Itálico del Título */
        .text-roble-gold {
            color: #d2a878 !important;
            font-style: italic;
            font-weight: 400;
        }

        /* Estilos de los botones - BORDES TOTALMENTE CUADRADOS */
        .btn-roble-dark-square {
            background-color: #1a1a1a;
            color: #ffffff !important;
            border: 1px solid #1a1a1a;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 1px;
            padding: 15px 35px;
            min-width: 280px;
            text-align: center;
            border-radius: 0px !important;
            transition: all 0.3s ease;
        }

        .btn-roble-dark-square:hover {
            background-color: #ffffff;
            color: #1a1a1a !important;
            border-color: #ffffff;
        }

        .btn-roble-transparent-square {
            background-color: transparent;
            color: #ffffff !important;
            border: 2px solid #ffffff;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 1px;
            padding: 14px 35px;
            text-align: center;
            border-radius: 0px !important;
            transition: all 0.3s ease;
        }

        .btn-roble-transparent-square:hover {
            background-color: rgba(255, 255, 255, 0.15);
            border-color: #ffffff;
        }

        /* Optimización de Visibilidad de los Dots (Paginación) */
        .tc-header-style1 .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.2) !important;
            opacity: 1 !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            width: 10px !important;
            height: 10px !important;
            transition: all 0.3s ease;
        }

        .tc-header-style1 .swiper-pagination-bullet-active {
            background: #dfb15b !important;
            border-color: #dfb15b !important;
            width: 24px !important;
            border-radius: 5px !important;
        }

        @media (max-width: 768px) {
            .tc-header-style1 h1.js-title {
                font-size: 38px !important;
                line-height: 1.2 !important;
            }

            .btn-roble-dark-square,
            .btn-roble-transparent-square {
                width: 100%;
                min-width: 100%;
                margin-left: 0 !important;
                margin-top: 10px;
            }

            .tc-header-style1 .info {
                padding-bottom: 60px;
            }
        }




        /* Forzamos a que las columnas y sus hijos directos ocupen todo el alto */
        .equal-height-row {
            display: flex;
            flex-wrap: wrap;
        }

        .equal-height-row .col {
            display: flex;
            flex-direction: column;
        }

        /* El feature-box se expande para igualar al más alto */
        .equal-height-row .feature-box {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }

        /* El contenido interno también se expande */
        .equal-height-row .feature-box-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        /* Forzamos el justificado en el segundo span de cada bloque */
        .equal-height-row .feature-box-content span:last-child {
            display: inline-block;
            /* Cambiamos de block a inline-block para mejor control */
            width: 100%;
            text-align: justify !important;
            text-justify: inter-word;
            text-align-last: center;
            /* O 'left' si prefieres que la última línea no se centre */
        }

        /* 1. SECCIÓN: PRESENCIA REGIONAL (Banners con recorte de imagen) */
        .interactive-banners-image {
            position: relative;
            width: 100%;
            height: 505px;
            overflow: hidden;
        }

        .interactive-banners-image img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            object-position: center;
        }

        @media (max-width: 768px) {
            .interactive-banners-image img {
                object-position: top center;
            }
        }

        /* 2. SECCIÓN: EFECTOS HOVER (Botón "Conoce más") */
        .interactive-banner-style-06:hover .project-cta {
            opacity: 1 !important;
            transition: opacity 0.4s ease;
        }

        .interactive-banner-style-06 .project-cta {
            transition: opacity 0.3s ease;
        }

        .interactive-banner-style-06:hover .fs-22 {
            transform: translateY(-10px);
            transition: transform 0.4s ease;
        }

        /* 3. SECCIÓN: ÚLTIMOS PROYECTOS (Slider de texto e imágenes) */
        .text-slider-style-04 .swiper-slide {
            position: relative;
            width: 100%;
            height: 600px;
            overflow: hidden;
        }

        .text-slider-style-04 .swiper-slide img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            object-position: center;
            transition: transform 0.6s ease;
        }

        @media (max-width: 992px) {
            .text-slider-style-04 .swiper-slide {
                height: auto;
            }

            .text-slider-style-04 .swiper-slide img {
                position: static;
                height: auto !important;
                object-fit: initial;
            }
        }

        .text-slider-style-04 .swiper-slide-content {
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 1;
        }

        /* 4. SECCIÓN: TÍTULOS VERTICALES */
        .vertical-title-center .title {
            font-size: 14px;
            line-height: 1;
        }

        @media (max-width: 768px) {
            .vertical-title-center {
                height: 190px !important;
            }

            .vertical-title-center .title {
                font-size: 12px;
                letter-spacing: 1.5px;
            }
        }

        /* 5. SECCIÓN: MARQUEE (Texto en movimiento, si lo usas en otra parte) */
        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .marquee-wrapper:hover {
            animation-play-state: paused;
        }

        @media (max-width: 480px) {
            .marquee-wrapper span {
                font-size: 60px !important;
            }
        }






        /* Tipografía e Identidad de las Estadísticas */
        .stats-number {
            font-family: 'Cormorant Garamond', serif !important;
            font-size: 56px !important;
            font-weight: 300 !important;
            /* Más ligero para aumentar la sensación premium */
            color: #caa573 !important;
            /* Oro champagne unificado */
            line-height: 1 !important;
            margin-bottom: 14px !important;
            letter-spacing: -1px;
        }

        .stats-label {
            font-family: 'Montserrat', sans-serif !important;
            color: #232323 !important;
            font-weight: 600;
            font-size: 11px !important;
            text-transform: uppercase;
            letter-spacing: 2px !important;
            line-height: 1.5 !important;
            display: block;
            opacity: 0.85;
        }

        /* Sistema de líneas limpio y controlado por CSS */
        .animate-cascade .stat-block {
            border-right: 1px solid #d8d3cd;
        }

        /* Remover la línea del último elemento en pantallas grandes */
        .animate-cascade .stat-block:last-child {
            border-right: none;
        }

        /* Responsivo: De escritorio a Tablet/Móvil (Menos de 992px) */
        @media (max-width: 991px) {
            .animate-cascade .stat-block {
                border-right: none !important;
                border-bottom: 1px solid #d8d3cd;
                padding-top: 3.5rem !important;
                padding-bottom: 3.5rem !important;
            }

            /* El último elemento en móvil no lleva borde inferior */
            .animate-cascade .stat-block:last-child {
                border-bottom: none !important;
            }

            .stats-number {
                font-size: 48px !important;
            }
        }


        .project-editorial-card {
            background-color: transparent;
            display: flex;
            flex-direction: column;
            height: 100%;
            transition: opacity 0.3s ease;
        }

        .project-image-wrap {
            width: 100%;
            height: 440px;
            /* Un poco más alta para acentuar el formato vertical premium */
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }

        .project-image-wrap img {
            filter: brightness(0.80);
            /* Ligeramente más oscuro en reposo para que destaquen las letras */
            transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
        }

        .project-editorial-card:hover .project-image-wrap img {
            transform: scale(1.05);
            filter: brightness(0.95);
        }

        .project-meta-content {
            padding: 25px 0px 10px 0px;
            /* Eliminado el padding lateral interno para perfecta alineación arquitectónica con la foto */
            display: flex;
            flex-direction: column;
        }

        .project-category {
            font-family: 'Montserrat', sans-serif !important;
            font-size: 10px;
            /* Un punto más pequeño aumenta la sensación de exclusividad */
            font-weight: 700;
            letter-spacing: 3px;
            /* Más espaciado para un look de dossier de arquitectura */
            color: #caa573;
            margin-bottom: 12px;
            text-transform: uppercase;
        }

        .project-title {
            font-family: 'Cormorant Garamond', serif !important;
            font-size: 26px;
            color: #ffffff;
            font-weight: 400;
            /* Forzamos un trazo ligero y sofisticado en los títulos */
            letter-spacing: -0.3px;
            margin-bottom: 10px;
        }

        .project-description {
            font-family: 'Montserrat', sans-serif !important;
            font-size: 13px;
            /* Reducido a 13px para un contraste tipográfico perfecto */
            line-height: 1.7;
            /* Más aire entre líneas para que respire el bloque oscuro */
            color: #999999;
            /* Un gris ligeramente más suave que no compita con el título */
            margin-bottom: 24px;
            font-weight: 400;
        }

        .project-link-cta {
            font-family: 'Montserrat', sans-serif !important;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            color: #ffffff;
            text-transform: uppercase;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 5px;
            transition: border-color 0.3s ease, color 0.3s ease;
        }

        .project-link-cta i {
            transition: transform 0.3s ease;
        }

        .project-editorial-card:hover .project-link-cta {
            border-color: #caa573;
            color: #caa573;
        }

        .project-editorial-card:hover .project-link-cta i {
            transform: translateX(5px);
        }

        .header-project-link {
            text-decoration: none;
        }

        .mb-50px {
            margin-bottom: 50px;
        }

        @media (max-width: 991px) {
            .project-image-wrap {
                height: 380px;
            }
        }




        /* =========================================================
   HERO - PANTALLAS CON POCA ALTURA
   ========================================================= */

        @media (min-width: 769px) and (max-height: 600px) {

            .tc-header-style1 h1.js-title {
                font-size: 34px !important;
                line-height: 1.1 !important;
                letter-spacing: -0.3px !important;
                margin-bottom: 15px !important;
            }

            .tc-header-style1 .info {
                padding-bottom: 70px;
            }

            .tc-header-style1 .info p {
                font-size: 15px !important;
                line-height: 1.35 !important;
                margin-bottom: 25px !important;
            }

            .tc-header-style1 .swiper-pagination {
                bottom: 15px !important;
            }
        }


        /* =========================================================
   HERO - PANTALLAS REALMENTE BAJAS
   ========================================================= */

        @media (min-width: 769px) and (max-height: 450px) {

            .tc-header-style1 h1.js-title {
                font-size: 28px !important;
                line-height: 1.05 !important;
                letter-spacing: -0.2px !important;
                margin-bottom: 12px !important;
            }

            .tc-header-style1 .info {
                padding-bottom: 60px;
            }

            .tc-header-style1 .info p {
                font-size: 13px !important;
                line-height: 1.25 !important;
                margin-bottom: 15px !important;
            }

            .tc-header-style1 .swiper-pagination {
                bottom: 10px !important;
            }
        }






        .col-100 {
            width: 100%;
        }

        @media (min-width: 768px) {
            .col-md-6 {
                width: 50% !important;
            }
        }

        /* --- ESTILOS COMPONENTES EXISTENTES --- */
        .btn-luxury-green {
            display: inline-flex;
            align-items: center;
            background-color: transparent;
            color: #ffffff;
            border: 1px solid #2ecc71;
            padding: 14px 28px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn-luxury-green:hover {
            background-color: #2ecc71;
            color: #181713;
            box-shadow: 0 10px 20px rgba(46, 204, 113, 0.15);
        }

        .btn-luxury-green:hover i {
            transform: translateX(4px);
        }

        .btn-luxury-green i,
        .btn-luxury-black i {
            font-size: 14px;
            transition: transform 0.3s ease;
        }

        /* --- NUEVOS ESTILOS PARA FORMULARIO Y BOTÓN NEGRO --- */

        /* Campos de rellenado transparentes con borde verde oscuro */
        .form-control-luxury,
        .form-select-luxury {
            width: 100%;
            background-color: transparent !important;
            border: 1px solid #1e3d2f !important;
            /* Verde oscuro elegante */
            border-radius: 0px !important;
            /* Estilo arquitectónico minimalista sin esquinas redondeadas */
            padding: 14px 18px;
            font-size: 14px;
            color: #181713 !important;
            outline: none;
            transition: all 0.3s ease;
        }

        /* Manejo del color del texto de los placeholders */
        .form-control-luxury::placeholder {
            color: #181713;
            opacity: 0.5;
        }

        /* Estilo específico para simular el placeholder en el select html */
        .form-select-luxury {
            color: rgba(24, 23, 19, 0.5);
            appearance: none;
            /* Quita la flecha nativa fea del navegador */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23181713' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3Csvg%3E");
            background-repeat: no-repeat;
            background-position: right 18px center;
            background-size: 12px;
        }

        /* Cambiar el color del select cuando el usuario ya elige una opción válida */
        .form-select-luxury:valid {
            color: #181713 !important;
        }

        /* Efecto Focus al hacer click en los campos */
        .form-control-luxury:focus,
        .form-select-luxury:focus {
            border-color: #181713 !important;
            /* El borde se oscurece al activarse */
            box-shadow: none !important;
        }

        /* El Textarea no se puede deformar */
        textarea.form-control-luxury {
            resize: none;
        }

        /* Botón Negro con Letras Blancas */
        .btn-luxury-black {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #181713;
            color: #ffffff;
            border: 1px solid #181713;
            padding: 16px 28px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            width: 100%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-luxury-black:hover {
            background-color: #2b2924;
            /* Un tono aclarado sutil en el hover */
            border-color: #2b2924;
        }

        .btn-luxury-black:hover i {
            transform: translateX(4px);
        }

        /* Ajustes responsivos */
        @media (max-width: 767px) {
            .sm-h-350px {
                height: 350px !important;
            }
        }

        @media (max-width: 575px) {
            .xs-h-250px {
                height: 250px !important;
            }
        }