:root {
    /* Paleta Parvada Actualizada */
    --gold-light: #cfd1ce; 
    --cream: #f1f1f1;      
    --gold: #1a3235;       
    --gold-dark: #293238;  
    --dark: #293238;       

    /* Colores Mapa */
    --available: #4A7C59;
    --sold: #9B3A3A;
    --available-bg: rgba(74, 124, 89, 0.4);
    --sold-bg: rgba(155, 58, 58, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body { 
    font-family: 'Montserrat', sans-serif; 
    background: var(--cream); 
    color: var(--dark); 
    line-height: 1.6; 
    padding-top: 80px; 
}

h1, h2, h3, h4 { font-family: 'EB Garamond', serif; color: var(--gold); }

/* --- NAVBAR CORREGIDO --- */
.navbar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 80px;
    padding: 0 5%; 
    background: rgba(41, 50, 56, 0.98); 
    display: flex; 
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.logo, .logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-img {
    max-height: 900px; 
    max-width: 300px; /* Esta es la clave */
    object-fit: contain;
    /* lo demás que ya tenías (filter, transition) déjalo igual */
}

.logo-img:hover {
    transform: scale(1.05);
}

.nav-links { 
    list-style: none; 
    display: flex; 
    gap: 25px; 
    align-items: center;
    margin: 0;
}

.nav-links a { 
    color: white; 
    text-decoration: none; 
    text-transform: uppercase;
    font-size: 13px; 
    letter-spacing: 1.5px; 
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-links a:hover { 
    color: var(--gold-light); 
}

/* --- HERO --- */
.hero { height: 110vh; background: url('render_fachada_noche.jpg') bottom/cover; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: white; }
.overlay { position: absolute; top: 3; left: 0; width: 100%; height: 100%; background: rgba(41, 50, 56, 0.2); }
.hero-contenido { position: relative; z-index: 2; }
.hero h1 { color: white; font-size: 4rem; margin-bottom: 10px; }
.btn-hero { display: inline-block; padding: 15px 30px; background: var(--gold); color: white; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; margin-top: 20px; border-radius: 4px; }
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px; /* Esto controla qué tan alto es el difuminado */
    background: linear-gradient(to bottom, transparent 0%, var(--cream) 100%);
    z-index: 1;
}
/* --- AMENIDADES --- */
.seccion-amenidades { padding: 60px 5%; }
.grid-amenidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 30px;}

/* 1. Ajuste de la tarjeta (más alta y texto abajo) */
.tarjeta-amenidad { 
    position: relative; 
    height: 350px; 
    padding: 25px; 
    border-radius: 8px; 
    text-align: center; 
    color: rgb(255, 255, 255); 
    overflow: hidden; 
    background: var(--gold-dark); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
}

/* 2. Foto de fondo clara (sin desenfoque) */
.tarjeta-amenidad::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    z-index: 1; 
    transition: transform 0.5s ease;
}

/* 3. Degradado oscuro SOLO en la parte de abajo (Corregido a rgba) */
.tarjeta-amenidad::after {
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 60%;
    /* rgba = Red, Green, Blue, Alpha (transparencia). El 0,0,0 es negro. */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    z-index: 2;
}

/* 4. Efecto de zoom al pasar el mouse */
.tarjeta-amenidad:hover::before { 
    transform: scale(1.08); 
}

/* 5. Las fotos de fondo de cada tarjeta (¡Asegúrate de quitarles los espacios a los archivos en tu PC!) */
.card-alberca::before { background-image: url('bkg_alberca.jpg'); }
.card-gym::before { background-image: url('tu_render_amenidad_2 copy.jpg'); } /* <- Nombre sin espacios y sin el "1" en la clase */
.card-seguridad::before { background-image: url('bkg_seguridad.jpg'); }
.card-rooftop::before { background-image: url('casaclubpep.jpg'); } /* <- Nombre sin espacios y sin el "1" en la clase */

/* Asegurarnos que el texto esté por encima del degradado */
.tarjeta-amenidad > * { position: relative; z-index: 3; }



/* =========================================
   ESTILOS: RESPALDO Y EXPERIENCIA
   ========================================= */

.seccion-respaldo {
    font-family: 'Inter', sans-serif;
    padding: 100px 20px;
    background-color: #ffffff;
    text-align: center;
}

.contenedor-respaldo {
    max-width: 1100px;
    margin: 0 auto;
}

.titulo-seccion {
    font-size: 2.2rem;
    color: #000000;
    font-weight: 700;
    margin-bottom: 10px;
}

.subtitulo-seccion {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 60px;
}

.grid-respaldo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.bloque-empresa {
    padding: 40px 30px;
    border-radius: 15px;
    background: #fdfdfd;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); /* Sombra sutil para delimitar la tarjeta */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo perfectamente */
    height: 100%; /* Obliga a que ambas tarjetas midan lo mismo */
}

.logo-respaldo {
    height: 200px;
    object-fit: cover;
    margin-bottom: 1px;
    /* Los logos se ven mejor en gris que cambian a color al pasar el mouse */
  
}

.bloque-empresa:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.bloque-empresa h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #1a252c;
}

.bloque-empresa p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* Estilos del Botón de Descarga */
.contenedor-descarga {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

.contenedor-descarga p {
    margin-bottom: 20px;
    color: #888;
    font-size: 0.9rem;
}

.btn-curriculum {
    display: inline-block;
    padding: 18px 35px;
    background-color: #1a252c; /* Color oscuro elegante */
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-curriculum:hover {
    background-color: #27ae60; /* Cambia a verde al pasar el mouse */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.2);
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .titulo-seccion { font-size: 1.8rem; }
    .grid-respaldo { gap: 20px; }
}
/* --- LIGHTBOX Y GALERIA --- */
.contenedor-galeria { padding: 60px 5%; }
.grid-renders-abajo { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }
.grid-renders-abajo img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.render-principal img { width: 100%; max-height: 500px; object-fit: cover; border-radius: 8px; }

.lightbox-modal { display: none; position: fixed; z-index: 9999; padding-top: 80px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(41, 50, 56, 0.95); }
.lightbox-content { margin: auto; display: block; width: 90%; max-width: 900px; border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.5); animation: zoomIn 0.3s ease; }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lightbox-close { position: absolute; top: 20px; right: 40px; color: #f1f1f1; font-size: 45px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.lightbox-close:hover { color: var(--gold-light); }
.img-secundaria, .img-principal { cursor: zoom-in; transition: filter 0.3s; }
.img-secundaria:hover, .img-principal:hover { filter: brightness(0.8); }

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .layout-inventario, .layout-constructora { flex-direction: column; }
    .grid-logos { grid-template-columns: repeat(2, 1fr); }
    .nav-links { display: none; }
}
/* --- SECCIÓN AVANCE CIRCULAR --- */
.seccion-avance { padding: 80px 10%; background-color: #ffffff; color: #1a3235; }

.header-avance { border-bottom: 1px solid #e0e0e0; margin-bottom: 50px; padding-bottom: 20px; }
.tag-estado { font-size: 0.8rem; letter-spacing: 3px; color: #999; display: block; margin-bottom: 10px; }

.contenido-avance { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; }

/* Estilos del Círculo */
.progress-circle { position: relative; width: 200px; height: 200px; }

.progress-circle svg { transform: rotate(-90deg); }

.circle-bg { fill: none; stroke: #e9e5de; stroke-width: 12; }

.circle-progress { 
    fill: none; 
    stroke: #1a3235; /* El color oscuro de tu marca */
    stroke-width: 12; 
    stroke-linecap: round; 
    stroke-dasharray: 565; /* Circunferencia completa */
    transition: stroke-dashoffset 1s ease;
}

.percentage {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.percentage .number { display: block; font-size: 2.2rem; font-weight: bold; }
.percentage .label { font-size: 0.7rem; letter-spacing: 2px; color: #999; }

/* Columna de texto */
.col-texto { flex: 1; min-width: 300px; }
.fecha-mes { font-size: 0.8rem; color: #c5a059; letter-spacing: 2px; font-weight: bold; }
.col-texto h3 { font-size: 2.5rem; margin: 10px 0 20px; color: #1a3235; }
.col-texto p { line-height: 1.8; color: #555; font-size: 1.1rem; }

/* Responsivo para móviles */
@media (max-width: 768px) {
    .contenido-avance { flex-direction: column; text-align: center; }
}
/* --- NUEVA SECCIÓN RENDERS FULL --- */
.seccion-renders-full {
    padding: 0; /* Sangrado completo */
    overflow: hidden;
    background-color: #f3f3f3; /* Color de fondo de integración */
}

.carrusel-full-container {
    position: relative;
    width: 100vw;
    height: 90vh; /* Altura masiva, casi toda la pantalla */
    overflow: hidden;
}

/* El Efecto de Difuminado de Contorno (Superposición de degradado) */
.carrusel-full-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;

}

/* Texto sobre la imagen (centrado arriba) */
.carrusel-texto-overlay {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra de texto para legibilidad */
}
.carrusel-texto-overlay h2 { font-size: 2.5rem; margin-bottom: 10px; color: white; }
.carrusel-texto-overlay p { font-size: 1.2rem; color: rgba(255,255,255,0.8); }

/* Flechas reposicionadas, más pequeñas y minimalistas */
.flecha-full {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26, 50, 53, 0.7); /* Círculo más transparente */
    color: white;
    border: none;
    padding: 15px; /* Menos padding */
    cursor: pointer;
    z-index: 15;
    font-size: 1.5rem;
    border-radius: 50%;
    transition: 0.3s;
}
.flecha-full:hover { background: #c5a059; }
.prev-full { left: 20px; } /* Más cerca del borde lateral */
.next-full { right: 20px; }

/* El riel del carrusel */
.carrusel-track-container-full {
    width: 100%;
    height: 100%;
}
.carrusel-track-full {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out; /* Velocidad de deslizamiento suave */
}

/* Slides de sangrado completo */
.carrusel-slide-full {
    min-width: 100vw;
    height: 100%;
}
.carrusel-slide-full img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la imagen se estire feo */
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .carrusel-full-container { height: 70vh; }
    .carrusel-texto-overlay h2 { font-size: 2rem; }
    .flecha-full { padding: 10px; font-size: 1.2rem; }
}



/* Botón de Descarga */
.btn-descargar {
    display: inline-block;
    padding: 12px 30px;
    background-color: transparent;
    color: #1a3235; /* Usa el color principal de tu marca */
    border: 2px solid #1a3235;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-descargar:hover {
    background-color: #1a3235;
    color: #ffffff;
    transform: translateY(-2px);
}




/* =========================================
   SECCIÓN: QUÉ ES PARVADA (CON PATRÓN DE FONDO)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

.seccion-parvada {
    font-family: 'Inter', sans-serif;
    padding: 80px 20px;
    position: relative; /* Necesario para el fondo y overlay */
    color: #333;
    
    /* AQUÍ AGREGAMOS TU PATRÓN (Asegúrate de exportarlo a .png o .svg) */
    background-image: url('patron_parvada.png'); 
    background-repeat: repeat; /* Hace que el patrón se multiplique llenando todo el fondo */
    background-size: 400px; /* Ajusta este valor si quieres que el patrón se vea más grande o chico */
}

/* El filtro semi-transparente para suavizar el patrón y permitir lectura */
.overlay-patron {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(249, 249, 250, 0.85); /* 85% de opacidad blanco/grisáceo */
    z-index: 1;
}

.contenedor-parvada {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative; /* Para que quede por encima del filtro del patrón */
    z-index: 2; 
}

.titulo-parvada {
    font-size: 2.5rem;
    color: #1a252c;
    margin-bottom: 15px;
    font-weight: 700;
}

.subtitulo-parvada {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444; /* Un poco más oscuro para asegurar legibilidad */
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-weight: 400;
}

.grid-parvada {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.tarjeta-parvada {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* Sombra un poco más fuerte para despegar la tarjeta del patrón */
    transition: transform 0.3s ease;
    text-align: left;
}

.tarjeta-parvada:hover {
    transform: translateY(-5px);
}

.tarjeta-parvada h3 {
    font-size: 1.25rem;
    color: #1a252c;
    margin-bottom: 15px;
    font-weight: 600;
    border-bottom: 2px solid #27ae60; 
    display: inline-block;
    padding-bottom: 5px;
}

.tarjeta-parvada p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}
/* =========================================
   ESTILOS: UBICACIÓN (LIMPIO Y PREMIUM)
   ========================================= */

.grid-ubicacion {
    display: flex;
    gap: 0; /* Unimos el mapa con la tarjeta para un look moderno */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.mapa-container {
    flex: 1.4;
    min-height: 450px;
}

.info-ubicacion-card {
    flex: 1;
    background: #1a252c; /* El color oscuro de tu marca */
    color: white;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.label-exclusivo {
    color: #cca658;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.info-ubicacion-card h3 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: white;
}

.detalle-zona {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #cbd5e0;
}

.puntos-interes {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
}

.puntos-interes li {
    margin-bottom: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.puntos-interes i {
    color: #cca658;
}

.btn-como-llegar {
    align-self: flex-start;
    padding: 15px 30px;
    background-color: #cca658;
    color: #1a252c;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: 0.3s;
    font-size: 0.9rem;
}

.btn-como-llegar:hover {
    background-color: #ffffff;
    transform: translateY(-3px);
}

/* Ajuste móvil */
@media (max-width: 992px) {
    .grid-ubicacion {
        flex-direction: column;
    }
    .info-ubicacion-card {
        padding: 40px 30px;
    }
}
/* ==========================================================================
   ESTILOS: INVENTARIO Y COTIZADOR 
   ========================================================================== */
.seccion-interactiva { padding: 80px 5%; background-color: var(--cream); }
.contenedor-inventario { max-width: 1200px; margin: 0 auto; }

/* Contadores y Pestañas */
.stats-grid { display: flex; justify-content: center; gap: 30px; margin-bottom: 25px; }
.stat-item { background: white; padding: 15px 35px; border-radius: 8px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.04); min-width: 150px; }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--gold); }
.stat-lbl { font-size: 0.85rem; color: #666; text-transform: uppercase; }

.floor-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; }
.floor-tab { padding: 12px 28px; background: white; border: 1px solid var(--gold-light); cursor: pointer; border-radius: 6px; font-weight: 600; transition: 0.3s; }
.floor-tab.active, .floor-tab:hover { background: var(--gold); color: white; border-color: var(--gold); }

/* Layout a 2 columnas */
.layout-inventario { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.mapa-y-extras { flex: 1.5; min-width: 55%; display: flex; flex-direction: column; gap: 20px; }
.info-wrap { flex: 1; min-width: 320px; }

/* Mapa y Cuadritos Interactivos */
.plan-wrap { position: relative; width: 100%; background: white; border: 1px solid var(--gold-light); border-radius: 8px; overflow: hidden; }
.plan-img { width: 100%; display: block; height: auto; }
.plan-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.unit-zone { position: absolute; cursor: pointer; border-radius: 2px; transition: 0.3s; }
.unit-zone.available { background-color: rgba(39, 174, 96, 0.4); border: 2px solid #27ae60; }
.unit-zone.available:hover { background-color: rgba(39, 174, 96, 0.7); }
.unit-zone.sold { background-color: rgba(192, 57, 43, 0.4); border: 2px solid #c0392b; pointer-events: none; }

.leyenda-sencilla { display: flex; gap: 25px; padding-left: 5px; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot.disponible { background-color: #27ae60; }
.dot.vendido { background-color: #c0392b; }

/* Contenedor 3D (Caja Negra) */
.distribucion-container { background-color: #1a252c; border-radius: 10px; padding: 25px; color: white; }
.distribucion-container h4 { color: white; margin-bottom: 15px; font-size: 1.1rem; }
.distribucion-img-wrapper { width: 100%; background: #111a1f; border-radius: 6px; padding: 10px; text-align: center; }
.imagen-distribucion { max-width: 100%; height: auto; border-radius: 4px; }

/* Tarjeta Blanca (Cotizador) */
.unit-card { background: white; border-radius: 12px; padding: 35px 30px; box-shadow: 0 12px 40px rgba(0,0,0,0.07); border: 1px solid #eaeaea; }
.unit-img-container { width: 100%; height: 200px; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.unit-img-container img { width: 100%; height: 100%; object-fit: cover; }
.unit-details h3 { font-size: 2rem; color: var(--gold-dark); margin-bottom: 5px; }
.badge-disponible { display: inline-block; background: #27ae60; color: white; padding: 4px 12px; border-radius: 4px; font-size: 0.8rem; margin-bottom: 15px; font-weight: bold; }
#unit-info p { margin-bottom: 5px; color: #555; }

/* Mejoras y Formulario */
.opciones-mejoras { border-top: 1px solid #edf2f7; padding-top: 20px; margin-top: 20px; margin-bottom: 20px; }
.titulo-mejoras { font-weight: 600; display: block; margin-bottom: 12px; }
.lista-mejoras { display: flex; flex-direction: column; gap: 10px; }
.mejora-label { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; }
.mejora-checkbox { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }

.cotizador-action { border-top: 1px solid #edf2f7; padding-top: 20px; display: flex; flex-direction: column; gap: 15px; }
.input-nombre { padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; outline: none; }
.total-container { display: flex; justify-content: space-between; align-items: center; }
.total-label { color: #666; font-weight: 600; }
.total-num { font-size: 1.6rem; font-weight: 700; color: var(--gold); }

.btn-whatsapp { background-color: #25D366; color: white; border: none; padding: 15px; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.3s; font-size: 1rem; }
.btn-whatsapp:hover { background-color: #128C7E; transform: translateY(-2px); }

@media (max-width: 992px) { .layout-inventario { flex-direction: column; } .mapa-y-extras, .info-wrap { width: 100%; min-width: 100%; } }
/* ==========================================================================
   ESTILOS: CARRUSEL DE RENDERS INFERIOR
   ========================================================================== */
.seccion-renders-carrusel { 
    padding: 60px 5%; 
    background-color: gray; 
    text-align: center; 
}
.contenedor-renders { 
    max-width: 1100px; 
    margin: 0 auto; 
}
.titulo-renders { 
    font-size: 2rem; 
    color: var(--gold-dark); 
    margin-bottom: 30px; 
    text-transform: uppercase;
    letter-spacing: 1px;
}
.carrusel-renders-container { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.carrusel-renders-window { 
    width: 100%; 
    overflow: hidden; 
    border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); 
}
.carrusel-renders-track { 
    display: flex; 
    transition: transform 0.5s ease-in-out; 
    width: 100%; 
}
.carrusel-renders-slide { 
    min-width: 100%; 
    box-sizing: border-box; 
}
.carrusel-renders-slide img { 
    width: 100%; 
    height: 500px; 
    object-fit: cover; 
    display: block; 
    cursor: pointer;
}

/* Botones de navegación del nuevo carrusel */
.btn-renders-prev, .btn-renders-next { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(255, 255, 255, 0.9); 
    border: 1px solid var(--gold-light); 
    color: var(--gold-dark); 
    font-size: 1.5rem; 
    padding: 12px 18px; 
    cursor: pointer; 
    border-radius: 50%; 
    z-index: 10; 
    transition: 0.3s; 
}
.btn-renders-prev { left: -25px; }
.btn-renders-next { right: -25px; }

.btn-renders-prev:hover, .btn-renders-next:hover { 
    background: var(--gold); 
    color: white; 
    border-color: var(--gold);
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .carrusel-renders-slide img { height: 280px; }
    .btn-renders-prev { left: 5px; padding: 8px 12px; font-size: 1.2rem; }
    .btn-renders-next { right: 5px; padding: 8px 12px; font-size: 1.2rem; }
}
/* ==========================================================================
   ¡CIERRES DE SEGURIDAD! 
   (Ponemos estas llaves por si acaso dejaste algo abierto arriba)
   ========================================================================== */

/* ==========================================================================
   ESTILOS: CARRUSEL DE RENDERS INFERIOR
   ========================================================================== */
.seccion-renders-carrusel { 
    padding: 60px 5%; 
    background-color: #ffffff; 
    text-align: center; 
}
.contenedor-renders { 
    max-width: 1100px; 
    margin: 0 auto; 
}
.titulo-renders { 
    font-size: 2rem; 
    color: #c4a57a; 
    margin-bottom: 30px; 
    text-transform: uppercase;
    letter-spacing: 1px;
}
.carrusel-renders-container { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.carrusel-renders-window { 
    width: 100%; 
    overflow: hidden; 
    border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); 
}
.carrusel-renders-track { 
    display: flex; 
    transition: transform 0.5s ease-in-out; 
    width: 100%; 
}
.carrusel-renders-slide { 
    min-width: 100%; 
    box-sizing: border-box; 
}
.carrusel-renders-slide img { 
    width: 100%; 
    height: 500px; 
    object-fit: cover; 
    display: block; 
    cursor: pointer;
}
.btn-renders-prev, .btn-renders-next { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(255, 255, 255, 0.9); 
    border: 1px solid #c4a57a; 
    color: #111111; 
    font-size: 1.5rem; 
    padding: 12px 18px; 
    cursor: pointer; 
    border-radius: 50%; 
    z-index: 10; 
    transition: 0.3s; 
}
.btn-renders-prev { left: -25px; }
.btn-renders-next { right: -25px; }

@media (max-width: 768px) {
    .carrusel-renders-slide img { height: 280px; }
    .btn-renders-prev { left: 5px; padding: 8px 12px; }
    .btn-renders-next { right: 5px; padding: 8px 12px; }
}

/* ==========================================================================
   ESTILOS FORMATEADOS PARA EL FOOTER (PARVADA)
   ========================================================================== */
.footer-parvada {
    background-color: #ffff; /* Fondo oscuro premium */
    color: #ffffff;
    padding: 60px 5% 30px 5%;
    font-family: sans-serif;
}
.footer-contenido {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}
.footer-columna {
    flex: 1;
    min-width: 220px;
}
.footer-logo-texto {
    font-size: 2rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
    color: #1a252c; /* Dorado */
}
.footer-slogan {
    color: #888888;
    font-size: 0.9rem;
}
.footer-columna h4 {
    color: #000000;
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.lista-contacto {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lista-contacto li {
    margin-bottom: 12px;
    color: #000000;
    font-size: 0.95rem;
}
.lista-contacto i {
    color: #c4a57a;
    margin-right: 10px;
}
.redes-sociales a {
    color: #ffffff;
    font-size: 1.3rem;
    margin-right: 15px;
    transition: 0.3s;
}
.redes-sociales a:hover {
    color: #c4a57a;
}
.footer-derechos {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #222222;
    color: #666666;
    font-size: 0.85rem;
}
.footer-derechos strong {
    color: #c4a57a;
}

/* ==========================================================================
   ESTILOS DEL LIGHTBOX (OCULTO POR DEFECTO)
   ========================================================================== */
.lightbox-modal {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}
.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 85vh;
    position: center;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 4px;
}
.lightbox-close {
    position: center;
    top: 20px;
    right: 40px;
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
}/* =========================================
   IMÁGENES DE AMENIDADES - SECCIÓN 1 (Pájaro en Piedra)
   ========================================= */
.card-alberca { background-image: url('foto-alberca-1.jpg'); }
.card-gym { background-image: url('casaclubpep copy.jpg'); }
.card-seguridad { background-image: url('foto-caseta-1.jpg'); }
.card-rooftop { background-image: url('tu_render_amenidad_2 copy.jpg'); }


/* =========================================
   ESTRUCTURA DE AMENIDADES - SECCIÓN 2 (Parvada)
   ========================================= */

/* 1. Preparamos el contenedor para que la imagen no se desborde al hacer zoom */
.tarjeta-amenidad2 {
    position: relative;
    overflow: hidden;
    /* Copia aquí el ancho, alto y padding que tengan tus tarjetas originales */
    min-height: 250px; 
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

/* 2. El pseudo-elemento ::before donde realmente vive la imagen */
.tarjeta-amenidad2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* Transición suave para el zoom */
    transition: transform 0.4s ease;
    /* Filtro para oscurecer la foto y que el texto blanco se lea bien (ajústalo si lo necesitas) */
    filter: brightness(0.7); 
    z-index: -1;
}

/* 3. ¡La magia del Mini Zoom! Agrandamos el ::before al pasar el mouse */
.tarjeta-amenidad2:hover::before {
    transform: scale(1.08); 
}

/* =========================================
   RUTAS DE LAS IMÁGENES - SECCIÓN 2
   ========================================= */
.card-alberca-2::before { 
    background-image: url('nombre-de-tu-foto-alberca-2.jpg'); 
}
.card-gym-2::before { 
    background-image: url('nombre-de-tu-foto-gym-2.jpg'); 
}
.card-seguridad-2::before { 
    background-image: url('nombre-de-tu-foto-caseta-2.jpg'); 
}
.card-rooftop-2::before { 
    background-image: url('nombre-de-tu-foto-cowork-2.jpg'); 
}
/* =========================================
   BOTÓN DE DESCARGA DE BROCHURE
   ========================================= */

/* Centrar el botón en la pantalla y darle espacio */
.contenedor-boton-brochure {
    text-align: center;
    margin: 40px 0 80px 0; /* Da un respiro arriba y abajo del botón */
}

/* El diseño del botón dorado */
.btn-dorado-descarga {
    display: inline-block;
    background-color: #c49a52; /* Color dorado similar al que ya usas */
    color: #1a1c1e; /* Letra oscura para que resalte */
    padding: 15px 40px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none; /* Quita la raya de abajo del link */
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombrita suave */
}

/* Efecto al pasar el mouse por encima */
.btn-dorado-descarga:hover {
    background-color: #b08745; /* Se oscurece un poco el dorado */
    transform: translateY(-3px); /* Da un saltito elegante hacia arriba */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* =========================================
   COLOR DE LOS TÍTULOS DENTRO DE LAS CARDS
   ========================================= */
.tarjeta-amenidad h3,
.tarjeta-amenidad2 h3 {
    color: #8fabec !important; /* Esto los vuelve blancos e ignora el azul global */
}