/* ==========================================================================
   Capa futurista — Saberes Internacionales
   Efectos provocados por el usuario (puntero, desplazamiento). No añade
   movimiento ambiental: la portada ya tiene suficiente.
   Solo se animan transform y opacity.
   ========================================================================== */

/* ---------- 1. Barra de progreso de lectura ---------- */
.progreso-lectura {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--oro), #f0d97a, var(--oro));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}

/* ---------- 2. Cabecera con vidrio esmerilado al desplazar ---------- */
.barra-superior,
.cabecera-sitio {
  transition: background-color var(--transicion), backdrop-filter var(--transicion),
              box-shadow var(--transicion);
}
body.desplazado .cabecera-sitio {
  background-color: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--sombra-m);
}

/* ---------- 3. Resplandor que sigue al cursor ---------- */
.tarjeta-libro,
.tarjeta-autor,
.tarjeta-entrada,
.testimonio-card,
.coleccion,
.ventaja-card {
  position: relative;
  isolation: isolate;
}
.tarjeta-autor::after,
.tarjeta-entrada::after,
.coleccion::after,
.ventaja-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(.2,.7,.3,1);
  background: radial-gradient(
    320px circle at var(--px, 50%) var(--py, 50%),
    rgba(201, 162, 39, .18),
    transparent 62%
  );
  pointer-events: none;
}
.tarjeta-autor:hover::after,
.tarjeta-entrada:hover::after,
.coleccion:hover::after,
.ventaja-card:hover::after { opacity: 1; }

/* ---------- 4. Inclinación tridimensional de las fichas ---------- */
.rejilla-libros,
.rejilla-colecciones,
.carrusel-pista { perspective: 1100px; }

.tarjeta-libro {
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(.2,.7,.3,1),
              box-shadow 260ms cubic-bezier(.2,.7,.3,1);
}
.tarjeta-libro.inclinada { will-change: transform; }

/* ---------- 5. Destello diagonal en los botones principales ---------- */
.boton-primario,
.boton-principal,
.boton-leer {
  position: relative;
  overflow: hidden;
}
.boton-primario::after,
.boton-principal::after,
.boton-leer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-70%);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.2,.7,.3,1), opacity 180ms cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.boton-primario:hover::after,
.boton-principal:hover::after,
.boton-leer:hover::after {
  transform: translateX(70%);
  opacity: 1;
}

/* ---------- 6. Títulos con acento degradado ---------- */
.titulo-bloque .acento,
.hero-titulo .acento {
  background: linear-gradient(100deg, var(--oro) 0%, #e8c766 45%, var(--oro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 7. Filete dorado que crece bajo los títulos de sección ---------- */
.seccion h2,
.contenedor > h2 {
  position: relative;
  padding-bottom: .55rem;
}
.seccion h2::after,
.contenedor > h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 72px; height: 3px;
  background: linear-gradient(90deg, var(--oro), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.2,.7,.3,1);
}
.seccion h2.visible::after,
.contenedor > h2.visible::after { transform: scaleX(1); }

/* ---------- Preferencia de movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .progreso-lectura { display: none; }
  .tarjeta-libro { transform: none !important; }
  .tarjeta-autor::after,
  .tarjeta-entrada::after,
  .coleccion::after,
  .ventaja-card::after,
  .boton-primario::after,
  .boton-principal::after,
  .boton-leer::after { display: none; }
  .seccion h2::after, .contenedor > h2::after { transform: scaleX(1); transition: none; }
  body.desplazado .cabecera-sitio { backdrop-filter: none; }
}