/* =====================================================================
   PRELOADER · pantalla lima con isotipo negro, dial de marcas y resonancia.
   Cubre la espera del vídeo del hero; sale como cortina y el hero entra en pop.
   ===================================================================== */
#preloader{position:fixed;inset:0;z-index:9999;background:#E6FE2C;display:grid;place-items:center;will-change:transform,opacity}
#preloader .grid{position:absolute;inset:-60px;background-image:linear-gradient(to right,rgba(10,10,10,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,.07) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,rgba(0,0,0,.35) 55%,transparent 78%);mask-image:radial-gradient(circle at 50% 50%,#000 20%,rgba(0,0,0,.35) 55%,transparent 78%);animation:pl-drift 12s linear infinite}
#preloader .cross-h,#preloader .cross-v{position:absolute;opacity:.14;animation:pl-crosshair 3200ms cubic-bezier(.45,0,.55,1) infinite}
#preloader .cross-h{left:0;right:0;top:50%;height:1px;background:linear-gradient(to right,transparent,rgba(10,10,10,.55) 18%,rgba(10,10,10,.55) 82%,transparent)}
#preloader .cross-v{top:0;bottom:0;left:50%;width:1px;background:linear-gradient(to bottom,transparent,rgba(10,10,10,.55) 18%,rgba(10,10,10,.55) 82%,transparent)}
#preloader .reg{position:absolute;width:26px;height:26px;opacity:.5}
#preloader .reg.tl{left:34px;top:34px;border-left:1px solid #0A0A0A;border-top:1px solid #0A0A0A}
#preloader .reg.tr{right:34px;top:34px;border-right:1px solid #0A0A0A;border-top:1px solid #0A0A0A}
#preloader .reg.bl{left:34px;bottom:34px;border-left:1px solid #0A0A0A;border-bottom:1px solid #0A0A0A}
#preloader .reg.br{right:34px;bottom:34px;border-right:1px solid #0A0A0A;border-bottom:1px solid #0A0A0A}
#preloader .stack{position:relative;width:180px;height:180px;display:grid;place-items:center}
#preloader .stack>*{position:absolute;left:50%;top:50%}
#preloader .ticks,#preloader .ticks-major{width:516px;height:516px;margin:-258px 0 0 -258px;border-radius:50%;animation:pl-spin 48s linear infinite,pl-tick-pulse 3200ms cubic-bezier(.45,0,.55,1) infinite}
#preloader .ticks{background:repeating-conic-gradient(from 0deg,#0A0A0A 0deg .45deg,transparent .45deg 5deg);-webkit-mask-image:radial-gradient(circle,transparent calc(50% - 11px),#000 calc(50% - 11px),#000 calc(50% - 1px),transparent calc(50% - 1px));mask-image:radial-gradient(circle,transparent calc(50% - 11px),#000 calc(50% - 11px),#000 calc(50% - 1px),transparent calc(50% - 1px));opacity:.95}
#preloader .ticks-major{background:repeating-conic-gradient(from 0deg,#0A0A0A 0deg .9deg,transparent .9deg 45deg);-webkit-mask-image:radial-gradient(circle,transparent calc(50% - 24px),#000 calc(50% - 24px),#000 calc(50% - 1px),transparent calc(50% - 1px));mask-image:radial-gradient(circle,transparent calc(50% - 24px),#000 calc(50% - 24px),#000 calc(50% - 1px),transparent calc(50% - 1px))}
#preloader .ring-breathe{width:452px;height:452px;margin:-226px 0 0 -226px;border:1px solid #0A0A0A;border-radius:50%;opacity:.55;animation:pl-breathe 3200ms cubic-bezier(.45,0,.55,1) infinite}
#preloader .ring-solid{width:392px;height:392px;margin:-196px 0 0 -196px;border:2px solid #0A0A0A;border-radius:50%;opacity:.85;animation:pl-spin 4800ms cubic-bezier(.45,0,.55,1) infinite}
#preloader .arc{width:423.5px;height:423.5px;margin:-211.75px 0 0 -211.75px;border:3px solid transparent;border-bottom-color:#0A0A0A;border-radius:50%;opacity:.75;animation:pl-spin-rev 7200ms linear infinite}
#preloader .wave{width:580px;height:580px;transform:translate(-50%,-50%);border:2px solid #0A0A0A;border-radius:50%;opacity:0;animation:pl-wave 3200ms cubic-bezier(.16,1,.3,1) infinite backwards}
#preloader .wave.w2{animation-delay:800ms}
#preloader .wave.w3{animation-delay:1600ms}
#preloader .wave.w4{animation-delay:2400ms}
#preloader .mark{width:180px;height:180px;display:block;transform:translate(-50%,-50%)}
#preloader .mark img{width:180px;height:180px;object-fit:contain;display:block}
@keyframes pl-wave{0%{width:580px;height:580px;opacity:0}8%{opacity:.6}100%{width:1180px;height:1180px;opacity:0}}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-spin-rev{to{transform:rotate(-360deg)}}
@keyframes pl-drift{to{transform:translate3d(-48px,-48px,0)}}
@keyframes pl-breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.015);opacity:.85}}
@keyframes pl-tick-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes pl-crosshair{0%,100%{opacity:.1}50%{opacity:.2}}
/* Pantallas chicas: el dial se recorta al ancho disponible */
@media (max-width:760px){#preloader .stack{transform:scale(.62)}}
/* Entrada del hero tras la cortina. El estado inicial se marca en el propio
   elemento (clase pl-from) y se retira por JS: así ningún fallo de cascada o de
   temporización puede dejar el hero invisible. */
#inicio .hero-sw.pl-from{opacity:0;transform:translateY(14px) scale(.96)}
#inicio .hero-sw{transition:opacity 700ms cubic-bezier(.16,1,.3,1),transform 700ms cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  #preloader .grid,#preloader .cross-h,#preloader .cross-v,#preloader .ticks,#preloader .ticks-major,#preloader .ring-breathe,#preloader .ring-solid,#preloader .arc,#preloader .wave{animation:none!important}
  #preloader .wave{opacity:0!important}
  #inicio .hero-sw{transition-duration:300ms}
}


/* ============================================================================
   TINTE DE LA BARRA DE SAFARI EN iOS
   La cortina de carga es lima a sangre y es lo primero que se pinta: iOS toma de
   ahí el tinte de sus barras y lo conserva toda la sesión. En teléfono la cortina
   arranca en negro y pasa a lima tras la primera pintada: la animación se ve
   igual, pero iOS ya ha muestreado negro.
   ========================================================================== */
@media (max-width:920px){
  #preloader{background:#0A0A0A;animation:pl-tint 1ms linear 450ms forwards}
  @keyframes pl-tint{to{background:#E6FE2C}}
}