/* Forex Trade — capa propia sobre la plantilla. Usa su tipografía (Humane / Helvetica Neue)
   y su paleta (--green-yellow, --slate-blue, --hot-pink) para que el re-skin no se note. */
:root {
  --fx-green: #bfff0a;
  --fx-blue: #5546ff;
  --fx-pink: #ff7bca;
  --fx-ink: #010101;
  --fx-line: rgba(255, 255, 255, .16);
}

/* ---------- bandas y contenedores ---------- */
.fx-band { position: relative; z-index: 2; overflow: hidden; }
.fx-band-black { background-color: var(--fx-ink); color: #fff; }
.fx-band-green { background-color: var(--fx-green); color: #1c1c1c; }
.fx-band-blue { background-color: var(--fx-blue); color: #fff; }
.fx-band-green .fx-note, .fx-band-green .lowercase { color: rgba(28, 28, 28, .75); }
.fx-inner { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 2rem 7rem; }
.fx-note { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; opacity: .55; }
.fx-band .lowercase { text-transform: lowercase; line-height: 1.45; text-align: left; }
/* Sobre el verde-lima todo el texto va en negro puro: gris o blanco no llegan a 4.5:1. */
.fx-band-green .fx-note, .fx-band-green .fx-region h4, .fx-band-green .lowercase,
.fx-band-green .fx-matrix-note, .fx-band-green .fx-col-label, .fx-band-green .fx-step-n {
  color: #010101; opacity: 1;
}

/* aparición propia de lo que insertamos (IX2 no toca los nodos nuevos) */
.fx-in-init { opacity: 0; transform: translateY(40px); }
.fx-in-on { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .fx-in-init { opacity: 1; transform: none; }
  .fx-in-on { transition: none; }
}

/* ---------- selector de par del hero ---------- */
/* El hero de la plantilla es `position:sticky`: las secciones pasan por encima. El selector
   ocupa una pantalla entera (como hacen las demás) para taparlo del todo al llegar. */
.fx-picker {
  text-align: center; padding: 4.5rem 0 5rem; z-index: 6;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
.fx-picker .fx-inner { padding-bottom: 0; }
.fx-picker-row { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; }
.fx-chip {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  background: transparent; color: #fff; border: 1px solid var(--fx-line);
  border-radius: 0; padding: .9rem 1.1rem .7rem; font: inherit; min-width: 9.5rem;
  transition: border-color .2s, background-color .2s;
}
.fx-chip:hover, .fx-chip[aria-expanded="true"] { border-color: var(--fx-green); background: rgba(191, 255, 10, .07); }
.fx-chip-flag { display: block; width: 2.1rem; height: 2.1rem; flex: none; }
.fx-chip-flag img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.fx-chip-flag:empty { display: none; }
.fx-chip-code { font-family: 'Humane Bold', sans-serif; font-size: 3.2rem; line-height: .75; letter-spacing: .01em; }
.fx-chip-caret { margin-left: auto; opacity: .55; font-size: .9rem; }
.fx-flag-in { animation: fx-flag-in .3s ease-out; }
@keyframes fx-flag-in { from { filter: blur(4px); transform: scale(.9); } to { filter: blur(0); transform: none; } }
.fx-picker-slash { font-family: 'Humane Bold', sans-serif; font-size: 3.6rem; line-height: .75; color: var(--fx-green); }
.fx-quote { font-family: 'Humane Bold', sans-serif; font-size: 13rem; line-height: .78; margin-top: 1.4rem; color: #fff; }
.fx-quote-meta { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; margin-top: .9rem; }
.fx-terms { font-size: .78rem; letter-spacing: .08em; color: rgba(255, 255, 255, .62); }
.fx-status { font-size: .68rem; letter-spacing: .12em; padding: .35rem .6rem .25rem; border: 1px solid var(--fx-line); text-transform: uppercase; }
.fx-status.is-live { color: var(--fx-green); border-color: var(--fx-green); }
.fx-status.is-paused, .fx-status.is-soon { color: rgba(255, 255, 255, .72); }
.fx-status.is-stale { color: var(--fx-pink); border-color: var(--fx-pink); }

/* popover de monedas */
.fx-pop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .68); padding: 1rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fx-pop[hidden] { display: none; }
.fx-pop-card { background: #0a0a0a; border: 1px solid var(--fx-line); width: min(900px, 94vw); max-height: 80vh; display: flex; flex-direction: column; padding: 1rem; }
.fx-pop-head { display: flex; gap: .6rem; margin-bottom: .8rem; }
.fx-pop-search { flex: 1; background: #000; color: #fff; border: 1px solid var(--fx-line); padding: .7rem .8rem; font: inherit; font-size: .95rem; }
.fx-pop-search:focus { outline: none; border-color: var(--fx-green); }
.fx-pop-close { background: transparent; color: #fff; border: 1px solid var(--fx-line); width: 2.6rem; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.fx-pop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; overflow-y: auto; }
.fx-pop-item { display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; font: inherit; font-size: .82rem; text-align: left; }
.fx-pop-item:hover, .fx-pop-item:focus-visible { border-color: var(--fx-green); outline: none; }
.fx-pop-item img { width: 1.3rem; height: 1.3rem; border-radius: 50%; object-fit: cover; flex: none; }
.fx-pop-item b { font-weight: 700; letter-spacing: .04em; }
.fx-pop-item span { opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pop-item i { margin-left: auto; font-style: normal; font-size: .68rem; color: var(--fx-green); }
.fx-pop-item.fx-anim { opacity: 0; filter: blur(4px); }
.fx-pop-item.fx-anim.is-in { opacity: 1; filter: blur(0); transition: opacity .28s ease, filter .28s ease; }
.fx-pop-empty { padding: 1.4rem; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .fx-pop-item.fx-anim { opacity: 1; filter: none; } }

/* ---------- portadas de las slides de markets ---------- */
.fx-cover { position: relative; width: 100%; height: 100%; overflow: hidden; display: block; }
.fx-tone-green { background-color: var(--fx-green); }
.fx-tone-blue { background-color: var(--fx-blue); }
.fx-tone-pink { background-color: var(--fx-pink); }
.fx-tone-white { background-color: #f2f2f2; }
.fx-cover-flag { position: absolute; width: 62%; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); z-index: 2; }
.fx-cover-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* el parallax mínimo del hover viaja en dos variables, para no pisar la rotación de reposo */
.fx-cover-flag.a { top: 8%; left: -6%; transform: translate(var(--fx-px, 0px), var(--fx-py, 0px)) rotate(-7deg); }
.fx-cover-flag.b { bottom: 8%; right: -6%; transform: translate(calc(var(--fx-px, 0px) * -1), calc(var(--fx-py, 0px) * -1)) rotate(7deg); }
.fx-cover-code { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: 'Humane Bold', sans-serif; font-size: 7rem; line-height: .8; color: #0b0b0b; mix-blend-mode: hard-light; z-index: 3; }

/* ---------- fondo en duotono de las tarjetas de markets ---------- */
/* El canvas va DEBAJO de banderas y textos y no escucha nada: los eventos los recoge la tarjeta,
   para no romper el arrastre del slider ni el cursor DRAG de la plantilla. */
.fx-cover-gl, .fx-cover-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 0; pointer-events: none; object-fit: cover;
}
.fx-cover-fallback { transform: scale(1); transition: transform .7s cubic-bezier(.22, 1, .36, 1); filter: blur(1.6px); }
.fx-cover.is-hot .fx-cover-fallback { transform: scale(1.06); filter: blur(0); }
/* velo del color plano bajo la fila superior y sombra en el tercio inferior: es lo que mantiene
   el par, el chip y el titular por encima de 4.5:1 contra la imagen */
.fx-cover::before, .fx-cover::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.fx-cover::before { top: 0; height: 22%; background: linear-gradient(to bottom, var(--fx-cover-flat, transparent) 0%, transparent 100%); opacity: .82; }
.fx-cover::after { bottom: 0; height: 34%; background: linear-gradient(to top, var(--fx-cover-shadow, rgba(0, 0, 0, .45)) 0%, transparent 100%); opacity: .45; }
.fx-tone-green { --fx-cover-flat: #bfff0a; --fx-cover-shadow: #3d5200; }
.fx-tone-blue { --fx-cover-flat: #5546ff; --fx-cover-shadow: #1a1466; }
.fx-tone-pink { --fx-cover-flat: #ff7bca; --fx-cover-shadow: #8a1f63; }
.fx-tone-white { --fx-cover-flat: #f2f2f2; --fx-cover-shadow: #0a0a0a; }
@media (prefers-reduced-motion: reduce) {
  .fx-cover-fallback { transition: none; }
  .fx-cover.is-hot .fx-cover-fallback { transform: none; }
}

/* ---------- tabla de tasas ---------- */
.fx-rates { background-color: var(--fx-ink); color: #fff; position: relative; z-index: 2; padding-top: 5rem; }
.fx-rates .fx-inner { max-width: 1280px; }
.fx-rates-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.fx-toggle { display: inline-flex; border: 1px solid var(--fx-line); }
.fx-toggle-btn { background: transparent; color: rgba(255, 255, 255, .6); border: 0; padding: .6rem 1.1rem .5rem; cursor: pointer; font: inherit; font-size: .74rem; letter-spacing: .14em; }
.fx-toggle-btn.is-on { background: var(--fx-green); color: #0b0b0b; }
.fx-rates-note { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; opacity: .5; }
.fx-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fx-table th { text-align: left; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 400; opacity: .5; padding: .5rem 0; border-bottom: 1px solid var(--fx-line); }
.fx-table td { padding: .75rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fx-table .fx-num { text-align: right; font-variant-numeric: tabular-nums; }
.fx-table .fx-pairname { display: flex; align-items: center; gap: .45rem; letter-spacing: .04em; }
.fx-table .fx-pairname img { width: 1.05rem; height: 1.05rem; border-radius: 50%; object-fit: cover; }
.fx-up { color: var(--fx-green); }
.fx-down { color: var(--fx-pink); }
/* soon = sin feed (fila al 50 %); paused = feed sin tick reciente (opacidad normal, precio visible) */
.fx-daily { color: rgba(255, 255, 255, .82); }
.fx-status.is-daily { color: rgba(255, 255, 255, .82); }
.fx-em-daily { opacity: .8; }
/* A daily row is NOT dimmed: it has a real price and can be traded. Only a row
   with no price at all is dimmed, which is what fx-tr-soon is for. */
.fx-pop-item.is-daily, .fx-cchip.is-daily { opacity: 1; }
.fx-soon, .fx-paused, .fx-daily { font-size: .6rem; letter-spacing: .12em; border: 1px solid currentColor; padding: .18rem .35rem .1rem; margin-left: .45rem; }
.fx-soon { color: #fff; }   /* la fila ya va al 50 %: el chip necesita blanco puro */
.fx-paused { color: rgba(255, 255, 255, .55); }
.fx-tr-soon { opacity: .5; }
.fx-tr { opacity: 0; transform: translateY(8px); }
.fx-tr.is-in { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s ease; }
.fx-tr-soon.is-in { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .fx-tr { opacity: 1; transform: none; } .fx-tr-soon { opacity: .5; } }
.fx-flash { animation: fx-flash .2s ease; }
@keyframes fx-flash { 0% { background-color: rgba(191, 255, 10, .45); } 100% { background-color: transparent; } }
/* Botón propio en vez de `.ghost-btn`: así el color de texto y el fondo no dependen de
   la regla :hover de la plantilla, que dejaba la píldora blanca con texto blanco. */
.fx-showall {
  display: inline-flex; margin-top: 1.6rem; cursor: pointer; font: inherit;
  text-transform: uppercase; letter-spacing: .1em; font-size: .78rem;
  background: transparent; color: #fff; border: 1px solid #fff; border-radius: 70px;
  padding: .7rem 1.2rem .55rem; transition: color .2s, background-color .2s;
}
.fx-showall:hover { background: #fff; color: #010101; }
.fx-preview { font-size: .6rem; letter-spacing: .14em; color: #0b0b0b; background: var(--fx-pink); padding: .2rem .45rem .12rem; margin-left: .5rem; }
.fx-row-empty td { opacity: .4; }

/* ---------- ticket de demostración ---------- */
.fx-ticket { width: min(26rem, 88%); background: #070707; border: 1px solid var(--fx-line); padding: 1.2rem; color: #fff; font-size: .85rem; position: relative; z-index: 3; }
.fx-ticket-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.fx-toggle-sm .fx-toggle-btn { padding: .45rem .8rem .35rem; font-size: .66rem; }
.fx-demo { font-size: .6rem; letter-spacing: .16em; border: 1px solid var(--fx-green); color: var(--fx-green); padding: .22rem .45rem .14rem; }
.fx-tkt-pair { display: flex; align-items: baseline; justify-content: space-between; font-family: 'Humane Bold', sans-serif; font-size: 2.6rem; line-height: .8; margin-bottom: .9rem; }
.fx-tkt-pair b { font-weight: 700; color: var(--fx-green); }
.fx-side { display: flex; gap: .4rem; margin-bottom: .9rem; }
.fx-side-btn { flex: 1; background: transparent; border: 1px solid var(--fx-line); color: rgba(255, 255, 255, .65); padding: .55rem; cursor: pointer; font: inherit; font-size: .7rem; letter-spacing: .12em; }
.fx-side-btn.is-on { background: var(--fx-green); color: #0b0b0b; border-color: var(--fx-green); }
.fx-lev { display: block; margin-bottom: 1rem; }
.fx-lev .caps { display: block; font-size: .68rem; letter-spacing: .12em; opacity: .7; margin-bottom: .4rem; }
.fx-lev b { color: var(--fx-green); }
.fx-lev input { width: 100%; accent-color: var(--fx-green); }
.fx-lev-cap { display: block; font-size: .62rem; opacity: .5; margin-top: .3rem; }
.fx-kv { margin: 0; }
.fx-kv > div { display: flex; justify-content: space-between; padding: .38rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fx-kv dt { text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; opacity: .55; }
.fx-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.fx-maxloss { margin: .9rem 0 0; color: var(--fx-green); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }

/* ---------- tarjetas de moneda ---------- */
.fx-cur-img { background: #0b0b0b; }
/* El nombre de la moneda va en negro sobre los fondos claros de la tarjeta: blanco sobre
   rosa/verde/blanco no llega ni a 3:1 (la plantilla lo hacía así en las 4 tarjetas originales). */
.fx-cur-card.bg-pink .card-info, .fx-cur-card.bg-green .card-info, .fx-cur-card.bg-white .card-info { color: #010101; }
.fx-cur-img img, .fx-cur-card .profile-img, .fx-cur-card .profile-img-ab { object-fit: cover; object-position: 50% 50%; mix-blend-mode: normal; }

/* ---------- process / pricing / safety ---------- */
.fx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.fx-step { border-top: 1px solid var(--fx-line); padding-top: 1rem; }
.fx-step-n { display: block; font-size: .7rem; letter-spacing: .16em; opacity: .8; margin-bottom: .4rem; }
.fx-step h3 { margin: 0 0 .6rem; }
.fx-step p { margin: 0; max-width: 24ch; }
.fx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.fx-col { border-top: 1px solid var(--fx-line); padding-top: 1rem; }
.fx-col-label { display: block; font-size: .7rem; letter-spacing: .16em; opacity: .8; margin-bottom: .4rem; }
.fx-band-blue .fx-col-label, .fx-band-blue .fx-note { opacity: 1; }
.fx-col p { margin: .6rem 0 0; max-width: 30ch; }
.fx-col-safety p { font-size: 1rem; }

/* ---------- coverage ---------- */
.fx-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fx-matrix { border-collapse: collapse; min-width: 32rem; width: 100%; font-variant-numeric: tabular-nums; }
.fx-matrix-note { margin: .8rem 0 0; }
.fx-matrix th, .fx-matrix td { border: 1px solid rgba(28, 28, 28, .22); padding: .55rem .4rem; text-align: center; font-size: .8rem; }
.fx-matrix th { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .72rem; }
.fx-matrix td { cursor: pointer; }
.fx-matrix td.fx-diag { cursor: default; color: rgba(1, 1, 1, .72); }
.fx-matrix .fx-hl { background: rgba(28, 28, 28, .12); }
.fx-matrix td:hover { background: #1c1c1c; color: var(--fx-green); }
.fx-regions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
.fx-region h4 { margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.fx-region-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.fx-cchip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid rgba(28, 28, 28, .3); padding: .25rem .4rem .2rem; font-size: .68rem; letter-spacing: .04em; }
.fx-cchip img { width: .95rem; height: .95rem; border-radius: 50%; object-fit: cover; }
.fx-cchip.is-soon { opacity: .45; }
.fx-cchip em { font-style: normal; font-size: .55rem; letter-spacing: .1em; }
.fx-cchip em.fx-em-paused { color: #010101; opacity: .62; }
.fx-pop-item em { font-style: normal; font-size: .55rem; letter-spacing: .1em; color: rgba(255, 255, 255, .7); }
.fx-pop-item.is-soon { opacity: .5; }

/* ---------- FAQ ---------- */
.fx-faq-item { position: relative; }
.fx-faq-q { cursor: pointer; }
.fx-faq-q .arrow, .fx-faq-q .arrow-ab { transition: transform .3s ease; }
.fx-faq-item.is-open .fx-faq-q .arrow, .fx-faq-item.is-open .fx-faq-q .arrow-ab { transform: rotate(90deg); }
.fx-faq-q:hover { background-color: rgba(0, 0, 0, .06); }
.fx-faq-a { height: 0; overflow: hidden; transition: height .3s ease; border-bottom: 1px solid #000; }
.fx-faq-a[hidden] { display: block; height: 0; }
.fx-faq-a p { margin: 0; padding: 0 0 1.6rem; max-width: 60ch; font-size: 1.05rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .fx-faq-a { transition: none; } }

/* ---------- early access ---------- */
.fx-early { text-align: center; padding: 2.5rem 1rem 1rem; color: #fff; }
.fx-early-label { font-size: .7rem; letter-spacing: .2em; opacity: .55; margin-bottom: .9rem; }
.fx-early-form { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.fx-early-input { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; padding: .7rem 1rem; font: inherit; font-size: .95rem; width: min(20rem, 70vw); border-radius: 70px; }
.fx-early-input:focus { outline: none; border-color: var(--fx-green); }
.fx-early-btn { cursor: pointer; background: transparent; font: inherit; }
.fx-early-btn[disabled] { opacity: .5; cursor: default; }
.fx-early-msg { min-height: 1.4rem; margin: .9rem 0 0; font-size: .82rem; color: rgba(255, 255, 255, .7); }
.fx-early-msg.is-ok { color: var(--fx-green); }
.fx-early-msg.is-err { color: var(--fx-pink); }
.fx-legal { flex: 1; text-align: center; letter-spacing: .06em; line-height: 1.6; opacity: .6; font-size: .68rem; padding: .6rem 0; }

/* ---------- enlaces al whitepaper ---------- */
/* El menú de la plantilla mide 19rem de alto y venía calculado para 6 enlaces: con el séptimo
   se recorta un pelo el relleno de todos para que los 7 sigan cabiendo sin tocar la altura. */
.menu-links .nav-link { padding-top: .5rem; padding-bottom: .45rem; }
/* La plantilla trae `.nav-link.six{display:none}`: con seis enlaces eso dejaba el de FAQ
   invisible en el menú. Se reenseña (defecto heredado del clon, medido en el navegador). */
.menu-links .nav-link.six { display: block; }
/* IX2 no conoce este nodo, así que no lo revela: nace visible y sin transform. El relevo de
   las dos capas al pasar el ratón lo hace el CSS, imitando lo que IX2 hace en los otros seis. */
.fx-nav-extra { opacity: 1; transform: none; }
.fx-nav-extra .text-sm, .fx-nav-extra .text-sm-ab {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.fx-nav-extra:hover .text-sm { transform: translate3d(0, -110%, 0) !important; }
.fx-nav-extra:hover .text-sm-ab { transform: translate3d(0, 0, 0) !important; }
@media (prefers-reduced-motion: reduce) {
  .fx-nav-extra .text-sm, .fx-nav-extra .text-sm-ab { transition: none; }
}
.fx-footer-links { display: flex; align-items: center; gap: 1.4rem; }
.fx-footer-link {
  display: inline-flex; align-items: center; text-decoration: none; letter-spacing: .06em;
  opacity: .72; padding: .6rem 0; transition: opacity .2s;
}
.fx-footer-link .fx-icon { width: .95em; height: .95em; margin-right: .4em; }
.fx-footer-link:hover { opacity: 1; }

/* ---------- pósters de marca (sustituyen al arte 3D de la plantilla) ---------- */
/* Las imágenes nuevas son rectángulos con fondo lila claro, no recortes con transparencia:
   se integran como láminas enmarcadas, con esquinas a 0 y una sombra del color de la sección. */
.fx-poster {
  display: block; object-fit: cover; border-radius: 0;
  border: 1px solid rgba(1, 1, 1, .5);
  box-shadow: 0 18px 46px -22px rgba(1, 1, 1, .55);
  background: #efeafb;
}
.fx-rot-a { --fx-rot: -4deg; transform: rotate(var(--fx-rot)); }
.fx-rot-b { --fx-rot: 6deg; transform: rotate(var(--fx-rot)); }
/* la lámina grande de cada fila de reasons */
.icon-what.fx-poster { width: min(58%, 24rem); height: auto; max-width: 24rem; margin-bottom: 5rem; }
/* la pequeña, dentro del panel oscuro que se arrastra */
.scroll-icon.fx-poster-sm {
  width: 100%; max-width: 17rem; height: auto; margin: 0 auto;
  border-color: rgba(255, 255, 255, .35); box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .8);
}
/* las tres láminas flotantes de la sección why conservan su posición absoluta original */
.face-six.fx-poster, .face-seven.fx-poster, .face-eight.fx-poster { height: auto; }
.face-six.fx-poster { width: 13rem; }
.face-seven.fx-poster { width: 15rem; }
.face-eight.fx-poster { width: 12rem; }
@media (max-width: 991px) {
  .face-six.fx-poster { width: 9rem; }
  .face-seven.fx-poster { width: 10rem; }
  .face-eight.fx-poster { width: 8rem; }
}
/* banda ancha encima del CTA final */
.fx-band-poster { padding: 0 2rem 3rem; position: relative; z-index: 3; }
.fx-poster-wide { width: 100%; max-width: 1180px; margin: 0 auto; height: auto; }
/* trofeo del bloque de early access */
.fx-poster-trophy { width: 9rem; height: auto; margin: 0 auto 1.4rem; }

/* Entrada propia: la pone fx.js al entrar en viewport (IX2 no conoce estos nodos). Solo se
   animan clip-path y transform, y la rotación de la lámina viaja en una variable. */
.fx-poster.fx-clip-init {
  clip-path: inset(0 0 100% 0);
  transform: rotate(var(--fx-rot, 0deg)) scale(1.12);
}
.fx-poster.fx-clip-init.is-in {
  clip-path: inset(0 0 0% 0);
  transform: rotate(var(--fx-rot, 0deg)) scale(1);
  transition: clip-path .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .fx-poster.fx-clip-init { clip-path: none; transform: rotate(var(--fx-rot, 0deg)); }
}

@media (max-width: 991px) {
  .icon-what.fx-poster { width: 62%; max-width: 18rem; margin-bottom: 3rem; }
  .fx-poster-trophy { width: 7rem; }
}
@media (max-width: 600px) {
  .icon-what.fx-poster { width: 70%; max-width: 14rem; }
  .scroll-icon.fx-poster-sm { max-width: 12rem; }
  .fx-band-poster { padding: 0 1.2rem 2rem; }
}

/* ---------- tokens de contenido: {{flag}}, {{pair}}, {{icon}} ---------- */
/* Banderas redondas de HatScripts/circle-flags (MIT) e iconos de phosphor-icons/core (MIT),
   servidos desde este mismo dominio. Van en línea con el texto y heredan su color. */
.fx-flag {
  width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin: 0 .15em;
  border-radius: 50%; display: inline-block; flex: none;
}
.fx-pair { white-space: nowrap; }
.fx-pair-flags { display: inline-flex; margin-right: .3em; vertical-align: -0.12em; }
.fx-pair-flags .fx-flag { margin: 0; }
.fx-pair-flags .fx-flag + .fx-flag { margin-left: -0.38em; }
.fx-icon {
  width: 1.1em; height: 1.1em; vertical-align: -0.16em; margin-right: .3em;
  display: inline-block; flex: none; color: inherit;
}
/* en los titulares Humane la bandera baja a la altura de la x */
h1 .fx-flag, h2 .fx-flag, .heading-m .fx-flag, .text-size-one .fx-flag {
  width: .62em; height: .62em; vertical-align: .06em;
}

/* banderas que no existen: se cae al código, sin icono roto */
.fx-flag-img.is-missing { display: none; }

/* ---------- marcas de terceros: {{brand:usdg}} / {{brand:robinhood}} ---------- */
/* Se enseñan tal cual: sin recolorear, sin duotono, sin deformar y con aire alrededor.
   Van en línea a 1 em; `is-lg` / `is-xl` las fijan en píxeles para acompañar a un titular. */
.fx-brand {
  width: 1em; height: 1em; object-fit: contain; flex: none;
  display: inline-block; vertical-align: -0.16em; margin-right: .34em;
}
.fx-brand-usdg { border-radius: 50%; }
.fx-brand-robinhood { border-radius: 4px; }
.fx-brand.is-lg { width: 2rem; height: 2rem; vertical-align: -0.5rem; margin-right: .5rem; }
/* en los rótulos Humane (interlineado 0,8) un vertical-align negativo tira el icono a la línea
   siguiente: se apoya en la línea base, que es donde queda junto a la primera palabra */
.fx-brand.is-xl { width: 3rem; height: 3rem; vertical-align: baseline; margin-right: .6rem; }
/* sobre lima el cuadrado lima de Robinhood se funde con el fondo: se le da un canto de tinta */
.fx-band-green .fx-brand-robinhood, .bg-green .fx-brand-robinhood,
.fx-tone-green .fx-brand-robinhood, .nav-bar[data-nav-theme="light"] .fx-brand-robinhood {
  box-shadow: 0 0 0 1px #010101;
}
@media (max-width: 600px) {
  .fx-brand.is-lg { width: 1.6rem; height: 1.6rem; vertical-align: -0.4rem; }
  .fx-brand.is-xl { width: 2.2rem; height: 2.2rem; }
}

/* paso 02 de PROCESS: el icono de usdg va después de "deposit usdg", pequeño y en línea, para que
   el título empiece en el borde izquierdo igual que los otros tres pasos */
.fx-step h3 .fx-brand {
  width: .62em; height: .62em; vertical-align: .06em; margin-right: 0; margin-left: .18em;
}

/* ---------- navbar: logo propio y tema según la sección de debajo ---------- */
/* La plantilla pinta `.nav-bar` con `mix-blend-mode:difference`, que es exactamente lo que
   dejaba el logo morado sobre lima y amarillo sobre azul. Se neutraliza y en su lugar fx.js
   mide el fondo real bajo la barra y escribe `data-nav-theme="light|dark"`. */
/* El logo y los botones se miden POR SEPARADO: en markets, la barra tiene una tarjeta lima
   debajo del logo y una azul debajo de los botones, y un solo tema dejaría uno de los dos feo. */
.nav-bar, .logo.with-blending { mix-blend-mode: normal; }
.nav-bar { --fx-nav-ink: #fff; --fx-nav-paper: #010101; --fx-nav-veil: rgba(1, 1, 1, .14); }
.nav-bar [data-nav-theme="light"], .nav-bar[data-nav-theme="light"] { --fx-nav-ink: #010101; --fx-nav-paper: #fff; --fx-nav-veil: rgba(255, 255, 255, .18); }
.nav-bar [data-nav-theme="dark"], .nav-bar[data-nav-theme="dark"] { --fx-nav-ink: #fff; --fx-nav-paper: #010101; --fx-nav-veil: rgba(1, 1, 1, .16); }

.fx-logo { display: block; height: 44px; width: auto; color: var(--fx-nav-ink); transition: color .25s ease; }
.nav-bar .logo-wrap > a { display: block; }
.nav-bar .text-white {
  color: var(--fx-nav-ink); transition: color .25s ease;
  display: inline-flex; align-items: center; font-size: .72rem; letter-spacing: .1em;
  margin-top: .35rem;
}
.nav-bar .text-white .fx-brand { width: 17px; height: 17px; margin-right: 6px; vertical-align: middle; }
.nav-bar .ghost-btn {
  color: var(--fx-nav-ink); border-color: var(--fx-nav-ink);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.nav-bar .ghost-btn:hover { background-color: var(--fx-nav-ink); color: var(--fx-nav-paper); }

/* pastilla de legibilidad detrás del logo y de los botones */
.nav-bar .logo-wrap, .nav-bar .btn-wrap {
  background: var(--fx-nav-veil);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-radius: 70px; padding: .5rem 1rem .55rem;
  transition: background-color .25s ease;
}
.nav-bar .logo-wrap { align-items: flex-start; }
.nav-bar .btn-wrap { display: flex; align-items: center; gap: .6rem; }
/* fx.js no expone qué sección hay debajo, solo el tema claro/oscuro que elige por contraste.
   Medido con FX_NAV_THEME() sobre las tarjetas de banderas de #markets: tanto el logo como los
   botones caen en tema "light" (fondos saturados de alta luminancia). Ahí el velo del 16-18% deja
   pasar una mancha de color sucia detrás del logo y de los botones; se sube al 62% para ese tema.
   Sin section-aware JS esto también sube el velo en cualquier otra sección que dé tema "light" por
   casualidad, que es la aproximación posible sin tocar fx.js. */
.nav-bar .logo-wrap[data-nav-theme="light"], .nav-bar .btn-wrap[data-nav-theme="light"] {
  background: rgba(255, 255, 255, .62);
}
@media (prefers-reduced-motion: reduce) {
  .fx-logo, .nav-bar .text-white, .nav-bar .ghost-btn, .nav-bar .logo-wrap, .nav-bar .btn-wrap { transition: none; }
}
@media (max-width: 991px) {
  .fx-logo { height: 34px; }
  .nav-bar .logo-wrap, .nav-bar .btn-wrap { padding: .4rem .7rem .45rem; }
  .nav-bar .text-white { font-size: .6rem; letter-spacing: .06em; }
  .nav-bar .text-white .fx-brand { width: 14px; height: 14px; margin-right: 5px; }
}
@media (max-width: 370px) {
  .fx-logo { height: 30px; }
  .nav-bar .ghost-btn { font-size: .72rem; padding: .55rem .8rem .4rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .fx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-cols { grid-template-columns: 1fr; }
  .fx-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-quote { font-size: 9rem; }
  .fx-pop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .fx-inner { padding-left: 1.2rem; padding-right: 1.2rem; padding-bottom: 4rem; }
  .fx-steps { grid-template-columns: 1fr; }
  .fx-regions { grid-template-columns: 1fr; }
  .fx-quote { font-size: 7.5rem; }
  .fx-chip-code { font-size: 2.4rem; }
  .fx-chip { min-width: 0; flex: 1; }
  .fx-col-lev { display: none; }
  .fx-pop-grid { grid-template-columns: 1fr; }
  .fx-cover-code { font-size: 4.5rem; }
  .fx-rates-note { display: none; }
  .fx-faq-a p { font-size: .95rem; }
}

/* Menu: the inserted 7th link (Whitepaper) has no IX2 data, so its two text layers
   were both visible. Reproduce the template swap: italic layer waits below, swaps on hover. */
.nav-link.seven .text-sm,
.nav-link.seven .text-sm-ab { transition: transform .45s cubic-bezier(.22, 1, .36, 1); will-change: auto; }
.nav-link.seven .text-sm-ab { transform: translate3d(0, 110%, 0); }
.nav-link.seven:hover .text-sm,
.nav-link.seven:focus-visible .text-sm { transform: translate3d(0, -110%, 0); }
.nav-link.seven:hover .text-sm-ab,
.nav-link.seven:focus-visible .text-sm-ab { transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) { .nav-link.seven .text-sm, .nav-link.seven .text-sm-ab { transition: none; } }


/* The X button in the header. Same ghost-btn shell as its two neighbours, just
   narrower, because an icon and one short word do not need their width. The
   label drops away on small screens where the row runs out of room and the
   icon carries it on its own; the aria-label is what keeps it announced. */
.fx-x-btn { padding-left: .85rem; padding-right: .85rem; }
.fx-x-btn .fx-icon { width: 1em; height: 1em; }
.fx-x-label { margin-left: .4rem; }
@media (max-width: 767px) {
  .fx-x-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fx-x-btn { padding-left: .7rem; padding-right: .7rem; }
}