/* Importación de Tailwind CSS */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom Styles & Palette */
:root {
    --color-primary: #0a1a44; /* Dark Blue */
    --color-accent: #00c2cb;  /* Cyan */
    --color-background: #ffffff; /* White */
    --color-text-primary: #0a1a44; /* Dark Blue */
    --color-text-on-dark: #ffffff; /* White for dark backgrounds */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.accent-color { color: var(--color-accent); }
.bg-accent-color { background-color: var(--color-accent); }
.border-accent-color { border-color: var(--color-accent); }

/* Buttons */
.btn {
    @apply px-8 py-4 rounded-full font-bold text-lg transition-all duration-300 ease-in-out transform shadow-lg;
}
.btn-primary {
    @apply bg-accent-color text-white hover:bg-cyan-600 hover:scale-105;
}
.btn-secondary {
    @apply border-2 border-accent-color text-accent-color hover:bg-accent-color hover:text-white;
}

/* Typography */
.section-title {
    @apply text-5xl md:text-6xl font-black mb-6 text-center;
}
.section-subtitle {
    @apply text-lg md:text-xl mb-16 text-center max-w-3xl mx-auto leading-relaxed;
}

/* Header style */
#header {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Navigation */
nav .nav-link {
    @apply relative px-2 py-2;
}
#nav-indicator {
    position: absolute;
    bottom: 0;
    height: 4px;
    background-color: var(--color-accent);
    border-radius: 2px;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hero Section Gradient */
#inicio {
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-primary) 100%);
}

/* Properties / Amenities Cards */
.property-card, .fleet-card {
    @apply bg-white rounded-lg shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 hover:shadow-cyan-400/30;
}
.property-card img, .fleet-card img {
    @apply transition-transform duration-500;
}
.property-card:hover img, .fleet-card:hover img {
    @apply scale-110;
}

/* Active Filter Button Style */
.filter-btn.active {
    background-color: #ffffff !important;
    color: #00c2cb !important;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
.animate-on-scroll { opacity: 0; transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; }
.fade-in-up { transform: translateY(30px); }
.fade-in-up.is-visible { transform: translateY(0); }
.fade-in-left { transform: translateX(-30px); }
.fade-in-left.is-visible { transform: translateX(0); }
.fade-in-right { transform: translateX(30px); }
.fade-in-right.is-visible { transform: translateX(0); }