/* ========================================================================== FRONT PAGE (HERO FULLSCREEN) ========================================================================== */ .front-page-main { margin: 0; padding: 0; display: flex; flex-direction: column; /* El main ya tiene flex: 1 0 auto en style.css, permitiendo la absorción */ } .hero-fullscreen { position: relative; /* ELIMINADO: height: 100vh; -> Sustituido por expansión flex */ flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; /* Salvaguarda lógica: si el viewport es enano (ej. apaisado), fuerza scroll en lugar de colapsar */ min-height: 500px; } .hero-background { position: absolute; inset: 0; z-index: -1; background-color: #000; } .hero-background img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.8; transition: opacity 0.3s ease; } .hero-content { position: relative; z-index: 1; text-align: center; color: #ffffff; padding: 0 2rem; max-width: 1200px; } .value-proposition { font-family: "Space Grotesk", sans-serif; font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 800; line-height: 1.1; margin-bottom: 2.5rem; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .hero-ctas { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } /* ========================================================================== RESET DEL FOOTER (EXCLUSIVO PORTADA) ========================================================================== */ /* WordPress inyecta las clases .home o .front-page en el de la portada */ body.home .site-footer, body.front-page .site-footer { margin-top: 0; /* Anula el margin global de 4rem de style.css */ padding-top: 2rem; /* Reduce el relleno superior para un bloque más compacto */ } /* ========================================================================== RESPONSIVE MÓVIL (FRONT PAGE) ========================================================================== */ @media (max-width: 768px) { .hero-fullscreen { min-height: 70vh; /* En móvil, garantizamos espacio para la botonera antes de ver el footer */ } body.home .site-footer, body.front-page .site-footer { padding-top: 1.5rem; } } /* ========================================================================== ACTUALIZACIÓN HERO SLIDER (Añadir a front-page.css) ========================================================================== */ .hero-background { /* Mantiene position: absolute e inset: 0 del CSS original */ background-color: #000; overflow: hidden; } /* Sobrescribe la regla genérica de .hero-background img original */ .hero-background img { opacity: 1; /* La opacidad se gestiona ahora en el contenedor .hero-slide */ transition: none; } .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease-in-out, visibility 1.2s; will-change: opacity, transform; } .hero-slide.is-active { opacity: 1; visibility: visible; } .hero-slide picture, .hero-slide picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.05); transition: transform 6s ease-out; will-change: transform; } .hero-slide.is-active picture img { transform: scale(1); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); z-index: 1; pointer-events: none; } .hero-content { /* Asegurar z-index superior al overlay */ z-index: 2; } .hero-subtitle { font-family: system-ui, -apple-system, sans-serif; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.9); }