/* Invitación de primera visita. El fondo es un pseudo-elemento que existe desde
   el primer pintado (clase puesta en <head>), así el sitio no parpadea antes. */
@property --iris { syntax: '<length>'; inherits: true; initial-value: 0px; }

html.con-splash { overflow: hidden; --oro: #f3cf8e; --ix: 50%; --iy: 40%; }
html.con-splash body::before { content: ''; position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(120% 80% at 50% 38%, rgba(143, 217, 201, .13), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(243, 207, 142, .09), transparent 70%),
    linear-gradient(#061730, #040f22); }
html.con-splash.abriendo body::before {
  -webkit-mask-image: radial-gradient(circle at var(--ix) var(--iy), transparent var(--iris), #000 calc(var(--iris) + 90px));
  mask-image: radial-gradient(circle at var(--ix) var(--iy), transparent var(--iris), #000 calc(var(--iris) + 90px)); }
html.con-splash #lienzo { z-index: 101; }

#splash { position: fixed; inset: 0; z-index: 102; color: #fff; display: grid; place-items: center; text-align: center;
  padding: max(44px, env(safe-area-inset-top)) 34px max(44px, env(safe-area-inset-bottom)); }
.splash-marco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.splash-marco rect { fill: none; vector-effect: non-scaling-stroke; }
.splash-marco .marco-oro { stroke: var(--oro); stroke-width: 1.4; }
.splash-marco .marco-menta { stroke: var(--menta); stroke-width: 1; opacity: .4; }
.splash-marco .rombo { fill: var(--oro); }

.splash-cuerpo { position: relative; display: grid; justify-items: center; max-width: 620px; }
.splash-figura { position: relative; width: min(58vw, 31vh, 320px); aspect-ratio: 1; display: grid; place-items: center; }
.splash-figura::before { content: ''; position: absolute; inset: -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(143, 217, 201, .2), rgba(243, 207, 142, .07) 45%, transparent 68%); animation: halo 5s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.12); opacity: .7; } }
.splash-figura img { width: 46%; }
html.con-3d .splash-figura img { visibility: hidden; }
.splash-pre { margin-top: clamp(14px, 3vh, 30px); font-size: clamp(17px, 2.3vh, 21px); font-weight: 500; color: rgba(255, 255, 255, .86); }
.splash-pre b { font-weight: 700; color: var(--oro); }
.splash-titulo { margin-top: 10px; font-size: clamp(40px, min(12vw, 8.4vh), 92px); line-height: .96; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.splash-titulo span { color: var(--menta); }
.splash-regla { width: 64px; height: 1px; background: var(--oro); margin-top: clamp(18px, 3vh, 30px); }
.splash-fecha { margin-top: clamp(14px, 2.4vh, 24px); font-size: clamp(19px, 2.8vh, 26px); font-weight: 700; letter-spacing: -.01em; }
.splash-hora { margin-top: 4px; font-size: 17px; color: rgba(255, 255, 255, .78); }
.splash-abrir { margin-top: clamp(22px, 4vh, 40px); min-height: 58px; padding: 0 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--menta); color: var(--navy-hondo); font-size: 19px; font-weight: 800; position: relative; }
.splash-abrir::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--menta); animation: aro 2.2s ease-out infinite; }
.splash-saltar { position: absolute; top: max(26px, env(safe-area-inset-top)); right: 30px; min-height: 44px; padding: 0 12px; background: none; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.splash-saltar:hover { color: #fff; }
@keyframes aro { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.28, 1.6); opacity: 0; } }

@media (max-height: 620px) { .splash-figura { width: min(34vw, 24vh); } .splash-hora { display: none; } }