/* ==========================================================================
   Tuchan Inmobiliaria - Design System Custom Styles
   Exported & Enhanced from Google Stitch
   ========================================================================== */

/* Custom Box Shadows */
.property-card-shadow {
    box-shadow: 0 10px 20px -5px rgba(26, 42, 58, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.property-card-shadow:hover {
    box-shadow: 0 20px 25px -5px rgba(26, 42, 58, 0.12);
    transform: translateY(-4px);
}

.card-shadow {
    box-shadow: 0 4px 20px rgba(26, 42, 58, 0.05);
    transition: all 0.3s ease;
}

.card-hover:hover {
    box-shadow: 0 10px 30px rgba(26, 42, 58, 0.12);
    transform: translateY(-4px);
}

/* Background Patterns */
.hero-pattern {
    background-image: url('../img/hero-servicios-pattern.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.12;
}

.cta-pattern {
    background-image: url('../img/cta-servicios-pattern.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}

.texture-bg {
    background-image: url('../img/hero-home-texture.png');
    background-size: cover;
    background-position: center;
}

/* Material Symbols Adjustments */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.material-symbols-outlined.filled,
.icon-fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c4c6cc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #74777d;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Toast Notification for Forms */
#toast-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(150%);
    opacity: 0;
}

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