/* Campus Cognitionis · demo borrador r6 · efectos de cursor y animaciones
   Ilustración: no es código del proyecto. Replica los patrones leídos en el editor de Wix
   (ver Efectos_y_animaciones_Wix_r1.md), con equivalente de teclado y movimiento reducido. */

/* ---------- 1. Entrada por defecto: FloatIn desde abajo ---------- */
.js-efectos [data-entra] { opacity: 0; transform: translateY(28px); }
.js-efectos [data-entra].entra-visible {
  opacity: 1; transform: none;
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--entra-retardo, 0s);
}

/* ---------- 2. Cristal en reposo → sólido al interactuar (patrón B) ---------- */
.campus-destacado__panel, .pg-cristal, .conoce, .revista-slide__caja {
  transition: background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease,
              -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}
.campus-destacado__panel:hover, .campus-destacado__panel:focus-within,
.pg-cristal:hover, .pg-cristal:focus-within {
  background: var(--c-azul);
  border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- 3. Velo blanco en botones (patrón C) ---------- */
.campus-estudio, .boton--contorno, .boton--oscuro, .pg-chip, .campus-menu a, .campus-menu__boton {
  transition: background-color 0.2s ease, border-radius 0.2s ease, color 0.2s ease;
}
.campus-estudio:hover, .campus-estudio:focus-visible,
.boton--contorno:hover, .boton--oscuro:hover { background: rgba(255, 255, 255, 0.26); }
.campus-menu a:hover, .campus-menu__boton:hover { background: rgba(191, 191, 191, 0.25); border-radius: 12px; }

/* ---------- 4. Dock: anillo al pasar el cursor ---------- */
.dock__app img { transition: transform 0.25s ease, box-shadow 0.25s ease; border-radius: 24%; }
.dock__app:hover img, .dock__app:focus-visible img {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* ---------- 5. Revelar ayuda (patrón A): «Guardar página» del Onboarding ---------- */
.guardar { position: relative; display: inline-block; }
.pista {
  position: absolute; z-index: 5; right: -12px; bottom: calc(100% + 14px);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  width: min(440px, 80vw); padding: 18px 22px;
  border-radius: 21px;
  background: rgba(50, 50, 50, 0.3);
  -webkit-backdrop-filter: blur(var(--desenfoque-ventana)); backdrop-filter: blur(var(--desenfoque-ventana));
  color: var(--c-blanco); font-size: 0.98rem; line-height: 1.6; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.pista svg { width: 34px; height: 46px; }
.guardar:hover .pista, .guardar:focus-within .pista {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
.guardar:hover .onboarding__guardar, .guardar:focus-within .onboarding__guardar { color: transparent; }
.guardar:hover .pista svg, .guardar:focus-within .pista svg { animation: rebote 0.8s ease 0.2s; }

/* ---------- 6. Entradas del Onboarding (FadeIn · BlurIn · SlideIn) ---------- */
.js-efectos .onboarding__panel { animation: aparece 0.75s ease 0.2s backwards; }
.js-efectos .onboarding__lema { animation: desenfoque 0.6s ease 0.6s backwards; }
.js-efectos .onboarding__texto { animation: baja 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s backwards; }

/* ---------- 7. Desenfoque con el scroll (BlurScroll) en el destacado de la portada ---------- */
.campus-destacado__foto { filter: blur(var(--desenfoque-scroll, 0px)); }

@keyframes aparece { from { opacity: 0; } }
@keyframes desenfoque { from { opacity: 0; filter: blur(12px); } }
@keyframes baja { from { opacity: 0; transform: translateY(-40px); } }
@keyframes rebote { 0%, 100% { transform: none; } 30% { transform: translateY(-10px); } 60% { transform: translateY(-4px); } }

/* ---------- Movimiento reducido: sin entradas ni efectos de scroll ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-efectos [data-entra] { opacity: 1; transform: none; transition: none; }
  .js-efectos .onboarding__panel, .js-efectos .onboarding__lema, .js-efectos .onboarding__texto,
  .guardar .pista svg { animation: none !important; }
  .campus-destacado__foto { filter: none; }
  * { transition-duration: 0.01ms !important; }
}