/* Mujer de Fe · efectos del diseño de luz en toda la web (26-10-2026): la barra de progreso dorada, el cursor propio
   (un punto dorado y un aro que lo sigue con retardo), su estela de chispas y los botones magnéticos. Lo mueve
   efectos.js; sin ratón o con «movimiento reducido», solo queda la barra. */

/* ---------- La barra de progreso dorada ---------- */
.progreso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 120; pointer-events: none; }
.progreso span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #E97992, #F3D48A, #C9A14A);
  box-shadow: 0 0 12px rgba(243, 212, 138, .9);
}

/* ---------- El cursor propio (solo con ratón; aparece al moverlo por primera vez) ---------- */
.cursor { display: none; }
.con-cursor .cursor { display: block; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0; transition: opacity .4s; }
.con-cursor .cursor.movido { opacity: 1; }
.con-cursor, .con-cursor a, .con-cursor button, .con-cursor label { cursor: none; }
.con-cursor input, .con-cursor textarea { cursor: text; }
.cursor-punto, .cursor-aro { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor-punto { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #C9A14A; box-shadow: 0 0 10px 2px rgba(243, 212, 138, .9); }
.cursor-aro {
  display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(201, 161, 74, .75);
  transition: width .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1), margin .35s cubic-bezier(.22, 1, .36, 1), background .35s, border-color .35s;
}
.cursor-texto { opacity: 0; font: 600 11px/1 "Montserrat", "Segoe UI", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #fff; transition: opacity .25s; }
.cursor.sobre-enlace .cursor-aro { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(243, 212, 138, .18); border-color: #F3D48A; }
.cursor.con-texto .cursor-aro { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: #BF4566; border-color: transparent; }
.cursor.con-texto .cursor-texto { opacity: 1; }
.cursor.con-texto .cursor-punto { opacity: 0; }
.estela { position: fixed; inset: 0; z-index: 140; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Los botones magnéticos: se van un poco hacia el ratón (efectos.js mueve su translate) ---------- */
.con-cursor .boton, .con-cursor .magnetico { transition-property: translate, background, box-shadow, transform, color; transition-duration: .7s, .3s, .4s, .2s, .3s; transition-timing-function: cubic-bezier(.25, 1.5, .5, 1), ease, ease, ease, ease; }