/* --- MENÚ DE NAVEGACIÓN SUPERIOR --- */ .main-nav { position: fixed; /* Cambiamos absolute por fixed para que persiga al usuario */ top: 0; left: 0; width: 100%; padding: 25px 0; z-index: 1000; background-color: transparent; /* Inicia transparente */ transition: background-color 0.4s ease, padding 0.4s ease, border-bottom 0.4s ease; /* Transición suave */ } /* Nueva clase que se activará al hacer scroll */ .main-nav.nav-scrolled { background-color: #000000; /* Fondo negro Commando */ padding: 15px 0; /* Lo hacemos un poco más delgado para que no estorbe */ border-bottom: 1px solid #1a1a1a; /* Línea sutil para separarlo del contenido */ } /* El resto de tus clases del nav se quedan igual (.nav-container, .nav-logo, etc.) */ .nav-container { display: flex; justify-content: space-between; align-items: center; } .nav-logo { font-family: var(--font-heading); color: var(--color-white); font-size: 2.2rem; text-decoration: none; font-weight: 700; letter-spacing: 2px; } .nav-logo span { color: var(--color-red); } .nav-links { display: flex; gap: 40px; } .nav-link { color: var(--color-white); text-decoration: none; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 2px; transition: var(--transition-base); } .nav-link:hover { color: var(--color-red); } /* Ajuste específico para el botón del nav para que no se vea tosco */ .nav-btn { padding: 12px 30px; font-size: 0.9rem; } /* --- RESPONSIVE DEL MENÚ --- */ @media (max-width: 768px) { .nav-container { flex-direction: column; gap: 15px; } .nav-links { gap: 20px; } } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-bg: #000000; /* Negro puro estilo Commando */ --color-surface: #0a0a0a; --color-red: #D50000; /* Rojo vibrante y agresivo */ --color-white: #ffffff; --color-gray: #888888; /* Fuentes: Oswald para títulos agresivos, Montserrat para lectura */ --font-heading: 'Oswald', sans-serif; --font-body: 'Montserrat', sans-serif; --transition-base: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body { /* Tus propiedades originales */ background-color: var(--color-bg); color: var(--color-white); font-family: var(--font-body); overflow-x: hidden; /* Las luces agregadas */ background-image: radial-gradient(250px circle at 88% 58%, rgba(0, 163, 255, 0.3) 0%, transparent 100%), radial-gradient(300px circle at 0% 75%, rgba(0, 163, 255, 0.25) 0%, transparent 100%), radial-gradient(200px circle at 85% 105%, rgba(0, 163, 255, 0.3) 0%, transparent 100%); /* Opcional, pero recomendado si esto va en el o en un contenedor principal: */ min-height: 100vh; margin: 0; /* Las luces agregadas */ background-image: radial-gradient(250px circle at 88% 58%, rgba(0, 163, 255, 0.3) 0%, transparent 100%), radial-gradient(300px circle at 0% 75%, rgba(0, 163, 255, 0.25) 0%, transparent 100%), radial-gradient(200px circle at 85% 105%, rgba(0, 163, 255, 0.3) 0%, transparent 100%); /* Opcional, pero recomendado si esto va en el o en un contenedor principal: */ min-height: 100vh; margin: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 30px; position: relative; z-index: 10; } /* --- ELEMENTOS PARALLAX DE FONDO --- */ /* Estos simulan los gráficos del logo en los bordes */ .parallax-bg-element { position: fixed; top: 20%; width: 400px; height: 800px; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: contain; z-index: 0; pointer-events: none; /* Para que no estorben al hacer clic */ } .graphic-left { left: -150px; transform: rotate(15deg); } .graphic-right { right: -150px; top: 40%; transform: rotate(-165deg); } /* --- UTILIDADES --- */ .text-highlight-red { color: #1071b3; } .btn { display: inline-block; padding: 15px 40px; text-decoration: none; font-weight: 900; font-family: var(--font-body); font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; transition: var(--transition-base); border: 2px solid transparent; } .btn-red { background-color: var(--color-red); color: var(--color-white); border-radius: 40px; } .btn-red:hover { background-color: transparent; border-color: var(--color-red); color: var(--color-red); box-shadow: 0 0 20px rgba(213, 0, 0, 0.4); } /* --- HERO SECTION CON PARALLAX --- */ .hero-section { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; /* MAGIA DEL PARALLAX AQUI */ background-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.9) 100%), url('assets/hero-banner-iron.png'); background-size: cover; background-position: center; background-attachment: fixed; /* Esto hace que la imagen se quede quieta al hacer scroll */ position: relative; z-index: 1; } .hero-content { margin-top: 100px; } .logo-iron { font-family: var(--font-heading); font-size: 12rem; font-weight: 700; line-height: 0.8; letter-spacing: -5px; color: var(--color-white); text-shadow: 0 10px 30px rgba(0,0,0,0.8); } .logo-subtitle { font-size: 1.5rem; letter-spacing: 4px; text-transform: uppercase; color: var(--color-red); } .hero-tagline { margin-top: 40px; font-size: 1.2rem; letter-spacing: 5px; font-weight: 700; color: var(--color-gray); } /* --- SECTION MÉTODO --- */ .method-section { padding: 120px 0; } .method-text-container { text-align: center; margin-bottom: 80px; } .section-title { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; } .method-card { display: flex; background-color: var(--color-surface); border: 1px solid #1a1a1a; border-radius: 4px; /* Bordes más rectos, más agresivo */ } .method-card-img-container { width: 50%; } .method-card-img { width: 100%; height: 100%; object-fit: cover; /*filter: grayscale(100%) contrast(1.2);*/ /* Efecto desaturado */ } .method-card-content { width: 50%; padding: 60px; display: flex; flex-direction: column; justify-content: center; } .method-card-content h3 { font-size: 1.5rem; margin-bottom: 20px; font-weight: 700; } .strong-text { color: var(--color-red); font-weight: 900; font-size: 1.2rem; margin-bottom: 10px; } /* --- SECTION PROGRAMAS (NUEVO) --- */ .programs-section { padding: 100px 0; border-top: 1px solid #111; } .section-header { text-align: center; margin-bottom: 60px; } .section-header p { color: var(--color-gray); font-size: 1.2rem; margin-top: 10px; } .programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .program-card { position: relative; height: 450px; border-radius: 4px; overflow: hidden; cursor: pointer; } .program-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(80%); transition: var(--transition-base); } /* Capa oscura sobre la imagen */ .program-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%); transition: var(--transition-base); } .program-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; z-index: 2; transition: var(--transition-base); } .program-name { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-white); margin-bottom: 10px; transition: var(--transition-base); } .program-desc { color: #ccc; font-size: 0.9rem; line-height: 1.5; margin-bottom: 15px; } /* Beneficios ocultos por defecto */ .program-benefits { max-height: 0; opacity: 0; overflow: hidden; transition: var(--transition-base); } .program-benefits h4 { color: var(--color-red); margin-bottom: 5px; font-size: 0.9rem; } .program-benefits ul { list-style-position: inside; color: #aaa; font-size: 0.85rem; } /* HOVER EFFECTS EN PROGRAMAS */ .program-card:hover .program-bg { transform: scale(1.1); filter: grayscale(0%); } .program-card:hover::after { background: linear-gradient(to top, rgba(213,0,0,0.9) 0%, rgba(0,0,0,0.4) 100%); } .program-card:hover .program-name { transform: translateY(-10px); } .program-card:hover .program-benefits { max-height: 150px; opacity: 1; margin-top: 15px; } /* --- SECTION PLANES (ASIMÉTRICO) --- */ .plans-section { padding: 120px 0; margin-bottom: 50px; } .plans-layout { display: flex; align-items: stretch; background-color: var(--color-surface); border: 1px solid #1a1a1a; } .plans-text-side { width: 40%; padding: 60px; display: flex; flex-direction: column; justify-content: center; } .plans-title { font-family: var(--font-heading); font-size: 5rem; line-height: 1; color: var(--color-red); } .plans-subtitle { font-size: 1.2rem; color: var(--color-gray); margin-top: 10px; } .plans-banner-side { width: 60%; position: relative; overflow: hidden; } .plans-banner-media { width: 100%; height: 100%; object-fit: cover; filter: grayscale(50%); } .banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .btn-massive { font-size: 1.2rem; padding: 20px 50px; } /* --- ANIMACIONES SCROLL --- */ .element-visible { opacity: 1 !important; transform: translate(0, 0) scale(1) !important; } [data-scroll="fade-up"] { opacity: 0; transform: translateY(40px); transition: var(--transition-base); } /* --- RESPONSIVE --- */ @media (max-width: 992px) { .logo-iron { font-size: 8rem; } .programs-grid { grid-template-columns: 1fr; } .plans-layout { flex-direction: column; } .plans-text-side, .plans-banner-side { width: 100%; } .plans-banner-side { height: 300px; } } @media (max-width: 768px) { .logo-iron { font-size: 5rem; } .section-title { font-size: 2.2rem; } .method-card { flex-direction: column; } .method-card-img-container, .method-card-content { width: 100%; } .method-card-img-container { height: 250px; } .parallax-bg-element { display: none; /* Ocultar en móviles para mejor rendimiento */ } } /* ========================================= ESTILOS PARA LANDING PAGES INTERNAS (HYROX) ========================================= */ /* --- Navegación Superior --- */ .top-nav { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; padding: 30px; display: flex; justify-content: space-between; align-items: center; z-index: 100; } .nav-back-link { color: var(--color-white); text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; transition: var(--transition-base); } .nav-back-link:hover { color: var(--color-red); } .nav-brand { font-family: var(--font-heading); color: var(--color-red); font-size: 1.2rem; letter-spacing: 2px; } /* --- Hero Específico de Hyrox --- */ .hero-hyrox { /* Imagen enfocada en running/resistencia para Hyrox */ background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgba(0, 0, 0, 0.95) 100%), url(assets/hyrox-hero.png); } .title-hyrox { font-size: 10rem; /* Un poco más pequeño que IRON para que quepa bien */ color: var(--color-white); } /* --- Ajustes para texto alineado a la izquierda --- */ .text-left { text-align: left; } /* --- Cuadrícula de Estaciones --- */ .stations-section { padding: 80px 0; border-top: 1px solid #111; } .stations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .station-card { background-color: var(--color-surface); border: 1px solid #1a1a1a; padding: 30px 20px; border-radius: 4px; text-align: center; transition: var(--transition-base); position: relative; overflow: hidden; } .station-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: var(--color-red); transform: scaleX(0); transition: var(--transition-base); transform-origin: left; } .station-card:hover { transform: translateY(-5px); border-color: #333; } .station-card:hover::before { transform: scaleX(1); } .station-number { font-family: var(--font-heading); font-size: 3rem; color: #1a1a1a; /* Gris muy oscuro, casi invisible */ position: absolute; top: -10px; right: 10px; font-weight: 900; z-index: 0; transition: var(--transition-base); } .station-card:hover .station-number { color: #333; /* Se ilumina un poco al pasar el mouse */ } .station-card h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 10px; position: relative; z-index: 1; } .station-card p { color: var(--color-red); font-size: 0.9rem; font-weight: 700; position: relative; z-index: 1; } /* --- Responsive para la cuadrícula de estaciones --- */ @media (max-width: 992px) { .stations-grid { grid-template-columns: repeat(2, 1fr); } .title-hyrox { font-size: 8rem; } } @media (max-width: 768px) { .stations-grid { grid-template-columns: 1fr; } .title-hyrox { font-size: 5rem; } .top-nav { flex-direction: column; gap: 15px; } } /* ========================================= GALERÍA DE INSTAGRAM (Index) ========================================= */ .social-gallery { padding: 80px 0 0 0; border-top: 1px solid #1a1a1a; text-align: center; background-color: transparent; } .social-header { margin-bottom: 40px; } .social-handle { color: var(--color-red); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; text-decoration: none; letter-spacing: 1px; } .social-title { font-family: var(--font-heading); font-size: 3rem; color: var(--color-white); margin-top: 5px; } .ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; /* Sin bordes, estilo collage */ width: 100%; max-width: 1200px; /* Ancho para que se vea premium */ margin: 0 auto; } .ig-item { display: block; overflow: hidden; aspect-ratio: 1 / 1; /* Cuadrados perfectos */ } .ig-photo { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .ig-item:hover .ig-photo { transform: scale(1.05); /* Efecto hover */ } @media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ig-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .hero-section { /* Cambia el comportamiento en móviles para evitar el zoom masivo */ background-attachment: scroll; } } /* === BOTÓN FLOTANTE WHATSAPP === */ .whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 40px; left: 20px; /* Posicionado a la izquierda */ background-color: #25d366; /* Color oficial de WhatsApp */ color: #FFF; border-radius: 50px; box-shadow: 2px 2px 15px rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .whatsapp-float:hover { background-color: #128C7E; transform: scale(1.1); /* Efecto de crecimiento al pasar el mouse */ } .whatsapp-icon { width: 35px; height: 35px; fill: white; } /* --- SECTION RESERVAS --- */ .booking-section { padding: 100px 0; border-top: 1px solid #1a1a1a; } .booking-container { max-width: 600px; margin: 0 auto; background-color: var(--color-surface); padding: 40px; border-radius: 4px; border: 1px solid #1a1a1a; box-shadow: 0 10px 30px rgba(0,0,0,0.8); } .booking-form .form-group { margin-bottom: 20px; } .booking-form input, .booking-form select { width: 100%; padding: 15px 20px; background-color: #000000; border: 1px solid #333; color: var(--color-white); font-family: var(--font-body); font-size: 1rem; border-radius: 4px; transition: var(--transition-base); } .booking-form input:focus, .booking-form select:focus { outline: none; border-color: var(--color-red); box-shadow: 0 0 10px rgba(227, 0, 15, 0.2); } /* Estilo específico para las opciones del select en modo oscuro */ .booking-form select option { background-color: #000000; color: var(--color-white); } /* SECCIÓN DE MAPA Y UBICACIÓN */ .location-section { padding: 40px 20px 100px; max-width: 1200px; margin: 0 auto; } .map-container { display: flex; background: #0a0a0a; border: 1px solid #222; border-radius: 8px; overflow: hidden; margin-top: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); } .map-info { width: 40%; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg, #111 0%, #000 100%); border-right: 3px solid #e3000f; } .map-info h3 { font-family: 'Oswald', sans-serif; font-size: 2rem; color: #fff; margin-bottom: 20px; letter-spacing: 1px; } .map-info p { color: #ccc; font-size: 1rem; line-height: 1.6; font-family: 'Montserrat', sans-serif; } .map-iframe-wrapper { width: 60%; position: relative; min-height: 400px; } /* Branding IRON: Filtro para oscurecer el mapa estándar de Google */ .map-iframe-wrapper iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; filter: invert(90%) hue-rotate(180deg) grayscale(40%) contrast(1.1); } /* Responsive para la sección del mapa */ @media (max-width: 900px) { .map-container { flex-direction: column; } .map-info { width: 100%; border-right: none; border-bottom: 3px solid #e3000f; padding: 40px 30px; } .map-iframe-wrapper { width: 100%; height: 350px; } } /* ETIQUETAS SIN COSTO */ .free-trial-iron { color: #0066ff; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; margin-bottom: 5px; display: block; letter-spacing: 0.5px; } .free-trial-box { color: #e3000f; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; margin-bottom: 5px; display: block; letter-spacing: 0.5px; } .free-trial-hyrox { color: #ffe600; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; margin-bottom: 5px; display: block; letter-spacing: 0.5px; }