/* ═══════════════════════════════════════════════════════════════════
   Motion editorial — la parte en CSS (la coreografía vive en js/motion.js)
   - Cambio de vista: fade + 10 px hacia arriba, 240 ms (pisa el fade de
     180 ms de .entrando en estilos.css: mismo disparador, gesto completo).
   - Microinteracciones de fichas, tarjetas de Novedades y gráficos: sólo
     transform y opacity, 150 ms, --ease-entrada (estetica-v7 §8).
   - Los botones NO se tocan acá (los rediseña su propio sistema).
   - Todo dentro de prefers-reduced-motion: no-preference. Con reduce,
     nada de esto existe y rige estilos.css tal cual.
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* ═══ CAMBIO DE VISTA ═══ */
  .entrando { animation: motion-vista 240ms var(--ease-entrada); }

  /* ═══ LÍNEAS DE TITULAR (SplitText, mientras dura la entrada) ═══
     La máscara no recorta descendentes ni acentos de la línea de abajo. */
  .motion-linea-mask { padding-bottom: .08em; margin-bottom: -.08em; }

  /* ═══ FICHAS DE ÁREAS ═══
     Hover: lo resuelve estilos.css (-2px, borde). Acá: el foco de teclado
     recibe la misma respuesta que el mouse, y el toque en el celular (sin
     hover) tiene acuse inmediato al presionar. Las micro-barras se
     encienden con la ficha. */
  .ficha:focus-visible { background: var(--c-vidrio-hover); border-color: var(--c-vidrio-borde-hover); transform: translateY(-2px); }
  .ficha:active { transform: translateY(0) scale(.99); transition-duration: 80ms; }
  .ficha__barra { transition: opacity 150ms var(--ease-entrada); }
  .ficha:hover .ficha__barra:not(.ficha__barra--neg):not(.ficha__barra--pos),
  .ficha:focus-visible .ficha__barra:not(.ficha__barra--neg):not(.ficha__barra--pos) { opacity: .8; }

  /* ═══ TARJETAS DE NOVEDADES ═══
     La tarjeta no es un enlace: no se levanta (prometería un click que no
     hay). Su borde responde cuando el puntero o el foco están adentro. */
  .novedad { transition: border-color 150ms var(--ease-entrada); }
  .novedad:hover, .novedad:focus-within { border-color: var(--c-vidrio-borde-hover); }

  /* ═══ GRÁFICOS ═══
     Con puntero fino, la fila bajo el mouse queda en primer plano y las
     demás bajan: se lee un dato por vez. */
  @media (pointer: fine) {
    .g-fila { transition: opacity 150ms var(--ease-entrada); }
    .grafico-svg:has(.g-fila:hover) .g-fila:not(:hover) { opacity: .45; }
  }
}

@keyframes motion-vista {
  from { opacity: 0; transform: translateY(10px); }
}

/* ═══════════════════════════════════════════════════════════════════
   MEJORAS 21st.dev (docs/mejoras-21st.md, ítems 1–4)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1 · SEGMENTADOS ═══
   El indicador (creado por js/motion.js) cubre todo el control y se recorta
   a la opción activa: el fondo blanco deja de ser de cada botón. Las
   opciones quedan por encima. Sin JS no existe .segmentado y rige
   estilos.css tal cual. */
.segmentado { --r-segmento: calc(var(--r-vidrio) - 4px); position: relative; isolation: isolate; }
.segmentado__indicador, .segmentado__resaltado {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.segmentado__indicador { background: var(--c-blanco); }
.segmentado__resaltado { background: rgb(255 255 255 / .07); opacity: 0; }
.segmentado--sobre .segmentado__resaltado { opacity: 1; }
.segmentado > :not(.segmentado__indicador):not(.segmentado__resaltado) { position: relative; z-index: 1; }
.segmentado .solapas__opcion[aria-selected="true"],
.segmentado .filtro__opcion[aria-checked="true"] { background: transparent; }

/* "Ver por": los radios nativos pasan a segmentos. El input sigue siendo el
   control (flechas, foco, formulario); sólo se oculta a la vista. */
.filtros__ver.segmentado {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--c-vidrio-borde);
  border-radius: var(--r-vidrio);
}
.filtros__ver.segmentado legend { padding: 0 var(--s-3) 0 var(--s-2); margin: 0; align-self: center; }
.filtros__ver.segmentado label {
  min-height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-segmento);
  color: var(--c-sobre-oscuro-2);
  cursor: var(--cursor-mano);
}
.filtros__ver.segmentado input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.filtros__ver.segmentado label:has(input:checked) { color: var(--c-tinta-sobre-luz); }
.filtros__ver.segmentado label:has(input:focus-visible) { outline: 3px solid var(--c-celeste); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .segmentado--listo .segmentado__indicador { transition: clip-path 220ms var(--ease-entrada); }
  .segmentado--listo .segmentado__resaltado { transition: clip-path 180ms var(--ease-entrada), opacity 150ms var(--ease-entrada); }
  /* El texto cambia de color al ritmo del indicador: nunca tinta sobre noche. */
  .segmentado--listo > * { transition-duration: 220ms; }
}

/* ═══ 2 · SPOTLIGHT ═══
   Halo celeste ≤ 10% bajo el puntero y el borde que se aclara cerca de él.
   Sólo puntero fino y con movimiento (la clase la pone js/motion.js). */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Contexto de apilado propio: el halo va detrás del texto y delante del fondo. */
  .spotlight { position: relative; isolation: isolate; }
  .spotlight::before, .spotlight::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 200ms var(--ease-entrada);
  }
  .spotlight::before {
    inset: 0;
    z-index: -1;
    background: radial-gradient(280px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgb(0 185 242 / .09), transparent 70%);
  }
  .spotlight::after {
    inset: -1px;
    border: 1px solid rgb(127 220 249 / .55);
    -webkit-mask-image: radial-gradient(160px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000, transparent 75%);
    mask-image: radial-gradient(160px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000, transparent 75%);
  }
  .spotlight--activo::before, .spotlight--activo::after { opacity: 1; }
}

/* ═══ 3 · MEGA-MENÚ ═══
   Se despliega en altura (clip-path, 220 ms) y los ítems entran de a uno
   (20 ms); el cierre recorta hacia arriba en 150 ms. Pisa el fade de 150 ms
   de estilos.css. Sólo escritorio, donde el panel cuelga del encabezado. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .mega--abierto { animation: motion-mega-abrir 220ms var(--ease-entrada); }
  .js .mega--abierto .mega__lista > li { animation: motion-mega-item 200ms var(--ease-entrada) backwards; animation-delay: calc(var(--i, 0) * 20ms); }
  .js .mega--cerrando { display: block; pointer-events: none; animation: motion-mega-cerrar 150ms var(--ease-entrada) forwards; }
}
@keyframes motion-mega-abrir { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes motion-mega-cerrar { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes motion-mega-item { from { opacity: 0; transform: translateY(-6px); } }

/* ═══ 4 · ESQUELETOS ═══
   La forma final en gris tenue. Con movimiento, un brillo muy lento (2,4 s)
   que sólo mueve background-position dentro de cada barra chica. */
.esqueleto { display: grid; gap: var(--s-3); padding-block: var(--s-4); }
.esqueleto__barra, .esqueleto__linea, .esqueleto__cifra {
  display: block;
  border-radius: 2px;
  background: rgb(255 255 255 / .07);
}
.esqueleto__barra { width: var(--largo, 60%); height: 14px; }
.esqueleto--columnas { grid-auto-flow: column; align-items: end; height: 180px; gap: var(--s-2); }
.esqueleto__barra--v { width: auto; height: var(--largo, 60%); }
.esqueleto--ficha {
  gap: var(--s-3);
  align-content: start;
  min-height: 200px;
  padding: var(--s-4);
  border: 1px solid var(--c-vidrio-borde);
  border-radius: var(--r-vidrio);
  background: var(--c-noche-2);
}
.esqueleto__linea { width: var(--largo, 60%); height: 12px; }
.esqueleto__cifra { width: 55%; height: 40px; }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto__barra, .esqueleto__linea, .esqueleto__cifra {
    background: linear-gradient(90deg, rgb(255 255 255 / .06) 30%, rgb(255 255 255 / .11) 50%, rgb(255 255 255 / .06) 70%) 0 0 / 300% 100%;
    animation: motion-esqueleto 2.4s linear infinite;
  }
}
@keyframes motion-esqueleto { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ═══════════════════════════════════════════════════════════════════
   SCROLL LIGADO (js/scroll.js)
   Sólo con movimiento: con reduced-motion nada de esto existe y rige
   estilos.css tal cual.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Paralaje entre columnas de la grilla de áreas: translate se suma al
     transform de la entrada y al del hover sin pisarlos. */
  .fichas > li { translate: 0 var(--paralaje-y, 0px); }

  /* Fondos con paralaje (cinta y Novedades). El marco copia el fondo de la
     sección y la recorta; la capa, más grande, es la que se mueve. Con
     z-index negativo dentro de la sección (isolation): siempre detrás del
     texto, y detrás del brillo de la cinta. */
  .con-fondo-paralaje { position: relative; isolation: isolate; }
  .fondo-paralaje {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: inherit;
  }
  .fondo-paralaje__capa { position: absolute; inset: 0; background: inherit; will-change: transform; }
  .cinta .fondo-paralaje__capa { inset: 0 -12%; }
  .franja--novedades .fondo-paralaje__capa { inset: -64px 0; }
  /* El filete celeste de Novedades es una sombra interior de la sección: el
     marco empieza debajo para no taparlo. */
  .franja--novedades > .fondo-paralaje { top: 1px; }

  /* El pin del resultado fiscal envuelve la sección en un espaciador: el
     bloque siguiente conserva el aire de .macro + .macro (lectura.css). */
  .pin-spacer:has(> .macro) + .macro { margin-top: var(--s-8); }

  /* Progreso de lectura (js/scroll.js): filete celeste de 2 px bajo la cabecera. */
  .progreso-lectura {
    position: fixed;
    top: var(--alto-cabecera);
    left: 0;
    right: 0;
    z-index: 21;
    height: 2px;
    background: var(--c-celeste);
    transform-origin: 0 50%;
    pointer-events: none;
  }

  /* Dato central de la portada durante el pin (js/scroll.js, sólo escritorio). */
  /* Ocupa el lugar del título (columna izquierda): la leyenda sigue a la
     derecha, activa. */
  .portada__dato {
    position: absolute;
    left: clamp(24px, 5vw, 96px);
    top: 50%;
    z-index: 3;
    width: min(42rem, 44vw);
    translate: 0 -50%;
    padding: var(--s-5) var(--s-5) var(--s-5) 0;
    pointer-events: none;
    opacity: 0;
    background: rgb(17 20 23 / .82);
    box-shadow: 0 0 80px 40px rgb(17 20 23 / .82);
  }
  .portada__dato-cifra { font: 850 clamp(3.5rem, 2rem + 4vw, 6.5rem) / 1 var(--font-display); font-stretch: 68%; color: var(--c-sobre-oscuro); font-variant-numeric: tabular-nums lining-nums; }
  .portada__dato-texto { margin-top: var(--s-3); font: 400 var(--fs-2) / 1.4 var(--font-texto); color: var(--c-sobre-oscuro-2); }
}

/* ═══ LUPA DEL TÍTULO (docs/titulo-lupa.md) ═══
   La arma js/lupa.js sólo mientras dura el efecto. Disco opaco del color de
   la noche (tapa el original), aro y mango celestes con un trazo oscuro
   debajo para separarlos del mapa. Sin sombra, sin glow, sin refracción. */
.portada__lupa {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15; /* sobre el título, debajo de la cabecera (20) */
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  pointer-events: none;
  will-change: transform;
}
.portada__lupa-vidrio {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-noche);
}
.portada__lupa-copia {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  white-space: normal;
  will-change: transform;
}
.portada__lupa svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.portada__lupa-base { stroke: rgb(17 20 23 / .6); stroke-width: 5; vector-effect: non-scaling-stroke; }
.portada__lupa-trazo { stroke: var(--c-celeste); stroke-width: 2; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: reduce) { .portada__lupa { display: none; } }

/* ═══ TÍTULO DE LA PORTADA SIN PARPADEO ═══
   En escritorio (con movimiento) GSAP hace entrar el título por líneas. Antes se
   veía un instante, desaparecía y volvía a entrar. Ahora sale oculto desde el
   primer pintado y motion.js lo toma con la clase titulo-armado. Si el JS no
   llega, a los 2,5 s aparece igual: nunca queda un título invisible. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.titulo-armado) .portada__titulo { opacity: 0; animation: titulo-respaldo 1ms linear 2.5s forwards; }
}
@keyframes titulo-respaldo { to { opacity: 1; } }