:root { --negro: #000000; /* negro uniforme, igual al fondo de la imagen del marco */ --panel: #1C1C1E; --panel-2: #232326; --blanco: #FFFFFF; --oro: #FFD700; --oro-suave: rgba(255, 215, 0, 0.14); --naranja: #FF6B00; --rojo: #E53935; --gris: #B0B0B0; --gris-legal: #888888; --t: 0.2s ease; /* Tamaño de cada panel del rodillo. Todo lo demás (ancho de la máquina, radio del cilindro, tipografía) se calcula a partir de acá, así la máquina achica de verdad en celular. Mantener la proporción 1.125 entre ancho y alto: el JS calcula el radio del cilindro con el alto y si se rompe la proporción, se deforma. */ --slot-w: clamp(64px, 18vw, 90px); --slot-h: clamp(57px, 16vw, 80px); /* Radio del cilindro. Es una proporcion fija del alto del panel: (alto/2) / tan(PI/12) = alto * 1.8660254, la formula del poligono de 12 lados. Al estar en CSS se recalcula solo cuando cambia el panel; antes lo hacia el JS y si el evento de resize no llegaba, la maquina quedaba armada con el radio viejo y las caras se despegaban del cilindro. */ --radio: calc(var(--slot-h) * 1.8660254); /* Cuantas filas se ven por la ventana. El cilindro entero es mucho mas alto: el visor recorta el resto. */ --filas-visibles: 3; /* La perspectiva agranda el cilindro respecto de los rodillos. Este factor reserva ese excedente para que no se corte. */ --lente: 1.18; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--negro); color: var(--blanco); font-family: 'Inter', sans-serif; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; /* ocupa el espacio sobrante */ display: flex; flex-direction: column; /* El sobrante se reparte entre todos los bloques en vez de acumularse en un solo hueco. Antes la botonera se iba al fondo con margin-top:auto y quedaba un vacio grande bajo la maquina. */ justify-content: space-evenly; } /* ============ MARCO NARANJA DE LA PAGINA ============ */ /* Va fijo a la ventana, no al contenido: asi el marco queda quieto mientras la pagina scrollea, como el borde de una maquina real. pointer-events: none para que no bloquee ningun clic debajo. */ body::before { content: ''; position: fixed; inset: clamp(5px, 1.4vw, 10px); border: 2px solid var(--naranja); border-radius: clamp(12px, 2.4vw, 20px); pointer-events: none; z-index: 20; /* Doble resplandor, hacia afuera y hacia adentro: es lo que da el efecto de tubo de neon del logo, en vez de una linea plana. */ box-shadow: 0 0 12px rgba(255, 107, 0, 0.65), inset 0 0 12px rgba(255, 107, 0, 0.45); } /* ============ FONDO AMBIENTAL ============ */ /* Resplandor dorado arriba + viñeta roja abajo: la página respira. */ .ambiente { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 45% at 50% -10%, rgba(255, 215, 0, 0.13), transparent 60%), radial-gradient(ellipse 70% 40% at 50% 115%, rgba(229, 57, 53, 0.10), transparent 65%); } /* Partículas doradas que flotan lentamente (JS las genera) */ .particula { position: fixed; bottom: -10px; border-radius: 50%; background: var(--oro); pointer-events: none; z-index: 0; opacity: 0; animation: flotar linear infinite; } @keyframes flotar { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.55; } 90% { opacity: 0.15; } 100% { transform: translateY(-105vh) translateX(40px); opacity: 0; } } /* ============ LAYOUT ============ */ .pagina { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 22px; text-align: center; flex: 1; } /* Entrada escalonada de los bloques */ .bloque { opacity: 0; transform: translateY(18px); animation: aparecer 0.6s ease forwards; } .bloque:nth-child(1) { animation-delay: 0.05s; } .bloque:nth-child(2) { animation-delay: 0.18s; } .bloque:nth-child(3) { animation-delay: 0.32s; } .bloque:nth-child(4) { animation-delay: 0.46s; } .bloque:nth-child(5) { animation-delay: 0.60s; } @keyframes aparecer { to { opacity: 1; transform: translateY(0); } } /* ============ CABECERA ============ */ .cabecera { padding: 44px 0 6px; } .corona { font-size: 34px; display: inline-block; filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.55)); animation: latido 2.6s ease-in-out infinite; } @keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .marca { display: flex; justify-content: center; margin-top: 6px; } .marca img { /* Medido sobre la foto de referencia: el cartel ocupa ~64% del ancho de la pantalla (378 de 592 px en la foto). El techo evita que se agrande de mas en tablet/escritorio. */ width: min(64%, 380px); height: auto; /* El PNG del logo no tiene transparencia: su fondo negro taparia el de la pagina como un rectangulo. Con screen el negro puro se vuelve invisible y quedan solo las letras y el resplandor. Si algun dia el logo llega en PNG transparente, se borra esta linea. */ mix-blend-mode: screen; } @keyframes destello { to { background-position: 220% center; } } .marca sup { font-size: 0.35em; -webkit-text-fill-color: var(--oro); } /* Titulo de accion. Es el h1 de la pagina: lo primero que le dice al visitante que tiene que hacer. */ .titulo-accion { font-family: 'Poppins', sans-serif; font-weight: 800; /* En la foto el titulo ocupa el 84% del ancho en UNA sola linea. 6vw es el tamano que da ese largo y deja margen para que no se parta en dos lineas ni en un celular de 320px. */ font-size: clamp(19px, 6vw, 34px); line-height: 1.15; color: var(--blanco); text-align: center; margin-top: clamp(6px, 1.6vw, 12px); padding: 0 16px; } /* Marca del comercio que sortea, arriba de la maquina. Circular y con el resplandor naranja de la referencia. */ .marca-comercio { display: flex; justify-content: center; margin: clamp(6px, 1.6vw, 20px) auto clamp(6px, 1.4vw, 16px); } .marca-comercio img { /* ~31.5% del ancho de pantalla, igual que en la foto (186 de 592). */ width: clamp(100px, 31.5vw, 175px); height: clamp(100px, 31.5vw, 175px); object-fit: contain; border-radius: 50%; /* Como el badge de la referencia: un aro naranja brillante que abraza el círculo. Se apilan varios drop-shadow (siguen la silueta real del logo) para lograr un anillo definido + resplandor, no un halo cuadrado. */ filter: drop-shadow(0 0 1px #ffa640) drop-shadow(0 0 4px #ff7a00) drop-shadow(0 0 11px rgba(255, 120, 0, 0.9)) drop-shadow(0 0 24px rgba(255, 90, 0, 0.6)); } .eslogan { display: flex; justify-content: center; margin-top: 10px; font-size: 17px; font-weight: 500; color: var(--gris); letter-spacing: 4px; text-transform: uppercase; } .eslogan strong { color: var(--oro); font-weight: 600; } /* ============ CTA PRINCIPAL ============ */ .zona-cta { /* Era display:flex, y por eso grid-template-columns no hacía nada: esa propiedad solo funciona en grid. Con grid, los laterales miden igual (1fr) y el centro queda realmente centrado. */ display: grid; grid-template-columns: 1fr auto 1fr; /* laterales iguales → centro real */ /* stretch y no center: asi las dos columnas laterales toman el mismo alto y, con las filas 1fr de .satelites, los cuatro botones terminan identicos. Con center, cada columna media segun su propio texto y los de un lado quedaban mas bajos que los del otro. */ align-items: stretch; gap: clamp(8px, 2vw, 16px); padding: clamp(8px, 3vw, 32px) clamp(10px, 3vw, 20px); } .satelites { /* Grilla de dos filas iguales en vez de flex: asi los dos botones de la columna miden lo mismo aunque uno use dos lineas de texto y el otro una. Con min-height solo no alcanzaba: el de contenido mas alto se pasaba del minimo y quedaban dispares. */ display: grid; grid-template-rows: 1fr 1fr; gap: clamp(8px, 2.4vw, 16px); min-width: 0; /* permite que la columna se encoja en pantallas chicas */ } /* Los botones llenan su columna hasta el techo de max-width. Como las columnas laterales son 1fr cada una (iguales entre si), los cuatro terminan con el mismo ancho. Se los arrima al centro para que rodeen al boton principal en vez de irse a los bordes de la pantalla. */ .satelites.izquierda { justify-items: end; } .satelites.derecha { justify-items: start; } .centro { display: flex; flex-direction: column; align-items: center; justify-content: center; /* la columna ahora se estira: centra su contenido */ gap: 12px; } .btn { font-family: 'Inter', sans-serif; border: none; cursor: pointer; transition: transform var(--t), box-shadow var(--t), background-color var(--t), color var(--t); } .btn-sat { /* Como la referencia del cliente: caja casi cuadrada, fondo negro y borde y texto blancos. Antes era gris con dorado. El radio chico la vuelve una tarjeta; con el icono arriba, una pildora se deformaba. */ border-radius: 8px; /* Relleno justo: en la foto la caja es casi cuadrada y el texto llega cerca del borde. Con 12px de alto el boton se estiraba de mas. */ padding: 8px clamp(6px, 1.8vw, 12px); font-size: clamp(12px, 2.6vw, 14px); font-weight: 700; background: var(--negro); color: var(--blanco); border: 2px solid var(--naranja); /* Antes tenía nowrap y por eso los botones no entraban en el celular: el texto no podía acomodarse en dos líneas y se salían de pantalla. */ text-align: center; /* Icono arriba, titulo abajo. De paso el boton mide lo que mide el mas ancho de los dos, en vez de la suma: por eso ahora si entran los iconos grandes en el celular. */ display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; line-height: 1.2; /* Los cuatro miden igual. El alto lo manda el boton de contenido mas alto: icono de 60px + separacion + dos lineas de texto + relleno. Sin esto, "Elige tu marca" (dos lineas) quedaba mas alto que "Premios" (una) y la botonera se veia despareja. */ min-height: clamp(66px, 19vw, 92px); /* Sin este techo, en pantalla ancha el boton estiraba a llenar la columna (llegaba a 479px) y terminaba siendo mas grande que el principal, justo al reves de lo que se busca. */ width: 100%; max-width: clamp(76px, 21.5vw, 130px); } /* Los iconos heredan el color del botón con currentColor, así cambian solos al pasar el mouse. Los cuatro miden igual: si los dibujados quedaran chicos al lado de las fotos, la botonera se veria despareja. El grosor del trazo escala solo con el tamano, asi que no se afina. Se achicaron para que el boton principal destaque, como en la referencia. El techo de 52px lo pone el QR: su archivo mide 60px y mas grande se veria borroso. */ .ico { width: clamp(36px, 10vw, 52px); height: clamp(36px, 10vw, 52px); flex-shrink: 0; } /* Iconos que son imagen y no dibujo. Van mas grandes que los dibujados: a 17px una foto con detalle se vuelve una mancha, mientras que un dibujo de lineas se lee igual. El recorte redondo saca el fondo negro cuadrado del archivo, que sobre el boton gris se veria. */ .ico-img { /* Hereda la medida de .ico: los cuatro iconos van iguales. */ border-radius: 50%; object-fit: cover; } /* El QR es un cuadrado, no un circulo */ .ico-qr { border-radius: 2px; } /* En la referencia el signo de interrogacion es rojo, no blanco. Los iconos toman el color del texto con currentColor, asi que alcanza con cambiarselo a este. */ .ico-pregunta { color: var(--rojo); } .btn-sat:hover { background: var(--oro); color: #000; transform: scale(1.03); } .btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; } .btn:active { transform: scale(0.96); transition: none; } .btn-principal { position: relative; overflow: hidden; /* Circulo real y elastico: el ancho se adapta a la pantalla (minimo 150px, maximo 210px) y aspect-ratio obliga a que el alto sea siempre igual al ancho. Sin esto el borde redondeado da una elipse en vez de un circulo. */ /* Domina sobre los satelites, como en la referencia: en un iPhone 11 (414px) queda en ~182px contra ~41px de icono de los otros. La proporcion se mantiene en cualquier pantalla porque ambos escalan con el ancho. */ /* En la foto el circulo mide 232 de 592 px de ancho: 39vw. */ width: clamp(140px, 39vw, 205px); aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; /* Ya no se dibuja el boton: lo dibuja la imagen. Queda el circulo, el resplandor que late y el recorte redondo, que es lo que recorta el fondo negro cuadrado de la foto. */ padding: 0; background: none; display: block; box-shadow: 0 4px 15px rgba(229, 57, 53, 0.45), 0 0 0 0 rgba(255, 107, 0, 0.4); animation: pulso 2.4s ease-out infinite; } .btn-principal img { display: block; width: 100%; height: 100%; /* La foto no es exactamente cuadrada (828x824): cover la encaja en el circulo sin deformarla. */ object-fit: cover; border-radius: 50%; } /* El icono se mide en em: crece y se achica junto con el círculo */ .ico-usuario { width: 1.7em; height: 1.7em; flex-shrink: 0; position: relative; z-index: 2; } .btn-principal strong { position: relative; z-index: 2; } /* Onda expansiva sutil que invita al clic */ @keyframes pulso { 0% { box-shadow: 0 4px 15px rgba(229,57,53,.45), 0 0 0 0 rgba(255,107,0,.35); } 70% { box-shadow: 0 4px 15px rgba(229,57,53,.45), 0 0 0 16px rgba(255,107,0,0); } 100% { box-shadow: 0 4px 15px rgba(229,57,53,.45), 0 0 0 0 rgba(255,107,0,0); } } /* Destello que cruza el botón cada pocos segundos */ .btn-principal::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); animation: barrido 3.8s ease-in-out infinite; } @keyframes barrido { 0%, 55% { left: -80%; } 75%, 100% { left: 130%; } } .btn-principal:hover { transform: scale(1.04); background-position: right center; box-shadow: 0 8px 30px rgba(229, 57, 53, 0.7); animation-play-state: paused; } .nota-cta { font-size: 12px; color: var(--gris-legal); letter-spacing: 0.4px; } /* ============ TARJETAS DE PREMIO ============ Contenido y estilo segun el documento de requerimientos (seccion 10). Viven dentro de cada panel del rodillo, asi que las medidas se derivan de --slot-h: sobre el panel de referencia (80px) dan exactamente los valores pedidos (28px / 16px / 12px, radio 16px, 10px de relleno lateral) y se achican solas en celular. */ /* Negra entera y sin borde propio: la tarjeta llena el panel y quien la separa de la vecina es la línea dorada del panel. Un borde acá sería una segunda línea pegada a la otra y se vería sucio. */ .tarjeta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--slot-h) * 0.035); background: var(--negro); border: 0; padding: 0 calc(var(--slot-h) * 0.06); overflow: hidden; text-align: center; } /* Numeros del premio: 28px negrita sobre panel de 80 */ .tarjeta .premio { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: calc(var(--slot-h) * 0.26); line-height: 1; color: var(--oro); text-shadow: 0 0 calc(var(--slot-h) * 0.2) rgba(255, 215, 0, 0.35); } /* "Gratis": 16px normal sobre panel de 80 */ .tarjeta .detalle { font-size: calc(var(--slot-h) * 0.14); font-weight: 400; line-height: 1.05; color: var(--blanco); } /* "TODOS GANAN": siempre en mayusculas. El documento pide 12px, pero a ese tamano el texto necesita unos 90px de ancho y en el panel del rodillo solo hay 56px: se cortaba. Va reducido y sin la pildora de fondo para que entre entero. Ver la nota entregada al cliente. */ .tarjeta .sello { font-size: calc(var(--slot-h) * 0.1); font-weight: 600; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--oro); white-space: nowrap; max-width: 100%; } /* ============ */ /*==============SLOT MACHINE=========*/ /* El mueble de la máquina: marco metálico naranja, como el barril de la foto. El ancho lo manda el cilindro, que mide 318px reales por efecto de la perspectiva. */ /* Máquina y palanca. Lo que se centra es el GABINETE, no el conjunto: si se centrara el conjunto, la palanca de un costado empujaría la máquina hacia el otro lado y quedaría descentrada respecto del logo y del botón. El ::before es un espaciador invisible del mismo ancho que la palanca, puesto del lado opuesto para equilibrarla. */ .maquina-conjunto { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.2vw, 8px); width: fit-content; max-width: 100%; margin: 0 auto; } .maquina-conjunto::before { content: ''; flex-shrink: 0; width: clamp(26px, 7vw, 38px); /* el mismo ancho que .palanca */ } .gabinete { position: relative; padding: clamp(10px, 3vw, 20px); border-radius: 26px / 34px; /* Degradado que imita metal torneado: brillo arriba, sombra al medio, reflejo abajo. Es lo que da la sensación de volumen del barril. */ /* Metal torneado sobre el degradado de marca: naranja #FF6B00 arriba y rojo #E53935 abajo. Los extremos son solo aclarado y oscurecido de esos dos (brillo del torneado y sombra del cilindro), no colores nuevos: antes los oscuros tiraban a marron y se salian del estandar. */ background: linear-gradient(180deg, #ffc48f 0%, /* brillo: naranja aclarado */ #ff8c33 8%, var(--naranja) 26%, /* naranja de marca */ var(--rojo) 50%, /* rojo de marca */ #8e2320 70%, /* sombra: rojo oscurecido */ #b52d2a 86%, #ff7d1a 100%); /* reflejo inferior: vuelve al naranja */ box-shadow: inset 0 2px 3px rgba(255, 235, 200, 0.75), inset 0 -2px 4px rgba(255, 190, 120, 0.4), 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 60px rgba(255, 107, 0, 0.28); } /* Tapas laterales del barril: los aros metálicos de los extremos */ .gabinete::before, .gabinete::after { content: ''; position: absolute; top: 6%; bottom: 6%; width: clamp(7px, 1.8vw, 12px); border-radius: 50%; background: linear-gradient(180deg, #ffc48f, var(--naranja) 35%, var(--rojo) 72%, #7a1c1a 100%); box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); z-index: 4; } .gabinete::before { left: 3px; } .gabinete::after { right: 3px; } /* Luces del borde superior. Un solo degradado repetido hace todas las ampolletas: nada de un div por luz. */ .luces { position: absolute; top: clamp(3px, 0.9vw, 6px); left: 12%; right: 12%; height: 7px; z-index: 5; pointer-events: none; background-image: radial-gradient(circle, #fffaf0 0 1.6px, rgba(255, 208, 130, 0.85) 1.6px 2.8px, transparent 2.9px); background-size: 20px 7px; background-repeat: repeat-x; background-position: center; filter: drop-shadow(0 0 3px rgba(255, 190, 90, 0.95)); animation: luces-parpadeo 1.8s ease-in-out infinite; } @keyframes luces-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ===== PALANCA ===== */ /* Adaptada del slot-trigger original. Aquel bajaba el brazo y lo encogía (top + height), lo que obliga al navegador a recalcular el layout en cada cuadro. Acá el brazo rota sobre su eje, que es como se mueve una palanca de verdad, y con transform el navegador lo resuelve sin rehacer el layout. */ .palanca { position: relative; flex-shrink: 0; width: clamp(26px, 7vw, 38px); height: calc(var(--slot-h) * 2.6); background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* La base atornillada al costado de la máquina */ .palanca-base { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: clamp(9px, 2.4vw, 13px); height: 46%; border-radius: 3px; background: linear-gradient(180deg, #2a2a2a 0%, #9a9a9a 14%, #d6d6d6 37%, #bcbcbc 49%, #909090 67%, #1f1f1f 100%); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.7); } /* El brazo pivotea desde abajo: ahí está el eje */ .palanca-brazo { position: absolute; left: 42%; bottom: 50%; width: clamp(5px, 1.3vw, 7px); height: 52%; border-radius: 4px 4px 0 0; /* El eje está abajo y la rotación es sobre el eje X: el brazo cae hacia adelante, hacia quien mira, como una palanca real. Al rotar en profundidad se acorta solo (escorzo), que es el efecto que el codigo original imitaba a mano bajando y encogiendo el brazo. La perspectiva propia hace creible el volumen. */ transform-origin: bottom center; transform-style: preserve-3d; transform: perspective(260px) rotateX(0deg); transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); background: linear-gradient(90deg, #0d0d0d 0%, #5c5c5c 47%, #3d3d3d 87%, #1b1b1b 100%); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8); } /* Al tirarla el brazo cae hacia adelante; vuelve solo con un rebote */ .palanca.tirada .palanca-brazo { transform: perspective(260px) rotateX(-76deg); transition: transform 0.16s ease-in; } /* La bola gira al reves que el brazo, asi queda siempre de frente */ .palanca.tirada .palanca-bola { transform: translate(-50%, -62%) rotateX(76deg); transition: transform 0.16s ease-in; } /* La bola de cobre, como la de la foto */ .palanca-bola { position: absolute; left: 50%; top: 0; width: clamp(16px, 4.4vw, 24px); height: clamp(16px, 4.4vw, 24px); /* Contrarresta la rotacion del brazo para que la bola siga mirando al frente: si girara con el, se veria como una elipse aplastada en vez de una esfera. */ transform: translate(-50%, -62%) rotateX(0deg); transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); border-radius: 50%; /* Mismo estandar que la maquina: naranja de marca en la luz y rojo de marca en la sombra. El punto de luz descentrado es lo que la hace leer como esfera y no como circulo plano. */ background: radial-gradient(circle at 34% 30%, #ffd0a3 0%, var(--naranja) 38%, var(--rojo) 76%, #7a1c1a 100%); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75), inset -2px -3px 6px rgba(0, 0, 0, 0.45); } .palanca:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; } /* Mientras giran los rodillos la palanca no responde: es el slot-triggerDisabled del original, pero sin ocultarla. */ .palanca[disabled] { cursor: default; } .palanca[disabled] .palanca-bola { filter: saturate(0.55) brightness(0.72); } /* Flechas que apuntan a la fila premiada, como en la foto */ .flecha { position: absolute; top: 50%; width: 0; height: 0; transform: translateY(-50%); z-index: 6; pointer-events: none; border-top: clamp(8px, 2vw, 12px) solid transparent; border-bottom: clamp(8px, 2vw, 12px) solid transparent; filter: drop-shadow(0 0 5px rgba(255, 107, 0, 0.9)); } /* Van sobre el aro del barril y no por fuera: con los rodillos de 318px fijos, sacarlas afuera no entra en un celular de 360px. */ .flecha.izq { left: 2px; border-right: clamp(9px, 2.2vw, 14px) solid var(--naranja); } .flecha.der { right: 2px; border-left: clamp(9px, 2.2vw, 14px) solid var(--naranja); } /* La ventana por donde se ven los rodillos: hundida y oscura */ .visor { position: relative; border-radius: 10px; /* Recorta lo que sobresale del cilindro: se ve solo la ventana, como en una maquina real, y la maquina ocupa mucho menos alto. */ overflow: hidden; background: #050507; box-shadow: inset 0 3px 22px #000, inset 0 -3px 22px #000, 0 0 14px rgba(255, 255, 255, 0.10), 0 1px 1px rgba(255, 255, 255, 0.22); } /* Degradado que oscurece los bordes del cilindro: es lo que da la sensación de profundidad, como si los rodillos se perdieran adentro. pointer-events: none para que no bloquee el clic. */ .visor::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 10px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.55) 18%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.55) 82%, rgba(0, 0, 0, 0.96) 100%); } /* Línea de premio: marca la fila que cuenta */ .visor::after { content: ''; position: absolute; top: 50%; left: 8%; right: 8%; height: 2px; z-index: 4; pointer-events: none; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--rojo), transparent); opacity: 0.6; } /* El visor es más ancho que los rodillos porque la perspectiva los agranda: si midiera lo mismo, les cortaría los bordes curvos. */ #stage { margin: 0 auto; width: calc(3 * var(--slot-w) * var(--lente) + 10px); padding: 0; } .opciones { text-align: center; } .perspective-on { -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; /* Setting the perspective of the contents of the stage but not the stage itself*/ } .perspective-off { -webkit-perspective: 0; -moz-perspective: 0; perspective: 0; } #rotate { /* 3 rodillos. Si agregas o quitas un .ring, cambia el 3 y listo. */ margin: 0 auto; width: calc(3 * var(--slot-w)); /* Alto de la ventana, no del cilindro entero. Los paneles quedan centrados sobre la linea de premio: (filas - 1) / 2. */ height: calc(var(--slot-h) * var(--filas-visibles)); padding-top: calc(var(--slot-h) * (var(--filas-visibles) - 1) / 2); /* Ensure that we're in 3D space */ transform-style: preserve-3d; } .ring { margin: 0 auto; height: var(--slot-h); width: var(--slot-w); float: left; transform-style: preserve-3d; } .slot { position: absolute; width: var(--slot-w); height: var(--slot-h); box-sizing: border-box; /* Cada panel es una cara del cilindro: se gira segun su indice (--i, que pone el JS) y se empuja hacia afuera el radio. 30deg = 360/12. */ transform: rotateX(calc(var(--i) * 30deg)) translateZ(var(--radio)); opacity: 0.95; /* Panel negro. El borde dorado es la línea que separa una tarjeta de la otra: al estar los paneles pegados, los bordes contiguos dibujan la retícula dorada del rodillo. */ background: var(--negro); border: solid 1px rgba(255, 215, 0, 0.45); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .backface-on { -webkit-backface-visibility: visible; -moz-backface-visibility: visible; backface-visibility: visible; } .slot p { /* Los números acompañan el tamaño del panel */ font-size: calc(var(--slot-h) * 0.45); font-weight: bold; line-height: var(--slot-h); margin: 0; text-align: center; } /* .go no lleva estilos: es solo el gancho para el JavaScript. Lo usa el botón principal del CTA, que se viste con .btn-principal. */ label { cursor: pointer; display: inline-block; width: 45%; text-align: center; } .tilted { transform: rotateY(45deg); } /*=====*/ .spin-0 { transform: rotateX(-3719deg); } .spin-1 { transform: rotateX(-3749deg); } .spin-2 { transform: rotateX(-3779deg); } .spin-3 { transform: rotateX(-3809deg); } .spin-4 { transform: rotateX(-3839deg); } .spin-5 { transform: rotateX(-3869deg); } .spin-6 { transform: rotateX(-3899deg); } .spin-7 { transform: rotateX(-3929deg); } .spin-8 { transform: rotateX(-3959deg); } .spin-9 { transform: rotateX(-3989deg); } .spin-10 { transform: rotateX(-4019deg); } .spin-11 { transform: rotateX(-4049deg); } /*=====*/ @keyframes back-spin { /*0% { transform: rotateX(0deg); }*/ 100% { transform: rotateX(30deg); } } @keyframes tiltin { 0% { transform: rotateY(0deg);} 50% { transform: rotateY(0deg);} 100% { transform: rotateY(45deg);} } @keyframes tiltout { 0% { transform: rotateY(45deg);} 100% { transform: rotateY(0deg);} } @keyframes spin-0 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3719deg); } } @keyframes spin-1 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3749deg); } } @keyframes spin-2 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3779deg); } } @keyframes spin-3 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3809deg); } } @keyframes spin-4 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3839deg); } } @keyframes spin-5 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3869deg); } } @keyframes spin-6 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3899deg); } } @keyframes spin-7 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3929deg); } } @keyframes spin-8 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3959deg); } } @keyframes spin-9 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-3989deg); } } @keyframes spin-10 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-4019deg); } } @keyframes spin-11 { 0% { transform: rotateX(30deg); } 100% { transform: rotateX(-4049deg); } } /* ============ BANNER ============ */ .banner { position: relative; background: radial-gradient(ellipse 60% 120% at 50% -40%, rgba(255, 215, 0, 0.10), transparent 70%), var(--panel); border: 1px solid var(--oro-suave); border-radius: 18px; padding: 34px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .banner h2 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; color: var(--blanco); } .banner h2 span { color: var(--oro); } .banner p { font-size: 14px; color: var(--gris); max-width: 420px; } .btn-sesion { background: transparent; border: 1.5px solid var(--oro); color: var(--oro); font-size: 16px; font-weight: 600; padding: 14px 44px; } .btn-sesion:hover { background: var(--oro); color: #000; box-shadow: 0 4px 24px rgba(255, 215, 0, 0.35); transform: scale(1.03); } /* ============ PIE DE PAGINA ============ El pie legal (terminos, privacidad, +18) se quito a pedido del cliente: la pagina entra completa en una pantalla de celular sin scroll. Si algun dia hay que reponerlo, vuelve el