/* Custom Styles */

/* Zoom Effect for Cards */
.zoom-hover:hover .bg-image-zoom {
    transform: scale(1.05);
}

.bg-image-zoom {
    transition: transform 0.7s ease;
}

/* Gradient Overlay */
.warm-gradient-overlay {
    background: linear-gradient(to top, rgba(124, 45, 18, 0.9) 0%, rgba(124, 45, 18, 0.4) 40%, transparent 100%);
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Stacked sticky items for departamentos list */
/* Móvil: sticky pero con top dinámico que respeta el contenido completo */
/* Stacked sticky items para departamentos */
/* Stacked sticky - desktop */
.dept-row {
    position: sticky;
    top: 120px;
}

@media (min-width: 1024px) {
    .dept-row {
        min-height: 80vh;
    }
}

.dept-row + .dept-row {
    margin-top: -48px;
}

/* Móvil: el sticky se activa muy tarde, 
   permitiendo scroll completo del card anterior */
@media (max-width: 767px) {
    .dept-row {
        position: sticky;
        top: -300px; /* valor negativo = se pega solo cuando casi sale de pantalla */
    }

    .dept-row + .dept-row {
        margin-top: 0;
    }
}

/* Compactar cards en móvil para que quepan en pantalla */
@media (max-width: 767px) {

    /* Imagen principal más pequeña */
    .dept-card a.block {
        height: 160px !important;
    }

    /* Solo 2 líneas de descripción */
    .dept-card p.line-clamp-3 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* Referencias más planas */
    .dept-card-surface .aspect-\[16\/8\] {
        aspect-ratio: 16 / 5;
    }

    /* Reducir padding interno */
    .dept-card .p-6 {
        padding: 1rem;
    }
}
@media (min-width: 768px) {
    .dept-row + .dept-row {
        margin-top: -48px;
    }
}

/* Disable zoom effects (hover scale/pinch) */
body.no-zoom {
    touch-action: pan-x pan-y;
}

body.no-zoom .group-hover\:scale-110,
body.no-zoom .group-hover\:scale-105,
body.no-zoom .group-hover\:scale-100,
body.no-zoom .hover\:scale-110:hover,
body.no-zoom .hover\:scale-105:hover,
body.no-zoom .hover\:scale-102:hover,
body.no-zoom .hover\:scale-100:hover {
    transform: none !important;
}

body.no-zoom .zoom-hover:hover .bg-image-zoom {
    transform: none !important;
}

/* Departamentos theme */
.departamentos-section {
    background-color: #ffedc8;
}

.departamentos-section .dept-card {
    background-color: #ffffff;
    border-color: #f2c772;
}

.departamentos-section .dept-card-soft {
    background-color: #ffffff;
}

.departamentos-section .dept-card-mini {
    background-color: #ffffff;
    border-color: #f2c772;
}

.departamentos-section .dept-card-surface {
    padding: 0.5rem;
}

.departamentos-section .dept-card-divider {
    border-color: #e69523;
    border-top-width: 2px;
    border-style: solid;
}

/* Landing load/reveal effects */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.anim-fade-in-up {
    opacity: 0;
    animation: fade-in-up 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.landing-section-reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    filter: blur(2px);
    pointer-events: none;
    transition:
        opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 700ms ease;
    transition-delay: var(--section-reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

.landing-section-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .anim-fade-in-up {
        opacity: 1;
        animation: none;
    }

    .landing-section-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #F97316;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

html {
    scroll-behavior: smooth;
}

/* Leaflet/Map heights if needed later */
.map-container {
    height: 300px;
    width: 100%;
}