/* =========================
    TABLET
    Pantallas medianas (max-width: 900px)
   ========================= */

@media (max-width: 900px) {

    body {
        padding-top: 70px;
    }

    /* Hero pasa a una sola columna */
    .hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-text,
    .hero-image {
        width: 100%;
    }

    /* About pasa a una sola columna */
    .about-content {
        flex-direction: column;
    }

    .about-image {
        width: 100%;
        max-width: 500px;
    }

    /* Footer pasa a dos columnas */
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    /* Menú con menos separación */
    .main-nav ul {
        gap: 4px;
    }

    .main-nav a {
        font-size: 0.85rem;
        padding: 7px 8px;
    }

    /* CTA en columna */
    .cta-content {
        flex-direction: column;
        text-align: center;
    }

    /* Buscar: panel de filtros pasa a estar arriba */
    .buscar-layout {
        grid-template-columns: 1fr;
    }

    /* Quita el sticky en tablet */
    .filtros-panel {
        position: static;
    }

    /* Los filtros se distribuyen en dos columnas en tablet */
    .filtros-panel > .filtro-grupo {
        display: inline-flex;
        width: calc(50% - 8px);
        vertical-align: top;
    }
}

/* =========================
    MÓVIL
    Pantallas pequeñas (max-width: 700px)
   ========================= */

@media (max-width: 700px) {

    body {
        padding-top: 64px;
    }

    .site-header {
        padding: 12px 0;
    }

    .header-content {
        position: relative;
    }

    /* Muestra el botón hamburguesa */
    .menu-button {
        display: block;
    }

    /* Menú oculto por defecto en móvil */
    .main-nav {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: var(--color-superficie);
        border-top: 1px solid var(--color-dorado);
        padding: 14px;
        border-radius: 0 0 12px 12px;
        z-index: 999;
    }

    /* Cuando el checkbox está activo, el menú se muestra */
    .menu-toggle:checked ~ .main-nav {
        display: block;
    }

    /* Menú vertical en móvil */
    .main-nav ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .main-nav a {
        display: block;
        padding: 12px;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Hero más compacto en móvil */
    .hero {
        padding: 48px 0;
    }

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

    /* Barra de búsqueda en columna */
    .search-bar {
        flex-direction: column;
    }

    .search-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Listings en una sola columna */
    .listings-grid {
        grid-template-columns: 1fr;
    }

    /* Footer en una sola columna */
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* Acciones del hero en columna */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-link {
        text-align: center;
        padding: 10px;
    }

    /* Breadcrumb más compacto */
    .breadcrumb .container {
        font-size: 0.82rem;
        flex-wrap: wrap;
    }

    /* Buscar: filtros en columna completa */
    .filtros-panel > .filtro-grupo {
        display: flex;
        width: 100%;
    }

    /* Barra de resultados en columna */
    .resultados-barra {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Auth: padding reducido en móvil */
    .auth-card {
        padding: 28px 20px;
    }
}

/* =========================
    MÓVIL PEQUEÑO
    Teléfonos angostos (max-width: 420px)
   ========================= */

@media (max-width: 480px) {

    .logo {
        font-size: 1.15rem;
    }

    .hero-text h1 {
        font-size: 1.75rem;
    }

    .btn-primary,
    .btn-secondary,
    .btn-gold {
        width: 100%;
        text-align: center;
    }

    .carousel-window {
        width: 100% !important;
        overflow: hidden !important;
    }

    .carousel-window .property-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        
        padding-right: 10px;
        padding-left: 10px;
        
        box-sizing: border-box !important;
    }

    .carousel-window .listings-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 0px !important;
        transition: transform 0.5s ease-in-out;
    }
    
    .main-nav {
        max-height: calc(100vh - 70px); 
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .session-sidebar,
    .session-form {
        max-height: none;
        overflow: visible;
    }

    .main-nav ul {
        gap: 8px !important;
        padding: 15px 0;
    }

    .session-form .form-group {
        margin-bottom: 8px !important;
    }
}