/* ==================== EQUIPO: DISEÑO COMPLETO - COZUMEL.LAT ==================== */ /* Estilos globales y maquetación principal */ body { font-family: var(--font-family-sans-serif); background-color: var(--bs-body-bg); color: var(--bs-body-color); padding-top: 76px; /* Compensa el header fijo */ } /* === HEADER === */ #main-header { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: var(--transition-smooth); z-index: 1030; } .navbar-brand img { height: 40px; width: auto; } .nav-link { color: var(--bs-body-color) !important; font-weight: var(--font-weight-normal); margin: 0 5px; transition: color 0.2s ease; } .nav-link:hover, .nav-link.active { color: var(--color-blue-coral) !important; font-weight: var(--font-weight-bold); } /* === HERO SECTION === */ .hero-section { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: white; } .hero-video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .hero-video-placeholder { width: 100%; height: 100%; background-size: cover; background-position: center; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(10, 28, 42, 0.6) 0%, rgba(0, 102, 128, 0.7) 100%); } .hero-content { position: relative; z-index: 2; } .hero-title { text-shadow: 2px 2px 10px rgba(0,0,0,0.5); } .search-giant { max-width: 650px; position: relative; } #hero-search-input { border-radius: 50px 0 0 50px; border: none; padding: 15px 25px; } .hero-search-btn { border-radius: 0 50px 50px 0; padding: 15px 30px; } .autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow-lg); margin-top: 10px; max-height: 300px; overflow-y: auto; display: none; z-index: 1000; } /* === CARDS DE EXPLORACIÓN === */ .explore-card { border-radius: var(--border-radius); border: none; overflow: hidden; transition: var(--transition-smooth); background: white; box-shadow: var(--box-shadow-sm); } .explore-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-lg); } .explore-card img { height: 200px; object-fit: cover; transition: transform 0.5s ease; } .explore-card:hover img { transform: scale(1.05); } .explore-card .card-body { position: relative; padding: 2rem; } .card-icon { color: var(--color-blue-coral); } /* === SERVICIOS TURÍSTICOS === */ .service-card { text-align: center; padding: 2rem 1rem; background: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow-sm); height: 100%; transition: var(--transition-base); } .service-card:hover { box-shadow: var(--box-shadow); transform: scale(1.02); } /* === MAPA === */ #cozumel-map { z-index: 1; box-shadow: var(--box-shadow-lg); } /* === SECCIONES GENERALES === */ .section-padding { padding: 5rem 0; } .section-header h2 { color: var(--color-dark-blue); position: relative; } .section-header h2::after { content: ''; display: block; width: 80px; height: 4px; background: linear-gradient(to right, var(--color-turquoise), var(--color-coral)); margin: 1rem auto 0; } /* === FOOTER === */ .footer-section { background-color: var(--color-dark-blue) !important; border-top: 5px solid var(--color-turquoise); } /* ==================== PREPARACIÓN PARA DARK MODE ==================== */ /* Se activa añadiendo data-bs-theme="dark" al elemento o mediante JS */ [data-bs-theme="dark"] { --bs-body-bg: #111c27; --bs-body-color: #e9ecef; --glass-bg: rgba(10, 28, 42, 0.8); --glass-border: 1px solid rgba(255, 255, 255, 0.1); --bs-light: #1e2d3d; /* Se pueden sobreescribir todas las variables necesarias aquí */ } [data-bs-theme="dark"] .card { background-color: #1e2d3d; color: #f8f9fa; } [data-bs-theme="dark"] .navbar { background: rgba(10, 28, 42, 0.9) !important; }