:root {
    --color-burgundy: #9f172e;
    --color-gray-text: #AAAAAA;
    --color-dark: #1F1F1F;
}

/* =========================================
   1. RESETEO UNIVERSAL (El Botón Nuclear)
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box; 
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #000;
    width: 100%;
    max-width: 100%; 
    overflow-x: hidden; 
    overflow-x: clip; 
    position: relative;
    overscroll-behavior-x: none; 
}

a {
    text-decoration: none;
}

/* =========================================
   HEADER MODERNO
   ========================================= */
.main-header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 30px 0;
}

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

.logo-box {
    background: rgba(255, 255, 255, 0.85);
    padding: 5px 20px;
    border-radius: 4px;
}

.main-logo { 
    width: 180px; 
}

.menu-checkbox, .menu-icon {
    display: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: var(--color-gray-text);
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
    padding-bottom: 5px;
}

.nav-menu a:hover {
    color: #fff;
    border-bottom-color: var(--color-burgundy);
}

/* =========================================
   HERO SECTION (Slider Principal)
   ========================================= */
.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.slide-bg {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
}

.hero-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    margin-top: 80px;
    box-sizing: border-box; 
}

.hero-info {
    color: #ffffff;
    max-width: 500px;
}

.tag-proximamente {
    font-size: 2.2rem;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;
}

.entrega-fecha {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 300;
    margin: 0 0 10px 0;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 5px 0;
    letter-spacing: 1px;
}

.hero-specs {
    font-size: 0.95rem;
    font-weight: 300;
    margin-bottom: 20px;
}

.btn-mapa-link {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 400;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-mapa-link:hover {
    color: var(--color-burgundy);
}

.hero-card {
    background: rgba(255, 255, 255, 0.85);
    padding: 40px 30px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.hero-card h4 {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

.hero-card h5 {
    margin: 5px 0 25px 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #7a202a;
}

.btn-inscripcion {
    display: block;
    background: #cc0000;
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: 0.3s;
    letter-spacing: 0.5px;
}

.btn-inscripcion:hover {
    background: #a30000;
}

.preventa-label {
    display: block;
    color: #9f172e;
    font-size: 3.2rem;
    font-weight: 800;
    margin: 25px 0 5px 0;
    line-height: 1;
    letter-spacing: -1px;
}

.card-footer-text {
    font-size: 0.95rem;
    color: #333;
    font-weight: 400;
    margin-bottom: 25px;
}

.card-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card-contact a {
    color: #1a1a1a; 
    font-size: 1.1rem;
    font-weight: 600;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.card-contact a .icon-red {
    color: #cc0000;
    font-size: 1.3rem;
}

.card-contact a:hover {
    color: var(--color-burgundy);
}

.scroll-down {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 2.5rem;
    z-index: 20;
    text-decoration: none;
    animation: bounce 2s infinite;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.scroll-down:hover {
    opacity: 1;
    color: var(--color-burgundy);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-15px) translateX(-50%); }
    60% { transform: translateY(-7px) translateX(-50%); }
}

/* =========================================
   SECCIÓN 2: PROYECTO
   ========================================= */
.seccion-proyecto {
    padding: 100px 0;
    background-color: #ffffff;
    color: #333333;
}

.container-proyecto {
    max-width: 1350px; 
    margin: 0 auto;
    padding: 0 40px;
}

.proyecto-grid {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 50px;
    align-items: flex-start;
}

.titulo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.linea-roja {
    width: 5px;
    height: 55px;
    background-color: var(--color-burgundy);
}

.titulo-principal {
    font-size: 3.4rem;
    font-weight: 300; 
    color: #555555;
    margin: 0;
    letter-spacing: -1px;
}

.iconos-specs {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.spec-item img {
    width: 28px;
    height: auto;
}

.spec-item span {
    font-size: 1.3rem;
    font-weight: 600;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.specs-texto p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 30px;
}

.descripcion-proyecto p {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #666666;
    text-align: justify;
    margin-bottom: 15px;
}

.caracteristicas-lista h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 30px 0 15px 0;
    color: #333333;
}

.caracteristicas-lista ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.caracteristicas-lista li {
    position: relative;
    padding-left: 15px;
    font-size: 0.85rem;
    line-height: 1.8;
    color: #666666;
    margin-bottom: 8px;
}

.caracteristicas-lista li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #666666;
    font-weight: bold;
}

.proyecto-imagen img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

/* =========================================
   SECCIÓN 3: AVANCE DE OBRA
   ========================================= */
.seccion-avance {
    padding: 80px 0 100px 0;
    background-color: #ffffff;
}

.titulo-avance {
    font-size: 1.8rem;
    font-weight: 600;
    color: #666666; 
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.avance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px; 
    margin-top: 50px;
}

.avance-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 2px;
    background-color: #000; 
}

.avance-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease; 
}

.avance-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background 0.3s ease;
}

.avance-overlay i {
    font-size: 4rem; 
    margin-bottom: 15px;
    font-weight: 900;
}

.avance-overlay span {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
}

.avance-card:hover img { transform: scale(1.05); }
.avance-card:hover .avance-overlay { background: rgba(0, 0, 0, 0.7); }

/* =========================================
   SECCIÓN 4: MASTERPLAN & PLANTAS
   ========================================= */
.seccion-plantas {
    padding: 80px 0 100px 0;
    background: linear-gradient(to bottom, var(--color-burgundy) 0%, var(--color-burgundy) 45%, #ffffff 45%, #ffffff 100%);
}

.container-plantas {
    width: 100%;
    max-width: 1300px; 
    margin: 0 auto;
    padding: 0 30px; 
    box-sizing: border-box; 
}

.plantas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 46px; 
}

.planta-card {
    background: #ffffff;
    padding: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.3s ease;
    border-radius: 4px;
}

.planta-card:not(.vendida):hover { transform: translateY(-5px); }

.planta-header {
    background-color: #4a4a4a;
    color: #ffffff;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 15px;
    border-radius: 2px;
}

.planta-img-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    overflow: hidden;
}

.planta-img-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease, filter 0.3s;
}

.overlay-zoom {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4); 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
}

.overlay-zoom i { font-size: 3rem; }
.planta-card:not(.vendida) .planta-img-wrapper:hover .overlay-zoom { opacity: 1; }
.planta-card:not(.vendida) .planta-img-wrapper:hover img { transform: scale(1.05); }

/* ESTILOS PARA CASA "VENDIDA" */
.planta-card.vendida .planta-img-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.5); 
    z-index: 1;
}

.planta-card.vendida img { filter: grayscale(100%); }

.overlay-vendida {
    position: absolute;
    top: 50%; 
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    background: #cc0000; 
    color: #fff;
    text-align: center;
    padding: 12px 0;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.etiqueta-vendida {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.btn-ampliar {
    background-color: #7a1123;
    color: #ffffff;
    padding: 10px 30px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 3px;
    transition: background 0.3s;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.btn-ampliar:hover { background-color: var(--color-burgundy); color: #ffffff; }

/* =========================================
   SECCIÓN 5: GALERÍA Y TOUR VIRTUAL
   ========================================= */
.seccion-galeria-v2 {
    background-color: var(--color-burgundy);
    padding: 100px 0;
    color: #ffffff;
}

.container-galeria {
    width: 90%;
    max-width: 1350px;
    margin: 0 auto;
}

.galeria-v2-grid {
    display: grid;
    grid-template-columns: 35% 60%; 
    justify-content: space-between;
    gap: 40px;
}

.titulo-wrapper-blanco {
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 50px;
}

.linea-blanca {
    width: 5px;
    background-color: #ffffff;
}

.titulo-galeria {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.titulo-galeria span {
    font-size: 1.3rem;
    font-weight: 500;
}

.subtitulo-galeria {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 40px;
    line-height: 1.4;
    letter-spacing: 1px;
}

.subtitulo-galeria span {
    font-size: 1.8rem;
    font-weight: 700;
}

.titulo-terminaciones {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.lista-terminaciones {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-terminaciones li {
    font-size: 0.95rem;
    margin-bottom: 18px;
    position: relative;
    padding-left: 15px;
    font-weight: 400;
}

.lista-terminaciones li::before {
    content: '•';
    position: absolute;
    left: 0;
    font-weight: bold;
}

.multimedia-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.btn-multimedia {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 2px;
}

.btn-multimedia img {
    width: 100%;
    height: 100%; 
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.multimedia-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.3s;
}

.multimedia-overlay i {
    font-size: 3rem;
    margin-bottom: 15px;
}

.multimedia-overlay span {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6); 
    padding: 8px 15px;
    border-radius: 2px;
}

.btn-multimedia:hover img { transform: scale(1.05); }
.btn-multimedia:hover .multimedia-overlay { background: rgba(0, 0, 0, 0.6); }

.galeriaCarrusel {
    position: relative;
    padding-right: 50px; 
}

.galeriaCarrusel .swiper-slide a {
    display: block;
    height: 180px; 
}

.galeriaCarrusel .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-blanco-carrusel {
    background-color: #ffffff;
    color: #1a1a1a !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    right: 0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.btn-blanco-carrusel::after {
    font-size: 1.2rem !important;
    font-weight: 900;
}

.texto-vanguardia {
    text-align: right;
    margin-top: 15px;
    font-size: 1.15rem;
    font-weight: 300;
    padding-right: 50px; 
    letter-spacing: 0.5px;
}

/* =========================================
   SECCIÓN 6: UBICACIÓN
   ========================================= */
.seccion-ubicacion {
    padding: 100px 0;
    /* La imagen de fondo. Verifica la ruta dependiendo de dónde esté tu CSS */
    background-image: url('../img/fondo-ubicacion.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fcfcfc; /* Color por si la imagen tarda en cargar */
}

.container-ubicacion {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.ubicacion-grid {
    display: grid;
    grid-template-columns: 45% 48%; /* El mapa y el texto se reparten el espacio */
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* Columna Izquierda (Mapa) */
.mapa-link {
    position: relative;
    display: block;
    margin-top: 40px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra suave para que resalte */
}

.mapa-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.mapa-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(159, 23, 46, 0.4); /* Capa burdeo traslúcida al pasar el mouse */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    color: #fff;
}

.mapa-overlay i {
    font-size: 3rem;
}

.mapa-link:hover img {
    transform: scale(1.02);
}
.mapa-link:hover .mapa-overlay {
    opacity: 1;
}

/* Columna Derecha (Texto y Entorno) */
.ubicacion-texto {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 40px;
}

.entorno-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 15px; /* Espacio entre las fotos */
}

.entorno-grid img {
    width: 80%;
    aspect-ratio: 1 / 1; /* ¡Magia! Fuerza a que las fotos siempre sean cuadradas perfectas */
    object-fit: cover;   /* Recorta la foto sin deformarla */
    border-radius: 2px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* =========================================
   SECCIÓN 7: MAPA GOOGLE Y WAZE
   ========================================= */
.seccion-mapa-google {
    background-color: var(--color-burgundy);
    padding: 80px 0;
    text-align: center;
}

.container-mapa {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.mapa-iframe-wrapper {
    width: 100%;
    height: 450px; /* Altura del mapa en escritorio */
    margin-bottom: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3); /* Sombra elegante */
    overflow: hidden;
}

.mapa-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Estilo del botón de Waze */
.waze-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    text-transform: lowercase; /* Mantiene "waze" en minúscula como el logo */
    letter-spacing: -1px;
    transition: transform 0.3s, opacity 0.3s;
}

.waze-link i {
    font-size: 2.8rem; /* Ícono del auto un poco más grande */
}

.waze-link:hover {
    transform: translateY(-5px); /* Efecto de saltito al pasar el mouse */
    opacity: 0.8;
    color: #ffffff;
}

/* =========================================
   SECCIÓN 8: CONTACTO Y AJUSTES
   ========================================= */
.separador-negro {
    width: 100%;
    height: 18px;
    background-color: #1a1a1a;
}

.seccion-contacto {
    position: relative;
    padding: 100px 0;
    background-image: url('../img/fondo-contacto.jpg'); 
    background-size: cover;
    background-position: center right; 
    color: #ffffff;
}

.contacto-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(122, 17, 35, 0.95) 0%, rgba(122, 17, 35, 0.8) 40%, rgba(122, 17, 35, 0.2) 100%);
    z-index: 1;
}

.container-contacto {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.contacto-grid {
    display: grid;
    grid-template-columns: 55% 35%;
    justify-content: space-between;
    gap: 40px;
}

.titulo-contacto {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.subtitulo-contacto {
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: 15px;
    margin-bottom: 30px;
}

/* Estilos de los inputs del formulario */
#form-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#form-contacto input[type="text"],
#form-contacto input[type="email"],
#form-contacto input[type="tel"],
#form-contacto textarea {
    width: 100%;
    padding: 15px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #333;
    box-sizing: border-box;
    outline: none;
    border-radius: 2px;
}

.recaptcha-wrapper {
    margin: 10px 0;
}

/* Botón de Enviar con borde blanco */
.btn-enviar {
    background-color: #ba1a35; 
    color: #ffffff;
    border: 2px solid #ffffff; 
    padding: 12px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
    align-self: flex-start; 
    transition: all 0.3s;
}

.btn-enviar:hover:not(:disabled) {
    background-color: #ffffff;
    color: var(--color-burgundy);
}

.btn-enviar:disabled {
    background-color: #7a1123;
    color: #cccccc;
    cursor: not-allowed;
    border-color: #ffffff; /* Ahora el borde blanco se mantiene siempre */
    opacity: 0.7; /* Lo hacemos un poquito transparente para que se note que está bloqueado */
}

.notification-box {
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 10px;
}
.error-msg { color: #ffcccc; }
.success-msg { color: #ccffcc; }

/* Columna Derecha (Iconos y Enlaces) */
.contacto-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
}

.info-item i {
    font-size: 1.8rem;
}

.info-item span {
    font-size: 1.05rem;
    font-weight: 400;
}

.info-link {
    transition: color 0.3s, transform 0.3s;
}

.info-link:hover {
    color: #ff99aa; 
    transform: translateX(5px); 
}

/* =========================================
   MODAL DE ÉXITO ESTILO PANTALLAZO
   ========================================= */
.modal-overlay-exito {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s;
}

.modal-overlay-exito.activo {
    opacity: 1;
    visibility: visible;
}

.modal-caja-exito {
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 8px;
    text-align: center;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.4s;
}

.modal-overlay-exito.activo .modal-caja-exito {
    transform: translateY(0);
}

.icono-check-azul i {
    font-size: 5rem;
    color: #4A90E2; /* Azul estilo pantallazo */
    margin-bottom: 20px;
}

.modal-caja-exito h3 {
    margin: 0 0 15px 0;
    font-size: 1.8rem;
    color: #1a1a1a;
    font-weight: 600;
}

.modal-caja-exito p {
    color: #888888;
    font-size: 1.05rem;
    margin-bottom: 30px;
    line-height: 1.5;
}

.btn-cerrar-exito {
    background: transparent;
    border: none;
    color: #4A90E2;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    padding: 10px 20px;
}
.btn-cerrar-exito:hover { text-decoration: underline; }


/* =========================================
   SECCIÓN 9: NOSOTROS
   ========================================= */
.seccion-nosotros {
    background-color: #000000;
    padding: 100px 0 60px 0;
    color: #ffffff;
}

.container-nosotros {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.nosotros-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.titulo-flex {
    display: flex;
    align-items: center;
}

.linea-roja-nosotros {
    width: 5px;
    height: 45px;
    background-color: var(--color-burgundy);
    margin-right: 20px;
}

.titulo-nosotros {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.nosotros-subtag {
    font-size: 1.1rem;
    font-weight: 300;
    color: #dddddd;
    margin: 0;
}

.nosotros-box {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 40px;
    position: relative;
}

.nosotros-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.nosotros-card {
    background-color: #1a1a1a;
    padding: 50px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img-logo-wrapper {
    height: 100px; /* Forzamos una altura igual para los 3 logos */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.nosotros-card img {
    max-width: 150px;
    max-height: 90px;
    object-fit: contain;
}

.nosotros-card h3 {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 0 25px 0;
    line-height: 1.4;
    color: #ffffff;
}

.nosotros-card p {
    font-size: 0.8rem;
    line-height: 1.7;
    color: #aaaaaa;
    margin: 0;
    text-align: center;
}

.linea-roja-box {
    position: absolute;
    bottom: -3px; /* La bajamos un pelín para tapar el borde blanco */
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    height: 6px;
    background-color: var(--color-burgundy);
}

/* =========================================
   FOOTER LEGAL
   ========================================= */
.footer-legal {
    background-color: #ffffff;
    padding: 25px 0;
    text-align: center;
}

.container-legal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-legal p {
    margin: 0;
    font-size: 0.65rem;
    color: #666666;
    line-height: 1.6;
}

/* =========================================
   BOTONES FLOTANTES (WSP y Flecha arriba)
   ========================================= */
.btn-flotante-wsp {
    position: fixed;
    bottom: 80px;
    right: 25px;
    background-color: #25D366;
    color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 999;
    transition: transform 0.3s;
}

.btn-flotante-wsp:hover { transform: scale(1.1); color: white; }

.btn-flotante-up {
    position: fixed;
    bottom: 25px;
    right: 30px;
    background-color: #1a1a1a; /* Fondo oscuro */
    color: #ffffff;            /* Flecha blanca */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #ffffff; /* Filete blanco agregado */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    /* Transiciones suaves para cuando aparezca/desaparezca */
    transition: background 0.3s, transform 0.3s, opacity 0.3s, visibility 0.3s; 
    opacity: 0;           /* Oculto al inicio */
    visibility: hidden;   /* Desactivado al inicio */
}

/* Esta es la clase que el JS le agregará para mostrarlo */
.btn-flotante-up.mostrar {
    opacity: 1;
    visibility: visible;
}

.btn-flotante-up:hover { 
    background-color: var(--color-burgundy); 
    color: #ffffff;
    transform: translateY(-5px); 
}

/* =========================================
   PÁGINA LEGAL (Políticas y Términos)
   ========================================= */

/* Header transparente sobre la foto */
.page-legal .main-header {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Banner superior legal */
.hero-legal {
    width: 100%;
    height: 45vh; 
    min-height: 380px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}

.hero-legal-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 100%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* Quitamos el padding que tenía para usar el contenedor centrado */
}

.hero-legal-content {
    /* Mismas medidas exactas que el texto de abajo para alineación perfecta */
    width: 100%;
    max-width: 1100px;
    margin: 180px auto 0 auto; /* Empuja el texto bajo el logo/menú */
    padding: 0 40px;
    box-sizing: border-box;
    color: #ffffff;
}

.hero-legal-content h1 {
    /* Tamaño responsivo con clamp, un poco más pequeño y grosor 600 */
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 600;
    margin: 0 0 5px 0;
}

.hero-legal-content h2 {
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
}

/* Sección del texto legal */
.seccion-texto-legal {
    background-color: #ffffff;
    padding: 80px 0;
    color: #333333;
}

.container-texto-legal {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.titulo-legal-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.titulo-legal-wrapper h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333333;
    margin: 0 0 0 15px;
    text-transform: uppercase;
}

.contenido-legal p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 20px;
    font-weight: 400;
}

.contenido-legal h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #222222;
    margin: 40px 0 15px 0;
}

.contenido-legal strong {
    font-weight: 700;
    color: #000000;
}

/* Listas dentro del texto legal */
.lista-legal {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}

.lista-legal li {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.lista-legal li::before {
    content: "•";
    color: #333333;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: -2px;
}

.lista-numerada-legal {
    padding-left: 20px;
    margin-bottom: 30px;
}

.lista-numerada-legal li {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 15px;
    padding-left: 5px;
}

/* Responsive para la página legal */
@media (max-width: 768px) {
    .hero-legal { height: 35vh; }
    .hero-legal-content h1 { font-size: 2rem; }
    .hero-legal-content h2 { font-size: 1rem; }
    .titulo-legal-wrapper h3 { font-size: 1.4rem; }
    .seccion-texto-legal { padding: 50px 0; }
    .container-texto-legal { padding: 0 20px; }
}
/* =========================================
   RESPONSIVE: TABLETS Y MÓVILES (1200px)
   ========================================= */
@media (max-width: 1200px) {
    .main-header { padding: 15px 0; }
    .header-container { padding: 0 20px; }
    .logo-box { padding: 10px 15px; }
    .main-logo { width: 140px; }
    
    /* El Panel Lateral del Menú */
    .nav-menu {
        position: fixed;
        top: 0; right: -100%; 
        width: 320px; 
        max-width: 85vw;
        height: 100vh;
        background-color: rgba(20, 20, 20, 0.98); 
        display: flex; 
        flex-direction: column;
        justify-content: flex-start;
        align-items: center; 
        padding: 100px 20px 0 20px !important; 
        margin: 0 !important; 
        gap: 15px; 
        transition: right 0.4s ease-in-out;
        z-index: 99;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
        box-sizing: border-box; 
        overflow-x: hidden;
        overflow-y: auto; 
        list-style: none !important; 
    }
    
    .nav-menu li {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        display: block;
    }

    .nav-menu a {
        display: block;
        width: 90%; 
        box-sizing: border-box; 
        text-align: center !important;
        font-size: clamp(0.85rem, 4vw, 1.05rem); 
        padding: 10px 0; 
        color: #ffffff;
        white-space: normal; 
        line-height: 1.4;
    }

    .menu-checkbox:checked ~ .nav-menu { right: 0; }
    .menu-icon { z-index: 100; position: relative; }
    .menu-icon span { transition: transform 0.3s ease, opacity 0.3s ease; }
    .menu-checkbox:checked + .menu-icon span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-checkbox:checked + .menu-icon span:nth-child(2) { opacity: 0; }
    .menu-checkbox:checked + .menu-icon span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    
    .menu-icon {
        display: flex; 
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
    }
    
    .menu-icon span {
        width: 35px;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
    }

    .hero-content-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        margin-top: 180px;
        padding-bottom: 60px;
    }

    .hero-info { text-align: center; }
    .tag-proximamente { font-size: 1.8rem; }
    .entrega-fecha { font-size: 0.95rem; }
    .hero-title { font-size: 2.8rem; }
    
    .hero-card {
        width: 90%; 
        max-width: 380px; 
        padding: 25px 20px;
    }

    /* Proyecto */
    .seccion-proyecto { padding: 60px 0; }
    .proyecto-grid { grid-template-columns: 1fr; gap: 40px; }
    .titulo-principal { font-size: 2.8rem; }
    .descripcion-proyecto p { text-align: left; }

    /* Avance */
    .seccion-avance { padding: 50px 0; }
    .titulo-avance { font-size: 1.3rem; line-height: 1.4; }
    .avance-grid { grid-template-columns: 1fr; gap: 20px; }
    .avance-overlay span { font-size: 0.85rem; }
    .avance-overlay i { font-size: 3rem; }

    /* Plantas */
    .seccion-plantas { background: linear-gradient(to bottom, var(--color-burgundy) 0%, var(--color-burgundy) 10%, #ffffff 10%, #ffffff 100%); }
    .plantas-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }

    /* --- Galería V2 Tablet & Móvil (Corregido) --- */
    .container-galeria {
        width: 100%;
        padding: 0 40px; 
        box-sizing: border-box;
    }

    /* Usamos Flexbox para apilar texto arriba y fotos abajo sin desbordes */
    .galeria-v2-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        box-sizing: border-box;
    }

    .galeria-textos { width: 100%; }

    /* Reseteo del texto para que no se salga */
    .lista-terminaciones {
        width: 100%;
        padding-right: 0;
        box-sizing: border-box;
    }

    .lista-terminaciones li {
        white-space: normal !important; 
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        line-height: 1.5;
        padding-right: 20px;
        width: 100%;
    }

    /* Contenedores multimedia en Tablet (2 columnas) */
    .multimedia-top {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Video y VR lado a lado */
        gap: 20px;
        width: 100%;
    }

    /* Altura fija y posición estática para evitar el CRASH */
    .btn-multimedia {
        width: 100%;
        height: 250px !important; 
        display: block;
        position: relative; 
        overflow: hidden;
        border-radius: 4px;
        background-color: #1a1a1a;
    }

    .btn-multimedia img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: static !important; /* <--- Esto cura el cuadro gris y Fancybox */
    }

    /* Carrusel Inferior */
    .galeriaCarrusel {
        padding: 0 0 50px 0 !important; 
        width: 100%;
    }

    .galeriaCarrusel .swiper-slide a {
        height: 250px !important; 
        display: block;
        width: 100%;
        background-color: #1a1a1a;
    }

    .galeriaCarrusel .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: static !important; /* <--- Esto cura el cuadro gris y Fancybox */
    }

    .btn-blanco-carrusel {
        top: auto !important;
        bottom: 0 !important;
        right: 50% !important;
        transform: translateX(50%) !important; 
        margin-top: 0 !important;
    }

    .texto-vanguardia {
        text-align: center;
        padding-right: 0;
        margin-top: 25px;
    }
    /* Ajustes Ubicación Tablet */
    .container-ubicacion { padding: 0 30px; }
    .ubicacion-grid {
        grid-template-columns: 1fr; /* Apilamos el mapa arriba y el texto abajo */
        gap: 50px;
    }
    .mapa-link { margin-top: 20px; }

    /* Ajustes Mapa Google Tablet */
    .container-mapa { padding: 0 30px; }
    .mapa-iframe-wrapper { height: 400px; } /* Lo hacemos un poquito más bajo */

    /* Contacto Tablet */
    .contacto-grid {
        grid-template-columns: 1fr; /* Una columna arriba de la otra */
        gap: 50px;
    }
    .contacto-info-wrapper {
        flex-direction: row; /* Iconos horizontales en tablet */
        flex-wrap: wrap;
    }

    /* Ajustes Nosotros Tablet */
    .nosotros-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .nosotros-grid {
        grid-template-columns: 1fr; /* Una columna apilada */
    }
    .linea-roja-box { width: 60%; }
    .btn-flotante-wsp { bottom: 85px; right: 20px; width: 50px; height: 50px; font-size: 1.8rem; }
    .btn-flotante-up { bottom: 30px; right: 22px; width: 40px; height: 40px; font-size: 1.2rem; }
}/* cierre */

/* =========================================
   RESPONSIVE: CELULARES (768px)
   ========================================= */
@media (max-width: 768px) {
    .logo-box { padding: 8px 12px; }
    .main-logo { width: 100px; } 
    
    .hero-content-wrapper {
        margin-top: 120px; 
        gap: 15px; 
        padding-bottom: 30px;
        padding-left: 20px;  
        padding-right: 20px; 
    }
    
    .tag-proximamente { font-size: 1.5rem; margin-bottom: 0; }
    .entrega-fecha { font-size: 0.85rem; margin-bottom: 5px; }
    .hero-title { font-size: 2.2rem; margin-bottom: 5px; }
    .hero-specs { margin-bottom: 10px; font-size: 0.85rem; }
    
    .hero-card { 
        padding: 20px 15px; 
        max-width: 320px; 
        box-sizing: border-box; 
    }
    .hero-card h4 { font-size: 1.8rem; }
    .hero-card h5 { margin-bottom: 10px; font-size: 1.1rem; }
    .btn-inscripcion { padding: 10px; font-size: 1rem; margin: 10px 0; }
    .preventa-label { font-size: 2.2rem; margin: 10px 0 5px 0; }
    .card-footer-text { margin-bottom: 10px; font-size: 0.8rem; }
    .card-contact { gap: 10px; }
    .card-contact a { 
        font-size: clamp(0.7rem, 4vw, 0.95rem); 
        white-space: nowrap; 
        word-break: normal;  
    }
    .card-contact a .icon-red { font-size: clamp(0.9rem, 5vw, 1.2rem); }
    
    .scroll-down { bottom: 5px; } 

    .plantas-grid { grid-template-columns: 1fr !important; }
    .seccion-plantas { background: linear-gradient(to bottom, var(--color-burgundy) 0%, var(--color-burgundy) 2%, #ffffff 2%, #ffffff 100%); }
    
    /* --- Galería V2 Exclusivo Móvil --- */
    /* --- Galería V2 Exclusivo Móvil (VERSIÓN SÓLIDA Y CLÁSICA) --- */
    .container-galeria { 
        padding: 0 20px; 
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Cambiamos Grid por Flexbox para que no se desborde nunca */
    .galeria-v2-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
        width: 100%;
        box-sizing: border-box;
    }

    .galeria-textos { width: 100%; }
    .titulo-galeria { font-size: 1.5rem; }
    .subtitulo-galeria { font-size: 1rem; }
    .subtitulo-galeria span { font-size: 1.4rem; }
    .titulo-terminaciones { font-size: 1.1rem; }
    
    /* Reseteo agresivo de la lista para que el texto baje */
    .lista-terminaciones {
        width: 100%;
        margin: 0;
        padding-left: 15px; /* Solo el espacio para la viñeta */
        padding-right: 0;
        box-sizing: border-box;
    }

    .lista-terminaciones li { 
        font-size: 0.9rem; 
        margin-bottom: 15px; 
        width: 100%;
        white-space: normal; /* Permite bajar de línea */
        word-break: keep-all; /* Mantiene las palabras juntas pero salta la línea */
        line-height: 1.5;
        padding-right: 15px; /* Margen derecho de seguridad */
    }

    /* Contenedores de Video y VR */
    .multimedia-top { 
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    
    /* Altura fija clásica. Nada de aspect-ratio ni posiciones raras */
    .btn-multimedia { 
        width: 100%;
        height: 220px !important; 
        display: block;
        border-radius: 4px;
        background-color: #1a1a1a;
        overflow: hidden;
    }
    
    .btn-multimedia img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Carrusel Inferior */
    .galeriaCarrusel {
        padding: 0 0 50px 0 !important; 
        width: 100%;
    }

    .galeriaCarrusel .swiper-slide a { 
        height: 220px !important; 
        width: 100%;
        display: block;
        background-color: #1a1a1a;
    }

    .galeriaCarrusel .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
/* Ajustes Ubicación Móvil */
    .container-ubicacion { padding: 0 20px; }
    .ubicacion-texto { text-align: left; /* En móvil es mejor alinear a la izquierda que justificar */ }
    .entorno-grid { gap: 10px; /* Menos espacio entre fotos en celular */ }

    /* Ajustes Mapa Google Móvil */
    .container-mapa { padding: 0 20px; }
    .mapa-iframe-wrapper { height: 320px; } /* Altura ideal para celular */
    
    .waze-link { font-size: 1.6rem; }
    .waze-link i { font-size: 2rem; }
    /* Contacto Móvil */
    .container-contacto { padding: 0 20px; }
    .contacto-info-wrapper {
        flex-direction: column; /* Iconos verticales otra vez */
    }
    .btn-enviar { width: 100%; } /* Botón ocupa todo el ancho */

    /* Ajustes Nosotros Móvil */
    .container-nosotros, .container-legal { padding: 0 20px; }
    .nosotros-box { padding: 25px 15px; }
    .nosotros-card { padding: 30px 20px; }
    .titulo-nosotros { font-size: 1.6rem; }
    .nosotros-subtag { font-size: 0.95rem; line-height: 1.4; }
    .linea-roja-box { width: 80%; }
    /* cierre */