/* Forex Trade — iconos de trazo animados y composiciones de banderas.
   Carril propio: nada de aquí toca fx.css, docs.css ni stamps.css.

   Reglas de la casa que se cumplen abajo:
     · solo se anima transform, opacity, filter y stroke-dashoffset
     · el hueco de cada pieza se reserva por CSS ANTES de que cargue el JS (cero salto de layout)
     · sin JS quedan los iconos estáticos de Phosphor que ya hornea el build
     · prefers-reduced-motion: todo dibujado del todo, sin bucles ni abanicos */

:root {
  --fxi-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------------
   1. el icono en sí
   --------------------------------------------------------------------------- */
.fx-ai {
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit; flex: none; line-height: 0; vertical-align: -0.18em;
}
.fx-ai svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
/* el trazo viaja en una variable para que cada tamaño lo ajuste sin tocar el dato */
.fx-ai svg [data-fxp] { stroke-width: var(--fxi-sw, 2); vector-effect: non-scaling-stroke; }
/* durante una animación el navegador puede promocionar la capa; fuera de ella, no */
.fx-ai.is-busy svg [data-fxp] { will-change: transform, opacity, stroke-dashoffset; }

/* sistema de tamaños: XS en línea, S en chips y botones, M en cabeceras, L pieza gráfica */
.fx-ai-xs { width: 1em; height: 1em; --fxi-sw: 2; }
.fx-ai-s  { width: 1.35rem; height: 1.35rem; --fxi-sw: 2; }
.fx-ai-m  { width: 2.75rem; height: 2.75rem; --fxi-sw: 1.75; }
.fx-ai-l  { width: 7rem; height: 7rem; --fxi-sw: 1.75; }

/* el estático de Phosphor es el suplente: en cuanto monta el animado, se retira */
.fx-ai-host > .fx-icon { display: none; }

/* ---------------------------------------------------------------------------
   2. botones, chips y enlaces del menú
   --------------------------------------------------------------------------- */
/* los botones de la plantilla son un <div> dentro de un <a class="ghost-btn"> */
.ghost-btn > div { display: inline-flex; align-items: center; gap: .5em; }
.ghost-btn .fx-ai-s { width: 1.1em; height: 1.1em; }
/* el estático de Phosphor trae su propio margen derecho: al ir al final, sobra */
.ghost-btn > div > .fx-icon:last-child, .caps > .fx-ai:last-child { margin-right: 0; }

/* OJO: no se les pone `display:flex`. Las dos capas del enlace (`.text-sm` y `.text-sm-ab`) se
   relevan con un translateY dentro del `overflow:hidden` del `.div-hide`, y cambiarles el modo
   de caja descoloca esa altura y deja las dos visibles a la vez. El icono va en línea. */
.menu-links .nav-link .fx-ai,
.menu-links .nav-link .fx-icon { width: .95em; height: .95em; opacity: .75; margin-right: .5em; }

/* chips de estado de la tabla de tasas */
.fx-status .fx-ai, .fx-soon .fx-ai, .fx-daily .fx-ai, .fx-paused .fx-ai, .fx-preview .fx-ai {
  width: .9em; height: .9em; margin-right: .3em; vertical-align: -0.1em;
}
.fx-toggle-btn .fx-ai { width: .95em; height: .95em; margin-right: .45em; vertical-align: -0.12em; }
.fx-showall { align-items: center; gap: .55em; }
.fx-showall .fx-ai { width: 1.05em; height: 1.05em; }
.fx-chg { display: inline-flex; align-items: center; justify-content: flex-end; gap: .25em; }
.fx-chg .fx-ai { width: .85em; height: .85em; }
/* el punto que late del chip LIVE */
.fx-live-dot {
  display: inline-block; width: .42em; height: .42em; border-radius: 50%;
  background: currentColor; margin-right: .4em; vertical-align: .05em;
}
.fx-status.is-live .fx-live-dot { animation: fx-pulse 1.8s var(--fxi-ease) infinite; }
@keyframes fx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.68); } }

/* cifras 64 · 2,000+ · 25x · 24/7 */
.caps .fx-ai, .fx-col-label .fx-ai, .fx-early-label .fx-ai, .fx-step-n .fx-ai {
  width: 1.1em; height: 1.1em; margin-right: .38em; vertical-align: -0.16em;
}

/* ---------------------------------------------------------------------------
   3. cabeceras de sección: la pieza grande en la esquina opuesta al intro
   --------------------------------------------------------------------------- */
/* la cabecera deja un hueco ancho entre el titular gigante (izquierda) y el intro en cursiva
   (derecha): la pieza gráfica va ahí, centrada abajo, sin pisar ni uno ni otro */
.fx-sec-mark {
  position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%); z-index: 1;
  opacity: .62; pointer-events: none;
}
.fx-sec-mark.fx-ai-l { width: clamp(4.5rem, 8vw, 8.75rem); height: clamp(4.5rem, 8vw, 8.75rem); }
.fx-sec-host { position: relative; }
@media (max-width: 767px) { .fx-sec-mark { display: none; } }

/* ---------------------------------------------------------------------------
   4. PROCESS: caja cuadrada por paso, y la línea de progreso
   --------------------------------------------------------------------------- */
.fx-steps { position: relative; }
.fx-step-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.fx-pi {
  width: 4rem; height: 4rem; flex: none; border: 1px solid var(--fx-line, rgba(255, 255, 255, .16));
  border-radius: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; transition: border-color .3s ease;
}
.fx-pi .fx-ai { width: 2.4rem; height: 2.4rem; --fxi-sw: 1.75; }
.fx-step:hover .fx-pi { border-color: currentColor; }
.fx-pi-green { color: var(--fx-green, #bfff0a); }
.fx-pi-blue  { color: #8f86ff; }   /* el azul de la plantilla no llega a 3:1 sobre negro */
.fx-pi-pink  { color: var(--fx-pink, #ff7bca); }
.fx-pi-white { color: #fff; }
/* la misma caja, encima de la etiqueta de cada columna de pricing y safety */
.fx-cbox { display: flex; width: 3rem; height: 3rem; margin-bottom: .9rem; }
.fx-cbox .fx-ai { width: 1.8rem; height: 1.8rem; }
.fx-col:hover .fx-cbox { border-color: currentColor; }
.fx-band-blue .fx-cbox { border-color: rgba(255, 255, 255, .45); }

/* el número deja de cargar con el icono estático cuando entra la caja */
.fx-has-pi .fx-step-n { margin-bottom: 0; }
.fx-has-pi .fx-step-n > .fx-icon { display: none; }
/* la línea de progreso pasa por DETRÁS: el número y la caja llevan el fondo de la sección para
   que la línea quede tapada bajo ellos en vez de cruzarles por encima */
.fx-has-pi .fx-step-n { position: relative; z-index: 1; background: #010101; padding: 0 8px; }
.fx-has-pi .fx-pi { position: relative; z-index: 1; background: #010101; }

/* la línea que une los cuatro pasos, por detrás de las cajas */
.fx-proc-line {
  position: absolute; left: 0; right: 0; top: 3rem; height: 2px;
  pointer-events: none; overflow: visible;
}
.fx-proc-line svg { display: block; width: 100%; height: 2px; overflow: visible; }
.fx-proc-line line { stroke: var(--fx-line, rgba(255, 255, 255, .16)); stroke-width: 2; }
/* el punto recorre la línea moviendo su PISTA (translateX 0 -> 100% del ancho de la línea):
   así no hace falta conocer el ancho en píxeles y no se toca layout al redimensionar */
.fx-proc-dot-track { position: absolute; inset: 0; pointer-events: none; }
.fx-proc-dot {
  position: absolute; top: -2px; left: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fx-green, #bfff0a);
}
@media (max-width: 991px) { .fx-proc-line { display: none; } }
@media (max-width: 600px) {
  .fx-pi { width: 3.1rem; height: 3.1rem; }
  .fx-pi .fx-ai { width: 1.85rem; height: 1.85rem; }
}

/* ---------------------------------------------------------------------------
   5. REASONS: composición de banderas dentro de la tarjeta negra
   --------------------------------------------------------------------------- */
/* hereda el ancho que fx.css daba al póster pequeño, y reserva un cuadrado:
   sin esto el hueco nace a cero y la fila salta al montar el JS */
.fx-fc {
  position: relative; display: block; width: 100%; max-width: 17rem;
  margin: 0 auto; aspect-ratio: 1 / 1;
}
/* sin JS las banderas se quedan puestas y quietas; `is-armed` (la pone el JS) es lo que
   las esconde para poder tirar la cascada de entrada */
.fx-fc-slot {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  transition: transform .7s var(--fxi-ease), opacity .7s var(--fxi-ease), filter .7s var(--fxi-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.fx-fc.is-armed .fx-fc-slot {
  opacity: 0; filter: blur(6px); transform: translateY(40px) rotate(12deg);
}
.fx-fc.is-armed .fx-fc-slot.is-in { opacity: 1; filter: blur(0); transform: translateY(0) rotate(0deg); }
/* hover de la fila: 6° más de abanico y 8 px arriba (por encima del estado de entrada) */
.row:hover .fx-fc.is-armed .fx-fc-slot.is-in,
.row-m:hover .fx-fc.is-armed .fx-fc-slot.is-in,
.fx-fc.is-armed:hover .fx-fc-slot.is-in {
  transform: translateY(-8px) rotate(var(--spread, 0deg));
  transition-delay: 0s;
}
.fx-fc-card {
  display: block; position: relative;
  transform: rotate(var(--rot, 0deg));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .85);
  background: #0c0c0c;
}
.fx-fc-slot.is-in .fx-fc-card {
  animation: fx-fc-wave var(--dur, 6s) ease-in-out var(--wd, 0s) infinite alternate;
}
.fx-fc-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@keyframes fx-fc-wave {
  from { transform: rotate(calc(var(--rot, 0deg) - 1.2deg)) translateY(-3px); }
  to   { transform: rotate(calc(var(--rot, 0deg) + 1.2deg)) translateY(3px); }
}
/* fuera del viewport (o con la pestaña oculta) no corre ni un fotograma */
.fx-fc.is-idle .fx-fc-slot.is-in .fx-fc-card { animation-play-state: paused; }

.fx-fc-chip {
  position: absolute; left: 0; top: 100%; margin-top: .3rem;
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .56rem; letter-spacing: .14em; line-height: 1;
  padding: .26rem .38rem .2rem; color: #fff;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .7);
}
.fx-fc-chip b { font-weight: 400; }
.fx-fc-chip em { font-style: normal; color: var(--fx-green, #bfff0a); }

/* la pieza del centro: el `/` gigante, el disco de USDG, el reloj o el escudo */
.fx-fc-mid {
  position: absolute; left: 50%; top: var(--mid-y, 50%); transform: translate(-50%, -50%);
  z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  color: var(--fx-green, #bfff0a);
}
/* la carta del centro del abanico va delante, y con ella su chip */
.fx-fc--fan .fx-fc-slot:nth-of-type(2) { z-index: 2; }
.fx-fc-slot:nth-of-type(1) { z-index: 1; }
.fx-fc-chip { z-index: 2; }

/* la `/` de Humane es casi vertical a este tamaño y se lee como una barra: se inclina 16° para
   que se lea como lo que es, el separador de un par */
.fx-fc-mid.is-slash {
  font-family: 'Humane Bold', sans-serif; font-size: 7rem; line-height: .66;
  color: var(--fx-green, #bfff0a); text-shadow: 0 2px 12px rgba(0, 0, 0, .95);
  transform: translate(-50%, -50%) rotate(16deg);
}
.fx-fc-mid.is-usdg {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden;
  background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .5);
  font-size: .72rem; letter-spacing: .08em; color: #fff;
}
.fx-fc-mid.is-usdg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-fc-mid .fx-ai { width: 2.4rem; height: 2.4rem; --fxi-sw: 2; }
.fx-fc-mid.is-mark {
  width: 3.4rem; height: 3.4rem; background: rgba(0, 0, 0, .78);
  border: 1px solid rgba(255, 255, 255, .45);
}

@media (max-width: 600px) {
  .fx-fc { max-width: 12rem; }
  .fx-fc-mid.is-slash { font-size: 3.6rem; }
  .fx-fc-mid.is-usdg, .fx-fc-mid.is-mark { width: 2.5rem; height: 2.5rem; }
  .fx-fc-mid .fx-ai { width: 1.7rem; height: 1.7rem; }
  .fx-fc-chip { font-size: .48rem; padding: .2rem .3rem .16rem; }
}

/* ---------------------------------------------------------------------------
   6. FAQ: el signo pasa a ser un `plus` que rota a `x`
   --------------------------------------------------------------------------- */
.fx-faq-sign { display: inline-flex; width: 1.4rem; height: 1.4rem; color: inherit; }
.fx-faq-sign .fx-ai { width: 100%; height: 100%; --fxi-sw: 2; }
.fx-has-sign .arrow, .fx-has-sign .arrow-ab { display: none; }

/* ---------------------------------------------------------------------------
   7. reduced motion: todo dibujado, sin bucles, sin abanico
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-fc-slot,
  .fx-fc.is-armed .fx-fc-slot,
  .fx-fc.is-armed .fx-fc-slot.is-in,
  .row:hover .fx-fc.is-armed .fx-fc-slot.is-in,
  .row-m:hover .fx-fc.is-armed .fx-fc-slot.is-in,
  .fx-fc.is-armed:hover .fx-fc-slot.is-in { opacity: 1; filter: none; transform: none; transition: none; }
  .fx-fc-slot.is-in .fx-fc-card { animation: none; }
  .fx-status.is-live .fx-live-dot { animation: none; }
  .fx-ai svg [data-fxp] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}