/* ==================================================================== */ /* Tipografía y utilidades generales del sitio */ /* ==================================================================== */ body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #FAFAF8; color: #0f0f0f; -webkit-font-smoothing: antialiased; } .hero-heading { letter-spacing: -0.035em; line-height: 1.05; } .pill-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.35rem 0.95rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; } /* ==================================================================== */ /* Bloqueo de scroll mientras el video de intro está activo */ /* Se aplica sobre y mediante la clase .intro-lock */ /* ==================================================================== */ html.intro-lock, body.intro-lock { overflow: hidden !important; height: 100%; width: 100%; position: fixed; inset: 0; touch-action: none; overscroll-behavior: none; } /* ==================================================================== */ /* Overlay de video a pantalla completa */ /* ==================================================================== */ .intro-video-overlay { position: fixed; inset: 0; z-index: 99999; background: #0f0f0f; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.7s ease; } .intro-video-overlay--hidden { opacity: 0; pointer-events: none; } .intro-video-wrapper { position: absolute; inset: 0; overflow: hidden; background: #0f0f0f; } /* El iframe se estira para cubrir toda la pantalla ("cover"), igual que un video de fondo, sin franjas negras */ .intro-video-wrapper iframe, .intro-video-wrapper #intro-yt-player { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; /* 16:9 */ min-height: 100vh; min-width: 177.78vh; /* 16:9 */ transform: translate(-50%, -50%); pointer-events: none; /* el usuario no puede pausar/manipular el player */ } .intro-video-brand { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem; color: #ffffff; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(15, 15, 15, 0.55); backdrop-filter: blur(6px); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(217, 217, 217, 0.25); } .intro-video-brand__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #c29e63; animation: intro-pulse 1.4s ease-in-out infinite; } @keyframes intro-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .intro-mute-toggle { position: absolute; top: 1.5rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: rgba(15, 15, 15, 0.55); backdrop-filter: blur(6px); border: 1px solid rgba(217, 217, 217, 0.25); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; } .intro-mute-toggle:hover { background: #c29e63; color: #0f0f0f; } /* Modal del video del hero (reproducción bajo demanda al hacer clic en "play") */ .hero-video-modal { position: fixed; inset: 0; z-index: 9998; background: rgba(15, 15, 15, 0.92); display: none; align-items: center; justify-content: center; padding: 1.5rem; } .hero-video-modal.hero-video-modal--open { display: flex; } .hero-video-modal__frame { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; } .hero-video-modal__frame iframe { width: 100%; height: 100%; border-radius: 1rem; } .hero-video-modal__close { position: absolute; top: -3rem; right: 0; color: #fff; font-weight: 600; cursor: pointer; background: transparent; border: none; font-size: 0.95rem; }