/* Lupa FLOW: amplía palabras del titular al hacer scroll.
   Decorativa (aria-hidden): el titular real no cambia. */
[data-lupa-stage] { position: relative; }
/* la lupa entra desde fuera de la pantalla: sin crear scroll horizontal */
.problem { overflow-x: clip; }
.lw { white-space: nowrap; }

.lupa {
  --R: 158px;           /* radio del cristal */
  --ring: 18px;         /* grosor del aro */
  position: absolute; left: 0; top: 0; z-index: 5;
  width: calc(var(--R) * 2); height: calc(var(--R) * 2);
  margin: calc(var(--R) * -1) 0 0 calc(var(--R) * -1);
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
}
/* sombra proyectada sobre la página, separada del cristal para dar altura */
.lupa__shadow {
  position: absolute; inset: 0; border-radius: 50%;
  transform: translate(10px, 26px) scale(.96);
  background: radial-gradient(closest-side, rgba(7, 27, 72, .20), rgba(7, 27, 72, .07) 70%, transparent);
  filter: blur(10px);
}
.lupa__handle-arm { position: absolute; inset: 0; transform: rotate(-45deg); }
.lupa__handle {
  position: absolute; left: 50%; top: calc(100% - 4px);
  width: calc(var(--R) * .27); height: calc(var(--R) * .86);
  margin-left: calc(var(--R) * -.135);
  border-radius: 999px;
  background: linear-gradient(90deg, #0A4FB0 0%, #2D86F0 38%, #0B5FD0 70%, #083F92 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.25) inset, 0 10px 20px -8px rgba(7, 27, 72, .45);
}
.lupa__handle::before { /* casquillo que une mango y aro */
  content: ""; position: absolute; left: -12%; right: -12%; top: -6px; height: 16px; border-radius: 6px;
  background: linear-gradient(90deg, #08408F, #1C6FD8 45%, #08408F);
}
.lupa__view {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background-color: #fff;   /* el JS lo vuelve transparente en la salida */
  box-shadow: inset 0 0 0 1px rgba(7,27,72,.06), inset 0 -14px 34px rgba(0,104,232,.10);
}
.lupa__clone {
  position: absolute; left: 0; top: 0; margin: 0 !important;
  transform-origin: 0 0; will-change: transform;
}
/* aro con los colores del logotipo */
.lupa__ring {
  position: absolute; inset: calc(var(--ring) * -0.35); border-radius: 50%;
  background: conic-gradient(from 200deg, #0068E8 0 16%, #D8131B 16% 38%, #F57C00 38% 52%, #F2B600 52% 64%, #1E9E4A 64% 84%, #0068E8 84% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 1px));
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}
/* brillo del cristal */
.lupa__shine {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(60% 45% at 30% 22%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,104,232,.10) 100%);
  mix-blend-mode: screen;
}
.lupa__shine::after { /* reflejo curvo */
  content: ""; position: absolute; left: 16%; top: 12%; width: 34%; height: 18%;
  border-radius: 50%; border-top: 3px solid rgba(255,255,255,.9); transform: rotate(-28deg); filter: blur(.4px);
}

/* el giro de "desorden" a "orden" solo ocurre dentro del cristal */
.lupa__clone .lw-des { position: relative; color: color-mix(in srgb, #071B48 calc(100% - var(--m, 0) * 70%), #ffffff); }
.lupa__clone .lw-des::after {
  content: ""; position: absolute; left: -2%; top: 54%; height: .09em; border-radius: 1em;
  width: calc(var(--m, 0) * 104%); background: #D8131B;
}
.lupa__clone .lw-orden { color: color-mix(in srgb, #0068E8 calc(var(--m, 0) * 100%), #071B48); }

@media (max-width: 899px) {
  .lupa { display: none; }   /* solo escritorio */
}
@media (prefers-reduced-motion: reduce) {
  .lupa { display: none; }
}