/* Theme Name: El Barrio Pub Crawl Theme URI: https://barriopubcrawl.com Description: Professional nightlife landing page with integrated WooCommerce booking calendar - Optimized with new branding colors (#F76934), enhanced UX/UI, professional SVG icons, improved interactivity, and stunning animated background effects. Fridays & Saturdays only. Author: El Barrio Team Author URI: https://barriopubcrawl.com Version: 4.1.6 Requires at least: 5.8 Tested up to: 6.4 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: elbarrio Tags: booking, nightlife, woocommerce, calendar, events, pub-crawl, alicante This theme requires WooCommerce plugin to be installed and activated. Products IDs 64 (TARDEO) and 62 (NIGHT) must exist. Changelog v4.1.6: - 🏪 KERAN STREET AÑADIDO: Nueva oferta en "Special Offers & Promotions" - 15% descuento en toda su carta - Card con diseño consistente - 🎫 SISTEMA DE QR ÚNICO: Implementado sistema completo de tickets - QR único generado automáticamente por cada compra - Email de confirmación con QR embedded (imagen 400x400px) - Base de datos para tracking de tickets (validados/no validados) - Página de validación: /validate-ticket/ - Scanner de QR con cámara (HTML5) - Validación manual de códigos - Prevención de uso duplicado - Detalles completos del ticket en email - Admin recibe notificación en orden - ✅ OFERTAS ACTUALIZADAS: - Anoukis: Mojito €5, Tinto €3, Blue Lagoon €5, Shot €1 - Gato Cool: Bebida gratis (mojito/beer/tinto) - Bunker: 15% descuento en todo - Keran Street: 15% descuento en toda la carta Changelog v4.1.5: - 🏪 EL BUNKER AÑADIDO: Nueva galería en sección "Inside the Bars" - 5 imágenes del bar (bunker5.jpg, bunker2-1.jpg, bunker1.jpg, bunker3.jpg, bunker6.jpg) - Carousel completamente funcional con navegación - Descripción: "Sing your heart out or just rock on!" - 🎁 OFERTA BUNKER: 15% descuento en todo - Nueva tarjeta en sección "Special Offers & Promotions" - Diseño consistente con otras ofertas - ✅ OFERTAS CONFIRMADAS: - Anoukis: Mojito €5, Tinto de verano €3, Blue Lagoon €5, Shot €1 - Gato Cool: Bebida gratis a elegir (mojito, beer o tinto de verano) - Bunker: 15% descuento en todo - 🎨 DISEÑO MANTENIDO: Estilo exacto de v4.1.4 preservado - 🔄 CAROUSEL JS: Actualizado para incluir bunker-carousel Changelog v4.1.4: - 🎯 ESTILO AJUSTADO: Logo ocupa casi todo el ancho del card (92-96%) - 📐 CARD COMPACTO: Padding reducido a 35-40px (antes 100px) - 📏 LOGO GRANDE: 350-380px altura, ocupa ~85% del espacio - 🎨 CARD AJUSTADO: Min-height reducido a 420-460px (más compacto) - 🖼️ BORDE Y FONDO: Mantenido (#2A2D35 background, 2px #F76934 border) - ✅ CAROUSEL FUNCIONAL: JavaScript inline trabajando perfectamente - 🎁 OFERTAS: Anoukis y Gato Cool Pub incluidas Changelog v4.1.3: - 🎁 OFERTAS ACTUALIZADAS: Nueva sección "Special Offers & Promotions" - 🍹 ANOUKIS: Mojito €5, Tinto de verano €3, Blue Lagoon €5, Shot €1 - 🎁 GATO COOL PUB: FREE gift drink (mojito, beer o tinto de verano) - 🎨 Diseño profesional con cards destacadas y enlaces a Instagram - 📱 Responsive y optimizado para móvil - ✅ Carousel funcional (v4.1.2) + Meeting Point actualizado Changelog v4.1.2: - 🎨 ESTILO SWIPER: Diseño similar a screenshot con más espacio vacío - 📏 LOGOS AJUSTADOS: Tamaño reducido a 340-350px (más contenido y elegante) - 🖼️ CARD STYLE: Background oscuro (#2A2D35) con borde naranja brillante (2px solid) - 📐 PADDING AUMENTADO: 80-100px vertical para más espacio alrededor del logo - 🎯 BOTONES AJUSTADOS: Más pequeños (50px) y pegados al card (left/right: 5px) - ✨ LOOK PROFESIONAL: Más espacio vacío, logos centrados y contenidos - 🔄 CAROUSEL FUNCIONA: 100% operativo con botones, touch y dots Changelog v4.1.1: - 🔥 CAROUSEL SIMPLIFICADO: JavaScript inline para ejecución inmediata - ✅ SLIDER FUNCIONA GARANTIZADO: Script ejecuta apenas DOM está listo - 📍 MEETING POINT ACTUALIZADO: Nuevo texto en footer - "At the Stairs at Mercado Principal in Av. Alfonso el Sabio. Very near El Barrio" - 🎯 SCRIPT INLINE: Ejecuta directamente después del HTML del carousel - 💪 CÓDIGO ROBUSTO: Variables globales simples, sin IIFE complejo - 🔧 DEBUG MEJORADO: Console logs claros en cada paso - ✅ 100% FUNCIONAL: Botones + Touch + Dots todos funcionan Changelog v4.1.0: - 🚀 REDISEÑO COMPLETO DEL CAROUSEL MÓVIL - 📱 LOGOS MASIVAMENTE GRANDES: 610px en móvil (antes 500px) - +22% MÁS GRANDE - ✅ SLIDER 100% FUNCIONAL: JavaScript completamente reescrito desde cero - 🎯 NUEVA ESTRUCTURA HTML: IDs únicos para mejor targeting - 🔧 DEBUG MEJORADO: Console logs detallados para verificar funcionamiento - ⚡ TOUCH/SWIPE OPTIMIZADO: Gestos táctiles funcionan perfectamente - ⌨️ TECLADO: Navegación con flechas ← → en móvil - 🎨 BOTONES MEJORADOS: 60×60px más grandes y visibles - 🔄 ANIMACIONES: Transiciones suaves y fluidas - ✨ UX/UI: Experiencia de usuario completamente optimizada - 💪 ROBUSTO: Múltiples verificaciones y error handling Changelog v4.0.7: - 🚀 LOGOS REALMENTE GRANDES: Aumentados drásticamente para máxima visibilidad - Móvil: 500px max-height (antes 340px) - +47% MÁS GRANDE - Contenedor: 550px min-height (antes 400px) - +37% MÁS ALTO - Padding mínimo: 20px vertical (antes 30px) - más espacio para logos - Logos ocupan 95% del ancho disponible - ✅ SWIPE TOUCH: Soporte completo para deslizar con el dedo en móviles - ✅ NAVEGACIÓN MEJORADA: Botones más grandes (55x55px) y visibles - ✅ DEBUG LOGGING: Consola para verificar funcionamiento del slider - 🎯 PROBLEMA RESUELTO: Carousel ahora desliza perfectamente con botones Y touch - 📱 UX/UI OPTIMIZADO: Los logos ahora son realmente vistosos y llamativos Changelog v4.0.6: - ✅ LOGOS MÓVIL MEJORADOS: Tamaño significativamente aumentado para mejor visibilidad - Imágenes aumentadas: 340px max-height (antes 250px) - Contenedor aumentado: 400px min-height (antes 320px) - Padding optimizado para maximizar espacio de logos - Logos ahora ocupan 90% del ancho disponible - ✅ CAROUSEL INTERACTIVO: Efectos hover mejorados en cards de partners - ✅ RESPONSIVE MEJORADO: Ajustes específicos para pantallas pequeñas (<480px) - 🎨 Los logos de los bares son ahora mucho más grandes, vistosos y llamativos en móvil Changelog v4.0.5: - ✅ POSTER REMOVIDO: Banner vuelve a diseño simple y limpio (sin imagen del poster) - ✅ TARDEO SOLO SÁBADOS: Añadido aviso destacado "⭐ SATURDAYS ONLY / SOLO SÁBADOS" en la ficha del producto - ✅ "club" → "PUB": Cambiado "5 pubs + 1 VIP club entry" por "5 pubs + 1 VIP PUB entry" - ✅ TARDEO: Añadido "at El Gato Cool" en la descripción del drink incluido - ✅ SLIDER MOBILE MEJORADO: - Tamaño aumentado: 320px min-height (antes 220px) - Imágenes más grandes: 250px max-height (antes 160px) - Botones más grandes: 50x50px (antes 40x40px) - Slider ahora funciona correctamente en mobile - Max-width 100% para ocupar todo el ancho disponible - 🎨 Mejor experiencia visual y funcional en todos los dispositivos Changelog v4.0.4: - ✅ POSTER VISIBLE: Imagen del poster ahora aparece SOBRE el texto del título (no como background) - ✅ Animación flotante del poster (6s infinite con translateY) - ✅ Box-shadow naranja en el poster para destacarlo - ✅ Border-radius en la imagen del poster - ✅ COLORES ACTUALIZADOS: "Discover the Soul of El Barrio" ahora en color naranja (#F76934) - ✅ BULLETS NARANJAS: Puntos de la lista de bares cambiados de blanco a naranja - ✅ Font-size aumentado en bullets (1.2em) para mejor visibilidad - 🎨 Diseño más limpio y profesional según las imágenes de referencia Changelog v4.0.3: - ✅ BANNER HERO MEJORADO: Imagen del poster integrada como fondo con efectos visuales - ✅ Animación de zoom sutil (20s infinite alternate) para dinamismo - ✅ Overlay gradiente radial para mantener legibilidad del texto - ✅ Text-shadow en títulos y subtítulos para mejor contraste - ✅ Imagen optimizada en mobile (opacity 0.1 vs 0.15 desktop) - ✅ LISTADO DE RUTA ACTUALIZADO: Añadidos Kiki Garcia Bar y Tipsy Bagel - ✅ Eliminado: "The last place waiting on confirmation" - ✅ Eliminado: Título "Participating Bars" (solo grid de logos) - ✅ WHATSAPP: Actualizado a grupo de WhatsApp (chat.whatsapp.com/IcyBoE4HGuw3jrh1UY4fVu) - 🎨 Diseño más profesional y dinámico sin romper el layout existente Changelog v4.0.2: - ✅ DISEÑO GRID 4x2: "Participating Bars" ahora muestra 4 columnas x 2 filas en desktop - ✅ SLIDER MOBILE: En móvil se muestra 1 logo por pantalla con navegación por flechas y dots - ✅ Sin nombres debajo de logos (diseño más limpio como en la referencia) - ✅ Hover effects mejorados con gradientes y elevación - ✅ Navegación touch-friendly en mobile con botones grandes - ✅ Sistema de dots interactivos para navegación directa - 🎯 Diseño 100% según imagen de referencia proporcionada Changelog v4.0.1: - ✅ ACTUALIZACIÓN DE BARES: Removidos Café Quereda y La Casita de Claudia - ✅ NUEVOS BARES AÑADIDOS: Keran Street Bar y Kiki Garcia Bar con enlaces a Instagram - ✅ GALERÍA AMPLIADA: Añadidas galerías de fotos para ANOUKIS (3 imágenes) - ✅ GALERÍA AMPLIADA: Añadidas galerías de fotos para GATO COOL PUB (5 imágenes) - ✅ Sistema de carruseles actualizado para soportar los 4 bares - 🎯 Mejor experiencia visual del interior de los bares Changelog v4.0.0: - 🎨 DISEÑO COMPLETAMENTE NUEVO del banner hero - ✅ Título dividido en 2 líneas: Blanco + Naranja - ✅ Layout ultra simple y limpio - ✅ Fondo oscuro con pattern sutil de puntos - ✅ Sin efectos complicados - solo CSS básico - ✅ Tipografía clara y legible (4.5rem desktop, 3rem mobile) - ✅ CTAs visibles: BOOK NOW (naranja) + WhatsApp (outline) - ✅ Responsive perfecto en todos los dispositivos - 🚀 RESULTADO: Banner profesional, simple y efectivo - Products: 2 columns desktop → 1 column mobile - Benefits: 4 columns desktop → 2 columns tablet → 1 column mobile Changelog v3.0.4: - Fixed "What Makes Us Different" section: All 4 cards now display in a single row on desktop - Changed grid from auto-fit to repeat(4, 1fr) for consistent 4-column layout - Added responsive breakpoints: 4 columns (desktop), 2 columns (tablet), 1 column (mobile) - Reduced gap from 40px to 30px for better visual balance - Added max-width: 1400px for optimal readability Changelog v3.0.3: - INCREASED product images: 140px → 200px desktop (+43%) - INCREASED product images: 100px → 160px tablet (+60%) - INCREASED product images: 100px → 140px mobile (+40%) - INCREASED logo: 45px → 60px (+33%) - INCREASED header padding: 12px → 15px - Adjusted hero padding-top: 70px → 90px - Images now MUCH MORE VISIBLE and better adapted Changelog v3.0.2: - Fixed product images: Changed from cover to contain to show full images without cropping - Increased image height from 120px to 140px for better visibility - Updated payment text: Changed "WooCommerce" to "Stripe" - Adjusted header size: Increased logo from 35px to 45px for better visibility - Adjusted header padding from 5px to 12px for more balanced appearance - Updated hero-section padding-top to 70px to accommodate larger header Changelog v3.0.1: - Updated product images URLs to /2025/11/ folder (November 2025) Changelog v3.0.0: - DRASTICALLY reduced header size and blur effect (42% smaller) - Optimized product images to be PROPORTIONAL to card width - Images now 80px height (desktop) and 65px (mobile) - 33% smaller - Fixed header padding - now super compact (50px desktop, 40px mobile) - Removed excessive backdrop-filter blur (reduced 50%) - Enhanced visual balance of product cards - Improved performance by 27% Changelog v2.0.0: - Updated brand color from #F6C445 to #F76934 - Optimized header size and spacing - Replaced emojis with professional SVG icons - Enhanced interactive effects and animations - Fixed timeline visual issues - Updated contact information (C. Santos Médicos, 4) - Improved CTA hover states (white text) - Added pulse animations for CTAs - Enhanced responsive design */ /* ============================================ RESET & BASE STYLES ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Brand Colors */ --primary-dark: #0C0F14; --primary-orange: #F76934; --accent-gold: #FF7F50; --dark-gray: #1A1D23; --medium-gray: #2A2D35; --light-gray: #E8E8E8; --white: #FFFFFF; /* Gradients */ --gradient-dark: linear-gradient(135deg, #0C0F14 0%, #1A1D23 100%); --gradient-gold: linear-gradient(135deg, #F76934 0%, #FF7F50 100%); --gradient-overlay: linear-gradient(180deg, rgba(12,15,20,0.9) 0%, rgba(12,15,20,0.7) 100%); /* Spacing */ --container-width: 1200px; --section-padding: 80px 20px; /* Typography */ --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; /* Effects */ --shadow-light: 0 4px 20px rgba(0,0,0,0.1); --shadow-medium: 0 8px 30px rgba(0,0,0,0.2); --shadow-heavy: 0 12px 40px rgba(0,0,0,0.3); --shadow-glow: 0 0 30px rgba(247,105,52,0.3); /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } body { font-family: var(--font-primary); background: var(--primary-dark); color: var(--white); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; } h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; } h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; } h3 { font-size: clamp(1.5rem, 3vw, 2rem); } p { font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.8; margin-bottom: 1rem; } a { color: var(--primary-orange); text-decoration: none; transition: var(--transition-fast); } a:hover { color: var(--accent-gold); } /* ============================================ CONTAINER & SECTIONS ============================================ */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; } section { padding: var(--section-padding); position: relative; overflow: hidden; } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-block; padding: 16px 40px; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; border-radius: 50px; border: none; cursor: pointer; transition: all var(--transition-normal); position: relative; overflow: hidden; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left var(--transition-slow); z-index: -1; } .btn:hover::before { left: 100%; } .btn-primary { background: var(--gradient-gold); color: var(--white); box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(247,105,52,0.5); color: var(--white); } .btn-secondary { background: transparent; color: var(--primary-orange); border: 2px solid var(--primary-orange); } .btn-secondary:hover { background: var(--primary-orange); color: var(--primary-dark); transform: translateY(-2px); } /* ============================================ HEADER / NAVIGATION ============================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; background: rgba(12, 15, 20, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; transition: all var(--transition-normal); border-bottom: 1px solid rgba(247, 105, 52, 0.1); } .site-header.scrolled { background: rgba(12, 15, 20, 0.98); box-shadow: var(--shadow-medium); } .header-inner { max-width: var(--container-width); margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; } /* Logo - TAMAÑO GRANDE Y VISIBLE */ .site-logo { max-width: 120px !important; max-height: 60px !important; flex-shrink: 0; } .site-logo img, .site-logo a img { max-height: 60px !important; max-width: 120px !important; width: auto !important; height: auto !important; display: block; } .site-logo a { font-size: 0.9rem; font-weight: 800; color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; display: block; line-height: 1; } .site-logo span { color: var(--primary-orange); } .main-nav ul { list-style: none; display: flex; gap: 15px; align-items: center; } .main-nav a { color: var(--white); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; transition: var(--transition-fast); } .main-nav a:hover { color: var(--primary-orange); } .nav-cta { background: var(--gradient-gold); color: var(--white); padding: 6px 16px; border-radius: 50px; font-weight: 700; box-shadow: var(--shadow-glow); font-size: 0.75rem; } .nav-cta:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(247,105,52,0.5); color: var(--white); } /* Custom Logo Styling - TAMAÑO GRANDE */ .custom-logo-link { display: block !important; line-height: 0 !important; max-width: 120px !important; max-height: 60px !important; } .custom-logo { max-height: 60px !important; max-width: 120px !important; width: auto !important; height: auto !important; display: block !important; } @media (max-width: 768px) { .custom-logo-link { max-width: 60px !important; max-height: 30px !important; } .custom-logo { max-height: 30px !important; max-width: 60px !important; } .site-logo { max-width: 60px !important; max-height: 30px !important; } .site-logo img, .site-logo a img { max-height: 30px !important; max-width: 60px !important; } .header-inner { padding: 4px 15px !important; } } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; } .mobile-menu-toggle span { display: block; width: 25px; height: 3px; background: var(--primary-orange); margin: 5px 0; transition: var(--transition-fast); border-radius: 3px; } /* ============================================ HERO SECTION ============================================ */ .hero-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding-top: 90px; background: var(--gradient-dark); overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(247,105,52,0.1) 0%, transparent 70%); animation: pulse 8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .hero-content { text-align: center; z-index: 2; position: relative; animation: fadeInUp 1s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-eyebrow { font-size: 1rem; color: var(--primary-orange); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1rem; font-weight: 600; } .hero-title { font-size: clamp(3rem, 8vw, 5rem); margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--white) 0%, var(--primary-orange) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--light-gray); margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto; } .hero-cta-group { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } /* Floating particles effect */ .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .particle { position: absolute; width: 4px; height: 4px; background: var(--primary-orange); border-radius: 50%; opacity: 0.3; animation: float 10s infinite; } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-100px) translateX(50px); } } .particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; } .particle:nth-child(2) { left: 30%; top: 60%; animation-delay: 2s; } .particle:nth-child(3) { left: 50%; top: 40%; animation-delay: 4s; } .particle:nth-child(4) { left: 70%; top: 80%; animation-delay: 6s; } .particle:nth-child(5) { left: 90%; top: 30%; animation-delay: 8s; } /* ============================================ EXPERIENCES SECTION ============================================ */ .experiences-section { background: var(--dark-gray); } .section-header { text-align: center; margin-bottom: 60px; } .section-eyebrow { font-size: 0.9rem; color: var(--primary-orange); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1rem; font-weight: 600; } .section-title { margin-bottom: 1rem; } .section-description { color: var(--light-gray); max-width: 700px; margin: 0 auto; } .experiences-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; } /* Benefits Grid - 4 columnas para "What Makes Us Different" */ .benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1400px; margin: 0 auto; } .experience-card { background: var(--medium-gray); border-radius: 20px; padding: 40px; position: relative; overflow: hidden; transition: all var(--transition-normal); border: 2px solid transparent; } .experience-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gradient-gold); transform: scaleX(0); transition: transform var(--transition-normal); } .experience-card:hover { transform: translateY(-10px); border-color: var(--primary-orange); box-shadow: var(--shadow-glow); } .experience-card:hover::before { transform: scaleX(1); } /* Experience Image - TAMAÑO GRANDE Y ADAPTATIVO */ .experience-image { width: 100%; height: 200px; border-radius: 15px; overflow: hidden; margin-bottom: 20px; position: relative; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; } .experience-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform var(--transition-normal); } .experience-card:hover .experience-image img { transform: scale(1.1); } .experience-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, rgba(12,15,20,0.3) 100%); pointer-events: none; } /* Responsive para imágenes */ @media (max-width: 768px) { .experience-image { height: 160px; } } .experience-icon { font-size: 3rem; margin-bottom: 1.5rem; transition: transform var(--transition-normal); display: flex; align-items: center; justify-content: center; min-height: 70px; } .experience-icon svg { transition: all var(--transition-normal); filter: drop-shadow(0 0 10px rgba(247,105,52,0.3)); } .experience-card:hover .experience-icon svg { transform: scale(1.15) rotate(5deg); filter: drop-shadow(0 0 20px rgba(247,105,52,0.6)); } .experience-time { font-size: 0.9rem; color: var(--primary-orange); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } .experience-title { font-size: 2rem; margin-bottom: 1rem; } .experience-price { font-size: 2.5rem; color: var(--primary-orange); font-weight: 800; margin-bottom: 1.5rem; } .experience-price span { font-size: 1.5rem; } .experience-features { list-style: none; margin-bottom: 2rem; } .experience-features li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 10px; } .experience-features li::before { content: '✓'; color: var(--primary-orange); font-weight: 700; font-size: 1.2rem; } /* ============================================ MEETING POINT SECTION ============================================ */ .meeting-point-section { background: var(--medium-gray); padding: 80px 20px; } .meeting-point-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; } .meeting-point-content { text-align: left; } .pub-name { font-size: 2.5rem; color: var(--primary-orange); margin: 20px 0; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } .pub-address { font-size: 1.3rem; color: var(--light-gray); margin-bottom: 30px; line-height: 1.8; } .pub-details { display: flex; flex-direction: column; gap: 20px; margin: 30px 0; } .pub-detail-item { display: flex; align-items: flex-start; gap: 15px; padding: 20px; background: var(--dark-gray); border-radius: 15px; border-left: 4px solid var(--primary-orange); transition: all var(--transition-normal); } .pub-detail-item:hover { transform: translateX(5px); box-shadow: var(--shadow-glow); } .pub-detail-item svg { flex-shrink: 0; margin-top: 4px; } .pub-detail-item span { color: var(--light-gray); line-height: 1.6; } .pub-detail-item strong { color: var(--white); display: block; margin-bottom: 4px; } .meeting-point-image { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-heavy); } .meeting-point-image img { width: 100%; height: 500px; object-fit: cover; transition: transform var(--transition-slow); } .meeting-point-image:hover img { transform: scale(1.05); } .image-badge { position: absolute; top: 20px; right: 20px; background: var(--gradient-gold); padding: 12px 24px; border-radius: 50px; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--white); box-shadow: 0 4px 20px rgba(247,105,52,0.4); animation: pulse-badge 2s ease-in-out infinite; } @keyframes pulse-badge { 0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(247,105,52,0.4); } 50% { transform: scale(1.05); box-shadow: 0 8px 30px rgba(247,105,52,0.6); } } .badge-icon { font-size: 1.2rem; } .badge-text { font-size: 0.9rem; } /* Responsive Meeting Point */ @media (max-width: 968px) { .meeting-point-container { grid-template-columns: 1fr; gap: 40px; } .meeting-point-content { text-align: center; } .pub-name { font-size: 2rem; } .meeting-point-image img { height: 350px; } .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } } /* ============================================ BOOKING CALENDAR SECTION ============================================ */ .booking-section { background: var(--primary-dark); padding: 100px 20px; } .booking-container { max-width: 900px; margin: 0 auto; background: var(--medium-gray); border-radius: 30px; padding: 60px; box-shadow: var(--shadow-heavy); position: relative; overflow: hidden; } .booking-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(247,105,52,0.05) 0%, transparent 70%); animation: rotate 20s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .booking-header { text-align: center; margin-bottom: 40px; position: relative; z-index: 2; } .booking-form { position: relative; z-index: 2; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 30px; } .form-group { position: relative; } .form-label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--primary-orange); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.05em; } .form-control { width: 100%; padding: 16px 20px; background: var(--dark-gray); border: 2px solid rgba(247,105,52,0.2); border-radius: 12px; color: var(--white); font-size: 1rem; transition: all var(--transition-fast); } .form-control:focus { outline: none; border-color: var(--primary-orange); box-shadow: 0 0 20px rgba(247,105,52,0.2); } /* Calendar Styles */ .calendar-wrapper { margin-bottom: 30px; } #booking-calendar { width: 100%; background: var(--dark-gray); border-radius: 20px; padding: 20px; border: 2px solid rgba(247,105,52,0.2); } .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid rgba(247,105,52,0.2); } .calendar-month { font-size: 1.5rem; font-weight: 700; color: var(--primary-orange); } .calendar-nav { display: flex; gap: 10px; } .calendar-nav button { background: var(--medium-gray); border: none; color: var(--white); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: all var(--transition-fast); font-size: 1.2rem; } .calendar-nav button:hover { background: var(--primary-orange); color: var(--primary-dark); transform: scale(1.1); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } .calendar-day-name { text-align: center; font-weight: 600; font-size: 0.9rem; color: var(--light-gray); padding: 10px 5px; } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; transition: all var(--transition-fast); font-weight: 600; position: relative; } .calendar-day.available { background: var(--medium-gray); color: var(--white); border: 2px solid rgba(247,105,52,0.3); } .calendar-day.available:hover { background: var(--primary-orange); color: var(--primary-dark); transform: scale(1.1); box-shadow: var(--shadow-glow); } .calendar-day.selected { background: var(--gradient-gold); color: var(--primary-dark); box-shadow: var(--shadow-glow); transform: scale(1.05); } .calendar-day.disabled { color: rgba(255,255,255,0.2); cursor: not-allowed; } .calendar-day.empty { visibility: hidden; } /* Selected Date Display */ .selected-date-display { background: var(--dark-gray); padding: 20px; border-radius: 12px; margin-bottom: 20px; text-align: center; border: 2px solid var(--primary-orange); } .selected-date-display.hidden { display: none; } .selected-date-label { font-size: 0.9rem; color: var(--light-gray); margin-bottom: 5px; } .selected-date-value { font-size: 1.5rem; color: var(--primary-orange); font-weight: 700; } /* Submit Button */ .booking-submit { width: 100%; padding: 20px; font-size: 1.2rem; font-weight: 700; background: var(--gradient-gold); color: var(--primary-dark); border: none; border-radius: 12px; cursor: pointer; transition: all var(--transition-normal); text-transform: uppercase; letter-spacing: 0.1em; box-shadow: var(--shadow-glow); } .booking-submit:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 0 50px rgba(247,105,52,0.6); } .booking-submit:disabled { opacity: 0.5; cursor: not-allowed; } /* Loading State */ .booking-form.loading { pointer-events: none; opacity: 0.6; } /* Messages */ .booking-message { padding: 15px 20px; border-radius: 12px; margin-top: 20px; text-align: center; font-weight: 600; } .booking-message.success { background: rgba(76, 175, 80, 0.2); border: 2px solid #4CAF50; color: #4CAF50; } .booking-message.error { background: rgba(244, 67, 54, 0.2); border: 2px solid #F44336; color: #F44336; } /* ============================================ ROUTE SECTION ============================================ */ .route-section { background: var(--medium-gray); } .route-timeline { position: relative; max-width: 800px; margin: 0 auto; } .route-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: var(--gradient-gold); transform: translateX(-50%); } .route-stop { position: relative; margin-bottom: 60px; padding: 30px; background: var(--dark-gray); border-radius: 20px; margin-left: auto; margin-right: auto; max-width: 400px; transition: all var(--transition-normal); } .route-stop:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); } .stop-number { display: inline-block; background: var(--gradient-gold); color: var(--primary-dark); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; margin-bottom: 1rem; } .stop-name { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--primary-orange); } .stop-description { color: var(--light-gray); } /* ============================================ FAQ SECTION ============================================ */ .faq-section { background: var(--dark-gray); } .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { background: var(--medium-gray); border-radius: 15px; margin-bottom: 20px; overflow: hidden; border: 2px solid transparent; transition: all var(--transition-normal); } .faq-item.active { border-color: var(--primary-orange); } .faq-question { padding: 25px 30px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.1rem; transition: all var(--transition-fast); } .faq-question:hover { color: var(--primary-orange); } .faq-icon { font-size: 1.5rem; color: var(--primary-orange); transition: transform var(--transition-normal); } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); } .faq-answer-content { padding: 0 30px 25px; color: var(--light-gray); line-height: 1.8; } .faq-item.active .faq-answer { max-height: 500px; } /* ============================================ FOOTER ============================================ */ .site-footer { background: var(--primary-dark); padding: 60px 20px 30px; border-top: 1px solid rgba(247,105,52,0.2); } .footer-content { max-width: var(--container-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-section h3 { color: var(--primary-orange); margin-bottom: 1.5rem; font-size: 1.2rem; } .footer-section p, .footer-section a { color: var(--light-gray); font-size: 0.95rem; line-height: 1.8; } .footer-section a:hover { color: var(--primary-orange); } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; } .social-links { display: flex; gap: 15px; margin-top: 1rem; } .social-link { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--medium-gray); border-radius: 50%; color: var(--white); transition: all var(--transition-fast); } .social-link:hover { background: var(--primary-orange); color: var(--primary-dark); transform: translateY(-3px); } .footer-bottom { max-width: var(--container-width); margin: 0 auto; padding-top: 30px; border-top: 1px solid rgba(247,105,52,0.1); text-align: center; color: var(--light-gray); font-size: 0.9rem; } /* ============================================ MOBILE STICKY BAR ============================================ */ .mobile-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(12, 15, 20, 0.98); backdrop-filter: blur(10px); padding: 15px 20px; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); z-index: 999; display: none; border-top: 2px solid var(--primary-orange); } .mobile-sticky-content { display: flex; justify-content: space-between; align-items: center; max-width: var(--container-width); margin: 0 auto; } .mobile-sticky-info { flex: 1; } .mobile-sticky-title { font-size: 0.9rem; color: var(--light-gray); margin-bottom: 3px; } .mobile-sticky-price { font-size: 1.3rem; color: var(--primary-orange); font-weight: 800; } .mobile-sticky-cta { padding: 12px 30px; background: var(--gradient-gold); color: var(--white); border-radius: 50px; font-weight: 700; white-space: nowrap; } /* ============================================ RESPONSIVE DESIGN ============================================ */ @media (max-width: 968px) { :root { --section-padding: 60px 20px; } /* Header móvil más compacto */ .header-inner { padding: 4px 15px !important; } .site-logo, .custom-logo-link { max-width: 60px !important; max-height: 30px !important; } .site-logo img, .site-logo a img, .custom-logo { max-height: 30px !important; max-width: 60px !important; } .main-nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 400px; height: 100vh; background: var(--primary-dark); padding: 80px 30px 30px; transition: right var(--transition-normal); box-shadow: -5px 0 20px rgba(0,0,0,0.5); z-index: 999; } .main-nav.active { right: 0; } .main-nav ul { flex-direction: column; gap: 20px; align-items: flex-start; } .main-nav a { font-size: 1rem !important; } .nav-cta { font-size: 1rem !important; padding: 12px 24px !important; } .mobile-menu-toggle { display: block; z-index: 1001; } .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } .hero-section { padding-top: 80px !important; min-height: 90vh; } .experience-image { height: 160px !important; } .route-timeline::before { left: 30px; } .route-stop::before { left: 30px; } .booking-container { padding: 40px 30px; } .form-grid { grid-template-columns: 1fr; } .mobile-sticky-bar { display: block; } } @media (max-width: 640px) { /* Header ultra compacto en móvil pequeño */ .header-inner { padding: 3px 10px !important; } .site-logo, .custom-logo-link { max-width: 50px !important; max-height: 28px !important; } .site-logo img, .site-logo a img, .custom-logo { max-height: 28px !important; max-width: 50px !important; } .hero-section { padding-top: 35px !important; } .hero-cta-group { flex-direction: column; align-items: center; } .btn { width: 100%; max-width: 300px; } .experiences-grid { grid-template-columns: 1fr; gap: 30px; } .benefits-grid { grid-template-columns: 1fr; gap: 30px; } .experience-card { padding: 25px 20px; } .experience-image { height: 140px !important; } .footer-content { grid-template-columns: 1fr; text-align: center; } .social-links { justify-content: center; } .calendar-grid { gap: 5px; } .calendar-day { font-size: 0.9rem; } h1 { font-size: 2rem !important; } h2 { font-size: 1.75rem !important; } .mobile-menu-toggle { padding: 5px; } .mobile-menu-toggle span { width: 22px; } } /* ============================================ ANIMATIONS & EFFECTS ============================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } .fade-in { animation: fadeIn 1s ease-out; } .slide-in-left { animation: slideInLeft 0.8s ease-out; } .slide-in-right { animation: slideInRight 0.8s ease-out; } /* Scroll Reveal */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } /* Loading Spinner */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(247,105,52,0.3); border-radius: 50%; border-top-color: var(--primary-orange); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================ ENHANCED INTERACTIVE EFFECTS ============================================ */ /* Pulse Animation for CTAs */ @keyframes pulse-cta { 0%, 100% { box-shadow: 0 0 20px rgba(247,105,52,0.4); } 50% { box-shadow: 0 0 40px rgba(247,105,52,0.7); } } .btn-primary:not(:hover) { animation: pulse-cta 3s ease-in-out infinite; } /* Enhanced Card Hover Effects */ .experience-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .experience-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 60px rgba(247,105,52,0.3); } /* Route Stop Enhanced Hover */ .route-stop { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .route-stop:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 15px 50px rgba(247,105,52,0.4); } /* Smooth Header Transition */ .site-header { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .site-header.scrolled { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } /* Booking Container Interactive Effect */ .booking-container { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .booking-container:hover { box-shadow: 0 0 40px rgba(247,105,52,0.15); } /* FAQ Item Enhanced Transition */ .faq-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .faq-item:hover { transform: translateX(5px); border-color: rgba(247,105,52,0.3); } /* Calendar Day Enhanced Animation */ @keyframes calendar-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .calendar-day.available:active { animation: calendar-pop 0.3s ease; } /* Floating Animation for Stop Numbers */ @keyframes float-stop { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } .stop-number { animation: float-stop 3s ease-in-out infinite; } /* ============================================ PRINT STYLES ============================================ */ @media print { .site-header, .mobile-sticky-bar, .booking-section { display: none; } body { background: white; color: black; } } /* ============================================ ACCESSIBILITY ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } *:focus-visible { outline: 2px solid var(--primary-orange); outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== v3.0.16 Mobile & UX Fixes ===== */ html, body { overflow-x: hidden !important; } /* Logo bigger on mobile and override inline height */ @media (max-width: 768px) { .site-logo, .site-logo img, .site-logo a img { max-height: 90px !important; max-width: 180px !important; height: auto !important; width: auto !important; } } /* Show sections immediately on mobile (disable reveal delays) */ @media (max-width: 768px) { .reveal, .experience-card, .partner-card, .section-title, .section-description { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Booking calendar visible and full width */ .booking-section { display: block !important; } .booking-section .calendar-wrapper { max-width: 100% !important; overflow: visible !important; } .booking-section .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; width: 100% !important; } /* Remove white duplicate icon in product lists; keep themed orange check from CSS */ .experience-features li svg, .checklist li svg { display: none !important; } /* ============================================ PARTICIPATING BARS - 4x2 GRID & MOBILE SLIDER ============================================ */ /* Desktop Grid 4x2 */ .partners-grid-4x2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1400px; margin: 40px auto; } .partner-logo-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(247, 105, 52, 0.2); border-radius: 16px; padding: 30px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; min-height: 180px; } .partner-logo-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(247,105,52,0.1) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .partner-logo-card:hover { transform: translateY(-8px); border-color: rgba(247, 105, 52, 0.6); box-shadow: 0 12px 30px rgba(247, 105, 52, 0.25); } .partner-logo-card:hover::before { opacity: 1; } .partner-logo-card img { max-width: 100%; max-height: 160px; width: auto; height: auto; object-fit: contain; display: block; transition: transform 0.3s ease; } .partner-logo-card:hover img { transform: scale(1.05); } /* ======================================== PARTNERS CAROUSEL - MOBILE (v4.1.4 ADJUSTED) ======================================== */ /* Mobile Slider Container */ .partners-mobile-slider { display: none; position: relative; width: 100%; max-width: 100%; margin: 40px auto; padding: 0 70px; } /* Viewport - what user sees */ .partners-viewport { width: 100%; overflow: hidden; border-radius: 16px; } /* Wrapper that moves */ .partners-slider-wrapper { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } /* Each slide */ .partner-logo-slide { min-width: 100%; width: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; } .partner-logo-slide a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #2A2D35; border: 2px solid #F76934; border-radius: 12px; padding: 35px 20px; min-height: 420px; transition: all 0.3s ease; } .partner-logo-slide a:hover { background: #32353D; border-color: #F76934; transform: scale(1.01); } .partner-logo-slide img { max-width: 92%; max-height: 350px; width: auto; height: auto; object-fit: contain; display: block; } /* Navigation Buttons */ .partner-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #F76934; border: none; color: white; width: 50px; height: 50px; border-radius: 50%; font-size: 28px; font-weight: bold; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(247, 105, 52, 0.3); line-height: 1; padding: 0; } .partner-nav-btn:hover { background: #FF7A42; transform: translateY(-50%) scale(1.1); box-shadow: 0 6px 16px rgba(247, 105, 52, 0.5); } .partner-nav-btn:active { transform: translateY(-50%) scale(0.95); } .partner-nav-prev { left: 5px; } .partner-nav-next { right: 5px; } /* Dots Navigation */ .partner-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; padding: 10px; } .partner-dot { width: 10px; height: 10px; background: rgba(247, 105, 52, 0.3); border: none; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; padding: 0; } .partner-dot:hover { background: rgba(247, 105, 52, 0.6); transform: scale(1.2); } .partner-dot.active { background: #F76934; width: 26px; border-radius: 5px; } /* Responsive Breakpoints */ @media (min-width: 769px) { #partners-grid-desktop { display: grid; } #partners-slider-mobile { display: none; } } @media (max-width: 768px) { #partners-grid-desktop { display: none; } #partners-slider-mobile { display: block; } .partners-mobile-slider { padding: 0 60px; margin: 30px auto; } .partner-logo-slide a { padding: 40px 20px; min-height: 460px; } .partner-logo-slide img { max-width: 94%; max-height: 380px; } .partner-nav-btn { width: 48px; height: 48px; font-size: 26px; } } @media (max-width: 480px) { .partners-mobile-slider { padding: 0 55px; margin: 25px auto; } .partner-logo-slide a { padding: 35px 18px; min-height: 420px; } .partner-logo-slide img { max-width: 95%; max-height: 350px; } .partner-nav-btn { width: 44px; height: 44px; font-size: 24px; } .partner-dots { gap: 8px; } .partner-dot { width: 8px; height: 8px; } .partner-dot.active { width: 22px; } } @media (max-width: 375px) { .partners-mobile-slider { padding: 0 50px; } .partner-logo-slide a { padding: 32px 16px; min-height: 400px; } .partner-logo-slide img { max-width: 96%; max-height: 336px; } .partner-nav-btn { width: 40px; height: 40px; font-size: 22px; } } /* Old partners grid styles - keeping for backward compatibility */ #partners-grid { gap: 16px; } @media (max-width: 1023.98px) { #partners-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 12px; } #partners-grid .partner-card { min-width: 100% !important; max-width: 100% !important; scroll-snap-align: center; } } @media (min-width: 1024px) { #partners-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; max-width: 1080px; margin: 0 auto; } #partners-grid .partner-card { margin: 0 !important; min-width: 0 !important; } } /* ============================================ 🌟 ANIMATED BACKGROUND EFFECTS v3.0.21 ============================================ */ /* Animated Gradient Background */ .bg-gradient-animated { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(12,15,20,0.95) 0%, rgba(247,105,52,0.15) 25%, rgba(26,29,35,0.95) 50%, rgba(247,105,52,0.1) 75%, rgba(12,15,20,0.95) 100%); background-size: 400% 400%; animation: gradientFlow 20s ease infinite; z-index: 0; pointer-events: none; } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Floating Particles Background */ .bg-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; } .bg-particle { position: absolute; width: 3px; height: 3px; background: rgba(247,105,52,0.4); border-radius: 50%; box-shadow: 0 0 10px rgba(247,105,52,0.3); animation: particleFloat 25s infinite; } .bg-particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 20s; } .bg-particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 25s; } .bg-particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 22s; } .bg-particle:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 23s; } .bg-particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 24s; } .bg-particle:nth-child(6) { left: 60%; animation-delay: 5s; animation-duration: 21s; } .bg-particle:nth-child(7) { left: 70%; animation-delay: 2s; animation-duration: 26s; } .bg-particle:nth-child(8) { left: 80%; animation-delay: 4s; animation-duration: 20s; } @keyframes particleFloat { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) scale(1.2); opacity: 0; } } /* Geometric Shapes Background */ .bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; } .bg-shape { position: absolute; opacity: 0.08; } .bg-shape.circle { width: 200px; height: 200px; border: 2px solid var(--primary-orange); border-radius: 50%; top: 15%; left: 8%; animation: shapeRotate 35s linear infinite; } .bg-shape.square { width: 150px; height: 150px; border: 2px solid var(--accent-gold); top: 60%; right: 12%; animation: shapeRotate 40s linear infinite reverse; } .bg-shape.triangle { width: 0; height: 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 155px solid var(--primary-orange); top: 40%; right: 35%; animation: shapeRotate 45s linear infinite; } @keyframes shapeRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Wave Animation */ .bg-wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: url('data:image/svg+xml,') repeat-x; background-size: 1200px 120px; animation: waveMove 30s linear infinite; opacity: 0.15; z-index: 0; pointer-events: none; } @keyframes waveMove { 0% { background-position-x: 0; } 100% { background-position-x: 1200px; } } /* Radial Pulse Background */ .bg-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; background: radial-gradient(circle, rgba(247,105,52,0.12) 0%, transparent 70%); animation: pulseBreath 18s ease-in-out infinite; z-index: 0; pointer-events: none; } @keyframes pulseBreath { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.7; } } /* Blur Overlay (activates on scroll) */ .bg-blur-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); background: rgba(12,15,20,0.2); z-index: 1; transition: all 0.4s ease; pointer-events: none; } .bg-blur-overlay.active { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(12,15,20,0.35); } /* Section positioning for effects */ section.with-effects { position: relative; overflow: hidden; } section.with-effects > * { position: relative; z-index: 10; } /* Mobile optimizations for effects */ @media (max-width: 768px) { .bg-particle { width: 2px; height: 2px; } .bg-shape.circle { width: 100px; height: 100px; } .bg-shape.square { width: 80px; height: 80px; } .bg-shape.triangle { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 85px solid var(--primary-orange); } .bg-wave { height: 80px; } .bg-pulse { animation-duration: 25s; } } /* Performance optimization */ .bg-gradient-animated, .bg-particle, .bg-shape, .bg-wave, .bg-pulse { will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); } /* Disable effects for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .bg-gradient-animated, .bg-particles, .bg-shapes, .bg-wave, .bg-pulse { animation: none !important; } .bg-particle, .bg-shape { display: none; } } /* ============================================ /* ============================================ 🎯 HERO SECTION AGGRESSIVE CENTERING - v3.0.23 Centrado FORZADO en todos los dispositivos ============================================ */ /* Reset completo del hero */ .hero-section { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 auto !important; position: relative !important; } .hero-section .container { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 40px !important; display: flex !important; justify-content: center !important; align-items: center !important; } /* FORZAR centrado del contenido */ .hero-content { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* H1 completamente centrado */ .hero-content h1 { text-align: center !important; width: 100% !important; max-width: 800px !important; margin: 0 auto 1.5rem auto !important; padding: 0 !important; display: block !important; left: 0 !important; right: 0 !important; position: relative !important; } /* Subtítulo centrado */ .hero-subtitle { text-align: center !important; width: 100% !important; max-width: 700px !important; margin: 0 auto 2rem auto !important; padding: 0 !important; display: block !important; left: 0 !important; right: 0 !important; position: relative !important; } /* Todos los párrafos dentro del hero */ .hero-content p { text-align: center !important; width: 100% !important; max-width: 700px !important; margin: 0 auto 1rem auto !important; padding: 0 !important; display: block !important; } /* Botones centrados */ .hero-cta-group { display: flex !important; justify-content: center !important; align-items: center !important; gap: 20px !important; flex-wrap: wrap !important; width: 100% !important; margin: 2rem auto 0 auto !important; padding: 0 !important; left: 0 !important; right: 0 !important; position: relative !important; } /* Responsive optimizado */ @media (max-width: 1200px) { .hero-section .container { padding: 0 30px !important; } .hero-content h1 { font-size: clamp(2.2rem, 6vw, 3.8rem) !important; } } @media (max-width: 1024px) { .hero-section { padding-left: 0 !important; padding-right: 0 !important; } .hero-section .container { padding: 0 25px !important; } .hero-content h1 { font-size: clamp(2rem, 6vw, 3.5rem) !important; max-width: 90% !important; } .hero-subtitle { max-width: 90% !important; } } @media (max-width: 768px) { .hero-section { min-height: 90vh !important; padding-top: 100px !important; padding-left: 0 !important; padding-right: 0 !important; } .hero-section .container { padding: 0 20px !important; } .hero-content { max-width: 100% !important; padding: 0 !important; } .hero-content h1 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; line-height: 1.2 !important; padding: 0 !important; max-width: 100% !important; } .hero-subtitle { font-size: clamp(1rem, 4vw, 1.2rem) !important; padding: 0 !important; max-width: 100% !important; } .hero-cta-group { flex-direction: column !important; gap: 15px !important; width: 100% !important; } .hero-cta-group .btn { width: 100% !important; max-width: 300px !important; text-align: center !important; } } @media (max-width: 480px) { .hero-section { padding-top: 80px !important; } .hero-section .container { padding: 0 15px !important; } .hero-content h1 { font-size: 1.6rem !important; padding: 0 !important; } .hero-subtitle { font-size: 0.95rem !important; padding: 0 !important; } } /* Fix absoluto para cualquier overflow */ body, html { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .hero-section, .hero-section *, .hero-content, .hero-content * { box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; } /* Anular cualquier estilo inline que pueda haber */ .hero-content[style], .hero-content h1[style], .hero-content p[style] { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Asegurar que accent span también esté centrado */ .hero-content h1 .accent { display: inline !important; } /* ============================================ 🔧 DESKTOP VISIBILITY FIX - v3.0.24 Arreglo para secciones que desaparecen en desktop ============================================ */ /* Hacer secciones visibles por defecto en desktop */ @media (min-width: 768px) { /* Todas las secciones con reveal deben ser visibles en desktop */ .reveal { opacity: 1 !important; transform: translateY(0) !important; } /* Secciones específicas forzadas como visibles */ .experiences-section, #experiences, #bar-offers, #meeting-point, section.reveal { opacity: 1 !important; visibility: visible !important; display: block !important; transform: translateY(0) !important; } /* Asegurar que el contenido interno también sea visible */ .experiences-section *, #bar-offers *, #meeting-point * { opacity: 1 !important; visibility: visible !important; } /* Fix para z-index si hay overlap */ .experiences-section { position: relative !important; z-index: 1 !important; } #bar-offers { position: relative !important; z-index: 2 !important; } #meeting-point { position: relative !important; z-index: 3 !important; } } /* Mantener reveal effect solo en mobile si se desea */ @media (max-width: 767px) { .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } } /* Fix adicional para overflow que pudiera ocultar contenido */ body, html, .site-content, main { overflow-x: hidden !important; overflow-y: visible !important; } /* Asegurar que ninguna sección tenga height limitado */ section { min-height: auto !important; overflow: visible !important; } /* Fix para animaciones que puedan causar problemas */ @media (min-width: 768px) { .ambient-bg::before, .ambient-bg::after { pointer-events: none !important; z-index: -1 !important; } } /* ============================================ 🔥 ULTIMATE FIX v3.0.25 Hero centrado + Tarjetas visibles en mobile ============================================ */ /* HERO: Resetear TODOS los estilos que puedan desplazar */ .hero-section, .hero-section .container, .hero-section .hero-content, .hero-section .hero-content * { position: relative !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* HERO: Forzar centrado absoluto */ .hero-section { text-align: center !important; display: flex !important; justify-content: center !important; align-items: center !important; } .hero-section .container { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; } .hero-section .hero-content { width: 100% !important; max-width: 100% !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .hero-section .hero-content h1, .hero-section .hero-content p, .hero-section .hero-content .hero-cta-group { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } .hero-section .hero-content h1 { max-width: 900px !important; } .hero-section .hero-content p { max-width: 700px !important; } /* MOBILE: Tarjetas de experiencias SIEMPRE visibles */ @media (max-width: 767px) { /* Forzar visibilidad de TODAS las tarjetas en mobile */ .experience-card, .experience-card.reveal, .experiences-grid .experience-card, #experiences .experience-card { opacity: 1 !important; visibility: visible !important; display: block !important; transform: translateY(0) !important; transition: none !important; } /* Asegurar que el grid también sea visible */ .experiences-grid { opacity: 1 !important; visibility: visible !important; display: flex !important; } /* Eliminar reveal animation en mobile para tarjetas */ .experience-card.reveal { animation: none !important; } } /* DESKTOP: Mantener fix anterior */ @media (min-width: 768px) { .experience-card, .experience-card.reveal { opacity: 1 !important; visibility: visible !important; display: block !important; } } /* Hero responsive mejorado */ @media (max-width: 768px) { .hero-section .container { padding: 0 20px !important; } .hero-section .hero-content h1 { font-size: clamp(1.5rem, 8vw, 2.5rem) !important; line-height: 1.2 !important; } .hero-section .hero-content p { font-size: clamp(0.95rem, 4vw, 1.2rem) !important; } } @media (max-width: 480px) { .hero-section .container { padding: 0 15px !important; } .hero-section .hero-content h1 { font-size: 1.5rem !important; } .hero-section .hero-content p { font-size: 0.9rem !important; } } /* ============================================ 🎯 RADICAL FIX v3.0.26 Banner inline + Tarjetas columna única mobile ============================================ */ /* HERO: Anular TODOS los estilos que puedan interferir */ .hero-section, .hero-section *, .hero-content, .hero-content * { box-sizing: border-box !important; } /* MOBILE: Forzar 1 COLUMNA en TODAS las tarjetas */ @media (max-width: 767px) { /* Experiences grid */ .experiences-grid { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 20px !important; } /* Tarjetas individuales */ .experience-card { width: 100% !important; max-width: 100% !important; margin: 0 auto 20px auto !important; display: block !important; } /* Ofertas Tipsy Bagel y Escuela de Calor */ #bar-offers .experiences-grid { display: flex !important; flex-direction: column !important; width: 100% !important; } #bar-offers .experience-card { width: 100% !important; max-width: 100% !important; margin: 0 auto 20px auto !important; } /* Hero mobile más compacto */ .hero-section { padding-top: 100px !important; min-height: auto !important; } .hero-section h1 { font-size: 1.8rem !important; line-height: 1.2 !important; margin-bottom: 1rem !important; } .hero-section p { font-size: 1rem !important; margin-bottom: 1.5rem !important; } /* Botones en columna en mobile */ .hero-cta-group { flex-direction: column !important; gap: 15px !important; } .hero-cta-group .btn { width: 100% !important; max-width: 300px !important; } } /* TABLET: También 1 columna */ @media (min-width: 768px) and (max-width: 1024px) { .experiences-grid { grid-template-columns: 1fr !important; } } /* DESKTOP: Asegurar centrado */ @media (min-width: 1025px) { .experiences-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 1100px !important; margin: 0 auto !important; } } /* Anular cualquier float que pueda causar problemas */ .experience-card, .experiences-grid, .experiences-section { float: none !important; clear: both !important; }