:root {
  --ink: #12171a;
  --paper: #f5f6f2;
  --soft-paper: #ebece7;
  --lime: #c3ff45;
  --lime-deep: #aee733;
  --blue: #88a8f9;
  --muted: #626c6a;
  --line: rgba(18, 23, 26, 0.13);
  --dark-line: rgba(255, 255, 255, 0.13);
  --dark-muted: #a8b1ad;
  --shadow: 0 24px 70px rgba(11, 16, 14, 0.13);
  --shell: min(1184px, calc(100% - 48px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 16px; padding: 10px 16px; background: var(--lime); color: var(--ink); font-weight: 800; border-radius: 0 0 10px 10px; }
.skip-link:focus { top: 0; }

/* --- Indicador de foco, global ---------------------------------------
   HALLAZGO QUE ESTO ARREGLA: la regla de :focus-visible vivía en kyc.css
   acotada a .kyc-page, e index.html no lleva esa clase. O sea que TODA la
   home —nav, botones, links— quedaba sólo con el anillo por defecto del
   navegador, que sobre el hero oscuro es prácticamente invisible.
   Es un incumplimiento de WCAG 2.4.7 en la página más visitada del sitio.

   Dos aros, porque el sitio alterna superficies claras y oscuras y ningún
   color solo sirve para ambas: el lime da 15.2:1 sobre --ink pero 1.09:1
   sobre --paper. El aro interior lime se ve en lo oscuro, el exterior ink
   se ve en lo claro. Siempre hay uno visible, sin tener que saber sobre
   qué fondo cayó el elemento. */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(18, 23, 26, .7);
  border-radius: 4px;
}

/* Quien no soporta :focus-visible igual tiene que ver algo. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, summary:focus {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
  }
}

.page-noise { position: fixed; z-index: 50; inset: 0; pointer-events: none; opacity: .024; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }

.site-header { position: absolute; z-index: 20; top: 0; width: 100%; color: #f8faf7; transition: background .25s ease, box-shadow .25s ease, transform .25s ease; }
.site-header.is-scrolled { position: fixed; background: rgba(18, 23, 26, .91); box-shadow: 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(16px); }
.nav-shell { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { position: relative; z-index: 3; display: inline-flex; width: 141px; align-items: center; }
.brand img, .footer-brand img { display: block; width: 100%; height: auto; filter: invert(1); }
.site-nav { display: flex; align-items: center; gap: 23px; font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.site-nav > a:not(.nav-contact):not(.nav-kyc) { color: rgba(248,250,247,.76); transition: color .2s ease; }
.site-nav > a:not(.nav-contact):not(.nav-kyc):hover { color: var(--lime); }
.nav-auth { display: flex; align-items: center; gap: 7px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.14); }
.nav-auth button { min-height: 36px; padding: 0 13px; border-radius: 5px; font-family: "Space Grotesk", sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.nav-login { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #eef2ed; }
.nav-login:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); transform: translateY(-1px); }
.nav-register { border: 1px solid var(--lime); background: var(--lime); color: var(--ink); }
.nav-register:hover { border-color: #d4ff7d; background: #d4ff7d; transform: translateY(-1px); }
.nav-kyc { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid rgba(195,255,69,.46); border-radius: 5px; color: var(--lime); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.nav-kyc svg { width: 15px; height: 15px; }
.nav-kyc:hover { border-color: var(--lime); background: var(--lime); color: var(--ink); transform: translateY(-1px); }
.nav-contact { display: inline-flex; gap: 8px; align-items: center; padding: 10px 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.nav-contact svg { width: 15px; height: 15px; }
.nav-contact:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.menu-toggle { display: none; border: 0; color: #fff; background: transparent; padding: 8px; cursor: pointer; }

.hero { position: relative; isolation: isolate; min-height: 720px; padding: 166px 0 76px; overflow: hidden; background: var(--ink); color: #f6f8f4; }
.hero-grid-lines { position: absolute; z-index: -1; inset: 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 63%, transparent 100%); }
.hero-grid-lines::after { content: ""; position: absolute; left: 0; bottom: 0; width: 74%; height: 55%; background: radial-gradient(ellipse at 26% 84%, rgba(195,255,69,.18), transparent 59%); }
.hero-orb { position: absolute; z-index: -1; border-radius: 100%; filter: blur(1px); }
.hero-orb-one { width: 380px; height: 380px; right: -120px; top: 95px; border: 1px solid rgba(195,255,69,.2); box-shadow: 0 0 0 56px rgba(195,255,69,.025), 0 0 0 112px rgba(195,255,69,.018); }
.hero-orb-two { width: 550px; height: 550px; left: 49%; bottom: -490px; background: #6c83d2; opacity: .21; filter: blur(100px); }
.hero-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .79fr); gap: 72px; align-items: center; }
.eyebrow { display: flex; width: fit-content; align-items: center; gap: 8px; color: var(--lime); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.live-dot { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(195,255,69,.1); }
.live-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--lime); border-radius: 50%; opacity: .5; animation: heartbeat 2s ease infinite; }
.hero h1, h2 { margin: 0; font-family: "Space Grotesk", Arial, sans-serif; letter-spacing: -.057em; }
.hero h1 { max-width: 670px; margin-top: 22px; font-size: clamp(48px, 5.55vw, 82px); font-weight: 600; line-height: .99; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-intro { max-width: 535px; margin: 28px 0 0; color: #b4bdb8; font-size: 17px; line-height: 1.72; }
.hero-actions { display: flex; align-items: center; gap: 29px; margin-top: 38px; }
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 13px; padding: 0 21px; border-radius: 6px; font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button-primary { background: var(--lime); color: var(--ink); box-shadow: 0 0 0 0 rgba(195,255,69,.3); }
.button-primary svg { width: 19px; transition: transform .2s ease; }
.button-primary:hover { background: #d1ff74; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(195,255,69,.18); }
.button-primary:hover svg { transform: translateX(3px); }
.text-link { display: inline-flex; gap: 9px; align-items: center; color: #f5f6f2; font-size: 13px; font-weight: 700; }
.text-link span { color: var(--lime); font-size: 18px; transition: transform .2s ease; }
.text-link:hover span { transform: translateY(3px); }
.hero-points { display: flex; gap: 24px; margin: 70px 0 0; padding: 0; list-style: none; color: #abb4b0; font-size: 11px; font-weight: 600; }
.hero-points li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hero-points span { color: #7b847e; font-family: "DM Mono", monospace; font-size: 10px; }

.quote-wrap { position: relative; }
.quote-card { position: relative; overflow: hidden; padding: 25px 25px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: linear-gradient(130deg, rgba(34,41,40,.98), rgba(21,27,26,.96)); box-shadow: -18px 22px 0 -1px rgba(255,255,255,.045), 18px -19px 0 -1px rgba(195,255,69,.08), 0 30px 70px rgba(0,0,0,.35); }
.quote-card::before { content: ""; position: absolute; top: 0; right: 0; width: 155px; height: 155px; background: radial-gradient(circle at top right, rgba(195,255,69,.13), transparent 68%); }
.quote-topbar { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--dark-line); }
.quote-topbar > div:first-child { display: grid; gap: 3px; }
.quote-label { color: #8c9691; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .14em; }
.quote-topbar strong { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 600; }
.availability { display: inline-flex; align-items: center; gap: 7px; padding-top: 3px; color: #c3ccc7; font-family: "DM Mono", monospace; font-size: 9px; }
.availability i { width: 6px; height: 6px; border-radius: 50%; background: #71ed96; box-shadow: 0 0 0 3px rgba(113,237,150,.1); }
/* --- "Cómo se opera": pasos y plataformas ---------------------------
   Ocupa el lugar del cotizador que había en el hero (toggle Comprar/Vender,
   campos UYU/USDT, intercambiador). Se sacó porque presentaba el sitio como
   un exchange; ver el comentario largo en index.html.

   NO HAY NINGUNA REGLA DE PRECIO NI DE PORCENTAJE ACÁ, y no es que falte:
   esta sección no muestra cotización. Si alguna vez aparece un `.op-precio`
   en este bloque, algo se entendió al revés. */
.op-pasos { display: grid; gap: 15px; margin: 21px 0 0; padding: 0; list-style: none; }
.op-paso { display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 12px; }
.op-paso-n { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(195,255,69,.28); border-radius: 50%; color: var(--lime); font-family: "DM Mono", monospace; font-size: 10px; }
.op-paso strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 600; color: #eef2ec; }
.op-paso small { display: block; margin-top: 4px; color: #a9b3ae; font-size: 11px; line-height: 1.55; }
.op-solo { margin: 21px 0 12px; padding-top: 17px; border-top: 1px solid var(--dark-line); color: #a9b3ae; font-size: 11px; line-height: 1.55; }
.op-solo strong { color: var(--lime); font-weight: 700; }
/* Tres columnas aun en mobile: son etiquetas cortas y apiladas ocuparían
   media pantalla. El contenido va centrado y en vertical para que entre a
   375px sin recortarse. */
.op-plataformas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.op-plataforma { position: relative; display: grid; justify-items: center; gap: 6px; padding: 13px 6px 11px; border: 1px solid rgba(255,255,255,.105); border-radius: 7px; background: rgba(0,0,0,.09); color: #d8dfda; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.op-plataforma:hover { border-color: rgba(195,255,69,.34); background: rgba(195,255,69,.07); }
.op-plataforma-marca { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: #eef2ec; font-family: "Space Grotesk", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: -.04em; }
.op-plataforma-nombre { font-size: 11px; font-weight: 600; }
.op-plataforma-ir { position: absolute; top: 7px; right: 8px; color: var(--lime); font-size: 11px; }
.quote-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 17px; color: #909a95; font-size: 9px; }
.quote-footer > span { display: flex; align-items: center; gap: 5px; }
.shield-icon { color: var(--lime); font-style: normal; }
.quote-footer a { color: #d8dfda; font-weight: 700; }
.quote-footer a b { color: var(--lime); margin-left: 2px; }
.quote-note { margin: 24px 0 0 15px; color: #b2bbb6; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .015em; }
.quote-note span { color: var(--lime); font-size: 9px; margin-right: 5px; }

.trust-strip { background: var(--lime); color: var(--ink); }
.trust-items { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-item { display: flex; min-height: 113px; align-items: center; gap: 17px; padding: 20px 30px 20px 0; border-right: 1px solid rgba(18,23,26,.18); }
.trust-item + .trust-item { padding-left: 29px; }
.trust-item:last-child { border-right: 0; }
.trust-number { color: rgba(18,23,26,.62); font-family: "DM Mono", monospace; font-size: 10px; }
.trust-item p { display: grid; gap: 2px; margin: 0; color: rgba(18,23,26,.7); font-size: 11px; line-height: 1.45; }
.trust-item strong { color: var(--ink); font-family: "Space Grotesk", sans-serif; font-size: 13px; }

.section { padding: 134px 0; }
.process-section { background: var(--paper); }
.section-heading { max-width: 700px; }
.eyebrow-dark { color: #65746a; }
.eyebrow-light { color: var(--lime); }
.section-heading h2, .platforms-copy h2, .contact-copy h2 { margin-top: 16px; font-size: clamp(38px, 4.2vw, 58px); font-weight: 600; line-height: 1.05; }
.section-heading h2 span, .platforms-copy h2 span, .contact-copy h2 span { color: #748cce; }
.section-heading > p { max-width: 500px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 59px; }
.process-card { position: relative; min-height: 289px; padding: 25px 25px 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fbfcf9; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.process-card::before { content: ""; position: absolute; bottom: -55px; right: -30px; width: 135px; height: 135px; border-radius: 50%; background: rgba(195,255,69,.15); transition: transform .4s ease; }
.process-card:hover { transform: translateY(-5px); border-color: rgba(18,23,26,.26); box-shadow: 0 20px 34px rgba(18,23,26,.08); }
.process-card:hover::before { transform: scale(1.25); }
.process-card-top { display: flex; align-items: flex-start; justify-content: space-between; color: #69786d; }
.process-card-top > span { color: #6d7570; font-family: "DM Mono", monospace; font-size: 11px; }
.process-card-top svg { width: 31px; }
.process-card h3 { margin: 63px 0 8px; font-family: "Space Grotesk", sans-serif; font-size: 23px; letter-spacing: -.04em; }
.process-card p { max-width: 285px; margin: 0; color: #69736e; font-size: 13px; line-height: 1.67; }
.process-arrow { position: absolute; right: 23px; bottom: 18px; color: #3f4e43; font-size: 21px; transition: transform .2s ease; }
.process-card:hover .process-arrow { transform: translateX(4px); }
.security-note { display: flex; max-width: 772px; align-items: center; gap: 13px; margin: 32px auto 0; padding: 14px 20px; border: 1px solid var(--line); border-radius: 8px; color: #556259; background: rgba(255,255,255,.52); }
.security-note svg { flex: 0 0 auto; width: 23px; color: #63796b; }
.security-note p { margin: 0; font-size: 11px; line-height: 1.6; }
.security-note strong { color: var(--ink); }

.banks-section { position: relative; border-top: 1px solid var(--line); background: #ebece7; }
.banks-section::before { content: ""; position: absolute; left: 0; right: 0; top: 101px; border-top: 1px solid rgba(18,23,26,.07); }
.banks-top { display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.banks-top .section-heading h2 { font-size: clamp(38px, 4.1vw, 55px); }
.section-side-note { max-width: 295px; margin: 0 0 4px; color: #616d67; font-size: 13px; line-height: 1.65; }
.bank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 53px; }
.bank-card { position: relative; display: flex; min-height: 128px; align-items: center; gap: 17px; padding: 19px; overflow: hidden; border: 1px solid rgba(18,23,26,.12); border-radius: 9px; background: rgba(251,252,249,.68); transition: background .2s ease, transform .24s ease, box-shadow .24s ease; }
.bank-card:hover { background: #fbfcf9; transform: translateY(-3px); box-shadow: 0 13px 26px rgba(18,23,26,.06); }
.bank-logo { display: grid; flex: 0 0 auto; width: 92px; height: 57px; place-items: center; border-radius: 8px; overflow: hidden; }
.bank-card h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 16px; letter-spacing: -.03em; }
.bank-card p { margin: 3px 0 0; color: #6b736e; font-size: 10px; }
/* --- Marca tipográfica de cada banco ---------------------------------
   Reemplaza las recreaciones a mano que había (el sol de BROU, el path de
   Santander, la S de Scotiabank en Georgia itálica). Eran imitaciones
   reconocibles de marcas ajenas, sin licencia, en un sitio comercial.

   El sistema es nuestro: monograma de dos letras en la tipografía del sitio
   sobre una placa de nuestra paleta. La placa conserva las medidas exactas
   que tenía el logo, así que un SVG oficial entra sin tocar nada más. */
.bank-logo { border: 1px solid rgba(18,23,26,.13); background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(235,236,231,.75)); transition: border-color .24s ease, background .24s ease; }
.bank-monograma { font-family: "Space Grotesk", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.05em; color: var(--ink); opacity: .82; transition: opacity .24s ease; }

/* El acento aparece en hover, no en reposo: en reposo la grilla tiene que
   leerse como una lista pareja, sin que ningún banco parezca destacado. */
.bank-card:hover .bank-logo { border-color: rgba(18,23,26,.24); background: linear-gradient(150deg, #fff, rgba(195,255,69,.16)); }
.bank-card:hover .bank-monograma { opacity: 1; }

/* Ya estilado para el día que haya logos con licencia: se cambia el <span>
   por un <img> y encaja sin tocar el grid. */
.bank-logo img { display: block; width: auto; height: auto; max-width: 74px; max-height: 43px; }

.bank-datos { min-width: 0; }

.bank-more { cursor: pointer; }
.bank-more:hover .bank-arrow { transform: translateX(4px); }
.more-logo { border: 1px dashed rgba(18,23,26,.34); color: #617068; font-family: "DM Mono", monospace; font-size: 22px; }
.bank-arrow { position: absolute; right: 18px; color: #4e5c54; font-size: 21px; transition: transform .2s ease; }

.platforms-section { position: relative; overflow: hidden; background: #171d1b; color: #f7f9f4; }
.platforms-section::before { content: ""; position: absolute; z-index: 0; width: 482px; height: 482px; right: -167px; bottom: -216px; border: 1px solid rgba(195,255,69,.24); border-radius: 50%; box-shadow: 0 0 0 44px rgba(195,255,69,.02), 0 0 0 87px rgba(195,255,69,.018); }
.platforms-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .74fr 1fr; gap: 110px; align-items: center; }
.platforms-copy h2 { max-width: 400px; color: #f8faf7; }
.platforms-copy h2 span { color: var(--lime); }
.platforms-copy > p { max-width: 410px; margin: 22px 0 0; color: #aab3ae; font-size: 15px; line-height: 1.78; }
.independent-note { display: flex; align-items: flex-start; gap: 11px; max-width: 390px; margin-top: 34px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.14); }
.independent-note > span { display: grid; flex: 0 0 auto; width: 17px; height: 17px; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #cdd4d0; font-family: Georgia, serif; font-size: 10px; }
.independent-note p { margin: 0; color: #8f9994; font-size: 10px; line-height: 1.6; }
/* Variante para secciones claras (#bancos). La base está pensada sobre fondo oscuro. */
.independent-note-light { max-width: 460px; border-top-color: var(--line); }
.independent-note-light > span { border-color: rgba(18,23,26,.32); color: var(--muted); }
.independent-note-light p { color: var(--muted); }
.platform-cards { display: grid; gap: 12px; }
.platform-card { position: relative; display: flex; min-height: 118px; align-items: center; gap: 17px; padding: 19px; overflow: hidden; border-radius: 9px; background: #f9faf7; transition: transform .25s ease, box-shadow .25s ease; }
.platform-card:hover { transform: translateX(-5px); box-shadow: 11px 11px 0 rgba(195,255,69,.17); }
.platform-card img { display: block; max-width: 100%; max-height: 37px; object-fit: contain; }
.bybit-card img { max-height: 36px; }
.okx-card img { max-height: 44px; }
/* --- Mismo sistema que #bancos --------------------------------------
   El intento anterior era un wordmark suelto en #f2f5ef, que sobre la card
   (#f9faf7) daba 1.05:1 de contraste: ilegible. El hover tampoco salvaba
   nada, porque lime sobre casi-blanco da 1.13:1. Los dos estados estaban mal.

   Ahora replica exactamente el tratamiento de las cards de banco: placa con
   monograma, nombre y bajada. El texto va en --ink sobre la card clara, que
   da 17.2:1. */
.platform-logo { display: grid; flex: 0 0 auto; width: 57px; height: 57px; place-items: center; overflow: hidden; border: 1px solid rgba(18,23,26,.13); border-radius: 8px; background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(235,236,231,.75)); transition: border-color .24s ease, background .24s ease; }
.platform-monograma { font-family: "Space Grotesk", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.05em; color: var(--ink); opacity: .82; transition: opacity .24s ease; }
.platform-datos { min-width: 0; }
.platform-card h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 16px; letter-spacing: -.03em; color: var(--ink); }
.platform-card p { margin: 3px 0 0; color: #6b736e; font-size: 10px; }

/* El acento va en la placa, no en el nombre: el nombre ya se lee y no
   necesita ayuda. Mismo criterio que en bancos. */
.platform-card:hover .platform-logo { border-color: rgba(18,23,26,.24); background: linear-gradient(150deg, #fff, rgba(195,255,69,.16)); }
.platform-card:hover .platform-monograma { opacity: 1; }

.platform-card-index { position: absolute; top: 16px; right: 18px; color: #6d756f; font-family: "DM Mono", monospace; font-size: 10px; }

.contact-section { position: relative; overflow: hidden; padding: 121px 0; background: var(--lime); color: var(--ink); }
.contact-circles span { position: absolute; width: 335px; height: 335px; border: 1px solid rgba(18,23,26,.16); border-radius: 50%; }
.contact-circles span:first-child { top: -222px; left: -86px; box-shadow: 0 0 0 43px rgba(18,23,26,.025), 0 0 0 86px rgba(18,23,26,.018); }
.contact-circles span:last-child { right: -104px; bottom: -238px; box-shadow: 0 0 0 42px rgba(18,23,26,.025); }
.contact-shell { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 88px; align-items: center; }
.contact-copy h2 { font-size: clamp(46px, 4.65vw, 64px); }
.contact-copy h2 span { color: #3d5e74; }
.contact-copy > p { max-width: 390px; margin: 18px 0 0; color: #405142; font-size: 15px; line-height: 1.75; }
/* `auto-fit` en vez de `repeat(3, …)` porque la cantidad de canales cambia:
   Telegram e Instagram están comentados en index.html hasta que las cuentas
   existan. Con tres columnas fijas, la única card que queda se dibujaría
   aplastada a un tercio del ancho con dos huecos al lado. Así el grid se
   adapta solo, y cuando se repongan los dos canales vuelve a tres columnas
   sin tocar el CSS. */
.contact-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
/* Una card sola no debería estirarse a todo el ancho: quedaría una barra de
   159px de alto. El tope se desactiva solo en cuanto haya una segunda. */
.contact-action:only-child { max-width: 340px; }
.contact-action { position: relative; min-height: 159px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border: 1px solid rgba(18,23,26,.19); border-radius: 9px; background: rgba(249,252,240,.28); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.contact-action:hover { background: #f8faed; transform: translateY(-4px); box-shadow: 0 17px 25px rgba(58,83,20,.14); }
.contact-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); }
/* Sin uso HOY a propósito: el markup de Telegram e Instagram está comentado en
   index.html hasta que existan las cuentas. No borrar — se reponen con sólo
   descomentar allá. */
.telegram-action .contact-icon { background: #297e9a; color: #f7fffa; }
.instagram-action .contact-icon { background: #713c78; color: #f7fffa; }
.contact-icon svg { width: 18px; height: 18px; }
.contact-action small { display: block; margin-bottom: 1px; color: #526351; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .03em; }
.contact-action strong { font-family: "Space Grotesk", sans-serif; font-size: 15px; letter-spacing: -.03em; }
.contact-action > b { position: absolute; right: 17px; bottom: 15px; color: #586b58; font-size: 17px; transition: transform .2s ease; }
.contact-action:hover > b { transform: translate(2px, -2px); }

.site-footer { background: var(--ink); color: #e5eae4; }
.footer-main { display: flex; min-height: 115px; align-items: center; justify-content: space-between; gap: 24px; }
.footer-brand { width: 107px; }
.footer-main > p { margin: 0; color: #8f9994; font-family: "DM Mono", monospace; font-size: 10px; }
.footer-top { color: var(--lime); font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 700; }
.footer-top span { margin-left: 4px; font-size: 16px; }
.footer-bottom { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid rgba(255,255,255,.11); color: #838c87; font-size: 9px; line-height: 1.55; }
.footer-bottom p { margin: 0; }
.footer-bottom p:first-child { max-width: 700px; }
.floating-whatsapp { position: fixed; z-index: 12; right: 22px; bottom: 21px; display: none; align-items: center; gap: 8px; padding: 10px 13px 10px 10px; border-radius: 99px; background: #1d2520; color: #fff; box-shadow: 0 9px 23px rgba(0,0,0,.25); font-size: 11px; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.floating-whatsapp.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.floating-whatsapp svg { width: 23px; color: var(--lime); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .12s; }
.reveal-delay-one { transition-delay: .09s; }
.reveal-delay-two { transition-delay: .18s; }

@keyframes heartbeat { 50% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }

@media (max-width: 900px) {
  .brand { width: 128px; }
  .site-nav { gap: 10px; font-size: 11px; }
  .nav-auth { gap: 5px; padding-left: 8px; }
  .nav-auth button { padding-inline: 9px; font-size: 10px; }
  .nav-kyc { padding: 8px 9px; }
  .nav-contact { padding: 9px 11px; }
  .hero { min-height: auto; padding-top: 144px; }
  .hero-shell { grid-template-columns: 1fr; gap: 57px; }
  .hero-copy { max-width: 670px; }
  .quote-wrap { width: min(100%, 510px); }
  .trust-item { padding-right: 18px; }
  .trust-item + .trust-item { padding-left: 18px; }
  .platforms-layout { grid-template-columns: 1fr; gap: 52px; }
  .platforms-copy h2 { max-width: none; }
  .platforms-copy > p { max-width: 560px; }
  .banks-top { align-items: start; flex-direction: column; gap: 18px; }
  .section-side-note { max-width: 455px; }
  .contact-shell { grid-template-columns: 1fr; gap: 45px; }
}

@media (max-width: 680px) {
  :root { --shell: min(100% - 34px, 1184px); }
  .nav-shell { height: 73px; }
  .brand { width: 112px; }
  .menu-toggle { position: relative; z-index: 3; display: grid; gap: 5px; }
  .menu-toggle span:not(.sr-only) { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
  .site-nav { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; min-height: 100dvh; display: grid; align-content: start; gap: 0; padding: 84px 17px 17px; background: #1b211e; box-shadow: 0 17px 24px rgba(0,0,0,.23); clip-path: inset(0 0 100% 0); pointer-events: none; transition: clip-path .28s ease; }
  .site-nav.is-open { clip-path: inset(0); pointer-events: auto; }
  .site-nav > a:not(.nav-contact):not(.nav-kyc) { padding: 15px 10px; border-top: 1px solid rgba(255,255,255,.1); }
  .nav-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 10px 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .nav-auth button { min-height: 44px; }
  .nav-kyc { width: fit-content; margin: 14px 10px 0; padding: 10px 13px; }
  .nav-contact { width: fit-content; margin: 13px 10px 2px; }
  .hero { padding: 122px 0 58px; }
  .hero h1 { margin-top: 19px; font-size: clamp(44px, 13vw, 61px); line-height: 1; }
  .hero-intro { margin-top: 22px; font-size: 15px; line-height: 1.67; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 29px; }
  .button { min-height: 51px; font-size: 13px; }
  .hero-points { display: grid; grid-template-columns: repeat(2, auto); width: fit-content; gap: 12px 20px; margin-top: 46px; }
  .hero-points li:last-child { grid-column: 1 / -1; }
  .quote-wrap { width: 100%; }
  .quote-card { padding: 19px 17px 16px; border-radius: 10px; }
  .quote-topbar { padding-bottom: 17px; }
  .quote-footer { flex-direction: column; gap: 7px; }
  .quote-note { margin: 17px 0 0 5px; font-size: 9px; }
  .trust-items { grid-template-columns: 1fr; padding: 5px 0; }
  .trust-item, .trust-item + .trust-item { min-height: 73px; padding: 13px 0; border-right: 0; border-bottom: 1px solid rgba(18,23,26,.15); }
  .trust-item:last-child { border-bottom: 0; }
  .section { padding: 86px 0; }
  .section-heading h2, .platforms-copy h2, .contact-copy h2 { margin-top: 13px; font-size: 39px; }
  .section-heading > p { margin-top: 18px; font-size: 14px; }
  .process-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 39px; }
  .process-card { min-height: 238px; padding: 19px; }
  .process-card h3 { margin-top: 42px; font-size: 21px; }
  .process-card p { font-size: 12px; }
  .security-note { align-items: flex-start; margin-top: 24px; padding: 13px 15px; }
  .banks-section::before { top: 68px; }
  .bank-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 36px; }
  .bank-card { min-height: 101px; padding: 15px; }
  .bank-logo { width: 80px; height: 49px; }
  .bank-logo img { max-width: 64px; max-height: 37px; }
  .platforms-section { padding-bottom: 93px; }
  .platforms-layout { gap: 42px; }
  .platform-card { min-height: 84px; padding: 17px 55px; }
  .platform-card img { max-height: 29px; }
  .bybit-card img { max-height: 27px; }
  .okx-card img { max-height: 34px; }
  .contact-section { padding: 84px 0; }
  .contact-shell { gap: 33px; }
  .contact-actions { grid-template-columns: 1fr; gap: 8px; }
  .contact-action { min-height: 83px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 13px; padding: 14px; }
  .contact-action > b { right: 17px; bottom: 30px; }
  .site-footer { padding-bottom: 64px; }
  .footer-main { min-height: 98px; flex-wrap: wrap; gap: 12px; padding: 21px 0; }
  .footer-main > p { width: 100%; order: 3; }
  .footer-bottom { min-height: 0; flex-direction: column; align-items: flex-start; gap: 11px; padding: 19px 0; }
  .floating-whatsapp { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}