/* =========================================================
   LOGO SHINE (Espejo) — SOLO ESTE ARCHIVO
   Requiere: .brand { --logo-mask: url(...); } en base
   Activa con: body.has-logo-shine
========================================================= */

body.has-logo-shine .brand::after{
  content:"";
  position:absolute;
  left: 0;

  top: 50%;
  height: var(--logo-h-desktop);
  transform: translateY(calc(-50% + var(--logo-pop)));

  width: 260px; /* ajusta si tu logo es más ancho */
  pointer-events:none;

  /* espejo: banda ancha + línea fina */
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.18) 44%,
      rgba(255,255,255,.95) 50%,
      rgba(255,255,255,.18) 56%,
      rgba(255,255,255,0) 66%,
      transparent 100%
    ),
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,0) 47%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,0) 53%,
      transparent 100%
    );

  /* 2 capas */
  background-size: 260% 100%, 260% 100%;
  background-position: 220% 0, 220% 0;

  animation: logoShine 9s ease-in-out infinite;

  -webkit-mask-image: var(--logo-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: contain;

  mask-image: var(--logo-mask);
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: contain;

  opacity: .95;
  mix-blend-mode: screen;
  filter: blur(.35px) saturate(1.05);
}

@keyframes logoShine{
  0%   { background-position: 220% 0, 220% 0; opacity: 0; }
  12%  { opacity: .95; }
  55%  { opacity: .95; }
  80%  { opacity: .20; }
  100% { background-position: -40% 0, -40% 0; opacity: 0; }
}

/* ajuste móvil del brillo */
@media (max-width: 980px){
  body.has-logo-shine .brand::after{
    height: var(--logo-h-mobile);
    width: 230px;
  }
}