/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA — /integraciones/
   Sólo layout propio de esta página. Ningún valor literal: todo sale de
   tokens.css. Los componentes (botón, tarjeta, píldora) vienen de
   components.css y bridge.css; aquí únicamente se colocan.

   La pieza principal es la banda `.mig`: un raíl de izquierda a derecha que
   cuenta la migración de un vistazo —los tres sistemas de origen, la flecha
   con el plazo, y FixrOS al final—. Se lee antes de leerla, que es lo que
   tiene que hacer un módulo de reclamo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO: los dos botones, centrados ─────────────────────────────────── */
.demo-page-hero .hero-cta-row { justify-content: center; margin-top: var(--fx-space-8); }

/* ── BANDA DE MIGRACIÓN ───────────────────────────────────────────────── */
.mig {
    position: relative;
    overflow: hidden;
    background: var(--fx-navy);
    padding: calc(var(--fx-section-y) * 1.15) 0;
    color: var(--fx-on-dark-text);
}
/* Foco de luz: la banda es lo más oscuro de la página y necesita volumen,
   o se lee como un rectángulo pegado. */
.mig::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 90% at 18% 15%, rgba(143, 176, 255, 0.22) 0%, transparent 62%),
        radial-gradient(ellipse 55% 80% at 88% 88%, rgba(18, 70, 255, 0.28) 0%, transparent 60%);
    pointer-events: none;
}
.mig > .container { position: relative; z-index: var(--fx-z-base); }

.mig-head { max-width: 60rem; margin: 0 auto var(--fx-space-12); text-align: center; }
.mig-head .eyebrow { color: var(--fx-on-dark-accent); }
.mig-title {
    font-family: var(--fx-font-display);
    font-size: var(--fx-text-3xl);
    font-weight: var(--fx-weight-black);
    line-height: var(--fx-leading-tight);
    letter-spacing: var(--fx-tracking-snug);
    color: var(--fx-white);
    margin: var(--fx-space-3) 0 var(--fx-space-4);
    text-wrap: balance;
}
.mig-desc {
    font-size: var(--fx-text-lg);
    line-height: var(--fx-leading-body);
    color: var(--fx-on-dark-muted);
    margin: 0;
}

/* ── RAÍL: origen → plazo → destino ───────────────────────────────────── */
.mig-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--fx-space-8);
    align-items: center;
}
.mig-rail-label {
    display: block;
    font-family: var(--fx-font-display);
    font-size: var(--fx-text-xs);
    font-weight: var(--fx-weight-bold);
    letter-spacing: var(--fx-tracking-wide);
    text-transform: uppercase;
    color: var(--fx-on-dark-subtle);
    margin-bottom: var(--fx-space-4);
}

/* Los programas de origen se citan por su nombre, nunca con su logotipo: son
   marcas de terceros y no hay relación comercial que justifique reproducirlas
   (retirados el 2026-09-11). Las tarjetas mantienen el mismo peso visual. */
.mig-origenes {
    display: grid;
    gap: var(--fx-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.mig-origenes li {
    /* Rejilla de dos columnas, no flex: con flex el separador de cada tarjeta
       caía a una altura distinta porque los nombres miden distinto, y las tres
       casas quedaban desalineadas. Con una columna fija van a plomo. */
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    align-items: baseline;
    gap: var(--fx-space-3);
    padding: var(--fx-space-4) var(--fx-space-6);
    background: var(--fx-white);
    border-radius: var(--fx-radius-md);
    box-shadow: var(--fx-shadow-md);
    transition: transform var(--fx-dur-base) var(--fx-ease);
}
.mig-origenes li:hover { transform: translateX(4px); }
.mig-origen-nombre {
    font-family: var(--fx-font-display);
    font-size: var(--fx-text-lg);
    font-weight: var(--fx-weight-semi);
    color: var(--fx-text);
    letter-spacing: var(--fx-tracking-tight);
}
.mig-origen-casa {
    font-size: var(--fx-text-sm);
    color: var(--fx-text-subtle);
    padding-left: var(--fx-space-3);
    border-left: 1px solid var(--fx-border);
}
/* Nota legal al pie: los nombres de los programas de origen son marcas de
   terceros y se citan solo para identificar desde dónde migramos. */
.mig-legal-nota {
    padding-block: var(--fx-space-8);
    border-top: 1px solid var(--fx-border);
    background: var(--fx-bg);
}
.mig-legal-nota p + p { margin-top: var(--fx-space-3); }
.mig-legal-nota p {
    max-width: 78ch;
    margin: 0 auto;
    font-size: var(--fx-text-xs);
    line-height: var(--fx-leading-body);
    color: var(--fx-text-subtle);
    text-align: center;
}

.mig-from-note {
    margin: var(--fx-space-4) 0 0;
    font-size: var(--fx-text-sm);
    line-height: var(--fx-leading-body);
    color: var(--fx-on-dark-subtle);
}

/* Flecha con el plazo. El número es el héroe de la banda: va en display,
   grande, y con el degradado que ya usa la comparativa de Gesfincas. */
.mig-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fx-space-1);
    color: var(--fx-on-dark-accent);
    padding: 0 var(--fx-space-2);
}
.mig-badge {
    display: flex;
    align-items: baseline;
    font-family: var(--fx-font-display);
    line-height: var(--fx-leading-tight);
    background: linear-gradient(135deg, var(--fx-brand-300) 0%, var(--fx-white) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mig-lt  { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); font-weight: var(--fx-weight-semi); }
.mig-num { font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem); font-weight: var(--fx-weight-black); letter-spacing: var(--fx-tracking-tight); }
.mig-h   { font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); font-weight: var(--fx-weight-bold); letter-spacing: var(--fx-tracking-snug); }
.mig-badge-cap {
    font-size: var(--fx-text-xs);
    font-weight: var(--fx-weight-semi);
    letter-spacing: var(--fx-tracking-wide);
    text-transform: uppercase;
    color: var(--fx-on-dark-subtle);
}
.mig-arrow-svg { width: 7.5rem; height: auto; margin-top: var(--fx-space-4); }

/* Destino */
.mig-dest {
    padding: var(--fx-space-8) var(--fx-space-6);
    border: 1px solid var(--fx-on-dark-border);
    border-radius: var(--fx-radius-lg);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: var(--fx-shadow-lg);
    text-align: center;
}
.mig-dest-logo { width: auto; height: 2rem; margin: 0 auto var(--fx-space-4); display: block; }
.mig-dest-desc {
    margin: 0 0 var(--fx-space-6);
    font-size: var(--fx-text-md);
    line-height: var(--fx-leading-body);
    color: var(--fx-on-dark-muted);
}
.mig-dest-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fx-space-2);
    justify-content: center;
}
.mig-dest-chips li {
    font-size: var(--fx-text-xs);
    font-weight: var(--fx-weight-semi);
    letter-spacing: var(--fx-tracking-snug);
    color: var(--fx-white);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid var(--fx-on-dark-border);
    border-radius: var(--fx-radius-pill);
    padding: var(--fx-space-1) var(--fx-space-3);
}

/* Garantías + llamada */
.mig-points {
    list-style: none;
    margin: var(--fx-space-12) 0 0;
    padding: var(--fx-space-8) 0 0;
    border-top: 1px solid var(--fx-on-dark-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--fx-space-4) var(--fx-space-6);
}
.mig-points li {
    display: flex;
    align-items: flex-start;
    gap: var(--fx-space-3);
    font-size: var(--fx-text-sm);
    line-height: var(--fx-leading-snug);
    color: var(--fx-on-dark-text);
}
.mig-points li svg { flex: 0 0 auto; color: var(--fx-on-dark-accent); }

.mig-cta { text-align: center; margin-top: var(--fx-space-12); }
.mig-note {
    margin: var(--fx-space-4) 0 0;
    font-size: var(--fx-text-sm);
    color: var(--fx-on-dark-subtle);
}

/* ── QUÉ MIGRAMOS ─────────────────────────────────────────────────────── */
.mig-que-grid {
    margin-top: var(--fx-space-12);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--fx-space-6);
}
.mig-que-card {
    background: var(--fx-surface);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-md);
    padding: var(--fx-space-6);
}
.mig-que-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fx-radius-sm);
    background: var(--fx-accent-soft);
    color: var(--fx-accent);
    margin-bottom: var(--fx-space-4);
}
.mig-que-title {
    font-family: var(--fx-font-display);
    font-size: var(--fx-text-xl);
    font-weight: var(--fx-weight-bold);
    line-height: var(--fx-leading-snug);
    color: var(--fx-text);
    margin: 0 0 var(--fx-space-4);
}
.mig-que-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fx-space-3); }
.mig-que-list li {
    position: relative;
    padding-left: var(--fx-space-6);
    font-size: var(--fx-text-sm);
    line-height: var(--fx-leading-snug);
    color: var(--fx-text-muted);
}
.mig-que-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--fx-accent);
}

/* ── CÓMO LO HACEMOS ──────────────────────────────────────────────────── */
.mig-steps {
    list-style: none;
    margin: var(--fx-space-12) auto 0;
    padding: 0;
    max-width: 62rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fx-space-8);
}
.mig-step { padding-top: var(--fx-space-4); border-top: 2px solid var(--fx-border); }
.mig-step-num {
    display: block;
    font-family: var(--fx-font-mono);
    font-size: var(--fx-text-sm);
    font-weight: var(--fx-weight-bold);
    color: var(--fx-accent);
}
.mig-step-day {
    display: inline-block;
    margin: var(--fx-space-2) 0 var(--fx-space-2);
    font-size: var(--fx-text-xs);
    font-weight: var(--fx-weight-bold);
    letter-spacing: var(--fx-tracking-wide);
    text-transform: uppercase;
    color: var(--fx-text-subtle);
}
.mig-step-title {
    font-family: var(--fx-font-display);
    font-size: var(--fx-text-xl);
    font-weight: var(--fx-weight-bold);
    line-height: var(--fx-leading-snug);
    color: var(--fx-text);
    margin: 0 0 var(--fx-space-3);
}
.mig-step-desc { margin: 0; font-size: var(--fx-text-md); line-height: var(--fx-leading-body); color: var(--fx-text-muted); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.mig-faq { max-width: 50rem; margin: var(--fx-space-12) auto 0; }
.mig-faq details {
    background: var(--fx-surface);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-sm);
    margin-bottom: var(--fx-space-3);
    padding: 0 var(--fx-space-6);
}
.mig-faq summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: var(--fx-space-4) var(--fx-space-8) var(--fx-space-4) 0;
    font-family: var(--fx-font-display);
    font-size: var(--fx-text-md);
    font-weight: var(--fx-weight-semi);
    color: var(--fx-text);
}
.mig-faq summary::-webkit-details-marker { display: none; }
.mig-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: var(--fx-space-3);
    font-size: var(--fx-text-xl);
    font-weight: var(--fx-weight-regular);
    color: var(--fx-accent);
}
.mig-faq details[open] summary::after { content: "–"; }
.mig-faq details p {
    margin: 0;
    padding-bottom: var(--fx-space-4);
    font-size: var(--fx-text-sm);
    line-height: var(--fx-leading-body);
    color: var(--fx-text-muted);
}
.mig-faq-more { margin: var(--fx-space-6) auto 0; max-width: 50rem; text-align: center; font-size: var(--fx-text-sm); color: var(--fx-text-subtle); }
.mig-faq-more a { color: var(--fx-accent); font-weight: var(--fx-weight-semi); }

/* ── NOTA LEGAL ───────────────────────────────────────────────────────── */
.mig-legal {
    max-width: 56rem;
    margin: 0 auto var(--fx-space-16);
    padding-top: var(--fx-space-8);
    border-top: 1px solid var(--fx-border);
    font-size: var(--fx-text-xs);
    line-height: var(--fx-leading-body);
    color: var(--fx-text-subtle);
}

/* ── TABLET (≤980px): el raíl gira a vertical ─────────────────────────── */
@media (max-width: 980px) {
    .mig-rail { grid-template-columns: minmax(0, 1fr); gap: var(--fx-space-6); }
    /* Apilado, la flecha apunta hacia abajo y el bloque se lee centrado. */
    .mig-arrow { padding: var(--fx-space-2) 0; }
    .mig-arrow-svg { margin-top: var(--fx-space-2); transform: rotate(90deg); width: 4rem; }
    .mig-steps { grid-template-columns: minmax(0, 1fr); gap: var(--fx-space-8); max-width: 34rem; }
}

/* ── MÓVIL (≤640px) ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .mig-origenes li { flex-direction: column; align-items: flex-start; gap: var(--fx-space-1); }
    .mig-origen-casa { border-left: 0; padding-left: 0; }
    .mig-points { margin-top: var(--fx-space-8); }
    .mig-head { margin-bottom: var(--fx-space-8); }
}