:root {
            --primary-bg: #121212;
            --primary-text: #ffffff;
            --primary-black: #000;
            --whatsapp-green: #25D366;
            --glass-bg: rgba(255, 255, 255, 0.04);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--primary-bg);
            color: var(--primary-text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* SPLASH SCREEN */
        .splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: var(--primary-black);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        .splash-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .splash-logo {
            width: 200px;
            height: auto;
            animation: splashZoom 2s ease-out forwards;
        }

        @keyframes splashZoom {
            0% { transform: scale(0.8); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
            70% { transform: scale(1.05); }
            100% { transform: scale(0.95); filter: drop-shadow(0 10px 20px rgba(255,255,255,0.3)); }
        }

        /* HEADER STICKY */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(0,0,0,0.25);
            backdrop-filter: blur(8px);
            z-index: 1000;
            padding: 1rem 2rem;
            transition: all 0.3s ease;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }

        .header-logo {
            height: clamp(28px, 4.2vw, 40px);
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-link {
            color: var(--primary-text);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: color 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-text);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link[aria-current="page"]::after {
            width: 100%;
        }

        .social-icons {
            display: flex;
            gap: 1rem;
        }

        .social-icon {
            width: 24px;
            height: 24px;
            filter: none;
            transition: transform 0.3s ease;
        }

        .social-icon:hover {
            transform: scale(1.1);
        }

        /* Mobile Menu */
        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            gap: 4px;
            cursor: pointer;
        }

        .mobile-menu-line {
            width: 25px;
            height: 3px;
            background: var(--primary-text);
            transition: all 0.3s ease;
        }

        .mobile-menu-toggle.active .mobile-menu-line:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .mobile-menu-toggle.active .mobile-menu-line:nth-child(2) {
            opacity: 0;
        }

        .mobile-menu-toggle.active .mobile-menu-line:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }

        /* HERO SECTION */
        .hero {
            position: relative;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: -3;
            animation: heroZoom 15s ease-out infinite;
        }

        @keyframes heroZoom {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.48); /* uniform transparent black curtain */
    z-index: -2;
}


        .hero-logo {
            width: clamp(180px, 28vw, 380px);
            height: auto;
            opacity: 0;
            transform: scale(0.8);
            transition: all 1s ease;
        }

        .hero-logo.visible {
            opacity: 1;
            transform: scale(1);
        }

        /* GALLERY SLIDER */
        .gallery-slider {
            overflow: hidden;
            padding: 2rem 0;
            background: var(--primary-bg);
        }

        .gallery-track {
            display: flex;
            gap: 1rem;
            animation: marquee 50s linear infinite;
        }

        .gallery-item {
            flex-shrink: 0;
            height: clamp(180px, 40vw, 500px);
            width: auto;
            border-radius: 10px;
            object-fit: cover;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .gallery-item:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 10px 30px rgba(255,255,255,0.2));
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* MESSAGE SECTION */
        .message-section {
            text-align: center;
            padding: 5rem 2rem;
            background: var(--primary-bg);
        }

        .message-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 600;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .message-subtitle {
            font-size: clamp(1.2rem, 3vw, 1.8rem);
            font-weight: 300;
            color: rgba(255,255,255,0.8);
        }

        /* MAP PROJECT SECTION */
        .map-section {
            padding: 5rem 2rem;
            position: relative;
            background: var(--primary-bg);
        }

        .map-container {
max-width: clamp(960px, 85vw, 1600px);
  margin: 0 auto;
}

        .map-image {
width: 100%;
  max-width: none;
  display: block;
  height: auto;
  margin: 0;

  border-radius: 16px;
}

        .map-label {
            position: absolute;
            background: var(--glass-border);
            backdrop-filter: blur(10px);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .map-label:hover {
            transform: scale(1.08);
        }

        .stats-card {
            position: absolute;
            top: 13%;
            left: 16%;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            padding: 1.5rem;
            border-radius: 16px;
            border: 1px solid var(--glass-border);
        }

        .counter {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-text);
        }

        /* INFRASTRUCTURE SECTION */
        .infrastructure {
            padding: 5rem 2rem;
            background: var(--primary-bg);
        }

        .section-title {
            text-align: center;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .section-subtitle {
            text-align: center;
            font-size: clamp(1rem, 2.5vw, 1.3rem);
            font-weight: 300;
            color: rgba(255,255,255,0.8);
            margin-bottom: 3rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .infrastructure-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .infrastructure-card {
            background: var(--glass-bg);
            padding: 2rem 1.5rem;
            border-radius: 16px;
            border: 1px solid var(--glass-border);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
        }

        .infrastructure-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(255,255,255,0.1);
        }

        .infrastructure-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 1rem;
            filter: none;
        }

        .infrastructure-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .infrastructure-text {
            font-size: 0.95rem;
            color: rgba(255,255,255,0.8);
            line-height: 1.5;
        }

        /* SPACES SECTION */
        .spaces {
            padding: 5rem 2rem;
            background: var(--primary-bg);
        }

        /* Carousel */
        .carousel-container {
            position: relative;
            max-width: 1000px;
            margin: 3rem auto;
        }

        .carousel {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            aspect-ratio: 16/9;
        }

        .carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .carousel-slide.active {
            opacity: 1;
        }

        .carousel-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .carousel-text {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 2rem;
            color: var(--primary-text);
            font-size: 1.2rem;
            font-weight: 500;
        }

        .carousel-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            padding: 0 1rem;
        }

        .carousel-btn {
            background: rgba(0,0,0,0.6);
            border: none;
            color: var(--primary-text);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .carousel-btn:hover {
            background: rgba(0,0,0,0.8);
            transform: scale(1.1);
        }

        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .carousel-dot.active {
            background: var(--primary-text);
        }

        /* Amenities Grid */
        .amenities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 2rem;
            max-width: 900px;
            margin: 3rem auto;
        }

        .amenity-item {
            text-align: center;
        }

        .amenity-icon {
            width: clamp(72px, 8vw, 110px);
            height: clamp(72px, 8vw, 110px);
            margin-bottom: 1rem;
            filter: none;
            transition: transform 0.3s ease;
        }

        .amenity-item:hover .amenity-icon {
            transform: scale(1.1);
        }

        .amenity-name {
            font-size: 1rem;
            font-weight: 500;
        }

        /* Location Block */
        .location-block {
            display: flex;
            gap: 3rem;
            align-items: center;
            max-width: 1200px;
            margin: 5rem auto;
            background: url('../img/fondo2.jpg') center/cover;
            background-attachment: fixed;
            padding: 4rem 2rem;
            border-radius: 16px;
            position: relative;
        }

        .location-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            border-radius: 16px;
        }

        .location-map {
            flex: 1;
            position: relative;
            z-index: 2;
        }

        .location-map img {
            width: 100%;
            height: auto;
            border-radius: 16px;
        }

        .location-info {
            flex: 1;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.2);
            position: relative;
            z-index: 2;
        }

        .location-title {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .location-text {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 2rem;
            color: rgba(255,255,255,0.9);
        }

        .btn-primary {
            background: var(--primary-text);
            color: var(--primary-bg);
            padding: 1rem 2rem;
            border: none;
            border-radius: 999px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255,255,255,0.2);
        }

        /* COMMERCIAL SECTION */
        .commercial {
            padding: 5rem 2rem;
            background: url('../img/fondo-comercial.jpg') center/cover;
            background-attachment: fixed;
            position: relative;
        }

        .commercial::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
        }

        .commercial-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .commercial-pretitle {
            font-size: 1.2rem;
            font-weight: 400;
            color: rgba(255,255,255,0.8);
            margin-bottom: 0.5rem;
        }

        .commercial-title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            margin-bottom: 2rem;
        }

        .commercial-data {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .commercial-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 3rem;
        }

        .btn-secondary {
            background: transparent;
            color: var(--primary-text);
            padding: 1rem 2rem;
            border: 2px solid var(--primary-text);
            border-radius: 999px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background: var(--primary-text);
            color: var(--primary-bg);
        }

        /* VIRTUAL TOURS */
        .virtual-tours {
            padding: 5rem 2rem;
            background: var(--primary-bg);
        }

        .tours-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 3rem;
            max-width: 1400px;
            margin: 3rem auto;
        }

        .tour-card {
            position: relative;
            width: 100%;
            max-width: 720px;
            aspect-ratio: 16/9;
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
        }

        .tour-iframe {
            width: 100%;
            height: 100%;
            border: none;
            transition: transform 0.3s ease;
        }

        .tour-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            font-weight: 600;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tour-card:hover .tour-overlay {
            opacity: 1;
        }

        .tour-card:hover .tour-iframe {
            transform: scale(1.05);
        }

        /* ABOUT SECTION */
        .about {
            padding: 5rem 2rem;
            background: var(--primary-bg);
        }

        .about-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .about-text {
            font-size: 1.1rem;
            line-height: 1.8;
            color: rgba(255,255,255,0.9);
        }

        .logos-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            align-items: center;
        }

        .logo-item {
            height: 60px;
            filter: brightness(0) invert(1);
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }

        .logo-item:hover {
            opacity: 1;
        }

        .logo-pentamar {
            grid-column: 1 / -1;
            justify-self: center;
        }

        /* CONTACT FORM */
        .contact {
            padding: 5rem 2rem;
            background: var(--primary-bg);
        }

        .contact-form {
            max-width: 600px;
            margin: 3rem auto;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-input,
        .form-textarea {
            background: transparent;
            border: 1px solid var(--primary-text);
            border-radius: 10px;
            padding: 1rem;
            color: var(--primary-text);
            font-family: inherit;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            border-color: rgba(255,255,255,0.8);
        }

        .form-input::placeholder,
        .form-textarea::placeholder {
            color: rgba(255,255,255,0.6);
        }

        .form-textarea {
            resize: vertical;
            min-height: 120px;
        }

        .form-submit {
            width: 100%;
            background: var(--primary-text);
            color: var(--primary-bg);
            border: none;
            border-radius: 999px;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .form-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255,255,255,0.2);
        }

        /* FOOTER */
        .footer {
            background: var(--primary-black);
            padding: 3rem 2rem 1rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-section h4 {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .footer-section a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            display: block;
            margin-bottom: 0.5rem;
            transition: color 0.3s ease;
        }

        .footer-section a:hover {
            color: var(--primary-text);
        }

        .footer-social {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .footer-social img {
            width: 24px;
            height: 24px;
            filter: none;
            transition: transform 0.3s ease;
        }

        .footer-social img:hover {
            transform: scale(1.1);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.6);
        }

        /* WHATSAPP BUTTON */
        .whatsapp-float {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            background: var(--whatsapp-green);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1100;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            transition: all 0.3s ease;
        }

        .whatsapp-float:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
        }

        .whatsapp-float img {
            width: 30px;
            height: 30px;
        }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                height: calc(100vh - 70px);
                background: rgba(0,0,0,0.95);
                backdrop-filter: blur(10px);
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                padding-top: 3rem;
                z-index: 999;
            /* Commercial buttons full-width on mobile */
            .commercial-buttons a {
                width: min(92%, 420px);
            }

            }

            .nav-menu.active {
                display: flex;
            }

            .nav-menu li {
                margin: 1rem 0;
            }

            .nav-link {
                font-size: 1.2rem;
                padding: 1rem;
            }

            .social-icons {
                display: none;
            }

            .mobile-menu-toggle {
                display: flex;
            }

            .header {
                padding: 1rem;
            }

            .gallery-item {
                height: 180px;
            }

            /* Map section mobile fixes */
            .map-section {
                padding: 3rem 1rem;
            }

            .map-image {
                width: 100%;
            }

            .map-label {
                font-size: 0.7rem;
                padding: 0.3rem 0.6rem;
                border-radius: 15px;
            }

            .stats-card {
                position: relative;
                top: auto;
                left: auto;
                margin: 2rem auto 0;
                max-width: 200px;
            }

            .location-block {
                flex-direction: column;
                text-align: center;
                margin: 3rem auto;
                padding: 2rem 1rem;
            }

            .location-block::before {
                border-radius: 16px;
            }

            .about-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .commercial-buttons {
                flex-direction: column;
                align-items: center;
            }

            .tours-container {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .footer-content {
                grid-template-columns: 1fr;
            }

            .amenities-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .infrastructure-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Utility Classes */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .text-center {
            text-align: center;
        }

        .hidden {
            display: none;
        }
    
/* Soft bottom shadow to transition from hero to next section */
.hero {
    position: relative;
}
.hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 140px; /* shadow height */
    background: linear-gradient(to bottom,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.25) 55%,
                rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: -1; /* above overlay (-2) but below content */
}



@media (max-width: 768px){
  .map-section,
  .map-container{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  .map-image{
    width: 100% !important;
    max-width: none !important;
    border-radius: 12px; /* mantenemos bordes en mobile */
    display: block;
  }
}



/* === MAPA: Mobile layout tweaks === */
@media (max-width: 768px){
  /* 1) Tarjeta flotante: dejarla debajo de la imagen */
  .map-section .stats-card{
    position: static !important;
    margin: 12px auto 0 !important;
    width: min(92%, 520px);
  }

  /* Asegura stacking correcto */
  .map-section .map-container{ position: relative; }
  .map-section .map-image{ display: block; }

  /* 2) Re-ubicación de etiquetas (overridea inline styles con !important) */
  .map-section .map-label{ transform: translate(-50%, -50%); }

  /* Orden en tu HTML:
     1 ÁREA COMERCIAL
     2 ESPACIOS DEPORTIVOS
     3 ESPACIO EDUCATIVO
     4 CLUB HOUSE
     5 ÁREAS VERDES
     6 ACCESO PRINCIPAL
     7 BICISENDA
  */

  /* Comercial */
  .map-section .map-container .map-label:nth-of-type(2){ left: 35% !important; top: 17% !important; }

  /* Deportivos */
  .map-section .map-container .map-label:nth-of-type(3){ left: 74% !important; top: 47% !important; }

  /* Educativo (sin dato, dejamos como estaba) */

  /* Club House */
  .map-section .map-container .map-label:nth-of-type(5){ left: 53% !important; top: 29% !important; }

  /* Áreas verdes */
  .map-section .map-container .map-label:nth-of-type(6){ left: 77% !important; top: 22% !important; }

  /* Acceso principal */
  .map-section .map-container .map-label:nth-of-type(7){ left: 81% !important; top: 33% !important; }

  /* Bicisenda */
  .map-section .map-container .map-label:nth-of-type(8){ left: 30% !important; top: 33% !important; }
}


/* Infraestructura: iconos blancos (sin afectar otros) */
section.infrastructure img.infrastructure-icon {
  filter: invert(1) brightness(1000%) !important;
}


@media (max-width: 768px){
  /* Infraestructura en mobile: 2 columnas x 3 filas, como Amenities */
  section.infrastructure .infrastructure-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem 1rem;
  }
  /* Ocultar descripciones, mantener título e icono */
  section.infrastructure .infrastructure-text{
    display: none !important;
  }
  /* Centrado de tarjetas para mejor balance visual */
  section.infrastructure .infrastructure-card{
    text-align: center;
  }
  section.infrastructure img.infrastructure-icon{
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
  }
}


@media (max-width: 768px){
  /* Centrado perfecto en mobile */
  section.infrastructure .infrastructure-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 14px;
    justify-items: center;   /* centra cada celda horizontalmente */
    align-items: start;      /* títulos alineados prolijos arriba */
  }
  section.infrastructure .infrastructure-card{
    display: flex;
    flex-direction: column;
    align-items: center;     /* centra icono + título dentro de la tarjeta */
    text-align: center;
    width: 100%;             /* evita “salirse” de la columna */
  }
  section.infrastructure img.infrastructure-icon{
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
    display: block;
  }
  section.infrastructure .infrastructure-title{
    margin: 0 0 2px 0;       /* ajusta respiración del título */
  }
  /* por si algún padding desplazaba visualmente */
  section.infrastructure .infrastructure-card > *{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


@media (max-width: 768px){
  /* Infra mobile: 2x3 sin desbordes, bien centrado */
  section.infrastructure { padding-inline: 16px; } /* gutter seguro */
  section.infrastructure .infrastructure-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* evita overflow por ancho intrínseco */
    gap: 12px;
    justify-items: stretch;  /* en lugar de center para que la tarjeta llene la columna */
    align-items: start;
  }
  section.infrastructure .infrastructure-card{
    width: 100% !important;  /* la tarjeta ocupa toda la columna */
    margin: 0 !important;     /* elimina márgenes laterales que sumaban con el gap */
    box-sizing: border-box;   /* incluye padding/border en el cálculo */
    text-align: center;
  }
  section.infrastructure .infrastructure-text{
    display: none !important; /* ocultar descripciones en mobile */
  }
  section.infrastructure .infrastructure-title{
    line-height: 1.1;
    overflow-wrap: anywhere;  /* títulos largos no rompen el layout */
    word-break: break-word;
    margin: 6px 0 0 0;
  }
  section.infrastructure img.infrastructure-icon{
    width: 56px; height: 56px;
    display: block;
    margin: 0 auto 8px;
  }
}


@media (max-width: 768px){
  /* Infra mobile: 2x3, tarjetas iguales en altura */
  section.infrastructure .infrastructure-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    justify-items: stretch;
    align-items: stretch; /* cada celda llena su pista */
  }
  section.infrastructure .infrastructure-card{
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;       /* centra icono + título verticalmente */
    min-height: 170px;             /* altura consistente para todas */
    padding: 16px;
    text-align: center;
  }
  section.infrastructure img.infrastructure-icon{
    width: 56px; height: 56px;
    display: block; margin: 0 auto 10px;
  }
  section.infrastructure .infrastructure-title{
    margin: 0;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: break-word;      /* evita cortes feos en medio de palabras */
    word-break: normal;
    hyphens: auto;
  }
}


/* === Amenities Desktop: 3x2 layout, icons & text slightly larger === */
@media (min-width: 1024px){
  .amenities-grid{
    grid-template-columns: repeat(3, 1fr) !important; /* 3 arriba, 3 abajo */
    max-width: 1100px;   /* ancho razonable para 3 columnas */
    margin-left: auto;
    margin-right: auto;
    gap: 1.75rem;
  }
  .amenity-item{
    text-align: center;
  }
  .amenity-icon{
    width: clamp(84px, 7vw, 120px);
    height: clamp(84px, 7vw, 120px);
  }
  .amenity-name{
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .2px;
  }
}


/* Fondo 'fondo2.jpg' desde Espacios comunes → Amenities (Ubicación ya lo tiene) */
section.spaces{
  background: url('../img/fondo2.jpg') center/cover no-repeat !important;
  background-color: transparent !important;
}
/* Aplicamos el fondo al contenedor de Amenities (la grilla) */
.amenities-grid{
  background: url('../img/fondo2.jpg') center/cover no-repeat !important;
  background-color: transparent !important;
}


/* === Limpieza de fondos/cajas en Amenities y Ubicación === */
/* Amenities: quitar cualquier fondo del contenedor de grilla */
.amenities-grid{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ubicación: quitar fondo propio y overlay */
.location-block{
  background: transparent !important;
  background-attachment: scroll !important;
}
.location-block::before{
  display: none !important;
}

/* Ubicación: quitar caja semitransparente (blur) de la tarjeta */
.location-info{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* === Espacios comunes: color de títulos y subtítulo === */
section.spaces .section-title,
section.spaces .section-subtitle{
  color: #292929 !important;
  text-shadow: none !important;
}


/* === Espacios comunes: color para nombres de amenidades === */
section.spaces .amenity-name{
  color: #292929 !important;
}


/* === Ubicación: título centrado a lo ancho y elementos abajo === */
.location-block{
  flex-wrap: wrap; /* permite que el h2 tome la primera fila y el resto baje */
}
.location-block > h2.section-title{
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
  margin: 0 0 2rem 0; /* separación como en otras secciones */
}


/* === Ubicación: tarjeta con fondo oscuro suave para legibilidad === */
.location-block .location-info{
  background: rgba(0,0,0,0.35) !important; /* oscuro claro */
  color: #fff;                               /* texto legible sobre fondo */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.location-block .location-title{
  margin-top: 0;
  margin-bottom: 10px;
}


/* === Ubicación: centrar título y botón dentro de la tarjeta === */
.location-block .location-info{
  text-align: center !important;
}
.location-block .location-title{
  text-align: center !important;
}
.location-block .location-info .btn-primary{
  display: inline-block !important;
  margin: 14px auto 0 !important;
}


/* === Ubicación (desktop): mapa grande + tarjeta superpuesta a la derecha === */
@media (min-width: 1024px){
  .location-block{
    position: relative;
    display: flex;
    flex-wrap: wrap;           /* H2 arriba, luego mapa */
    justify-content: center;   /* mapa centrado */
    padding-bottom: 64px;      /* espacio de seguridad bajo la superposición */
  }
  .location-block > h2.section-title{
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    margin: 0 0 2rem 0;
  }
  .location-map{
    position: relative;
    z-index: 1;
  }
  .location-map img{
    width: clamp(820px, 62vw, 1180px);
    height: auto;
    border-radius: 20px;
    display: block;
  }
  .location-info{
    position: absolute;
    right: max(48px, 8vw);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(320px, 24vw, 420px);
    z-index: 2;
  }
}


/* === Ubicación (desktop) – ajuste: mapa aún más grande y tarjeta más a la derecha === */
@media (min-width: 1024px){
  .location-map img{
    width: clamp(920px, 66vw, 1280px) !important; /* + tamaño */
  }
  .location-info{
    right: clamp(12px, 4vw, 40px) !important;     /* pega más a la derecha */
    top: 52% !important;                           /* leve ajuste vertical */
    width: clamp(340px, 26vw, 460px) !important;   /* un toque más ancha */
  }
}


/* === Ubicación (desktop) – mapa más a la izquierda, tarjeta más a la derecha y centrada === */
@media (min-width: 1024px){
  .location-map{
    position: relative;
    left: -6vw;                 /* empuja el mapa hacia la izquierda */
  }
  .location-map img{
    width: clamp(920px, 66vw, 1280px) !important;
  }
  .location-info{
    position: absolute;
    right: clamp(0px, 2vw, 32px) !important; /* más a la derecha */
    top: 50% !important;                     /* centrada verticalmente */
    transform: translateY(-50%) !important;
    width: clamp(340px, 26vw, 460px) !important;
    z-index: 2;
  }
}


/* === Ubicación (desktop) – mapa más a la izquierda y un poco más abajo; tarjeta más a la derecha === */
@media (min-width: 1024px){
  .location-map{
    position: relative;
    left: -9vw !important;     /* MÁS a la izquierda */
    margin-top: 24px !important; /* un poco más abajo */
  }
  .location-info{
    right: 0 !important;       /* pegar a la derecha */
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}


@media (min-width: 1024px){
  .location-info{
    top: 60% !important;   /* bajar la tarjeta */
    transform: translateY(-50%) !important;
  }
}


/* === Ubicación (desktop): sombra sutil en el mapa + animaciones de entrada === */
@media (min-width: 1024px){
  .location-map img{
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  }

  /* Estado inicial antes de hacerse visible */
  .location-block .location-map,
  .location-block .location-info{
    will-change: transform, opacity;
  }
  .location-block:not(.is-visible) .location-map{
    opacity: 0;
    transform: translateX(-40px);
  }
  .location-block:not(.is-visible) .location-info{
    opacity: 0;
    transform: translateX(40px);
  }

  /* Al volverse visible, reproducir animaciones complementarias */
  .location-block.is-visible .location-map{
    animation: slideInLeft 700ms ease-out forwards;
  }
  .location-block.is-visible .location-info{
    animation: slideInRight 700ms ease-out 120ms forwards;
  }

  @keyframes slideInLeft{
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideInRight{
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* Accesibilidad: respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .location-block .location-map,
  .location-block .location-info{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* === Ubicación (mobile): imagen full width y tarjeta debajo, más organizada === */
@media (max-width: 768px){
  .location-block{
    display: block;
    padding: 0 16px 24px; /* gutters y respiro inferior */
  }
  .location-map{
    position: relative;
    left: 0 !important;
    margin: 0;
  }
  .location-map img{
    width: 100% !important;
    height: auto;
    border-radius: 12px;
    display: block;
  }
  .location-info{
    position: static !important;      /* tarjeta debajo del mapa */
    width: 100%;
    max-width: 680px;
    margin: 12px auto 0;
    text-align: center;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .location-title{
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    line-height: 1.2;
  }
  .location-info p{
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
  .location-info .btn-primary{
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 12px auto 0;
  }
}


/* === Ubicación (mobile): imagen y tarjeta al 90% de ancho, tipografías proporcionadas === */
@media (max-width: 768px){
  .location-block{
    padding: 0 0 24px !important; /* sin gutters laterales, centramos con margin auto */
  }
  .location-map{
    position: relative;
    left: 0 !important;
    margin: 0;
  }
  .location-map img{
    width: 90% !important;
    height: auto;
    display: block;
    margin: 0 auto !important;
    border-radius: 12px;
  }
  .location-info{
    position: static !important;
    width: 90% !important;
    max-width: none !important;
    margin: 12px auto 0 !important;
    text-align: center;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .location-title{
    margin: 0 0 8px 0;
    font-size: 1.05rem !important;
    line-height: 1.2;
  }
  .location-info p{
    margin: 0;
    font-size: 0.95rem !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
  .location-info .btn-primary{
    display: block;
    width: 90% !important;
    max-width: none !important;
    margin: 12px auto 0 !important;
  }
}


/* === Ubicación (mobile): usar viewport width para lograr 95% real del ancho === */
@media (max-width: 768px){
  /* Rompemos el límite del contenedor si lo hubiera */
  .location-block{
    padding: 0 0 24px !important;
  }
  .location-map img{
    width: 95vw !important;          /* 95% del viewport, no del contenedor */
    max-width: none !important;
    height: auto;
    display: block;
    margin: 0 auto !important;
    border-radius: 12px;
  }
  .location-info{
    position: static !important;
    width: 95vw !important;          /* tarjeta también al 95% del viewport */
    max-width: none !important;
    margin: 12px auto 0 !important;
    text-align: center;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .location-title{
    margin: 0 0 8px 0;
    font-size: 1.02rem !important;   /* leve ajuste proporcional */
    line-height: 1.25;
  }
  .location-info p{
    margin: 0;
    font-size: 0.94rem !important;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
  .location-info .btn-primary{
    display: block;
    width: 92% !important;           /* botón un poco más estrecho para respiración */
    max-width: none !important;
    margin: 12px auto 0 !important;
  }
}


/* === Ubicación (mobile): centrar realmente al viewport (ignora paddings del contenedor) === */
@media (max-width: 768px){
  .location-block{ padding: 0 0 24px !important; }
  /* Truco: 95vw centrado con márgenes simétricos respecto al viewport */
  .location-map img,
  .location-info{
    width: 95vw !important;
    max-width: none !important;
    margin-left: calc(50% - 47.5vw) !important;
    margin-right: calc(50% - 47.5vw) !important;
  }
  .location-info .btn-primary{
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* === Conocé Rialto (desktop): iframes más grandes === */
@media (min-width: 1024px){
  .virtual-tours .tours-container{
    grid-template-columns: repeat(2, minmax(560px, 1fr));
    max-width: 1400px; /* mantiene el ancho total */
    gap: 3rem;
  }
  .virtual-tours .tour-card{
    max-width: none;     /* permite ocupar toda la columna */
    aspect-ratio: 16/9;  /* conservamos proporción */
    border-radius: 18px; /* leve mejora estética */
  }
}


/* === Conocé Rialto: iframes más grandes (desktop) y 95% en mobile === */

/* Desktop */
@media (min-width: 1024px){
  .virtual-tours .tours-container{
    grid-template-columns: repeat(2, minmax(640px, 1fr)); /* más anchos */
    max-width: 1600px;  /* permite crecer más */
    gap: 3rem;
  }
  .virtual-tours .tour-card{
    max-width: none;
    aspect-ratio: 16/9;
    border-radius: 18px;
  }
}

/* Mobile */
@media (max-width: 768px){
  .virtual-tours .tours-container{ gap: 1.25rem; }
  .virtual-tours .tour-card{
    width: 95vw !important;
    max-width: none !important;
    margin-left: calc(50% - 47.5vw) !important;
    margin-right: calc(50% - 47.5vw) !important;
    border-radius: 12px;
  }
  .virtual-tours .tour-card iframe{
    width: 100% !important;
    height: 100% !important;
  }
}


/* === Conocé Rialto (mobile): centrar al viewport y eliminar paddings del contenedor === */
@media (max-width: 768px){
  .virtual-tours,
  .virtual-tours .tours-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .virtual-tours .tours-container{
    grid-template-columns: 1fr;   /* una columna */
    justify-items: stretch;       /* deja que el item use su propio ancho */
    gap: 1rem;
  }
  .virtual-tours .tour-card{
    width: 95vw !important;
    max-width: none !important;
    margin-left: calc(50% - 47.5vw) !important;
    margin-right: calc(50% - 47.5vw) !important;
  }
  .virtual-tours .tour-card iframe{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}


/* === Conocé Rialto (desktop): centrar grilla y tarjetas, eliminar desplazamientos laterales === */
@media (min-width: 1024px){
  .virtual-tours{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .virtual-tours .tours-container{
    max-width: 1600px;
    margin-left: auto;         /* centra el contenedor */
    margin-right: auto;
    grid-template-columns: repeat(2, minmax(680px, 1fr)); /* más anchas */
    gap: 3rem;
    justify-items: center;     /* centra cada tarjeta dentro de su columna */
  }
  .virtual-tours .tour-card{
    width: min(46vw, 760px);   /* ancho estable y centrado dentro de la columna */
    max-width: 760px;
  }
  .virtual-tours .tour-card iframe{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}


/* === Conocé Rialto (desktop): centrar grilla de verdad y hacerla más grande === */
@media (min-width: 1024px){
  .virtual-tours{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .virtual-tours .tours-container{
    max-width: 1720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, minmax(720px, 1fr)) !important;
    gap: 3.5rem !important;
    justify-content: center !important;  /* centra las pistas dentro del contenedor */
    justify-items: stretch !important;   /* cada tarjeta ocupa toda su pista */
  }
  .virtual-tours .tour-card{
    width: 100% !important;   /* ocupar toda la columna */
    max-width: 860px !important;
    margin: 0 !important;
  }
  .virtual-tours .tour-card iframe{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}


/* === Conocé Rialto (desktop): centrar usando el .container de la sección === */
@media (min-width: 1024px){
  .virtual-tours .container{
    max-width: 1720px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .virtual-tours .tours-container{
    grid-template-columns: repeat(2, minmax(720px, 1fr)) !important;
    gap: 3rem !important;
    justify-content: center !important; /* centra las columnas cuando sobra espacio */
  }
  .virtual-tours .tour-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: 16/9;
    border-radius: 18px;
  }
  .virtual-tours .tour-card iframe{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}


/* === Conocé Rialto (desktop): centrado milimétrico y tamaño visible === */
@media (min-width: 1024px){
  .virtual-tours, .virtual-tours .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .virtual-tours .tours-container{
    /* centrado contra el viewport, sin depender de contenedores padres */
    --tour-col: clamp(560px, 36vw, 780px);
    --tour-gap: 3rem;
    width: min(92vw, 1720px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, var(--tour-col)) !important;
    gap: var(--tour-gap) !important;
    justify-content: center !important;   /* centra las pistas */
    justify-items: stretch !important;    /* cada tarjeta llena su pista */
  }
  .virtual-tours .tour-card{
    width: var(--tour-col) !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: 16/9;
    border-radius: 18px;
  }
  .virtual-tours .tour-card iframe{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}


/* === Conocé Rialto (desktop): iframes un poquito más grandes === */
@media (min-width: 1024px){
  .virtual-tours .tours-container{
    --tour-col: clamp(600px, 38vw, 820px) !important; /* +tamaño sutil */
    width: min(94vw, 1800px) !important;              /* permite crecer un poco más */
    gap: 3.25rem !important;
  }
  .virtual-tours .tour-card{
    width: var(--tour-col) !important;
  }
}


/* === Espacios (carousel): tamaños mayores en desktop y 95% en mobile === */
@media (min-width: 1024px){
  .spaces .carousel-container{
    max-width: 1400px;
    width: min(94vw, 1400px);
    margin-left: auto;
    margin-right: auto;
  }
  .spaces .carousel{
    border-radius: 18px;
  }
}
@media (max-width: 768px){
  .spaces .carousel-container{
    width: 95vw;
    max-width: none;
    margin-left: calc(50% - 47.5vw);
    margin-right: calc(50% - 47.5vw);
  }
  .spaces .carousel{
    border-radius: 12px;
  }
}


/* === Espacios: corrección de centrado (desktop y mobile) === */
@media (min-width: 1024px){
  .spaces .container{
    max-width: 1720px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .spaces .carousel-container{
    max-width: 1600px !important;
    width: min(94vw, 1600px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 768px){
  /* mantener 95% real del viewport y centrado */
  .spaces .carousel-container{
    width: 95vw !important;
    max-width: none !important;
    margin-left: calc(50% - 47.5vw) !important;
    margin-right: calc(50% - 47.5vw) !important;
  }
}


/* === Espacios (carousel): ocultar cualquier texto/overlay inferior === */
.spaces .carousel .carousel-text{ display:none !important; }


/* === Espacios (carousel): dots oscuros === */
.spaces .carousel-dot{
  background: rgba(0,0,0,0.45) !important;
}
.spaces .carousel-dot.active{
  background: #292929 !important;
}


/* === Quiénes somos: íconos un poco más grandes y sin efecto apagado === */
.container .logos-grid .logo-item{
  opacity: 1 !important;           /* quitar efecto apagado */
}
@media (min-width: 1024px){
  .container .logos-grid .logo-item{
    height: 72px !important;       /* +20% aprox. desde 60px */
  }
}
@media (max-width: 768px){
  .container .logos-grid .logo-item{
    height: 64px !important;       /* leve aumento en mobile */
  }
}


/* === WhatsApp FAB: fondo negro, sin glow, ícono casi a tamaño completo === */
.whatsapp-float{
  background: #000 !important;
  box-shadow: none !important;
}
.whatsapp-float:hover{
  background: #000 !important;
  box-shadow: none !important;
  transform: none !important; /* sin "iluminación"/efecto */
}
.whatsapp-float img{
  width: 48px !important;   /* casi el tamaño del fondo (60px) */
  height: 48px !important;
}


/* === WhatsApp FAB: botón e ícono más grandes y centrados === */
.whatsapp-float{
  background: #000 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;   /* desktop por defecto */
  height: 80px !important;
  border-radius: 50% !important;
  bottom: 20px !important;  /* mismos offsets */
  right: 20px !important;
}
.whatsapp-float img{
  width: 84% !important;     /* escala con el botón */
  height: 84% !important;
  display: block !important;
}

/* Mobile: un toque más chico pero más grande que antes */
@media (max-width: 768px){
  .whatsapp-float{
    width: 72px !important;
    height: 72px !important;
    bottom: 18px !important;
    right: 18px !important;
  }
  .whatsapp-float img{
    width: 86% !important;
    height: 86% !important;
  }
}

/* XL screens: permite un poco más si querés un look más contundente */
@media (min-width: 1440px){
  .whatsapp-float{
    width: 86px !important;
    height: 86px !important;
  }
}


/* === Espacios (carousel): mostrar la imagen completa (sin zoom/crop) === */
.spaces .carousel{
  aspect-ratio: 16/9;                 /* contenedor con proporción fija */
  background: #000;                    /* letterbox neutro si hiciera falta */
}
.spaces .carousel-slide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;      /* antes: cover -> recortaba/“zoom” */
  image-rendering: auto;
}


/* === Contacto: botón centrado, no full width y con más espacio respecto a Mensaje === */
.contact-form .form-textarea{
  margin-bottom: 12px !important;  /* separa el botón del textarea */
  display: block;
}
.contact-form .form-submit{
  width: auto !important;          /* deja de ocupar 100% */
  min-width: 220px;                 /* tamaño cómodo */
  display: block;                   /* permite centrar con margin auto */
  margin: 14px auto 0 !important;   /* centrado + aire superior */
  padding: 0.9rem 2rem;             /* consistente con el estilo pill */
}


/* === Ubicación: tarjeta blanca translúcida con textos negros (cambio mínimo) === */
.location-block .location-info{
  background: rgba(255,255,255,0.85) !important; /* blanco transparente */
  color: #292929 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;  /* sutil delineado */
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);       /* mantiene legibilidad */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.location-block .location-info .location-title,
.location-block .location-info .location-text,
.location-block .location-info p{
  color: #292929 !important;
}


/* === Ubicación (tarjeta): botón negro con texto blanco + nudge a la izquierda (solo desktop) === */
.location-block .location-info .btn-primary{
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
.location-block .location-info .btn-primary:hover,
.location-block .location-info .btn-primary:focus{
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12) !important; /* focus ring suave */
}

@media (min-width: 1024px){
  /* Pequeño desplazamiento hacia la izquierda sin tocar mobile */
  .location-block .location-info{
    transform: translate(-12px, -50%) !important; /* antes: translateY(-50%) */
  }
}


/* === Ubicación (desktop): tarjeta más ancha, sin tocar mobile === */
@media (min-width: 1024px){
  .location-block .location-info{
    width: clamp(520px, 34vw, 680px) !important;  /* más ancha, altura baja un poco naturalmente */
    max-width: none !important;
    padding: 22px 28px !important;                /* mantiene aire al crecer */
  }
}


/* === Hero (desktop): logo x3 del tamaño actual, sin tocar mobile === */
@media (min-width: 1024px){
  .hero-logo{
    /* 3× aprox. del max actual (380px): 1140px, con límite por viewport */
    width: clamp(540px, 60vw, 1140px) !important;
    height: auto !important;
  }
}


/* === Mapa Proyecto (solo mobile): reubicación de etiquetas + stats en fila === */
@media (max-width: 768px){
  /* Reposicionamiento preciso de labels por orden de aparición */
  .map-section .map-container > .map-label:nth-of-type(1){ top:16% !important; left:31% !important; } /* Área Comercial */
  .map-section .map-container > .map-label:nth-of-type(2){ top:37% !important; left:57% !important; } /* Espacios deportivos */
  .map-section .map-container > .map-label:nth-of-type(3){ top:44% !important; left:29% !important; } /* Espacio educativo */
  .map-section .map-container > .map-label:nth-of-type(4){ top:25% !important; left:27% !important; } /* Club House */
  .map-section .map-container > .map-label:nth-of-type(5){ top:21% !important; left:54% !important; } /* Áreas Verdes */
  .map-section .map-container > .map-label:nth-of-type(6){ top:29% !important; left:69% !important; } /* Acceso Principal */
  .map-section .map-container > .map-label:nth-of-type(7){ top:34% !important; left:13% !important; } /* Bicisenda */

  /* Contadores: de columna a fila (uno al lado del otro) */
  .map-section .stats-card{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
  }
  .map-section .stats-card > div{
    margin-top: 0 !important;
  }
}


/* === Mapa Proyecto (mobile): stats-card un poco más ancha y centrada === */
@media (max-width: 768px){
  .map-section .stats-card{
    width: 95vw !important;
    max-width: none !important;
    margin-left: calc(50% - 47.5vw) !important;
    margin-right: calc(50% - 47.5vw) !important;
    padding: 14px 16px !important; /* leve ajuste de aire */
    border-radius: 14px !important;
  }
}


/* === Mapa Proyecto (mobile): centrar números y textos en la tarjeta === */
@media (max-width: 768px){
  .map-section .stats-card{
    justify-content: center !important;
    text-align: center !important;
  }
  .map-section .stats-card > div{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .map-section .stats-card .counter{
    display: block;
    line-height: 1.1;
    text-align: center !important;
  }
  .map-section .stats-card > div > div:last-child{
    text-align: center !important; /* etiqueta debajo del número */
  }
}


/* === FINAL CONSOLIDATED OVERRIDES (safe, non-destructive) === */

/* Hero logo (desktop): 3× tamaño aprox */
@media (min-width: 1024px){
  .hero-logo{
    width: clamp(540px, 60vw, 1140px);
    height: auto;
  }
}

/* Ubicación (desktop): tarjeta blanca translúcida + botón negro + más ancha + leve nudge a la izquierda */
@media (min-width: 1024px){
  .location-block .location-info{
    background: rgba(255,255,255,0.85);
    color: #292929;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: clamp(520px, 34vw, 680px);
    max-width: none;
    padding: 22px 28px;
    transform: translate(-12px, -50%);
  }
  .location-block .location-info h3,
  .location-block .location-info p{
    color: #292929;
  }
  .location-block .location-info .btn-primary{
    background: #000;
    border-color: #000;
    color: #fff;
  }
  .location-block .location-info .btn-primary:hover,
  .location-block .location-info .btn-primary:focus{
    background: #111;
    border-color: #111;
    color: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
  }
}

/* Mapa del Proyecto (mobile): posiciones y tarjeta contadores en fila y centrada */
@media (max-width: 768px){
  .map-section .map-container > .map-label:nth-of-type(1){ top:16% !important; left:31% !important; }  /* Área Comercial */
  .map-section .map-container > .map-label:nth-of-type(2){ top:37% !important; left:57% !important; }  /* Espacios deportivos */
  .map-section .map-container > .map-label:nth-of-type(3){ top:44% !important; left:29% !important; }  /* Espacio educativo */
  .map-section .map-container > .map-label:nth-of-type(4){ top:25% !important; left:27% !important; }  /* Club House */
  .map-section .map-container > .map-label:nth-of-type(5){ top:21% !important; left:54% !important; }  /* Áreas Verdes */
  .map-section .map-container > .map-label:nth-of-type(6){ top:29% !important; left:69% !important; }  /* Acceso Principal */
  .map-section .map-container > .map-label:nth-of-type(7){ top:34% !important; left:13% !important; }  /* Bicisenda */

  .map-section .stats-card{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 95vw !important;
    max-width: none !important;
    margin-left: calc(50% - 47.5vw) !important;
    margin-right: calc(50% - 47.5vw) !important;
    gap: 1.25rem;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    text-align: center !important;
  }
  .map-section .stats-card > div{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    text-align: center !important;
  }
  .map-section .stats-card .counter{
    display: block;
    line-height: 1.1;
    text-align: center !important;
  }
  .map-section .stats-card > div > div:last-child{
    text-align: center !important;
  }
}

/* Espacios (carousel): mostrar imagen completa sin recorte */
.spaces .carousel{ aspect-ratio: 16/9; background: #000; }
.spaces .carousel-slide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}


/* === Quiénes somos: Greenland centrado + hover iluminación + tamaño especial Greenland === */
.logos-grid .logo-item{
  transition: filter .25s ease, transform .25s ease;
}
.logos-grid .logo-item:hover{
  filter: brightness(1.15) saturate(1.05) drop-shadow(0 6px 16px rgba(0,0,0,0.18));
  transform: translateY(-2px);
}
@media (min-width: 1024px){
  .logos-grid .logo-item.logo-greenland{
    height: 84px !important; /* un poco más grande que el resto */
  }
}


/* === Quiénes somos (desktop): layout 2–1–2 centrado === */
@media (min-width: 1024px){
  .logos-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(60px, auto);
    row-gap: 24px;
    column-gap: 32px;
    justify-items: center;
    align-items: center;
  }
  /* Mapear los 5 logos en una grilla 2-1-2 (Greenland al centro) */
  .logos-grid .logo-item:nth-of-type(1){ grid-column: 1; grid-row: 1; }
  .logos-grid .logo-item:nth-of-type(2){ grid-column: 3; grid-row: 1; }
  .logos-grid .logo-item:nth-of-type(3){ grid-column: 2; grid-row: 2; } /* Greenland */
  .logos-grid .logo-item:nth-of-type(4){ grid-column: 1; grid-row: 3; }
  .logos-grid .logo-item:nth-of-type(5){ grid-column: 3; grid-row: 3; }
}


/* === Quiénes somos (mobile): layout 2–1–2 centrado === */
@media (max-width: 768px){
  .logos-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
    column-gap: 24px;
    justify-items: center;
    align-items: center;
  }
  .logos-grid .logo-item:nth-of-type(1){ grid-column: 1; grid-row: 1; }
  .logos-grid .logo-item:nth-of-type(2){ grid-column: 2; grid-row: 1; }
  .logos-grid .logo-item:nth-of-type(3){ grid-column: 1 / span 2; grid-row: 2; justify-self: center; } /* Greenland centrado */
  .logos-grid .logo-item:nth-of-type(4){ grid-column: 1; grid-row: 3; }
  .logos-grid .logo-item:nth-of-type(5){ grid-column: 2; grid-row: 3; }

  /* Tamaños suaves en mobile */
  .logos-grid .logo-item{ height: 56px; }
  .logos-grid .logo-item.logo-greenland{ height: 62px; }
}

/* A11Y utility: visible only to screen readers */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0, 0, 1px, 1px) !important;
  white-space:nowrap !important;
  border:0 !important;
}