/* =================================================================== INDENANT BROKER - CAROUSEL DE PROPIEDADES Archivo de estilos para el carousel Swiper de propiedades destacadas Extraído de home.php para mejor modularización =================================================================== */ /* =================================================================== 1. CONFIGURACIÓN DEL CONTENEDOR SWIPER =================================================================== */ .swiper-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 60px; /* Espacio para botones */ position: relative; } /* =================================================================== 2. CONFIGURACIÓN DE SLIDES =================================================================== */ .swiper-slide { height: auto; display: flex; justify-content: center; align-items: stretch; } /* =================================================================== 3. ESTILOS DE TARJETAS ESTILO AIRBNB =================================================================== */ .airbnb-card { width: 100%; max-width: 300px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border-radius: 16px; overflow: hidden; background: white; transition: transform 0.3s ease; } .airbnb-card:hover { transform: translateY(-5px); } /* Ajuste de altura de imágenes para mejor balance visual */ .swiper-slide .airbnb-card img { height: 200px !important; /* Aumentado desde 180px */ } /* =================================================================== 4. GLASSMORPHISM LIMPIO - ULTRA ESTÉTICO =================================================================== */ .airbnb-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px) saturate(1.8); border-radius: 24px; overflow: hidden; box-shadow: 0 8px 32px rgba(255, 87, 51, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid rgba(255, 87, 51, 0.15); cursor: pointer; position: relative; isolation: isolate; } .airbnb-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(255, 87, 51, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 138, 80, 0.05) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 87, 51, 0.02) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: -1; } .airbnb-card:hover { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(25px) saturate(2); box-shadow: 0 20px 40px rgba(255, 87, 51, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 87, 51, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 87, 51, 0.08); transform: translateY(-12px) scale(1.03); border-color: rgba(255, 87, 51, 0.4); } .airbnb-card:hover::before { opacity: 1; } /* =================================================================== 5. UTILIDADES ADICIONALES PARA LAS CARDS =================================================================== */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .text-accent { color: #FF5733; } .text-accent-dark { color: #E14B2C; } .bg-accent { background-color: #FF5733; } /* =================================================================== 6. GLASSMORPHISM TAGS - ULTRA ESTÉTICOS =================================================================== */ .airbnb-card .absolute.top-3.left-3 { background: rgba(255, 87, 51, 0.9); backdrop-filter: blur(12px) saturate(1.5); box-shadow: 0 8px 20px rgba(255, 87, 51, 0.25), 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 18px; font-weight: 700; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .airbnb-card .absolute.top-3.left-3.bg-gray-600 { background: rgba(71, 85, 105, 0.85); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 6px 16px rgba(71, 85, 105, 0.2), 0 3px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); } .airbnb-card:hover .absolute.top-3.left-3 { background: rgba(255, 87, 51, 0.95); backdrop-filter: blur(20px) saturate(2.2); transform: scale(1.08) translateY(-1px); box-shadow: 0 10px 24px rgba(255, 87, 51, 0.3), 0 5px 10px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 25px rgba(255, 87, 51, 0.15), 0 0 0 1px rgba(255, 87, 51, 0.2); } .airbnb-card:hover .absolute.top-3.left-3.bg-gray-600 { background: rgba(51, 65, 85, 0.95); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 10px 24px rgba(71, 85, 105, 0.25), 0 5px 10px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 25px rgba(71, 85, 105, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.15); } /* =================================================================== 7. GLASSMORPHISM TYPOGRAPHY - PROFESIONAL =================================================================== */ .airbnb-card h3 { font-weight: 800; font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 0.5rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .airbnb-card:hover h3 { color: #020617; transform: translateY(-1px); } .airbnb-card .text-xl { font-weight: 900; font-size: 1.65rem; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); transition: all 0.3s ease; } .airbnb-card:hover .text-xl { background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transform: scale(1.02); }