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

/* Custom Styles & New Color Palette */
:root {
    --color-primary: #0a1a44; /* Dark Blue */
    --color-accent:  #00c4cc;  /* 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); }

/* CORRECTED: Button style explicitly set to pill shape */
.btn-accent {
    @apply px-8 py-4 rounded-full font-bold text-lg transition-all duration-300 ease-in-out transform shadow-lg text-white;
    background-color: #00c4cc;
}
.btn-accent:hover {
    background-color: #00b2ba;
    transform: scale(1.05);
}
.btn-secondary {
    @apply border-2 border-accent-color text-accent-color hover:bg-accent-color hover:text-white;
}

/* CORRECTED: Increased title size and margin */
.section-title {
    @apply text-5xl md:text-6xl font-black mb-6 text-center;
}
/* CORRECTED: Added more line-height and bottom margin for readability */
.section-subtitle {
    @apply text-lg md:text-xl mb-16 text-center max-w-3xl mx-auto leading-relaxed;
}

/* Header style */
#header {
    background-color: #00c4cc;
}
/* REVERTED: Menu animation styling */
nav .nav-link {
    @apply relative px-2 py-2;
}
#nav-indicator {
    position: absolute;
    bottom: -8px; /* antes estaba en 0 */
    height: 5px;
    background-color: white;
    border-radius: 3px;
    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%);
}

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

/* Video Section */
#video-section {
    background-image: linear-gradient(rgba(10, 26, 68, 0.85), rgba(10, 26, 68, 0.85)), url('https://images.unsplash.com/photo-1619482188429-f5696384a5a3?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.play-button {
    @apply w-24 h-24 bg-white/30 rounded-full flex items-center justify-center text-white text-4xl backdrop-blur-sm transition-all duration-300 hover:bg-white/50 hover:scale-110;
}

/* 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); }

.btn-accent {
    @apply px-8 py-4 rounded-full font-bold text-lg transition-all duration-300 ease-in-out transform shadow-lg text-white;
    background-color: #00c4cc;
}

.btn-accent:hover {
    background-color: #00b2ba; /* tono un poco más oscuro al pasar el mouse */
    transform: scale(1.05);
}
.hero-truck-img {
    width: 150%;
    max-width: none;
    margin-left: 30%;
    object-fit: contain;
}
.highlight-card {
    background-color: white !important;
    border: 2px solid var(--color-accent);
    box-shadow: 0 20px 30px rgba(0, 196, 204, 0.25);
}