/** * Verificación de mayoría de edad. * * El bloqueo real no lo hace el JS sino esto: `.hbg-edad-bloqueado` la pone PHP * en el cuando falta la cookie, así el scroll queda trabado desde el * primer pintado y no hace falta esperar a que corra ningún script. */ .hbg-edad-bloqueado { overflow: hidden !important; /* En iOS `overflow:hidden` en el body no alcanza. */ position: fixed; inset: 0; width: 100%; } .hbg-edad { position: fixed; inset: 0; /* Por encima de todo lo demás del sitio: los cajones llegan a 1000 y el botón de WhatsApp a 850. */ z-index: 99999; display: grid; place-items: center; padding: var(--hbg-e4); background: rgba(6, 6, 6, 0.94); backdrop-filter: blur(6px); overflow-y: auto; } .hbg-edad__caja { width: min(480px, 100%); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--hbg-superficie-1); border: 1px solid var(--hbg-neon); box-shadow: 0 0 60px rgba(57, 255, 20, 0.18); text-align: center; animation: hbg-edad-entra 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes hbg-edad-entra { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } .hbg-edad__logo { margin-bottom: var(--hbg-e4); } /* * El aro de colores y el recorte redondo eran para el logo circular. Con un * logotipo apaisado, `width` y `height` fijos en 92 lo aplastaban, y el aro le * dibujaba un círculo detrás de un texto que no es circular. * * Ahora se limita por ALTO y el ancho sale solo, así entra cualquiera de las * dos formas sin deformarse. */ .hbg-edad__logo img { width: auto; max-width: min(280px, 70vw); height: auto; max-height: 92px; margin-inline: auto; } /* El aro sólo tiene sentido si el logo es redondo. Se conserva para poder volver atrás: alcanza con devolverle la clase al marcado. */ .hbg-edad__logo--redondo img { width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(red, orange, yellow, green, blue, violet, red); padding: 3px; } .hbg-edad__titulo { margin: 0 0 var(--hbg-e3); font-family: var(--hbg-fuente-titulo); font-size: clamp(1.35rem, 4vw, 1.75rem); font-weight: 800; color: var(--hbg-neon); text-shadow: 0 0 18px rgba(57, 255, 20, 0.35); } .hbg-edad__texto { margin: 0 0 var(--hbg-e5); color: var(--hbg-texto-suave); font-size: 0.95rem; line-height: 1.55; } .hbg-edad__botones { display: grid; gap: var(--hbg-e2); margin-bottom: var(--hbg-e4); } .hbg-edad__si, .hbg-edad__no { min-height: 50px; padding-inline: var(--hbg-e5); border: 1px solid transparent; border-radius: 0; font-family: var(--hbg-fuente-titulo); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color var(--hbg-transicion), color var(--hbg-transicion), border-color var(--hbg-transicion); } /* Mismo patrón que el resto del sitio: blanco → verde, texto claro. */ .hbg-edad__si { background: #ffffff; color: var(--hbg-negro); } .hbg-edad__si:hover, .hbg-edad__si:focus-visible { background: var(--hbg-neon); color: #ffffff; } .hbg-edad__no { background: transparent; color: var(--hbg-texto-tenue); border-color: var(--hbg-borde-fuerte); } .hbg-edad__no:hover, .hbg-edad__no:focus-visible { color: var(--hbg-texto); border-color: var(--hbg-texto-tenue); } .hbg-edad__legal { margin: 0; color: var(--hbg-texto-tenue); font-size: 0.78rem; line-height: 1.5; } .hbg-edad__legal a { color: var(--hbg-neon); text-decoration: underline; text-underline-offset: 3px; } .hbg-edad__rechazo { margin: var(--hbg-e4) 0 0; padding: var(--hbg-e3); background: rgba(255, 92, 92, 0.1); border: 1px solid var(--hbg-error); color: var(--hbg-error); font-size: 0.9rem; } .hbg-edad__rechazo[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .hbg-edad__caja { animation: none; } }