/* ==================================================================
   Atlantis Payments — v0.20.0 "Instrument Grade"
   ------------------------------------------------------------------
   Dirección: terminal financiera de precisión, no banca privada.
   El oro firma (marca); el cian informa (dato vivo). La elevación se
   construye con borde y contraste de superficie, nunca con sombras de
   color difusas.
   Prototipo estático, sin build.
   ================================================================== */

/* ============================== TOKENS ============================== */

:root {
    /* Superficies — tinta fría, nunca negro puro ni marrón */
    --ink-900: #07090e;
    --ink-800: #0b0e14;
    --ink-700: #11151e;
    --ink-600: #161b26;
    --ink-500: #1d2331;

    /* Canal de dato vivo */
    --cyan: #00e5c7;
    --cyan-soft: rgba(0, 229, 199, 0.14);
    --cyan-line: rgba(0, 229, 199, 0.32);
    --cyan-deep: #00b39b;

    /* Oro de marca Atlantis. Se conserva documentado como referencia, pero NO
       se usa en la interfaz: el oro vive únicamente en el isotipo (Isotipo.png)
       y en el logo del footer. Ningún texto ni superficie lo emplea. */
    --gold: #d4a955;

    /* Semánticos — reservados a estado, nunca decorativos */
    --blue: #5b8cff;
    --ok: #3fd68c;
    --warn: #e0a54c;
    --err: #ff5d73;

    /* Texto */
    --text: #f2f5f9;
    --text-2: #98a2b3;
    --text-3: #5d6675;

    /* Trazo */
    --line: rgba(255, 255, 255, 0.07);
    --line-2: rgba(255, 255, 255, 0.12);

    /* Tipografía */
    --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
    --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

    /* Forma */
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;

    /* Movimiento — una sola curva en toda la interfaz */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 150ms;
    --t: 220ms;

    /* Retícula */
    --maxw: 1240px;
    --gutter: max(20px, calc((100vw - var(--maxw)) / 2));
}

/* ============================== BASE ============================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    color-scheme: dark;
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--ink-800);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; overscroll-behavior: none; }
html:has(body.is-locked) { overflow: hidden; overscroll-behavior: none; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.06;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg { display: block; }
img { max-width: 100%; height: auto; }

/* Todo numeral vive en mono con cifras tabulares. Es lo que separa una
   herramienta financiera de una landing genérica. */
.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
}

.lbl {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.hidden { display: none !important; }

.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; top: -60px; left: 16px; z-index: 999;
    padding: 10px 16px; border-radius: var(--r-sm);
    background: var(--cyan); color: var(--ink-900);
    font-weight: 600; transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 16px; }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection { background: var(--cyan-soft); color: var(--text); }

/* Puntos de estado — 6px, siempre acompañan a un estado textual */
.dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-3); flex: none;
}
.dot.ok    { background: var(--ok); }
.dot.live  { background: var(--cyan); }
.dot.warn  { background: var(--warn); }
.dot.err   { background: var(--err); }
.dot.pulse { animation: dotPulse 2.4s var(--ease) infinite; }

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 4px transparent; opacity: 0.55; }
}

/* Pulso discreto cuando un dato acaba de actualizarse */
.is-fresh { animation: freshFlash 620ms var(--ease); }
@keyframes freshFlash {
    0%   { color: var(--cyan); }
    100% { color: inherit; }
}

/* ============================== FONDO ============================== */

.bg-fx {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}

/* Retícula de plano de ingeniería: 40px, 1px, enmascarada hacia el hero */
.bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}

/* Lienzo de red de nodos (dibujado en landing.js) */
#bgCanvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0.55;
}

.bg-glow {
    position: absolute; inset: -20%;
    background:
        radial-gradient(30% 34% at 78% 6%, rgba(0, 229, 199, 0.1), transparent 64%),
        radial-gradient(26% 30% at 12% 88%, rgba(91, 140, 255, 0.07), transparent 62%);
    filter: blur(30px);
}

.bg-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(130% 92% at 50% -6%, transparent 48%, rgba(0, 0, 0, 0.62));
}

/* Capas de contenido por encima del fondo fijo.
   `.skip-link` queda FUERA a propósito: ya es `position: fixed` con su propio
   z-index, y meterlo aquí lo devolvía a `relative`, reservando ~26 px de
   espacio en el flujo y empujando toda la página hacia abajo. */
.landing, .app-shell, .modal, .toast-region, .palette {
    position: relative; z-index: 1;
}

/* ============================== BOTONES ============================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 0 18px;
    border: 1px solid transparent; border-radius: var(--r-sm);
    font-size: 14.5px; font-weight: 550; letter-spacing: -0.005em;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 50px; padding: 0 24px; font-size: 15.5px; }
.btn-block { width: 100%; }

/* Primario: cian sólido. Es la acción, y la acción es tecnología. */
.btn-primary { background: var(--cyan); color: var(--ink-900); font-weight: 600; }
.btn-primary:hover { background: #33ebd4; }

.btn-ghost {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--cyan-line); background: rgba(0, 229, 199, 0.06); }

.btn-danger {
    color: #ffa9b5;
    border-color: rgba(255, 93, 115, 0.28);
    background: rgba(255, 93, 115, 0.07);
}
.btn-danger:hover { border-color: rgba(255, 93, 115, 0.5); }

.text-action {
    color: var(--cyan); font-size: 13px; font-weight: 550; padding: 6px;
}
.text-action:hover { text-decoration: underline; }

/* ============================== FORM ============================== */

label { display: block; color: var(--text-2); font-size: 12.5px; font-weight: 550; }

.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }

input, select, textarea {
    width: 100%; min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: var(--ink-900); color: var(--text);
    outline: none;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea { min-height: auto; resize: vertical; line-height: 1.5; }

input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus {
    border-color: var(--cyan-line);
    box-shadow: 0 0 0 3px var(--cyan-soft);
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2398a2b3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.field-error { margin-top: 3px; color: var(--err); font-size: 12px; }

.password-field { position: relative; display: flex; align-items: center; }
.password-field input { padding-right: 74px; }
.password-toggle {
    position: absolute; right: 7px;
    height: 30px; padding: 0 11px;
    border: 1px solid var(--line-2); border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2); font-size: 11.5px;
    font-family: var(--font-mono);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.password-toggle:hover { color: var(--text); border-color: var(--cyan-line); }

/* Superficie neutra: el ámbar queda reservado a estados (puntos, píldoras,
   toasts), nunca como relleno de un bloque de contenido. */
.review-line {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 13px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--ink-900);
    transition: border-color var(--t-fast) var(--ease);
}
.review-line:hover { border-color: var(--line-2); }
.review-line:focus-within { border-color: var(--cyan-line); }
.review-line input {
    width: 17px; height: 17px; min-height: 0;
    margin-top: 2px; accent-color: var(--cyan);
}
.review-line span { color: var(--text-2); font-size: 13px; line-height: 1.45; }

/* ============================== NAV ============================== */

.landing { min-height: 100vh; }

.nav {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 13px var(--gutter);
    border-bottom: 1px solid transparent;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav.is-scrolled {
    background: rgba(11, 14, 20, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
}

.nav-brand { display: inline-flex; align-items: center; gap: 10px; }

/* Isotipo real, recortado por CSS a su recuadro */
.iso-mark {
    display: inline-block; flex: none;
    background: url("../../Isotipo.png") no-repeat 50% 40%;
    background-size: 208% auto;
}
.nav-mark { width: 34px; height: 32px; }

.nav-word {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
}
.nav-word em { font-style: normal; color: var(--text-3); font-weight: 500; }

.nav-actions { display: flex; align-items: center; gap: 7px; }

.nav-link {
    padding: 8px 12px; border-radius: var(--r-sm);
    color: var(--text-2); font-size: 14px; font-weight: 500;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

/* Disparador del command palette — señal de herramienta, no de folleto */
.nav-kbd {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 9px 0 11px;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-3); font-size: 12.5px;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-kbd:hover { border-color: var(--cyan-line); color: var(--text-2); }
.nav-kbd kbd {
    font-family: var(--font-mono); font-size: 10.5px;
    padding: 2px 5px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.07); color: var(--text-2);
}

.nav-signin {
    padding: 8px 13px; border-radius: var(--r-sm);
    border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03);
    color: var(--text); font-size: 14px; font-weight: 550;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-signin:hover { border-color: var(--cyan-line); background: rgba(0, 229, 199, 0.06); }

.nav-cta { min-height: 36px; padding: 0 15px; font-size: 14px; }

/* ============================== HERO ============================== */

/* El hero debe caber entero en pantalla sin scroll en escritorio.
   `--nav-h` es la altura real de la barra sticky; el resto del alto lo ocupa
   el hero, y su contenido se escala con `vh` para no desbordar en pantallas
   bajas (portátiles de 768–800 px). */
:root { --nav-h: 60px; }

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    padding: clamp(20px, 3vh, 44px) var(--gutter);
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 18%;
    right: -8%;
    width: 58%;
    height: 62%;
    border-top: 1px solid rgba(0, 229, 199, 0.2);
    border-right: 1px solid rgba(0, 229, 199, 0.08);
    transform: skewY(-9deg) rotate(-2deg);
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 18%;
    right: 31%;
    width: 1px;
    height: 62%;
    background: rgba(0, 229, 199, 0.12);
    transform: rotate(24deg);
    transform-origin: top;
    pointer-events: none;
}
.hero-copy,
.hero-visual { position: relative; z-index: 1; }
}

/* Hero a pantalla completa sólo cuando hay alto real que llenar. Por debajo de
   640 px de viewport el contenido no cabe con dignidad, así que se deja fluir
   y scrollear en vez de comprimirlo hasta romperlo. */
@media (min-width: 1081px) and (min-height: 640px) {
    .hero {
        min-height: calc(100svh - var(--nav-h) - 84px);
        padding-block: clamp(10px, 1.2vh, 18px);
    }
}

/* Línea de estado de red: mono, con punto vivo. Dice "esto está operando". */
.hero-status {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--line-2); border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-2);
}
.hero-status .sep { color: var(--text-3); }
.hero-status b { color: var(--cyan); font-weight: 500; }

/* Las medidas del hero se atan también al ALTO de viewport (`vh`), no sólo al
   ancho: así el bloque completo cabe sin scroll en portátiles de 768–900 px. */
.hero h1 {
    margin-top: clamp(14px, 2.2vh, 24px);
    font-size: clamp(38px, min(6.2vw, 7.2vh), 76px);
    font-weight: 650;
    line-height: 1.0;
    letter-spacing: -0.04em;
    max-width: 15ch;
    text-wrap: balance;
}
/* Las dos palabras que nombran lo que el producto conecta. En cian, no en oro:
   el oro sale por completo del texto y queda sólo en el isotipo. */
.hero h1 .hl { color: var(--cyan); }

.hero-lead {
    max-width: 52ch;
    margin-top: clamp(12px, 1.9vh, 22px);
    color: var(--text-2);
    font-size: clamp(15px, min(1.3vw, 2vh), 18px);
    line-height: 1.6;
    text-wrap: pretty;
}

.hero-actions {
    display: flex; flex-wrap: wrap; gap: 11px;
    margin-top: clamp(16px, 2.8vh, 30px);
}
.hero-actions .btn { min-height: 44px; }

.hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 690px;
    margin-top: clamp(18px, 2.4vh, 28px);
    border-top: 1px solid var(--line);
}
.hero-proof span {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px 0 0;
}
.hero-proof span + span {
    padding-left: 16px;
    border-left: 1px solid var(--line);
}
.hero-proof b {
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
}
.hero-proof small {
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1.45;
}

/* Fila de divisas con delta real — no decorativa, viene del mercado */
.hero-rails {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin-top: clamp(16px, 3vh, 34px);
    padding-top: clamp(13px, 2.4vh, 26px);
    border-top: 1px solid var(--line);
}
.rail-chip {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 5px 9px;
    border: 1px solid var(--line); border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    font-family: var(--font-mono); font-size: 11.5px;
    transition: border-color var(--t-fast) var(--ease);
}
.rail-chip:hover { border-color: var(--cyan-line); }
.rail-chip .cur { color: var(--text-2); }
.rail-chip .val { color: var(--text); }
.rail-chip .dlt { font-size: 10px; }
.rail-chip .dlt.up   { color: var(--ok); }
.rail-chip .dlt.down { color: var(--err); }
.rail-chip .dlt.flat { color: var(--text-3); }

/* -------------------- Terminal de conversión (firma) -------------------- */

.hero-visual { justify-self: end; width: 100%; max-width: 470px; }
.hero-visual > .terminal { display: none; }

.hero-visual-orbit {
    position: absolute;
    inset: -12% -12% -12% -12%;
    border: 1px solid rgba(0, 229, 199, 0.08);
    border-radius: 50%;
    transform: rotate(-16deg);
    pointer-events: none;
}
.hero-visual-orbit::before,
.hero-visual-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(0, 229, 199, 0.1);
    border-radius: 50%;
}
.hero-visual-orbit::before { inset: 13% -5%; transform: rotate(34deg); }
.hero-visual-orbit::after { inset: -5% 17%; transform: rotate(-42deg); }
.orbit-node {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid var(--cyan);
    border-radius: 50%;
    background: var(--ink-900);
    box-shadow: 0 0 0 5px rgba(0, 229, 199, 0.08);
    animation: orbitPulse 4.8s var(--ease) infinite;
}
.node-origin { top: 9%; left: 29%; }
.node-review { top: 43%; right: 2%; animation-delay: 1.4s; }
.node-delivery { bottom: 8%; left: 20%; animation-delay: 2.8s; }
@keyframes orbitPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

.quote-teaser {
    display: grid; gap: 18px;
    position: relative;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--line-2); border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(0, 229, 199, 0.09), transparent 42%),
        var(--ink-700);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(0, 229, 199, 0.04);
}
.quote-teaser-head,
.quote-teaser-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.quote-teaser-signal {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--text-3); font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.quote-teaser-pair {
    display: flex; align-items: center; gap: 10px;
    color: var(--text); font-family: var(--font-mono); font-size: clamp(25px, 3vw, 34px); font-weight: 500;
    letter-spacing: 0.02em;
}
.quote-teaser-pair span:last-child { color: var(--cyan); }
.quote-teaser-pair svg { width: 18px; color: var(--text-3); }
.quote-teaser > p { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.quote-teaser-foot {
    padding-top: 13px; border-top: 1px solid var(--line);
    color: var(--text-3); font-family: var(--font-mono); font-size: 11px;
}
.quote-teaser-foot .mono { color: var(--text-2); }
.quote-open { justify-content: center; width: 100%; }
.quote-open svg { width: 16px; height: 16px; margin-left: 6px; }

.terminal {
    position: relative; z-index: 2;
    border: 1px solid var(--line-2); border-radius: var(--r-lg);
    background: var(--ink-700);
    overflow: hidden;
}

.term-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--ink-600);
}
.term-head .lbl { color: var(--text-2); }
.term-meta { display: inline-flex; align-items: center; gap: 8px; }
.term-tag {
    padding: 3px 8px; border-radius: 5px;
    background: var(--cyan-soft); color: var(--cyan);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.term-countdown { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

.term-body { padding: 14px 14px 12px; }

.term-leg { display: grid; gap: 6px; }
.term-leg + .term-leg { margin-top: 4px; }
.term-label-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.term-route {
    display: inline-flex; align-self: start; gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(3, 6, 11, 0.38);
}
.term-route.hidden { display: none; }
.term-route-btn {
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-3);
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.03em;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.term-route-btn:hover { color: var(--text-2); background: rgba(255, 255, 255, 0.045); }
.term-route-btn.is-active {
    border-color: rgba(0, 229, 199, 0.36);
    background: rgba(0, 229, 199, 0.11);
    color: var(--cyan);
    box-shadow: inset 0 0 0 1px rgba(0, 229, 199, 0.045);
}
.term-route-btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.term-row {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--ink-900);
    transition: border-color var(--t-fast) var(--ease);
}
.term-row:focus-within { border-color: var(--cyan-line); box-shadow: 0 0 0 3px var(--cyan-soft); }

/* Input de monto: mono, sin cromo de formulario */
.term-amount {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    padding: 0; border: 0; background: none;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 21px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--text);
}
.term-amount:focus { border: 0; box-shadow: none; }
.term-amount::-webkit-outer-spin-button,
.term-amount::-webkit-inner-spin-button { appearance: none; margin: 0; }
.term-amount[type="number"] { -moz-appearance: textfield; }

.term-out {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    padding: 0; border: 0; background: none;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 21px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--cyan);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term-out:focus { border: 0; box-shadow: none; }

/* Selector de moneda embebido en la fila */
.term-cur {
    flex: none; width: auto; min-height: 30px;
    padding: 0 26px 0 9px;
    border-radius: 6px;
    border-color: var(--line-2);
    background-color: var(--ink-600);
    background-position: right 8px center;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
}

/* Botón de intercambio, centrado sobre el divisor */
.term-swap {
    position: relative;
    display: grid; place-items: center;
    width: 28px; height: 28px; margin: -9px auto;
    border: 1px solid var(--line-2); border-radius: 50%;
    background: var(--ink-600); color: var(--text-2);
    z-index: 3;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t) var(--ease);
}
.term-swap:hover { color: var(--cyan); border-color: var(--cyan-line); }
.term-swap:disabled { cursor: not-allowed; opacity: 0.35; }
.term-swap:disabled:hover { color: var(--text-2); border-color: var(--line-2); }
.term-swap.is-turning { transform: rotate(180deg); }
.term-swap svg { width: 13px; height: 13px; }

/* Sparkline: línea fina, área sutil, punto vivo en el extremo */
.term-chart { margin: 12px 0 2px; }
.term-chart-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.term-chart-cap .lbl:last-child { color: var(--cyan); letter-spacing: 0.1em; }
.term-chart svg { width: 100%; height: 46px; overflow: visible; }
.term-chart .spark-line { stroke: var(--cyan); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.term-chart .spark-active { stroke: #ecfffc; stroke-width: 2.4; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(0, 229, 199, 0.6)); }
.term-chart .spark-area { fill: url(#sparkFill); }
.term-chart .spark-dot { fill: var(--cyan); }
.term-chart .spark-dot-halo { fill: var(--cyan); opacity: 0.22; animation: haloPulse 2.6s var(--ease) infinite; }

@keyframes haloPulse {
    0%, 100% { r: 3; opacity: 0.22; }
    50%      { r: 7; opacity: 0; }
}

/* Desglose técnico: tabla densa, valores alineados a la derecha */
.term-breakdown {
    display: grid; gap: 1px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line);
}
.term-breakdown div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 3px 0;
    font-family: var(--font-mono); font-size: 11.5px;
}
.term-breakdown dt, .term-breakdown .k { color: var(--text-3); }
.term-breakdown dd, .term-breakdown .v { margin: 0; color: var(--text-2); }
.term-breakdown .is-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.term-breakdown .is-total .k { color: var(--text-2); }
.term-breakdown .is-total .v { color: var(--cyan); font-weight: 500; font-size: 13px; }
.term-route-note,
.term-paypal-note {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-left: 2px solid var(--cyan);
    background: rgba(0, 229, 199, 0.055);
    color: var(--text-2);
    font-size: 11px; line-height: 1.5;
}
.term-paypal-note { border-left-color: var(--warn); background: rgba(240, 190, 86, 0.055); }

.term-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
    background: var(--ink-600);
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
}
.term-foot .st { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }
.term-foot .term-paypal-note {
    flex: 1; min-width: 0; margin: 0; padding: 0 0 0 12px;
    border: 0; border-left: 1px solid rgba(240, 190, 86, 0.48);
    background: none; color: var(--text-2); font-size: 10px; line-height: 1.35;
}

/* ============================== SECCIONES ============================== */

.band { padding: clamp(56px, 7vw, 104px) var(--gutter); }
.band + .band { padding-top: 0; }
.band:has(+ .band-light) { padding-bottom: clamp(42px, 5vw, 72px); }
.band + .band-light {
    margin-top: 0;
    padding-top: clamp(52px, 6vw, 84px);
}

.band-light {
    position: relative;
    overflow: hidden;
    margin-top: clamp(44px, 5vw, 72px);
    padding-block: clamp(52px, 6vw, 84px);
    color: #101722;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 58%, #edf4f8 100%);
    border-block: 1px solid rgba(0, 127, 117, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(0, 127, 117, 0.12);
}

.band-light::before {
    content: none;
}

.band-light::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 127, 117, 0.44), transparent);
    opacity: 0.72;
}

.band-light + .band {
    padding-top: clamp(56px, 7vw, 104px);
}

.band-light .lbl,
.band-light dt {
    color: #007f75;
}

.band-light .metrics {
    position: relative;
    z-index: 1;
    border-block-color: rgba(27, 42, 57, 0.24);
}

.band-light .metrics > div + div {
    border-left-color: rgba(27, 42, 57, 0.18);
}

.band-light .metrics .val {
    color: #07111d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66);
}

.band-light .metrics .val em,
.band-light .metrics p {
    color: #40576a;
}

.band-light .metrics .val .to {
    color: #009b8f;
}

.band-light .sec-head h2,
.band-light .rows p,
.band-light .rv-panel p,
.band-light .rv-who {
    color: #07111d;
}

.band-light .sec-head .sub,
.band-light .rv-org,
.band-light .rv-tab-org,
.band-light .quotes-note {
    color: #40576a;
}

.band-light .rows,
.band-light .rows article,
.band-light .reviews,
.band-light .rv-panel footer,
.band-light .rv-list,
.band-light .rv-tab {
    border-color: rgba(27, 42, 57, 0.18);
}

.band-light .rows .row-tag,
.band-light .rv-pair,
.band-light .rv-panel p::before {
    color: #007f75;
}

.band-light .rv-org::before {
    color: rgba(64, 87, 106, 0.74);
}

.band-light .rv-tab:hover {
    background: rgba(0, 127, 117, 0.04);
}

.band-light .rv-tab.is-active {
    background: rgba(0, 127, 117, 0.07);
}

.band-light .rv-tab-who {
    color: #27394a;
}

.band-light .rv-tab.is-active .rv-tab-who {
    color: #07111d;
}

.insight-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 78px);
    align-items: center;
}

.insight-copy { min-width: 0; }
.band-light .insight-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
}
.band-light .insight-visual { order: 2; }
.band-light .insight-copy { order: 1; }

.insight-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(280px, 30vw, 380px);
    border-block: 1px solid var(--line);
}

.insight-visual::before,
.insight-visual::after {
    content: "";
    position: absolute;
    inset-block: 18%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}

.insight-visual::before { left: 0; }
.insight-visual::after { right: 0; }

.band-light .insight-visual {
    border-block-color: rgba(27, 42, 57, 0.18);
}

.band-light .insight-visual::before,
.band-light .insight-visual::after {
    background: linear-gradient(180deg, transparent, rgba(27, 42, 57, 0.18), transparent);
}

.ops-diagram {
    width: min(100%, 360px);
    aspect-ratio: 1;
    overflow: visible;
}

.ops-diagram path,
.ops-diagram circle {
    vector-effect: non-scaling-stroke;
}

.diagram-frame,
.diagram-grid,
.diagram-accent,
.flow-route,
.control-link,
.flow-node path,
.control-node path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.diagram-frame {
    stroke: rgba(255, 255, 255, 0.13);
    stroke-width: 1;
}

.diagram-grid {
    stroke: rgba(255, 255, 255, 0.055);
    stroke-width: 1;
}

.diagram-accent {
    stroke: var(--cyan);
    stroke-width: 1.4;
    opacity: 0.58;
}

.flow-route.base,
.control-link.base {
    stroke: rgba(0, 229, 199, 0.16);
    stroke-width: 1.3;
}

.flow-route.live,
.control-link.live {
    stroke: var(--cyan);
    stroke-width: 1.7;
    stroke-dasharray: 38 210;
    animation: diagramTrace 5.6s linear infinite;
}

.control-link.live.b { animation-delay: -1.8s; }
.control-link.live.c { animation-delay: -3.4s; }

.flow-node circle,
.control-node circle {
    fill: var(--ink-800);
    stroke: rgba(0, 229, 199, 0.42);
    stroke-width: 1.2;
    animation: nodeSignal 4.8s var(--ease) infinite;
}

.flow-node path,
.control-node path {
    stroke: var(--cyan);
    stroke-width: 1.4;
    opacity: 0.9;
}

.flow-node.n2 circle,
.control-node.d2 circle { animation-delay: -1.2s; }
.flow-node.n3 circle,
.control-node.center circle { animation-delay: -2.4s; }
.flow-node.n4 circle,
.control-node.right circle { animation-delay: -3.6s; }

.control-node.center circle {
    stroke-width: 1.4;
}

.band-light .diagram-frame {
    stroke: rgba(27, 42, 57, 0.2);
}

.band-light .diagram-grid {
    stroke: rgba(27, 42, 57, 0.085);
}

.band-light .diagram-accent,
.band-light .flow-node path,
.band-light .control-node path {
    stroke: #007f75;
}

.band-light .flow-route.base,
.band-light .control-link.base {
    stroke: rgba(0, 127, 117, 0.18);
}

.band-light .flow-route.live,
.band-light .control-link.live {
    stroke: #009b8f;
}

.band-light .flow-node circle,
.band-light .control-node circle {
    fill: #f8fbfd;
    stroke: rgba(0, 127, 117, 0.38);
}

@keyframes diagramTrace {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -248; }
}

@keyframes nodeSignal {
    0%, 100% { stroke-opacity: 0.42; }
    45%, 55% { stroke-opacity: 1; }
}

.sec-head { max-width: 62ch; }
.sec-head h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.035em;
}
.sec-head .sub { margin-top: 14px; color: var(--text-2); font-size: 17px; }

/* Indicadores — ficha técnica: etiqueta mono, cifra grande con su unidad, y
   los rangos expresados como recorrido (de → a) en vez de un valor suelto con
   un sufijo colgando. Separados por reglas finas, sin tarjetas. */
.metrics {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0; border-block: 1px solid var(--line);
}
.metrics > div { padding: 28px 32px 28px 0; }
.metrics > div + div { padding-left: 32px; border-left: 1px solid var(--line); }

.metrics dt { margin-bottom: 14px; }

.metrics .val {
    display: flex; align-items: baseline; gap: 2px;
    margin: 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(26px, 2.9vw, 36px); font-weight: 500;
    letter-spacing: -0.03em; color: var(--text);
    white-space: nowrap;
}
/* Unidad: mismo peso óptico, subordinada en tamaño y color */
.metrics .val em {
    font-style: normal; font-size: 0.46em; color: var(--text-3);
    letter-spacing: 0; margin-right: 2px;
}
/* Flecha de recorrido: es estructura, no dato */
.metrics .val .to {
    margin: 0 8px; color: var(--cyan); font-size: 0.5em;
    position: relative; top: -0.12em;
}
.metrics p { margin-top: 12px; color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 34ch; }

/* Pipeline de 5 pasos — nodos conectados por una línea */
.pipeline { margin-top: 44px; }
.pipe-track {
    position: relative;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
    list-style: none; margin: 0; padding: 0;
}
/* Riel base + riel de progreso animado */
.pipe-track::before,
.pipe-track::after {
    content: ""; position: absolute; top: 7px; height: 1px;
    left: 10%; right: 10%;
}
.pipe-track::before { background: var(--line-2); }
.pipe-track::after {
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    transform-origin: left;
    animation: pipeRun 5.5s var(--ease) infinite;
}
@keyframes pipeRun {
    0%   { transform: scaleX(0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}

.pipe-track li { position: relative; padding-top: 30px; }
.pipe-track li::before {
    content: ""; position: absolute; top: 3px; left: 0;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--ink-800); border: 1px solid var(--line-2);
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.pipe-track li:hover::before { border-color: var(--cyan); background: var(--cyan); }
.pipe-track strong { display: block; margin-top: 7px; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em; }
.pipe-track p { margin-top: 6px; color: var(--text-3); font-size: 13.5px; line-height: 1.5; }

/* Capacidades — columnas separadas por reglas finas, sin contenedor */
.caps {
    display: grid; grid-template-columns: repeat(4, 1fr);
    list-style: none; margin: 46px 0 0; padding: 0;
    border-top: 1px solid var(--line);
}
.caps li { padding: 26px 26px 0 0; }
.caps li + li { padding-left: 26px; border-left: 1px solid var(--line); }
.cap-ico { display: block; margin-bottom: 15px; color: var(--cyan); }
.cap-ico svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.caps h3 { font-size: 15.5px; letter-spacing: -0.02em; }
.caps p { margin-top: 9px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }

/* Filas de detalle */
.rows { margin-top: 40px; border-top: 1px solid var(--line); }
.rows article {
    display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.rows .row-tag { color: var(--cyan); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; }
.rows p { color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.rows-differentials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(22px, 4vw, 48px);
}
.rows-differentials article {
    display: block;
    padding: 18px 0 20px;
}
.rows-differentials p { margin-top: 8px; }

/* Reseñas — conmutador: una cita en grande y la lista de clientes al lado.
   Muestra a todos los clientes de un vistazo, a diferencia de un carrusel. */
.reviews {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 0;
    margin-top: 44px;
    border-top: 1px solid var(--line);
}

.rv-stage { padding: 38px 44px 38px 0; display: grid; }
/* Sin JS se apilan las cuatro; con JS sólo se ve la activa. */
.js .rv-panel { grid-area: 1 / 1; }
.js .rv-panel:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }

.rv-panel {
    margin: 0;
    opacity: 1;
    transition: opacity var(--t) var(--ease);
}
.js .rv-panel + .rv-panel { margin-top: 0; }
.rv-panel:not(:last-child) { margin-bottom: 26px; }
.js .rv-panel:not(:last-child) { margin-bottom: 0; }
.rv-panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 8px; }

/* La cita en escala editorial: es el contenido, no un pie de página */
.rv-panel p {
    position: relative;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(19px, 2vw, 26px);
    font-weight: 500; line-height: 1.4; letter-spacing: -0.02em;
    text-wrap: pretty;
}
.rv-panel p::before {
    content: "\201C";
    position: absolute; left: -0.5em; top: -0.02em;
    color: var(--cyan); font-size: 1.1em; line-height: 1;
}
.rv-panel footer {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    margin-top: 26px; padding-top: 16px;
    border-top: 1px solid var(--line);
}
.rv-who { color: var(--text); font-size: 13.5px; font-weight: 550; }
.rv-org { color: var(--text-3); font-size: 12.5px; }
.rv-org::before { content: "·"; margin-right: 8px; color: var(--text-3); }
.rv-pair { margin-left: auto; color: var(--cyan); font-size: 11px; letter-spacing: 0.04em; }

/* Lista de clientes: cada uno seleccionable, el activo con riel cian */
.rv-list { display: grid; align-content: start; border-left: 1px solid var(--line); }
.rv-tab {
    position: relative;
    display: grid; gap: 3px;
    padding: 18px 20px; text-align: left;
    border-bottom: 1px solid var(--line);
    transition: background var(--t-fast) var(--ease);
}
.rv-tab:last-child { border-bottom: 0; }
.rv-tab::before {
    content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
    background: var(--cyan); opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}
.rv-tab:hover { background: rgba(255, 255, 255, 0.025); }
.rv-tab.is-active { background: rgba(0, 229, 199, 0.05); }
.rv-tab.is-active::before { opacity: 1; }
.rv-tab-who { color: var(--text-2); font-size: 13.5px; font-weight: 550; transition: color var(--t-fast) var(--ease); }
.rv-tab.is-active .rv-tab-who { color: var(--text); }
.rv-tab-org { color: var(--text-3); font-size: 12px; line-height: 1.4; }

.quotes-note { margin-top: 20px; color: var(--text-3); font-size: 12px; }

/* CTA final */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.035em; }
.cta-band > p { margin: 14px auto 0; max-width: 52ch; color: var(--text-2); font-size: 17px; }
.cta-band .hero-actions { justify-content: center; }

/* Footer */
.landing-footer {
    display: grid; gap: 10px; justify-items: center; text-align: center;
    padding: 44px var(--gutter) 56px;
    border-top: 1px solid var(--line);
    color: var(--text-3); font-size: 13.5px;
}
/* El PNG del logo es 1000x1000 pero la marca sólo ocupa 824x210 centrada:
   el 79 % del alto es transparencia. Con `contain` la marca se renderizaba a
   ~56 px por más que se agrandara la caja. Se recorta al contenido real:
   la caja toma el aspecto de la marca (824/210) y el fondo se escala al
   1000/824 = 121.4 % del ancho, centrado en el 51 % del alto. */
.footer-logo {
    display: block;
    width: clamp(124px, 11vw, 168px);
    aspect-ratio: 824 / 300;
    margin-bottom: 4px;
    background: url("../../Atlantis-Logo-2026-Blanco.png") no-repeat;
    background-size: 121.4% auto;
    background-position: 50% 51.35%;
    opacity: 0.88;
}
.footer-legal {
    max-width: 86ch;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.65;
}

/* Reveal on scroll — el estado oculto SÓLO se aplica si hay JS confirmado
   (clase `js` puesta inline en <head>). Sin JS, el contenido se ve tal cual en
   vez de quedar en opacity:0 para siempre. */
.js [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Las bandas definen fondos de sección. Revelar la banda completa dejaba su
   fondo transparente hasta el primer scroll y aparentaba cambiar la altura
   del Hero. Conservamos el fondo desde el primer render y animamos su contenido. */
.js section.band[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}
.js section.band[data-reveal] > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js section.band[data-reveal].is-revealed > * {
    opacity: 1;
    transform: none;
}

/* ============================== MODAL ============================== */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(4, 6, 10, 0.72);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-card {
    position: relative; z-index: 1;
    width: min(430px, 100%); padding: 26px;
    border: 1px solid var(--line-2); border-radius: var(--r-lg);
    background: var(--ink-700);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    animation: modalIn 260ms var(--ease);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.modal-close {
    position: absolute; top: 14px; right: 14px;
    display: grid; place-items: center; width: 30px; height: 30px;
    border: 1px solid var(--line); border-radius: 7px;
    color: var(--text-3);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.modal-close:hover { color: var(--text); border-color: var(--line-2); }
.modal-close svg { width: 15px; height: 15px; }
.modal-head { display: flex; align-items: center; gap: 10px; }
.tag-dev {
    padding: 3px 7px; border-radius: 5px;
    border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
    color: var(--text-3); font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
}
.modal-card h3 { margin-top: 12px; font-size: 22px; }
.modal-copy { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.login-form { display: grid; gap: 14px; margin-top: 20px; }
.login-error {
    padding: 9px 11px; border-radius: var(--r-sm);
    border: 1px solid rgba(255, 93, 115, 0.3); background: rgba(255, 93, 115, 0.08);
    color: #ffa9b5; font-size: 13px;
}
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }

/* Workspace de cotización: una superficie de trabajo, no un modal genérico. */
.quote-modal {
    position: fixed; inset: 0; z-index: 180;
    display: grid; place-items: center;
    padding: clamp(16px, 4vh, 44px) clamp(16px, 4vw, 56px);
}
.quote-modal[hidden] { display: none; }
.quote-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(4, 6, 10, 0.78);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.quote-workspace {
    position: relative; z-index: 1;
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    width: min(980px, 100%); height: auto; max-height: calc(100svh - 48px);
    overflow: hidden;
    border: 1px solid var(--line-2); border-radius: 12px;
    background: var(--ink-700);
    box-shadow: 0 44px 140px rgba(0, 0, 0, 0.7);
    animation: quoteWorkspaceIn 260ms var(--ease);
}
@keyframes quoteWorkspaceIn {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to { opacity: 1; transform: none; }
}
.quote-workspace-head {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(0, 229, 199, 0.06), transparent 42%);
}
.quote-workspace-head h2 { margin-top: 3px; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.035em; }
.quote-eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.quote-eyebrow img { width: 14px; height: 14px; object-fit: contain; }
.quote-eyebrow span { color: var(--text-3); }
.quote-workspace-actions { display: flex; align-items: center; gap: 16px; }
.quote-market-status {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--text-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em;
}
.quote-market-status small { color: var(--text-3); font: inherit; letter-spacing: 0; }
.quote-workspace-close {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px;
    border: 1px solid var(--line-2); border-radius: 7px;
    color: var(--text-3); background: rgba(255, 255, 255, 0.025);
}
.quote-workspace-close:hover { color: var(--text); border-color: var(--cyan-line); }
.quote-workspace-close svg { width: 16px; height: 16px; }
.quote-workspace-body {
    display: grid; grid-template-columns: minmax(0, 1fr);
    min-height: 0; overflow: hidden;
}
.quote-workspace-main {
    display: block;
    min-width: 0; overflow: hidden;
    padding: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 48px 48px;
}
.quote-workspace-main .terminal {
    display: block;
    width: 100%; height: auto;
    min-height: 0; overflow: hidden;
    border: 0; border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.quote-workspace-main .term-head { display: none; }
.quote-workspace-main .term-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    align-content: start;
    column-gap: 14px; row-gap: 14px;
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 24px 30px 16px;
    min-height: 0;
}
.quote-workspace-main .term-body > .term-leg:first-child { grid-column: 1; }
.quote-workspace-main .term-body > .term-leg:nth-of-type(2) { grid-column: 3; }
.quote-workspace-main .term-leg {
    display: grid; grid-template-rows: 16px 78px auto; align-content: start;
    min-width: 0;
}
.quote-workspace-main .term-leg + .term-leg { margin-top: 0; }
.quote-workspace-main .term-label-row { min-height: 16px; }
.quote-workspace-main .term-row {
    height: 78px; min-height: 78px;
    padding: 12px 14px;
    border-color: rgba(149, 166, 191, 0.2);
    background: rgba(3, 6, 11, 0.78);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.quote-workspace-main .term-row:hover { border-color: rgba(0, 229, 199, 0.3); }
.quote-workspace-main .term-row:focus-within { transform: translateY(-1px); }
.quote-workspace-main .term-amount,
.quote-workspace-main .term-out { font-size: clamp(20px, 2.6vw, 26px); }
.quote-workspace-main .term-out {
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 600;
    letter-spacing: -0.045em;
}
.quote-workspace-main .term-out.is-refreshing { animation: quoteValueIn 380ms var(--ease); }
@keyframes quoteValueIn {
    0% { color: var(--text); transform: translateY(2px); opacity: 0.72; }
    100% { color: var(--cyan); transform: none; opacity: 1; }
}
.quote-workspace-main .term-cur { min-height: 36px; padding-inline: 11px 31px; }
.quote-workspace-main .term-route { margin-top: 1px; }
.quote-workspace-main .term-route-btn { min-height: 29px; padding-inline: 10px; }
.quote-workspace-main .term-swap {
    grid-column: 2; grid-row: 1;
    align-self: center;
    width: 34px; height: 34px;
    margin: 23px auto 0;
    border-color: rgba(0, 229, 199, 0.24);
    box-shadow: 0 0 0 5px rgba(0, 229, 199, 0.035);
}
.quote-workspace-main .term-swap:hover { box-shadow: 0 0 0 7px rgba(0, 229, 199, 0.08); transform: rotate(180deg); }
.quote-workspace-main .term-result-caption { display: none; }
.quote-workspace-main .term-route-note,
.quote-workspace-main .term-chart,
.quote-workspace-main .term-breakdown,
.quote-workspace-main .term-paypal-note { grid-column: 1 / -1; }
.quote-workspace-main .term-route-note,
.quote-workspace-main .term-paypal-note {
    margin: 0;
    padding: 9px 11px;
    font-size: 11px;
    animation: quoteNoticeIn 220ms var(--ease);
}
.quote-workspace-main .term-route-note {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-top: 0;
    color: #a8c9c8;
}
.quote-workspace.has-paypal .term-chart,
.quote-workspace-main .term-chart { display: none; }
.quote-workspace.is-business #heroTo {
    appearance: none;
    min-width: 76px;
    padding-right: 11px;
    background-image: none;
    color: var(--cyan);
    cursor: default;
    opacity: 1;
}
.quote-workspace.is-business #heroTo:disabled { color: var(--cyan); }
.quote-workspace-main .term-chart {
    margin: 0;
    padding: 12px 14px 9px;
    border-block: 1px solid var(--line);
    background: rgba(3, 6, 11, 0.16);
}
.quote-workspace-main .term-chart svg { height: 38px; }
.quote-workspace-main .term-chart-cap { margin-bottom: 5px; }
.term-chart-summary {
    margin: 4px 0 0;
    color: var(--text-3);
    font-size: 10.5px;
    line-height: 1.4;
}
.term-band-pill {
    display: inline-flex; align-items: center;
    padding: 3px 7px;
    border: 1px solid rgba(0, 229, 199, 0.28); border-radius: 999px;
    color: var(--cyan); background: rgba(0, 229, 199, 0.07);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em;
}
.quote-workspace-main .term-breakdown {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    margin-top: 0; padding-top: 10px;
}
.quote-workspace.has-paypal .term-breakdown {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
}
.quote-workspace-main .term-breakdown div {
    padding: 5px 0;
    font-family: var(--font-sans);
    font-size: 12px;
}
.quote-workspace-main .term-breakdown .v { font-family: var(--font-mono); }
.quote-workspace-main .term-breakdown .is-total {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-top: 6px;
    padding: 11px 12px;
    border-top: 1px solid rgba(0, 229, 199, 0.28);
    border-left: 2px solid var(--cyan);
    background: rgba(0, 229, 199, 0.055);
}
.quote-workspace-main .term-breakdown .is-total .k { color: var(--text); font-weight: 600; }
.quote-workspace-main .term-breakdown .is-total .v { font-size: 15px; }
.quote-workspace-main .term-foot {
    min-height: 36px;
    padding: 9px max(30px, calc((100% - 860px) / 2 + 30px));
    border-top-color: rgba(0, 229, 199, 0.18);
}
.quote-workspace-main .term-foot .term-paypal-note {
    grid-column: auto;
    padding: 0 0 0 12px;
    border-left: 1px solid rgba(240, 190, 86, 0.48);
    background: none;
    white-space: nowrap;
    animation: quoteNoticeIn 220ms var(--ease);
}
@keyframes quoteNoticeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .quote-workspace-main .term-leg,
    .quote-workspace-main .term-chart,
    .quote-workspace-main .term-breakdown {
        animation: quoteContentIn 340ms var(--ease) both;
    }
    .quote-workspace-main .term-leg:nth-of-type(2) { animation-delay: 45ms; }
    .quote-workspace-main .term-chart { animation-delay: 80ms; }
    .quote-workspace-main .term-breakdown { animation-delay: 120ms; }
}
@keyframes quoteContentIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
    .quote-modal { padding: 0; overflow: hidden; }
    .quote-workspace {
        width: 100%; height: 100svh; height: 100dvh; max-height: 100svh; max-height: 100dvh;
        grid-template-rows: auto auto minmax(0, 1fr);
        border-radius: 0; border-inline: 0;
    }
    .quote-workspace-body {
        grid-template-columns: 1fr;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .quote-workspace-head { padding: 15px 20px; }
    .quote-workspace-actions { gap: 10px; }
    .quote-market-status { font-size: 9px; }
    .quote-market-status small { display: none; }
    .quote-workspace-main { display: block; padding: 0; overflow: visible; }
    .quote-workspace-main .terminal { width: 100%; }
    .quote-workspace-main .term-body {
        display: grid; grid-template-columns: 1fr;
        row-gap: 9px; padding: 15px 16px 12px;
    }
    .quote-workspace-main .term-body > .term-leg:first-child,
    .quote-workspace-main .term-body > .term-leg:nth-of-type(2),
    .quote-workspace-main .term-swap,
    .quote-workspace-main .term-route-note,
    .quote-workspace-main .term-chart,
    .quote-workspace-main .term-breakdown,
    .quote-workspace-main .term-paypal-note { grid-column: 1; }
    .quote-workspace-main .term-swap { grid-row: auto; margin: -7px auto; }
    .quote-workspace-main .term-row { min-height: 54px; padding: 9px 11px; }
    .quote-workspace-main .term-chart { padding: 8px 10px 6px; }
    .quote-workspace-main .term-chart svg { height: 30px; }
    .quote-workspace-main .term-breakdown { padding-top: 7px; }
    .quote-workspace-main .term-foot { padding: 8px 16px; }
    .quote-workspace-main .term-foot .term-paypal-note { padding-left: 10px; white-space: normal; }
    .quote-workspace-main .term-breakdown { grid-template-columns: 1fr; }
    .quote-workspace-main .term-breakdown .is-total { grid-column: 1; }
}

/* ============================== V2 QUOTE FLOW ============================== */

.quote-workspace {
    width: min(1120px, 100%);
    max-height: min(780px, calc(100svh - 32px));
}
.quote-workspace-head { background: rgba(20, 22, 36, 0.86); }
.quote-steps {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 28px;
    border-bottom: 1px solid var(--line);
    background: var(--ink-800);
}
.quote-steps::after {
    content: ""; position: absolute; inset: auto 0 0;
    height: 1px; width: 84px; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    pointer-events: none;
}
.quote-workspace.is-transitioning .quote-steps::after { animation: none; }
@keyframes quoteStepSweep {
    0% { opacity: 0; transform: translateX(-100%); }
    20% { opacity: 0.8; }
    100% { opacity: 0; transform: translateX(calc(100vw + 84px)); }
}
.quote-step {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 0; border: 0; background: none;
    color: var(--text-3); font-family: var(--font-body); font-size: 11px; font-weight: 600;
    transition: color var(--t-fast) var(--ease);
}
.quote-step span {
    display: grid; place-items: center;
    width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 50%;
    color: inherit; font-family: var(--font-mono); font-size: 9px;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.quote-step.is-active { color: var(--text); }
.quote-step.is-active span { border-color: var(--cyan); background: var(--cyan); color: #fff; }
.quote-step.is-complete { color: var(--cyan); }
.quote-step.is-complete span { border-color: var(--cyan-line); color: var(--cyan); }
.quote-step:not(:disabled):not(.is-active) { cursor: pointer; }
.quote-step:not(:disabled):not(.is-active):hover { color: var(--text); }
.quote-step:not(:disabled):not(.is-active):hover span {
    border-color: var(--cyan);
    background: rgba(0, 229, 199, 0.1);
    box-shadow: 0 0 0 3px var(--cyan-soft);
}
.quote-step:disabled { cursor: default; opacity: 0.62; }
.quote-step-line { flex: 1; max-width: 90px; height: 1px; background: var(--line-2); }
.quote-step-panel { display: none; min-width: 0; padding: 34px max(28px, calc((100% - 860px) / 2)); }
.quote-step-panel.is-active {
    display: block;
    animation: none;
}
@keyframes quotePanelIn {
    from { opacity: 0; transform: translateY(8px); filter: saturate(0.82); }
    to { opacity: 1; transform: none; filter: none; }
}
.quote-step-intro { max-width: 640px; margin: 0 auto 24px; }
.quote-step-intro h3 { margin-top: 6px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.04em; }
.quote-step-intro p:not(.lbl) { margin-top: 10px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.quote-step-panel[data-quote-step="2"] { padding-top: 28px; padding-bottom: 22px; }
.quote-step-panel[data-quote-step="2"] .term-body { padding-top: 10px; padding-bottom: 8px; }
.quote-step-panel[data-quote-step="2"] .term-chart { padding-block: 7px 5px; }
.quote-step-panel[data-quote-step="2"] .term-chart svg { height: 24px; }
.quote-step-panel[data-quote-step="2"] .term-chart-summary { display: none; }
.quote-step-panel[data-quote-step="2"] .term-foot { padding-block: 7px; }
.quote-step-panel[data-quote-step="2"] .quote-route-actions { margin-top: 10px; padding-top: 10px; }
.quote-step-intro-compact { margin-bottom: 8px; }
.quote-step-intro-compact h3 { font-size: 20px; }
.quote-step-intro-compact p:not(.lbl) { font-size: 12px; }
.quote-special-fee {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
    width: min(860px, 100%); margin: 0 auto 8px; padding: 8px 12px;
    border: 1px solid rgba(0, 229, 199, 0.22); border-left: 3px solid var(--cyan);
    background: rgba(0, 229, 199, 0.06);
    transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.quote-special-fee:hover, .quote-special-fee.is-special-active {
    background: rgba(0, 229, 199, 0.095);
    box-shadow: 0 0 0 3px rgba(0, 229, 199, 0.045);
}
.quote-special-fee strong, .quote-special-fee span { display: block; }
.quote-special-fee strong { color: var(--text); font-family: var(--font-display); font-size: 12px; }
.quote-special-fee span, .quote-special-fee small { color: var(--text-3); font-size: 10px; }
.quote-special-fee .btn { min-height: 34px; padding: 7px 10px; font-size: 10px; white-space: nowrap; }
.quote-special-fee-input {
    display: grid; grid-template-columns: auto 56px; align-items: center; gap: 0 8px;
    color: var(--text-2); font-family: var(--font-mono); font-size: 9px;
}
.quote-special-fee-input input {
    width: 56px; min-height: 32px; padding: 5px 7px;
    border: 1px solid var(--cyan-line); border-radius: 5px;
    background: var(--ink-900); color: var(--cyan); font: inherit; text-align: right;
}
.quote-special-fee-input small { display: none; }
.quote-workspace.is-business .quote-step-panel[data-quote-step="2"] .term-chart { display: none; }
.quote-operation-list { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.quote-operation {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    width: 100%; padding: 16px 18px;
    border: 1px solid var(--line-2); border-radius: 10px;
    background: var(--ink-600); color: var(--text); text-align: left;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.quote-operation:hover { border-color: var(--cyan-line); background: #1b1f31; transform: translateY(-1px); }
.quote-operation.is-selected { border-color: var(--cyan); background: rgba(0, 229, 199, 0.07); box-shadow: 0 0 0 3px var(--cyan-soft); }
.quote-operation-icon {
    display: grid; place-items: center; width: 28px; height: 28px;
    color: var(--cyan); transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.quote-operation-icon svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor;
    stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.quote-operation:hover .quote-operation-icon,
.quote-operation.is-selected .quote-operation-icon { transform: translateY(-1px); filter: drop-shadow(0 0 5px rgba(0, 229, 199, 0.32)); }
.quote-operation strong, .quote-operation small { display: block; }
.quote-operation strong { font-family: var(--font-display); font-size: 15px; }
.quote-operation small { margin-top: 4px; color: var(--text-2); font-size: 11.5px; line-height: 1.45; }
.quote-operation-state { color: var(--cyan); font-family: var(--font-mono); font-size: 9px; white-space: nowrap; }
.quote-step-note, .quote-review-disclaimer {
    max-width: 760px; margin: 18px auto 0; color: var(--text-3); font-size: 11px; line-height: 1.55;
}
.quote-step-note .dot { margin-right: 6px; }
.quote-step-actions { display: flex; justify-content: flex-end; gap: 10px; max-width: 760px; margin: 24px auto 0; }
.quote-step-actions-split { justify-content: space-between; }
.quote-step-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.quote-step-actions-back { margin-top: 6px; }
.quote-route-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: min(860px, 100%); margin: 12px auto 0; padding-top: 12px;
    border-top: 1px solid var(--line);
}
.quote-route-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.quote-inline-action {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: none; color: var(--cyan);
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.quote-inline-action:hover { color: #fff; transform: translateX(2px); }
.quote-review-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px;
    max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line);
}
.quote-review-grid div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.quote-review-grid dt { color: var(--text-3); font-size: 11px; }
.quote-review-grid dd { margin: 0; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; text-align: right; }
.quote-status-badge { color: #9de3bd; font-family: var(--font-body); font-size: 10px; }
.quote-status-badge .dot { margin-right: 5px; }
.quote-result-panel { text-align: center; }
.quote-result-mark { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 18px; border: 1px solid rgba(73, 201, 138, 0.45); border-radius: 50%; color: var(--ok); background: rgba(73, 201, 138, 0.08); font-size: 20px; animation: none; }
@keyframes resultMarkIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.quote-result-panel h3 { margin-top: 7px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.04em; }
.quote-result-panel > p:not(.lbl):not(.quote-review-disclaimer) { max-width: 510px; margin: 10px auto 22px; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.quote-result-total { display: grid; gap: 6px; max-width: 560px; margin: 0 auto; padding: 20px 22px; border: 1px solid var(--cyan-line); border-left: 3px solid var(--cyan); background: rgba(0, 229, 199, 0.055); text-align: left; }
.quote-result-total span { color: var(--text-2); font-size: 11px; }
.quote-result-total strong { color: #fff; font-family: var(--font-mono); font-size: clamp(24px, 4vw, 36px); letter-spacing: -0.04em; }
.quote-result-meta { display: flex; justify-content: space-between; max-width: 560px; margin: 10px auto 0; color: var(--text-3); font-family: var(--font-mono); font-size: 10px; }
.quote-result-panel .quote-review-disclaimer { max-width: 560px; text-align: left; }
.quote-result-panel .quote-step-actions { max-width: 760px; }
.quote-result-panel .quote-step-actions .btn { justify-content: center; }
.quote-result-panel #quoteDownloadPdf svg { width: 15px; height: 15px; }

@media (max-width: 760px) {
    .quote-workspace { max-height: 100svh; }
    .quote-workspace-head { gap: 8px; }
    .quote-eyebrow span { display: none; }
    .quote-market-status { max-width: 28px; overflow: hidden; font-size: 0; }
    .quote-market-status .dot { flex: none; }
    .quote-steps { padding: 9px 16px; gap: 5px; }
    .quote-step { font-size: 0; }
    .quote-step span { width: 24px; height: 24px; font-size: 9px; }
    .quote-step-line { max-width: none; }
    .quote-step-panel { padding: 20px 16px 14px; }
    .quote-step-intro-compact { margin-bottom: 4px; }
    .quote-step-intro-compact h3 { font-size: 22px; }
    .quote-step-intro-compact p:not(.lbl) { margin-top: 5px; }
    .quote-step-intro h3 { font-size: 25px; }
    .quote-special-fee { grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; }
    .quote-special-fee-input { grid-column: 1 / -1; grid-template-columns: 1fr 62px; }
    .quote-special-fee-input input { width: 62px; }
    .quote-operation { grid-template-columns: 28px minmax(0, 1fr); padding: 14px; }
    .quote-operation-state { grid-column: 2; margin-top: -8px; }
    .quote-step-actions, .quote-step-actions-split { justify-content: stretch; flex-wrap: wrap; }
    .quote-step-actions .btn { flex: 1 1 100%; justify-content: center; }
    .quote-route-actions { margin-top: 8px; padding-top: 8px; }
    .quote-route-actions .btn { flex: 1; justify-content: center; min-width: 0; padding-inline: 10px; font-size: 11px; }
    .quote-review-grid { grid-template-columns: 1fr; }
    .quote-result-meta { gap: 8px; flex-wrap: wrap; }
    .quote-inline-action { font-size: 10px; }
    .quote-workspace-main .term-chart { display: none; }
    .quote-workspace-main .term-breakdown { padding-top: 5px; }
}

/* ============================== COMMAND PALETTE ============================== */

.palette { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding: 12vh 20px 20px; }
.palette[hidden] { display: none; }
.palette-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.palette-card {
    position: relative; z-index: 1; width: min(560px, 100%);
    border: 1px solid var(--line-2); border-radius: var(--r-lg);
    background: var(--ink-700); overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    animation: modalIn 200ms var(--ease);
}
.palette-input {
    min-height: 52px; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; background: transparent; padding: 0 18px;
    font-size: 15px;
}
.palette-input:focus { box-shadow: none; border-color: var(--line); }
.palette-list { list-style: none; margin: 0; padding: 7px; max-height: 340px; overflow-y: auto; }
.palette-list li { border-radius: var(--r-sm); }
.palette-list button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border-radius: var(--r-sm);
    color: var(--text-2); font-size: 14px; text-align: left;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.palette-list li.is-active button,
.palette-list button:hover { background: rgba(0, 229, 199, 0.09); color: var(--text); }
.palette-list .k {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-3);
    margin-left: auto; padding: 2px 6px;
    border: 1px solid var(--line); border-radius: 4px;
}
.palette-empty { padding: 22px; text-align: center; color: var(--text-3); font-size: 14px; }

/* ============================== APP SHELL ============================== */

/* 268 px: el ancho mínimo con el que el correo de contacto cabe en una línea. */
.app-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
    display: flex; flex-direction: column; gap: 26px;
    padding: 20px 16px;
    border-right: 1px solid var(--line);
    background: var(--ink-900);
    position: sticky; top: 0; height: 100vh;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 4px; }
.brand-mark { width: 32px; height: 30px; }
.brand-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.brand-unit { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }

.nav-list { display: grid; gap: 2px; }
.nav-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--r-sm);
    color: var(--text-2); font-size: 14px; font-weight: 500; text-align: left;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
/* Riel cian a la izquierda del activo */
.nav-item.active { background: rgba(0, 229, 199, 0.08); color: var(--text); }
.nav-item.active::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 2px; height: 18px; margin-top: -9px;
    background: var(--cyan); border-radius: 0 2px 2px 0;
}
.nav-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.support-tile {
    margin-top: auto;
    padding: 13px 11px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--ink-800);
}
/* El correo debe leerse de corrido: nada de `word-break: break-all`, que
   partía "…integrated.co / m". Se ajusta al ancho de la barra reduciendo el
   cuerpo, y si aun así no cabe se encoge en vez de romperse. */
.support-tile a {
    display: block; margin-top: 7px;
    color: var(--cyan);
    font-size: clamp(10px, 0.78vw, 11.5px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    word-break: normal; overflow-wrap: normal;
}
.support-tile a:hover { text-decoration: underline; }
.build-tag { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.1em; }

.main-panel { padding: 0 clamp(18px, 2.4vw, 34px) 56px; }

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap;
    padding: 18px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 14, 20, 0.86);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.topbar h1 { margin-top: 4px; font-size: clamp(22px, 2.4vw, 30px); }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rate-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--line-2); border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 11.5px; color: var(--text-2);
}
.rate-pill.is-loading { color: var(--text-3); }
/* Esqueleto de carga */
.rate-pill.is-loading::after {
    content: ""; width: 52px; height: 9px; border-radius: 3px;
    background: linear-gradient(90deg, var(--ink-600), var(--ink-500), var(--ink-600));
    background-size: 200% 100%;
    animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.user-pill {
    padding: 7px 12px; border-radius: 100px;
    border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
    font-size: 11.5px; color: var(--text-3);
}

.view { padding-top: 22px; outline: none; }
.view:focus-visible { outline: none; }

.section-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.section-heading h2 { font-size: 19px; letter-spacing: -0.025em; }

/* Métricas del panel — reglas finas, sin tarjetas */
.status-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    border-block: 1px solid var(--line);
}
.metric-card {
    position: relative;
    padding: 18px 22px 18px 0;
}
.metric-card + .metric-card { padding-left: 22px; border-left: 1px solid var(--line); }
.metric-card .lbl { display: block; }
.metric-card strong {
    display: block; margin-top: 10px;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 25px; font-weight: 500; letter-spacing: -0.03em; color: var(--text);
}
.metric-card strong.status-ok { color: var(--ok); font-family: var(--font-body); font-size: 20px; }
.metric-card span { display: block; margin-top: 6px; color: var(--text-3); font-size: 12px; }

/* Progreso de banda: segmentado, con borde luminoso al frente */
.band-progress-card {
    margin-top: 24px; padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.band-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.muted-note { color: var(--text-3); font-size: 11.5px; }
.band-track {
    position: relative; height: 8px; border-radius: 100px;
    background: var(--ink-900); border: 1px solid var(--line); overflow: hidden;
}
.band-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
    border-radius: 100px;
    box-shadow: 0 0 12px rgba(0, 229, 199, 0.45);
    transition: width 700ms var(--ease);
}
.band-scale {
    display: flex; justify-content: space-between;
    margin-top: 9px; font-size: 10.5px; color: var(--text-3); letter-spacing: 0.1em;
}

.activity-section { margin-top: 26px; }

/* -------------------- Tabla densa de operaciones -------------------- */

.op-table { border-top: 1px solid var(--line); }
.op-head, .operation-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1.5fr) 104px minmax(0, 1fr) minmax(0, 1fr) 122px;
    gap: 14px; align-items: center;
    padding: 11px 12px;
}
.op-head { border-bottom: 1px solid var(--line); }
.op-head span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.op-head .num, .operation-row .num { text-align: right; }

.operation-row {
    position: relative;
    border-top: 1px solid var(--line);
    font-size: 13px;
    transition: background var(--t-fast) var(--ease);
}
.operation-row:first-child { border-top: 0; }
.operation-row:hover { background: var(--ink-700); }
/* Realce cian en el borde izquierdo al pasar el cursor */
.operation-row::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--cyan); opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}
.operation-row:hover::before { opacity: 1; }

.operation-row .op-id { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); }
.operation-row .op-svc { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-row .op-date { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.operation-row .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-2); }
.operation-row .num.out { color: var(--text); }

.status-pill {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    padding: 4px 9px; border-radius: 100px;
    border: 1px solid var(--line-2);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
    white-space: nowrap;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-done    { color: var(--ok);   border-color: rgba(63, 214, 140, 0.3);  background: rgba(63, 214, 140, 0.08); }
.status-process { color: var(--cyan); border-color: var(--cyan-line);          background: var(--cyan-soft); }
.status-review  { color: var(--warn); border-color: rgba(224, 165, 76, 0.3);  background: rgba(224, 165, 76, 0.08); }

.empty-state { padding: 34px; text-align: center; color: var(--text-3); font-size: 14px; }

.filter-bar { display: flex; gap: 6px; }
.filter-chip {
    padding: 7px 13px; border-radius: 100px;
    border: 1px solid var(--line-2); background: transparent;
    color: var(--text-3); font-size: 12.5px; font-weight: 500;
    transition: all var(--t-fast) var(--ease);
}
.filter-chip:hover { color: var(--text-2); border-color: var(--line-2); }
.filter-chip.is-active { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-soft); }

/* -------------------- Nueva operación -------------------- */

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 16px; align-items: start; }

/* Columnas separadas por una regla, no dos tarjetas enfrentadas */
.quote-panel { padding: 0 32px 0 0; }
.quote-summary > .summary-screen { padding: 0 0 0 32px; border-left: 1px solid var(--line); }
.profile-card { padding: 0 28px 0 0; }
.profile-card + .profile-card { padding: 0 0 0 28px; border-left: 1px solid var(--line); }

.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quote-form .btn { grid-column: 1 / -1; }
.review-line { grid-column: 1 / -1; }

.chip {
    padding: 4px 9px; border-radius: 5px;
    background: var(--cyan-soft); color: var(--cyan);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
}

.quote-summary { position: sticky; top: 96px; }
.deliverable { margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.deliverable span { display: block; color: var(--text-3); font-size: 12px; }
.deliverable strong {
    display: block; margin-top: 7px;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: var(--cyan);
}
.summary-list { display: grid; gap: 1px; margin: 14px 0 0; }
.summary-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; }
.summary-list dt { color: var(--text-3); font-size: 12.5px; }
.summary-list dd { margin: 0; font-size: 12.5px; color: var(--text-2); }
/* Aviso de revisión: el estado lo comunica el punto ámbar, no un campo de
   color que tiña media columna. */
.notice {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 14px; padding: 10px 0 0;
    border-top: 1px solid var(--line);
    color: var(--text-2); font-size: 12.5px; line-height: 1.5;
}
.notice::before {
    content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px;
    border-radius: 50%; background: var(--warn);
}
.summary-disclaimer { margin-top: 14px; color: var(--text-3); font-size: 11.5px; line-height: 1.5; }

.card-label { color: var(--text-3); }

/* -------------------- Perfil -------------------- */

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.profile-list { display: grid; gap: 1px; margin: 14px 0 0; }
.profile-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.profile-list > div:last-child { border-bottom: 0; }
.profile-list dt { color: var(--text-3); font-size: 13px; }
.profile-list dd { margin: 0; font-size: 13px; text-align: right; }

/* ============================== MÉTODOS DE PAGO ============================== */

.pm { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line); }
.pm-intro { margin-top: -6px; margin-bottom: 20px; color: var(--text-2); font-size: 14px; max-width: 62ch; }

/* Lista de métodos guardados — filas densas, sin tarjetas */
.pm-list:not(:empty) { border-top: 1px solid var(--line); }
.pm-row {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.1fr) 40px;
    gap: 16px; align-items: center;
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    transition: background var(--t-fast) var(--ease);
}
.pm-row:hover { background: var(--ink-700); }
.pm-row::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--cyan); opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}
.pm-row:hover::before { opacity: 1; }

.pm-badge {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    padding: 4px 9px; border-radius: 100px;
    border: 1px solid var(--line-2);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.pm-badge.is-crypto { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-soft); }
.pm-badge.is-fiat   { color: var(--blue); border-color: rgba(91, 140, 255, 0.3); background: rgba(91, 140, 255, 0.08); }

.pm-main { display: grid; gap: 2px; min-width: 0; }
.pm-title { color: var(--text); font-size: 13.5px; font-weight: 550; }
.pm-sub { color: var(--text-3); font-size: 12px; }
.pm-detail {
    font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-del {
    display: grid; place-items: center; justify-self: end;
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid var(--line); color: var(--text-3);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pm-del:hover { color: var(--err); border-color: rgba(255, 93, 115, 0.4); }
.pm-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Formulario */
.pm-form-wrap { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.pm-form { display: grid; gap: 22px; max-width: 720px; }
.pm-fieldset { margin: 0; padding: 0; border: 0; }
.pm-fieldset legend { padding: 0; margin-bottom: 10px; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-grid .field.full { grid-column: 1 / -1; }
.pm-branch { display: grid; gap: 20px; }
.pm-subbranch { display: grid; gap: 20px; }

/* Control segmentado: radios sin aspecto de radio */
.seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--ink-900); }
.seg-opt { position: relative; }
.seg-opt input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; opacity: 0; cursor: pointer; min-height: 0;
}
.seg-opt span {
    display: block; padding: 8px 20px; border-radius: 6px;
    color: var(--text-3); font-size: 13.5px; font-weight: 550;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.seg-opt input:checked + span { color: var(--ink-900); background: var(--cyan); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.seg-opt:hover input:not(:checked) + span { color: var(--text-2); }

/* Recomendación de ruta */
.pm-hint {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 11px 13px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--ink-900);
    color: var(--text-2); font-size: 13px;
}
.pm-hint strong { color: var(--cyan); font-weight: 550; }
.pm-hint .text-action { margin-left: auto; }

.field-note { margin-top: 3px; color: var(--text-3); font-size: 11.5px; }
label .opt { color: var(--text-3); font-weight: 400; }

.pm-actions { display: flex; gap: 10px; }

@media (max-width: 720px) {
    .pm-grid { grid-template-columns: 1fr; }
    .pm-row { grid-template-columns: 1fr 34px; gap: 10px; }
    .pm-row .pm-badge { grid-row: 1; }
    .pm-detail { grid-column: 1 / -1; }
}

/* ============================== TOASTS ============================== */

.toast-region {
    position: fixed; right: 18px; bottom: 18px; z-index: 200;
    display: grid; gap: 8px; justify-items: end;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 9px;
    max-width: 340px; padding: 11px 14px;
    border: 1px solid var(--line-2); border-radius: var(--r);
    background: var(--ink-600); color: var(--text);
    font-size: 13.5px; line-height: 1.45;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.toast.is-visible { opacity: 1; transform: none; }
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none; }
.toast-success::before { background: var(--ok); }
.toast-warn::before { background: var(--warn); }
.toast-error::before { background: var(--err); }

/* ============================== RESPONSIVE ============================== */

@media (max-width: 1080px) {
    .hero { grid-template-columns: 1fr; }
    .hero-visual { justify-self: stretch; max-width: 100%; margin-top: 12px; }
    .hero h1 { max-width: 18ch; }
    .hero-proof { max-width: 100%; }
    .op-head, .operation-row { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 112px; }
    .op-head .c-date, .operation-row .op-date,
    .op-head .c-sent, .operation-row .c-sent { display: none; }

    .workspace-grid { grid-template-columns: 1fr; }
    .quote-summary { position: static; }
    .quote-panel { padding: 0 0 26px; border-bottom: 1px solid var(--line); }
    .quote-summary > .summary-screen { padding: 26px 0 0; border-left: 0; }

    .caps { grid-template-columns: 1fr 1fr; }
    .caps li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .caps li:nth-child(even) { padding-left: 26px; border-left: 1px solid var(--line); }
    .caps li:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 26px; }
}

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: static; height: auto;
        flex-direction: row; align-items: center; gap: 14px;
        overflow-x: auto;
        border-right: 0; border-bottom: 1px solid var(--line);
    }
    .nav-list { grid-auto-flow: column; gap: 4px; }
    .nav-item { white-space: nowrap; }
    .nav-item.active::before { top: auto; bottom: 0; left: 12px; right: 12px; width: auto; height: 2px; margin: 0; border-radius: 2px 2px 0 0; }
    .support-tile, .build-tag { display: none; }
    .metrics { grid-template-columns: 1fr; }
    .metrics > div { padding: 22px 0; }
    .metrics > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
    .band-light .metrics > div + div { border-top-color: rgba(27, 42, 57, 0.14); }

    .insight-layout,
    .band-light .insight-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: start;
    }
    .insight-layout > .insight-visual,
    .band-light .insight-layout > .insight-visual {
        order: 0;
        width: 100%;
    }
    .insight-layout > .insight-copy,
    .band-light .insight-layout > .insight-copy {
        order: 1;
        width: 100%;
        min-width: 0;
    }
    .insight-visual {
        min-height: clamp(220px, 44vw, 320px);
    }
    .ops-diagram {
        width: min(320px, 82vw);
    }

    .pipe-track { grid-template-columns: 1fr 1fr; gap: 24px; }
    .pipe-track::before, .pipe-track::after { display: none; }

    .reviews { grid-template-columns: 1fr; }
    .rv-stage { padding: 32px 0 28px; }
    .rv-list {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .rv-tab { padding-inline: 0; }
    .rv-tab::before {
        left: 0;
        top: -1px;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 2px;
    }
    .rv-pair {
        width: 100%;
        margin-left: 0;
    }

    .status-grid { grid-template-columns: 1fr 1fr; }
    .metric-card { padding: 16px 18px 16px 0; }
    .metric-card + .metric-card { padding-left: 18px; }
    .metric-card:nth-child(odd) { padding-left: 0; border-left: 0; }
    .metric-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

    .profile-card { padding: 0 0 22px; }
    .profile-card + .profile-card { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* Por debajo de ~860px la barra no cabe entera: se retiran primero los
   enlaces de sección y el disparador del buscador (accesible igualmente
   con Ctrl+K), conservando marca y las dos acciones. */
@media (max-width: 860px) {
    .nav-link, .nav-kbd { display: none; }
}

@media (max-width: 640px) {
    .nav { padding-inline: 16px; gap: 10px; }
    .nav-word { font-size: 14px; }
    .nav-word em { display: none; }
    .nav-mark { width: 28px; height: 26px; }
    .nav-signin { padding: 8px 10px; font-size: 13px; }
    .nav-cta { padding: 0 12px; font-size: 13px; }
    .hero h1 { font-size: clamp(34px, 10vw, 46px); }
    .hero-proof { grid-template-columns: 1fr; gap: 0; }
    .hero-proof span,
    .hero-proof span + span { padding: 10px 0; border-left: 0; }
    .hero-proof span + span { border-top: 1px solid var(--line); }
    .hero-visual-orbit { display: none; }
    .quote-teaser-pair { font-size: 24px; }
    .term-amount, .term-out { font-size: 22px; }
    .insight-visual {
        min-height: 188px;
    }
    .insight-visual::before,
    .insight-visual::after {
        inset-block: 24%;
    }
    .ops-diagram {
        width: min(238px, 74vw);
    }
    .insight-layout,
    .band-light .insight-layout { gap: 24px; }
    .rows article { grid-template-columns: 1fr; gap: 8px; }
    .rows-differentials { grid-template-columns: 1fr; }
    .rows-differentials article { display: block; }
    .quote-form { grid-template-columns: 1fr; }
    .pipe-track { grid-template-columns: 1fr; }

    .caps { grid-template-columns: 1fr; }
    .caps li, .caps li:nth-child(even) { padding: 22px 0; border-left: 0; padding-left: 0; }
    .caps li:not(:last-child) { border-bottom: 1px solid var(--line); }

    .quotes { grid-template-columns: 1fr; }
    .quotes li, .quotes li:nth-child(even) { padding: 26px 0; padding-left: 0; border-left: 0; }

    .status-grid { grid-template-columns: 1fr; }
    .metric-card, .metric-card + .metric-card { padding: 16px 0; border-left: 0; padding-left: 0; }
    .metric-card:not(:last-child) { border-bottom: 1px solid var(--line); }
    .op-head, .operation-row { grid-template-columns: 1fr auto; gap: 8px; }
    .op-head { display: none; }
    .operation-row { padding: 14px 16px; }
    .operation-row .op-date, .operation-row .c-sent { display: none; }
    .toast-region { left: 14px; right: 14px; justify-items: stretch; }
    .toast { max-width: none; }
}

@media (max-width: 760px) {
    .quote-workspace-head { padding: 10px 16px; }
    .quote-workspace-head h2 { font-size: 22px; }
    .quote-steps { padding: 7px 16px; }
    .quote-step-panel { padding: 10px 16px 6px; }
    .quote-step-intro-compact { margin-bottom: 2px; }
    .quote-step-intro-compact h3 { font-size: 21px; line-height: 1.12; }
    .quote-step-intro-compact p:not(.lbl) { margin-top: 4px; font-size: 12px; line-height: 1.35; }
    .quote-workspace-main .term-body { row-gap: 6px; padding: 8px 16px 6px; }
    .quote-workspace-main .term-row { height: 48px; min-height: 48px; padding: 7px 10px; }
    .quote-workspace-main .term-route-note { grid-row: auto; }
    .quote-workspace-main .term-chart { display: none; }
    .quote-workspace-main .term-result-caption { display: none; }
    .quote-workspace-main .term-route-note,
    .quote-workspace-main .term-paypal-note { padding: 7px 10px; font-size: 10px; line-height: 1.4; }
    .quote-workspace-main .term-breakdown div { padding: 4px 0; font-size: 11px; }
    .quote-workspace.has-paypal .term-breakdown { column-gap: 12px; }
    .quote-workspace.has-paypal .term-breakdown .k,
    .quote-workspace.has-paypal .term-breakdown .v { white-space: nowrap; font-size: 10px; }
    .quote-workspace-main .term-breakdown .is-total .v { white-space: nowrap; font-size: 14px; }
    .quote-workspace-main .term-foot { padding: 6px 16px; }
    .quote-route-actions { margin-top: 6px; padding-top: 6px; }
    .quote-route-actions .btn { min-height: 40px; }
    .quote-step-actions-back { display: none; }
}

/* ============================== V3 UXUI MOTION LAYER ============================== */

/* La capa se limita a retroalimentación visual: no altera contenido, medidas
   ni estados de la cotización. Cada efecto acompaña una acción ya existente. */
.quote-modal-backdrop {
    animation: quoteBackdropIn 260ms var(--ease) both;
}
@keyframes quoteBackdropIn {
    from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    to { opacity: 1; }
}

.quote-workspace {
    isolation: isolate;
    border-color: rgba(149, 166, 191, 0.24);
    box-shadow: 0 44px 140px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 229, 199, 0.025);
}
.quote-workspace::before {
    content: none;
    position: absolute; inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.75;
    background:
        linear-gradient(90deg, transparent 0 7%, rgba(0, 229, 199, 0.28) 18%, transparent 29%) top left / 280px 1px no-repeat,
        linear-gradient(270deg, transparent 0 7%, rgba(0, 229, 199, 0.16) 18%, transparent 29%) bottom right / 280px 1px no-repeat;
    animation: none;
}
@keyframes quoteEdgeDrift {
    0%, 100% { background-position: -280px 0, calc(100% + 280px) 100%; }
    50% { background-position: calc(100% + 280px) 0, -280px 100%; }
}

.quote-workspace-head {
    position: relative;
}
.quote-workspace-head::after {
    content: "";
    position: absolute; right: 76px; bottom: -1px;
    width: 52px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 10px rgba(0, 229, 199, 0.5);
    opacity: 0.55;
}

.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn::after {
    content: none;
    position: absolute; inset: -1px auto -1px -45%;
    z-index: -1;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
    transform: skewX(-18deg) translateX(-260%);
    transition: transform 480ms var(--ease);
    pointer-events: none;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:hover:not(:disabled)::after { transform: none; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 9px 20px rgba(0, 229, 199, 0.2); }
.btn-secondary:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24); }
.btn:focus-visible,
.quote-workspace-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.quote-workspace-close {
    transition: color 360ms var(--ease), border-color 360ms var(--ease), transform 360ms var(--ease), background 360ms var(--ease);
}
.quote-workspace-close svg { transition: transform 420ms var(--ease); }
.quote-workspace-close:hover { background: rgba(0, 229, 199, 0.08); transform: scale(1.05); }
.quote-workspace-close:hover svg { transform: rotate(90deg); }

.quote-steps {
    background-image: linear-gradient(90deg, rgba(0, 229, 199, 0.055), transparent 24%, transparent 76%, rgba(0, 229, 199, 0.035));
}
.quote-step.is-active span {
    box-shadow: 0 0 0 4px rgba(0, 229, 199, 0.08), 0 0 16px rgba(0, 229, 199, 0.24);
    animation: none;
}
@keyframes quoteActiveStep {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 229, 199, 0.08), 0 0 12px rgba(0, 229, 199, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(0, 229, 199, 0.035), 0 0 20px rgba(0, 229, 199, 0.32); }
}
.quote-step.is-complete + .quote-step-line {
    background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
    box-shadow: 0 0 8px rgba(0, 229, 199, 0.28);
}

.quote-operation {
    position: relative;
    overflow: hidden;
}
.quote-operation::before {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 2px;
    background: var(--cyan);
    opacity: 0;
    transform: scaleY(0.35);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.quote-operation:hover .quote-operation-icon { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 7px rgba(0, 229, 199, 0.42)); }
.quote-operation.is-selected::before { opacity: 1; transform: none; }
.quote-operation.is-selected .quote-operation-state { text-shadow: 0 0 10px rgba(0, 229, 199, 0.36); }

.quote-special-fee {
    position: relative;
    overflow: hidden;
}
.quote-special-fee::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 36%, rgba(0, 229, 199, 0.12) 50%, transparent 64%);
    transform: translateX(-115%);
}
.quote-special-fee.is-special-active::after { animation: quoteFeeScan 1.25s var(--ease) both; }
@keyframes quoteFeeScan { to { transform: translateX(115%); } }

.quote-workspace-main .term-row {
    position: relative;
    overflow: visible;
}
.quote-workspace-main .term-row::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: -1px;
    height: 1px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}
.quote-workspace-main .term-row:hover::after { opacity: 0.42; transform: scaleX(0.5); }
.quote-workspace-main .term-row:focus-within::after { opacity: 1; transform: none; box-shadow: 0 0 9px rgba(0, 229, 199, 0.68); }
.quote-workspace-main .term-swap::before {
    content: "";
    position: absolute; inset: -6px;
    border: 1px solid rgba(0, 229, 199, 0.18);
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.quote-workspace-main .term-swap:hover::before { opacity: 0; transform: scale(0.8); }
.quote-workspace-main .term-swap.is-turning::before {
    animation: quoteSwapRipple 360ms var(--ease) both;
}
@keyframes quoteSwapRipple {
    from { opacity: 0.7; transform: scale(0.8); }
    to { opacity: 0; transform: scale(1.45); }
}

.quote-review-grid div {
    transition: background var(--t-fast) var(--ease), padding-inline var(--t-fast) var(--ease);
}
.quote-review-grid div:hover { padding-inline: 8px; background: rgba(255, 255, 255, 0.025); }
.quote-result-total {
    position: relative;
    overflow: hidden;
}
.quote-result-total::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 40%, rgba(0, 229, 199, 0.11) 50%, transparent 60%);
    animation: none;
}
.quote-step-panel.is-active .quote-result-total::after { animation: quoteResultSheen 680ms var(--ease) 180ms both; }
@keyframes quoteResultSheen {
    from { transform: translateX(-115%); }
    to { transform: translateX(115%); }
}

@media (hover: none) {
    .btn:hover:not(:disabled),
    .quote-workspace-close:hover { transform: none; }
    .quote-operation:hover .quote-operation-icon { transform: none; filter: none; }
}

/* Movimiento direccional: cada etapa conserva el contexto de la anterior.
   No es una animación de página; comunica avance o regreso dentro de la ruta. */
.quote-step-line { position: relative; overflow: hidden; }
.quote-step-line::after {
    content: "";
    position: absolute; inset: 0;
    width: 52%;
    background: linear-gradient(90deg, transparent, #eafffb, transparent);
    opacity: 0;
}
.quote-workspace.is-moving-forward .quote-step.is-complete + .quote-step-line::after {
    animation: quoteRouteForward 1500ms var(--ease) both;
}
.quote-workspace.is-moving-backward .quote-step-line::after {
    animation: quoteRouteBackward 1200ms var(--ease) both;
}
@keyframes quoteRouteForward {
    from { opacity: 0; transform: translateX(-130%); }
    30%, 72% { opacity: 0.92; }
    to { opacity: 0; transform: translateX(250%); }
}
@keyframes quoteRouteBackward {
    from { opacity: 0; transform: translateX(250%); }
    30%, 72% { opacity: 0.58; }
    to { opacity: 0; transform: translateX(-130%); }
}
.quote-workspace.is-moving-forward .quote-step-panel.is-active {
    animation: quotePanelForward 900ms var(--ease) both;
}
.quote-workspace.is-moving-backward .quote-step-panel.is-active {
    animation: quotePanelBackward 760ms var(--ease) both;
}
@keyframes quotePanelForward {
    from { opacity: 0; transform: translate3d(18px, 0, 0); }
    to { opacity: 1; transform: none; }
}
@keyframes quotePanelBackward {
    from { opacity: 0; transform: translate3d(-14px, 0, 0); }
    to { opacity: 1; transform: none; }
}

/* Los indicadores SVG reaccionan a la selección, sin sustituir el texto ni
   forzar una decoración continua. */
.quote-operation-icon svg {
    transition: transform 220ms var(--ease), stroke 180ms var(--ease);
    transform-origin: center;
}
.quote-operation:hover .quote-operation-icon svg { transform: translateX(2px); }
.quote-operation.is-selected .quote-operation-icon svg { stroke: #d8fffa; }
.quote-operation.is-selected .quote-operation-icon {
    animation: quoteSelectionSettle 260ms var(--ease) both;
}
@keyframes quoteSelectionSettle {
    from { transform: scale(0.86); opacity: 0.5; }
    to { transform: none; opacity: 1; }
}

/* La flecha acompaña el comando principal y el icono de descarga confirma la
   intención. Son señales breves que solo aparecen por interacción. */
.quote-step-actions .btn-primary span,
.quote-route-actions .btn-primary span,
#quoteWhatsappLink span {
    display: inline-block;
    transition: transform 180ms var(--ease);
}
.quote-step-actions .btn-primary:hover span,
.quote-route-actions .btn-primary:hover span,
#quoteWhatsappLink:hover span { transform: translateX(3px); }
#quoteDownloadPdf svg { transition: transform 220ms var(--ease); }
#quoteDownloadPdf:hover svg { animation: quoteDownloadConfirm 380ms var(--ease) both; }
@keyframes quoteDownloadConfirm {
    45% { transform: translateY(3px); }
    100% { transform: none; }
}

/* El panel de ruta ya entra como una sola unidad. Sus elementos no vuelven a
   animarse individualmente al cambiar de etapa. */
@media (prefers-reduced-motion: no-preference) {
    .quote-step-panel[data-quote-step="2"] .quote-workspace-main .term-leg,
    .quote-step-panel[data-quote-step="2"] .quote-workspace-main .term-chart,
    .quote-step-panel[data-quote-step="2"] .quote-workspace-main .term-breakdown {
        animation: none;
    }
}

/* ============================== MOVIMIENTO REDUCIDO ============================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .js [data-reveal],
    .js section.band[data-reveal] > * { opacity: 1; transform: none; }
    #bgCanvas { display: none; }
}