/* ═══════════════════════════════════════════════════════════════ AGE GATE — Verificación de mayoría de edad (Sí/No) Componente compartido por todas las páginas públicas. Ley 124 de 1994 · Ley 30 de 1986 · Colombia ═══════════════════════════════════════════════════════════════ */ /* Mientras la verificación esté pendiente (clase puesta por el bootstrap en ): bloquear scroll y ocultar el contenido para evitar parpadeos antes de que monte el diálogo. */ html.ag-lock, html.ag-lock body { overflow: hidden !important; } html.ag-lock body > *:not(#age-gate) { visibility: hidden; } /* El age gate va estático en el HTML (pinta al instante → LCP medible). Solo se muestra cuando la verificación está pendiente (html.ag-lock); para visitantes ya verificados permanece oculto sin parpadeo. */ #age-gate { display: none; } html.ag-lock #age-gate { display: flex; } #age-gate { position: fixed; inset: 0; z-index: 99999; background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(201, 168, 76, 0.07), transparent 70%), #070706; align-items: center; justify-content: center; padding: 2rem 1.5rem; font-family: 'Montserrat', system-ui, sans-serif; text-align: center; visibility: visible; } .ag-box { max-width: 560px; width: 100%; } .ag-brand { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(201, 168, 76, 0.75); margin-bottom: 0.6rem; } .ag-brand-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2rem; font-weight: 400; letter-spacing: 0.18em; color: #F5EEDF; margin-bottom: 1.6rem; } .ag-divider { width: 56px; height: 1px; margin: 0 auto 2rem; background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.7), transparent); } #ag-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 400; color: #EFE8D8; margin: 0 0 0.9rem; line-height: 1.15; } .ag-text { font-size: 0.82rem; line-height: 1.8; color: #AFA596; max-width: 40ch; margin: 0 auto 2.2rem; } .ag-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.4rem; } .ag-btn { min-height: 48px; padding: 0.9rem 1.9rem; font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .ag-btn:focus-visible { outline: 2px solid #E0BE6A; outline-offset: 3px; } .ag-yes { background: #C9A84C; border: 1px solid #C9A84C; color: #0A0806; } .ag-yes:hover { background: #E0BE6A; border-color: #E0BE6A; } .ag-no { background: transparent; border: 1px solid rgba(201, 168, 76, 0.45); color: #C0B7A7; } .ag-no:hover { border-color: rgba(201, 168, 76, 0.8); color: #EFE8D8; } .ag-legal { font-size: 0.62rem; line-height: 1.8; color: rgba(175, 165, 150, 0.62); border-top: 1px solid rgba(201, 168, 76, 0.14); padding-top: 1.4rem; max-width: 46ch; margin: 0 auto; } .ag-legal strong { color: rgba(201, 168, 76, 0.55); font-weight: 500; } @media (prefers-reduced-motion: no-preference) { #age-gate { animation: agFade 0.35s ease; } @keyframes agFade { from { opacity: 0; } to { opacity: 1; } } } @media (max-width: 480px) { .ag-actions { flex-direction: column; align-items: stretch; } }