:root {
    --bs-primary: #198754; /* Un verde vibrante para destacar la marca */
    --bs-dark: #343a40; /* Mantiene un tono oscuro para el pie de página, etc. */
}

body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa; /* Color de fondo base más claro */
    padding-top: 80px; /* Espacio para el navbar fijo */
    position: relative; /* Necesario para que el pseudo-elemento se posicione correctamente */
    overflow-x: hidden; /* Evita barras de desplazamiento horizontales si el patrón se desborda */
}

/* Patrón sutil en el fondo */
body::before {
    content: "";
    position: fixed; /* Para que el patrón se quede quieto al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/fondo.png'); /* ¡REEMPLAZA ESTO CON LA RUTA CORRECTA DE TU IMAGEN! */
    background-repeat: repeat;
    background-size: 50px; /* Tamaño de cada repetición del patrón */
    opacity: 0.04; /* Aún más tenue. Ajusta este valor (0.01 a 0.1, por ejemplo) */
    z-index: -1; /* Esto lo envía detrás de todo el contenido */
    pointer-events: none; /* Asegura que el patrón no interfiera con clics en la página */
}


/* Navbar */
.navbar-brand {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--bs-primary) !important;
}

.nav-link {
    font-weight: 500;
    color: #555 !important;
    transition: color 0.3s ease-in-out;
}

.nav-link:hover {
    color: var(--bs-primary) !important;
}

/* Top Bar */
.top-bar {
    height: 5px;
    background-color: var(--bs-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040; /* Justo debajo del navbar */
}

/* Banner */
.banner {
    background: url('img/muelle.png') no-repeat center center/cover;
    color: white;
    text-align: center;
    padding: 10rem 0;
    margin-bottom: 3rem;
    box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1);
}

.banner h1 {
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

/* Category Sections */
.category-section {
    margin-bottom: 4rem;
}

.category-title {
    font-size: 2.2rem;
    color: var(--bs-dark);
    border-bottom: 2px solid var(--bs-primary);
    display: inline-block;
    padding-bottom: 0.5rem;
}

/* Apartment List */
.apartment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Espacio entre los elementos de la lista */
    justify-content: center; /* Centra los elementos */
}

.apartment-item {
    background-color: white;
    border: 1px solid #e0e0e0;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    flex: 1 1 calc(50% - 2rem); /* Asegura dos columnas con espacio */
    max-width: calc(50% - 2rem); /* Limita el ancho en pantallas grandes */
    box-sizing: border-box; /* Incluye padding y borde en el ancho */
}

@media (max-width: 768px) {
    .apartment-item {
        flex: 1 1 100%; /* Una columna en móviles */
        max-width: 100%;
    }
}

.apartment-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.apartment-item h3 {
    color: var(--bs-primary);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.apartment-item p {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 0.5rem;
}

.apartment-item .btn {
    margin-top: 1rem;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.apartment-item .btn:hover {
    background-color: darken(var(--bs-primary), 10%);
    border-color: darken(var(--bs-primary), 10%);
}

/* Carousel */
.carousel-item img {
    height: 250px; /* Altura fija para las imágenes del carrusel */
    object-fit: cover; /* Recorta la imagen para cubrir el área sin distorsionarla */
    border-radius: 0.25rem; /* Bordes redondeados */
}

/* Contact Section */
#contact .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    font-size: 1.25rem;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#contact .btn-primary:hover {
    background-color: darken(var(--bs-primary), 10%);
    border-color: darken(var(--bs-primary), 10%);
}

/* Footer */
footer {
    background-color: var(--bs-dark) !important; /* Usa la variable de Bootstrap */
    color: white;
}

/* --- NUEVO: ANCHO PERSONALIZADO PARA EL MODAL --- */
.modal-custom-width {
    /* Establece el ancho al 80% del viewport (pantalla).
     Bootstrap por defecto usa 'max-width', 
     así que también lo establecemos.
    */
    width: 80vw;
    max-width: 80vw;
}

/* Esto es para móviles. En pantallas pequeñas (menos de 576px),
  80% es muy angosto. Es mejor usar 95% para
  aprovechar mejor el espacio, como hace Bootstrap.
*/
@media (max-width: 576px) {
    .modal-custom-width {
        width: 95vw;
        max-width: 95vw;
    }
}

/* --- NUEVOS ESTILOS PARA EL MODAL --- */

/* Contenedor del modal para altura personalizada */
.modal-custom-height .modal-content {
    /* Altura aproximada del 70% del viewport */
    height: 70vh; 
    max-height: 800px; /* Límite máximo */
    display: flex;
    flex-direction: column;
}

.modal-custom-height .modal-body {
    flex-grow: 1; /* Permite que el cuerpo del modal ocupe el espacio restante */
    overflow-y: hidden; /* Evita el scroll en el cuerpo principal del modal */
    display: flex;
}

/* Asegura que la fila dentro del modal-body ocupe todo el alto */
.modal-custom-height .modal-body .row {
    flex-grow: 1;
}

/* Columnas de carrusel y texto */
.modal-carousel-col, .modal-text-col {
    display: flex;
    flex-direction: column;
    max-height: 100%; /* Asegura que no se desborden */
}

/* Contenedor del carrusel dentro del modal */
.modal-carousel-col .carousel {
    flex-grow: 1; /* El carrusel ocupa el espacio disponible */
    height: 100%;
}

.modal-carousel-col .carousel-inner,
.modal-carousel-col .carousel-item {
    height: 100%; /* El carrusel interno ocupa todo el alto */
}

/* Imágenes dentro del carrusel del modal */
.modal-body .carousel-item img {
    height: 100%; /* La imagen ocupa el 100% del alto del carrusel */
    object-fit: contain; /* 'contain' para ver la imagen completa sin recortar */
    border-radius: 0.25rem;
}

/* Contenedor del texto en el modal */
.apartment-info-modal {
    height: 100%; /* Ocupa todo el alto de su columna */
    overflow-y: auto; /* Habilita el scroll SOLO para el texto si es muy largo */
    padding-right: 10px; /* Pequeño espacio para la barra de scroll */
}

/* --- CAMBIO DE COLOR FLECHAS CARRUSEL --- */
/* Cambia el color de las flechas del carrusel a gris claro */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Este filtro toma el SVG negro por defecto y lo convierte en gris */
    filter: invert(0.7) brightness(1); 
}

/* Opcional: Oscurecerlas un poco al pasar el mouse (hover) */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    filter: invert(0.5) brightness(1);
}

/* --- CORRECCIÓN MODAL MÓVIL --- */
@media (max-width: 767.98px) {

    /* 1. Cambia la altura del modal para que se adapte al contenido */
    .modal-custom-height .modal-content {
        height: auto; /* La altura será la del contenido */
        max-height: 90vh; /* Límite para que no ocupe toda la pantalla */
    }

    /* 2. Permite que el cuerpo del modal haga scroll vertical */
    .modal-custom-height .modal-body {
        overflow-y: auto; /* Habilita el scroll en el cuerpo del modal */
        display: block;   /* Desactiva 'flex' para que las columnas se apilen correctamente */
    }

    /* 3. Resetea la altura de las columnas y el carrusel */
    .modal-carousel-col,
    .modal-text-col {
        height: auto;
        max-height: none;
    }

    .modal-carousel-col .carousel,
    .modal-carousel-col .carousel-inner,
    .modal-carousel-col .carousel-item {
        height: auto; /* La altura se basará en la imagen */
    }

    /* 4. Resetea la altura de la imagen y el contenedor de texto */
    .modal-body .carousel-item img {
        height: auto; /* La imagen toma su altura natural */
        max-height: 45vh; /* Opcional: limita la altura de la imagen */
    }

    .apartment-info-modal {
        height: auto; /* Altura automática */
        overflow-y: visible; /* Sin scroll interno */
        padding-right: 0;
    }
}