:root {
    /* -- Paleta de Colores Base -- */
    --color-naranja: #E65A2E;
    --color-rojo: #9F1D11;
    --color-negro: #000000;
    --color-blanco: #FFFFFF;

    /* -- Variables Semánticas del Tema -- */
    --color-accento-principal: var(--color-rojo);
    --color-accento-hover: #80170E;
    
    /* -- Colores de UI -- */
    --color-texto-principal: #333333;
    --color-texto-secundario: #555555;
    --color-fondo: #f4f4f9;
    --color-borde: #dddddd;
    --color-fondo-input: #f8f9fa;
    --color-verde-exito: #28a745;
    
    /* -- Tipografía -- */
    --font-principal: 'Plus Jakarta Sans', sans-serif;
}


/* --- 01. ESTILOS GENERALES Y RESET --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden;}
body {
    font-family: var(--font-principal);
    font-weight: 400;
    margin: 0;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
}
.container { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 20px; }


/* --- 02. TIPOGRAFÍA --- */
h1, h2, h3, h4, h5 { font-weight: 800; color: var(--color-negro); margin: 0 0 1rem 0; }
header h1 { font-size: 2.5em; margin-bottom: 20px; }
a { color: var(--color-accento-principal); text-decoration: none; transition: color 0.2s ease-in-out; }
a:hover { color: var(--color-accento-hover); }


/* --- 03. NAVBAR --- */
.navbar { background-color: var(--color-blanco);border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); top: 0; z-index: 1000; max-width: 1200px; margin: 0 auto; position: relative; width: auto; }
.nav-container { margin: auto; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 65px; width: auto; }
.nav-links ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 30px;align-items: center; gap: 30px; }
.nav-links a { color: var(--color-texto-principal); font-weight: 800; }
.nav-links a:hover { color: var(--color-accento-principal); }
.navbar-wrapper {padding: 20px; position: sticky; top: 0; z-index: 1000;}

/* --- 04. HERO BANNER Y PANEL DE BÚSQUEDA --- */
.hero-section { position: relative; height: 60vh; color: var(--color-blanco);  display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-section .swiper-slide { background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-section .swiper-slide::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to left, transparent ,var(--color-accento-principal) 100%); }
.hero-section .swiper-slide h1, p { position: relative; z-index: 2; padding: 0px 20px;}

.hero-section { position: relative; z-index: 2; padding: 20px; }
.hero-section h1 { font-size: 4em; color: var(--color-blanco); text-shadow: 0px 4px 8px rgba(0,0,0,0.7); margin-bottom: 0.5em; }
.hero-section p { font-size: 1.2em; font-weight: 500; text-shadow: 0px 2px 4px rgba(0,0,0,0.7); margin-bottom: 1em; }

.search-container { background: var(--color-blanco); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 30px; margin: -50px auto 40px auto; max-width: 1200px; position: relative; z-index: 10; }
.search-container-listado { background: var(--color-blanco); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 30px; margin: 50px auto 40px auto; max-width: 1200px; position: relative; z-index: 10; }
.hero-actions { margin-bottom: 25px; }
.hero-actions button { background-color: transparent; color: var(--color-texto-secundario); border: none; padding: 10px 20px; margin: 0 5px; border-radius: 8px; font-family: var(--font-principal); font-weight: 800; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s ease-in-out; }
.hero-actions button.active { background-color: var(--color-fondo-input); color: var(--color-accento-principal); border-bottom-color: var(--color-accento-principal); }


/* --- 05. FORMULARIOS Y FILTROS --- */
.filter-wrapper .toggle-filter-link, #back-to-simple-link { font-weight: 800; display: inline-block; }
#back-to-simple-link { margin-bottom: 25px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { font-weight: 800; margin-bottom: 8px; font-size: 0.9em; }
.input-group input, .input-group select { background-color: var(--color-fondo-input); border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; font-size: 1em; font-family: var(--font-principal); }
.filter-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239F1D11' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.search-button { background-color: var(--color-accento-principal); color: var(--color-blanco); border: none; border-radius: 8px; padding: 15px 30px; font-weight: 800; font-size: 1em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 0.2s; }
.search-button:hover { background-color: var(--color-accento-hover); }
.simple-filter-grid { display: grid; grid-template-columns: 1.5fr 2fr 2fr 1.5fr; gap: 20px; align-items: flex-end; }
.simple-actions-group { display: flex; align-items: center; gap: 15px; white-space: nowrap; }
.simple-actions-group .search-button { flex-grow: 1; }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.amenities-group, .actions-group { grid-column: 1 / -1; }
.actions-group { text-align: right; }
.clear-filter-link { color: #888; margin-right: 20px; }
.hidden { display: none; }
.price-inputs { display: grid; gap: 10px;grid-template-columns: 1fr 1fr; }


/* --- 06. SLIDER DE PRECIOS (NOUI-SLIDER) --- */
.noUi-target { background: var(--color-fondo-input); border-radius: 4px; border: 1px solid #e0e0e0; box-shadow: none; height: 10px; }
.noUi-connect { background: var(--color-accento-principal); }
.noUi-handle { border: 2px solid var(--color-blanco); border-radius: 50%; background: var(--color-accento-principal); box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; width: 20px !important; height: 20px !important; right: -10px !important; top: -6px !important; }
.noUi-handle:focus { outline: none; }
.noUi-handle::after, .noUi-handle::before { display: none; }
.slider-values { margin-top: 8px; font-size: 0.9em; font-weight: 800; color: var(--color-texto-secundario); text-align: center; }


/* --- 07. TARJETAS DE INMUEBLE (CARDS) --- */
.results-section, .carousel-section { padding-top: 40px; }
.carousel-section { padding: 52px 40px; margin-top: 40px; }
#results-title, .carousel-title { font-size: 2em; margin-bottom: 20px; padding-bottom: 10px; }
.carousel-section .carousel-title { text-align: center; margin-bottom: 30px; }
#results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.property-link { color: inherit; }
.property-card { background-color: var(--color-blanco); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.property-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.property-card img { width: 100%; height: 180px; object-fit: cover; background-color: #eee; }
.property-card-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.property-card h3, .location { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.property-card h3 { min-height: 2.5em; }
.location { font-size: 0.7em; padding: 0.5em 0.5em; }
.price { font-size: 1.5em; font-weight: 800; color: var(--color-accento-principal); margin-bottom: 10px; }
.specs { display: flex; justify-content: space-around; font-size: 0.9em; color: #666; margin-top: auto; padding-top: 10px; }


/* --- 08. CARRUSELES (SWIPER) --- */
.swiper { position: relative; padding: 10px 0; }
.swiper-slide { height: auto; }
.swiper-button-next, .swiper-button-prev { color: var(--color-accento-principal) !important; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; width: 44px !important; height: 44px !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); transition: background-color 0.2s, color 0.2s; }
.swiper-button-next:hover, .swiper-button-prev:hover { background-color: var(--color-accento-principal); color: var(--color-blanco) !important; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 18px !important; font-weight: 900; }
/* Estilos específicos para los botones del Hero Swiper */
.hero-section .swiper-button-next, .hero-section .swiper-button-prev {
    color: var(--color-blanco) !important;
}


/* --- 09. PAGINACIÓN --- */
#pagination { display: flex; justify-content: center; align-items: center; margin-top: 40px; }
#pagination button { margin: 0 10px; padding: 8px 16px; cursor: pointer; }


/* --- 10. PÁGINA DE DETALLE --- */
.detail-page-container { padding-top: 0px; }
.detail-layout { display: grid; grid-template-columns: 320px 1fr; gap: 40px; padding-top: 20px;}
.detail-sidebar .branding-box { text-align: center; margin-bottom: 30px; }
.detail-sidebar .branding-box img { max-width: 200px; margin-bottom: 20px; }
.status-banner { background-color: var(--color-accento-principal); color: var(--color-blanco); padding: 10px; font-weight: 800; border-radius: 4px; }
.gallery-preview h3 { font-size: 1.5em; margin-bottom: 15px; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.gallery-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; cursor: pointer; }
.btn-secondary { background: none; border: 2px solid var(--color-accento-principal); color: var(--color-accento-principal); padding: 10px 20px; width: 100%; font-weight: 800; border-radius: 4px; cursor: pointer; }
.detail-header .header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.location-tag { background-color: var(--color-fondo-input); padding: 8px 12px; border-radius: 20px; font-size: 0.9em; font-weight: 800; }
.price-box { background-color: var(--color-fondo-input); padding: 15px 20px; border-radius: 8px; text-align: right; }
.price-box .price-value { font-size: 2em; font-weight: 800; color: var(--color-accento-principal); display: block; }
.detail-header h1 { font-size: 2.5em; margin-bottom: 15px; }
.secondary-info { display: flex; gap: 30px; color: var(--color-texto-secundario); font-weight: 800; }
.specs-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 20px; border: 1px solid var(--color-borde); border-radius: 8px; margin: 30px 0; }
.tabs { border-bottom: 1px solid var(--color-borde); margin-bottom: 20px; }
.tab-button { background: none; border: none; padding: 15px 20px; font-size: 1.1em; font-weight: 800; cursor: pointer; color: var(--color-texto-secundario); border-bottom: 3px solid transparent; }
.tab-button.active { color: var(--color-accento-principal); border-bottom-color: var(--color-accento-principal); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.features-list-detail { list-style: none; padding: 0; columns: 2; gap: 10px; }
.features-list-detail li { margin-bottom: 10px; }
.cta-button { width: 100%; padding: 15px; font-size: 1.2em; font-weight: 800; color: var(--color-blanco); background-color: var(--color-accento-principal); border: none; border-radius: 4px; cursor: pointer; margin-top: 30px; }


/* --- 11. FOOTER --- */
.footer { background-color: var(--color-rojo); color: rgba(255, 255, 255, 0.8); padding: 60px 0 0 0; margin-top: 60px; }
.footer-container { max-width: 1400px; margin: auto; padding: 0 20px; }
.footer-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; padding-bottom: 40px; }
.footer-column .footer-logo { height: 125px; margin-bottom: 15px; filter: brightness(0) invert(1); }
.footer-column h4 { color: var(--color-blanco); border-bottom: 2px solid var(--color-naranja); display: inline-block; } /* Mantenemos el naranja aquí para un acento sutil */
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li { margin-bottom: 10px; }
.footer-column a { color: rgba(255, 255, 255, 0.8); }
.footer-column a:hover { color: var(--color-blanco); }
.social-icons { display: flex; gap: 15px;}
.social-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); color: var(--color-blanco); border-radius: 50%; }
.social-icons a:hover { background-color: var(--color-naranja); } /* También mantenemos el naranja aquí */
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); text-align: center; padding: 20px 0; }
.footer-bottom p { margin: 0; font-size: 0.9em; }

/* --- 12. ALLIES SECTION --- */
.allies-section { padding: 40px 0; }
.allies-container { max-width: 1400px; margin-top: 5vh; padding: 0 20px; display: flex; align-items: center; gap: 30px; }
.allies-title-wrapper { flex: 0 0 30%; text-align: right; padding-right: 30px; border-right: 3px solid var(--color-accento-principal); }
.allies-title-wrapper h3 { font-size: 2.2em;color: var(--color-texto-principal); line-height: 1.3; }
.allies-carousel-wrapper { flex: 1; min-width: 0;}

#allies-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; height: 100px;}
#allies-swiper .swiper-slide img { max-height: 80px; max-width: 100%; object-fit: contain; opacity: 0.8; transition: filter 0.3s, opacity 0.3s; }
#allies-swiper .swiper-slide img:hover { filter: grayscale(0%); opacity: 1; }

/* --- 12. RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-sidebar { order: 2; }
    .detail-main { order: 1; }
}

/* --- 13. AJUSTES ADICIONALES --- */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5em; }
    .hero-content p { font-size: 1.1em; }

    /* Ajustes para la sección de aliados en móvil */
    .allies-container {
        flex-direction: column; /* Apila los elementos */
        text-align: center;
    }

    .allies-title-wrapper {
        border-right: none;
        border-bottom: 3px solid var(--color-accento-principal);
        margin-bottom: 20px;
        padding-right: 0;
        padding-bottom: 20px;
        text-align: center;
    }

    .allies-carousel-wrapper {
         width: 100%; /* Ocupa todo el ancho en móvil */
    }
}

/* --- 14. ESTILOS ESPECÍFICOS PARA EL ORDENAMIENTO --- */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px; /* Espacio antes de las tarjetas */
    flex-wrap: wrap; /* Para que se adapte en móviles */
    gap: 15px;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 15px;
}

/* Ajuste del título para quitar el margen inferior que tenía por defecto */
.results-header h2 {
    margin-bottom: 0;
}

/* Contenedor del selector */
.sort-wrapper {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.sort-wrapper label {
    font-weight: 800;
    font-size: 0.9em;
    color: var(--color-texto-secundario);
}

/* Estilo del Select */
.sort-select {
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    background-color: var(--color-blanco);
    color: var(--color-texto-principal);
    font-family: var(--font-principal);
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.sort-select:focus {
    border-color: var(--color-accento-principal);
}

/* Responsivo: En celulares muy pequeños, apilar verticalmente */
@media (max-width: 576px) {
    .results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sort-wrapper {
        width: 100%;
        justify-content: space-between;
    }
}
/* --- 15. PÁGINA DE CONTACTO Y NOSOTROS --- */
.page-header {
    text-align: center;
    padding: 60px 0 40px;
}

.page-header h1 {
    font-size: 2.5em;
    color: var(--color-accento-principal);
}

.page-header p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--color-texto-secundario);
    font-size: 1.1em;
}

/* Tarjetas Misión / Visión */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.about-card {
    background: var(--color-blanco);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 5px solid var(--color-accento-principal);
    text-align: center;
    transition: transform 0.3s ease;
}

.about-card:hover {
    transform: translateY(-5px);
}

.about-card:nth-child(2) {
    border-top-color: var(--color-naranja); /* Color alterno para la visión */
}

.about-icon {
    font-size: 3em;
    color: var(--color-accento-principal);
    margin-bottom: 20px;
    display: inline-block;
}

.about-card:nth-child(2) .about-icon {
    color: var(--color-naranja);
}

.about-card h3 {
    margin-bottom: 15px;
    font-size: 1.5em;
}

.about-card p, .about-card ul {
    text-align: left;
    color: var(--color-texto-secundario);
    line-height: 1.6;
}

.about-card ul {
    padding-left: 20px;
}

/* Layout Sección Contacto */
.contact-section-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 60px;
    background: var(--color-blanco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.contact-info-panel {
    background-color: var(--color-texto-principal);
    color: var(--color-blanco);
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-info-item {
    margin-bottom: 30px;
}

.contact-info-item i {
    color: var(--color-naranja);
    font-size: 1.5em;
    margin-bottom: 10px;
    display: block;
}

.contact-info-panel h3 {
    color: var(--color-blanco);
    margin-bottom: 30px;
}

.contact-info-item h4 {
    color: var(--color-blanco);
    margin-bottom: 5px;
    font-size: 1.2em;
}

.contact-info-item p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95em;
    margin: 0;
}

.contact-form-panel {
    padding: 50px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.full-width {
    grid-column: span 2;
}

textarea {
    width: 100%;
    min-height: 150px;
    background-color: var(--color-fondo-input);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    font-family: var(--font-principal);
    resize: vertical;
}

/* Mapa */
.map-container {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Responsive para Contacto */
@media (max-width: 992px) {
    .contact-section-wrapper {
        grid-template-columns: 1fr;
    }
    .contact-info-panel {
        order: 2;
    }
    .contact-form-panel {
        order: 1;
    }
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .full-width {
        grid-column: span 1;
    }
}

.about-intro-text {
    max-width: 900px;
    margin: 0 auto 60px auto; /* Margen inferior para separar de las tarjetas */
    text-align: center;
    font-size: 1.15em;
    line-height: 1.8;
    color: var(--color-texto-secundario);
}

/* --- 16. ANIMACIONES Y EFECTOS ADICIONALES --- */
.about-hero {
    /* Ruta de la imagen y superposición oscura (gradiente) para leer el texto */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/home_carrousel3.jpg'); /* <--- CAMBIA ESTA RUTA POR TU IMAGEN */
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax (opcional) */
    color: var(--color-blanco);
    padding: 100px 0;
    margin-bottom: 60px;
    text-align: center;
    position: relative;
}

.about-hero h1 {
    font-size: 3.5em;
    color: var(--color-blanco);
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.about-hero p {
    font-size: 1.25em;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .about-hero {
        padding: 60px 20px;
    }
    .about-hero h1 {
        font-size: 2.5em;
    }
    .about-hero p {
        font-size: 1.1em;
    }
}

/* --- 17. BOTÓN FLOTANTE WHATSAPP --- */
.btn-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 80px;
    height: 80px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #FFFFFF;
    border-radius: 50%;
    text-align: center;
    font-size: 35px; /* Tamaño del icono */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999; /* Para asegurar que flote sobre todo */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-whatsapp:hover {
    background-color: #128c7e; /* Un verde un poco más oscuro al pasar el mouse */
    transform: scale(1.1) translateY(-5px); /* Efecto de crecimiento y elevación */
    color: #FFFFFF;
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Ajuste para móviles para que no tape contenido importante */
@media (max-width: 768px) {
    .btn-whatsapp {
        width: 50px;
        height: 50px;
        font-size: 28px;
        bottom: 20px;
        right: 20px;
    }
}

/* ========================================= */
/*   19. ESTILOS RESPONSIVE (MÓVIL)          */
/* ========================================= */

@media (max-width: 992px) {
    /* --- NAVBAR (Tablets) --- */
    .navbar-wrapper {
        position: relative; /* Quitamos sticky en pantallas medianas para evitar problemas */
    }
    
    .nav-container {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .nav-links ul {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* --- HERO BANNER --- */
    .hero-section {
        height: auto;
        min-height: 400px;
        padding: 80px 20px 40px 20px;
    }

    .hero-section h1 {
        font-size: 2em;
        line-height: 1.2;
    }

    /* --- CONTENEDOR DE BÚSQUEDA (El fix del desbordamiento) --- */
    .search-container, 
    .search-container-listado {
        width: 92%;           /* Un poco menos del 100% para dar margen */
        max-width: 100%;
        margin-left: auto;    /* Centrado automático */
        margin-right: auto;   /* Centrado automático */
        padding: 20px 15px;   /* Padding lateral reducido */
        box-sizing: border-box; /* CRUCIAL: Incluye el padding en el cálculo del ancho */
        overflow: hidden;     /* Asegura que nada se salga del borde redondeado */
    }

    /* Botones de pestañas (Arrienda/Compra) */
    .hero-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
    }

    .hero-actions button {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- FORMULARIOS --- */
    /* Cambiamos a Flex en móvil para mejor control del ancho */
    .simple-filter-grid, 
    .advanced-filter-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .input-group {
        width: 100%;
        box-sizing: border-box;
    }

    /* Fix para que los inputs no se salgan */
    .input-group input,
    .input-group select {
        width: 100% !important; /* Forzamos a que no excedan su contenedor */
        max-width: 100%;
        box-sizing: border-box; /* El padding del input queda dentro del ancho */
        min-width: 0; /* Previene desbordamiento en flex items */
    }

    /* --- RANGO DE PRECIOS --- */
    .input-group.range-group {
        width: 100%;
    }

    /* Mantenemos los precios lado a lado pero ajustados */
    .price-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Asegurar que los inputs de precio quepan */
    .price-inputs input {
        width: 100%;
        min-width: 0; /* Truco para que grid no expanda el input */
    }

    /* --- BOTONES DE ACCIÓN --- */
    .simple-actions-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .search-button {
        width: 100%;
        box-sizing: border-box;
        justify-content: center; /* Centrar texto e icono */
    }
    
    /* Enlace de Filtro Avanzado */
    .toggle-filter-link {
        text-align: center;
        display: block;
        width: 100%;
    }

    /* --- OTROS AJUSTES MÓVILES --- */
    #results-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }
    
    .allies-container {
        flex-direction: column;
    }
    
    .footer-main {
        grid-template-columns: 1fr;
    }
}

/* Ajustes para móviles muy pequeños (iPhone SE, etc) */
@media (max-width: 480px) {
    .nav-links ul {
        flex-direction: column; /* Menú vertical */
        width: 100%;
        text-align: center;
    }
    
    .nav-links li {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .hero-section h1 {
        font-size: 1.8em;
    }
}

/* ========================================= */
/*   20. MENÚ MÓVIL (SOLUCIÓN DEFINITIVA)    */
/* ========================================= */

/* Ocultar elementos móviles en escritorio */
.menu-toggle, .close-menu, .menu-overlay {
    display: none;
}

/* Reglas para pantallas menores a 1000px */
@media (max-width: 1000px) {

    /* 1. CONTENEDOR EN FILA (Logo Izq - Botón Der) */
    .nav-container {
        display: flex;
        flex-direction: row !important; /* Forzamos la fila */
        justify-content: space-between !important; /* Extremos opuestos */
        align-items: center;
        width: 100%;
        padding: 10px 20px; /* Ajuste de espaciado */
    }

    /* 2. BOTÓN DE ABRIR */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 2rem;
        color: var(--color-accento-principal);
        cursor: pointer;
        z-index: 1500;
        padding: 5px;
    }

    /* 3. MENÚ LATERAL (SIDEBAR) */
    .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        z-index: 2000;
        transition: left 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        padding-top: 60px;
        box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    }

    /* Clase para mostrar el menú */
    .nav-links.active {
        left: 0;
    }

    /* Estilo de los enlaces en móvil */
    .nav-links ul {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .nav-links li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-links a {
        display: block;
        padding: 20px;
        font-size: 1.1rem;
        color: #333;
    }

    /* 4. BOTÓN DE CERRAR (X) */
    .close-menu {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 2rem;
        color: #555;
        cursor: pointer;
    }
}

/* ======================================================= */
/*   21. CORRECCIONES FINALES (Botones y Menú Lateral)     */
/* ======================================================= */

@media (max-width: 1000px) {

    /* --- 1. CORRECCIÓN BOTONES (ARRIENDA/COMPRA/CONSIGNA) --- */
    
    /* Contenedor en fila */
    .hero-actions {
        display: flex !important;
        flex-direction: row !important; /* Forzamos horizontal */
        justify-content: space-between;
        gap: 5px; /* Espacio pequeño entre botones */
        width: 100%;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee; /* Línea decorativa abajo */
    }

    /* Estilo de cada botón */
    .hero-actions button {
        flex: 1;
        width: auto !important;
        padding: 12px 5px !important;
        font-size: 0.9em;

        white-space: normal;
        text-overflow: clip;
        overflow: visible;
        height: auto;

        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.2;

        border-bottom: 3px solid transparent;
        border-radius: 0;
        background: none;
        border-top: none;
        border-left: none;
        border-right: none;
    }

    /* Estado activo en móvil */
    .hero-actions button.active {
        background-color: transparent !important; /* Fondo transparente */
        color: var(--color-accento-principal) !important;
        border-bottom-color: var(--color-accento-principal) !important;
    }

    /* --- 2. CORRECCIÓN MENÚ LATERAL (Z-INDEX Y FONDO) --- */

    /* El menú blanco */
    .nav-links {
        background-color: #ffffff !important; /* Asegurar fondo blanco */
        z-index: 9999 !important; /* Capa SUPERIOR (encima de todo) */
        box-shadow: 5px 0 15px rgba(0,0,0,0.1); /* Sombra para profundidad */
    }

    /* El botón de cerrar (X) */
    .close-menu {
        color: #333 !important; /* Asegurar que la X sea visible sobre blanco */
        z-index: 10000; /* Encima del menú */
    }
}

/* Ajuste extra para móviles muy pequeños (menos de 380px) */
@media (max-width: 380px) {
    .hero-actions button {
        font-size: 0.75em; /* Letra más pequeña aún */
        padding: 10px 2px !important;
    }
}

/* ======================================================= */
/*   22. AJUSTE DE RESPONSIVE (TABLET/MÓVIL) Y ESPACIADO   */
/* ======================================================= */
@media (max-width: 1024px) {
    .simple-filter-grid, 
    .advanced-filter-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        width: 100%;
    }

    .input-group,
    .input-group.range-group {
        width: 100% !important;
        grid-column: span 1 !important;
    }

    .price-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 10px;
        width: 100%;
    }

    .simple-actions-group {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        margin-top: 10px;
    }

    .simple-actions-group .toggle-filter-link {
        order: -1;
        text-align: center;
        margin-bottom: 10px;
        font-weight: 800;
        color: var(--color-rojo);
    }

    .search-button {
        width: 100%;
        justify-content: center;
        padding: 15px;
    }
    
    .actions-group {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 100%;
        margin-top: 20px;
        gap: 25px;
    }

    .clear-filter-link {
        margin-right: 0;
        padding: 10px;
        text-decoration: underline;
        color: var(--color-texto-secundario);
    }
}

/* ======================================================= */
/*   24. ESTILIZACIÓN PREMIUM (Sort & Pagination)          */
/* ======================================================= */

/* --- 1. SELECTOR DE ORDENAMIENTO (Dropdown) --- */
.sort-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alineado a la derecha */
    gap: 12px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.sort-wrapper label {
    font-weight: 700;
    color: var(--color-texto-secundario);
    font-size: 0.95em;
}

.sort-select {
    appearance: none; /* Elimina la flecha fea por defecto */
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Bordes suaves */
    padding: 10px 40px 10px 15px; /* Espacio extra a la derecha para la flecha */
    font-family: var(--font-principal);
    font-size: 0.95em;
    color: var(--color-texto-principal);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    
    /* Flecha personalizada (SVG incrustado color Rojo) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239F1D11' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    min-width: 180px;
}

.sort-select:hover {
    border-color: var(--color-naranja); /* Naranja al pasar el mouse */
    box-shadow: 0 4px 10px rgba(230, 90, 46, 0.1);
}

.sort-select:focus {
    outline: none;
    border-color: var(--color-accento-principal); /* Rojo al hacer clic */
    box-shadow: 0 0 0 3px rgba(159, 29, 17, 0.1); /* Anillo de enfoque sutil */
}

/* --- 2. PAGINACIÓN MODERNA --- */
#pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Espacio entre botones */
    margin-top: 50px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

#pagination button {
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Cuadrado redondeado */
    
    font-family: var(--font-principal);
    font-weight: 700;
    color: var(--color-texto-secundario);
    font-size: 1em;
    
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Estado Hover (Pasar mouse) */
#pagination button:hover:not(:disabled):not(.active-page) {
    border-color: var(--color-naranja);
    color: var(--color-naranja);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Estado Activo (Página actual) */
#pagination button.active-page {
    background-color: var(--color-accento-principal); /* Rojo corporativo */
    color: #ffffff !important;
    border-color: var(--color-accento-principal);
    box-shadow: 0 4px 10px rgba(159, 29, 17, 0.3);
    cursor: default;
    pointer-events: none; /* No clickable */
}

/* Botones Anterior/Siguiente */
#pagination button:first-child,
#pagination button:last-child {
    padding: 0 15px;
    width: auto; /* Ancho automático para el texto */
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.85em;
}

/* Estado Deshabilitado */
#pagination button:disabled {
    background-color: #f9f9f9;
    color: #ccc;
    border-color: #eee;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Puntos suspensivos (...) */
#pagination span {
    font-weight: 700;
    color: #ccc;
    padding: 0 5px;
    letter-spacing: 2px;
}

/* Responsive: Ajuste en móviles */
@media (max-width: 576px) {
    .sort-wrapper {
        justify-content: space-between; /* Separar label y select */
        width: 100%;
    }
    
    .sort-select {
        flex-grow: 1; /* Ocupar el resto del espacio */
        min-width: 0;
    }

    #pagination button {
        min-width: 36px;
        height: 36px;
        font-size: 0.9em;
    }
}

/* ========================================= */
/*   25. CORRECCIÓN PAGINACIÓN MÓVIL         */
/* ========================================= */

@media (max-width: 576px) {
    /* 1. Reducir el espacio entre botones */
    #pagination {
        gap: 4px !important; /* Estaban muy separados */
        margin-top: 30px;
        width: 100%;
        padding: 0 5px;
    }

    /* 2. Hacer los botones más compactos */
    #pagination button {
        min-width: 32px;      /* Menos anchos */
        height: 36px;         /* Menos altos */
        padding: 0 6px;       /* Menos relleno interno */
        font-size: 0.85em;    /* Letra un poco más pequeña */
    }

    /* 3. Ajuste específico para los botones "ANT" y "SIG" */
    #pagination button:first-child,
    #pagination button:last-child {
        padding: 0 10px;      /* Espacio justo para el texto */
        font-size: 0.8em;     /* Letra compacta */
        letter-spacing: 0;    /* Quitar espacio entre letras */
        font-weight: 700;
    }

    /* 4. Ajuste para los puntos suspensivos (...) */
    #pagination span {
        padding: 0 2px;
        letter-spacing: 0;
        font-size: 0.8em;
    }
}