/* Efectos de las páginas sueltas de Royal Tax (menú de services.royaltax.org, página del curso y las que vengan).
   Es el mismo «pack de efectos» del sitio principal (estilos.css): brillo dorado que sigue al cursor, subir 3 px al
   pasar y el icono que se enciende. Henry, 29-sep-2026: «que todos los componentes tengan efectos a medida que muevo
   el mouse y voy pasando por cada componente». En el teléfono, el brillo sale donde toca el dedo.
   Cada página pone la clase .fx en lo que tiene que reaccionar; .fx-in en lo que entra escalonado (con --i). */

.fx{position:relative;isolation:isolate}
.fx::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--ac) 18%,transparent),transparent 72%)}
.fx:hover::before,.fx.toca::before{opacity:1}
.fx .ic,.fx .ch{transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease}

@media (hover:hover){
  .fx{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
  .fx:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ac) 60%,var(--ln));
    box-shadow:0 18px 40px -24px color-mix(in srgb,var(--ac) 70%,transparent)}
  .fx:hover .ic{background:var(--ac);border-color:var(--ac);color:var(--bg);transform:scale(1.06) rotate(-4deg)}
  .fx:hover .ch{transform:translateX(3px);color:var(--acd)}
  /* lo que lleva un formulario dentro (iframe) brilla pero no se mueve: moverlo haría saltar el cursor al escribir */
  .fx.quieto:hover{transform:none}
}
.fx:active{transform:scale(.985)}
.fx.quieto:active{transform:none}

/* entrada escalonada: solo el estado inicial (backwards), para no pisar el «subir» del hover al terminar */
@keyframes fxsube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fx-in{animation:fxsube .55s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--i,0) * 70ms)}

/* la foto de Perla: aro dorado que respira despacio */
@keyframes fxaro{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ac) 0%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ac) 22%,transparent)}}
.fx-foto{border-radius:50%;animation:fxaro 3.6s ease-in-out infinite}

/* botón de claro/oscuro */
.tema{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--ln);
  background:var(--chip);color:var(--fg);cursor:pointer;transition:border-color .3s ease,transform .3s ease}
.tema:hover{border-color:var(--ac);transform:rotate(-12deg)}
.tema svg{width:17px;height:17px}
.tema .sol{display:block}.tema .luna{display:none}
:root[data-tema="claro"] .tema .sol{display:none}
:root[data-tema="claro"] .tema .luna{display:block}

@media (prefers-reduced-motion:reduce){
  .fx,.fx::before,.fx .ic,.fx .ch,.tema{transition:none!important}
  .fx:hover,.fx:active{transform:none!important}
  .fx-in,.fx-foto{animation:none!important}
}