/* ========================================================================== SUMMER THEME 2026 - Algodón Todo Evento Temporada de Verano: Teal Tropical, Coral, Dorado, Arena Este archivo va ULTIMO en el para override de todos los sistemas CSS ========================================================================== */ /* ========================================================================== 0. RESPONSIVE AUTO-SCALING SYSTEM Ensures proportional display across all screen sizes: - Small laptops (1024-1366px): slightly smaller - Standard laptops (1366-1600px): normal - Large screens (1600-1920px): capped growth - Extra large (1920+): max cap prevents oversizing - Mobile: native sizing ========================================================================== */ /* Base: 16px standard */ html { font-size: 16px !important; } /* Small laptops - scale down slightly */ @media (min-width: 1024px) and (max-width: 1366px) { html { font-size: clamp(14px, 1.1vw, 15px) !important; } } /* Standard laptops/desktops */ @media (min-width: 1367px) and (max-width: 1600px) { html { font-size: 16px !important; } } /* Large screens (1601-1920px) - full size */ @media (min-width: 1601px) and (max-width: 1920px) { html { font-size: 16.5px !important; } } /* Extra large screens (1921-2559px, e.g. 27" monitors at 2560x1440) */ @media (min-width: 1921px) { html { font-size: 18px !important; } } /* Ultrawide / 4K */ @media (min-width: 2560px) { html { font-size: 19px !important; } } /* Global max-width constraint for content */ .index-main, .products-main, .events-main, .personalizar-section, .contact-page, .blog-section, .gallery-main, .modification-main, .privacy-main, .terms-content, .legal-main, #maintenance-services, .main-content { max-width: 1800px !important; margin-left: auto !important; margin-right: auto !important; } @media (min-width: 2560px) { .index-main, .products-main, .events-main, .personalizar-section, .contact-page, .blog-section, .gallery-main, .modification-main, .privacy-main, .terms-content, .legal-main, #maintenance-services, .main-content { max-width: 2100px !important; } } /* Hero section scaling fix for large screens */ @media (min-width: 1440px) { .hero-section { padding: 4rem 2rem 3.5rem !important; max-height: 80vh !important; } .hero-section h1 { font-size: 3.2rem !important; } .hero-description { font-size: 1.1rem !important; max-width: 650px !important; margin-left: auto !important; margin-right: auto !important; } .hero-badge { font-size: 0.8rem !important; padding: 6px 16px !important; } .hero-badge i { font-size: 0.85rem !important; } .hero-buttons .btn-cta, .hero-buttons a { font-size: 0.95rem !important; padding: 12px 28px !important; } .stats-grid .stat-card, .stat-card { padding: 16px 20px !important; } .stat-number { font-size: 2rem !important; } .stat-label { font-size: 0.8rem !important; } .stat-icon { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; } /* Sections padding cap */ .about-section, .mission-vision-section, .history-section, .products-section, .testimonials-section, .promo-banners-section { padding: 3.5rem 2rem !important; } .section-header h2, .promo-banners-section h2 { font-size: 2rem !important; } .section-header p { font-size: 1rem !important; } } /* Large screens (1920px+) - proportional sizing for 27" monitors */ @media (min-width: 1920px) { .hero-section { padding: 5rem 3rem 4.5rem !important; max-height: 85vh !important; } .hero-section h1 { font-size: 3.8rem !important; } .hero-description { font-size: 1.2rem !important; max-width: 750px !important; } .hero-content { max-width: 850px !important; } .stat-number { font-size: 2.4rem !important; } .stat-label { font-size: 0.9rem !important; } .section-header h2, .promo-banners-section h2 { font-size: 2.4rem !important; } .section-header p { font-size: 1.1rem !important; } .about-section, .mission-vision-section, .history-section, .products-section, .testimonials-section, .promo-banners-section { padding: 4.5rem 3rem !important; } } /* 4K / Ultrawide screens */ @media (min-width: 2560px) { .hero-section { padding: 6rem 3rem 5rem !important; max-height: 85vh !important; } .hero-section h1 { font-size: 4.2rem !important; } .hero-description { font-size: 1.3rem !important; max-width: 850px !important; } .hero-content { max-width: 950px !important; } .stat-number { font-size: 2.8rem !important; } .section-header h2, .promo-banners-section h2 { font-size: 2.8rem !important; } .about-section, .mission-vision-section, .history-section, .products-section, .testimonials-section, .promo-banners-section { padding: 5rem 4rem !important; } } /* Small laptop adjustments */ @media (min-width: 1024px) and (max-width: 1366px) { .hero-section { padding: 2.5rem 1.5rem 2rem !important; } .hero-section h1 { font-size: 2.4rem !important; } .hero-description { font-size: 0.9rem !important; } .stat-number { font-size: 1.5rem !important; } .stat-label { font-size: 0.7rem !important; } .stat-icon { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; } .hero-badge { font-size: 0.65rem !important; padding: 4px 12px !important; } .hero-buttons .btn-cta, .hero-buttons a { font-size: 0.8rem !important; padding: 10px 20px !important; } .about-section, .mission-vision-section, .history-section, .products-section, .testimonials-section, .promo-banners-section { padding: 2rem 1.5rem !important; } .section-header h2, .promo-banners-section h2 { font-size: 1.5rem !important; } .section-header p { font-size: 0.85rem !important; } } /* ========================================================================== 1. VARIABLE OVERRIDES - Todos los sistemas CSS ========================================================================== */ :root { /* ---- Summer Tokens (nuevos) ---- */ --summer-ocean: #0891B2; --summer-ocean-light: #06B6D4; --summer-ocean-dark: #0E7490; --summer-ocean-deep: #134E4A; --summer-coral: #FB7185; --summer-coral-dark: #E11D48; --summer-sand: #FEF3C7; --summer-sand-dark: #FDE68A; --summer-sunshine: #F59E0B; --summer-sunset: #F97316; --summer-emerald: #10B981; --summer-sky: #38BDF8; --summer-cream: #FFFBEB; --summer-warm-white: #FFF7ED; /* ---- Summer Gradients ---- */ --summer-gradient-ocean: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%); --summer-gradient-sunset: linear-gradient(135deg, #F97316 0%, #FB7185 100%); --summer-gradient-hero: linear-gradient(135deg, #ECFEFF 0%, #FEF3C7 50%, #FFF7ED 100%); --summer-gradient-warm: linear-gradient(180deg, #FFFFFF 0%, #FEF3C7 50%, #FFFFFF 100%); --summer-gradient-card: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(254,243,199,0.15)); --summer-gradient-footer: linear-gradient(135deg, #134E4A 0%, #0E7490 50%, #134E4A 100%); --summer-gradient-topbar: linear-gradient(90deg, #0E7490, #0891B2, #0EA5E9); --summer-gradient-cta: linear-gradient(135deg, #F97316 0%, #EC4899 100%); /* ---- Override: index.css (--idx-*) ---- */ --idx-primary: #0891B2; --idx-primary-light: #06B6D4; --idx-primary-dark: #0E7490; --idx-secondary: #F59E0B; --idx-success: #10B981; --idx-warning: #F97316; --idx-gradient-primary: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%); --idx-gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%); --idx-gradient-hero: linear-gradient(135deg, #ECFEFF 0%, #FEF3C7 50%, #FFF7ED 100%); /* ---- Override: header-max.css (--primary*, --secondary*, --accent) ---- */ --primary-dark: #0E7490; --primary: #0891B2; --primary-light: #06B6D4; --secondary: #0EA5E9; --secondary-light: #38BDF8; --accent: #F97316; /* ---- Override: productos.css & evento.css (--color-*) ---- */ --color-primary: #0891B2; --color-primary-light: #06B6D4; --color-primary-dark: #0E7490; --color-primary-intense: #0E7490; --color-primary-deep: #0891B2; --color-primary-accent: #06B6D4; --color-primary-bright: #22D3EE; --color-success: #10B981; --color-warning: #F97316; --color-deluxe: #F59E0B; /* ---- Override: bmantenimiento.css (--apple-*) ---- */ --apple-blue: #0891B2; --apple-blue-dark: #0E7490; --apple-gradient: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%); --apple-gradient-light: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%); /* ---- Override: evento.css promo variables ---- */ --event-promo-hot: #0891B2; --event-promo-hot-dark: #0E7490; --event-promo-limited: #F97316; --event-promo-limited-dark: #EA580C; --event-promo-popular: #F59E0B; --event-promo-popular-dark: #D97706; --event-promo-new: #10B981; --event-promo-new-dark: #059669; --event-promo-premium: #FB7185; --event-promo-premium-dark: #E11D48; /* ---- Override: footer.css (--footer-*) ---- */ --footer-bg: linear-gradient(135deg, #134E4A 0%, #0E7490 50%, #134E4A 100%); --footer-text: rgba(255, 255, 255, 0.9); --footer-heading: #ffffff; --footer-link-hover: #ECFEFF; --footer-accent: #38BDF8; --footer-border: rgba(255, 255, 255, 0.15); --footer-social-bg: rgba(255, 255, 255, 0.12); --footer-social-hover: rgba(251, 113, 133, 0.35); } /* Dark mode summer overrides */ .dark { --footer-bg: linear-gradient(135deg, #042f2e 0%, #0E7490 50%, #042f2e 100%); --footer-accent: #06B6D4; --footer-social-bg: rgba(6, 182, 212, 0.2); --footer-social-hover: rgba(251, 113, 133, 0.35); } /* ========================================================================== 2. HEADER SUMMER ENHANCEMENTS ========================================================================== */ /* Top bar - Gradiente océano tropical */ .top-bar { background: var(--summer-gradient-topbar) !important; } /* Main header - Fondo cálido sutil */ .main-header { background: linear-gradient(180deg, #FFFFFF 0%, #FEFCE8 100%) !important; box-shadow: 0 2px 16px rgba(8, 145, 178, 0.08) !important; } /* Search bar - Pill shape con borde cyan */ .search-container input, .search-input { border-radius: 24px !important; border: 2px solid #E5E7EB !important; transition: all 0.3s ease !important; } .search-container input:focus, .search-input:focus { border-color: var(--summer-ocean) !important; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15) !important; } /* Cart badge - Gradiente coral */ .cart-count, .cart-badge { background: var(--summer-gradient-sunset) !important; color: white !important; } /* Nav active link - Underline sunset */ .main-nav a.active, .main-nav .nav-link.active, .main-nav a.active { background: rgba(255, 255, 255, 0.25) !important; color: #FFFFFF !important; font-weight: 700 !important; border-radius: 8px !important; box-shadow: inset 0 -3px 0 #FBBF24 !important; } .main-nav a.active::after, .main-nav .nav-link.active::after { background: #FBBF24 !important; height: 3px !important; width: 70% !important; border-radius: 2px !important; } /* Main nav bar - Ocean deep gradient */ .main-nav { background: linear-gradient(90deg, #0E7490 0%, #0891B2 50%, #0E7490 100%) !important; } /* Nav link hover - subtle white glow */ .nav-link:hover, .nav-item:hover > .nav-link { background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; } /* Nav link active state - clean highlight */ .nav-link.active { background: rgba(255, 255, 255, 0.22) !important; color: #FFFFFF !important; font-weight: 700 !important; box-shadow: inset 0 -3px 0 #FBBF24 !important; } .nav-link.active::after { background: #FBBF24 !important; height: 3px !important; } /* Nav link hover when mega menu is open */ .nav-item.has-mega:hover > .nav-link, .nav-item.has-dropdown:hover > .nav-link { background: rgba(255, 255, 255, 0.2) !important; color: #FFFFFF !important; box-shadow: inset 0 -3px 0 var(--summer-sunshine) !important; } /* Mega menu - Solid white with warm accent */ .mega-menu, .mega-dropdown { background: #FFFFFF !important; border: 1px solid rgba(8, 145, 178, 0.12) !important; box-shadow: 0 25px 60px -12px rgba(8, 145, 178, 0.12), 0 12px 24px -8px rgba(8, 145, 178, 0.06), 0 0 0 1px rgba(8, 145, 178, 0.04) !important; } /* Mega menu column headers - Teal accent */ .mega-menu-column h4 { color: var(--summer-ocean-dark) !important; background: linear-gradient(135deg, rgba(8, 145, 178, 0.06) 0%, rgba(254, 243, 199, 0.2) 100%) !important; border-radius: 8px !important; } .mega-menu-column h4 i { color: var(--summer-ocean) !important; background: rgba(8, 145, 178, 0.08) !important; } /* Mega menu link hover */ .mega-menu-link:hover { background: linear-gradient(90deg, rgba(8, 145, 178, 0.06) 0%, rgba(254, 243, 199, 0.15) 100%) !important; color: var(--summer-ocean-dark) !important; } .mega-menu-link:hover i { color: var(--summer-ocean) !important; } /* Mega menu column dividers */ .mega-menu-column { border-right-color: rgba(8, 145, 178, 0.08) !important; } /* Mobile sidebar - summer theme */ .mobile-sidebar .sidebar-header, .sidebar-header { background: var(--summer-gradient-sunset) !important; } .mobile-sidebar { background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 40%, #fff7ed 100%) !important; } .mobile-sidebar-header { background: linear-gradient(135deg, #0E7490 0%, #0891B2 50%, #06B6D4 100%) !important; } .mobile-close-btn { background: rgba(255,255,255,0.2) !important; color: white !important; border: 1px solid rgba(255,255,255,0.3) !important; } .mobile-close-btn:hover { background: rgba(255,255,255,0.35) !important; } .mobile-nav-item { border-bottom: 1px solid rgba(8,145,178,0.1) !important; } .mobile-nav-link { color: #134E4A !important; } .mobile-nav-link span i { color: #0891B2 !important; } .mobile-nav-link i.nav-arrow { color: #0891B2 !important; } .mobile-nav-link:hover { background: rgba(8,145,178,0.08) !important; color: #0E7490 !important; } .mobile-nav-item.active > .mobile-nav-link { background: rgba(8,145,178,0.1) !important; color: #0E7490 !important; } .mobile-nav-link.current-page { color: #0891B2 !important; background: linear-gradient(90deg, rgba(8,145,178,0.12) 0%, transparent 100%) !important; border-left: 3px solid #0891B2 !important; } .mobile-dropdown { background: rgba(240,253,250,0.8) !important; } .mobile-dropdown a { color: #134E4A !important; } .mobile-dropdown a:hover { background: rgba(8,145,178,0.08) !important; color: #0891B2 !important; } .mobile-sidebar-footer { background: linear-gradient(135deg, rgba(14,116,144,0.06) 0%, rgba(251,191,36,0.06) 100%) !important; border-top: 1px solid rgba(8,145,178,0.12) !important; } .mobile-sidebar-social a { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border-radius: 12px !important; } .mobile-sidebar-social a:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; transform: translateY(-2px) !important; } /* Trust Slider - clean minimal summer */ .trust-slider { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(8px) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; border-bottom: 1px solid rgba(8,145,178,0.1) !important; border-radius: 0 !important; } .trust-slider::before { background: linear-gradient(to right, rgba(255,255,255,0.9), transparent) !important; } .trust-slider::after { background: linear-gradient(to left, rgba(255,255,255,0.9), transparent) !important; } .trust-slider-item { border-right: 1px solid rgba(8,145,178,0.08) !important; color: #374151 !important; } .trust-slider-item span { color: #4B5563 !important; } .trust-slider-item strong { color: #0E7490 !important; } .trust-slider-item i { color: #0891B2 !important; } .trust-slider-item.security i { color: #059669 !important; } .trust-slider-item.payment i { color: #D97706 !important; } .trust-slider-item.delivery i { color: #0891B2 !important; } .trust-slider-item.guarantee i { color: #7C3AED !important; } .trust-slider-item.shipping i { color: #0891B2 !important; } .trust-slider-item.cash i { color: #059669 !important; } .trust-slider-item:hover { background: rgba(8,145,178,0.04) !important; } /* ========================================================================== 3. PRODUCT CARD SUMMER REDESIGN ========================================================================== */ /* Card base - Glass morphism cálido */ .product-card { background: var(--summer-gradient-card) !important; border-radius: 16px !important; border: 1px solid rgba(8, 145, 178, 0.08) !important; box-shadow: 0 4px 20px rgba(8, 145, 178, 0.06) !important; overflow: hidden !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; will-change: transform !important; } .product-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(8, 145, 178, 0.15) !important; border-color: rgba(6, 182, 212, 0.3) !important; } /* Image hover warm overlay - override the existing gradient */ .product-card .product-image-wrapper::after { background: linear-gradient(180deg, transparent 50%, rgba(8, 145, 178, 0.08) 100%) !important; } .product-card:hover .product-image-wrapper::after { opacity: 1 !important; } /* Event image hover warm overlay */ .event-card .event-image-wrapper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 145, 178, 0.08) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; } .event-card:hover .event-image-wrapper::after { opacity: 1; } /* Product badges - Summer pills */ .product-badge, .badge-popular, .badge-promo, .badge-new, .product-tag { border-radius: 20px !important; font-weight: 600 !important; font-size: 0.7rem !important; padding: 4px 12px !important; letter-spacing: 0.3px !important; } .badge-promo, .product-badge--promo { background: var(--summer-gradient-sunset) !important; color: white !important; } .badge-popular, .product-badge--popular { background: var(--summer-gradient-ocean) !important; color: white !important; } .badge-new, .product-badge--new { background: linear-gradient(135deg, #10B981, #34D399) !important; color: white !important; } /* Price styling */ .price-amount { color: var(--summer-ocean-dark) !important; font-weight: 800 !important; } .product-price-current, .price-current { color: var(--summer-ocean-dark) !important; font-weight: 800 !important; } .product-price-promo, .price-promo { background: linear-gradient(135deg, #F97316, #FB7185) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; } /* Add to cart button - Ocean gradient */ .btn-add-to-cart, .product-card .btn-primary, .add-to-cart-btn { background: var(--summer-gradient-ocean) !important; color: white !important; border: none !important; border-radius: 10px !important; font-weight: 600 !important; transition: all 0.3s ease !important; position: relative; overflow: hidden; } .btn-add-to-cart:hover, .product-card .btn-primary:hover, .add-to-cart-btn:hover { background: var(--summer-gradient-sunset) !important; transform: scale(1.02) !important; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3) !important; } /* Feature tags - Cyan pills */ .feature-item, .product-features .feature-tag, .product-tag-list .tag { background: rgba(8, 145, 178, 0.08) !important; color: var(--summer-ocean-dark) !important; border-radius: 16px !important; border: 1px solid rgba(8, 145, 178, 0.12) !important; padding: 3px 10px !important; } .feature-item i { color: var(--summer-ocean) !important; } /* Product badges by type */ .product-badge.basic { background: var(--summer-emerald) !important; color: white !important; border-radius: 20px !important; } .product-badge.premium { background: var(--summer-gradient-ocean) !important; color: white !important; border-radius: 20px !important; } .product-badge.deluxe { background: var(--summer-sunshine) !important; color: white !important; border-radius: 20px !important; } .product-badge.badge-pending { background: var(--summer-gradient-sunset) !important; color: white !important; border-radius: 20px !important; } /* Event badges by type */ .event-badge.basic { background: var(--summer-emerald) !important; color: white !important; border-radius: 20px !important; } .event-badge.premium { background: var(--summer-gradient-ocean) !important; color: white !important; border-radius: 20px !important; } .event-badge.deluxe { background: var(--summer-sunshine) !important; color: white !important; border-radius: 20px !important; } /* ========================================================================== 4. EVENT CARD SUMMER REDESIGN ========================================================================== */ /* Event card base */ .event-card { background: var(--summer-gradient-card) !important; border-radius: 16px !important; border: 1px solid rgba(8, 145, 178, 0.08) !important; box-shadow: 0 4px 20px rgba(8, 145, 178, 0.06) !important; overflow: hidden !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; will-change: transform !important; } .event-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(8, 145, 178, 0.15) !important; border-color: rgba(6, 182, 212, 0.3) !important; } /* Category badges temáticos */ .event-category-badge[data-category="basico"], .event-badge-basico, .category-badge.basico { background: var(--summer-gradient-ocean) !important; color: white !important; border-radius: 20px !important; } .event-category-badge[data-category="premium"], .event-badge-premium, .category-badge.premium { background: linear-gradient(135deg, #F59E0B, #FBBF24) !important; color: #1C1C1E !important; border-radius: 20px !important; } .event-category-badge[data-category="deluxe"], .event-badge-deluxe, .category-badge.deluxe { background: var(--summer-gradient-sunset) !important; color: white !important; border-radius: 20px !important; } /* Urgency banner - Arena cálida */ .event-urgency-banner, .urgency-banner { background: linear-gradient(90deg, #FEF3C7, #FFEDD5) !important; color: #92400E !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; } /* Event features pills */ .event-features .feature, .event-feature-tag { background: rgba(8, 145, 178, 0.08) !important; color: var(--summer-ocean-dark) !important; border-radius: 16px !important; border: 1px solid rgba(8, 145, 178, 0.12) !important; padding: 4px 12px !important; } /* Discount ribbon */ .event-discount-ribbon, .discount-ribbon { background: var(--summer-coral) !important; color: white !important; } /* Fix promo badge clipping - event cards have overflow:hidden */ .event-card { overflow: visible !important; } .event-card .event-link { overflow: hidden !important; border-radius: 16px !important; display: block !important; } .event-promo-badge { top: 8px !important; z-index: 20 !important; } /* Hide redundant promo-label blue square on product cards */ .product-card .promo-label { display: none !important; } /* Event CTA button */ .btn-add-event, .event-card .btn-primary, .btn-lo-quiero { background: var(--summer-gradient-ocean) !important; color: white !important; border: none !important; border-radius: 10px !important; font-weight: 600 !important; transition: all 0.3s ease !important; } .btn-add-event:hover, .event-card .btn-primary:hover, .btn-lo-quiero:hover { background: var(--summer-gradient-sunset) !important; transform: scale(1.02) !important; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3) !important; } /* Event promo card overrides */ .event-card.has-promo { border: 2px solid rgba(8, 145, 178, 0.3) !important; box-shadow: 0 4px 20px rgba(8, 145, 178, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } .event-card.has-promo:hover { border-color: rgba(6, 182, 212, 0.5) !important; box-shadow: 0 12px 30px rgba(8, 145, 178, 0.2) !important; } .event-card.promo-popular { border-color: rgba(245, 158, 11, 0.4) !important; } .event-card.promo-popular:hover { border-color: rgba(245, 158, 11, 0.6) !important; box-shadow: 0 12px 30px rgba(245, 158, 11, 0.15) !important; } .event-card.promo-premium { border-color: rgba(251, 113, 133, 0.4) !important; } .event-card.promo-premium:hover { border-color: rgba(251, 113, 133, 0.6) !important; box-shadow: 0 12px 30px rgba(251, 113, 133, 0.15) !important; } /* Promo button overrides */ .btn-add-event.promo-btn { background: var(--summer-gradient-ocean) !important; box-shadow: 0 2px 10px rgba(8, 145, 178, 0.4) !important; } .btn-add-event.promo-btn:hover { background: var(--summer-gradient-sunset) !important; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4) !important; } .btn-add-event.promo-popular { background: linear-gradient(135deg, #F59E0B, #D97706) !important; box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important; } .btn-add-event.promo-popular:hover { background: var(--summer-gradient-sunset) !important; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4) !important; } /* ========================================================================== 5. CART SUMMER REDESIGN ========================================================================== */ /* Cart panel header */ .cart-modal-header { background: var(--summer-gradient-ocean) !important; border-bottom: 2px solid rgba(6, 182, 212, 0.3) !important; } .cart-close-btn:hover { background: rgba(255, 255, 255, 0.35) !important; } /* Cart items */ .cart-item { background: linear-gradient(145deg, #ffffff, rgba(254, 243, 199, 0.15)) !important; border-radius: 14px !important; border: 1px solid rgba(8, 145, 178, 0.08) !important; transition: all 0.3s ease !important; } .cart-item:hover { border-color: rgba(8, 145, 178, 0.2) !important; box-shadow: 0 4px 16px rgba(8, 145, 178, 0.1) !important; } /* Cart item price */ .cart-item-price { color: var(--summer-ocean) !important; } /* Quantity display */ .quantity-display { background: linear-gradient(135deg, #ECFEFF, #E0F2FE) !important; border-radius: 10px !important; } /* Remove button */ .remove-btn { background: rgba(251, 113, 133, 0.1) !important; color: var(--summer-coral) !important; } .remove-btn:hover { background: var(--summer-coral) !important; color: white !important; } /* Item type badge */ .item-type-badge { background: var(--summer-gradient-sunset) !important; border-radius: 6px !important; } .item-type-badge.sticker { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } /* Cart item subtotal */ .cart-item-subtotal .subtotal-value { color: var(--summer-ocean-dark) !important; font-weight: 800 !important; } /* Browse buttons */ .btn-browse { background: var(--summer-gradient-ocean) !important; box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3) !important; } .btn-browse:hover { box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4) !important; } .btn-browse.secondary { background: linear-gradient(135deg, #10B981, #34D399) !important; } /* Cart empty icon */ .cart-empty i { color: rgba(8, 145, 178, 0.3) !important; } /* Cart footer/total section */ .cart-footer, .cart-total-section, .cart-summary { background: var(--summer-sand) !important; border-radius: 16px !important; padding: 16px !important; } .cart-total-price, .total-amount { color: var(--summer-ocean-dark) !important; font-weight: 800 !important; } /* Checkout button - Sunset CTA */ .btn-checkout, .btn-finalizar, .cart-checkout-btn { background: var(--summer-gradient-sunset) !important; color: white !important; border: none !important; border-radius: 12px !important; font-weight: 700 !important; padding: 14px 24px !important; font-size: 1rem !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3) !important; } .btn-checkout:hover, .btn-finalizar:hover, .cart-checkout-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4) !important; } /* ========================================================================== 6. FOOTER SUMMER ENHANCEMENTS ========================================================================== */ /* Footer wave decoration - SVG via CSS */ footer { position: relative !important; } footer::before { background: linear-gradient(90deg, transparent 0%, var(--summer-sunset) 25%, var(--summer-coral) 50%, var(--summer-sunset) 75%, transparent 100% ) !important; height: 3px !important; } /* Social icons hover - Coral glow */ footer .social-link:hover, .footer-social a:hover { background: rgba(251, 113, 133, 0.3) !important; color: var(--summer-coral) !important; transform: translateY(-3px) !important; box-shadow: 0 6px 20px rgba(251, 113, 133, 0.25) !important; } /* Footer links hover */ footer a:hover { color: var(--summer-sand) !important; } /* ========================================================================== 7. HOMEPAGE SUMMER ENHANCEMENTS ========================================================================== */ /* Hero section background - summer beach image */ .hero-section, .index-hero { background: url('Temporada/verano fondo.jpg') center/cover no-repeat !important; position: relative !important; } /* Hero overlay for text readability */ .hero-section::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(254,243,199,0.5) 40%, rgba(255,255,255,0.6) 100%) !important; z-index: 0 !important; } .hero-section > * { position: relative !important; z-index: 1 !important; } .hero-section::after { background: none !important; } /* Hero badge */ .hero-badge { background: var(--summer-sand) !important; color: var(--summer-ocean-dark) !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; } /* Gradient text - Ocean */ .gradient-text { background: linear-gradient(135deg, #0891B2 0%, #06B6D4 60%, #0EA5E9 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Stats cards - Alternating warm tints */ .stat-card:nth-child(odd) { background: rgba(8, 145, 178, 0.04) !important; border: 1px solid rgba(8, 145, 178, 0.08) !important; } .stat-card:nth-child(even) { background: rgba(254, 243, 199, 0.3) !important; border: 1px solid rgba(245, 158, 11, 0.1) !important; } /* Section badges */ .section-badge { background: var(--summer-sand) !important; color: var(--summer-ocean-dark) !important; border: 1px solid rgba(245, 158, 11, 0.15) !important; } /* About section - summer wood texture background */ .about-section { background: url('Temporada/verano playa.jpg') center/cover no-repeat !important; position: relative !important; } .about-section::before { content: '' !important; position: absolute !important; inset: 0 !important; background: rgba(255,255,255,0.88) !important; z-index: 0 !important; } .about-section > * { position: relative !important; z-index: 1 !important; } /* Client badges */ .client-badge { background: rgba(8, 145, 178, 0.08) !important; border: 1px solid rgba(8, 145, 178, 0.15) !important; color: var(--summer-ocean-dark) !important; } .client-badge i { color: var(--summer-emerald) !important; } /* Image badge */ .image-badge { background: rgba(8, 145, 178, 0.9) !important; backdrop-filter: blur(10px) !important; } .image-badge i { color: var(--summer-sunshine) !important; } /* Mission/Vision cards */ .mission-card, .vision-card { border: 1px solid rgba(8, 145, 178, 0.1) !important; transition: all 0.3s ease !important; } .mission-card:hover, .vision-card:hover { border-color: rgba(6, 182, 212, 0.25) !important; box-shadow: 0 12px 30px rgba(8, 145, 178, 0.12) !important; transform: translateY(-4px) !important; } /* Mission/Vision feature icons */ .mission-features i { color: var(--summer-emerald) !important; } .vision-features i { color: var(--summer-sunshine) !important; } /* Timeline */ .timeline-item { border: 1px solid rgba(8, 145, 178, 0.1) !important; } .timeline-item:hover { border-color: rgba(6, 182, 212, 0.2) !important; box-shadow: 0 12px 24px rgba(8, 145, 178, 0.1) !important; } .timeline-year { background: rgba(8, 145, 178, 0.1) !important; color: var(--summer-ocean-dark) !important; } /* CTA section - Summer beach background */ .cta-section { background: url('Temporada/verano playa.jpg') center/cover no-repeat !important; position: relative !important; color: white !important; } .cta-section::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(14,116,144,0.5) 0%, rgba(8,145,178,0.45) 50%, rgba(6,182,212,0.4) 100%) !important; z-index: 0 !important; } .cta-section > * { position: relative !important; z-index: 1 !important; } .cta-section .cta-content h2 { text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important; } .cta-section .cta-content p { text-shadow: 0 1px 6px rgba(0,0,0,0.3) !important; } .btn-cta.primary { color: var(--summer-ocean-dark) !important; } .btn-cta.primary:hover { background: var(--summer-sand) !important; } /* Testimonial cards */ .testimonial-card { background: var(--summer-gradient-card) !important; border: 1px solid rgba(8, 145, 178, 0.06) !important; border-radius: 16px !important; } .testimonial-card:hover { box-shadow: 0 12px 24px rgba(8, 145, 178, 0.1) !important; } /* Stars - Golden */ .star-rating .fa-star, .rating-star { color: var(--summer-sunshine) !important; } /* ========================================================================== 8. PRODUCTS PAGE SUMMER ENHANCEMENTS ========================================================================== */ /* Products hero - Ocean gradient */ .products-hero { background: linear-gradient(135deg, #0E7490 0%, #0891B2 50%, #06B6D4 100%) !important; color: white !important; } /* Products grid background */ .products-main { background: radial-gradient(ellipse at 20% 50%, rgba(8, 145, 178, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(249, 115, 22, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(251, 113, 133, 0.03) 0%, transparent 50%), #FAFAF5 !important; } /* Sidebar - Warm tint */ .products-sidebar { background: rgba(255, 255, 255, 0.9) !important; border-right: 1px solid rgba(8, 145, 178, 0.08) !important; } .products-sidebar .sidebar-section, .events-sidebar .sidebar-section { border: 1px solid rgba(8, 145, 178, 0.08) !important; } .products-sidebar .sidebar-title i, .events-sidebar .sidebar-title i { color: var(--summer-ocean) !important; } /* Product Search Section - summer theme */ .product-search-section { border-color: rgba(8,145,178,0.2) !important; background: rgba(255,255,255,0.95) !important; } .search-section-content h2 i { color: #0891B2 !important; } .search-product-card:hover .card-inner { border-color: #0891B2 !important; background: rgba(8,145,178,0.04) !important; } .search-product-card input:checked + .card-inner, .search-product-card.selected .card-inner { border-color: #0891B2 !important; background: rgba(8,145,178,0.08) !important; color: #0E7490 !important; box-shadow: 0 2px 8px rgba(8,145,178,0.2) !important; } .search-product-card input:checked + .card-inner i, .search-product-card.selected .card-inner i { color: #0891B2 !important; } .search-text-area textarea:focus { border-color: #0891B2 !important; } /* Products CTA section */ /* Products & Events CTA sections - strong summer gradient */ .products-cta, .events-cta { background: linear-gradient(135deg, #0E7490 0%, #0891B2 40%, #06B6D4 70%, #F97316 100%) !important; border: none !important; box-shadow: 0 8px 32px rgba(14,116,144,0.3) !important; position: relative !important; overflow: hidden !important; } .products-cta::before, .events-cta::before { content: '' !important; position: absolute !important; inset: 0 !important; background: url('Temporada/verano fondo 2.jpg') center/cover no-repeat !important; opacity: 0.15 !important; z-index: 0 !important; } .products-cta .cta-content, .events-cta .cta-content { position: relative !important; z-index: 1 !important; } .products-cta .cta-content h2, .events-cta .cta-content h2 { color: white !important; text-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } .products-cta .cta-content p, .events-cta .cta-content p { color: rgba(255,255,255,0.9) !important; } .products-cta .cta-btn.primary, .events-cta .cta-btn.primary { background: white !important; color: #0E7490 !important; font-weight: 700 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; } .products-cta .cta-btn.primary:hover, .events-cta .cta-btn.primary:hover { background: #FEF3C7 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important; } .products-cta .cta-btn.secondary, .events-cta .cta-btn.secondary { border-color: white !important; color: white !important; } .products-cta .cta-btn.secondary:hover, .events-cta .cta-btn.secondary:hover { background: rgba(255,255,255,0.15) !important; transform: translateY(-2px) !important; } /* Filter active state */ .filter-btn.active, .category-filter.active, .sidebar-filter.active { background: var(--summer-ocean) !important; color: white !important; border-color: var(--summer-ocean) !important; } /* View toggle */ .view-toggle .active, .grid-toggle .active { background: var(--summer-ocean) !important; color: white !important; } /* ========================================================================== 9. EVENTS PAGE SUMMER ENHANCEMENTS ========================================================================== */ /* Events hero */ .events-hero { background: linear-gradient(135deg, #0E7490 0%, #0891B2 50%, #06B6D4 100%) !important; color: white !important; } /* Events grid background */ .events-main { background: radial-gradient(ellipse at top left, #ECFEFF 0%, #FFFBEB 40%, #FFF7ED 100%) !important; } /* Events sidebar */ .events-sidebar, .events-filters { background: rgba(254, 243, 199, 0.15) !important; border: 1px solid rgba(8, 145, 178, 0.06) !important; border-radius: 16px !important; } /* Event filter pills - Themed borders */ .event-filter[data-category="basico"], .filter-basico { border-color: var(--summer-ocean) !important; color: var(--summer-ocean-dark) !important; } .event-filter[data-category="premium"], .filter-premium { border-color: var(--summer-sunshine) !important; color: #92400E !important; } .event-filter[data-category="deluxe"], .filter-deluxe { border-color: var(--summer-coral) !important; color: var(--summer-coral-dark) !important; } /* ========================================================================== 10. GLOBAL SUMMER MICRO-INTERACTIONS ========================================================================== */ /* Warm glow on button hover (global) */ button:hover, .btn:hover, a.btn:hover { box-shadow: 0 4px 15px rgba(8, 145, 178, 0.15); } /* Links - Ocean color */ a:not([class]) { color: var(--summer-ocean); transition: color 0.2s ease; } a:not([class]):hover { color: var(--summer-ocean-dark); } /* Selection color */ ::selection { background: rgba(8, 145, 178, 0.2); color: inherit; } /* Scrollbar summer theme */ ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--summer-ocean), var(--summer-ocean-light)); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--summer-ocean-dark), var(--summer-ocean)); } /* Focus rings - Teal */ *:focus-visible { outline: 2px solid var(--summer-ocean) !important; outline-offset: 2px !important; } /* WhatsApp floating button - Warm pulse */ .whatsapp-float .pulse-ring, .whatsapp-btn::after { border-color: rgba(37, 211, 102, 0.4) !important; } /* ========================================================================== 11. SUMMER SEASONAL BANNER (optional - add to footer HTML) ========================================================================== */ .summer-banner { background: linear-gradient(135deg, var(--summer-sand) 0%, #FFEDD5 100%); color: #92400E; padding: 16px 24px; border-radius: 12px; text-align: center; margin-bottom: 24px; border: 1px solid rgba(245, 158, 11, 0.2); font-weight: 600; } .summer-banner a { color: var(--summer-ocean-dark) !important; font-weight: 700; text-decoration: underline; } .summer-banner i { color: var(--summer-sunset); margin: 0 4px; } /* ========================================================================== 12. WAVE DECORATION (for footer top transition) ========================================================================== */ .footer-wave { position: relative; width: 100%; height: 60px; overflow: hidden; margin-bottom: -1px; display: block; line-height: 0; background: transparent; } .footer-wave svg { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } .footer-wave path { fill: #134E4A; } /* Remove footer margin-top when wave is present */ .footer-wave + footer, .footer-wave ~ footer { margin-top: 0 !important; } /* ========================================================================== 13. CART CONFIG MODAL SUMMER ========================================================================== */ .config-modal-header, .cart-config-header { background: var(--summer-gradient-ocean) !important; color: white !important; } .config-modal .btn-confirm, .cart-config-confirm { background: var(--summer-gradient-ocean) !important; color: white !important; border-radius: 10px !important; } .config-modal .btn-confirm:hover, .cart-config-confirm:hover { background: var(--summer-gradient-sunset) !important; } /* Event summary modal */ .event-summary-content { border: 2px solid rgba(8, 145, 178, 0.15) !important; border-radius: 16px !important; } /* ========================================================================== 14. HEADER SUMMER SHIMMER & TOP BAR ACCENT ========================================================================== */ /* Animated shimmer line inside the nav bar (no overflow issues) */ .main-nav::before { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient( 90deg, transparent 0%, rgba(56, 189, 248, 0.6) 15%, rgba(254, 243, 199, 0.8) 30%, rgba(249, 115, 22, 0.5) 45%, rgba(251, 113, 133, 0.6) 55%, rgba(254, 243, 199, 0.8) 70%, rgba(56, 189, 248, 0.6) 85%, transparent 100% ) !important; background-size: 200% 100% !important; animation: summer-shimmer 4s ease-in-out infinite !important; pointer-events: none !important; z-index: 10 !important; } @keyframes summer-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Top bar subtle accent line */ .top-bar::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 30%, rgba(254, 243, 199, 0.4) 50%, rgba(255, 255, 255, 0.3) 70%, transparent 100% ) !important; pointer-events: none !important; } /* ========================================================================== 15. RESPONSIVE ADJUSTMENTS ========================================================================== */ /* Footer: ALWAYS 2 columns, even on smallest screens */ .footer-container { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 16px !important; } /* Summer banner container stays full width (has .summer-banner child) */ .footer-container:has(.summer-banner) { grid-template-columns: 1fr !important; } @media (min-width: 992px) { .footer-container { grid-template-columns: repeat(4, 1fr) !important; gap: 24px 40px !important; } } @media (max-width: 479px) { .footer-container { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 12px !important; } .footer-column h3 { font-size: 12px !important; letter-spacing: 1px !important; } .footer-column p, .footer-column ul li a { font-size: 11px !important; } .social-icons { gap: 8px !important; } .social-icons a img { width: 32px !important; height: 32px !important; } /* Summer banner compact on small screens */ .summer-banner { font-size: 13px !important; padding: 12px 14px !important; } } @media (max-width: 768px) { .product-card:hover, .event-card:hover { transform: translateY(-4px) !important; } .footer-wave { height: 40px; } } /* ========================================================================== 16. SCROLL FIX - Smooth scroll for all containers ========================================================================== */ .products-layout, .events-layout { -webkit-overflow-scrolling: touch; } /* ========================================================================== 17. PROMOTIONAL BANNERS (homepage - max.com inspired, full-width) ========================================================================== */ .promo-banners-section { padding: 2rem 3% 1rem; width: 100%; } /* Row layouts */ .promo-row { display: grid; gap: 12px; margin-bottom: 12px; } .promo-row--hero { grid-template-columns: 1.2fr 0.8fr; grid-template-rows: 1fr 1fr; min-height: 420px; } .promo-row--triple { grid-template-columns: repeat(3, 1fr); min-height: 200px; } /* Large banner spans 2 rows */ .promo-row--hero .promo-banner--large { grid-row: 1 / 3; } /* Banner base */ .promo-banner { position: relative; border-radius: 12px; overflow: hidden; display: block; text-decoration: none; color: white; } .promo-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .promo-banner:hover img { transform: scale(1.05); } /* Overlay gradient */ .promo-banner__overlay { position: relative; z-index: 2; min-height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, transparent 70%); padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; } .promo-banner:hover .promo-banner__overlay { background: linear-gradient(to top, rgba(8,145,178,0.75) 0%, rgba(0,0,0,0.25) 45%, transparent 70%); } /* Tag */ .promo-banner__tag { display: inline-block; background: var(--summer-gradient-sunset); color: white; font-size: 0.65rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; } /* Discount badge */ .promo-banner__discount { display: inline-block; background: #E11D48; color: white; font-size: 0.75rem; font-weight: 800; padding: 4px 12px; border-radius: 6px; width: fit-content; } /* Title */ .promo-banner__title { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 800; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.4); line-height: 1.2; } .promo-banner--large .promo-banner__title { font-size: 1.5rem; } /* Subtitle */ .promo-banner__subtitle { font-size: 0.75rem; margin: 0; opacity: 0.9; } /* Price */ .promo-banner__price { display: flex; align-items: baseline; gap: 8px; } .promo-banner__old-price { font-size: 0.85rem; text-decoration: line-through; opacity: 0.7; } .promo-banner__new-price { font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,0.3); } .promo-banner__new-price small { font-size: 0.6em; font-weight: 600; } .promo-banner--large .promo-banner__new-price { font-size: 2rem; } /* CTA */ .promo-banner__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); padding: 7px 14px; border-radius: 8px; width: fit-content; margin-top: 4px; transition: background 0.3s ease; } .promo-banner:hover .promo-banner__cta { background: var(--summer-ocean); } /* Responsive banners */ @media (max-width: 900px) { .promo-row--hero { grid-template-columns: 1fr 1fr; min-height: 320px; } .promo-row--triple { min-height: 160px; } } @media (max-width: 640px) { .promo-banners-section { padding: 1.5rem 2% 0.5rem; } /* Force 2 columns on phones */ .promo-row--hero { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; min-height: auto; gap: 6px !important; } .promo-row--hero .promo-banner--large { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 180px; } .promo-row--hero .promo-banner--medium { min-height: 140px; } .promo-row--triple { grid-template-columns: 1fr 1fr !important; min-height: auto; gap: 6px !important; } .promo-row--triple .promo-banner { min-height: 120px; } /* Last banner in triple spans full width */ .promo-row--triple .promo-banner:last-child { grid-column: 1 / -1 !important; min-height: 130px; } .promo-banner__title { font-size: 0.85rem; } .promo-banner--large .promo-banner__title { font-size: 1rem; } .promo-banner__new-price { font-size: 1.1rem; } } @media (min-width: 641px) and (max-width: 900px) { .promo-row--triple { grid-template-columns: 1fr 1fr; } .promo-row--triple .promo-banner:last-child { grid-column: 1 / -1; } } /* ========================================================================== 18. IMPROVED HOMEPAGE PRODUCT CARDS ========================================================================== */ /* Homepage product cards - better alignment */ .products-section .products-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; padding: 0 5% !important; } .products-section .product-card { display: flex !important; flex-direction: column !important; height: 100% !important; } .products-section .product-card .product-content { flex: 1 !important; display: flex !important; flex-direction: column !important; padding: 16px !important; } .products-section .product-card .product-actions { margin-top: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding-top: 12px !important; border-top: 1px solid rgba(8, 145, 178, 0.08) !important; } .products-section .product-card .product-image-wrapper { aspect-ratio: 4/3 !important; overflow: hidden !important; } .products-section .product-card .product-image-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Product price styling */ .product-price { font-size: 0.85rem !important; color: var(--summer-ocean-dark) !important; } .product-price strong { font-size: 1.1rem !important; font-weight: 800 !important; color: var(--summer-ocean) !important; } /* View all button */ .btn-view-all { background: var(--summer-gradient-ocean) !important; color: white !important; border-radius: 12px !important; padding: 14px 28px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.3s ease !important; } .btn-view-all:hover { background: var(--summer-gradient-sunset) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3) !important; } .view-all-container { text-align: center !important; margin-top: 2rem !important; } /* Product overlay on homepage */ .product-overlay { position: absolute !important; inset: 0 !important; background: rgba(8, 145, 178, 0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } .product-card:hover .product-overlay { opacity: 1 !important; } .view-btn { background: white !important; color: var(--summer-ocean-dark) !important; padding: 10px 20px !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 0.85rem !important; } @media (max-width: 1024px) { .products-section .products-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .products-section .products-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 0 2% !important; gap: 8px !important; } } /* ========================================================================== 19. FULL-WIDTH LAYOUT - Use all horizontal space properly ========================================================================== */ /* Homepage main container - use full width */ .index-main { max-width: 100% !important; padding: 0 !important; } /* All homepage sections - wider with consistent padding */ .about-section, .mission-vision-section, .history-section, .products-section, .testimonials-section, .cta-section { max-width: 100% !important; padding-left: 3% !important; padding-right: 3% !important; } /* Hero full width */ .hero-section { padding-left: 3% !important; padding-right: 3% !important; } /* Section headers max width for readability */ .section-header { max-width: 700px; margin-left: auto !important; margin-right: auto !important; } /* About section - wider layout */ .about-content { max-width: 100% !important; } /* About image - proper fit */ .about-image .image-wrapper { max-height: 500px !important; } .about-image .image-wrapper img { object-fit: cover !important; max-height: 500px !important; } /* Products grid on homepage - wider */ .products-section .products-grid { padding: 0 !important; } /* CTA section full width */ .cta-section { border-radius: 0 !important; } /* Productos page - use full width for content area */ .products-content { padding: 1rem 1.2rem !important; } /* Eventos page - use full width for content area */ .events-content { padding: 1rem 1.2rem !important; } /* Products grid on productos page - use available space */ body:has(.products-layout) .products-grid { gap: 12px !important; } /* Events grid - use available space */ body:has(.events-layout) .events-grid { gap: 12px !important; } /* ---- Responsive full width ---- */ @media (max-width: 768px) { .about-section, .mission-vision-section, .history-section, .products-section, .testimonials-section, .cta-section { padding-left: 4% !important; padding-right: 4% !important; } .products-content, .events-content { padding: 0.8rem !important; } } @media (min-width: 1600px) { .about-section, .mission-vision-section, .history-section, .products-section, .testimonials-section, .cta-section, .promo-banners-section { padding-left: 4% !important; padding-right: 4% !important; } } /* ========================================================================== 20. SUMMER BACKGROUNDS - Individual product/event pages ========================================================================== */ /* Individual product pages - subtle summer background */ .main-container { background: url('Temporada/verano playa.jpg') top center/cover no-repeat fixed !important; position: relative !important; } .main-container::before { content: '' !important; position: fixed !important; inset: 0 !important; background: linear-gradient(180deg, rgba(236,254,255,0.88) 0%, rgba(255,255,255,0.92) 30%, rgba(254,243,199,0.15) 100%) !important; z-index: 0 !important; pointer-events: none !important; } .main-container > * { position: relative !important; z-index: 1 !important; } /* Product container inside main-container - no extra card, fill the space */ .product-container { background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* Promo banners section - summer image accent strip */ .promo-banners-section .section-header { position: relative !important; } /* Products/Events pages sidebar background */ .products-sidebar, .events-sidebar { background: url('Temporada/verano fondo 2.jpg') center/cover no-repeat !important; position: sticky !important; top: 145px !important; align-self: flex-start !important; height: fit-content !important; max-height: calc(100vh - 150px) !important; overflow: visible !important; } .products-sidebar::before, .events-sidebar::before { content: '' !important; position: absolute !important; inset: 0 !important; background: rgba(255,255,255,0.9) !important; z-index: 0 !important; } .products-sidebar > *, .events-sidebar > * { position: relative !important; z-index: 1 !important; } /* Footer - summer beach texture under gradient */ footer { background: url('Temporada/verano fondo 2.jpg') center/cover no-repeat !important; position: relative !important; } footer::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(135deg, rgba(19,78,74,0.97) 0%, rgba(14,116,144,0.94) 50%, rgba(19,78,74,0.97) 100%) !important; background-image: linear-gradient(135deg, rgba(19,78,74,0.97) 0%, rgba(14,116,144,0.94) 50%, rgba(19,78,74,0.97) 100%) !important; z-index: 1 !important; opacity: 1 !important; animation: none !important; border-top: none !important; border-image: none !important; } footer::after { display: none !important; } footer > * { position: relative !important; z-index: 2 !important; } /* Testimonials section - light summer bg */ .testimonials-section { background: url('Temporada/verano fondo.jpg') center/cover no-repeat !important; position: relative !important; } .testimonials-section::before { content: '' !important; position: absolute !important; inset: 0 !important; background: rgba(255,255,255,0.93) !important; z-index: 0 !important; } .testimonials-section > * { position: relative !important; z-index: 1 !important; } /* ========================================================================== 21. FORCE 2 COLUMNS ON ALL PHONES - productos, eventos, homepage ========================================================================== */ /* Homepage product cards - ALWAYS 2 columns on mobile */ @media (max-width: 767px) { .products-section .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* Compact homepage product cards on mobile */ .products-section .product-card .product-image-wrapper { aspect-ratio: 1/1 !important; } .products-section .product-card .product-content { padding: 8px !important; } .products-section .product-card .product-content h3 { font-size: 0.75rem !important; line-height: 1.2 !important; margin: 0 0 4px !important; } .products-section .product-card .product-price { font-size: 0.7rem !important; } .products-section .product-card .product-price strong { font-size: 0.9rem !important; } .products-section .product-card .product-actions { padding-top: 6px !important; gap: 4px !important; } /* Productos page - always 2 cols */ .products-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Eventos page - always 2 cols */ .events-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Even on smallest phones (320px) - still 2 columns */ @media (max-width: 359px) { .products-section .products-grid, .products-grid, .events-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; } .products-section .product-card .product-content h3 { font-size: 0.65rem !important; } .promo-row--hero, .promo-row--triple { gap: 4px !important; } .promo-banner__title { font-size: 0.75rem !important; } .promo-banner__subtitle, .promo-banner__cta { font-size: 0.65rem !important; } .promo-banner__new-price { font-size: 0.95rem !important; } } /* ========================================================================== 22. SUMMER BACKGROUNDS - Products & Events pages ========================================================================== */ /* Productos page hero */ .products-hero { background: url('Temporada/verano fondo.jpg') center/cover no-repeat !important; position: relative !important; } .products-hero::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(8,145,178,0.85) 0%, rgba(14,116,144,0.8) 50%, rgba(6,182,212,0.75) 100%) !important; z-index: 0 !important; border-radius: inherit !important; } .products-hero > * { position: relative !important; z-index: 1 !important; } .products-hero h1, .products-hero p { color: white !important; text-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; } /* Eventos page hero */ .events-hero { background: url('Temporada/verano playa.jpg') center/cover no-repeat !important; position: relative !important; } .events-hero::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(8,145,178,0.85) 0%, rgba(249,115,22,0.6) 100%) !important; z-index: 0 !important; border-radius: inherit !important; } .events-hero > * { position: relative !important; z-index: 1 !important; } .events-hero h1, .events-hero p { color: white !important; text-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; } /* Products/Events pages overall layout background + sticky sidebar scroll */ .products-layout, .events-layout { background: url('Temporada/verano fondo 2.jpg') top center/cover no-repeat fixed !important; height: auto !important; overflow: visible !important; min-height: auto !important; } .products-layout::before, .events-layout::before { content: '' !important; position: fixed !important; inset: 0 !important; background: rgba(245,250,252,0.93) !important; z-index: 0 !important; pointer-events: none !important; } .products-layout > *:not(.products-sidebar), .events-layout > *:not(.events-sidebar) { position: relative !important; z-index: 1 !important; } .products-sidebar, .events-sidebar { z-index: 2 !important; } /* Product cards - frosted glass on summer bg */ .products-layout .product-card, .events-layout .event-card { background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(4px) !important; } /* All page main containers - summer background */ /* yevento pages use .main-container (already handled above) */ /* bmodificacion uses .modification-main */ /* galeria uses .gallery-main */ /* contacto uses .contact-page */ /* blog uses .blog-section */ /* personalizar uses .personalizar-section */ .modification-main, .gallery-main, .contact-page, .blog-section, .personalizar-section, .privacy-main, .terms-content, .legal-main, #maintenance-services, .main-content, .products-main, .events-main { background: url('Temporada/verano fondo.jpg') top center/cover no-repeat fixed !important; position: relative !important; } .modification-main::before, .gallery-main::before, .contact-page::before, .blog-section::before, .personalizar-section::before, .privacy-main::before, .terms-content::before, .legal-main::before, #maintenance-services::before, .main-content::before, .products-main::before, .events-main::before { content: '' !important; position: fixed !important; inset: 0 !important; background: rgba(255,255,255,0.93) !important; z-index: 0 !important; pointer-events: none !important; } .modification-main > *, .gallery-main > *:not(.filter-section), .contact-page > *, .blog-section > *, .personalizar-section > *, .privacy-main > *, .terms-content > *, .legal-main > *, #maintenance-services > *, .main-content > *, .products-main > *, .events-main > * { position: relative !important; z-index: 1 !important; } .gallery-main > .filter-section { position: sticky !important; z-index: 1020 !important; } /* Frosted glass cards on summer bg pages */ .event-detail-card, .combo-details, .event-info-card, .modification-card, .service-card, .contact-form-container, .blog-card { background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(6px) !important; border: 1px solid rgba(8,145,178,0.08) !important; } /* ========================================================================== 23. INDIVIDUAL PRODUCT/EVENT PAGES - Layout Optimization Sticky gallery, better horizontal space usage, reduced white space ========================================================================== */ /* --- Desktop: Sticky gallery + wider layout --- */ @media (min-width: 992px) { .main-container { width: 94vw !important; max-width: 1800px !important; padding: 2.5rem clamp(2rem, 3vw, 4rem) !important; } .product-container { grid-template-columns: 1fr 1.2fr !important; gap: 2.5rem !important; align-items: start !important; } /* Sticky gallery - follows user while scrolling */ .product-gallery { position: sticky !important; top: 160px !important; align-self: start !important; } /* Main image bigger */ .product-gallery .main-image { border-radius: 16px !important; box-shadow: 0 8px 32px rgba(8,145,178,0.12) !important; border: 1px solid rgba(8,145,178,0.1) !important; } .product-gallery .main-image:hover { box-shadow: 0 12px 40px rgba(8,145,178,0.2) !important; border-color: rgba(8,145,178,0.25) !important; } /* Thumbnails row */ .product-gallery .thumbnail-gallery { display: flex !important; gap: 0.75rem !important; } .product-gallery .thumbnail { border-radius: 10px !important; border: 2px solid transparent !important; transition: all 0.3s ease !important; cursor: pointer !important; } .product-gallery .thumbnail:hover, .product-gallery .thumbnail.active { border-color: var(--summer-ocean) !important; box-shadow: 0 4px 12px rgba(8,145,178,0.2) !important; } /* Product details - styled sections */ .product-details { gap: 1.5rem !important; } .product-details h1 { background: linear-gradient(135deg, #0E7490, #0891B2, #06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Specs, pricing, payment as styled cards */ .product-details > .specifications, .product-details > .pricing, .product-details > .product-action-buttons, .product-details > .payment-options { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(8px) !important; border-radius: 14px !important; padding: 1.5rem !important; border: 1px solid rgba(8,145,178,0.08) !important; box-shadow: 0 2px 12px rgba(8,145,178,0.06) !important; } .product-details > .specifications:hover, .product-details > .pricing:hover { border-color: rgba(8,145,178,0.15) !important; box-shadow: 0 4px 20px rgba(8,145,178,0.1) !important; } /* Availability badge */ .product-details .availability { display: inline-block !important; background: linear-gradient(135deg, #10B981, #34D399) !important; color: white !important; padding: 0.35rem 1rem !important; border-radius: 20px !important; font-size: 0.85rem !important; font-weight: 600 !important; width: fit-content !important; } /* Price styling */ .product-details .brand { font-size: 1.6rem !important; font-weight: 800 !important; color: #0E7490 !important; } .product-details .price { color: var(--summer-ocean-dark) !important; font-weight: 800 !important; font-size: 1.4rem !important; } /* Action buttons - full width, vibrant */ .action-buttons-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; } .btn-action.btn-add-to-cart { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border: none !important; color: white !important; padding: 0.9rem 1.5rem !important; border-radius: 12px !important; font-weight: 700 !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(8,145,178,0.3) !important; } .btn-action.btn-add-to-cart:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(8,145,178,0.4) !important; } .btn-action.btn-whatsapp-quote { background: linear-gradient(135deg, #10B981, #34D399) !important; border: none !important; color: white !important; padding: 0.9rem 1.5rem !important; border-radius: 12px !important; font-weight: 700 !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(16,185,129,0.3) !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; } .btn-action.btn-whatsapp-quote:hover { background: linear-gradient(135deg, #059669, #10B981) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(16,185,129,0.4) !important; } /* Payment options - horizontal layout */ .payment-options { display: flex !important; align-items: center !important; gap: 1rem !important; flex-wrap: wrap !important; } .payment-options img { height: 28px !important; opacity: 0.8 !important; transition: opacity 0.3s ease !important; } .payment-options img:hover { opacity: 1 !important; } } /* --- Recommended products section on individual pages --- */ .recommended-products { background: linear-gradient(135deg, rgba(240,253,250,0.97) 0%, rgba(236,254,255,0.97) 50%, rgba(255,251,235,0.95) 100%) !important; backdrop-filter: blur(10px) !important; border-radius: 20px !important; border: 1px solid rgba(8,145,178,0.12) !important; margin: 0 auto 2rem !important; width: 94vw !important; max-width: 1800px !important; padding: 2.5rem 3rem !important; box-shadow: 0 8px 40px rgba(8,145,178,0.08), 0 1px 3px rgba(8,145,178,0.05) !important; position: relative !important; overflow: hidden !important; } /* Decorative top accent bar */ .recommended-products::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, #0891B2, #06B6D4, #F97316, #FBBF24) !important; z-index: 2 !important; } .recommended-header { margin-bottom: 1.5rem !important; } .recommended-header h2 { font-size: clamp(1.5rem, 3vw, 2rem) !important; font-weight: 800 !important; background: linear-gradient(135deg, #0E7490, #0891B2, #06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; position: relative !important; } /* Decorative line under title */ .recommended-header h2::after { content: '' !important; display: block !important; width: 60px !important; height: 3px !important; background: linear-gradient(90deg, #0891B2, #06B6D4) !important; border-radius: 2px !important; margin-top: 0.5rem !important; } /* Carousel control buttons */ .recommended-products .carousel-controls button, .recommended-products .carousel-prev, .recommended-products .carousel-next { background: white !important; border: 2px solid rgba(8,145,178,0.2) !important; color: #0891B2 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: 1.2rem !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(8,145,178,0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .recommended-products .carousel-controls button:hover, .recommended-products .carousel-prev:hover, .recommended-products .carousel-next:hover { background: #0891B2 !important; color: white !important; border-color: #0891B2 !important; transform: scale(1.1) !important; box-shadow: 0 4px 15px rgba(8,145,178,0.3) !important; } /* Product cards in recommended */ .recommended-item a, .recommended-grid .recommended-item a { background: white !important; border-radius: 14px !important; border: 1px solid rgba(8,145,178,0.08) !important; box-shadow: 0 4px 15px rgba(8,145,178,0.06) !important; transition: all 0.3s ease !important; overflow: hidden !important; } .recommended-item:hover a, .recommended-grid .recommended-item:hover a { transform: translateY(-6px) !important; box-shadow: 0 12px 30px rgba(8,145,178,0.15) !important; border-color: rgba(8,145,178,0.2) !important; } .recommended-item .product-image { border-radius: 12px !important; overflow: hidden !important; } .recommended-item .product-info h3 { color: #0E7490 !important; font-weight: 700 !important; } /* Category badge */ .recommended-item .product-category { display: inline-block !important; padding: 0.25rem 0.75rem !important; border-radius: 20px !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .product-category[class*="producto"], .product-category:not(.event-tag) { background: linear-gradient(135deg, #E0F7FA, #B2EBF2) !important; color: #0E7490 !important; } .product-category.event-tag, .product-category[class*="evento"] { background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important; color: #92400E !important; } /* Carousel dots/pagination */ .recommended-products .carousel-dots, .recommended-products .swiper-pagination { text-align: center !important; margin-top: 1rem !important; } .recommended-products .carousel-dots span, .recommended-products .dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: rgba(8,145,178,0.2) !important; display: inline-block !important; margin: 0 4px !important; transition: all 0.3s ease !important; } .recommended-products .carousel-dots span.active, .recommended-products .dot.active { background: #0891B2 !important; width: 24px !important; border-radius: 4px !important; } /* --- Mobile: compact layout for individual pages --- */ @media (max-width: 991px) { .main-container { padding: 1.5rem 3% !important; margin-top: 1rem !important; } .product-container { gap: 1.5rem !important; } .product-details { gap: 1.2rem !important; } .product-details h1 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; background: linear-gradient(135deg, #0E7490, #0891B2, #06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .product-details > .specifications, .product-details > .pricing, .product-details > .product-action-buttons, .product-details > .payment-options { background: rgba(255,255,255,0.6) !important; border-radius: 12px !important; padding: 1rem !important; border: 1px solid rgba(8,145,178,0.06) !important; } .action-buttons-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; } .btn-action.btn-add-to-cart, .btn-action.btn-whatsapp-quote { padding: 0.75rem 0.5rem !important; font-size: 0.8rem !important; border-radius: 10px !important; } .btn-action.btn-add-to-cart { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border: none !important; font-weight: 700 !important; box-shadow: 0 3px 10px rgba(8,145,178,0.25) !important; } .btn-action.btn-whatsapp-quote { background: linear-gradient(135deg, #10B981, #34D399) !important; color: white !important; border: none !important; font-weight: 700 !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; box-shadow: 0 3px 10px rgba(16,185,129,0.25) !important; } /* Availability badge mobile */ .product-details .availability { display: inline-block !important; background: linear-gradient(135deg, #10B981, #34D399) !important; color: white !important; padding: 0.25rem 0.8rem !important; border-radius: 16px !important; font-size: 0.78rem !important; font-weight: 600 !important; width: fit-content !important; } .product-details .brand { font-size: 1.3rem !important; font-weight: 800 !important; color: #0E7490 !important; } } /* --- Specifications list styling --- */ .product-details .specifications ul { list-style: none !important; padding: 0 !important; } .product-details .specifications ul li { padding: 0.5rem 0 !important; padding-left: 1.5rem !important; position: relative !important; border-bottom: 1px solid rgba(8,145,178,0.06) !important; color: #374151 !important; } .product-details .specifications ul li:last-child { border-bottom: none !important; } .product-details .specifications ul li::before { content: '\f00c' !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important; position: absolute !important; left: 0 !important; color: var(--summer-ocean) !important; font-size: 0.8rem !important; } .product-details .specifications h2 { color: var(--summer-ocean-dark) !important; font-size: 1.1rem !important; margin-bottom: 0.75rem !important; padding-bottom: 0.5rem !important; border-bottom: 2px solid rgba(8,145,178,0.15) !important; } /* ========================================================================== 27. GALLERY PAGE - Summer Redesign Diseño veraniego hermoso para la galería ========================================================================== */ /* --- Hero Section --- */ .gallery-hero { background: linear-gradient(180deg, #ECFEFF 0%, #F0FDFA 40%, #FEF3C7 100%) !important; padding: clamp(3rem, 10vw, 5rem) 1rem !important; border-bottom: none !important; } .gallery-hero::before { background: radial-gradient(circle at 20% 50%, rgba(8,145,178,0.15) 0%, transparent 60%) !important; opacity: 1 !important; filter: blur(80px) !important; } .gallery-hero::after { background: radial-gradient(circle at 80% 50%, rgba(251,113,133,0.12) 0%, transparent 60%) !important; opacity: 1 !important; filter: blur(80px) !important; } .gallery-hero h1 { background: linear-gradient(135deg, #0E7490 0%, #0891B2 40%, #06B6D4 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .hero-badge { background: rgba(255,255,255,0.9) !important; border: 1px solid rgba(8,145,178,0.2) !important; color: #0891B2 !important; } .hero-badge i { color: #F59E0B !important; } .hero-description { color: #475569 !important; } /* --- Stats --- */ .stat-item { background: rgba(255,255,255,0.8) !important; border: 1px solid rgba(8,145,178,0.1) !important; backdrop-filter: blur(10px) !important; } .stat-item:hover { background: rgba(255,255,255,0.95) !important; border-color: rgba(8,145,178,0.2) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.12) !important; } .stat-icon { background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%) !important; } .stat-number { color: #0E7490 !important; } /* --- Filter Section --- */ .filter-section { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(20px) saturate(180%) !important; border-bottom: 1px solid rgba(8,145,178,0.08) !important; box-shadow: 0 1px 4px rgba(8,145,178,0.06) !important; top: 142px !important; padding: 0.75rem 1rem !important; margin-bottom: 0.75rem !important; } .filter-btn { background: white !important; border: 2px solid #E2E8F0 !important; color: #475569 !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .filter-btn:hover:not(.active) { background: #F0FDFA !important; border-color: #0891B2 !important; color: #0891B2 !important; } .filter-btn.active { background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%) !important; border-color: #0891B2 !important; color: white !important; box-shadow: 0 4px 12px rgba(8,145,178,0.3), 0 0 0 3px rgba(8,145,178,0.1) !important; } /* --- Gallery Main - full width --- */ .gallery-main { max-width: 100% !important; overflow-x: clip !important; } /* --- Gallery Section - edge to edge --- */ .gallery-section { padding: 0 clamp(0.5rem, 2vw, 2rem) 4rem !important; max-width: 100% !important; } /* --- Gallery Grid - Dense auto-flow, no white gaps --- */ .gallery-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 280px !important; grid-auto-flow: dense !important; gap: 8px !important; animation: fadeIn 0.8s ease-out !important; } /* Featured items via CSS classes added by JS */ .gallery-item.gallery-wide { grid-column: span 2 !important; } .gallery-item.gallery-tall { grid-row: span 2 !important; } /* --- Large Desktop 1440px+ --- */ @media (min-width: 1440px) { .gallery-grid { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 300px !important; gap: 10px !important; } } /* --- Extra Large 1800px+ --- */ @media (min-width: 1800px) { .gallery-grid { grid-template-columns: repeat(5, 1fr) !important; grid-auto-rows: 280px !important; } } /* --- Desktop 1024-1439px --- */ @media (min-width: 1024px) and (max-width: 1439px) { .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 270px !important; } } /* --- Tablet 768-1023px --- */ @media (min-width: 768px) and (max-width: 1023px) { .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 220px !important; gap: 8px !important; } } /* --- Mobile <768px --- */ @media (max-width: 767px) { .filter-section { top: 0 !important; margin-top: 0 !important; } .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 200px !important; gap: 6px !important; } .gallery-item.gallery-tall { grid-row: span 1 !important; } } /* --- Small Mobile <480px --- */ @media (max-width: 479px) { .gallery-grid { grid-auto-rows: 170px !important; gap: 5px !important; } } /* --- Gallery Items --- */ .gallery-item { background: white !important; border: none !important; border-radius: 12px !important; box-shadow: none !important; overflow: hidden !important; transition: all 0.35s cubic-bezier(0, 0, 0.2, 1) !important; } .gallery-item:hover { transform: scale(1.02) !important; box-shadow: 0 12px 32px rgba(8,145,178,0.2) !important; z-index: 5 !important; border-radius: 12px !important; } /* Remove top accent line - cleaner look */ .gallery-item::before { display: none !important; } /* Image fills entire card */ .image-wrapper { aspect-ratio: unset !important; width: 100% !important; height: 100% !important; } .image-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s ease !important; } /* Image zoom effect */ .gallery-item:hover .image-wrapper img { transform: scale(1.08) !important; } /* Overlay - warm summer gradient */ .image-overlay { background: linear-gradient(180deg, transparent 40%, rgba(14,116,144,0.6) 100%) !important; } /* Zoom button */ .zoom-btn { background: rgba(255,255,255,0.95) !important; color: #0E7490 !important; border: none !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; width: 52px !important; height: 52px !important; } .zoom-btn:hover { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; } /* --- Load More Button --- */ .load-more-container { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(8,145,178,0.1) !important; border-radius: 20px !important; } .btn-load-more { background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.3) !important; } .btn-load-more::before { background: linear-gradient(135deg, #F97316 0%, #FB7185 100%) !important; } .btn-load-more:hover { box-shadow: 0 8px 24px rgba(249,115,22,0.3) !important; } /* --- Lightbox --- */ .lightbox { background: rgba(14,116,144,0.95) !important; backdrop-filter: blur(24px) !important; } .lightbox-content img { border-radius: 16px !important; box-shadow: 0 24px 64px rgba(0,0,0,0.4) !important; } .lightbox-close, .lightbox-prev, .lightbox-next { background: rgba(255,255,255,0.95) !important; border: 1px solid rgba(8,145,178,0.2) !important; color: #0E7490 !important; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: white !important; border-color: #0891B2 !important; box-shadow: 0 4px 16px rgba(8,145,178,0.25) !important; } .lightbox-counter { background: rgba(14,116,144,0.85) !important; border: 1px solid rgba(255,255,255,0.15) !important; color: white !important; } /* ========================================================================== 28. BLOG PAGE - Summer Redesign Hero, controles, tarjetas, modal, CTA - todo veraniego ========================================================================== */ /* --- Blog Main - full width --- */ .blog-main { max-width: 100% !important; padding: 0 clamp(1rem, 3vw, 3rem) 3rem !important; background: transparent !important; } /* --- Blog Hero --- */ .blog-hero { margin-bottom: 1rem !important; padding: 0 clamp(1rem, 3vw, 3rem) !important; position: relative !important; z-index: 2 !important; } /* Blog controls above overlay */ .blog-controls { position: relative !important; z-index: 2 !important; } .blog-hero .hero-content { background: linear-gradient(135deg, #ECFEFF 0%, #F0FDFA 30%, #FEF3C7 100%) !important; border: 1px solid rgba(8,145,178,0.12) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.08) !important; border-radius: 20px !important; padding: clamp(1.25rem, 3vw, 2rem) !important; max-width: 1400px !important; margin: 0 auto !important; } .blog-hero .hero-content::before { background: radial-gradient(circle, rgba(8,145,178,0.2), transparent 60%) !important; } .blog-hero .hero-badge { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; box-shadow: 0 4px 12px rgba(8,145,178,0.3) !important; border: none !important; } .blog-hero .hero-badge i { color: #FDE68A !important; } .blog-hero h1 { color: #0F172A !important; } .blog-hero .hero-description { color: #334155 !important; font-weight: 500 !important; } .blog-hero .gradient-text { background: linear-gradient(120deg, #0891B2, #06B6D4, #10B981) !important; -webkit-background-clip: text !important; color: transparent !important; } /* --- Blog Controls (Search + Filters) --- */ .blog-controls { max-width: 1400px !important; margin: 0 auto clamp(1.5rem, 3vw, 2rem) !important; padding: 1rem clamp(1rem, 3vw, 3rem) !important; position: sticky !important; top: 142px !important; z-index: 100 !important; background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(16px) !important; border-radius: 16px !important; border: 1px solid rgba(8,145,178,0.08) !important; } .blog-controls .search-box { background: white !important; border: 1.5px solid rgba(8,145,178,0.15) !important; border-radius: 999px !important; box-shadow: 0 2px 8px rgba(8,145,178,0.06) !important; } .blog-controls .search-box:focus-within { border-color: #0891B2 !important; box-shadow: 0 0 0 3px rgba(8,145,178,0.1), 0 4px 12px rgba(8,145,178,0.1) !important; } .blog-controls .search-box .search-icon { color: #0891B2 !important; } .blog-controls .filter-btn { background: white !important; border: 1.5px solid #E2E8F0 !important; color: #475569 !important; border-radius: 999px !important; font-size: 0.82rem !important; padding: 0.45rem 0.9rem !important; } .blog-controls .filter-btn:hover { background: #F0FDFA !important; border-color: #0891B2 !important; color: #0891B2 !important; } .blog-controls .filter-btn.active { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-color: transparent !important; color: white !important; box-shadow: 0 4px 12px rgba(8,145,178,0.3) !important; } /* --- Blog Section & Grid --- */ .blog-section { max-width: 1400px !important; margin: 0 auto !important; padding: 0 clamp(0.5rem, 2vw, 1rem) !important; } .blog-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem !important; align-items: stretch !important; } /* Featured first card spans 2 columns */ .blog-grid .blog-card:first-child { grid-column: span 2 !important; } .blog-grid .blog-card:first-child .card-image img { height: 320px !important; } /* --- Blog Cards --- */ .blog-card { background: white !important; border: 1px solid rgba(8,145,178,0.08) !important; border-radius: 16px !important; box-shadow: 0 2px 8px rgba(8,145,178,0.05) !important; overflow: hidden !important; transition: all 0.35s ease !important; } .blog-card:hover { transform: translateY(-6px) !important; box-shadow: 0 12px 32px rgba(8,145,178,0.15) !important; border-color: rgba(8,145,178,0.15) !important; } .card-image img { height: 200px !important; object-fit: cover !important; transition: transform 0.6s ease !important; } .blog-card:hover .card-image img { transform: scale(1.06) !important; } /* Category badge */ .card-category { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border-radius: 999px !important; font-size: 0.72rem !important; font-weight: 600 !important; backdrop-filter: blur(8px) !important; } .card-category.consejos { background: linear-gradient(135deg, #F59E0B, #FBBF24) !important; color: #1F2937 !important; } .card-category.tendencias { background: linear-gradient(135deg, #06B6D4, #38BDF8) !important; color: white !important; } .card-category.negocios { background: linear-gradient(135deg, #10B981, #34D399) !important; color: white !important; } /* Card content */ .card-meta i { color: #0891B2 !important; } .card-content h2 { font-size: clamp(0.95rem, 1.5vw, 1.15rem) !important; color: #0F172A !important; line-height: 1.4 !important; } .card-excerpt { font-size: 0.84rem !important; color: #64748B !important; line-height: 1.55 !important; } /* Read more button */ .btn-read-more { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(8,145,178,0.25) !important; font-size: 0.84rem !important; padding: 0.6rem 1rem !important; } .btn-read-more:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; box-shadow: 0 6px 18px rgba(8,145,178,0.35) !important; } /* --- Blog Modal --- */ .blog-modal { background: rgba(14,116,144,0.4) !important; backdrop-filter: blur(12px) !important; } .modal-content { border-radius: 20px !important; border: 1px solid rgba(8,145,178,0.1) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.15) !important; } .modal-header { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-radius: 20px 20px 0 0 !important; } .modal-close:hover { background: rgba(255,255,255,0.2) !important; } /* CTA boxes inside modal */ .modal-body .cta-box { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-radius: 16px !important; } .modal-body .content-list i { color: #10B981 !important; } /* --- Blog CTA Section --- */ .blog-cta { max-width: 1400px !important; margin: 3rem auto 0 !important; background: url('Temporada/verano fondo.jpg') center/cover no-repeat !important; border-radius: 20px !important; padding: clamp(2rem, 5vw, 3rem) !important; text-align: center !important; box-shadow: 0 8px 32px rgba(8,145,178,0.25) !important; position: relative !important; z-index: 2 !important; overflow: hidden !important; } .blog-cta::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(14,116,144,0.75) 0%, rgba(8,145,178,0.65) 50%, rgba(6,182,212,0.6) 100%) !important; border-radius: 20px !important; z-index: 0 !important; } .blog-cta .cta-content { position: relative !important; z-index: 1 !important; } .blog-cta h2 { color: white !important; font-size: clamp(1.5rem, 3vw, 2rem) !important; } .blog-cta p { color: rgba(255,255,255,0.85) !important; } .btn-cta-large { background: white !important; color: #0E7490 !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; transition: all 0.3s ease !important; } .btn-cta-large:hover { background: #FEF3C7 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important; } /* --- No Results --- */ .no-results { text-align: center !important; padding: 3rem !important; color: #64748B !important; } .no-results .no-results-icon i { color: #0891B2 !important; } /* --- Blog Grid Responsive --- */ @media (min-width: 1024px) and (max-width: 1439px) { .blog-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 768px) and (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } .blog-grid .blog-card:first-child { grid-column: span 2 !important; } } @media (max-width: 767px) { .blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } .blog-grid .blog-card:first-child { grid-column: span 2 !important; } .blog-grid .blog-card:first-child .card-image img { height: 200px !important; } .blog-controls { flex-direction: column !important; gap: 0.5rem !important; top: auto !important; padding: 0.6rem 0.75rem !important; border-radius: 12px !important; position: relative !important; margin-top: 0 !important; margin-bottom: 1rem !important; } .blog-controls .search-container { max-width: 100% !important; width: 100% !important; flex: none !important; } .blog-controls .search-box { padding: 0.45rem 0.75rem !important; } .blog-controls .filter-container { justify-content: center !important; gap: 0.35rem !important; } .blog-controls .filter-btn { padding: 0.35rem 0.65rem !important; font-size: 0.75rem !important; } .blog-hero { padding: 0 0.75rem !important; margin-bottom: 0.5rem !important; } .blog-hero .hero-content { padding: 1.25rem !important; border-radius: 16px !important; } .blog-hero h1 { font-size: 1.4rem !important; } .blog-cta { margin: 2rem 0.5rem 0 !important; border-radius: 16px !important; } } /* ===================================================================== Section 29 - PERSONALIZAR EVENTO PAGE - Summer Redesign ===================================================================== */ /* --- Section base --- */ .personalizar-section { max-width: 960px !important; } /* --- Header --- */ .personalizar-header { text-align: center !important; margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important; } .confianza-badge { background: linear-gradient(135deg, rgba(8,145,178,0.1), rgba(6,182,212,0.1)) !important; border: 1px solid rgba(8,145,178,0.2) !important; color: #0891B2 !important; } .personalizar-header h1 { background: linear-gradient(120deg, #0E7490, #0891B2, #06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .personalizar-header p { color: #475569 !important; } /* --- Progress Bar --- */ .progress-step.active .step-circle { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-color: #0891B2 !important; box-shadow: 0 4px 15px rgba(8,145,178,0.35) !important; } .progress-step.completed .step-circle { background: #10B981 !important; border-color: #10B981 !important; } .progress-step.active .step-label { color: #0891B2 !important; } .progress-step.completed .step-label { color: #10B981 !important; } .progress-fill { background: #10B981 !important; } .progress-line { background: #E2E8F0 !important; } /* --- Form Steps --- */ .form-step { background: rgba(255,255,255,0.95) !important; border: 1px solid rgba(8,145,178,0.08) !important; box-shadow: 0 8px 32px rgba(8,145,178,0.06) !important; backdrop-filter: blur(8px) !important; border-radius: 24px !important; } .step-icon { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 4px 12px rgba(8,145,178,0.25) !important; border-radius: 16px !important; } .step-header { border-bottom: 1px solid rgba(8,145,178,0.08) !important; } .section-subtitle i { color: #0891B2 !important; } .highlight { color: #0891B2 !important; } /* --- Form Elements --- */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #0891B2 !important; box-shadow: 0 0 0 4px rgba(8,145,178,0.1) !important; } .form-group label i { color: #0891B2 !important; } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230891B2' d='M6 8.825L.35 3.175l.825-.825L6 7.175l4.825-4.825.825.825z'/%3E%3C/svg%3E") !important; } /* --- Ubicacion Options --- */ .ubicacion-option:hover { border-color: #0891B2 !important; box-shadow: 0 8px 24px rgba(8,145,178,0.12) !important; } .ubicacion-option.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, #F0FDFA, #ECFEFF, #FFFFFF) !important; box-shadow: 0 4px 20px rgba(8,145,178,0.15) !important; } .ubicacion-option.selected::after { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .ubicacion-option i { color: #0891B2 !important; } /* --- Smart Suggestion Banner --- */ .smart-suggestion-banner { background: linear-gradient(135deg, #F0FDFA, #ECFEFF) !important; border: 1px solid rgba(8,145,178,0.2) !important; } .smart-banner-icon { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .smart-banner-btn { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .smart-banner-btn:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; box-shadow: 0 4px 12px rgba(8,145,178,0.3) !important; } /* --- Product Cards --- */ .producto-card { border-radius: 20px !important; border: 2px solid rgba(8,145,178,0.06) !important; background: rgba(255,255,255,0.95) !important; } .producto-card:hover { border-color: rgba(8,145,178,0.15) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.1) !important; } .producto-card.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, #F0FDFA, #FFFFFF) !important; box-shadow: 0 4px 20px rgba(8,145,178,0.15) !important; } .icon-algodon { background: linear-gradient(135deg, #ECFEFF, #CFFAFE) !important; color: #0891B2 !important; } .icon-poporopos { background: linear-gradient(135deg, #FFFBEB, #FEF3C7) !important; color: #F59E0B !important; } .icon-granizadas { background: linear-gradient(135deg, #ECFEFF, #A5F3FC) !important; color: #0E7490 !important; } .icon-churros { background: linear-gradient(135deg, #FFF7ED, #FFEDD5) !important; color: #EA580C !important; } .icon-manzanas { background: linear-gradient(135deg, #FFF1F2, #FFE4E6) !important; color: #E11D48 !important; } .icon-obleas { background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important; color: #D97706 !important; } .producto-price-tag { color: #0891B2 !important; } .producto-subtotal { color: #0891B2 !important; } .producto-card-header input[type="checkbox"] { accent-color: #0891B2 !important; } .producto-suggestion { background: linear-gradient(135deg, #FEF3C7, #FFFBEB) !important; border-color: #FBBF24 !important; } /* --- Quantity Controls --- */ .qty-btn:hover:not(:disabled) { border-color: #0891B2 !important; background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; } .quantity-input input:focus { border-color: #0891B2 !important; box-shadow: 0 0 0 3px rgba(8,145,178,0.1) !important; } /* --- Price Estimate Bar --- */ .price-estimate-bar { background: linear-gradient(135deg, #0E7490, #0891B2, #06B6D4) !important; border-radius: 20px !important; box-shadow: 0 8px 32px rgba(8,145,178,0.3) !important; } /* --- Resumen Card --- */ .resumen-card { border: 1px solid rgba(8,145,178,0.1) !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 8px 32px rgba(8,145,178,0.08) !important; } .resumen-section-header { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .resumen-producto-info i { color: #0891B2 !important; } .resumen-producto-price { color: #0891B2 !important; } .resumen-total-amount { color: #0891B2 !important; } .resumen-disclaimer i { color: #0891B2 !important; } /* --- Buttons --- */ .personalizar-section .btn-primary { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.3) !important; } .personalizar-section .btn-primary:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.4) !important; } .personalizar-section .btn-secondary:hover { border-color: #0891B2 !important; color: #0891B2 !important; } .personalizar-section .btn-email { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.3) !important; } .personalizar-section .btn-email:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; } /* --- Confianza Section --- */ .mensaje-confianza { background: linear-gradient(135deg, #F0FDFA, #ECFEFF, #FFFFFF) !important; border: 1px solid rgba(8,145,178,0.1) !important; border-radius: 20px !important; } .confianza-item > i { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-radius: 12px !important; } /* --- Loading Overlay --- */ .loading-spinner i { color: #0891B2 !important; } /* --- Success validation state --- */ .personalizar-section input.success, .personalizar-section select.success, .personalizar-section textarea.success { border-color: #10B981 !important; } /* --- Focus visible --- */ .personalizar-section :focus-visible { outline-color: #0891B2 !important; } /* --- Footer z-index for this page --- */ .personalizar-section ~ .footer { position: relative !important; z-index: 2 !important; } /* --- Responsive tweaks --- */ @media (max-width: 767px) { .personalizar-section { padding: 1rem 0.75rem !important; } .progress-container { padding: 0 0.25rem !important; margin-bottom: 1rem !important; } .step-circle { width: 36px !important; height: 36px !important; font-size: 0.8rem !important; } .step-label { font-size: 0.65rem !important; } .progress-line { max-width: 32px !important; margin-bottom: 16px !important; } .form-step { border-radius: 18px !important; padding: 1rem 0.75rem !important; } .producto-card { border-radius: 16px !important; } .ubicacion-option { border-radius: 14px !important; } .price-estimate-bar { border-radius: 16px !important; } .mensaje-confianza { border-radius: 16px !important; } } @media (max-width: 479px) { .step-circle { width: 32px !important; height: 32px !important; font-size: 0.75rem !important; } .step-label { display: none !important; } .progress-line { max-width: 28px !important; margin-bottom: 0 !important; } .form-step { padding: 0.75rem 0.6rem !important; } } /* ========================================================================== 30. CONTACTO PAGE — Summer Theme Overrides ========================================================================== */ /* --- Hero Section --- */ .contact-hero { background: linear-gradient(180deg, #F0FDFA 0%, #ECFEFF 50%, rgba(255,255,255,0.5) 100%) !important; } .contact-hero::before { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; opacity: 0.12 !important; } .contact-hero::after { background: linear-gradient(135deg, #10B981, #06B6D4) !important; opacity: 0.1 !important; } .contact-hero .hero-badge { background: rgba(236,254,255,0.8) !important; border-color: rgba(8,145,178,0.15) !important; color: #0E7490 !important; } .contact-hero .hero-badge i { color: #0891B2 !important; } .contact-hero h1 { background: linear-gradient(135deg, #0E7490, #0891B2, #06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .contact-hero .hero-description { color: #475569 !important; } /* --- Section Header Icon --- */ .contact-page .header-icon { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.25) !important; } /* --- Form Section --- */ .contact-form-section { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(8,145,178,0.1) !important; box-shadow: 0 8px 32px rgba(8,145,178,0.08) !important; } /* --- Form Labels --- */ .contact-page .form-group label i { color: #0891B2 !important; } /* --- Form Focus States --- */ .contact-page .form-group input:focus, .contact-page .form-group select:focus, .contact-page .form-group textarea:focus { border-color: #0891B2 !important; box-shadow: 0 0 0 4px rgba(8,145,178,0.1) !important; } /* --- Select Dropdown Arrow → Teal --- */ .contact-page .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230891B2' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important; } /* --- Submit Button --- */ .contact-page .btn-submit { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.3) !important; color: white !important; } .contact-page .btn-submit:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.4) !important; } /* --- Info Card Icons --- */ .contact-page .info-icon.phone { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .contact-page .info-icon.hours { background: linear-gradient(135deg, #0891B2, #0E7490) !important; } /* --- Info Card Hover --- */ .contact-page .info-card:hover { border-color: rgba(8,145,178,0.2) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.1) !important; } /* --- Info Content Links --- */ .contact-page .info-content a { color: #0891B2 !important; } .contact-page .info-content a:hover { color: #0E7490 !important; } /* --- View Map Link --- */ .contact-page .view-map-link { color: #0891B2 !important; } /* --- Map Section --- */ .contact-page .map-wrapper { border: 1px solid rgba(8,145,178,0.1) !important; box-shadow: 0 8px 32px rgba(8,145,178,0.1) !important; } .contact-page .map-overlay { border: 1px solid rgba(8,145,178,0.15) !important; } /* --- Directions Button --- */ .contact-page .directions-btn { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 4px 12px rgba(8,145,178,0.25) !important; } .contact-page .directions-btn:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; box-shadow: 0 8px 20px rgba(8,145,178,0.35) !important; } /* --- Focus Visible --- */ .contact-page :focus-visible { outline-color: #0891B2 !important; } /* --- Form Note Icon --- */ .contact-page .form-note i { color: #10B981 !important; } /* --- Footer z-index fix --- */ .contact-page ~ .footer { position: relative !important; z-index: 2 !important; } /* ========================================================================== 31. LEGAL PAGES — Summer Theme (bpoliticas, btermminos, blegal) ========================================================================== */ /* --- Hero Sections --- */ .privacy-hero, .terms-header, .legal-hero { background: linear-gradient(180deg, #F0FDFA 0%, #ECFEFF 50%, rgba(255,255,255,0.5) 100%) !important; } .privacy-hero::before, .terms-header::before { background: radial-gradient(circle, rgba(8,145,178,0.08) 0%, transparent 70%) !important; } /* --- Hero Icon (bpoliticas, blegal) --- */ .privacy-main .hero-icon, .legal-main .hero-icon { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.25) !important; } /* --- Gradient Text --- */ .privacy-main .gradient-text, .legal-main .gradient-text, .terms-header h1 { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* --- Section Cards Glass-morphism --- */ .privacy-section, .terms-box, .legal-section { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(8,145,178,0.08) !important; } .privacy-section:hover, .terms-box:hover, .legal-section:hover { border-color: rgba(8,145,178,0.15) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.1) !important; } /* --- Section Headers --- */ .privacy-section .section-header, .legal-section .section-header { background: linear-gradient(135deg, #F0FDFA, #FFFFFF) !important; border-bottom-color: rgba(8,145,178,0.1) !important; } /* --- Section Icons → Teal Palette --- */ .privacy-main .section-icon.collection, .legal-main .section-icon.info { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .privacy-main .section-icon.usage { background: linear-gradient(135deg, #0E7490, #0891B2) !important; } .privacy-main .section-icon.protection, .legal-main .section-icon.contact { background: linear-gradient(135deg, #10B981, #34D399) !important; } .privacy-main .section-icon.cookies, .legal-main .section-icon.property { background: linear-gradient(135deg, #F59E0B, #FBBF24) !important; } .privacy-main .section-icon.rights, .legal-main .section-icon.liability { background: linear-gradient(135deg, #FB7185, #F43F5E) !important; } .privacy-main .section-icon.contact-icon, .legal-main .section-icon.web { background: linear-gradient(135deg, #06B6D4, #22D3EE) !important; } .legal-main .section-icon.docs { background: linear-gradient(135deg, #64748B, #475569) !important; } /* --- Terms Box Header Icons (check-icon) --- */ .terms-box h2 { background: linear-gradient(135deg, #F0FDFA, #FFFFFF) !important; border-bottom-color: rgba(8,145,178,0.1) !important; } /* --- Info Cards / Usage Cards / Grid Cards — Teal Accent --- */ .privacy-main .info-card i, .privacy-main .usage-card i, .legal-main .info-card i { color: #0891B2 !important; } .privacy-main .info-card:hover, .privacy-main .usage-card:hover, .legal-main .info-card:hover, .legal-main .contact-card:hover, .legal-main .property-card:hover, .legal-main .liability-card:hover, .legal-main .web-card:hover { border-color: rgba(8,145,178,0.2) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.08) !important; } /* --- Terms list bullet color --- */ .terms-box ul li::before { color: #0891B2 !important; } .terms-box ul li:hover { background: rgba(8,145,178,0.04) !important; } /* --- Legal Contact Icons → Teal --- */ .legal-main .contact-icon.phone { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .legal-main .contact-icon.email { background: linear-gradient(135deg, #FB7185, #F43F5E) !important; } .legal-main .contact-card a { color: #0891B2 !important; } /* --- Legal Property Number Circles --- */ .legal-main .property-card .number { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } /* --- Legal Liability Icons --- */ .legal-main .liability-card i { color: #FB7185 !important; } /* --- Legal Web Card Icons --- */ .legal-main .web-card i { color: #06B6D4 !important; } /* --- Legal Doc Links --- */ .legal-main .doc-link:hover { border-color: #0891B2 !important; box-shadow: 0 4px 12px rgba(8,145,178,0.1) !important; } .legal-main .doc-icon.privacy { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .legal-main .doc-icon.terms { background: linear-gradient(135deg, #64748B, #475569) !important; } .legal-main .doc-link .arrow { color: #0891B2 !important; } /* --- Alert Boxes --- */ .privacy-main .alert-box.info, .legal-main .alert-box.info { background: #ECFEFF !important; border-left-color: #0891B2 !important; } .privacy-main .alert-box.info i, .legal-main .alert-box.info i { color: #0891B2 !important; } .privacy-main .alert-box.success { background: #F0FDF4 !important; border-left-color: #10B981 !important; } .privacy-main .alert-box.success i { color: #10B981 !important; } /* --- CTA Sections --- */ .privacy-cta { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 8px 32px rgba(8,145,178,0.3) !important; } .terms-cta, .legal-cta { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; box-shadow: 0 8px 32px rgba(8,145,178,0.3) !important; } .privacy-cta .btn-cta, .terms-cta .btn-cta, .legal-cta .btn-cta { color: #0891B2 !important; } /* --- Terms Quick Links --- */ .terms-content .quick-link:hover { border-color: #0891B2 !important; } .terms-content .quick-link .arrow { color: #0891B2 !important; } /* --- Privacy Contact Methods --- */ .privacy-main .contact-method i { color: #0891B2 !important; } .privacy-main .contact-method a { color: #0891B2 !important; } /* --- Footer z-index fix for all legal + service pages --- */ .privacy-main ~ .footer, .terms-content ~ .footer, .legal-main ~ .footer, #maintenance-services ~ .footer, .main-content ~ .footer, .products-main ~ .footer, .events-main ~ .footer { position: relative !important; z-index: 2 !important; } /* ========================================================================== 32. MANTENIMIENTO PAGE — Summer Theme ========================================================================== */ /* --- Override dark background → beach + glass --- */ #maintenance-services { background: url('Temporada/verano fondo.jpg') top center/cover no-repeat fixed !important; min-height: calc(100vh - 200px) !important; padding: 1.5rem !important; } /* --- Service Cards → Glass-morphism --- */ #maintenance-services .section-box { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(8,145,178,0.1) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.06) !important; color: #1C1C1E !important; } #maintenance-services .section-box:hover { border-color: rgba(8,145,178,0.2) !important; box-shadow: 0 12px 32px rgba(8,145,178,0.12) !important; } #maintenance-services .section-box::before { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } /* --- Icons → Teal --- */ #maintenance-services .section-box-icon { background: linear-gradient(135deg, rgba(8,145,178,0.1), rgba(6,182,212,0.1)) !important; color: #0891B2 !important; } /* --- Title → Dark text --- */ #maintenance-services .title-box { color: #1C1C1E !important; } #maintenance-services .subtitle-box { color: #1C1C1E !important; } /* --- Text → Readable --- */ #maintenance-services .text-box { color: #636366 !important; } /* --- Lists → Teal checkmarks --- */ #maintenance-services .list-item-box { color: #636366 !important; } #maintenance-services .list-item-box::before { color: #0891B2 !important; } #maintenance-services .list-item-box:hover { color: #0891B2 !important; } /* --- Contact Buttons → Teal gradient --- */ #maintenance-services .contact-btn { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border: none !important; box-shadow: 0 4px 15px rgba(8,145,178,0.3) !important; } #maintenance-services .contact-btn:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; box-shadow: 0 6px 20px rgba(8,145,178,0.4) !important; } /* --- Highlight box --- */ #maintenance-services .highlight-box { background: rgba(8,145,178,0.06) !important; border-left: 3px solid #0891B2 !important; color: #1C1C1E !important; } /* --- Step numbers → Teal --- */ #maintenance-services .step-number { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; } /* --- Focus visible --- */ #maintenance-services .contact-btn:focus-visible { outline: 3px solid #06B6D4 !important; } /* ========================================================================== 33. OPORTUNIDAD PAGE — Summer Theme ========================================================================== */ /* --- Main content → Beach background --- */ .main-content { background: url('Temporada/verano fondo.jpg') top center/cover no-repeat fixed !important; border: 1px solid rgba(8,145,178,0.1) !important; box-shadow: 0 10px 30px rgba(8,145,178,0.08), 0 30px 60px rgba(8,145,178,0.04) !important; } /* --- Section Headers → Teal gradient --- */ .main-content .section-header { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; box-shadow: 0 4px 16px rgba(8,145,178,0.25) !important; } /* --- Info Cards → Glass-morphism --- */ .main-content .info-card { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(8,145,178,0.08) !important; box-shadow: 0 4px 12px rgba(8,145,178,0.06) !important; } .main-content .info-card:hover { border-color: rgba(8,145,178,0.2) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.12) !important; } /* --- Info Grid → Proper styling --- */ .main-content .info-grid { gap: 1.5rem !important; } /* --- Card Content h3 → Teal accent --- */ .main-content .info-card .card-content h3 { color: #0E7490 !important; } /* --- Card Content Lists → Teal bullets --- */ .main-content .info-card .card-content li::before { color: #0891B2 !important; } /* --- Buttons → Teal gradient --- */ .main-content .btn { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border: none !important; box-shadow: 0 4px 15px rgba(8,145,178,0.3) !important; transition: all 0.3s ease !important; } .main-content .btn:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; box-shadow: 0 6px 20px rgba(8,145,178,0.4) !important; transform: translateY(-2px) !important; } .main-content .btn.btn-secondary { background: rgba(255,255,255,0.9) !important; color: #0891B2 !important; border: 2px solid #0891B2 !important; box-shadow: none !important; } .main-content .btn.btn-secondary:hover { background: #0891B2 !important; color: white !important; } /* --- CTA / Contact Section → Beach Background --- */ .main-content .cta-section { background: url('Temporada/verano playa.jpg') center/cover no-repeat !important; position: relative !important; color: white !important; } .main-content .cta-section::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(14,116,144,0.55) 0%, rgba(8,145,178,0.5) 50%, rgba(6,182,212,0.45) 100%) !important; z-index: 0 !important; } .main-content .cta-section > * { position: relative !important; z-index: 1 !important; } .main-content .contact-section { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; } /* --- Franchise Requirements List → Teal --- */ .main-content .requirements li::before, .main-content ul li::marker { color: #0891B2 !important; } /* ========================================================================== 34. PRODUCTOS & EVENTOS MAIN PAGES — Enhanced Summer Treatment ========================================================================== */ /* --- Products Main → Remove old gradient, use beach bg --- */ .products-main { background: url('Temporada/verano fondo.jpg') top center/cover no-repeat fixed !important; } /* --- Events Main → Remove old gradient, use beach bg --- */ .events-main { background: url('Temporada/verano fondo.jpg') top center/cover no-repeat fixed !important; } /* --- Product Cards on listing pages → Glass cards --- */ .products-main .product-card, .events-main .event-card { background: rgba(255,255,255,0.88) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(8,145,178,0.08) !important; transition: all 0.3s ease !important; } .products-main .product-card:hover, .events-main .event-card:hover { border-color: rgba(8,145,178,0.18) !important; box-shadow: 0 8px 28px rgba(8,145,178,0.12) !important; transform: translateY(-3px) !important; } /* --- Sidebar Filters → Glass effect --- */ .products-main .products-sidebar .filter-group, .events-main .events-sidebar .filter-group { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(8px) !important; border-radius: 12px !important; border: 1px solid rgba(8,145,178,0.06) !important; } /* --- Active filter tags → Teal --- */ .products-main .filter-tag.active, .events-main .filter-tag.active { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border-color: #0891B2 !important; } /* --- Sort/filter buttons → Teal --- */ .products-main .sort-option.active, .events-main .sort-option.active { color: #0891B2 !important; border-bottom-color: #0891B2 !important; } /* --- Event combo badges → Teal palette --- */ .events-main .event-card .event-badge { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } /* --- Product/Event card add-to-cart buttons → Teal --- */ .products-main .btn-add-cart, .events-main .btn-add-cart { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; } .products-main .btn-add-cart:hover, .events-main .btn-add-cart:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; } /* ================================================================ Section 35 — Personalizar Evento Enhanced Components ================================================================ */ /* --- Section Label --- */ .personalizar-section .section-label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #0E7490 !important; margin: 20px 0 10px !important; font-family: 'Inter', sans-serif !important; } .personalizar-section .section-label i { color: #0891B2 !important; } .personalizar-section .label-hint { font-weight: 400 !important; font-size: 0.82rem !important; color: #6B7280 !important; } /* --- Tipo de Evento Visual Cards --- */ .tipo-evento-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 10px !important; margin-bottom: 8px !important; } .tipo-evento-card { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; padding: 16px 10px !important; background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(12px) !important; border: 2px solid rgba(8,145,178,0.1) !important; border-radius: 14px !important; cursor: pointer !important; transition: all 0.25s ease !important; text-align: center !important; } .tipo-evento-card i { font-size: 1.5rem !important; color: #0891B2 !important; transition: transform 0.25s ease !important; } .tipo-evento-card span { font-size: 0.82rem !important; font-weight: 600 !important; color: #374151 !important; } .tipo-evento-card:hover { border-color: rgba(8,145,178,0.3) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(8,145,178,0.12) !important; } .tipo-evento-card:hover i { transform: scale(1.15) !important; } .tipo-evento-card.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, rgba(8,145,178,0.08), rgba(6,182,212,0.08)) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.18) !important; } .tipo-evento-card.selected i { color: #0E7490 !important; } .tipo-evento-card.selected span { color: #0E7490 !important; } /* --- Personas Quick Chips --- */ .personas-quick-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 10px !important; } .persona-chip { padding: 8px 18px !important; background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(8px) !important; border: 2px solid rgba(8,145,178,0.12) !important; border-radius: 9999px !important; cursor: pointer !important; font-size: 0.9rem !important; font-weight: 600 !important; color: #374151 !important; transition: all 0.2s ease !important; font-family: 'Inter', sans-serif !important; } .persona-chip:hover { border-color: #0891B2 !important; color: #0891B2 !important; background: rgba(8,145,178,0.05) !important; } .persona-chip.selected { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border-color: #0891B2 !important; box-shadow: 0 3px 10px rgba(8,145,178,0.25) !important; } .personas-input-row { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 4px !important; } .personas-input-label { font-size: 0.82rem !important; color: #6B7280 !important; } .personas-input-small { width: 100px !important; padding: 8px 12px !important; border: 2px solid rgba(8,145,178,0.15) !important; border-radius: 10px !important; font-size: 0.95rem !important; font-weight: 600 !important; text-align: center !important; transition: border-color 0.2s !important; } .personas-input-small:focus { border-color: #0891B2 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(8,145,178,0.1) !important; } /* --- Horario Visual Slots --- */ .horario-slots { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; margin-bottom: 16px !important; } .horario-slot { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; padding: 14px 8px !important; background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(12px) !important; border: 2px solid rgba(8,145,178,0.1) !important; border-radius: 14px !important; cursor: pointer !important; transition: all 0.25s ease !important; text-align: center !important; } .horario-slot i { font-size: 1.3rem !important; color: #F59E0B !important; } .horario-slot strong { font-size: 0.82rem !important; color: #374151 !important; } .horario-slot span { font-size: 0.72rem !important; color: #6B7280 !important; } .horario-slot:hover { border-color: rgba(8,145,178,0.3) !important; transform: translateY(-2px) !important; } .horario-slot.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, rgba(8,145,178,0.08), rgba(6,182,212,0.08)) !important; box-shadow: 0 4px 12px rgba(8,145,178,0.15) !important; } .horario-slot.selected i { color: #0891B2 !important; } .horario-slot.selected strong { color: #0E7490 !important; } /* --- Paquetes Rapidos --- */ .paquetes-rapidos { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; margin-bottom: 20px !important; } .paquete-card { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 22px 14px 18px !important; background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(16px) !important; border: 2px solid rgba(8,145,178,0.1) !important; border-radius: 18px !important; cursor: pointer !important; transition: all 0.3s ease !important; text-align: center !important; } .paquete-card:hover { border-color: rgba(8,145,178,0.3) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.12) !important; } .paquete-card.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, rgba(8,145,178,0.06), rgba(6,182,212,0.06)) !important; box-shadow: 0 8px 28px rgba(8,145,178,0.2) !important; } .paquete-badge { position: absolute !important; top: -10px !important; right: 14px !important; background: linear-gradient(135deg, #F59E0B, #FBBF24) !important; color: white !important; font-size: 0.68rem !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 9999px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .paquete-badge.best { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } .paquete-icon { width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, rgba(8,145,178,0.1), rgba(6,182,212,0.1)) !important; border-radius: 14px !important; font-size: 1.3rem !important; color: #0891B2 !important; } .paquete-card h4 { margin: 0 !important; font-size: 1rem !important; font-weight: 700 !important; color: #0E7490 !important; } .paquete-card p { margin: 0 !important; font-size: 0.78rem !important; color: #6B7280 !important; line-height: 1.3 !important; } .paquete-desde { font-size: 0.82rem !important; font-weight: 700 !important; color: #0891B2 !important; background: rgba(8,145,178,0.08) !important; padding: 4px 12px !important; border-radius: 9999px !important; } /* --- Chip Selectors (Colors/Flavors) --- */ .chip-selector { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 16px !important; } .chip-option { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 14px !important; background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(8px) !important; border: 2px solid rgba(8,145,178,0.1) !important; border-radius: 9999px !important; cursor: pointer !important; font-size: 0.85rem !important; font-weight: 500 !important; color: #374151 !important; transition: all 0.2s ease !important; font-family: 'Inter', sans-serif !important; } .chip-option:hover { border-color: rgba(8,145,178,0.3) !important; background: rgba(8,145,178,0.04) !important; } .chip-option.selected { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border-color: #0891B2 !important; box-shadow: 0 2px 8px rgba(8,145,178,0.2) !important; } .chip-color { display: inline-block !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; flex-shrink: 0 !important; } .chip-option.selected .chip-color { box-shadow: 0 0 0 2px rgba(255,255,255,0.5) !important; } /* --- Tematica Grid --- */ .tematica-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 16px !important; } .tematica-card { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 10px 16px !important; background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(8px) !important; border: 2px solid rgba(8,145,178,0.1) !important; border-radius: 12px !important; cursor: pointer !important; font-size: 0.85rem !important; font-weight: 500 !important; color: #374151 !important; transition: all 0.2s ease !important; font-family: 'Inter', sans-serif !important; } .tematica-card i { color: #0891B2 !important; } .tematica-card:hover { border-color: rgba(8,145,178,0.3) !important; transform: translateY(-1px) !important; } .tematica-card.selected { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; border-color: #0891B2 !important; box-shadow: 0 3px 10px rgba(8,145,178,0.2) !important; } .tematica-card.selected i { color: white !important; } /* --- Mobile Responsive for new components --- */ @media (max-width: 640px) { .tipo-evento-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .tipo-evento-card { padding: 12px 6px !important; } .tipo-evento-card i { font-size: 1.2rem !important; } .tipo-evento-card span { font-size: 0.72rem !important; } .horario-slots { grid-template-columns: repeat(2, 1fr) !important; } .paquetes-rapidos { grid-template-columns: 1fr !important; gap: 10px !important; } .paquete-card { flex-direction: row !important; text-align: left !important; padding: 14px !important; gap: 12px !important; } .paquete-icon { width: 40px !important; height: 40px !important; flex-shrink: 0 !important; } .paquete-badge { top: -8px !important; right: 10px !important; } .personas-input-row { flex-direction: column !important; align-items: flex-start !important; } } /* ========================================================================== Section 35 — Tipos de Eventos Section (Homepage SEO) ========================================================================== */ .eventos-tipos-section { padding: 40px 20px 30px !important; max-width: 1400px !important; margin: 0 auto !important; } .section-header-tipos { text-align: center !important; margin-bottom: 24px !important; } .section-badge { display: inline-block !important; background: linear-gradient(135deg, rgba(8,145,178,0.1), rgba(6,182,212,0.1)) !important; color: #0891B2 !important; padding: 8px 20px !important; border-radius: 50px !important; font-size: 0.85rem !important; font-weight: 600 !important; letter-spacing: 0.5px !important; margin-bottom: 16px !important; } .section-header-tipos h2 { font-size: 1.8rem !important; color: #1a1a2e !important; margin-bottom: 6px !important; } .section-header-tipos .gradient-text { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .section-header-tipos p { color: #64748b !important; font-size: 0.95rem !important; } .eventos-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; } .evento-tipo-card { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(8,145,178,0.08) !important; border-radius: 14px !important; padding: 18px 16px !important; text-decoration: none !important; color: inherit !important; transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .evento-tipo-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(8,145,178,0.15) !important; border-color: rgba(8,145,178,0.2) !important; } .evento-tipo-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(8,145,178,0.1), rgba(6,182,212,0.15)) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 10px !important; font-size: 1.1rem !important; color: #0891B2 !important; } .evento-tipo-card h3 { font-size: 0.95rem !important; color: #0E7490 !important; margin-bottom: 4px !important; font-weight: 700 !important; } .evento-tipo-card p { font-size: 0.8rem !important; color: #64748b !important; line-height: 1.45 !important; flex-grow: 1 !important; margin-bottom: 8px !important; } .evento-tag { display: inline-block !important; background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: white !important; font-size: 0.7rem !important; padding: 4px 12px !important; border-radius: 20px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; align-self: flex-start !important; } /* ========================================================================== Section 36 — Cobertura / Service Area Section ========================================================================== */ .cobertura-section { padding: 30px 30px 24px !important; background: linear-gradient(135deg, rgba(8,145,178,0.04), rgba(6,182,212,0.06)) !important; border-radius: 18px !important; max-width: 1200px !important; margin: 0 auto 20px !important; } .cobertura-content { max-width: 100% !important; margin: 0 auto !important; } .cobertura-text h2 { font-size: 1.4rem !important; color: #0E7490 !important; margin-bottom: 6px !important; text-align: center !important; } .cobertura-text h2 i { color: #FB7185 !important; margin-right: 6px !important; } .cobertura-text > p { text-align: center !important; color: #64748b !important; margin-bottom: 16px !important; font-size: 0.9rem !important; } .zonas-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px 20px !important; margin-bottom: 14px !important; } .zona-item { display: flex !important; align-items: center !important; gap: 6px !important; padding: 4px 0 !important; font-size: 0.85rem !important; color: #334155 !important; } .zona-item i { color: #10B981 !important; font-size: 0.75rem !important; } .cobertura-nota { text-align: center !important; background: rgba(8,145,178,0.06) !important; padding: 10px 16px !important; border-radius: 10px !important; font-size: 0.82rem !important; color: #0E7490 !important; } .cobertura-nota i { margin-right: 4px !important; color: #0891B2 !important; } /* ========================================================================== Section 37 — FAQ Section ========================================================================== */ .faq-section { padding: 30px 20px 20px !important; max-width: 1400px !important; margin: 0 auto !important; } .faq-section > h2 { font-size: 1.5rem !important; color: #0E7490 !important; text-align: center !important; margin-bottom: 20px !important; } .faq-section > h2 i { color: #06B6D4 !important; margin-right: 6px !important; } .faq-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .faq-item { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(8,145,178,0.08) !important; border-radius: 12px !important; overflow: hidden !important; transition: all 0.3s ease !important; } .faq-item[open] { border-color: rgba(8,145,178,0.2) !important; box-shadow: 0 4px 20px rgba(8,145,178,0.08) !important; } .faq-item summary { padding: 12px 16px !important; font-weight: 600 !important; font-size: 0.88rem !important; color: #1a1a2e !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 8px !important; list-style: none !important; } .faq-item summary::-webkit-details-marker { display: none !important; } .faq-item summary::after { content: '+' !important; margin-left: auto !important; font-size: 1.3rem !important; color: #0891B2 !important; font-weight: 300 !important; transition: transform 0.3s ease !important; } .faq-item[open] summary::after { content: '−' !important; } .faq-item summary i { color: #0891B2 !important; font-size: 0.95rem !important; width: 20px !important; text-align: center !important; } .faq-item p { padding: 0 16px 12px 40px !important; color: #475569 !important; line-height: 1.5 !important; font-size: 0.82rem !important; } .faq-item p a { color: #0891B2 !important; text-decoration: underline !important; font-weight: 500 !important; } /* Responsive - Eventos Grid */ @media (max-width: 1024px) { .eventos-grid { grid-template-columns: repeat(2, 1fr) !important; } .zonas-grid { grid-template-columns: repeat(2, 1fr) !important; } .faq-grid { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { .eventos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .evento-tipo-card { padding: 12px 10px !important; border-radius: 12px !important; gap: 4px !important; } .evento-tipo-icon { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; } .evento-tipo-card h3 { font-size: 0.78rem !important; margin-bottom: 2px !important; } .evento-tipo-card p { font-size: 0.68rem !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .evento-tipo-badge { font-size: 0.6rem !important; padding: 2px 8px !important; margin-top: 4px !important; } .section-header-tipos h2 { font-size: 1.3rem !important; } .zonas-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 4px 12px !important; } .zona-item { font-size: 0.78rem !important; padding: 3px 0 !important; } .cobertura-text h2 { font-size: 1.2rem !important; } .cobertura-section { padding: 20px 16px 16px !important; } .faq-section > h2 { font-size: 1.2rem !important; } .faq-section { padding: 20px 12px 16px !important; } .faq-item summary { font-size: 0.82rem !important; padding: 10px 12px !important; } .faq-item p { padding: 0 12px 10px 34px !important; font-size: 0.8rem !important; } } /* ========================================================================== 38. PERSONALIZAR EVENTO - SUMMER THEME UX IMPROVEMENTS ========================================================================== */ /* Main section background */ .personalizar-section { background: linear-gradient(180deg, #ECFEFF 0%, #FEF3C7 30%, #FFFBEB 60%, #fff 100%) !important; max-width: 920px !important; } /* Header badge */ .personalizar-header .confianza-badge { background: rgba(8, 145, 178, 0.1) !important; border-color: rgba(8, 145, 178, 0.2) !important; color: #0891B2 !important; } .personalizar-header h1 { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Progress bar summer colors */ .progress-step.active .step-circle { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-color: #0891B2 !important; box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3) !important; } .progress-step.completed .step-circle { background: #10B981 !important; border-color: #10B981 !important; } .progress-step.active .step-label { color: #0891B2 !important; } .progress-step.completed .step-label { color: #10B981 !important; } .progress-fill { background: #10B981 !important; } /* Form step cards */ .personalizar-section .form-step { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(8, 145, 178, 0.12) !important; border-radius: 20px !important; } .personalizar-section .step-icon { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; } /* Tipo evento cards - summer palette */ .tipo-evento-grid { grid-template-columns: repeat(5, 1fr) !important; } .tipo-evento-card { border-color: rgba(8, 145, 178, 0.15) !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .tipo-evento-card:hover { border-color: #06B6D4 !important; transform: translateY(-3px) !important; box-shadow: 0 6px 20px rgba(6, 182, 212, 0.15) !important; } .tipo-evento-card.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, #ECFEFF, #fff) !important; box-shadow: 0 4px 20px rgba(8, 145, 178, 0.2) !important; } .tipo-evento-card.selected i { color: #0891B2 !important; } /* Persona chips */ .persona-chip { border-color: rgba(8, 145, 178, 0.2) !important; } .persona-chip:hover { border-color: #06B6D4 !important; background: #ECFEFF !important; } .persona-chip.selected { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-color: #0891B2 !important; color: #fff !important; } /* Horario slots */ .horario-slot:hover { border-color: #06B6D4 !important; } .horario-slot.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, #ECFEFF, #fff) !important; } .horario-slot.selected i { color: #F59E0B !important; } /* Ubicacion options */ .ubicacion-option:hover { border-color: #06B6D4 !important; } .ubicacion-option.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, #ECFEFF, #fff) !important; box-shadow: 0 4px 16px rgba(8, 145, 178, 0.15) !important; } /* Paquete cards */ .paquete-card { border-color: rgba(8, 145, 178, 0.15) !important; } .paquete-card:hover { border-color: #06B6D4 !important; transform: translateY(-4px) !important; } .paquete-card.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, #ECFEFF, #fff) !important; } .paquete-badge { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: #fff !important; } .paquete-badge.best { background: linear-gradient(135deg, #F97316, #FB7185) !important; } .paquete-desde { color: #0891B2 !important; } /* ===== PRODUCT CARD - NEW CLICK-TO-ADD UX ===== */ .producto-card { cursor: pointer !important; position: relative !important; border-color: rgba(8, 145, 178, 0.12) !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .producto-card:hover { border-color: #06B6D4 !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(6, 182, 212, 0.15) !important; } /* Toggle icon in top-right corner */ .producto-card-toggle { position: absolute !important; top: 12px !important; right: 12px !important; font-size: 1.4rem !important; color: #D1D5DB !important; transition: all 0.3s ease !important; z-index: 2 !important; } .producto-card:hover .producto-card-toggle { color: #06B6D4 !important; } .producto-card.selected .producto-card-toggle { color: #10B981 !important; transform: scale(1.15) !important; } /* Selected state */ .producto-card.selected { border-color: #0891B2 !important; background: linear-gradient(135deg, #ECFEFF, #fff) !important; box-shadow: 0 4px 20px rgba(8, 145, 178, 0.18) !important; } /* Quantity section slides in */ .producto-card .producto-cantidad { animation: slideDown 0.3s ease-out !important; padding-top: 10px !important; margin-top: 8px !important; border-top: 1px dashed rgba(8, 145, 178, 0.2) !important; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Quantity buttons summer */ .qty-btn { border-color: rgba(8, 145, 178, 0.3) !important; color: #0891B2 !important; } .qty-btn:hover { background: #0891B2 !important; color: #fff !important; border-color: #0891B2 !important; } /* Price tag */ .producto-price-tag { color: #0891B2 !important; } .producto-subtotal { color: #0E7490 !important; font-weight: 700 !important; } /* Price estimate bar */ .price-estimate-bar { background: linear-gradient(135deg, #ECFEFF, #FEF3C7) !important; border-color: rgba(8, 145, 178, 0.2) !important; } .estimate-amount { color: #0891B2 !important; } /* Product icon backgrounds summer */ .icon-algodon { background: linear-gradient(135deg, #ECFEFF, #CFFAFE) !important; color: #0891B2 !important; } .icon-poporopos { background: linear-gradient(135deg, #FFFBEB, #FEF3C7) !important; color: #F59E0B !important; } .icon-granizadas { background: linear-gradient(135deg, #ECFEFF, #A5F3FC) !important; color: #0E7490 !important; } .icon-churros { background: linear-gradient(135deg, #FFF7ED, #FFEDD5) !important; color: #EA580C !important; } .icon-manzanas { background: linear-gradient(135deg, #FFF1F2, #FFE4E6) !important; color: #E11D48 !important; } .icon-obleas { background: linear-gradient(135deg, #FFF7ED, #FED7AA) !important; color: #C2410C !important; } /* Suggestion banner */ .smart-suggestion-banner { background: linear-gradient(135deg, #ECFEFF, #CFFAFE) !important; border-color: #06B6D4 !important; } .smart-banner-btn { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: #fff !important; } /* Chip options (colors, sabores, observaciones) */ .chip-option { border-color: rgba(8, 145, 178, 0.2) !important; transition: all 0.2s ease !important; } .chip-option:hover { border-color: #06B6D4 !important; background: #ECFEFF !important; } .chip-option.selected { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-color: #0891B2 !important; color: #fff !important; } .chip-option.selected .chip-color { box-shadow: 0 0 0 2px #fff !important; } /* Tematica cards */ .tematica-card { border-color: rgba(8, 145, 178, 0.15) !important; } .tematica-card:hover { border-color: #06B6D4 !important; } .tematica-card.selected { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border-color: #0891B2 !important; color: #fff !important; } /* Form navigation buttons */ .personalizar-section .btn-primary, .personalizar-section #nextBtn { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; border: none !important; color: #fff !important; } .personalizar-section .btn-primary:hover, .personalizar-section #nextBtn:hover { background: linear-gradient(135deg, #0E7490, #0891B2) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(8, 145, 178, 0.3) !important; } .personalizar-section .btn-whatsapp { background: linear-gradient(135deg, #22C55E, #16A34A) !important; } .personalizar-section .btn-whatsapp:hover { background: linear-gradient(135deg, #16A34A, #15803D) !important; } .personalizar-section .btn-email { background: linear-gradient(135deg, #F97316, #FB7185) !important; color: #fff !important; } /* Resumen card */ .resumen-section-header { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; color: #fff !important; } .resumen-total-row { background: linear-gradient(135deg, #ECFEFF, #FEF3C7) !important; } .resumen-total-amount { color: #0891B2 !important; } /* Confianza items at bottom */ .mensaje-confianza { background: linear-gradient(135deg, rgba(8, 145, 178, 0.05), rgba(254, 243, 199, 0.3)) !important; border-color: rgba(8, 145, 178, 0.12) !important; } .confianza-item i { color: #0891B2 !important; } /* Form inputs summer focus */ .personalizar-section input:focus, .personalizar-section select:focus, .personalizar-section textarea:focus { border-color: #06B6D4 !important; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important; outline: none !important; } /* Section labels */ .personalizar-section .section-label i { color: #0891B2 !important; } .personalizar-section .section-subtitle i { color: #0891B2 !important; } /* Responsive: tipo evento grid */ @media (max-width: 768px) { .tipo-evento-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 480px) { .tipo-evento-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Notification toast summer */ .personalizar-section .notification.success { background: linear-gradient(135deg, #10B981, #059669) !important; } .personalizar-section .notification.error { background: linear-gradient(135deg, #EF4444, #DC2626) !important; } .personalizar-section .notification.info { background: linear-gradient(135deg, #0891B2, #06B6D4) !important; }