/* =====================================================================
   Efectos comunes de la web (cursor, barra de progreso, partículas,
   ráfagas de luz, números de los pilares y detalles de hover).
   Se carga en todas las páginas junto a efectos.js.
   ===================================================================== */

/* ---------- luz del cursor ---------- */
.fx-cursor {
  position: fixed; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px;
  border-radius: 50%; pointer-events: none; z-index: 9999;
  background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, rgba(255,246,232,0.09) 30%, rgba(255,246,232,0) 66%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 0.45s ease, width 0.35s ease, height 0.35s ease, margin 0.35s ease;
  will-change: transform;
}
.fx-cursor.on { opacity: 1; }
.fx-cursor.big { width: 380px; height: 380px; margin: -190px 0 0 -190px; }

/* ---------- barra de progreso al hacer scroll ---------- */
.fx-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 9998; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #A9835F, #E0A96D);
  box-shadow: 0 0 12px rgba(224,169,109,0.6);
}

/* ---------- lienzos de partículas y luz ---------- */
.fx-host { position: relative; isolation: isolate; overflow: hidden; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- números grandes en los pilares ---------- */
.fx-num {
  display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: 46px; line-height: 1;
  margin-bottom: 14px; color: transparent;
  -webkit-text-stroke: 1px rgba(169,131,95,0.75);
  background: linear-gradient(90deg, #A9835F, #E0A96D) no-repeat;
  -webkit-background-clip: text; background-clip: text; background-size: 0% 100%;
  transition: background-size 1.1s cubic-bezier(0.22,1,0.36,1) 0.35s;
}
.in-view .fx-num { background-size: 100% 100%; }

/* ---------- menú: subrayado que crece desde el centro ---------- */
.site-nav a { position: relative; border-bottom-color: transparent !important; }
.site-nav a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, #A9835F, #E0A96D);
  transition: left 0.35s cubic-bezier(0.22,1,0.36,1), right 0.35s cubic-bezier(0.22,1,0.36,1);
}
.site-nav a:hover::after, .site-nav a.current::after { left: 0; right: 0; }

/* ---------- botones: brillo al pasar el ratón ---------- */
.btn-primary, .buy:not(:disabled) { transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.35s ease !important; }
.btn-primary:hover, .buy:not(:disabled):hover { opacity: 1 !important; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(224,169,109,0.35), 0 0 0 1px rgba(224,169,109,0.4); }
.btn-secondary:hover, .social-chip:hover { box-shadow: 0 8px 26px rgba(169,131,95,0.22); }

/* ---------- palabra destacada con subrayado ---------- */
.fx-underline { position: relative; display: inline-block; }
.fx-underline::after {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -0.08em; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #A9835F, #E0A96D);
  transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.5s;
}
.fx-underline.go::after { transform: scaleX(1); }

@media (hover: none), (pointer: coarse) { .fx-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fx-cursor, .fx-canvas { display: none; }
  .fx-num { background-size: 100% 100%; transition: none; }
  .fx-underline::after { transform: scaleX(1); transition: none; }
}

/* ---------- cabecera con el botón "Acceso alumnos" ---------- */
@media (min-width: 1241px) {
  .page-header { gap: 18px; }
  .site-nav { gap: 6px 18px; }
}
@media (min-width: 721px) and (max-width: 1240px) {
  .page-header { justify-content: space-between; row-gap: 16px; }
  .page-header .site-nav { order: 3; flex-basis: 100%; justify-content: center; }
  .page-header .lang-switch { margin-left: auto; margin-right: 12px; }
}