/* assets/css/styles.css - Tema: Profesional Sofisticado (Mejorado) */

/* -----------------------------
   1. Variables CSS (Personalización fácil)
------------------------------ */
:root {
  /* Colores Corporativos */
  --color-principal: #1a3c6c;       /* Azul Profundo - Transmite confianza, seriedad */
  --color-secundario: #d4af37;     /* Dorado/Amarillo Oro - Lujo, profesionalidad, éxito */
  --color-acento: #0d7fa5;        /* Azul Turquesa - Modernidad, frescura, complemento */
  
  /* Colores Neutros */
  --color-texto-principal: #333333;
  --color-texto-secundario: #666666;
  --color-fondo: #ffffff;
  --color-fondo-seccion: #f8f9fa;
  --color-borde: #e9ecef;
  --color-sombra: rgba(0, 0, 0, 0.1);
  
  /* Tipografía */
  /* Considerar importar una fuente moderna desde Google Fonts, p.ej., 'Lato', 'Open Sans', 'Roboto' */
  /* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); */
  --fuente-principal: 'Lato', Arial, sans-serif; /* Reemplaza 'Lato' por la fuente elegida o deja Arial por defecto */
  
  /* Espaciados */
  --espaciado-pequeno: 0.5rem;
  --espaciado-medio: 1rem;
  --espaciado-grande: 2rem;
  --espaciado-xl: 3rem;
  
  /* Bordes */
  --radio-borde: 8px;
  --ancho-borde: 1px;
}

/* -----------------------------
   2. Estilos Generales y Tipografía
------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-principal);
    line-height: 1.6;
    color: var(--color-texto-principal);
    background-color: var(--color-fondo);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-principal);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--espaciado-medio);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; border-bottom: 2px solid var(--color-secundario); padding-bottom: calc(var(--espaciado-medio) / 2); display: inline-block; }
h3 { font-size: 1.5rem; color: var(--color-acento); }

a {
    color: var(--color-acento);
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
}
a:hover {
    color: var(--color-principal);
    text-decoration: underline;
}

p {
    margin-bottom: var(--espaciado-medio);
    color: var(--color-texto-secundario);
}

/* -----------------------------
   3. Encabezado (Header)
------------------------------ */
header {
    background-color: var(--color-principal);
    color: white;
    padding: var(--espaciado-medio) var(--espaciado-grande);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px var(--color-sombra);
}

.logo img {
    height: 60px;
}

nav ul {
    display: flex;
    list-style: none;
}

nav a {
    color: white;
    text-decoration: none;
    margin-left: var(--espaciado-grande);
    font-weight: 500;
    padding: calc(var(--espaciado-pequeno) / 2) var(--espaciado-medio);
    border-radius: var(--radio-borde);
    transition: background-color 0.3s ease;
}
nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

/* -----------------------------
   4. Sección Hero (Principal)
------------------------------ */
.hero {
    /* Imagen de fondo hero existente */
    background: linear-gradient(rgba(26, 60, 108, 0.5), rgba(26, 60, 108, 0.5)), url('https://ss-static-001.esmsv.com/r/content/host1/35926336be98884e275c5f48960b6031/editor/11.webp');
    background-size: cover;
    background-position: center;
    height: 65vh; /* Un poco menos alto que antes */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: var(--espaciado-grande);
    margin-top: 80px; /* Altura del header fijo */
}
.hero h1 {
    font-size: 2.8rem;
    margin-bottom: var(--espaciado-medio);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.hero p {
    font-size: 1.2rem;
    margin-bottom: var(--espaciado-grande);
    color: #f0f0f0; /* Texto más claro sobre fondo oscuro */
    max-width: 700px;
}

.cta-button {
    background-color: var(--color-secundario);
    color: var(--color-principal);
    padding: var(--espaciado-medio) calc(var(--espaciado-medio) * 2);
    text-decoration: none;
    border-radius: var(--radio-borde);
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px var(--color-sombra);
    border: 2px solid var(--color-secundario); /* Borde para definición */
}
.cta-button:hover {
    background-color: transparent;
    color: var(--color-secundario);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* -----------------------------
   5. Secciones Generales (Services, Properties, About, Contact)
------------------------------ */
section {
    padding: var(--espaciado-xl) var(--espaciado-grande);
    /* Fondos alternados para mejor definición visual */
}
#services { background-color: var(--color-fondo); }
#properties { background-color: var(--color-fondo-seccion); }
#about { background-color: var(--color-fondo); }
#contact { background-color: var(--color-fondo-seccion); }

section > h2 {
    text-align: center;
    margin-bottom: var(--espaciado-xl);
}

/* -----------------------------
   6. Tarjetas (Services, Properties)
------------------------------ */
.service-grid, .property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--espaciado-grande);
}

.service-card, .property-card {
    background-color: var(--color-fondo);
    border: var(--ancho-borde) solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espaciado-medio);
    box-shadow: 0 4px 8px var(--color-sombra);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.service-card:hover, .property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.property-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: calc(var(--radio-borde) / 2) calc(var(--radio-borde) / 2) 0 0;
}

.property-card h4 {
    margin-top: var(--espaciado-medio);
    margin-bottom: calc(var(--espaciado-pequeno) / 2);
    flex-grow: 1; /* Empuja el precio hacia abajo */
}

.property-card p.price {
    color: var(--color-principal);
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: var(--espaciado-medio);
}

/* Galería de miniaturas */
.imagenes-adicionales-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    justify-content: center;
}
.imagenes-adicionales-container img {
    width: 50px;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--color-borde);
    transition: transform 0.2s ease;
}
.imagenes-adicionales-container img:hover {
    transform: scale(1.1);
    border-color: var(--color-acento);
}

/* -----------------------------
   7. Formulario de Contacto
------------------------------ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaciado-grande);
}

.contact-info h4, .contact-form h3 {
    margin-bottom: calc(var(--espaciado-medio) / 2);
}

/* --- Estilos para inputs, textarea, select del formulario de contacto --- */
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: var(--espaciado-medio);
    margin-bottom: var(--espaciado-medio);
    border: var(--ancho-borde) solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(13, 127, 165, 0.2);
}

/* --- Estilos para el botón del formulario de contacto --- */
.contact-form button {
    background-color: var(--color-principal);
    color: white;
    padding: var(--espaciado-medio) calc(var(--espaciado-medio) * 2);
    border: none;
    border-radius: var(--radio-borde);
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.contact-form button:hover {
    background-color: #0d2a4d; /* Un tono más oscuro */
    transform: translateY(-2px);
}

/* -----------------------------
   8. Pie de Página (Footer)
------------------------------ */
footer {
    background-color: var(--color-principal);
    color: white;
    text-align: center;
    padding: var(--espaciado-grande);
}

footer p {
    color: #cccccc; /* Texto más claro en el footer */
    margin-bottom: var(--espaciado-pequeno);
}
footer a {
    color: var(--color-secundario);
}
footer a:hover {
    color: white;
}

.social-icons {
    margin: var(--espaciado-medio) 0;
}
.social-icons a {
    color: white;
    margin: 0 var(--espaciado-pequeno);
    font-size: 1.5rem;
    transition: color 0.3s ease, transform 0.2s ease;
}
.social-icons a:hover {
    color: var(--color-secundario);
    transform: scale(1.2);
}

/* -----------------------------
   9. Información de Dispositivo (Esquina)
------------------------------ */
.info-dispositivo {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente */
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75em; /* Más pequeño */
    color: var(--color-texto-secundario);
    z-index: 1001;
    box-shadow: 0 2px 4px var(--color-sombra);
    backdrop-filter: blur(5px); /* Efecto vidrio esmerilado */
}

/* -----------------------------
   10. Filtros y Paginación (Sección Propiedades)
------------------------------ */


/* --- Estilos para filtros --- */
#filters-container {
    background-color: var(--color-fondo);
    padding: var(--espaciado-medio);
    border-radius: var(--radio-borde);
    margin-bottom: var(--espaciado-grande);
    border: 1px dashed var(--color-borde); /* Borde sutil para definir el área */
}
#filters-container h3 {
    margin-top: 0;
    margin-bottom: var(--espaciado-medio);
    color: var(--color-principal);
}
#filters-container label {
    display: block;
    margin-bottom: calc(var(--espaciado-pequeno) / 2);
    font-weight: 500;
    color: var(--color-texto-secundario);
}
#filters-container input,
#filters-container select {
    width: 100%;
    margin-bottom: var(--espaciado-medio);
    padding: calc(var(--espaciado-pequeno) + 2px); /* Ajuste fino */
    border: var(--ancho-borde) solid var(--color-borde);
    border-radius: 4px;
    font-family: inherit;
}
#filters-container button {
    background-color: var(--color-acento);
    color: white;
    padding: var(--espaciado-pequeno) var(--espaciado-medio);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    margin-right: var(--espaciado-pequeno);
    margin-top: var(--espaciado-pequeno);
    transition: background-color 0.3s ease;
}
#filters-container button:last-child {
    background-color: #6c757d; /* Color para "Limpiar" */
}
#filters-container button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
#filters-container button:last-child:hover {
    background-color: #5a6268;
}

/* --- Estilos para paginación --- */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: var(--espaciado-grande);
    margin-bottom: var(--espaciado-grande);
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 5px;
    flex-wrap: wrap; /* Permite que se envuelva en pantallas pequeñas */
}

.pagination li a,
.pagination li span {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    transition: all 0.2s ease;
    color: var(--color-principal);
    background-color: var(--color-fondo);
}
.pagination li a:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.pagination li .current-page {
    background-color: var(--color-principal);
    color: white;
    border-color: var(--color-principal);
}
.pagination li .disabled {
    color: #6c757d;
    cursor: not-allowed;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* -----------------------------
   11. Detalle de Propiedad (property_detail.html - Estilos Comunes)
------------------------------ */

/* Asegurar que los estilos compartidos también se apliquen */
.property-detail {
    padding: var(--espaciado-xl) var(--espaciado-grande);
    margin-top: 80px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-fondo);
}

.property-header {
    text-align: center;
    margin-bottom: var(--espaciado-xl);
}

.property-header h1 {
    color: var(--color-principal);
    margin-bottom: var(--espaciado-medio);
}

.property-header p.price {
    color: var(--color-secundario);
    font-weight: bold;
    font-size: 1.5rem;
}


/* -----------------------------
   12. Media Queries (Responsive Design)
------------------------------ */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        padding: var(--espaciado-medio);
    }

    nav ul {
        margin-top: var(--espaciado-medio);
        flex-wrap: wrap;
        justify-content: center;
    }

    nav a {
        margin: calc(var(--espaciado-pequeno) / 2) var(--espaciado-pequeno);
        padding: var(--espaciado-pequeno) var(--espaciado-medio);
        font-size: 0.9rem;
    }

    .hero {
        height: 60vh;
        padding: var(--espaciado-medio);
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

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

    .service-grid, .property-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }

    section {
        padding: var(--espaciado-grande) var(--espaciado-medio);
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.4rem; }

    /* Ajustar filtros para móviles */
    #filters-container {
        padding: var(--espaciado-medio);
    }
    #filters-container input,
    #filters-container select {
        margin-bottom: var(--espaciado-pequeno);
    }
    #filters-container button {
        width: 100%;
        margin-bottom: var(--espaciado-pequeno);
        margin-right: 0;
    }
}

/* -----------------------------
   13. Ajustes Finales y Accesibilidad
------------------------------ */

/* Mejorar contraste para accesibilidad */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px dashed var(--color-acento);
    outline-offset: 2px;
}

/* Transiciones suaves para interacciones */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* -----------------------------
   14. Estilos Específicos para Formularios y Filtros
------------------------------ */

/* --- Estilos para el Formulario de Contacto en index.html --- */
/* Asegura que los estilos definidos para .contact-form se apliquen correctamente */
#contact .contact-form input,
#contact .contact-form textarea,
#contact .contact-form select { /* Añadido select por si se usa */
    width: 100%;
    padding: var(--espaciado-medio);
    margin-bottom: var(--espaciado-medio);
    border: var(--ancho-borde) solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#contact .contact-form input:focus,
#contact .contact-form textarea:focus,
#contact .contact-form select:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(13, 127, 165, 0.2);
}

#contact .contact-form button {
    background-color: var(--color-principal);
    color: white;
    padding: var(--espaciado-medio) calc(var(--espaciado-medio) * 2);
    border: none;
    border-radius: var(--radio-borde);
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
#contact .contact-form button:hover {
    background-color: #0d2a4d; /* Un tono más oscuro */
    transform: translateY(-2px);
}

/* --- Estilos para los Filtros en index.html (#filters-container) --- */
/* Ajusta el layout general del contenedor de filtros */
#filters-container {
    background-color: var(--color-fondo);
    padding: var(--espaciado-medio);
    border-radius: var(--radio-borde);
    margin-bottom: var(--espaciado-grande);
    border: 1px dashed var(--color-borde); /* Borde sutil para definir el área */
    /* Añadir clearfix si es necesario para contener elementos flotantes */
    /* overflow: hidden; */
}
#filters-container h3 {
    margin-top: 0;
    margin-bottom: var(--espaciado-medio);
    color: var(--color-principal);
}
#filters-container label {
    display: block;
    margin-bottom: calc(var(--espaciado-pequeno) / 2);
    font-weight: 500;
    color: var(--color-texto-secundario);
}
/* Estilo base para los grupos de formulario dentro de los filtros */
#filters-container .form-group {
    margin-bottom: var(--espaciado-medio);
}
#filters-container .form-group label {
    display: block;
    margin-bottom: calc(var(--espaciado-pequeno) / 2);
    font-weight: 500;
    color: var(--color-texto-secundario);
}
#filters-container .form-group input,
#filters-container .form-group select {
    width: 100%;
    padding: calc(var(--espaciado-pequeno) + 2px); /* Ajuste fino */
    border: var(--ancho-borde) solid var(--color-borde);
    border-radius: 4px;
    font-family: inherit;
}
/* --- NUEVO: Estilo para .form-row para alinear elementos en línea --- */
#filters-container .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaciado-medio); /* Espacio entre elementos en la fila */
    margin-bottom: var(--espaciado-medio); /* Espacio debajo de la fila */
}
#filters-container .form-row .form-group {
    flex: 1; /* Hace que los elementos dentro de .form-row crezcan para llenar el espacio disponible */
    min-width: 200px; /* Ancho mínimo para evitar que se vuelvan demasiado pequeños */
    margin-bottom: 0; /* Eliminar el margen inferior del grupo si está dentro de una fila */
}
#filters-container .form-row .form-group input,
#filters-container .form-row .form-group select {
    width: 100%; /* Asegurar que los inputs/selects llenen su contenedor .form-group */
}
/* --- Fin NUEVO: Estilo para .form-row --- */

#filters-container button {
    background-color: var(--color-acento);
    color: white;
    padding: var(--espaciado-pequeno) var(--espaciado-medio);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    margin-right: var(--espaciado-pequeno);
    margin-top: var(--espaciado-pequeno);
    transition: background-color 0.3s ease;
}
#filters-container button:last-child {
    background-color: #6c757d; /* Color para "Limpiar" */
}
#filters-container button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
#filters-container button:last-child:hover {
    background-color: #5a6268;
}

/* -----------------------------
   15. Ajustes al Grid de Propiedades
------------------------------ */
/* Asegurar que .property-grid tenga un ancho máximo razonable */
.property-grid {
    max-width: 1600px; /* O el ancho máximo deseado */
    margin-left: auto;
    margin-right: auto;
    /* Asegurar que el grid se comporte correctamente */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Ajustar minmax para 2 columnas */
    gap: var(--espaciado-grande);
}
/* Ajustar el ancho máximo de la sección #properties si es necesario */
#properties {
    /* max-width: 1600px; */ /* Descomentar si necesitas limitar el ancho de toda la sección */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* Asegurar padding lateral */
    padding-left: var(--espaciado-grande);
    padding-right: var(--espaciado-grande);
}

/* -----------------------------
   16. Estilos Específicos para el Grid de Propiedades
------------------------------ */

/* Asegurar que .property-grid tenga un ancho máximo razonable */
.property-grid {
    /* Mantener las reglas existentes */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--espaciado-grande);
}

/* Definir un ancho máximo para el contenedor de propiedades */
.property-grid-container {
    max-width: 1200px; /* Ancho máximo para el contenedor de las tarjetas */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--espaciado-grande); /* Añadir padding lateral para mejor espaciado */
    padding-right: var(--espaciado-grande);
}

/* Ajustar el ancho máximo de la sección #properties si es necesario */
#properties {
    /* Asegurar que la sección tenga un ancho máximo */
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--espaciado-grande);
    padding-right: var(--espaciado-grande);
}

/* -----------------------------
   17. Estilos Específicos para Imágenes en property_detail.html
------------------------------ */

/* --- Estilos para el contenedor de la imagen principal --- */
.main-image-container {
    width: 100%;
    max-width: 800px; /* Ancho máximo para pantallas grandes */
    height: 500px; /* Altura fija */
    overflow: hidden;
    border-radius: var(--radio-borde);
    box-shadow: 0 4px 8px var(--color-sombra);
    margin-bottom: 1rem;
}

.main-image-container img,
.main-image-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Llena el contenedor, recorta si es necesario */
    object-position: center; /* Centra la imagen */
}

/* --- Estilos para el contenedor de las miniaturas --- */
.thumbnails-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 800px;
}

.thumbnail {
    width: 100px; /* Ancho fijo */
    height: 75px; /* Altura fija */
    object-fit: cover; /* Llena el contenedor, recorta si es necesario */
    object-position: center; /* Centra la imagen */
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.thumbnail:hover, .thumbnail.active {
    border-color: #007BFF;
}