/* Custom Styles Extracted from code.html Style Block */

/* Native smooth scroll — works regardless of scroll container */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #0c1324;
    color: #dce1fb;
    overflow-x: hidden;
}

/* Offset anchor sections so fixed nav doesn't cover content */
#propiedades,
#servicios,
#nosotros,
#contacto {
    scroll-margin-top: 90px;
}

.glass-pane {
    background: rgba(12, 19, 36, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.neon-glow-primary:hover {
    box-shadow: 0 0 40px rgba(173, 198, 255, 0.15);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #adc6ff33;
    border-radius: 10px;
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 200px;
    gap: 24px;
}

.grid-item-tall {
    grid-row: span 2;
}

.grid-item-wide {
    grid-column: span 2;
}

/* Property Card hover zoom transition */
.property-image {
    transition: transform 0.5s ease;
}

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

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.fill-icon {
    font-variation-settings: 'FILL' 1;
}

/* ========================================== */
/* LUMINA PREMIUM CELESTIAL DESIGN SYSTEM     */
/* ========================================== */

.property-grid-section h2 {
    color: #ffffff !important;
    font-family: 'Sora', sans-serif !important;
}

.text-on-surface-variant,
.property-grid-section .text-on-surface-variant {
    color: #cbd5e1 !important; /* Elegant light slate for perfect WCAG high-contrast legibility */
}

/* Deep Celestial Glassmorphic Cards with Editorial Proportions */
.property-grid-section .property-card {
    background: rgba(18, 24, 41, 0.65) !important;
    border: 1px solid rgba(173, 198, 255, 0.08) !important;
    box-shadow: 0 12px 36px rgba(7, 13, 31, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    border-radius: 0.85rem !important;
    /* Elegant editorial sutil corners */
}

/* Laser Glowing Scan Line on Hover */
.property-grid-section .property-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 8% !important;
    width: 84% !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, transparent, rgba(0, 219, 233, 0.6), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    z-index: 20 !important;
}

.property-grid-section .property-card:hover::before {
    opacity: 1 !important;
}

/* Elegant Float and Neon Cyan Glow on Hover */
.property-grid-section .property-card:hover {
    border-color: rgba(0, 219, 233, 0.35) !important;
    box-shadow: 0 20px 45px rgba(0, 219, 233, 0.15) !important;
    transform: translateY(-6px) !important;
}

.property-grid-section .property-card:hover .property-image {
    transform: scale(1.04) !important;
}

/* Glassmorphic Favorite Button */
.property-card button.absolute {
    background: rgba(12, 19, 36, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(5px) !important;
    transition: all 0.3s ease !important;
}

.property-card button.absolute:hover {
    color: #ff3b30 !important;
    border-color: rgba(255, 59, 48, 0.4) !important;
    background: rgba(255, 59, 48, 0.1) !important;
    transform: scale(1.1) !important;
}

/* Glowing Neon Pills for Badges (Highly Readable with Solid Background) */
.property-card .bg-primary-fixed-dim,
.inline-block.bg-primary-fixed-dim {
    background-color: #0c1324 !important; /* Solid deep celestial background for perfect readability */
    color: #00dbe9 !important; /* High contrast neon cyan text */
    border: 1px solid rgba(0, 219, 233, 0.45) !important; /* Thin elegant cyan border */
    font-family: 'Sora', sans-serif !important;
    font-size: 7.5px !important; /* Smaller, ultra-refined editorial size */
    font-weight: 800 !important;
    letter-spacing: 0.18em !important; /* Extended letter spacing */
    border-radius: 4px !important;
    padding: 3px 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* Premium Serif Editorial Price */
.property-card .card-content-wrapper div.font-data-label {
    font-family: 'Sora' !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #ffb786 !important;
    /* Beautiful golden sand/bronze */
    text-shadow: 0 0 15px rgba(255, 183, 134, 0.2) !important;
    letter-spacing: -0.01em !important;
}

/* Premium Serif Editorial Title */
.property-card h3 {
    font-family: 'Sora' !important;
    font-size: 1.25rem !important;
    /* 20px */
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
    line-height: 1.35 !important;
}

/* Clean Professional Location Style (No Brackets/No Code) */
.property-card p.text-on-surface-variant {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #b9cacb !important;
    margin-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.property-card p.text-on-surface-variant span.material-symbols-outlined {
    display: inline-block !important;
    /* Show standard location pin icon */
    font-size: 16px !important;
    color: #00dbe9 !important;
    font-variation-settings: 'FILL' 1, 'wght' 300 !important;
}

/* Premium Editorial Specs Row (Thin, Transparent & Spacious) */
.property-card .card-specs-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 16px !important;
    margin-top: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
}

.property-card .card-specs-row>div {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: rgba(185, 202, 203, 0.8) !important;
    transition: color 0.3s ease !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.property-card .card-specs-row>div:hover {
    color: #00dbe9 !important;
}

.property-card .card-specs-row>div span.text-white {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}

.property-card .card-specs-row>div .material-symbols-outlined {
    font-size: 18px !important;
    color: #00dbe9 !important;
    opacity: 0.8;
}

/* Highly Interactive Premium "Contactar" Button with Life */
.property-card .btn-editorial-cta {
    background: rgba(0, 219, 233, 0.03) !important;
    color: #00dbe9 !important;
    border: 1px solid rgba(0, 219, 233, 0.35) !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border-radius: 0.75rem !important;
    padding: 12px 24px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.property-card .btn-editorial-cta:hover {
    background: linear-gradient(135deg, #00dbe9 0%, #4d8eff 100%) !important;
    color: #0c1324 !important;
    border-color: transparent !important;
    box-shadow: 0 0 25px rgba(0, 219, 233, 0.45), 0 8px 20px rgba(77, 142, 255, 0.25) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.property-card .btn-editorial-cta:active {
    transform: translateY(-0.5px) scale(1) !important;
}

.font-data-label {
    font-family: 'Sora' !important;
}

/* ========================================== */
/* LIST LAYOUT SWITCHER STYLES                */
/* ========================================== */
@media (min-width: 768px) {
    #properties-container.list-view {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    #properties-container.list-view .property-card {
        flex-direction: row !important;
        height: 280px !important;
        align-items: stretch !important;
    }

    #properties-container.list-view .property-card .card-img-wrapper {
        width: 380px !important;
        height: 100% !important;
    }

    #properties-container.list-view .property-card .card-content-wrapper {
        padding: 28px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        flex: 1 1 0% !important;
    }

    #properties-container.list-view .property-card .card-content-wrapper h3 {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
}

/* ========================================== */
/* COLLAPSIBLE ADVANCED FILTER DRAWER         */
/* ========================================== */
#filter-drawer {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

#filter-drawer.open {
    max-height: 350px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Custom Neon Range Slider Styling */
#price-range-slider {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

#price-range-slider::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.1);
    height: 4px;
    border-radius: 9999px;
}

#price-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #00dbe9;
    box-shadow: 0 0 10px rgba(0, 219, 233, 0.6);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-top: -6px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

#price-range-slider::-webkit-slider-thumb:hover {
    background: #C8A97E;
    box-shadow: 0 0 15px rgba(200, 169, 126, 0.8);
    transform: scale(1.1);
}

/* ========================================== */
/* DETAIL PAGE TRANSITIONS & PREMIUM EFFECTS  */
/* ========================================== */
.detail-hero-backdrop {
    background: linear-gradient(180deg, rgba(12, 19, 36, 0.3) 0%, rgba(12, 19, 36, 0.85) 70%, #0c1324 100%);
}

.spec-card {
    background: rgba(30, 31, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.spec-card:hover {
    border-color: rgba(0, 219, 233, 0.2);
    transform: translateY(-2px);
}

/* ========================================== */
/* 3D CARD FLIP FILTER TRANSITIONS            */
/* ========================================== */
#properties-container {
    perspective: 1400px !important;
}

.property-card {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.5s ease,
                border-color 0.4s ease,
                box-shadow 0.4s ease !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
}

/* Exit state: Flips away, scales down and fades out */
.property-card.card-exit-flip {
    transform: rotateY(75deg) scale(0.85) translateY(15px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Enter initial state: Flipped and hidden */
.property-card.card-enter-initial {
    transform: rotateY(-75deg) scale(0.85) translateY(-15px) !important;
    opacity: 0 !important;
}

/* Enter state: Flips back in and fades in */
.property-card.card-enter-flip {
    transform: rotateY(0deg) scale(1) translateY(0) !important;
    opacity: 1 !important;
}

/* ========================================== */
/* DETAIL PAGE BUTTONS WITH DYNAMIC LIFE      */
/* ========================================== */
/* 1. Primary "Agendar Visita" Button */
.btn-detail-primary {
    background: #00dbe9 !important;
    color: #0c1324 !important;
    font-family: 'Sora', sans-serif !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 219, 233, 0.25) !important;
}

.btn-detail-primary:hover {
    background: linear-gradient(135deg, #00dbe9 0%, #4d8eff 100%) !important;
    box-shadow: 0 0 25px rgba(0, 219, 233, 0.45), 0 8px 20px rgba(77, 142, 255, 0.25) !important;
    transform: translateY(-2px) scale(1.02) !important;
    color: #0c1324 !important;
}

.btn-detail-primary .material-symbols-outlined {
    color: #0c1324 !important; /* Force deep dark contrast color */
    font-weight: 800 !important;
    font-variation-settings: 'FILL' 1, 'wght' 600 !important; /* Bold thick stroke */
}

/* 2. Secondary "Solicitar Brochure" Button */
.btn-detail-secondary {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-family: 'Sora', sans-serif !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-detail-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* 3. Gold "Presentar Oferta" Button */
.btn-detail-gold {
    background: rgba(255, 183, 134, 0.03) !important;
    color: #ffb786 !important;
    border: 1px solid rgba(255, 183, 134, 0.3) !important;
    font-family: 'Sora', sans-serif !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-detail-gold:hover {
    background: linear-gradient(135deg, #ffb786 0%, #df7412 100%) !important;
    color: #0c1324 !important;
    border-color: transparent !important;
    box-shadow: 0 0 25px rgba(255, 183, 134, 0.4), 0 8px 20px rgba(223, 116, 18, 0.25) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* ==========================================
   RESPONSIVE — MOBILE OVERRIDES
   ========================================== */
@media (max-width: 767px) {

    /* Reduce section vertical spacing */
    .property-grid-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Services grid: 1 col on mobile */
    .property-grid-section .grid.grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Nosotros section spacing */
    #nosotros {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Floor plan height on mobile */
    #fp-container {
        height: 280px !important;
    }

    /* Map height on mobile */
    #lumina-map {
        height: 260px !important;
    }

    /* Detail hero price badge — make it less wide */
    .detail-price-badge {
        width: 100% !important;
        text-align: left !important;
    }

    /* Filter tabs smaller on mobile */
    [data-category-tab] {
        padding: 8px 16px !important;
        font-size: 10px !important;
    }

    /* Concierge orb smaller on mobile */
    #ai-concierge > div {
        width: 52px !important;
        height: 52px !important;
    }
}