/* Tailwind CSS Custom Colors Configuration */
:root {
    --primary: #10b981;
    --secondary: #3b82f6;
    --accent: #8b5cf6;
    --orange: #f59e0b;
    --pink: #ec4899;
    --red: #ef4444;
}

/* Scroll offset para compensar navbar fijo */
html {
    scroll-padding-top: 6rem; /* 96px para compensar navbar + margen */
}

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

/* Ajustes para secciones target de navegación */
.service-target {
    scroll-margin-top: 6rem; /* Margen adicional para el scroll */
}

/* Gradient Text Effect */
.gradient-text {
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hover Scale Animation */
.hover-scale {
    transition: transform 0.3s ease;
}

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

/* Card Shadow */
.card-shadow {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Hero Pattern Background */
.hero-pattern {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2310b981' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Carousel Styles */
.image-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    height: 300px;
}

.carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease;
}

.carousel-dot.active {
    background: white;
}

/* Service Gradient Backgrounds */
.service-gradient-1 {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.service-gradient-2 {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.service-gradient-3 {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.service-gradient-4 {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.service-gradient-5 {
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
}

.service-gradient-6 {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.service-gradient-7 {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
}