/* baja un poco el celular que esta al lado de los botones de manu */
.main-nav-in-header ul li .phone-number {
   position: relative; 
   top: 4px;          
	font-weight: bold;
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Fondo blanco de la página */
    color: #333;
    font-size: 1em;
    line-height: 1.6; /* Mejora la legibilidad del texto general */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor en la página */
    padding: 0 15px; /* Pequeño padding horizontal para que el contenido no toque los bordes */
}

/* --- Barra superior (logo, info y navegación) --- */
.top-bar {
    background-color: #ffffff; /* Blanco puro para el header */
    color: #333;
    padding: 8px 0; /* Barra más baja */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil para que resalte */
    display: flex;
    justify-content: center; /* Centra el contenido del header */
    align-items: center;
    position: relative; /* Es importante que tenga una posición para el z-index */
    z-index: 100; /* Asegura que esté por encima de otros elementos */
}

.top-bar .container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-between; /* Distribuye espacio entre logo, info y nav */
    align-items: center; /* Alinea verticalmente los elementos */
    width: 100%;
    padding: 0;
}

.top-bar .logo {
    flex-shrink: 0;
    margin-right: 20px;
}

.top-bar .logo img {
    max-height: 45px; /* Altura del logo para barra más baja */
    display: block;
}

.top-bar .info-contacto {
    flex-grow: 1;
    text-align: center;
    margin: 0 20px;
    font-size: 0.85em; /* Fuente de info de contacto un poco más pequeña */
}

.top-bar .info-contacto p {
    margin: 3px 0; /* Margen reducido entre líneas de texto */
}

/* Estilos de navegación dentro del header */
.main-nav-in-header {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 450px; /* Ancho mínimo para que los botones no salten de línea */
}

.main-nav-in-header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end; /* Alinea los ítems de la lista a la derecha */
    flex-wrap: nowrap; /* Evita que los botones salten de línea */
    gap: 15px; /* Espacio entre botones */
}

.main-nav-in-header ul li {
    margin: 0;
}

.main-nav-in-header ul li a {
    color: #333; /* Gris más oscuro para el texto */
    background-color: transparent;
    text-decoration: none;
    font-weight: 700; /* Más negrita */
    padding: 6px 15px;
    border-radius: 3px; /* Bordes casi cuadrados */
    border: none; /* ¡Sin borde! */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
    white-space: nowrap; /* Evita que el texto del botón se rompa */
    font-size: 0.9em; /* Fuente del botón un poco más pequeña */
    letter-spacing: 0.5px;
    font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; /* Fuente más cuadrada para los botones */
}

.main-nav-in-header ul li a:hover {
    background-color: #f0f0f0; /* Gris muy claro al pasar el mouse */
    color: #333; /* Texto se oscurece un poco más */
    transform: translateY(-2px); /* Efecto "flotante" hacia arriba */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra para el efecto flotante */
}

/* --- Banner carrusel --- */
.carousel-banner {
    width: 100%;
    overflow: hidden; /* ¡Esencial para el carrusel! Oculta el contenido que se desborda */
    position: relative; /* ¡Esencial para el carrusel! Permite posicionar elementos hijos */
    height: 400px; /* Altura del carrusel */
    background-color: #ccc; /* Color de fondo si no hay imagen */
    margin-bottom: 20px;
    margin-top: 0; /* Aseguramos que el carrusel esté justo debajo del header */
    /* NO TOCAR position:relative; o overflow:hidden; aquí sin entender bien su impacto en carruseles */
}

.carousel-inner {
    display: flex; /* Asegura que los items se alineen horizontalmente */
    transition: transform 0.5s ease-in-out; /* Transición para el movimiento */
    height: 100%; /* Ocupa toda la altura del banner */
    width: 100%; /* Ocupa todo el ancho */
}

.carousel-item {
    min-width: 100%; /* Cada item ocupa el 100% del ancho del carrusel-inner */
    height: 100%; /* Ocupa toda la altura del carrusel-inner */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-size: 2em;
    flex-shrink: 0; /* Importante para que los ítems no se encojan y mantengan su ancho */
}

/* --- Contenido principal --- */
.main-content {
    padding: 20px 0; /* Relleno superior e inferior */
}

/* Estilos de las tarjetas de propiedades (ejemplo) */
.propiedades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Diseño responsivo de cuadrícula */
    gap: 25px; /* Espacio entre las tarjetas */
    padding: 20px 0;
}

.propiedad-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    text-align: center;
    padding-bottom: 15px;
}

.propiedad-card img {
    width: 200px; /* O el tamaño que desees para el lado del cuadrado */
    height: 200px; /* Debe ser igual al width para que sea un cuadrado perfecto */
    object-fit: cover;
    object-position: center; /* Centra la imagen dentro del "cuadro" */
    margin-bottom: 10px;
    display: block; /* Asegura que 'margin: auto' pueda centrar la imagen horizontalmente si el contenedor lo permite */
    margin-left: auto; /* Para centrar la imagen si su contenedor es más ancho */
    margin-right: auto; /* Para centrar la imagen si su contenedor es más ancho */
}

.propiedad-card h3 {
    font-size: 1.2em;
    color: #007bff;
    margin: 10px 0;
    padding: 0 15px;
}

.propiedad-card p {
    font-size: 0.9em;
    color: #666;
    margin: 5px 0;
    padding: 0 15px;
}

.propiedad-card .btn-ver-mas {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.propiedad-card .btn-ver-mas:hover {
    background-color: #0056b3;
}


/* --- Pie de página --- */
.main-footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

/* --- Media Queries para responsividad (¡Importante!) --- */
/* --- Media Queries para responsividad (¡Importante!) --- */
@media (max-width: 900px) {
    .top-bar .container {
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: center; /* Centra los elementos horizontalmente */
        /* width: 100%; ya está definido arriba, pero asegúrate de que no haya un padding lateral excesivo */
        padding: 0 15px; /* Mantenemos un pequeño padding si es necesario para el contenido */
    }

    .top-bar .logo {
        flex-basis: auto; /* Permite que el tamaño del logo se ajuste automáticamente */
        width: 100%; /* El div del logo ocupa todo el ancho disponible */
        text-align: center; /* Centra el contenido inline del logo (como el 'a') */
        margin: 10px 0; /* Margen superior e inferior para separación */
    }

    /* ESTILO CLAVE PARA CENTRAR LA IMAGEN */
    .top-bar .logo img {
        display: block; /* Asegura que la imagen sea un elemento de bloque */
        margin: 0 auto; /* Centra la imagen horizontalmente */
        max-height: 45px; /* Mantiene la altura máxima definida */
        /* Si el logo es muy ancho en móviles y quieres que se reduzca, podrías añadir: */
        /* max-width: 80%; */
        /* height: auto; */
    }

    .top-bar .info-contacto {
        flex-basis: auto;
        width: 100%;
        text-align: center;
        margin: 10px 0;
        /* Asegúrate de que el font-size sea legible en móviles si no lo es ya */
        font-size: 0.9em;
    }

    .main-nav-in-header {
        flex-basis: auto;
        width: 100%;
        text-align: center;
        margin: 10px 0;
        min-width: auto; /* Elimina el min-width fijo para pantallas pequeñas */
    }

    .main-nav-in-header ul {
        justify-content: center; /* Centra los ítems de navegación */
        flex-wrap: wrap; /* Permite que los ítems de navegación se envuelvan si no caben */
    }

    .carousel-banner {
        height: 250px; /* Ajusta la altura del carrusel para móviles */
    }

    .carousel-item {
        font-size: 1.5em; /* Tamaño de fuente más pequeño para el texto del carrusel */
    }
}

@media (max-width: 600px) {
    .propiedades-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas muy pequeñas */
    }
}


/* gpt */


.menu-toggle {
    display: none;
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    margin-left: auto;
}

@media (max-width: 900px) {
    .menu-toggle {
        display: block;
        z-index: 999;
    }

    .main-nav-in-header {
        display: none;
        width: 100%;
        background-color: #fff;
        text-align: center;
        padding: 10px 0;
        position: absolute;
        top: 100%;
        left: 0;
    }

    .main-nav-in-header.active {
        display: block;
    }

    .main-nav-in-header ul {
        flex-direction: column;
        gap: 10px;
    }

    .main-nav-in-header ul li a {
        display: block;
        padding: 10px;
        color: #333;
        background-color: transparent;
        text-decoration: none;
    }
}

/* gpt images de ws chica y reloj de la barra sup */

.iconito {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 5px;
}
/* alerta formulario contacto */
.alerta {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
}

.alerta.exito {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alerta.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

h3 {
  text-transform: uppercase;
}
.propiedad-card h3 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 10px;
    color: #333;
}