/* ==========================================================================
PLAY ARGENTINA — Age Gate (playargentina.net)
Negro lujoso + dorado champagne · Montserrat
========================================================================== */
/* Montserrat se carga con en el del documento (más rápido y
confiable que @import, que además fallaba silenciosamente acá). */
:root {
--ag-black: #0A0A0A;
--ag-gold: #D9B25F;
--ag-gold-bright: #F0D9A0;
--ag-text: #F5F0E6;
--ag-text-soft: rgba(245, 240, 230, 0.80);
--ag-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Si ya verificó, el gate nunca se pinta (la clase la pone un script en el head) */
html.ag-ok #ag-gate { display: none !important; }
/* Bloquea el scroll del sitio mientras el gate está abierto */
html:not(.ag-ok),
html:not(.ag-ok) body { overflow: hidden !important; height: 100%; }
#ag-gate {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background-color: #000;
background-image: url('/agegate/bg-desktop.jpg?v=rosa');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-font-smoothing: antialiased;
}
/* El theme del sitio define font-family sobre h1/p/button, y una regla directa
le gana a la herencia. Por eso se fuerza la familia en cada elemento del gate
en vez de declararla solo en el contenedor. */
#ag-gate,
#ag-gate #ag-title,
#ag-gate #ag-msg,
#ag-gate #ag-btn,
#ag-gate #ag-legal,
#ag-gate #ag-legal a {
font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
}
/* Overlay: viñeta + oscurecido, garantiza contraste sobre cualquier fondo */
#ag-gate::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
/* velo suave: la foto tiene que verse. Solo se oscurece una elipse angosta
detras del texto, y el texto ademas lleva sombra propia. */
radial-gradient(ellipse 46% 50% at 50% 48%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.16) 62%, rgba(0,0,0,0) 100%),
linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.04) 45%, rgba(0,0,0,0.30) 100%);
}
#ag-box {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
text-align: center;
}
/* ---------- logo ---------- */
#ag-logo {
width: clamp(66px, 11vw, 92px);
height: auto;
margin: 0 auto 30px;
display: block;
/* El símbolo de marca es celeste; en el gate se vira a dorado para no
competir con la paleta negro/oro. En el header del sitio queda celeste. */
filter: drop-shadow(0 4px 20px rgba(217, 178, 95, 0.30));
}
/* ---------- título ---------- */
#ag-gate #ag-msg,
#ag-gate #ag-legal {
text-shadow: 0 2px 12px rgba(0,0,0,.92), 0 1px 4px rgba(0,0,0,.85);
}
/* El titulo usa drop-shadow, NO text-shadow: con background-clip:text la letra
es transparente y el text-shadow se ve A TRAVES, apagando el dorado.
drop-shadow se aplica sobre el degrade ya dibujado, asi que lo respeta. */
#ag-gate #ag-title {
filter: drop-shadow(0 3px 12px rgba(0,0,0,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.9));
}
#ag-gate #ag-title {
margin: 0 !important;
padding: 0 !important;
font-size: clamp(2.35rem, 7.4vw, 4.4rem) !important;
font-weight: 800 !important;
line-height: 1.06 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
word-spacing: -0.12em; /* el tracking ensancha de más el espacio entre palabras */
text-indent: 0.1em; /* compensa el tracking del último caracter */
color: var(--ag-text) !important;
}
/* 🚨 El theme del sitio fuerza font-size en los dentro de títulos
(computaban 16px aunque el h1 dijera 70px). Hay que heredar a mano. */
#ag-gate #ag-title span {
font-size: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
font-family: inherit !important;
}
#ag-gate #ag-title .ag-thin { font-weight: 300 !important; }
#ag-gate #ag-title .ag-gold {
font-weight: 800 !important;
background: linear-gradient(100deg, #E8B33D 0%, #FFE9A8 42%, #F0C24B 62%, #E8B33D 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #F0C24B;
}
#ag-title .ag-gold {
background: linear-gradient(100deg, var(--ag-gold) 0%, var(--ag-gold-bright) 45%, var(--ag-gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--ag-gold); /* fallback */
}
/* filete dorado */
#ag-rule {
width: min(190px, 46%);
height: 1px;
margin: 22px auto;
background: linear-gradient(90deg, transparent, var(--ag-gold), transparent);
border: 0;
}
/* ---------- mensaje 18+ ---------- */
#ag-msg {
margin: 0 auto 30px;
max-width: 42ch;
font-size: clamp(0.95rem, 1.5vw, 1.05rem);
font-weight: 400;
line-height: 1.65;
letter-spacing: 0.045em;
color: var(--ag-text-soft);
text-wrap: balance;
}
/* ---------- botón ---------- */
#ag-btn {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 clamp(42px, 7vw, 68px);
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.24em;
text-indent: 0.24em;
text-transform: uppercase;
text-decoration: none;
color: var(--ag-gold-bright);
background: rgba(10, 10, 10, 0.55);
border: 1px solid var(--ag-gold);
border-radius: 2px;
cursor: pointer;
transition: color 240ms var(--ag-ease),
border-color 240ms var(--ag-ease),
box-shadow 240ms var(--ag-ease);
}
#ag-btn::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(100deg, var(--ag-gold) 0%, var(--ag-gold-bright) 50%, var(--ag-gold) 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 300ms var(--ag-ease);
}
#ag-btn:hover,
#ag-btn:focus-visible {
color: #000;
border-color: var(--ag-gold-bright);
box-shadow: 0 6px 28px rgba(217, 178, 95, 0.30);
}
#ag-btn:hover::before,
#ag-btn:focus-visible::before { transform: scaleX(1); }
#ag-btn:focus-visible {
outline: 2px solid var(--ag-gold-bright);
outline-offset: 3px;
}
#ag-btn:active { transform: translateY(1px); }
/* ---------- nota legal ---------- */
/* Flex con gap en vez de separadores de texto: así nunca queda un "·" ni una
conjunción colgando al final de un renglón cuando envuelve. */
#ag-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 20px;
margin: 30px auto 0;
max-width: 54ch;
font-size: 0.72rem;
font-weight: 300;
line-height: 1.7;
letter-spacing: 0.02em;
color: rgba(245, 240, 230, 0.56); /* 0.40 daba 3.2:1, abajo del mínimo AA */
}
#ag-legal .ag-sep { display: none; }
#ag-legal a {
color: rgba(245, 240, 230, 0.78);
text-decoration: none;
border-bottom: 1px solid rgba(245, 240, 230, 0.26);
padding: 9px 2px; /* área táctil cómoda sin agrandar el texto */
white-space: nowrap; /* que no parta "política de privacidad" al medio */
transition: color 200ms var(--ag-ease), border-color 200ms var(--ag-ease);
}
#ag-legal a:hover {
color: var(--ag-gold);
border-color: var(--ag-gold);
}
/* ---------- entrada escalonada ---------- */
@keyframes agFadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
#ag-logo, #ag-title, #ag-rule, #ag-msg, #ag-btn, #ag-legal {
animation: agFadeUp 620ms var(--ag-ease) both;
}
#ag-title { animation-delay: 90ms; }
#ag-rule { animation-delay: 150ms; }
#ag-msg { animation-delay: 210ms; }
#ag-btn { animation-delay: 300ms; }
#ag-legal { animation-delay: 380ms; }
/* salida */
#ag-gate.ag-closing {
opacity: 0;
transition: opacity 380ms var(--ag-ease);
}
/* ---------- mobile ---------- */
@media (max-width: 767px) {
#ag-gate { background-image: url('/agegate/bg-mobile.jpg?v=rosa'); }
#ag-title { letter-spacing: 0.11em; text-indent: 0.11em; }
#ag-msg { max-width: 28ch; }
#ag-btn { padding: 0 46px; }
}
/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
#ag-logo, #ag-title, #ag-rule, #ag-msg, #ag-btn, #ag-legal { animation: none; }
#ag-btn, #ag-btn::before, #ag-gate { transition-duration: 1ms; }
}
/* --- la Y de PLAY con orejas de conejo (imagen) ---
Generada con Higgsfield, PNG blanco sobre transparente. Se tinta con el color
del texto por filter, asi acompana al resto del titulo. */
#ag-gate #ag-title .ag-y {
display: inline-block;
position: relative;
width: 0.58em;
height: 0.74em; /* alto de mayuscula, las orejas sobresalen arriba */
vertical-align: baseline;
}
#ag-gate #ag-title .ag-yimg {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
/* 🚨 % y no em: el theme le fija font-size a las imagenes igual que a los
pseudo-elementos, y los em se calculan mal */
height: 148%;
width: auto;
max-width: none;
}
/* la Y es un dibujo: esta letra queda para lectores de pantalla y para que al
copiar el texto siga diciendo PLAY, pero no se ve */
#ag-gate #ag-title .ag-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}