/* ===================================================================
   ÍNDICE DE ESTILOS (style.css)

   1. Variables Globales (:root)
   2. Estilos Globales (body, h1, container, etc.)
   3. Componentes Reutilizables (Botones, Tarjetas, Formularios)
   4. Estructura Principal (Navbar, Footer)
   5. Secciones Específicas (Hero, Search, Services)
   6. Estilos de Páginas Específicas (Nosotros, Contacto, Detalle)
   7. Estilos Skeleton Loader (Carga)
   8. Media Queries (Responsividad General)
   9. Efectos de Animación (Scroll Reveal)
   10, 12 y 13. Estilos Completos del Chatbot (MH Asistente)
   11. Nuevos Componentes Admin (Checkboxes)
   14. NUEVO: Estilos Modernos de Búsqueda (Propiedades)
   15. NUEVO: Estilos Mejorados Detalle Propiedad (Features & Créditos)
   =================================================================== */

/* Importar Fuentes Premium */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;600&display=swap');
/* Mantener Poppins para Chatbot si es necesario o unificar */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* =======================
   1. Variables Globales
   ======================== */
:root {
    --color-primario: #4A8B9D;
    --color-secundario: #2A2A2A;
    --color-acento: #A9C4CC;
    --color-fondo: #FFFFFF;
    --color-fondo-claro: #F4F7F6;
    --color-texto: #333333;
    --color-texto-secundario: #666;
    
    /* Tipografía */
    --font-headings: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    
    /* Variable para el tamaño del logo */
    --tamano-logo: 100px; 
}

/* =======================
   2. Estilos Globales
   ======================== */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-texto);
    background-color: var(--color-fondo);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-secundario);
    margin-bottom: 1rem;
    font-weight: 700;
}

h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 2rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: var(--color-primario);
}

/* =======================
   3. Componentes Reutilizables
   ======================== */

/* --- Botones --- */
.btn {
    font-family: var(--font-headings);
    padding: 0.75rem 1.5rem; 
    border: none; 
    border-radius: 8px; 
    font-size: 1rem; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    text-align: center; 
    display: inline-block;
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--color-primario); 
    color: #FFFFFF;
    box-shadow: 0 4px 6px rgba(74, 139, 157, 0.2);
}

.btn-primary:hover {
    background-color: #3a7c8c;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(74, 139, 157, 0.3);
}

.btn-secondary {
    background-color: transparent; 
    color: var(--color-primario); 
    border: 2px solid var(--color-primario);
}

.btn-secondary:hover {
    background-color: var(--color-primario); 
    color: #FFFFFF;
}

/* --- Tarjeta de Propiedad (MEJORADA) --- */
.property-card-link {
    text-decoration: none; 
    color: inherit; 
    display: block;
}

.property-card {
    background: var(--color-fondo); 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    height: 100%; 
    display: flex; 
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.03);
}

.property-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

.card-image {
    position: relative; 
    height: 220px; 
    overflow: hidden;
}

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

.property-card:hover .card-image img {
    transform: scale(1.1);
}

.card-price {
    font-family: var(--font-headings);
    position: absolute; 
    top: auto; 
    bottom: 1rem; 
    right: 1rem; 
    background: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(4px);
    color: #FFFFFF; 
    padding: 0.3rem 0.8rem; 
    border-radius: 6px; 
    font-weight: 600; 
    font-size: 0.9rem;
}

.card-content {
    padding: 1.5rem; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}

.card-content h3 {
    font-size: 1.15rem; 
    margin-bottom: 0.5rem; 
    line-height: 1.3;
}

.card-type {
    display: block; 
    color: var(--color-texto-secundario); 
    font-size: 0.85rem; 
    margin-bottom: 1rem; 
    text-transform: capitalize;
}

.card-features {
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.8rem 1rem; 
    color: var(--color-secundario); 
    font-weight: 500; 
    border-top: 1px solid #eee; 
    padding-top: 1rem; 
    margin-top: auto; 
    font-size: 0.85rem;
}

.card-features span {
    display: flex; 
    align-items: center; 
    gap: 0.4rem;
}

.card-features i {
    color: var(--color-primario); 
    font-size: 0.9rem;
}

/* --- Estilos de Formulario Genéricos --- */
.form-group {
    display: flex; 
    flex-direction: column; 
    margin-bottom: 1rem;
}

.form-group label,
.contact-form label,
.contact-form-stacked label {
    display: block; 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
    color: var(--color-secundario); 
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.contact-form input,
.contact-form textarea,
.contact-form-stacked input,
.contact-form-stacked textarea {
    width: 100%; 
    padding: 0.75rem; 
    border: 1px solid #ccc; 
    border-radius: 6px; 
    font-size: 1rem; 
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form-stacked input:focus,
.contact-form-stacked textarea:focus {
    border-color: var(--color-primario); 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(74, 139, 157, 0.15);
}

.contact-form textarea,
.contact-form-stacked textarea {
    resize: vertical;
}

/* =======================
   4. Estructura Principal
   ======================== */

/* --- Navegación (MEJORADA - GLASSMORPHISM) --- */
.navbar {
    background-color: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.8rem 0; 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    width: 100%;
}

.navbar .container {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

/* --- LOGO --- */
.navbar-logo img {
    height: var(--tamano-logo); 
    width: auto;
    mix-blend-mode: multiply; 
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

/* --- Botón Toggle (Hamburguesa) --- */
.navbar-toggle {
    display: none; /* Oculto en escritorio */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
}

.navbar-toggle span {
    width: 100%;
    height: 3px;
    background-color: var(--color-secundario);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Animación de la Hamburguesa a X */
.navbar-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.navbar-toggle.active span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


.navbar-menu ul {
    list-style: none; 
    display: flex; 
    align-items: center; 
    gap: 1.5rem;
}

.navbar-menu a {
    font-family: var(--font-headings);
    color: var(--color-secundario); 
    font-weight: 600; 
    padding-bottom: 5px; 
    border-bottom: 2px solid transparent; 
    transition: color 0.3s ease, border-color 0.3s ease;
    font-size: 0.95rem;
}

.navbar-menu a:hover,
.navbar-menu a.active {
    color: var(--color-primario); 
    border-bottom-color: var(--color-primario);
}

/* --- Pie de Página (Footer) --- */
.footer {
    background-color: var(--color-secundario); 
    color: #ccc; 
    padding-top: 4rem;
}

.footer-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 2rem; 
    padding-bottom: 3rem;
}

.footer-logo {
    height: 80px; 
    width: auto;
    margin-bottom: 1rem;
    background-color: transparent; 
    border-radius: 0;
    padding: 0;
    box-shadow: none; 
    object-fit: contain;
    filter: drop-shadow(0 0 1px #ffffff);
}

.footer-col h4 {
    font-family: var(--font-headings);
    color: #FFFFFF; 
    font-size: 1.1rem; 
    margin-bottom: 1rem; 
    position: relative; 
    padding-bottom: 0.5rem;
}

.footer-col h4::after {
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 40px; 
    height: 2px; 
    background-color: var(--color-primario);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.5rem;
}

.footer-col a {
    color: #ccc; 
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: #FFFFFF; 
    text-decoration: underline;
}

.social-links {
    display: flex; 
    gap: 1rem;
}

.social-links a {
    font-size: 1.2rem; 
    color: #ccc; 
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: var(--color-primario); 
    transform: scale(1.1);
}

.footer-bottom {
    text-align: center; 
    padding: 1.5rem 0; 
    border-top: 1px solid #444; 
    font-size: 0.9rem;
}

/* =======================
   5. Secciones Específicas
   ======================== */

/* --- HERO CON EFECTO KEN BURNS --- */
.hero {
    position: relative;
    height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    overflow: hidden; /* Importante para que la imagen no se salga al hacer zoom */
    background-color: var(--color-secundario); /* Fondo de carga */
}

/* Pseudo-elemento para la imagen y animación */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* La imagen se define aquí para permitir la animación sin afectar el texto */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* Animación Ken Burns: Zoom lento y sutil */
    animation: kenBurns 20s ease-in-out infinite alternate;
}

.hero-content {
    position: relative;
    z-index: 2; /* Texto por encima de la imagen */
    color: #FFFFFF;
    margin-bottom: 2rem;
}

.hero-content h1 {
    color: #FFFFFF; 
    font-size: clamp(2.5rem, 5vw, 3.5rem); 
    font-weight: 700; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    letter-spacing: -1px;
}

.hero-content p {
    font-size: clamp(1.1rem, 3vw, 1.3rem); 
    opacity: 0.95;
    font-weight: 400;
}

/* Keyframes para el efecto Ken Burns */
@keyframes kenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15); /* Zoom del 15% */
    }
}

.search-container {
    background: var(--color-fondo); 
    border-radius: 12px; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); 
    width: 90%; 
    max-width: 900px; 
    margin-top: 2rem; 
    overflow: hidden;
}

.search-tabs {
    display: flex; 
    border-bottom: 1px solid #eee;
}

.search-tabs .tab-btn {
    flex: 1; 
    padding: 1rem; 
    border: none; 
    background: transparent; 
    font-size: 1rem; 
    font-weight: 600; 
    cursor: pointer; 
    color: var(--color-texto-secundario); 
    border-bottom: 3px solid transparent; 
    transition: color 0.3s ease, border-color 0.3s ease;
}

.search-tabs .tab-btn.active,
.search-tabs .tab-btn:hover {
    color: var(--color-primario); 
    border-bottom-color: var(--color-primario);
}

.search-form {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    align-items: flex-end; 
    padding: 1.5rem; 
    gap: 1rem;
}

.search-form .form-group {
    flex: 1; 
    margin-bottom: 0;
}

.search-form label {
    font-size: 0.8rem; 
    margin-bottom: 0.5rem;
}

.search-form .price-range {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 0.5rem;
}

.search-form .btn-buscar {
    padding: 0.75rem 1.5rem; 
    height: 45px; 
    grid-column: span 1;
}

.featured-properties {
    padding: 4rem 0; 
    background-color: var(--color-fondo-claro);
}

.property-filters {
    display: flex; 
    justify-content: center; 
    gap: 1rem; 
    margin-bottom: 2rem;
}

.property-filters .filter-btn {
    padding: 0.5rem 1.5rem; 
    border: 1px solid var(--color-acento); 
    border-radius: 20px; 
    background: transparent; 
    color: var(--color-secundario); 
    font-weight: 500; 
    cursor: pointer; 
    transition: all 0.3s ease;
}

.property-filters .filter-btn.active,
.property-filters .filter-btn:hover {
    background-color: var(--color-primario); 
    color: #FFFFFF; 
    border-color: var(--color-primario);
}

.property-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2rem;
}

.services-cta {
    padding: 4rem 0; 
    text-align: center; 
    background-color: var(--color-fondo);
}

.services-cta > .container > p {
    font-size: 1.1rem; 
    color: var(--color-texto-secundario); 
    max-width: 600px; 
    margin: -1rem auto 2.5rem auto;
}

.services-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 2rem;
}

.service-box {
    padding: 2.5rem; 
    border: 1px solid #eee; 
    border-radius: 12px; 
    transition: all 0.3s ease; 
    background-color: var(--color-fondo);
    position: relative;
    top: 0;
}

.service-box:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    top: -8px;
    border-color: transparent;
}

.service-box i {
    font-size: 2.5rem; 
    color: var(--color-primario); 
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.service-box:hover i {
    transform: scale(1.1);
}

.service-box h3 {
    font-size: 1.5rem;
}

.service-box p {
    font-size: 1rem; 
    margin-bottom: 1.5rem; 
    color: var(--color-texto-secundario);
}

.section-subtitle {
    text-align: center; 
    font-size: 1.1rem; 
    color: var(--color-texto-secundario); 
    margin-top: -1.5rem; 
    margin-bottom: 2.5rem;
}

.text-center-cta {
    text-align: center; 
    margin-top: 3rem;
}

.about-summary {
    padding: 4rem 0; 
    background-color: var(--color-fondo-claro);
}

/* =======================
   6. Estilos de Páginas Específicas
   ======================== */

.page-header {
    /* Mantiene parallax para páginas internas */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1920&auto=format&fit=crop'); 
    background-size: cover; 
    background-position: center; 
    color: #FFFFFF; 
    padding: 5rem 1rem; 
    text-align: center;
    background-attachment: fixed;
}

.page-header h1 {
    color: #FFFFFF; 
    font-size: clamp(2.5rem, 6vw, 3.2rem); 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.page-header p {
    font-size: clamp(1rem, 3vw, 1.2rem); 
    color: rgba(255, 255, 255, 0.85); 
    max-width: 600px; 
    margin: 0 auto;
}

.pagina-nosotros .page-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1920&auto=format&fit=crop');
}
.pagina-propiedades .page-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=1920&auto=format&fit=crop');
}
.pagina-contacto .page-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1920&auto=format&fit=crop');
}

/* Nosotros */
.about-intro { 
    padding: 4rem 0; 
}

.about-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 3rem; 
    align-items: center; 
}

.about-image img { 
    border-radius: 12px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
}

.about-text h2 { 
    font-size: 2.2rem; 
    margin-bottom: 1.5rem; 
}

.about-text p { 
    font-size: 1.1rem; 
    color: var(--color-texto-secundario); 
    margin-bottom: 1rem; 
    line-height: 1.7; 
}

.our-values { 
    padding: 4rem 0; 
    background-color: var(--color-fondo-claro); 
}

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

.value-item { 
    text-align: center; 
    padding: 1.5rem; 
}

.value-item i { 
    font-size: 2.5rem; 
    color: var(--color-primario); 
    margin-bottom: 1rem; 
}

.value-item h3 { 
    font-size: 1.4rem; 
    margin-bottom: 0.5rem; 
}

.value-item p { 
    color: var(--color-texto-secundario); 
    font-size: 0.95rem; 
}

.our-team { 
    padding: 4rem 0; 
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
    justify-content: center;
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-member img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    margin: 0 auto 1.2rem auto;
    border: 4px solid var(--color-primario);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.team-member h3 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
    color: var(--color-secundario);
    font-weight: 700;
}

.team-member p {
    color: var(--color-primario);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Propiedades (Buscador) */
.search-page-section { 
    padding: 3rem 0; 
    background-color: var(--color-fondo-claro); 
}

.full-page-search .search-form { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 1rem; 
    align-items: flex-end; 
}

.full-page-search .btn-buscar { 
    padding: 0.75rem; 
    height: 45px; 
}

.pagination-controls { 
    text-align: center; 
    margin-top: 2rem; 
    display: none; 
}

.pagination-controls button { 
    margin: 0 5px; 
}

.pagination-controls button:disabled { 
    background-color: #eee; 
    border-color: #ddd; 
    color: #999; 
    cursor: not-allowed; 
}

.pagination-controls span { 
    margin: 0 1rem; 
    color: var(--color-texto-secundario); 
    font-weight: 500; 
}

/* Contacto */
.contact-page { 
    padding: 4rem 0; 
}

.contact-grid { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 3rem; 
}

.contact-info h3 { 
    font-size: 1.8rem; 
    margin-bottom: 1.5rem; 
}

.info-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 1.5rem; 
    margin-bottom: 1.5rem; 
}

.info-item i { 
    font-size: 1.5rem; 
    color: var(--color-primario); 
    margin-top: 5px; 
    width: 25px; 
    text-align: center; 
}

.info-item strong { 
    display: block; 
    font-size: 1.1rem; 
    color: var(--color-secundario); 
}

.info-item p { 
    color: var(--color-texto-secundario); 
    margin: 0; 
    font-size: 1rem; 
}

.contact-form-container h3 { 
    font-size: 1.8rem; 
    margin-bottom: 1.5rem; 
}

.contact-form .form-group { 
    margin-bottom: 1rem; 
}

.contact-form button { 
    width: 100%; 
    font-size: 1.1rem; 
}

/* --- SECCIÓN MAPA MEJORADA --- */
.map-section { 
    padding-bottom: 4rem; 
}

.map-section h2 { 
    text-align: center; 
    font-size: 2.2rem; 
    margin-bottom: 2rem; 
}

/* Nuevo contenedor con estilos personalizados */
.map-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 8px solid #FFFFFF;
    transition: all 0.4s ease;
}

.map-wrapper iframe {
    width: 100%;
    height: 450px;
    border: 0;
    /* Efecto "Mood" Inicial: Escala de grises y algo de contraste */
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.5s ease;
    display: block; /* Elimina espacio blanco inferior inline */
}

/* Interacción: Al pasar el mouse, el mapa cobra color */
.map-wrapper:hover iframe {
    filter: grayscale(0%) contrast(1);
}

.map-wrapper:hover {
    box-shadow: 0 20px 40px rgba(74, 139, 157, 0.2); /* Sombra con tinte del color primario */
    transform: translateY(-5px);
}

/* ===================================================================
   6. DETALLE DE PROPIEDAD (REDISEÑO MODERNO)
   =================================================================== */

.property-detail-page {
    padding: 3rem 0;
    background-color: #fafafa;
    /* AJUSTE: Permitir que el contenedor sea más ancho en esta página */
}
.property-detail-page .container {
    max-width: 1400px;
}

/* --- HEADER DEL DETALLE --- */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.header-title {
    max-width: 70%;
}

.header-title h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    color: var(--color-secundario);
}

.badge-operation {
    display: inline-block;
    background-color: var(--color-primario);
    color: #fff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(74, 139, 157, 0.2);
}

.location-subtitle {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-subtitle i {
    color: var(--color-primario);
}

.detail-price-box {
    text-align: right;
}

.detail-price {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--color-primario);
    line-height: 1;
}

.price-sublabel {
    font-size: 0.9rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- LAYOUT GRID --- */
.detail-layout {
    display: grid;
    /* AJUSTE: Más espacio al contenido principal (2/3) y sidebar compacto (1/3) */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

/* --- GALERÍA ESTILO HERO --- */
.gallery-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 2.5rem;
}

.gallery-main-image {
    position: relative;
    height: 500px; /* Altura fija para el hero */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-color: #eee;
}

.gallery-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-main-image:hover img {
    transform: scale(1.1);
}

.gallery-thumbnails {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: #fff;
    overflow-x: auto; /* Scroll horizontal si hay muchas */
    scrollbar-width: thin;
}

.gallery-item {
    flex: 0 0 120px; /* Ancho fijo */
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.gallery-item:hover, .gallery-item.active {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- CARACTERÍSTICAS (GRID MEJORADO) --- */
.features-section {
    margin-bottom: 2.5rem;
}

.modern-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.feature-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--color-acento);
}

.feature-icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(74, 139, 157, 0.1), rgba(74, 139, 157, 0.2));
    color: var(--color-primario);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1.5rem;
}

.feature-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-secundario);
    line-height: 1.2;
}

.feature-label {
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}

/* --- DESCRIPCIÓN Y DETALLES --- */
.description-section {
    background: #fff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.description-section h3 {
    font-size: 1.5rem;
    border-left: 4px solid var(--color-primario);
    padding-left: 15px;
    margin-bottom: 1.5rem;
}

.description-content {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.additional-details-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.additional-details-table tr td {
    padding: 15px;
    background: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
}

.additional-details-table tr td:first-child {
    font-weight: 600;
    color: var(--color-secundario);
    width: 40%;
    border-radius: 8px 0 0 8px;
}

.additional-details-table tr td:last-child {
    color: var(--color-texto-secundario);
    border-radius: 0 8px 8px 0;
}

/* --- SIDEBAR CONTACTO (FLOTANTE - MEJORADO) --- */
.detail-sidebar {
    position: relative;
    height: 100%;
}

.detail-contact-box {
    background: #fff;
    padding: 1.5rem; /* Reduced padding to extend content width */
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); /* Sombra más fuerte */
    position: sticky;
    top: 100px;
    border: 1px solid rgba(0,0,0,0.02);
}

.contact-header {
    text-align: center;
    margin-bottom: 2rem;
}

.contact-header h4 {
    font-size: 1.8rem; /* Aumentado */
    margin-bottom: 0.5rem;
    color: var(--color-secundario);
}

.contact-header p {
    color: var(--color-texto-secundario);
    font-size: 1rem;
}

/* ESTILOS DE INPUT AUMENTADOS */
.contact-form-stacked .form-group input,
.contact-form-stacked .form-group textarea {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 1rem; /* Más relleno */
    font-size: 1.05rem; /* Texto más grande */
    border-radius: 8px;
}

.contact-form-stacked .form-group input:focus,
.contact-form-stacked .form-group textarea:focus {
    background-color: #fff;
    border-color: var(--color-primario);
}

.btn-contact-submit {
    width: 100%;
    padding: 1rem;
    font-size: 1.15rem; /* Botón más grande */
    margin-top: 0.5rem;
    background: var(--color-secundario);
    color: #fff;
    font-weight: 700;
}

.btn-contact-submit:hover {
    background: #000;
    transform: translateY(-2px);
}

.whatsapp-contact-box {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    text-align: center;
}

.btn-whatsapp-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25D366;
    color: white;
    width: 100%;
    padding: 1.1rem; /* Más grande */
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem; /* Texto más grande */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
}

.btn-whatsapp-full:hover {
    background-color: #1ebc57;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3);
}


/* =======================
   7. Estilos Skeleton Loader (Carga)
   ======================== */
.skeleton-card { 
    background: var(--color-fondo); 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    height: 100%; 
    min-height: 350px; 
}

@keyframes pulse { 
    0% { background-color: #f0f0f0; } 
    50% { background-color: #e0e0e0; } 
    100% { background-color: #f0f0f0; } 
}

.skeleton-image { 
    height: 220px; 
    width: 100%; 
    animation: pulse 1.5s infinite ease-in-out; 
}

.skeleton-content { 
    padding: 1.5rem; 
}

.skeleton-title { 
    height: 24px; 
    width: 80%; 
    margin-bottom: 0.75rem; 
    animation: pulse 1.5s infinite ease-in-out; 
    border-radius: 4px; 
}

.skeleton-text { 
    height: 16px; 
    width: 40%; 
    margin-bottom: 1rem; 
    animation: pulse 1.5s infinite ease-in-out; 
    border-radius: 4px; 
}

.skeleton-features { 
    height: 30px; 
    width: 100%; 
    border-top: 1px solid #eee; 
    padding-top: 1rem; 
    margin-top: 1rem; 
    animation: pulse 1.5s infinite ease-in-out; 
    border-radius: 4px; 
}

/* =======================
   8. Media Queries (Responsividad General)
   ======================== */
@media (max-width: 992px) { 
    .detail-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } 
    .detail-contact-box { position: static; margin-top: 2rem; } 
    .gallery-main-image { height: 400px; }
    .modern-features-grid { grid-template-columns: 1fr 1fr; }
}

/* AJUSTES PRINCIPALES PARA MÓVIL (Max 768px) */
@media (max-width: 768px) {
    /* Global Adjustments */
    body { font-size: 15px; } 
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.6rem !important; }
    .container { width: 90%; padding: 0; } 
    
    /* Navbar */
    .navbar { padding: 0.5rem 0; }
    .navbar-logo img { height: 50px; }
    
    /* Hero */
    .hero { height: 50vh; min-height: 300px; }
    
    /* Grid de columnas general */
    .about-grid, .contact-grid { grid-template-columns: 1fr; } 
    .about-image { order: -1; text-align: center; margin-bottom: 2rem; } 
    .about-image img { max-width: 90%; } 
    
    /* Buscadores */
    .search-form, .full-page-search .search-form { grid-template-columns: 1fr; } 
    .search-form .price-range { grid-template-columns: 1fr 1fr; } 
    .search-form .btn-buscar { width: 100%; padding: 0.75rem; } 
    
    /* Property Detail Specifics */
    .property-detail-page { padding-top: 1.5rem; }
    
    .detail-header {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .header-title { max-width: 100%; }
    
    .header-title h1 {
        font-size: 1.6rem;
        line-height: 1.2;
        margin-bottom: 5px;
    }
    
    .location-subtitle {
        font-size: 0.95rem;
        margin-top: 5px;
    }
    
    .detail-price-box {
        width: 100%;
        text-align: left;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border: none;
    }
    
    .detail-price {
        font-size: 1.8rem;
        color: var(--color-primario);
    }
    
    /* Gallery */
    .gallery-section {
        border-radius: 12px;
        margin-bottom: 1.5rem;
    }
    .gallery-main-image {
        height: 280px; /* Better ratio for mobile */
    }
    .gallery-thumbnails {
        padding: 10px;
        gap: 8px;
    }
    .gallery-item {
        flex: 0 0 80px;
        height: 60px;
    }
    
    /* Features Grid (Compacto) */
    .modern-features-grid {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr); 
    }
    .feature-card {
        padding: 1rem 0.5rem; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .feature-icon-wrapper {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 5px;
    }
    .feature-value {
        font-size: 1.1rem;
    }
    .feature-label {
        font-size: 0.8rem;
    }
    
    /* Description */
    .description-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .description-content {
        font-size: 1rem;
        line-height: 1.5;
    }
    .additional-details-table tr td { padding: 10px; font-size: 0.9rem; }
    
    /* Contact Box Sidebar */
    .detail-contact-box {
        padding: 1.5rem;
        margin-top: 1rem;
        background: #fdfdfd;
        border: 1px solid #eee;
        /* Remover sombra flotante excesiva en móvil */
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    .btn-whatsapp-full {
        padding: 0.9rem;
        font-size: 1rem;
    }

    /* NAV BAR RESPONSIVE */
    .navbar .container { 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center;
        flex-wrap: wrap; 
    } 

    .navbar-toggle {
        display: flex;
    }

    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        overflow: hidden;
        max-height: 0; 
        transition: max-height 0.4s ease-in-out, box-shadow 0.3s ease;
        box-shadow: none;
    }

    .navbar-menu.active {
        max-height: 400px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .navbar-menu ul { 
        flex-direction: column; 
        width: 100%;
        padding: 1.5rem 0;
        gap: 0;
    } 
    
    .navbar-menu ul li {
        width: 100%;
        text-align: center;
    }

    .navbar-menu a {
        display: block;
        padding: 1rem;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }
    
    .navbar-menu a:hover {
        background-color: rgba(74, 139, 157, 0.05);
    }

    /* WhatsApp & Chatbot Position */
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
        font-size: 28px;
    }

    .chatbot-toggler {
        width: 55px;
        height: 55px;
        right: 20px;
        bottom: 90px;
    }

    .chatbot {
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        height: 100%;
        border-radius: 0;
        transform: scale(1) translateY(100%);
    }
    
    body.show-chatbot .chatbot {
        transform: scale(1) translateY(0);
    }
    
    .chatbot header span.close-btn {
        display: block;
    }

    .chatbox {
        height: calc(100% - 70px);
        padding-bottom: 90px;
    }
    
    .chatbot .chat-input {
        padding: 5px 15px;
    }
}

/* =======================
   9. Efectos de Animación (Scroll Reveal)
   ======================== */
.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s ease-out; 
    pointer-events: none; /* Evita clicks si no se ha revelado */
}

.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: auto; /* Restaura clicks al aparecer */
}

/* =======================
   10, 12 y 13. ESTILOS COMPLETOS DEL CHATBOT (MH ASISTENTE)
   ======================== */

/* Reset básico para el componente del chatbot */
.chatbot, .chatbot-toggler, .chat-property-card, .chatbox, .chat-input {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 1. BOTÓN WHATSAPP (Base / Escritorio) --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px; /* Escritorio: Derecha */
    background-color: #25d366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* --- 2. BOTÓN CHATBOT (Base / Escritorio) --- */
.chatbot-toggler {
    position: fixed;
    bottom: 40px;
    right: 110px; /* Escritorio: A la izquierda de WhatsApp */
    outline: none;
    border: none;
    height: 60px;
    width: 60px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primario);
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.chatbot-toggler span {
    color: #fff;
    position: absolute;
    font-size: 1.4rem;
}

/* Efecto de cambio de icono (Mensaje / X) */
.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child {
    opacity: 0;
    transform: rotate(90deg);
}

body.show-chatbot .chatbot-toggler span:last-child {
    opacity: 1;
    transform: rotate(0);
}

/* --- 3. VENTANA DEL CHAT (Base / Escritorio) --- */
.chatbot {
    position: fixed;
    right: 40px;
    bottom: 110px; /* Encima de los botones */
    
    /* CAMBIO: Ancho exacto de 1/3 de pantalla y más flexible */
    width: 33.33vw; 
    min-width: 350px;
    max-width: 1200px; /* Permitimos que crezca en pantallas grandes */
    
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8) translateY(20px);
    transform-origin: bottom right;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    z-index: 999;
}

body.show-chatbot .chatbot {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* Header del Chat */
.chatbot header {
    background: var(--color-primario);
    padding: 15px 0;
    text-align: center;
    position: relative;
    color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.chatbot header h2 {
    color: #fff;
    font-size: 1.2rem;
    margin: 0;
    font-weight: 500;
}

.chatbot header .close-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    display: none; /* Oculto en escritorio */
    cursor: pointer;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1.3rem;
}

/* Área de Mensajes (Chatbox) */
.chatbox {
    overflow-y: auto;
    height: 400px;
    padding: 20px 20px 70px; /* Padding inferior grande para el input */
    background: #fbfbfb;
}

/* Estilos de Barras de Scroll */
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
    width: 6px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 25px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 25px;
}

/* Mensajes Individuales */
.chatbox .chat {
    display: flex;
    list-style: none;
    margin-bottom: 15px;
}

/* Mensaje Saliente (Usuario) */
.chatbox .outgoing {
    justify-content: flex-end;
    margin: 20px 0;
}
.chatbox .outgoing p {
    background: var(--color-primario);
    color: #fff;
    border-radius: 10px 10px 0 10px;
    padding: 10px 15px;
    max-width: 80%;
    white-space: pre-wrap;
    font-size: 0.95rem;
}

/* Mensaje Entrante (Bot) */
.chatbox .incoming span {
    width: 32px;
    height: 32px;
    color: #fff;
    background: var(--color-primario);
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
    align-self: flex-end;
    margin-bottom: 7px;
}
.chatbox .incoming p {
    background: #f2f2f2;
    color: #333;
    border-radius: 10px 10px 10px 0;
    padding: 10px 15px;
    max-width: 80%;
    font-size: 0.95rem;
}

/* --- ESTILOS MEJORADOS: OPCIONES Y REDES --- */

/* Grilla de Opciones (Botones) */
.chat-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 8px;
    margin-top: 10px;
}

/* Botón de Opción Estándar */
.chat-option-btn {
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--color-primario);
    color: var(--color-primario);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: 0.2s;
    text-align: center;
}
.chat-option-btn:hover {
    background: var(--color-primario);
    color: #fff;
}

/* Enlaces (Redes Sociales y Contacto) */
.chat-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.chat-link-btn {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Colores Específicos */
.whatsapp-btn { background: #dcf8c6; color: #075e54; border-color: #25d366; }
.whatsapp-btn:hover { background: #c5ebaa; }

.fb-btn { background: #e7f3ff; color: #1877f2; border-color: #1877f2; }
.fb-btn:hover { background: #d4e9ff; }

.ig-btn { background: #ffeeec; color: #c13584; border-color: #c13584; }
.ig-btn:hover { background: #ffdcd9; }

/* --- ESTILOS MEJORADOS: TARJETAS DE PROPIEDADES EN CHAT --- */
.chat-property-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 260px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.chat-property-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.chat-property-info {
    padding: 10px;
}

.chat-property-info h4 {
    font-size: 0.9rem;
    margin: 0 0 5px 0;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.chat-property-info .price-tag {
    color: var(--color-secundario);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 8px;
    display: block;
}

.chat-property-btn {
    display: block;
    width: 100%;
    padding: 6px 0;
    background: var(--color-secundario);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: 4px;
    transition: background 0.3s;
}

.chat-property-btn:hover {
    background: #444;
}

/* --- Área de Input (Escribir mensaje) --- */
.chatbot .chat-input {
    display: flex;
    gap: 5px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 5px 20px;
    border-top: 1px solid #ddd;
}

.chat-input textarea {
    height: 55px;
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    max-height: 180px;
    padding: 15px 0;
    font-size: 0.95rem;
}

.chat-input span {
    align-self: flex-end;
    color: var(--color-primario);
    cursor: pointer;
    height: 55px;
    display: flex;
    align-items: center;
    visibility: hidden;
    font-size: 1.35rem;
}

.chat-input textarea:valid ~ span {
    visibility: visible;
}

/* =======================
   11. Nuevos Componentes Admin (Checkboxes)
   ======================== */
.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    background: white;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: all 0.2s;
}

.checkbox-item:hover {
    border-color: var(--color-primario);
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

/* =======================
   14. NUEVO: Estilos Modernos de Búsqueda (Propiedades)
   ======================== */

.modern-search-bar {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 1.5rem 2rem;
    margin-top: -3rem; /* Flotando sobre la sección anterior si se desea, o normal */
    position: relative;
    z-index: 10;
}

.modern-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: end;
}

/* Grupos de filtros */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.location-group {
    grid-column: span 2; /* Ubicación ocupa 2 espacios */
}

/* Etiquetas */
.filter-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-secundario);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group label i {
    color: var(--color-primario);
}

/* Inputs y Selects Mejorados */
.filter-group input,
.filter-group select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fcfcfc;
    font-size: 0.95rem;
    color: #333;
    transition: all 0.3s ease;
    appearance: none; /* Quitar estilo por defecto del navegador */
}

.filter-group input:focus,
.filter-group select:focus {
    background-color: #fff;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(74, 139, 157, 0.1);
    outline: none;
}

/* Wrapper para selects con icono */
.select-wrapper {
    position: relative;
}
.arrow-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-texto-secundario);
    font-size: 0.8rem;
    pointer-events: none;
}

/* Inputs de Precio (Rango) */
.price-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
}
.price-inputs input {
    text-align: center;
    padding: 0.8rem 0.5rem;
}
.separator {
    color: #999;
    font-weight: bold;
}

/* Botones de Acción */
.filter-actions {
    grid-column: span 4; /* Ocupa todo el ancho abajo */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.btn-search-modern {
    padding: 0.8rem 2rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(74, 139, 157, 0.3);
}

.btn-search-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 139, 157, 0.4);
}

.btn-clear-modern {
    background: transparent;
    border: none;
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s;
}

.btn-clear-modern:hover {
    color: #d9534f;
}


/* RESPONSIVIDAD BÚSQUEDA MODERNA */

/* Tablet: 2 columnas */
@media (max-width: 992px) {
    .modern-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .location-group {
        grid-column: span 2;
    }
    .filter-actions {
        grid-column: span 2;
    }
}

/* Móvil: 1 columna */
@media (max-width: 600px) {
    .modern-filter-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .location-group,
    .filter-actions {
        grid-column: span 1;
    }
    .filter-actions {
        flex-direction: column;
        width: 100%;
    }
    .btn-search-modern {
        width: 100%;
        justify-content: center;
    }
    .modern-search-bar {
        padding: 1.5rem;
    }
}

/* =======================================================
   15. NUEVO: Estilos Mejorados Detalle Propiedad (Features & Créditos)
   ======================================================= */

.modern-features-section {
    margin: 2rem 0;
}

.modern-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primario);
    box-shadow: 0 8px 20px rgba(74, 139, 157, 0.15);
}

.feature-icon-wrapper {
    width: 50px;
    height: 50px;
    background-color: rgba(74, 139, 157, 0.1); /* Color primario con opacidad */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    color: var(--color-primario);
    font-size: 1.2rem;
}

.feature-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-secundario);
    line-height: 1.3;
}

.feature-label {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    font-weight: 500;
}

/* Sección Créditos */
.credits-container {
    margin-top: 2.5rem;
    padding: 2rem;
    background-color: #f8fcfd; /* Fondo muy suave azulado */
    border-radius: 12px;
    border: 1px solid #eef6f8;
}

.credits-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.credits-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--color-secundario);
}

.credits-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.credit-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    color: #333;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.credit-pill i {
    color: #27ae60; /* Verde check */
    font-size: 1rem;
}

.credit-pill:hover {
    border-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(39, 174, 96, 0.15);
}


/* =======================================================
   MEDIA QUERY: AJUSTES COMPLETOS PARA MÓVIL (Max 768px)
   ======================================================= */
@media (max-width: 768px) {
    /* Ajustes Globales de Texto */
    body { font-size: 15px; } 
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.6rem !important; }
    .container { width: 90%; padding: 0; } 
    
    /* Navbar más compacta */
    .navbar { padding: 0.5rem 0; }
    .navbar-logo img { height: 50px; }
    
    /* Hero */
    .hero { height: 50vh; min-height: 300px; }
    
    /* Grid de columnas general */
    .about-grid, .contact-grid { grid-template-columns: 1fr; } 
    .about-image { order: -1; text-align: center; margin-bottom: 2rem; } 
    .about-image img { max-width: 90%; } 
    
    /* Buscadores */
    .search-form, .full-page-search .form-group { grid-template-columns: 1fr; } 
    .search-form .price-range { grid-template-columns: 1fr 1fr; } 
    .search-form .btn-buscar { width: 100%; padding: 0.75rem; } 
    
    /* Property Detail Specifics */
    .property-detail-page { padding-top: 1.5rem; }
    
    .detail-header {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .header-title { max-width: 100%; }
    
    .header-title h1 {
        font-size: 1.6rem;
        line-height: 1.2;
        margin-bottom: 5px;
    }
    
    .location-subtitle {
        font-size: 0.95rem;
        margin-top: 5px;
    }
    
    .detail-price-box {
        width: 100%;
        text-align: left;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border: none;
    }
    
    .detail-price {
        font-size: 1.8rem;
        color: var(--color-primario);
    }
    
    /* Gallery */
    .gallery-section {
        border-radius: 12px;
        margin-bottom: 1.5rem;
    }
    .gallery-main-image {
        height: 280px; /* Mejor proporción para móvil */
    }
    .gallery-thumbnails {
        padding: 10px;
        gap: 8px;
    }
    .gallery-item {
        flex: 0 0 80px;
        height: 60px;
    }
    
    /* Features Grid (Compacto) */
    .modern-features-grid {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr); 
    }
    .feature-card {
        padding: 1rem 0.5rem; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .feature-icon-wrapper {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 5px;
    }
    .feature-value {
        font-size: 1.1rem;
    }
    .feature-label {
        font-size: 0.8rem;
    }
    
    /* Description */
    .description-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .description-content {
        font-size: 1rem;
        line-height: 1.5;
    }
    .additional-details-table tr td { padding: 10px; font-size: 0.9rem; }
    
    /* Contact Box Sidebar */
    .detail-contact-box {
        padding: 1.5rem;
        margin-top: 1rem;
        background: #fdfdfd;
        border: 1px solid #eee;
        /* Remover sombra flotante excesiva en móvil */
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    .btn-whatsapp-full {
        padding: 0.9rem;
        font-size: 1rem;
    }

    /* NAV BAR RESPONSIVE */
    .navbar .container { 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center;
        flex-wrap: wrap; 
    } 

    .navbar-toggle {
        display: flex;
    }

    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        overflow: hidden;
        max-height: 0; 
        transition: max-height 0.4s ease-in-out, box-shadow 0.3s ease;
        box-shadow: none;
    }

    .navbar-menu.active {
        max-height: 400px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .navbar-menu ul { 
        flex-direction: column; 
        width: 100%;
        padding: 1.5rem 0;
        gap: 0;
    } 
    
    .navbar-menu ul li {
        width: 100%;
        text-align: center;
    }

    .navbar-menu a {
        display: block;
        padding: 1rem;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }
    
    .navbar-menu a:hover {
        background-color: rgba(74, 139, 157, 0.05);
    }

    /* WhatsApp & Chatbot Position */
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
        font-size: 28px;
    }

    .chatbot-toggler {
        width: 55px;
        height: 55px;
        right: 20px;
        bottom: 90px;
    }

    .chatbot {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        transform: scale(1) translateY(100%);
    }
    
    body.show-chatbot .chatbot {
        transform: scale(1) translateY(0);
    }
    
    .chatbot header span.close-btn {
        display: block;
    }

    .chatbox {
        height: calc(100% - 70px);
        padding-bottom: 90px;
    }
    
    .chatbot .chat-input {
        padding: 5px 15px;
    }
}
/* =======================
   16. Estilos de Favoritos
   ======================== */

.favorite-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-secundario);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.favorite-btn:hover {
    background: white;
    transform: scale(1.1);
}

.favorite-btn.active {
    color: #e74c3c !important; /* Rojo corazón forzado */
    font-weight: 900; /* Asegura que se vea relleno si usas FontAwesome regular/solid */
}

/* Estilos Base Botón Compartir (Movidos desde JS) */
.share-btn {
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    border: 1px solid #eee; 
    background: white; 
    font-size: 1.2rem; 
    color: var(--color-secundario); 
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: scale(1.1);
}

/* Ajuste específico para botón favorito en detalle */
.detail-price-box .favorite-btn {
    position: static;
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.property-card {
    position: relative;
    /* ... otros estilos ... */
}

/* Estilos para Etiquetas de Estado (Vendida/Rentada) */
.property-status {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.status-vendida { background-color: #d32f2f; } /* Rojo */
.status-rentada { background-color: #f57c00; } /* Naranja */
.status-disponible { background-color: #27ae60; } /* Verde */

/* Ajuste para que el link no cubra el botón */
.property-card-link {
    /* ... */
    position: static;
}

.property-card > a {
    display: block;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* =======================
   17. Notificaciones (Toast)
   ======================== */
.toast-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-notification.success {
    background-color: #27ae60;
}

.toast-notification.error {
    background-color: #e74c3c;
}

/* =======================
   18. Animación Chatbot (Typing)
   ======================== */
.typing-animation {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
    align-items: center;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: #bbb;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* =======================
   19. MODO OSCURO (Dark Mode)
   ======================== */

/* Variables para Modo Oscuro */
body.dark-mode {
    --color-fondo: #121212;
    --color-fondo-claro: #1e1e1e;
    --color-texto: #e0e0e0;
    --color-texto-secundario: #b0b0b0;
    --color-secundario: #ffffff; /* Títulos pasan a blanco */
    --color-acento: #3a505c;
}

/* Ajustes Específicos por Componente en Dark Mode */
body.dark-mode .navbar {
    background-color: rgba(18, 18, 18, 0.95);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

body.dark-mode .navbar-logo img {
    mix-blend-mode: normal;
    filter: drop-shadow(0 0 1px #ffffff);
}

body.dark-mode .navbar-menu {
    background-color: rgba(18, 18, 18, 0.98);
}

body.dark-mode .footer {
    background-color: #050505; /* Footer más oscuro */
    border-top: 1px solid #333;
}

/* Tarjetas y Contenedores */
body.dark-mode .property-card,
body.dark-mode .service-box,
body.dark-mode .feature-card,
body.dark-mode .detail-contact-box,
body.dark-mode .gallery-section,
body.dark-mode .description-section,
body.dark-mode .modern-search-bar,
body.dark-mode .team-member,
body.dark-mode .credits-container {
    background-color: #1e1e1e;
    border-color: #333;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Inputs y Formularios */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #2d2d2d !important;
    color: #fff;
    border-color: #444;
}

/* Tablas */
body.dark-mode .additional-details-table tr td {
    background-color: #252525;
    border-bottom-color: #333;
    color: #ddd;
}
body.dark-mode .additional-details-table tr td:first-child {
    color: #fff;
}

/* Pills y Etiquetas */
body.dark-mode .credit-pill {
    background-color: #2d2d2d;
    color: #ddd;
    border-color: #444;
}

/* Chatbot en Dark Mode */
body.dark-mode .chatbot { background-color: #1e1e1e; }
body.dark-mode .chatbox { background-color: #121212; }
body.dark-mode .chatbox .incoming p { background-color: #2d2d2d; color: #e0e0e0; }
body.dark-mode .chat-input { background-color: #1e1e1e; border-top-color: #333; }
body.dark-mode .chat-option-btn { background-color: #2d2d2d; border-color: #444; color: #ccc; }
body.dark-mode .chat-option-btn:hover { background-color: var(--color-primario); color: #fff; }
body.dark-mode .chat-property-card { background-color: #2d2d2d; border-color: #444; }
body.dark-mode .chat-property-info h4 { color: #fff; }

/* Botón Toggle (Sol/Luna) */
.theme-btn {
    background: none;
    border: none;
    color: var(--color-secundario);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 5px 10px;
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
}

.theme-btn:hover {
    transform: rotate(15deg) scale(1.1);
    color: var(--color-primario);
}

body.dark-mode .theme-btn { color: #fff; }

/* Correcciones de Fondo en Detalle de Propiedad (Dark Mode) */
body.dark-mode .property-detail-page {
    background-color: var(--color-fondo);
}

body.dark-mode .detail-header {
    border-bottom-color: #333;
}

body.dark-mode .gallery-thumbnails {
    background-color: #1e1e1e;
}

body.dark-mode .gallery-main-image {
    background-color: #2d2d2d;
}

/* Corrección Botones Quemados en Dark Mode */
body.dark-mode .share-btn,
body.dark-mode .detail-price-box .favorite-btn {
    background-color: #2d2d2d;
    color: #fff;
    border-color: #444;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Corrección Fondo Propiedades (Buscador) */
body.dark-mode .search-page-section {
    background-color: var(--color-fondo-claro);
}

/* Corrección Botones en Cards (Propiedades) */
body.dark-mode .property-card .favorite-btn {
    background: rgba(30, 30, 30, 0.85);
    color: #fff;
}

body.dark-mode .property-card .favorite-btn:hover {
    background: #2d2d2d;
}

/* Corrección Skeleton Loader (Carga) en Dark Mode */
@keyframes pulse-dark { 
    0% { background-color: #2d2d2d; } 
    50% { background-color: #3d3d3d; } 
    100% { background-color: #2d2d2d; } 
}

body.dark-mode .skeleton-card {
    background-color: #1e1e1e;
}

body.dark-mode .skeleton-image, 
body.dark-mode .skeleton-title, 
body.dark-mode .skeleton-text, 
body.dark-mode .skeleton-features {
    animation-name: pulse-dark;
}

/* Corrección Paginación en Dark Mode */
body.dark-mode .pagination-controls button:disabled {
    background-color: #2d2d2d;
    border-color: #444;
    color: #666;
}

/* Corrección Botón Enviar Mensaje (Detalle) en Dark Mode */
body.dark-mode .btn-contact-submit {
    background-color: var(--color-primario);
    color: #fff;
}