/* Estilos para la aplicación de video promocional */ /* Las capas ocupan width:100% y además llevan padding: sin border-box el contenido se sale del viewport y el texto aparece cortado en móvil. */ .video-promo, .claim-layer, .video-modal, .modal-content { box-sizing: border-box; } /* El fondo (color + gradiente + imagen hero) se declara inline en la vista qr/index.html para que se descubra en el y coincida exactamente con la URL versionada del . */ .video-promo { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; color: white; } .video-promo h1 { font-family: 'helvetica_lt_stdBlkCnOb', sans-serif; font-size: 2.5rem; margin-bottom: 1rem; text-transform: uppercase; } .video-promo p { font-family: 'helvetica_lt_stdCnOb', sans-serif; font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; } .video-promo button { font-family: 'helvetica_lt_stdbold_oblique', sans-serif; background: #ff0000; color: white; border: none; padding: 15px 30px; font-size: 1.2rem; border-radius: 30px; cursor: pointer; text-transform: uppercase; transition: transform 0.3s ease; } .video-promo button:hover { transform: scale(1.05); } /* Capa de video */ .video-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: black; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .video-layer.active { opacity: 1; pointer-events: all; } .video-container { width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .video-container video { width: 100%; height: 100%; object-fit: cover; } /* Círculo de progreso */ .progress-circle { position: fixed; bottom: 40px; right: 20px; width: 60px; height: 60px; background: rgba(0,0,0,0.8); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-family: 'helvetica_lt_stdBlkCnOb', sans-serif; font-size: 1rem; z-index: 2; } /* Barra de progreso */ .progress-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 10px; background: rgba(255,255,255,0.2); } .progress-fill { height: 100%; width: 0; background: #ff0000; transition: width 0.1s linear; } /* Capa de reclamo */ .claim-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; color: white; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .claim-layer.active { opacity: 1; pointer-events: all; } .claim-layer h2 { font-family: 'helvetica_lt_stdBlkCnOb', sans-serif; font-size: 2.5rem; margin-bottom: 1rem; color: #ff0000; } .claim-layer p { font-family: 'helvetica_lt_stdCnOb', sans-serif; font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; } .product-image { width: 200px; height: auto; margin: 20px 0; filter: drop-shadow(0 4px 8px rgba(255,0,0,0.3)); animation: floatAnimation 3s ease-in-out infinite; } @keyframes floatAnimation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .button-container { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .claim-layer a, .claim-layer button { font-family: 'helvetica_lt_stdbold_oblique', sans-serif; background: #ff0000; color: white; border: none; padding: 15px 30px; font-size: 1.2rem; border-radius: 30px; cursor: pointer; text-transform: uppercase; transition: transform 0.3s ease; text-decoration: none; } .claim-layer a:hover, .claim-layer button:hover { transform: scale(1.05); } /* Modal de video */ .video-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 1000; } .video-modal.active { opacity: 1; pointer-events: all; } .modal-content { width: 90%; max-width: 800px; position: relative; } .modal-content video { width: 100%; border-radius: 10px; } .close-modal { position: absolute; top: -40px; right: 0; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; padding: 5px; }