/*
 * VENEZUELA GAMING — NUI FX V5
 * 2026-09-29
 * Capa visual compartida para MAIN + CUENTA.
 * - NUI moderna / cristal oscuro
 * - SHINE continuo inspirado en la implementación estable de MU Venezuela S21
 * - Partículas globales sin líneas horizontales artificiales
 * - Integración del Banner.gif sin reemplazar ni recomprimir el asset original
 */
:root{
  --vgfx-pink:#ff006e;
  --vgfx-pink-rgb:255,0,110;
  --vgfx-white:255,255,255;
  --vgfx-violet-rgb:129,76,255;
  --vgfx-cyan-rgb:74,213,255;
  --vgfx-shine-period:5200ms;
}

/* =========================================================
   GLOBAL PARTICLES / AMBIENT
   ========================================================= */
#vg-global-particles-v5{
  position:fixed;
  inset:0;
  z-index:72;
  pointer-events:none;
  overflow:hidden;
  opacity:.52;
  mix-blend-mode:screen;
  contain:strict;
}
#vg-global-particles-v5 canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* subtle screen ambience — no fake horizontal scan lines */
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 18%,rgba(var(--vgfx-pink-rgb),.055),transparent 24%),
    radial-gradient(circle at 92% 16%,rgba(var(--vgfx-violet-rgb),.045),transparent 25%),
    radial-gradient(circle at 52% 98%,rgba(var(--vgfx-cyan-rgb),.025),transparent 30%);
  opacity:.78;
}

::selection{background:rgba(var(--vgfx-pink-rgb),.38);color:#fff}

/* =========================================================
   SHINE CONTINUO
   ========================================================= */
.vg-shine-host-v5{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  --vgfx-shine-core:.15;
  --vgfx-shine-soft:.038;
}
.vg-shine-layer-v5{
  display:block!important;
  position:absolute!important;
  inset:-1px!important;
  z-index:35!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  opacity:0;
  transform:translate3d(-165%,0,0) skewX(-20deg);
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 41%,
    rgba(255,235,245,var(--vgfx-shine-soft)) 45%,
    rgba(255,248,252,.07) 48%,
    rgba(255,255,255,var(--vgfx-shine-core)) 50%,
    rgba(255,248,252,.07) 52%,
    rgba(255,235,245,var(--vgfx-shine-soft)) 55%,
    rgba(255,255,255,0) 59%,
    rgba(255,255,255,0) 100%)!important;
  filter:blur(.14px);
  mix-blend-mode:screen;
  animation:vgShineContinuityV5 var(--vgfx-shine-period) linear infinite both!important;
  animation-delay:var(--vgfx-shine-delay,0ms)!important;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
@keyframes vgShineContinuityV5{
  0%{transform:translate3d(-165%,0,0) skewX(-20deg);opacity:0}
  6%{transform:translate3d(-145%,0,0) skewX(-20deg);opacity:.94}
  56%{transform:translate3d(145%,0,0) skewX(-20deg);opacity:.94}
  66%{transform:translate3d(175%,0,0) skewX(-20deg);opacity:.28}
  72%{transform:translate3d(195%,0,0) skewX(-20deg);opacity:0}
  100%{transform:translate3d(195%,0,0) skewX(-20deg);opacity:0}
}

/* old MAIN one-shot sheen off: V5 is the single shine engine */
.hero-slide-sheen{display:none!important;animation:none!important}

/* intensity by component */
.network-hero.vg-shine-host-v5{--vgfx-shine-core:.12;--vgfx-shine-soft:.028}
.animated-separator.vg-shine-host-v5{--vgfx-shine-core:.085;--vgfx-shine-soft:.022}
.button.vg-shine-host-v5,.acc-primary.vg-shine-host-v5{--vgfx-shine-core:.20;--vgfx-shine-soft:.050}
.hero-status-card.vg-shine-host-v5,.platform-card.vg-shine-host-v5,.game-card.vg-shine-host-v5,.upcoming-card.vg-shine-host-v5,.social-card.vg-shine-host-v5{--vgfx-shine-core:.11;--vgfx-shine-soft:.027}
.acc-auth-showcase.vg-shine-host-v5,.acc-auth-card.vg-shine-host-v5,.acc-dashboard-copy.vg-shine-host-v5,.acc-game-card.vg-shine-host-v5,.acc-link-card.vg-shine-host-v5{--vgfx-shine-core:.12;--vgfx-shine-soft:.030}

/* =========================================================
   MAIN — NUI V5
   ========================================================= */
.site-header{
  background:linear-gradient(180deg,rgba(4,4,8,.91),rgba(4,4,8,.78))!important;
  border-bottom-color:rgba(255,255,255,.075)!important;
  box-shadow:0 15px 55px rgba(0,0,0,.28),inset 0 -1px 0 rgba(var(--vgfx-pink-rgb),.08)!important;
  backdrop-filter:blur(24px) saturate(145%)!important;
}
.site-header::before{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--vgfx-pink-rgb),.65),rgba(255,255,255,.18),rgba(var(--vgfx-pink-rgb),.65),transparent);
  opacity:.52;
  pointer-events:none;
}
.header-brand{border-radius:12px;padding:4px 8px}
.header-brand:hover{background:rgba(255,255,255,.02)}
.main-nav a,.header-actions .button{
  backdrop-filter:blur(14px) saturate(130%);
}

.network-hero{
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.045);
}
.network-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:34%;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,4,8,.52) 46%,#05070b 100%);
}
.hero-slide-bg-main{
  filter:saturate(1.08) contrast(1.045) brightness(.98)!important;
}
.hero-slide-bg-blur{
  filter:blur(34px) saturate(1.18) brightness(.52)!important;
  opacity:.74!important;
}
.hero-slide-shade{
  backdrop-filter:saturate(108%);
}
.hero-status-card,
.glass-card{
  backdrop-filter:blur(24px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(145%)!important;
}
.hero-status-card{
  background:linear-gradient(145deg,rgba(13,15,24,.83),rgba(7,8,14,.91))!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035),0 0 40px rgba(var(--theme-accent-rgb,255,0,110),.035)!important;
}
.button-primary{
  box-shadow:0 12px 30px rgba(var(--vgfx-pink-rgb),.14),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.button-primary:hover{
  box-shadow:0 17px 40px rgba(var(--vgfx-pink-rgb),.24),0 0 30px rgba(var(--vgfx-pink-rgb),.11),inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.network-summary,.game-card,.platform-card,.account-network-card,.upcoming-card,.social-card,.footer-status{
  box-shadow:0 22px 65px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.game-card,.platform-card,.upcoming-card,.social-card{
  border-color:rgba(255,255,255,.095)!important;
}
.game-card:hover,.platform-card:hover,.upcoming-card:hover,.social-card:hover{
  box-shadow:0 28px 78px rgba(0,0,0,.36),0 0 38px rgba(var(--theme-accent-rgb,255,0,110),.075),inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* Animated separator remains original 5999x473 GIF, uncropped. */
.animated-separator{
  isolation:isolate;
  background:linear-gradient(180deg,#05070b,#06070b 52%,#07080d)!important;
  box-shadow:0 -18px 60px rgba(0,0,0,.35),0 18px 60px rgba(0,0,0,.30)!important;
}
.animated-separator::before,.animated-separator::after{
  background:linear-gradient(90deg,transparent,rgba(var(--vgfx-pink-rgb),.34),rgba(255,255,255,.12),rgba(var(--vgfx-pink-rgb),.34),transparent)!important;
  box-shadow:0 0 22px rgba(var(--vgfx-pink-rgb),.10);
}
.animated-separator img{
  display:block;
  width:100vw!important;
  max-width:none!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:saturate(1.10) contrast(1.08) drop-shadow(0 0 24px rgba(var(--vgfx-pink-rgb),.08))!important;
}

/* Banner.gif: double layer = full original visible + atmospheric fill. */
.platform-banner-wrap{
  opacity:1!important;
  background:#07080d!important;
  isolation:isolate;
}
.platform-banner-wrap img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  pointer-events:none;
}
.platform-banner-wrap .platform-banner-blur{
  object-fit:cover!important;
  object-position:center!important;
  opacity:.36!important;
  filter:blur(28px) saturate(1.15) contrast(1.06) brightness(.70)!important;
  transform:scale(1.09)!important;
}
.platform-banner-wrap .platform-banner-main{
  object-fit:contain!important;
  object-position:center!important;
  opacity:.52!important;
  filter:saturate(1.08) contrast(1.08) brightness(.78)!important;
  transform:none!important;
}
.platform-section::before{
  background:linear-gradient(180deg,rgba(5,6,10,.88),rgba(5,6,10,.62) 40%,rgba(5,6,10,.94)),radial-gradient(circle at 50% 40%,transparent,rgba(0,0,0,.48))!important;
}
.platform-card{
  background:linear-gradient(145deg,rgba(13,15,22,.82),rgba(7,8,13,.92))!important;
  backdrop-filter:blur(18px) saturate(140%);
}
.account-network-card{
  border-color:rgba(var(--vgfx-pink-rgb),.18)!important;
  background:linear-gradient(90deg,rgba(11,12,18,.88),rgba(15,9,16,.88))!important;
  backdrop-filter:blur(22px) saturate(145%);
}
.community-section,.site-footer{position:relative;isolation:isolate}
.community-backdrop::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0,rgba(var(--vgfx-pink-rgb),.075),transparent 36%);
  animation:vgAmbientPulseV5 8s ease-in-out infinite alternate;
}
@keyframes vgAmbientPulseV5{from{opacity:.35;transform:scale(1)}to{opacity:.78;transform:scale(1.04)}}

/* =========================================================
   ACCOUNT — NUI V5 + ANIMATED BRAND GIF
   ========================================================= */
body:has(.acc-header){background:#040308!important}
.acc-bg{
  filter:none!important;
  background:
    linear-gradient(90deg,rgba(4,3,8,.985) 0%,rgba(4,3,8,.88) 42%,rgba(4,3,8,.91) 100%),
    url('../media/effects/banner.gif') center 14% / cover no-repeat!important;
}
.acc-bg::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 12%,rgba(var(--vgfx-pink-rgb),.15),transparent 28%),
    radial-gradient(circle at 86% 16%,rgba(var(--vgfx-violet-rgb),.08),transparent 30%),
    linear-gradient(180deg,rgba(4,3,8,.05),rgba(4,3,8,.72) 78%,#040308 100%);
}
.acc-gridfx{
  opacity:.13!important;
  background-size:64px 64px!important;
  animation:vgGridDriftV5 24s linear infinite;
}
@keyframes vgGridDriftV5{to{background-position:64px 64px,64px 64px}}
.acc-header{
  background:linear-gradient(180deg,rgba(5,4,9,.91),rgba(5,4,9,.78))!important;
  backdrop-filter:blur(24px) saturate(145%)!important;
  box-shadow:0 16px 54px rgba(0,0,0,.32),inset 0 -1px 0 rgba(var(--vgfx-pink-rgb),.07)!important;
}
.acc-header::after{
  background:linear-gradient(90deg,transparent,rgba(var(--vgfx-pink-rgb),.55),rgba(255,255,255,.14),rgba(var(--vgfx-pink-rgb),.55),transparent)!important;
  opacity:.65;
}
.acc-brand{border-radius:11px;padding:4px 7px}
.acc-nav a{backdrop-filter:blur(10px)}

.acc-auth-showcase,
.acc-dashboard-copy,
.acc-link-card{
  background-image:
    linear-gradient(90deg,rgba(7,6,11,.95),rgba(7,6,11,.60) 52%,rgba(7,6,11,.83)),
    url('../media/effects/banner.gif')!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.acc-auth-showcase{
  border-color:rgba(var(--vgfx-pink-rgb),.16)!important;
  box-shadow:0 32px 100px rgba(0,0,0,.44),0 0 50px rgba(var(--vgfx-pink-rgb),.05),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.acc-auth-showcase::before{
  background:
    radial-gradient(circle at 18% 18%,rgba(var(--vgfx-pink-rgb),.20),transparent 34%),
    linear-gradient(180deg,rgba(4,3,8,.05) 15%,rgba(4,3,8,.82) 100%)!important;
}
.acc-auth-card,.acc-link-card,.acc-game-card,.acc-info-card,.acc-account-note,.acc-dashboard-metrics article,.acc-user-chip,.acc-dashboard-copy{
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 25px 76px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.acc-auth-card,.acc-link-card,.acc-user-chip{
  border-color:rgba(var(--vgfx-pink-rgb),.25)!important;
}
.acc-auth-card{
  background:linear-gradient(145deg,rgba(18,12,18,.92),rgba(7,6,10,.94))!important;
}
.acc-dashboard-copy{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,255,255,.09)!important;
}
.acc-user-chip{
  background:linear-gradient(145deg,rgba(18,10,16,.89),rgba(8,6,10,.92))!important;
}
.acc-dashboard-metrics article{
  background:linear-gradient(145deg,rgba(16,13,21,.88),rgba(7,6,10,.93))!important;
  border-color:rgba(255,255,255,.085)!important;
}
.acc-game-card{
  border-color:rgba(255,255,255,.095)!important;
  background:linear-gradient(145deg,rgba(13,11,17,.91),rgba(6,5,9,.96))!important;
}
.acc-game-backdrop{opacity:.23!important;filter:saturate(1.02) contrast(1.06) brightness(.82)!important}
.acc-game-backdrop::after{
  background:linear-gradient(90deg,rgba(5,4,8,.89) 0%,rgba(5,4,8,.78) 29%,rgba(5,4,8,.92) 72%,rgba(5,4,8,.97) 100%)!important;
}
.acc-game-art{
  background:radial-gradient(circle at 50% 44%,rgba(var(--vgfx-pink-rgb),.16),transparent 62%)!important;
}
.acc-game-art img{filter:drop-shadow(0 0 28px rgba(var(--vgfx-pink-rgb),.22))!important}
.acc-primary{
  box-shadow:0 12px 32px rgba(var(--vgfx-pink-rgb),.16),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.acc-primary:hover{
  box-shadow:0 18px 42px rgba(var(--vgfx-pink-rgb),.28),0 0 30px rgba(var(--vgfx-pink-rgb),.12),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.acc-form input{
  background:rgba(7,6,11,.88)!important;
  backdrop-filter:blur(10px);
}
.acc-footer{
  position:relative;
  background:rgba(4,3,8,.86)!important;
  backdrop-filter:blur(20px);
}
.acc-footer::before{
  content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--vgfx-pink-rgb),.34),transparent);
}

/* =========================================================
   RESPONSIVE / PERFORMANCE
   ========================================================= */
@media(max-width:900px){
  #vg-global-particles-v5{opacity:.38}
  .platform-banner-wrap .platform-banner-blur{filter:blur(20px) saturate(1.10) brightness(.68)!important}
  .platform-banner-wrap .platform-banner-main{opacity:.45!important}
  .acc-bg{background-position:center top!important}
}
@media(max-width:640px){
  #vg-global-particles-v5{opacity:.31}
  .vg-shine-layer-v5{filter:none}
  .acc-bg{background-size:auto 70vh!important;background-position:50% 2%!important;background-color:#040308!important}
  .acc-auth-showcase,.acc-dashboard-copy,.acc-link-card{background-position:center!important}
}
@media(prefers-reduced-motion:reduce){
  #vg-global-particles-v5{display:none!important}
  .vg-shine-layer-v5{display:none!important;animation:none!important}
  .community-backdrop::before,.acc-gridfx{animation:none!important}
}

/* =========================================================
   V10 — HEADER LOGO SHINE COMPACTO
   Corrige el shine del wordmark superior para que el efecto
   se limite al propio logo y no pinte/ocupe toda la celda.
   ========================================================= */
.header-brand.vg-shine-host-v5{
  /* el host conserva su layout actual; el brillo se recorta internamente */
  --vgfx-header-shine-opacity:.56;
}
.header-brand.vg-shine-host-v5 > .vg-shine-layer-v5{
  inset:auto!important;
  left:8px!important;
  top:50%!important;
  width:calc(100% - 16px)!important;
  height:56px!important;
  margin-top:-28px!important;
  border-radius:0!important;
  opacity:0;
  transform:none!important;
  filter:none!important;
  mix-blend-mode:screen!important;
  background:
    linear-gradient(102deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 40%,
      rgba(255,230,242,.035) 45%,
      rgba(255,255,255,.18) 49%,
      rgba(255,255,255,.34) 50%,
      rgba(255,255,255,.18) 51%,
      rgba(255,230,242,.035) 55%,
      rgba(255,255,255,0) 60%,
      rgba(255,255,255,0) 100%) no-repeat!important;
  background-size:320% 100%!important;
  background-position:-165% 0!important;
  -webkit-mask-image:url("../media/brand/venezuela-gaming-wordmark.png");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url("../media/brand/venezuela-gaming-wordmark.png");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  animation:vgHeaderLogoShineV10 6000ms ease-in-out infinite both!important;
  animation-delay:var(--vgfx-shine-delay,0ms)!important;
  will-change:background-position,opacity;
}
@keyframes vgHeaderLogoShineV10{
  0%,12%{background-position:-165% 0;opacity:0}
  18%{opacity:.18}
  28%{opacity:var(--vgfx-header-shine-opacity,.56)}
  54%{background-position:165% 0;opacity:var(--vgfx-header-shine-opacity,.56)}
  62%{opacity:.12}
  68%,100%{background-position:165% 0;opacity:0}
}

/* Ajuste proporcional según el tamaño real del wordmark del header */
@media (max-width:1180px){
  .header-brand.vg-shine-host-v5 > .vg-shine-layer-v5{
    height:50px!important;
    margin-top:-25px!important;
  }
}
@media (max-width:760px){
  .header-brand.vg-shine-host-v5 > .vg-shine-layer-v5{
    left:7px!important;
    width:calc(100% - 14px)!important;
    height:43px!important;
    margin-top:-21.5px!important;
  }
}
@media (max-width:430px){
  .header-brand.vg-shine-host-v5 > .vg-shine-layer-v5{
    height:38px!important;
    margin-top:-19px!important;
  }
}

/* En reduced-motion no se fuerza ningún brillo del logo. */
@media (prefers-reduced-motion:reduce){
  .header-brand.vg-shine-host-v5 > .vg-shine-layer-v5{
    display:none!important;
    animation:none!important;
  }
}


/* =========================================================
   V11 — HEADER WORDMARK SHINE REAL (SIN RECTANGULO)
   La V10 dependia de CSS mask sobre una capa rectangular.
   En algunos navegadores esa mascara no se aplicaba y el
   host completo podia percibirse como un cuadro. V11 no usa
   mask: anima una SEGUNDA COPIA DEL PNG TRANSPARENTE.
   El propio alpha del logo recorta el brillo pixel a pixel.
   ========================================================= */
.header-brand,
.header-brand:hover,
.header-brand:focus,
.header-brand:focus-visible,
.header-brand.header-brand-v11{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important;
  outline-offset:5px;
}

/* Neutraliza por completo cualquier capa generica heredada. */
.header-brand > .vg-shine-layer-v5,
.header-brand.vg-shine-host-v5 > .vg-shine-layer-v5{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
  background:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}

.header-brand.header-brand-v11{
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
  padding:4px 8px!important;
}
.header-logo-stack-v11{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:190px;
  max-width:100%;
  line-height:0;
  overflow:hidden;
  isolation:isolate;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.header-logo-stack-v11 > .header-wordmark{
  grid-area:1/1;
  display:block;
  width:100%!important;
  max-width:100%;
  height:auto!important;
  object-fit:contain;
  background:transparent!important;
}
.header-wordmark-shine-v11{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  user-select:none!important;
  opacity:0;
  /* La imagen duplicada conserva transparencia: nunca existe rectangulo. */
  filter:grayscale(1) brightness(3.35) contrast(1.08) drop-shadow(0 0 3px rgba(255,255,255,.18));
  mix-blend-mode:screen;
  clip-path:polygon(-34% 0,-15% 0,2% 100%,-17% 100%);
  animation:vgHeaderPngShineV11 5200ms cubic-bezier(.22,.62,.27,1) infinite both!important;
  will-change:clip-path,opacity,filter;
}
@keyframes vgHeaderPngShineV11{
  0%,14%{
    clip-path:polygon(-34% 0,-15% 0,2% 100%,-17% 100%);
    opacity:0;
  }
  18%{opacity:.16}
  24%{opacity:.52}
  54%{
    clip-path:polygon(99% 0,118% 0,135% 100%,116% 100%);
    opacity:.52;
  }
  62%{opacity:.10}
  68%,100%{
    clip-path:polygon(115% 0,134% 0,151% 100%,132% 100%);
    opacity:0;
  }
}

@media (max-width:1320px){
  .header-logo-stack-v11{width:165px}
}
@media (max-width:720px){
  .header-logo-stack-v11{width:142px}
}
@media (max-width:430px){
  .header-logo-stack-v11{width:122px}
}
@media (prefers-reduced-motion:reduce){
  .header-wordmark-shine-v11{display:none!important;animation:none!important}
}

/* ========================================================================== */
/* V12 — BANNER.GIF FULL WIDTH / RELACION ORIGINAL 16:9                      */
/* ========================================================================== */
/*
 * Banner.gif mide 768x432 (16:9). En V5/V11 el contenedor era mucho mas
 * ancho que 16:9 y la capa principal usaba object-fit:contain. Eso obligaba
 * al GIF a reducirse en el centro y dejaba grandes laterales, dando la
 * sensacion de imagen cuadrada.
 *
 * En escritorio hacemos que la propia seccion respete la relacion 16:9 del
 * GIF. Asi object-fit:contain puede mostrar el archivo COMPLETO y al mismo
 * tiempo alcanzar ambos bordes de la pantalla sin estirarlo ni deformarlo.
 */
@media (min-width:901px){
  .platform-section{
    width:100%!important;
    min-height:max(740px,56.25vw)!important;
    aspect-ratio:16 / 9!important;
  }

  .platform-banner-wrap{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    overflow:hidden!important;
  }

  .platform-banner-wrap .platform-banner-main{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }

  /* La segunda copia solo rellena imperceptiblemente cualquier redondeo o
     pixel residual del navegador; nunca sustituye ni recorta al GIF principal. */
  .platform-banner-wrap .platform-banner-blur{
    inset:-2px!important;
    width:calc(100% + 4px)!important;
    height:calc(100% + 4px)!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:scale(1.025)!important;
    opacity:.24!important;
  }
}

/* En tablet/movil la seccion es mas alta por el contenido. Mantenemos el GIF
   centrado y sin deformar, mientras la capa ambiente cubre el resto. */
@media (max-width:900px){
  .platform-section{
    aspect-ratio:auto!important;
  }
  .platform-banner-wrap .platform-banner-main{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    left:50%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:translate(-50%,-50%)!important;
  }
  .platform-banner-wrap .platform-banner-blur{
    object-fit:cover!important;
    object-position:center!important;
  }
}