/* ============ HERO: ESTALLIDO DE PRODUCTO ============ */
      .elrey-page .hero { background:#2e0668; position:relative; overflow:hidden; }

      /* el texto se eleva por sus hijos: .hero-l trae fondo opaco */
      .elrey-page .hero-l > .hero-eyebrow,
      .elrey-page .hero-l > .hero-h1,
      .elrey-page .hero-l > .hero-sub,
      .elrey-page .hero-l > .hero-btns { position:relative; z-index:5; }

      /* --- la llave visual --- */
      .er_vit { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
      .er_vit picture { display:block; position:absolute; inset:0; }
      .er_vit img {
        position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; object-position:center center;
        animation:erEntraFondo 1.1s ease-out backwards,
                  erZoom 30s ease-in-out 1.1s infinite alternate;
        will-change:transform, opacity; }
      @keyframes erEntraFondo {
        from { opacity:0; transform:scale(1.08); }
        to   { opacity:1; transform:scale(1); } }
      @keyframes erZoom {
        from { transform:scale(1)     translateX(0); }
        to   { transform:scale(1.075) translateX(-1.2%); } }

      /* destellos que laten sobre el estallido dorado del centro */
      .er_chispa {
        position:absolute; inset:0; z-index:2; pointer-events:none;
        background:radial-gradient(38% 62% at 50% 46%,
          rgba(255,214,92,.28) 0%, rgba(255,190,60,.10) 42%, rgba(255,190,60,0) 70%);
        animation:erLate 4.2s ease-in-out infinite; }
      @keyframes erLate {
        0%,100% { opacity:.45; transform:scale(1); }
        50%     { opacity:.95; transform:scale(1.06); } }

      /* velo que hace legible el titular sobre el centro dorado */
      .er_velo {
        position:absolute; inset:0; z-index:3; pointer-events:none;
        background:
          radial-gradient(42% 58% at 50% 46%,
            rgba(38,4,86,.86) 0%, rgba(38,4,86,.62) 55%, rgba(38,4,86,0) 82%),
          linear-gradient(180deg, rgba(38,4,86,.35) 0%, rgba(38,4,86,0) 28%,
            rgba(38,4,86,0) 62%, rgba(38,4,86,.5) 100%); }

      @media (min-width: 992px) {
        .elrey-page .hero-l { padding-bottom:3.5rem !important; }
      }
      @media (max-width: 991.98px) {
        .elrey-page .hero-l { padding-bottom:2.5rem !important; }
        /* en vertical la imagen recorta al centro: se refuerza el velo */
        .er_vit img { object-position:center center; animation:erEntraFondo 1.1s ease-out backwards; }
        /* el texto ocupa casi todo el alto: se oscurece la franja central
           y se dejan limpios los extremos, donde estan los productos */
        .er_velo { background:
          linear-gradient(180deg,
            rgba(38,4,86,.30) 0%,   rgba(38,4,86,.80) 13%,
            rgba(38,4,86,.88) 30%,  rgba(38,4,86,.88) 72%,
            rgba(38,4,86,.72) 86%,  rgba(38,4,86,.45) 100%); }
        .er_chispa { animation:none; opacity:.5; }
      }

      @media (prefers-reduced-motion: reduce) {
        .er_vit img { animation:none !important; }
        .er_chispa { animation:none; opacity:.6; }
      }