/* vs-gesfincas — CSS específico de esta página.
   Extraído del bloque <style> inline de la plantilla (regla del sistema:
   ninguna plantilla lleva CSS inline). Los tokens heredados que usa
   (--color-*, --radius-*, --shadow-*) ya apuntan al sistema nuevo desde
   bridge.css, así que adopta la paleta sin reescribir cada valor. */

/* Espaciado compacto (menos "aire" que el resto de secciones del tema) */


.vsg-page .cta-final-section{padding:60px 0}
.vsg-page .section-desc{margin-bottom:0}
.vsg-page .diferenciales-grid{margin-top:34px}
/* Tags de las 3 tarjetas alineados horizontalmente (empujados al fondo de tarjetas de igual alto) */
.vsg-page .diferencial-card{display:flex;flex-direction:column}
.vsg-page .diferencial-tag{margin-top:auto}
/* ─── RECLAMO: banda navy de migración en 48h ───────────── */
.vsg-migra{background:var(--color-navy);position:relative;overflow:hidden;padding:76px 0}
.vsg-migra::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 45%,rgba(91,184,245,.28) 0%,transparent 60%);pointer-events:none}
.vsg-migra .container{position:relative;z-index:1}
.vsg-migra-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:center}
.vsg-migra-figure{text-align:center;border-right:1px solid rgba(255,255,255,.14);padding-right:40px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.vsg-migra-lt{font-family:var(--font-brand);font-weight:700;font-size:clamp(40px,7vw,84px);color:rgba(255,255,255,.5);line-height:.9;margin-right:6px;vertical-align:top}
.vsg-migra-num{font-family:var(--font-brand);font-weight:800;font-size:clamp(96px,17vw,196px);line-height:.85;background:var(--gradient-os);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-5px}
.vsg-migra-h{font-size:.44em;letter-spacing:-2px}
.vsg-migra-cap{display:block;margin-top:18px;color:rgba(255,255,255,.62);font-size:var(--text-md);font-family:var(--font-brand);font-weight:600;letter-spacing:.3px}
.vsg-migra-eyebrow{color:var(--fx-brand-300)!important}
.vsg-migra-title{color:var(--color-white);font-size:var(--text-3xl);font-weight:800;line-height:1.14;margin:10px 0 16px}
.vsg-migra-desc{color:rgba(255,255,255,.74);font-size:var(--text-lg);line-height:1.62;margin-bottom:24px}
.vsg-migra-points{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:13px}
.vsg-migra-points li{display:flex;align-items:flex-start;gap:12px;color:rgba(255,255,255,.92);font-size:var(--text-base);line-height:1.45}
.vsg-migra-points li svg{flex-shrink:0;margin-top:1px;color:var(--fx-brand-300)}
.vsg-migra-cta{box-shadow:0 12px 40px rgba(91,184,245,.28)}
.vsg-page .comofunciona-flow{margin-top:38px;grid-template-columns:repeat(3,1fr);max-width:920px;margin-left:auto;margin-right:auto}
/* Tabla comparativa — único componente sin equivalente en el tema; con variables del tema */
.vsg-table-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--color-gray-border);border-radius:16px;background:var(--color-white);box-shadow:0 2px 12px rgba(13,17,32,.05)}
.vsg-table{width:100%;border-collapse:collapse;font-size:var(--text-base);min-width:680px}
.vsg-table th,.vsg-table td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-gray-border);line-height:1.55}
.vsg-table tr:last-child td{border-bottom:none}
.vsg-table thead th{background:var(--color-gray-bg);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.4px;color:var(--color-gray-text);font-family:var(--font-brand)}
.vsg-table thead th.vsg-fx{color:var(--color-bolt)}
.vsg-table td.vsg-feat{font-weight:700;color:var(--color-ink);width:22%;font-family:var(--font-brand)}
.vsg-table td{color:var(--color-gray-text)}
.vsg-table tbody td:last-child{color:var(--color-ink)}
/* FAQ acordeón con estética del tema */
.vsg-faq{max-width:780px;margin:40px auto 0}
.vsg-faq details{background:var(--color-white);border:1px solid var(--color-gray-border);border-radius:14px;margin-bottom:12px;padding:0 22px}
.vsg-faq summary{cursor:pointer;font-weight:600;font-size:var(--text-md);padding:18px 0;list-style:none;position:relative;padding-right:32px;color:var(--color-ink)}
.vsg-faq summary::-webkit-details-marker{display:none}
.vsg-faq summary::after{content:"+";position:absolute;right:2px;top:14px;font-size:22px;color:var(--color-bolt);font-weight:400}
.vsg-faq details[open] summary::after{content:"–"}
.vsg-faq details p{padding-bottom:18px;font-size:var(--text-base);color:var(--color-gray-text);line-height:1.6}
.vsg-legal{max-width:900px;margin:8px auto 64px;font-size:var(--text-sm);color:var(--color-gray-text);line-height:1.6;padding-top:28px;border-top:1px solid var(--color-gray-border)}
.vsg-legal a{color:var(--color-gray-text)}

/* ─── MÓVIL (≤760px) ────────────────────────────────────── */
@media(max-width:760px){
    /* Pasos: apilar a una columna, cada paso en vertical (num arriba, título, desc).
       El tema fuerza flex-direction:row en móvil (asume un wrapper que aquí no existe),
       lo que apilaba num/título/desc en 3 columnas apretadas. Restauramos columna. */
    .vsg-page .comofunciona-flow{grid-template-columns:1fr;gap:28px;margin-top:28px;max-width:440px}
    .vsg-page .flow-step{flex-direction:column;align-items:center;text-align:center;padding:0 12px;border-bottom:none;gap:0}
    .vsg-page .flow-num{margin-bottom:16px;flex-shrink:0}

    /* Tabla → tarjetas apiladas (fin del scroll horizontal) */
    .vsg-table-wrap{overflow:visible;border:none;background:transparent;box-shadow:none;border-radius:0;margin-top:28px}
    .vsg-table{min-width:0;font-size:var(--text-base)}
    .vsg-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .vsg-table,.vsg-table tbody,.vsg-table tr,.vsg-table td{display:block;width:auto}
    .vsg-table tr{background:var(--color-white);border:1px solid var(--color-gray-border);border-radius:14px;margin-bottom:14px;box-shadow:0 2px 12px rgba(13,17,32,.05);overflow:hidden}
    .vsg-table td{border-bottom:1px solid var(--color-gray-border);padding:14px 18px}
    .vsg-table tr td:last-child{border-bottom:none}
    .vsg-table td.vsg-feat{width:auto;font-size:var(--text-md);background:var(--color-gray-bg);border-bottom:1px solid var(--color-gray-border)}
    .vsg-table td:nth-child(2)::before,
    .vsg-table td:nth-child(3)::before{display:block;font-family:var(--font-brand);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:5px}
    .vsg-table td:nth-child(2)::before{content:"Gesfincas";color:var(--color-gray-text)}
    .vsg-table td:nth-child(3)::before{content:"FixrOS";color:var(--color-bolt)}

    /* Hero / secciones un poco más compactas en pantalla pequeña */


    .vsg-page .cta-final-section{padding:48px 0}
    .vsg-page .hero-cta-row{flex-direction:column;align-items:stretch;gap:12px}
    .vsg-page .hero-cta-row .hero-cta{width:100%}

    /* Banda de migración: apilar figura sobre el cuerpo */
    .vsg-migra{padding:52px 0}
    .vsg-migra-grid{grid-template-columns:1fr;gap:28px;text-align:center}
    .vsg-migra-figure{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);padding-right:0;padding-bottom:24px}
    .vsg-migra-points{text-align:left;max-width:330px;margin-left:auto;margin-right:auto}
    .vsg-migra-cta{width:100%;justify-content:center}
}