@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800;900&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    background-image: url('images/fondo 1.png');
    background-size: 100% 100%;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #ec4899, #8b5cf6, #3b82f6, #10b981);
}

.bg-gradient-custom {
    background: linear-gradient(135deg, #ff007f 0%, #6600ff 50%, #00ccff 100%);
}

.bg-search-bar {
    background: linear-gradient(to right, #3b82f6, #10b981, #eab308, #ec4899);
}

.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Paint drip divider */
.paint-drip {
    width: 100%;
    height: 50px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0 V40 Q15,80 30,40 T60,40 T90,40 T120,40 T150,40 T180,40 T210,40 T240,40 T270,40 T300,40 T330,40 T360,40 T390,40 T420,40 T450,40 T480,40 T510,40 T540,40 T570,40 T600,40 T630,40 T660,40 T690,40 T720,40 T750,40 T780,40 T810,40 T840,40 T870,40 T900,40 T930,40 T960,40 T990,40 T1020,40 T1050,40 T1080,40 T1110,40 T1140,40 T1170,40 T1200,40 V0 H0 Z" fill="%23ffffff"/></svg>') repeat-x;
    background-size: 100px 100%;
}

/* Animación suave para el botón de Whatsapp */
@keyframes pulse-whatsapp {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.btn-whatsapp {
    animation: pulse-whatsapp 2s infinite;
}

/* Ocultar scrollbar para carruseles horizontales */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Tamaños de los items del carrusel de galería */
#gallery-grid .gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
}
@media (min-width: 640px) {
    #gallery-grid .gallery-item {
        flex: 0 0 calc(50% - 1rem); /* 2 items per row */
    }
}
@media (min-width: 1024px) {
    #gallery-grid .gallery-item {
        flex: 0 0 calc(25% - 1.5rem); /* 4 items per row */
    }
}