/* ==========================================================================
   NEÓN AZUL AL PASAR EL CURSOR
   Un halo del azul de la marca (#0663F5) alrededor de recuadros, fotos y
   videos. Es CSS puro y sólo se activa con mouse de verdad
   (`hover:hover` + `pointer:fine`), así que en el celular no cuesta nada ni
   deja estados pegados.
   Regla de la casa: el halo NO mueve ni agranda nada. Sólo pinta sombra y
   borde, que es lo único que no puede hacer parpadear al elemento cuando el
   cursor le queda en el filo.
   ========================================================================== */

:root{
  --neon:        6, 99, 245;                     /* el azul de la empresa, en RGB */
  --neon-halo:   0 0 0 1.5px rgba(var(--neon), .55),
                 0 0 16px rgba(var(--neon), .34),
                 0 0 38px rgba(var(--neon), .20);
  --neon-halo-s: 0 0 0 1.5px rgba(var(--neon), .50),
                 0 0 12px rgba(var(--neon), .30),
                 0 0 26px rgba(var(--neon), .16);
}

@media (hover:hover) and (pointer:fine){

  /* ---------------------------------------------------- recuadros y cajas */
  .card,
  .prodCard,
  .svcCard,
  .accCard,
  .garCard,
  .trabCard,
  .faqItem,
  .testi,
  .stat,
  .eqCard,
  .redCard,
  .pagosBox,
  .enviosBox,
  .contactCard,
  .mapCard,
  .ctaCard,
  .promo,
  .brands,
  .accBox,
  .prodFoto,
  .anSkel{
    transition:box-shadow .3s cubic-bezier(.22,.61,.36,1),
               border-color .3s cubic-bezier(.22,.61,.36,1);
  }

  .card:hover,
  .prodCard:hover,
  .svcCard:hover,
  .accCard:hover,
  .garCard:hover,
  .trabCard:hover,
  .faqItem:hover,
  .testi:hover,
  .stat:hover,
  .eqCard:hover,
  .redCard:hover,
  .pagosBox:hover,
  .enviosBox:hover,
  .contactCard:hover,
  .mapCard:hover,
  .ctaCard:hover,
  .promo:hover,
  .brands:hover,
  .accBox:hover,
  .prodFoto:hover{
    box-shadow:var(--neon-halo);
    border-color:rgba(var(--neon), .55);
  }

  /* ------------------------------------------------- fotos, videos, mapas */
  figure,
  video,
  .prodCard__fig,
  .svcCard__art,
  .accCard__art,
  .trabCard__art,
  .eqCard__fig,
  .pagosBox__fig,
  .mapCard__map,
  .mtrLocal,
  .brands li{
    transition:box-shadow .3s cubic-bezier(.22,.61,.36,1);
  }

  figure:hover,
  video:hover,
  .prodCard__fig:hover,
  .svcCard__art:hover,
  .accCard__art:hover,
  .trabCard__art:hover,
  .eqCard__fig:hover,
  .pagosBox__fig:hover,
  .mapCard__map:hover,
  .mtrLocal:hover,
  .brands li:hover{
    box-shadow:var(--neon-halo-s);
  }

  /* la foto de la ficha ya es una caja blanca: el halo va sobre ella y no
     sobre la figura de adentro, para no dibujar dos aros */
  .prodFoto figure:hover,
  .prodFoto:hover figure{ box-shadow:none; }

  /* dentro de una tarjeta el aro lo lleva la tarjeta, no las dos cosas */
  .prodCard:hover .prodCard__fig{ box-shadow:none; }
  .trabCard:hover .trabCard__art,
  .svcCard:hover .svcCard__art,
  .accCard:hover .accCard__art,
  .eqCard:hover .eqCard__fig{ box-shadow:none; }

  /* -------------------------------------------------- botones y flotantes */
  .waFab,
  .carFab,
  .toTop,
  .anArriba{ transition:box-shadow .3s cubic-bezier(.22,.61,.36,1); }
  .carFab:hover,
  .toTop:hover,
  .anArriba:hover{ box-shadow:var(--neon-halo-s); }

  /* el logo del encabezado también responde */
  .brand__mark{ transition:filter .3s cubic-bezier(.22,.61,.36,1); }
  .brand:hover .brand__mark{ filter:drop-shadow(0 0 10px rgba(var(--neon), .45)); }
}