/* ========================================================================== 1. AJUSTES GLOBALES Y RESET ========================================================================== */ nav a:focus, nav a:active, nav a:focus-visible { outline: none !important; box-shadow: none !important; } body { margin: 0 !important; padding: 0 !important; /* Esto evita que el slider se meta debajo del cristal */ padding-top: 72px !important; } /* Ajuste para móviles: el header suele ser un poco más bajo */ @media (max-width: 767px) { body { padding-top: 70px !important; } #menu:not(.hidden) { display: flex !important; animation: menuIn 0.3s ease-out; } } /* Ajuste para imágenes generales */ img { max-width: 100%; height: auto; } /* ========================================================================== 2. SISTEMA DE CARGA LIMPIA (Anti-Flash) ========================================================================== */ /* Ocultamos contenido inicialmente (Home y About) */ .fade-content, #hero-section:not(.ready) { opacity: 0; visibility: hidden; } /* Transición para la aparición suave */ .fade-content, #hero-section { transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; } /* Estado activo tras la carga */ .fade-content.ready, #hero-section.ready { opacity: 1 !important; visibility: visible !important; } /* ========================================================================== 3. INDEX (HERO & SLIDER JS) ========================================================================== */ #hero-section { background-color: transparent; position: relative; width: 100%; overflow: hidden; } #hero-section.ready { background-color: black !important; } #slider-container { position: absolute; inset: 0; z-index: 0; /* La transición de las imágenes la maneja tu script.js */ } /* Textos del Hero: Transición de color */ .hero-title, .hero-subtitle { color: #1a1a1a; transition: color 0.6s ease; } #hero-section.ready .hero-title, #hero-section.ready .hero-subtitle { color: white !important; } /* ========================================================================== 4. LIGHTBOX & KEN BURNS (Para Works / Galerías) ========================================================================== */ .kenburns-bg { animation: kenburns 20s ease infinite alternate; transform-origin: center; } @keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .ken-burns-wrapper { overflow: hidden; } /* ========================================================================== 5. HEADER & NAVEGACIÓN ========================================================================== */ /* --- ANIMACIONES (Tus originales) --- */ @keyframes menuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes menuOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } /* --- COMPORTAMIENTO GENERAL --- */ #menu:not(.hidden) { animation: menuIn 0.2s ease-out forwards; } .menu-closing { animation: menuOut 0.2s ease-in forwards !important; } /* --- LÓGICA DE PC (Desktop) --- */ @media (min-width: 768px) { /* Forzamos que el menú sea visible en PC, ignorando la clase 'hidden' de móvil */ #menu { display: flex !important; position: static !important; opacity: 1 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* Solo lo ocultamos de verdad cuando el JS activa la animación de cierre */ #menu.menu-closing { display: none !important; opacity: 0 !important; } /* Submenús al pasar el ratón */ .group:hover > ul { display: flex !important; animation: menuIn 0.1s ease-out; } } /* --- LÓGICA DE MÓVIL --- */ @media (max-width: 767px) { .group:hover > ul { display: none !important; } .group ul:not(.hidden) { display: flex !important; position: static !important; box-shadow: none !important; padding-bottom: 10px; } #menu:not(.hidden) { display: flex !important; flex-direction: column; position: absolute; top: 100%; right: 1.5rem; background: white; min-width: 220px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } } /* --- PREVENCIÓN DE PARPADEO (FOUC) --- */ /* Clase para el estado inicial (oculto) */ .opacity-0 { opacity: 0; } /* La transición suave para que no dé el "golpe" */ .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .duration-1000 { transition-duration: 1000ms; } /* Clase que activa el JS para mostrar el contenido */ .ready { opacity: 1 !important; } /* Mejora el rendimiento visual durante la transición */ #index-main, #about-main, #works-main, #originals-main, #contact-main, #series-main, #editions-main, #acquire-main { will-change: opacity; } @layer components { .filter-btn { @apply relative pb-2 transition-all duration-300; } .filter-btn.active::after { content: ''; @apply absolute bottom-0 left-0 w-full h-[1px] bg-black; } }