/** * Hero Unified Styles - Kenkatsu * Estilos unificados para TODOS los heroes (homepage y páginas de servicios) * Efecto verde teal unificado - Imagen más visible con fondo oscuro * * @package KenkatsuTheme * @version 1.0 */ /* ============================================ HERO UNIFIED - ESTILOS IDÉNTICOS PARA TODOS ============================================ */ /* Fondo unificado - Sutil para que la imagen destaque */ .kenkatsu-hero-section .hero-background { background: linear-gradient(135deg, #1a1a1a 0%, #252525 50%, #1a1a1a 100%) !important; } /* Overlay unificado - Oscuro pero no tanto: la imagen se mantiene visible */ .kenkatsu-hero-section .hero-overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(18, 78, 74, 0.4) 50%, rgba(0, 0, 0, 0.35) 100% ) !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; } /* Asegurar específicamente para Bike Area - Mayor especificidad */ .kenkatsu-page-bike-area .kenkatsu-hero-section .hero-overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(18, 78, 74, 0.6) 50%, rgba(0, 0, 0, 0.55) 100% ) !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; opacity: 1 !important; visibility: visible !important; } /* Imagen de fondo - Visible, oscuro pero no tanto */ .kenkatsu-hero-section .hero-bg-image { opacity: 0.92 !important; filter: brightness(0.88) contrast(1.1) !important; position: absolute !important; z-index: 1 !important; } /* Hero Content - Los estilos base vienen de homepage.css que ahora se carga en todas las páginas */ /* Solo necesitamos asegurar que el contenido esté visible */ /* Título Hero - Los estilos base vienen de homepage.css que ahora se carga en todas las páginas */ /* Subtítulo Hero - Los estilos base vienen de homepage.css que ahora se carga en todas las páginas */ /* Solo override para quitar uppercase si es necesario */ .kenkatsu-page-experiencias .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-crioterapia .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-hipoxia .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-camaras-hiperbaricas .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-oxigenoterapia .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-luz-roja .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-fisioterapia .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-gimnasio .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-personal-trainer .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-bike-area .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-pilates .kenkatsu-hero-section .hero-subtitle, .kenkatsu-page-yoga .kenkatsu-hero-section .hero-subtitle { text-transform: none; /* Quitar uppercase del subtitle */ } /* Botones Hero */ .kenkatsu-hero-section .hero-buttons { position: relative !important; z-index: 11 !important; visibility: visible !important; opacity: 1 !important; display: flex !important; flex-direction: column; gap: 1rem; align-items: center; animation: fadeIn 0.6s ease-out 0.2s both; } /* Mejorar hover de botones hero en todas las páginas - Contraste mejorado */ .kenkatsu-hero-section .btn-primary:hover, .kenkatsu-hero-section .hero-buttons .btn-primary:hover { background: linear-gradient(135deg, var(--kenkatsu-teal) 0%, #14b8a6 100%) !important; color: #FFFFFF !important; transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 15px 40px rgba(13, 148, 136, 0.6), 0 0 50px rgba(13, 148, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; border-color: transparent !important; } /* Animación fadeIn */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ RESPONSIVE ============================================ */ @media (min-width: 640px) { .kenkatsu-hero-section .hero-buttons { flex-direction: row; justify-content: center; } } @media (max-width: 768px) { .kenkatsu-hero-section { min-height: 60vh !important; } .kenkatsu-hero-section .hero-content { padding-top: 100px !important; padding-bottom: 2rem !important; } /* Mobile: mantener mismo estilo unificado */ .kenkatsu-page-crioterapia .kenkatsu-hero-section .hero-background, .kenkatsu-page-hipoxia .kenkatsu-hero-section .hero-background, .kenkatsu-page-camaras-hiperbaricas .kenkatsu-hero-section .hero-background, .kenkatsu-page-oxigenoterapia .kenkatsu-hero-section .hero-background, .kenkatsu-page-luz-roja .kenkatsu-hero-section .hero-background, .kenkatsu-page-fisioterapia .kenkatsu-hero-section .hero-background, .kenkatsu-page-gimnasio .kenkatsu-hero-section .hero-background, .kenkatsu-page-personal-trainer .kenkatsu-hero-section .hero-background, .kenkatsu-page-bike-area .kenkatsu-hero-section .hero-background, .kenkatsu-page-pilates .kenkatsu-hero-section .hero-background, .kenkatsu-page-yoga .kenkatsu-hero-section .hero-background { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%) !important; } .kenkatsu-page-crioterapia .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-hipoxia .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-camaras-hiperbaricas .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-oxigenoterapia .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-luz-roja .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-fisioterapia .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-gimnasio .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-personal-trainer .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-bike-area .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-pilates .kenkatsu-hero-section .hero-bg-image, .kenkatsu-page-yoga .kenkatsu-hero-section .hero-bg-image { opacity: 0.65 !important; /* Un poco menos en mobile pero aún visible */ } .kenkatsu-page-crioterapia .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-hipoxia .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-camaras-hiperbaricas .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-oxigenoterapia .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-luz-roja .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-fisioterapia .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-gimnasio .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-personal-trainer .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-bike-area .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-pilates .kenkatsu-hero-section .hero-overlay, .kenkatsu-page-yoga .kenkatsu-hero-section .hero-overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(18, 78, 74, 0.65) 50%, rgba(0, 0, 0, 0.7) 100% ) !important; } } /* ============================================ NOTA IMPORTANTE ============================================ */ /* * Este archivo solo aplica el efecto verde teal como overlay adicional. * Los estilos base de hero-content, hero-title y hero-subtitle * se heredan de homepage.css que ya funciona correctamente. * * Para que los títulos se vean, asegúrate de que: * 1. La estructura HTML sea idéntica a page-home.php * 2. homepage.css esté cargado (se carga globalmente o por template) * 3. Este CSS solo añade el efecto verde teal sin interferir */