/* ============================================================================
   SOFIAPPS · CSS CORPORATE UNIFICADO
   Generado desde todos los <style> y style="" de los templates corporate.
   Los bloques repetidos fueron deduplicados y los exclusivos se aíslan por página.
   Cargar después de assets/css/sofiapps.css.
   ============================================================================ */

:root {
    --sf-sys-blue: #071a31;
    --sf-sys-blue-dark: #03111f;
    --sf-sys-green: #25d366;
}

/* ===== UTILIDADES EXTRAÍDAS DE style="" ===== */
.sf-u-accent-green {
    color: #25d366 !important;
}

.sf-u-flex-zero {
    margin: 0 !important;
    display: flex !important;
}

.sf-u-cursor-pointer {
    cursor: pointer !important;
}

/* ===== BLOQUES COMPARTIDOS · DEDUPLICADOS ===== */

/* compartido por 17 templates: membresia_partner.html, servicios.html, solicitud_cotizacion.html, solicitud_demo.html, soluciones/agencias_marketing.html, … (+12) */
/* ============================================================
       CONTENEDORES PREPARADOS PARA VIMEO
       - No cargan iframe.
       - No hacen solicitudes a Vimeo.
       - Cuando tengas el ID, reemplaza el contenido del slot por
         el iframe oficial o inicialízalo bajo interacción del usuario.
    ============================================================ */
.sf-vimeo-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 18px;
    background:
        radial-gradient(circle at 82% 18%, rgba(37, 211, 102, .10), transparent 28%),
        linear-gradient(145deg, #f8fbfd 0%, #eef4f8 100%);
    box-shadow: 0 18px 44px rgba(11, 53, 88, .08);
    contain: layout paint;
}

.sf-vimeo-slot__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: #0b3558;
}

.sf-vimeo-slot__placeholder-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 11px 16px;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    font: 800 13px/1.2 "Inter", sans-serif;
    box-shadow: 0 8px 24px rgba(11, 53, 88, .07);
}

.sf-vimeo-slot__placeholder-inner i {
    color: #25d366;
    font-size: 18px;
}

.sf-bg-video-box .sf-vimeo-slot,
.sf-video-box .sf-vimeo-slot {
    width: 100%;
    height: auto;
    min-height: 0;
}

@media (max-width: 767.98px) {
    .sf-vimeo-slot {
        border-radius: 14px;
    }
}

/* compartido por 2 templates: invertir.html, trabaja_con_nosotros.html */
.sf-video-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 22px;
    background: linear-gradient(135deg, #0b3558, #123f66);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    box-shadow: 0 18px 44px rgba(11, 53, 88, .14);
}

.sf-video-placeholder i {
    font-size: 44px;
    color: #25D366;
}

.sf-video-placeholder span {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

/* compartido por 2 templates: iot_robotica.html, soluciones/gimnasios.html */
.sf-vimeo-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 18px;
    background:
        radial-gradient(circle at 82% 18%, rgba(37, 211, 102, .10), transparent 28%),
        linear-gradient(145deg, #f8fbfd 0%, #eef4f8 100%);
    box-shadow: 0 18px 44px rgba(11, 53, 88, .08);
    contain: layout paint;
}

.sf-vimeo-slot__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: #0b3558;
}

.sf-vimeo-slot__placeholder-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 11px 16px;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    font: 800 13px/1.2 "Inter", sans-serif;
    box-shadow: 0 8px 24px rgba(11, 53, 88, .07);
}

.sf-vimeo-slot__placeholder-inner i {
    color: #25d366;
    font-size: 18px;
}

.sf-bg-video-box .sf-vimeo-slot,
.sf-video-box .sf-vimeo-slot {
    width: 100%;
    height: auto;
    min-height: 0;
}

@media (max-width: 767.98px) {
    .sf-vimeo-slot {
        border-radius: 14px;
    }
}

/* compartido por 18 templates: membresia_partner.html, portafolio.html, servicios.html, soluciones/agencias_marketing.html, soluciones/api_facturacion_electronica.html, … (+13) */
/* ================================================================
   CONTENIDO EDITORIAL  ·  bloques añadidos para posicionamiento
   Usa las variables y clases del resto de la página.
   ================================================================ */
.sf-nc {
    max-width: 820px;
    margin: 0 auto
}

.sf-nc p {
    margin: 0 0 18px;
    color: #475569;
    font-size: 17px;
    line-height: 1.75
}

.sf-nc p:first-child {
    color: #334155;
    font-size: 19px
}

.sf-nc p:last-child {
    margin-bottom: 0
}

.sf-nh {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center
}

.sf-nh .sf-neyebrow {
    margin: 0 0 10px;
    color: #25d366;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.sf-nh p {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.6
}

.sf-ndg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    max-width: 980px;
    margin: 0 auto
}

.sf-nd {
    padding: 26px 24px;
    background: #fff;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 16px
}

.sf-nd h3 {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 12px;
    color: #0b3558;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35
}

.sf-nd h3::before {
    flex: 0 0 6px;
    width: 6px;
    height: 22px;
    margin-top: 2px;
    background: #25d366;
    border-radius: 3px;
    content: ""
}

.sf-nd p {
    margin: 0;
    padding-left: 17px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.65
}

.sf-npl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    list-style: none
}

.sf-np {
    display: flex;
    align-items: flex-start;
    gap: 14px
}

.sf-np span {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    color: #16a34a;
    background: rgba(37, 211, 102, .14);
    font-size: 16px;
    font-weight: 800
}

.sf-np h3 {
    margin: 6px 0 6px;
    color: #0b3558;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3
}

.sf-np p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6
}

.sf-nfq {
    max-width: 820px;
    margin: 0 auto
}

.sf-nf {
    margin-bottom: 12px;
    padding: 0 22px;
    background: #fff;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 14px;
    transition: border-color .18s ease, box-shadow .18s ease
}

.sf-nf[open] {
    border-color: rgba(37, 211, 102, .45);
    box-shadow: 0 10px 30px rgba(11, 53, 88, .07)
}

.sf-nf summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    color: #0b3558;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none
}

.sf-nf summary::-webkit-details-marker {
    display: none
}

.sf-nf summary i {
    position: relative;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(37, 211, 102, .12)
}

.sf-nf summary i::before,
.sf-nf summary i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #16a34a;
    content: "";
    transform: translate(-50%, -50%);
    transition: opacity .18s ease
}

.sf-nf summary i::before {
    width: 11px;
    height: 2px
}

.sf-nf summary i::after {
    width: 2px;
    height: 11px
}

.sf-nf[open] summary i::after {
    opacity: 0
}

.sf-nf .sf-nfa {
    padding: 0 0 22px;
    color: #475569;
    font-size: 16px;
    line-height: 1.7
}

.sf-nf .sf-nfa p {
    margin: 0
}

.sf-nvid {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    border: 1px dashed rgba(11, 53, 88, .25);
    border-radius: 18px;
    background: linear-gradient(145deg, #0b3558 0%, #16406b 100%)
}

.sf-nvid__txt {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    color: rgba(255, 255, 255, .86);
    font-size: 15px;
    text-align: center;
    line-height: 1.6
}

.sf-nvid iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0
}

.sf-notras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    max-width: 1040px;
    margin: 0 auto
}

.sf-notra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 12px;
    color: #0b3558;
    text-decoration: none;
    transition: .18s ease
}

.sf-notra:hover {
    border-color: rgba(37, 211, 102, .5);
    color: #0b3558;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(11, 53, 88, .08)
}

.sf-notra b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35
}

.sf-notra em {
    flex-shrink: 0;
    color: #25d366;
    font-size: 17px;
    font-style: normal
}

.sf-nseo {
    border-top: 1px solid rgba(11, 53, 88, .08)
}

.sf-nseo .sf-nc h2 {
    margin: 0 0 22px;
    color: #0b3558;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25
}

.sf-nseo .sf-nc h3 {
    margin: 32px 0 14px;
    color: #0b3558;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3
}

.sf-nseo .sf-nc ol {
    margin: 0;
    padding-left: 20px;
    color: #475569;
    font-size: 16px;
    line-height: 1.75
}

.sf-nseo .sf-nc ol li {
    margin-bottom: 12px;
    padding-left: 4px
}

.sf-nseo .sf-nc ol strong {
    color: #0b3558;
    font-weight: 700
}

.sf-nseo .sf-nc p {
    font-size: 16px
}

@media screen and (max-width:767px) {
    .sf-nc p {
        font-size: 16px
    }

    .sf-nc p:first-child {
        font-size: 17px
    }

    .sf-ndg,
    .sf-notras {
        grid-template-columns: 1fr
    }

    .sf-nd {
        padding: 20px 18px
    }

    .sf-nf {
        padding: 0 16px
    }

    .sf-nf summary {
        padding: 16px 0;
        font-size: 16px
    }

    .sf-nseo .sf-nc h2 {
        font-size: 22px
    }

    .sf-nseo .sf-nc h3 {
        font-size: 17px
    }
}

/* compartido por 13 templates: soluciones/agencias_marketing.html, soluciones/clinicas_dentales.html, soluciones/clinicas_veterinarias.html, soluciones/garita_electronica.html, soluciones/gimnasios.html, … (+8) */
.sf-sales-flow .sf-system-green-word {
    color: #25d366 !important;
}

/* ================================================================
   CTA LIGERO · respeta la composición original de cada sistema
   No modifica posiciones ni proporciones de background.png.
================================================================ */
.sf-system-restored .sf-block-title.section-title {
    margin-bottom: clamp(34px, 4vw, 54px) !important;
    color: #071a31 !important;
}

.sf-system-restored .sf-block-title.section-title .sf-one-green {
    color: #25d366 !important;
}

/* Solo aseguramos que el contenido audiovisual sea horizontal.
   No tocamos .sf-bg-video-wrap ni .sf-bg-video-box. */
.sf-system-restored .sf-bg-video-box .sf-vimeo-slot,
.sf-system-restored .sf-block-video .sf-vimeo-slot,
.sf-system-restored .sf-video-box .sf-vimeo-slot {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
}

.sf-system-restored .sf-system-cta {
    width: min(100%, 1040px);
    margin: clamp(44px, 5vw, 68px) auto clamp(50px, 5.8vw, 78px);
    padding: 0 12px;
    text-align: center;
}

.sf-system-restored .sf-system-cta__trial {
    margin: 0;
    color: #071a31 !important;
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 4.5vw, 60px);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.sf-system-restored .sf-system-cta__trial .sf-free-word {
    color: #25d366 !important;
}

.sf-system-restored .sf-system-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(24px, 2.5vw, 32px);
}

.sf-system-restored .sf-system-cta__form {
    display: flex;
    margin: 0;
}

.sf-system-restored .sf-system-cta__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    min-height: 50px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 12px !important;
    background: #041523 !important;
    color: #fff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(4, 21, 35, .14) !important;
    cursor: pointer !important;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

.sf-system-restored .sf-system-cta__btn:hover,
.sf-system-restored .sf-system-cta__btn:focus-visible {
    color: #fff !important;
    background: #071a31 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(4, 21, 35, .19) !important;
}

.sf-system-restored .sf-system-cta__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 9px !important;
    background: #071a31 !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

.sf-system-restored .sf-system-cta__btn--account .sf-system-cta__icon {
    color: #7dd3fc !important;
    box-shadow: 0 0 13px rgba(56, 189, 248, .55), inset 0 0 0 1px rgba(125, 211, 252, .20) !important;
}

.sf-system-restored .sf-system-cta__btn--wa .sf-system-cta__icon {
    color: #25d366 !important;
    box-shadow: 0 0 13px rgba(37, 211, 102, .50), inset 0 0 0 1px rgba(37, 211, 102, .18) !important;
}

.sf-system-restored .sf-system-cta__btn--google .sf-system-cta__icon {
    background: #fff !important;
    box-shadow: 0 0 10px rgba(66, 133, 244, .34), 0 0 18px rgba(234, 67, 53, .20), 0 0 24px rgba(52, 168, 83, .16) !important;
}

.sf-system-restored .sf-system-google-icon {
    display: block;
    width: 18px;
    height: 18px;
}

/* Aire real antes de la zona original de texto + video derecho. */
.sf-system-restored .sf-block-content {
    margin-top: 0 !important;
}

@media (max-width:767.98px) {
    .sf-system-restored .sf-block-title.section-title {
        margin-bottom: 30px !important;
    }

    .sf-system-restored .sf-system-cta {
        margin: 38px auto 50px;
        padding: 0;
    }

    .sf-system-restored .sf-system-cta__trial {
        font-size: clamp(32px, 10vw, 46px);
    }

    .sf-system-restored .sf-system-cta__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, 430px);
        margin: 22px auto 0;
    }

    .sf-system-restored .sf-system-cta__form,
    .sf-system-restored .sf-system-cta__btn {
        width: 100% !important;
    }
}

/* compartido por 13 templates: soluciones/agencias_marketing.html, soluciones/clinicas_dentales.html, soluciones/clinicas_veterinarias.html, soluciones/garita_electronica.html, soluciones/gimnasios.html, … (+8) */
/* ================================================================
   AJUSTE FINAL · ESPACIADO + VIDEO HORIZONTAL
   - Acerca la primera sección al menú.
   - Reduce aprox. 50% los márgenes entre título, video y CTA.
   - Mantiene la estructura original y la columna derecha.
   - Fuerza las cajas audiovisuales a 16:9 sin cambiar su posición.
================================================================ */
.sf-sales-flow>.sf-block-section.sf-system-restored {
    padding-top: clamp(20px, 2.2vw, 32px) !important;
}

.sf-system-restored .sf-block-header {
    margin: 0 0 7px !important;
}

.sf-system-restored .sf-block-header .sf-badge {
    margin-bottom: 0 !important;
}

.sf-system-restored .sf-block-title.section-title {
    margin-top: 0 !important;
    margin-bottom: clamp(16px, 2vw, 27px) !important;
}

.sf-system-restored .row {
    margin-top: 0 !important;
}

/* Video principal: conserva top/left/transform del tema, solo corrige proporción. */
.sf-system-restored .sf-bg-video-box {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

.sf-system-restored .sf-bg-video-box>.sf-vimeo-slot {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

/* Videos de la columna derecha y secciones inferiores. */
.sf-system-restored .sf-block-video {
    min-width: 0 !important;
}

.sf-system-restored .sf-block-video .sf-video-box,
.sf-system-restored .sf-video-box {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

.sf-system-restored .sf-block-video .sf-video-box>.sf-vimeo-slot,
.sf-system-restored .sf-video-box>.sf-vimeo-slot {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

/* La llamada de prueba queda cerca del video, con aire pero sin huecos enormes. */
.sf-system-restored .sf-system-cta {
    margin: clamp(20px, 2.5vw, 34px) auto clamp(24px, 3vw, 39px) !important;
}

.sf-system-restored .sf-system-cta__actions {
    margin-top: clamp(12px, 1.4vw, 16px) !important;
}

.sf-system-restored .sf-block-content {
    margin-top: 0 !important;
}

@media (max-width:767.98px) {
    .sf-sales-flow>.sf-block-section.sf-system-restored {
        padding-top: 16px !important;
    }

    .sf-system-restored .sf-block-title.section-title {
        margin-bottom: 16px !important;
    }

    .sf-system-restored .sf-system-cta {
        margin: 20px auto 28px !important;
    }

    .sf-system-restored .sf-system-cta__actions {
        margin-top: 12px !important;
    }
}

/* ===== BLOQUES EXCLUSIVOS · AISLADOS POR PÁGINA ===== */

/* landing_sofiapps.html · bloque 1 */
body:has(.sf-page-landing-sofiapps) {
    --sf-home-navy: #0b3558;
    --sf-home-navy-dark: #071f34;
    --sf-home-purple: #6f43d6;
    --sf-home-blue: #2b68d8;
    --sf-home-green: #27b868;
    --sf-home-orange: #d9853f;
    --sf-home-text: #5a7694;
    --sf-home-surface: #f7f9fc;
    --sf-home-border: rgba(11, 53, 88, .12);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero,
body:has(.sf-page-landing-sofiapps) #sf-home-hero *,
body:has(.sf-page-landing-sofiapps) #sf-home-hero *::before,
body:has(.sf-page-landing-sofiapps) #sf-home-hero *::after {
    box-sizing: border-box;
}

/* ==========================================================
       BADGES
    ========================================================== */
body:has(.sf-page-landing-sofiapps) .sf-sales-flow .sf-badge,
body:has(.sf-page-landing-sofiapps) .sf-final-section .sf-badge,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    margin: 0 0 14px;
    padding: 7px 13px;
    border: 1px solid rgba(111, 67, 214, .24) !important;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(111, 67, 214, .10), rgba(43, 104, 216, .07)) !important;
    color: #392481 !important;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(57, 36, 129, .07);
}

body:has(.sf-page-landing-sofiapps) .sf-sales-flow .sf-badge i,
body:has(.sf-page-landing-sofiapps) .sf-final-section .sf-badge i,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-badge i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #6f43d6 !important;
    font-size: 15px;
    line-height: 1;
}

body:has(.sf-page-landing-sofiapps) .sf-final-section .sf-badge.sf-badge-light {
    border-color: rgba(68, 228, 130, .42) !important;
    background: rgba(68, 228, 130, .13) !important;
    color: #fff !important;
    box-shadow: none;
}

body:has(.sf-page-landing-sofiapps) .sf-final-section .sf-badge.sf-badge-light i {
    color: #5ce792 !important;
}

/* ==========================================================
       HERO · SLIDER GRANDE ARRIBA
    ========================================================== */
body:has(.sf-page-landing-sofiapps) #sf-home-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: clamp(34px, 4.2vw, 66px) 0 clamp(50px, 5.5vw, 82px);
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 18%, rgba(111, 67, 214, .075), transparent 25%),
        radial-gradient(circle at 94% 30%, rgba(43, 104, 216, .07), transparent 28%),
        radial-gradient(circle at 55% 100%, rgba(39, 184, 104, .055), transparent 34%),
        #fff;
    font-family: "Inter", sans-serif;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-shell {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(calc(100% - 72px), 1480px);
    max-width: 1480px;
    margin: 0 auto;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-showcase {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 34px clamp(18px, 3.2vw, 52px) 38px;
    overflow: visible;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-window {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(11, 53, 88, .14);
    border-radius: 22px;
    background: #fff;
    box-shadow:
        0 34px 82px rgba(7, 31, 52, .16),
        0 8px 24px rgba(11, 53, 88, .07);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-browserbar {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #edf1f5;
    background: rgba(255, 255, 255, .98);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-browserbar>span {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #d6dce4;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-browserbar>span:nth-child(1) {
    background: #d66f6f;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-browserbar>span:nth-child(2) {
    background: #d9a950;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-browserbar>span:nth-child(3) {
    background: #58ae77;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-browserbar strong {
    min-width: 0;
    margin-left: 6px;
    overflow: hidden;
    color: var(--sf-home-navy);
    font-size: 11px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-swiper,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-swiper .swiper-wrapper,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-swiper .swiper-slide {
    width: 100%;
    min-width: 0;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-swiper {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f3f6f9;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
    height: auto;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-swiper .swiper-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    overflow: hidden;
    background: #f3f6f9;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-screenshot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7.3;
    margin: 0;
    object-fit: cover;
    object-position: top center;
    background: #f3f6f9;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-slide-label {
    position: absolute;
    left: clamp(12px, 1.5vw, 22px);
    bottom: clamp(12px, 1.5vw, 22px);
    z-index: 7;
    max-width: calc(100% - 130px);
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 11px;
    background: rgba(7, 31, 52, .78);
    color: #fff;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-slide-label strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-slider-controls {
    position: absolute;
    right: clamp(12px, 1.5vw, 22px);
    bottom: clamp(12px, 1.5vw, 22px);
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 7px;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-prev,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .43);
    border-radius: 10px;
    background: rgba(7, 31, 52, .78);
    color: #fff;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-prev:hover,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-next:hover,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-prev:focus-visible,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-next:focus-visible {
    background: var(--sf-home-navy);
    transform: translateY(-1px);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    margin: 15px 0 0;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0;
    border-radius: 99px;
    background: var(--sf-home-navy);
    opacity: .20;
    transition: width .2s ease, opacity .2s ease;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-pagination .swiper-pagination-bullet-active {
    width: 27px;
    opacity: .92;
}

/* Shapes vivos, pero mate y discretos */
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-shape,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-dots {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-shape--navy {
    z-index: -3;
    width: 33%;
    height: 58%;
    right: 1%;
    top: 0;
    border-radius: 42% 58% 62% 38% / 44% 39% 61% 56%;
    background: #6f43d6;
    opacity: .18;
    animation: sfShapeFloatA 9s ease-in-out infinite;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-shape--deep {
    z-index: -2;
    width: 29%;
    height: 30%;
    left: 4%;
    bottom: 4%;
    border-radius: 58% 42% 46% 54% / 58% 61% 39% 42%;
    background: #2b68d8;
    opacity: .15;
    animation: sfShapeFloatB 11s ease-in-out infinite;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-shape--orbit {
    z-index: -1;
    width: 132px;
    height: 132px;
    left: 1%;
    top: 8%;
    border: 18px solid rgba(217, 133, 63, .20);
    border-radius: 38px;
    background: transparent;
    transform: rotate(24deg);
    animation: sfShapeOrbit 13s ease-in-out infinite;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-shape--mint {
    z-index: -2;
    width: 19%;
    height: 22%;
    right: 11%;
    bottom: 0;
    border-radius: 64% 36% 53% 47% / 48% 56% 44% 52%;
    background: #27b868;
    opacity: .14;
    animation: sfShapeFloatC 10s ease-in-out infinite;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-dots {
    z-index: -1;
    left: 0;
    bottom: 12%;
    width: 94px;
    height: 94px;
    opacity: .20;
    background-image: radial-gradient(circle, #0b3558 1.5px, transparent 1.7px);
    background-size: 12px 12px;
}

@keyframes sfShapeFloatA {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(-12px, 10px, 0) rotate(2deg);
    }
}

@keyframes sfShapeFloatB {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(13px, -9px, 0);
    }
}

@keyframes sfShapeFloatC {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-9px, -8px, 0);
    }
}

@keyframes sfShapeOrbit {

    0%,
    100% {
        transform: rotate(24deg) translate3d(0, 0, 0);
    }

    50% {
        transform: rotate(31deg) translate3d(8px, -7px, 0);
    }
}

/* ==========================================================
       HERO · MENSAJE Y 3 RUTAS DE ENTRADA DEBAJO DEL SLIDER
       Una idea por ruta: probar · preguntar · unirse
    ========================================================== */
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-copy {
    position: relative;
    z-index: 6;
    width: min(100%, 1120px);
    max-width: 1120px;
    margin: clamp(26px, 3.2vw, 46px) auto 0;
    text-align: center;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-badge {
    margin: 0 auto 15px;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-heading {
    max-width: 900px;
    margin: 0 auto;
    color: var(--sf-home-navy);
    font-size: clamp(42px, 4.6vw, 70px);
    font-weight: 950;
    line-height: 1.015;
    letter-spacing: -.048em;
    text-wrap: balance;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-highlight {
    color: var(--sf-home-purple);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-subtitle {
    max-width: 680px;
    margin: 16px auto 0;
    color: var(--sf-home-text);
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 550;
    line-height: 1.6;
    text-wrap: balance;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-routes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 1040px);
    margin: 27px auto 0;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-google-form {
    width: 100%;
    height: 100%;
    margin: 0;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-route {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 74px;
    height: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    font-family: "Inter", sans-serif;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-route:hover,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-route:focus-visible {
    transform: translateY(-2px);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    font-size: 20px;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-copy strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.22;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-copy small {
    display: block;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.32;
    opacity: .78;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-company {
    border: 1px solid rgba(111, 67, 214, .18);
    background: #6f43d6;
    color: #fff;
    box-shadow: 0 12px 28px rgba(111, 67, 214, .20);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-company .sf-route-icon {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-company:hover,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-company:focus-visible {
    color: #fff;
    background: #643bc5;
    box-shadow: 0 16px 32px rgba(111, 67, 214, .25);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-community {
    border: 1px solid rgba(43, 104, 216, .18);
    background: #eef4ff;
    color: #174f9f;
    box-shadow: 0 10px 25px rgba(43, 104, 216, .09);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-community .sf-route-icon {
    background: #fff;
    color: #2b68d8;
    box-shadow: inset 0 0 0 1px rgba(43, 104, 216, .10);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-community:hover,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-community:focus-visible {
    color: #174f9f;
    border-color: rgba(43, 104, 216, .28);
    background: #e5efff;
    box-shadow: 0 14px 30px rgba(43, 104, 216, .13);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-whatsapp {
    border: 1px solid rgba(39, 184, 104, .22);
    background: #eaf8f0;
    color: #176b3d;
    box-shadow: 0 10px 25px rgba(39, 184, 104, .08);
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-whatsapp .sf-route-icon {
    background: #27b868;
    color: #fff;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-whatsapp:hover,
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-whatsapp:focus-visible {
    color: #176b3d;
    border-color: rgba(39, 184, 104, .34);
    background: #e1f5e9;
    box-shadow: 0 14px 30px rgba(39, 184, 104, .12);
}

/* Sello "gratis" sobre la ruta principal */
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-company {
    position: relative;
    overflow: hidden;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-flag {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

/* ==========================================================
       MEDIOS / VIDEOS DE LAS SECCIONES: SIEMPRE HORIZONTALES
    ========================================================== */
body:has(.sf-page-landing-sofiapps) .sf-block-video {
    width: 100%;
    min-width: 0;
}

body:has(.sf-page-landing-sofiapps) .sf-block-video .sf-video-box {
    position: relative !important;
    width: 100% !important;
    max-width: 640px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    border: 1px solid rgba(11, 53, 88, .08);
    border-radius: 18px !important;
    background: #f5f7fa !important;
    box-shadow: 0 18px 44px rgba(11, 53, 88, .09);
}

body:has(.sf-page-landing-sofiapps) .sf-block-video .sf-video-box img,
body:has(.sf-page-landing-sofiapps) .sf-block-video .sf-video-box video,
body:has(.sf-page-landing-sofiapps) .sf-block-video .sf-video-box iframe,
body:has(.sf-page-landing-sofiapps) .sf-block-video .sf-video-box .sf-section-media-img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
}

body:has(.sf-page-landing-sofiapps) .sf-block-section .sf-block-title,
body:has(.sf-page-landing-sofiapps) .sf-final-section h2 {
    line-height: 1.12;
}

body:has(.sf-page-landing-sofiapps) .sf-block-section p,
body:has(.sf-page-landing-sofiapps) .sf-final-section p {
    font-size: 18px;
    line-height: 1.65;
}

body:has(.sf-page-landing-sofiapps) .sf-block-section,
body:has(.sf-page-landing-sofiapps) .sf-final-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 760px;
}

/* ==========================================================
       RESPONSIVE
    ========================================================== */
@media (max-width: 1180px) {
    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-shell {
        width: min(calc(100% - 48px), 1100px);
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-screenshot {
        aspect-ratio: 16 / 8.2;
    }
}

@media (max-width: 900px) {
    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-routes {
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, 620px);
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-route {
        min-height: 68px;
    }
}

@media (max-width: 767.98px) {
    body:has(.sf-page-landing-sofiapps) #sf-home-hero {
        padding: 24px 0 46px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-shell {
        width: min(calc(100% - 24px), 920px);
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-showcase {
        padding: 15px 0 24px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-window {
        border-radius: 15px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-browserbar {
        min-height: 34px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-screenshot {
        aspect-ratio: 16 / 9.3;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-copy {
        margin-top: 22px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-badge,
    body:has(.sf-page-landing-sofiapps) .sf-sales-flow .sf-badge,
    body:has(.sf-page-landing-sofiapps) .sf-final-section .sf-badge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-heading {
        font-size: clamp(37px, 11vw, 52px);
        letter-spacing: -.04em;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-subtitle {
        font-size: 16px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-slide-label {
        left: 8px;
        bottom: 8px;
        max-width: calc(100% - 88px);
        padding: 7px 9px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-slider-controls {
        right: 8px;
        bottom: 8px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-prev,
    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-next {
        width: 32px;
        height: 32px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-shape--orbit,
    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-erp-dots {
        display: none;
    }

    body:has(.sf-page-landing-sofiapps) .sf-block-section p,
    body:has(.sf-page-landing-sofiapps) .sf-final-section p {
        font-size: 16px;
    }

    body:has(.sf-page-landing-sofiapps) .sf-block-video .sf-video-box {
        max-width: 100% !important;
        border-radius: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    body:has(.sf-page-landing-sofiapps) #sf-home-hero *,
    body:has(.sf-page-landing-sofiapps) #sf-home-hero *::before,
    body:has(.sf-page-landing-sofiapps) #sf-home-hero *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================
       CONVERSIÓN COMERCIAL · GMAIL · PRUEBAS DE VALOR
    ========================================================== */
body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-route-icon--gmail,
body:has(.sf-page-landing-sofiapps) .sf-network-choice-icon--gmail {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(11, 53, 88, .08);
}

body:has(.sf-page-landing-sofiapps) .sf-gmail-svg {
    display: block;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-proofline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    width: min(100%, 1040px);
    margin: 18px auto 0;
    color: #5a7694;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.35;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-proofline span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-proofline i {
    color: #1b9c55;
    font-size: 14px;
}

/* Comunidad: dos audiencias, dos conversiones claras */
body:has(.sf-page-landing-sofiapps) .sf-community-flow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body:has(.sf-page-landing-sofiapps) .sf-community-flow .sf-community-link {
    min-height: 84px;
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 1080px;
    margin: 30px auto 0;
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
    align-items: start;
    padding: 22px;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11, 53, 88, .055);
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-card--business {
    border-color: rgba(111, 67, 214, .18);
    background: linear-gradient(145deg, rgba(111, 67, 214, .055), rgba(255, 255, 255, .96));
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-card--buyer {
    border-color: rgba(39, 184, 104, .20);
    background: linear-gradient(145deg, rgba(39, 184, 104, .055), rgba(255, 255, 255, .96));
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(111, 67, 214, .10);
    color: #6f43d6;
    font-size: 21px;
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-card strong {
    display: block;
    margin: 1px 0 5px;
    color: #0b3558;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.28;
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-card p {
    margin: 0 !important;
    color: #5a7694 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-btn,
body:has(.sf-page-landing-sofiapps) .sf-network-google-form {
    grid-column: 1 / -1;
}

body:has(.sf-page-landing-sofiapps) .sf-network-google-form {
    margin: 0;
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-height: 42px;
    margin-top: 5px;
    padding: 9px 15px;
    border: 0;
    border-radius: 10px;
    background: #6f43d6;
    color: #fff !important;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 9px 22px rgba(111, 67, 214, .17);
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-btn--gmail {
    background: #fff;
    color: #174f9f !important;
    border: 1px solid rgba(43, 104, 216, .18);
    box-shadow: 0 8px 20px rgba(43, 104, 216, .08);
}

body:has(.sf-page-landing-sofiapps) .sf-network-choice-btn:hover,
body:has(.sf-page-landing-sofiapps) .sf-network-choice-btn:focus-visible {
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    body:has(.sf-page-landing-sofiapps) .sf-network-choice {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    body:has(.sf-page-landing-sofiapps) .sf-community-flow {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-proofline {
        gap: 7px 12px;
        font-size: 11.5px;
    }

    body:has(.sf-page-landing-sofiapps) #sf-home-hero .sf-hero-proofline span {
        white-space: normal;
    }
}

/* landing_sofiapps.html · bloque 2 */
/* ================================================================
       CONTENIDO EDITORIAL + SEO + FAQ · PEOPLE FIRST
    ================================================================ */
body:has(.sf-page-landing-sofiapps) .sf-nc {
    max-width: 860px;
    margin: 0 auto;
}

body:has(.sf-page-landing-sofiapps) .sf-nc.sf-nc-wide {
    max-width: 1040px;
}

body:has(.sf-page-landing-sofiapps) .sf-nc p {
    margin: 0 0 18px;
    color: #475569;
    font-size: 17px;
    line-height: 1.76;
}

body:has(.sf-page-landing-sofiapps) .sf-nc p:first-child {
    color: #334155;
    font-size: 19px;
}

body:has(.sf-page-landing-sofiapps) .sf-nc p:last-child {
    margin-bottom: 0;
}

body:has(.sf-page-landing-sofiapps) .sf-nc h2 {
    max-width: 900px;
    margin: 0 0 18px;
    color: #0b3558;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.025em;
}

body:has(.sf-page-landing-sofiapps) .sf-nc h3 {
    margin: 28px 0 10px;
    color: #0b3558;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.3;
}

body:has(.sf-page-landing-sofiapps) .sf-nh {
    max-width: 860px;
    margin: 0 auto 34px;
    text-align: center;
}

body:has(.sf-page-landing-sofiapps) .sf-nh .sf-neyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin: 0 0 10px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(39, 184, 104, .09);
    color: #16824a;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body:has(.sf-page-landing-sofiapps) .sf-nh p {
    max-width: 740px;
    margin: 12px auto 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.62;
}

body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto 38px;
}

body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-card {
    padding: 24px 22px;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(11, 53, 88, .045);
}

body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(111, 67, 214, .09);
    color: #6f43d6;
    font-size: 20px;
}

body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-card:nth-child(2) i {
    background: rgba(39, 184, 104, .10);
    color: #16824a;
}

body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-card:nth-child(3) i {
    background: rgba(43, 104, 216, .09);
    color: #2b68d8;
}

body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-card h3 {
    margin: 0 0 8px;
    color: #0b3558;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3;
}

body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-card p {
    margin: 0;
    color: #5a7694;
    font-size: 14.5px;
    line-height: 1.65;
}

body:has(.sf-page-landing-sofiapps) .sf-membership-explain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 1080px;
    margin: 30px auto 0;
}

body:has(.sf-page-landing-sofiapps) .sf-membership-card {
    padding: 25px;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 17px;
    background: #fff;
}

body:has(.sf-page-landing-sofiapps) .sf-membership-card--erp {
    border-color: rgba(111, 67, 214, .18);
    background: linear-gradient(145deg, rgba(111, 67, 214, .05), #fff);
}

body:has(.sf-page-landing-sofiapps) .sf-membership-card--community {
    border-color: rgba(39, 184, 104, .18);
    background: linear-gradient(145deg, rgba(39, 184, 104, .05), #fff);
}

body:has(.sf-page-landing-sofiapps) .sf-membership-card h3 {
    margin: 0 0 10px;
    color: #0b3558;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.3;
}

body:has(.sf-page-landing-sofiapps) .sf-membership-card p {
    margin: 0 0 12px;
    color: #5a7694;
    font-size: 14.5px;
    line-height: 1.65;
}

body:has(.sf-page-landing-sofiapps) .sf-membership-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body:has(.sf-page-landing-sofiapps) .sf-membership-card li {
    display: flex;
    gap: 8px;
    margin: 8px 0;
    color: #3f5f78;
    font-size: 14px;
    line-height: 1.45;
}

body:has(.sf-page-landing-sofiapps) .sf-membership-card li i {
    margin-top: 2px;
    color: #1b9c55;
}

body:has(.sf-page-landing-sofiapps) .sf-notras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto;
}

body:has(.sf-page-landing-sofiapps) .sf-notra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 15px 18px;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 12px;
    background: #fff;
    color: #0b3558;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body:has(.sf-page-landing-sofiapps) .sf-notra:hover,
body:has(.sf-page-landing-sofiapps) .sf-notra:focus-visible {
    border-color: rgba(39, 184, 104, .42);
    color: #0b3558;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(11, 53, 88, .07);
}

body:has(.sf-page-landing-sofiapps) .sf-notra b {
    font-size: 15px;
    font-weight: 760;
    line-height: 1.35;
}

body:has(.sf-page-landing-sofiapps) .sf-notra em {
    flex-shrink: 0;
    color: #27b868;
    font-size: 17px;
    font-style: normal;
}

body:has(.sf-page-landing-sofiapps) .sf-faq-section {
    position: relative;
    overflow: hidden;
}

body:has(.sf-page-landing-sofiapps) .sf-faq-section::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -190px;
    top: 80px;
    border-radius: 50%;
    background: rgba(111, 67, 214, .045);
    pointer-events: none;
}

body:has(.sf-page-landing-sofiapps) .sf-nfq {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto;
}

body:has(.sf-page-landing-sofiapps) .sf-nf {
    margin: 0;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(11, 53, 88, .035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body:has(.sf-page-landing-sofiapps) .sf-nf:hover {
    border-color: rgba(43, 104, 216, .18);
}

body:has(.sf-page-landing-sofiapps) .sf-nf[open] {
    border-color: rgba(39, 184, 104, .35);
    box-shadow: 0 12px 30px rgba(11, 53, 88, .065);
    transform: translateY(-1px);
}

body:has(.sf-page-landing-sofiapps) .sf-nf summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 16px 0;
    color: #0b3558;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.38;
    cursor: pointer;
    list-style: none;
}

body:has(.sf-page-landing-sofiapps) .sf-nf summary::-webkit-details-marker {
    display: none;
}

body:has(.sf-page-landing-sofiapps) .sf-nf summary i {
    position: relative;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(39, 184, 104, .11);
}

body:has(.sf-page-landing-sofiapps) .sf-nf summary i::before,
body:has(.sf-page-landing-sofiapps) .sf-nf summary i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #199451;
    content: "";
    transform: translate(-50%, -50%);
    transition: opacity .18s ease, transform .18s ease;
}

body:has(.sf-page-landing-sofiapps) .sf-nf summary i::before {
    width: 11px;
    height: 2px;
}

body:has(.sf-page-landing-sofiapps) .sf-nf summary i::after {
    width: 2px;
    height: 11px;
}

body:has(.sf-page-landing-sofiapps) .sf-nf[open] summary i::after {
    opacity: 0;
}

body:has(.sf-page-landing-sofiapps) .sf-nf .sf-nfa {
    padding: 0 0 19px;
    color: #52697e;
    font-size: 14.5px;
    line-height: 1.68;
}

body:has(.sf-page-landing-sofiapps) .sf-nf .sf-nfa p {
    margin: 0;
}

@media (max-width: 900px) {
    body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body:has(.sf-page-landing-sofiapps) .sf-membership-explain {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    body:has(.sf-page-landing-sofiapps) .sf-nfq {
        grid-template-columns: minmax(0, 1fr);
        max-width: 760px;
    }
}

@media (max-width: 767.98px) {
    body:has(.sf-page-landing-sofiapps) .sf-nc p {
        font-size: 16px;
    }

    body:has(.sf-page-landing-sofiapps) .sf-nc p:first-child {
        font-size: 17px;
    }

    body:has(.sf-page-landing-sofiapps) .sf-notras {
        grid-template-columns: 1fr;
    }

    body:has(.sf-page-landing-sofiapps) .sf-nf {
        padding: 0 16px;
    }

    body:has(.sf-page-landing-sofiapps) .sf-nf summary {
        min-height: 62px;
        padding: 14px 0;
        font-size: 15.5px;
    }

    body:has(.sf-page-landing-sofiapps) .sf-nf .sf-nfa {
        font-size: 14px;
    }

    body:has(.sf-page-landing-sofiapps) .sf-seo-commercial-card,
    body:has(.sf-page-landing-sofiapps) .sf-membership-card {
        padding: 20px;
    }
}

/* portafolio.html · bloque 1 */
body:has(.sf-page-portafolio) .sf-video-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 22px;
    background: linear-gradient(135deg, #0b3558, #123f66);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    box-shadow: 0 18px 44px rgba(11, 53, 88, .14);
}

body:has(.sf-page-portafolio) .sf-video-placeholder i {
    font-size: 44px;
    color: #25D366;
}

body:has(.sf-page-portafolio) .sf-video-placeholder span {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

body:has(.sf-page-portafolio) .sf-systems-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 46px;
    margin-top: 40px;
}

body:has(.sf-page-portafolio) .sf-systems-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(37, 211, 102, .15), rgba(37, 211, 102, .85), rgba(37, 211, 102, .15));
    border-radius: 999px;
}

body:has(.sf-page-portafolio) .sf-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    align-items: center;
}

body:has(.sf-page-portafolio) .sf-timeline-item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #25D366;
    border: 5px solid #fff;
    box-shadow: 0 0 0 8px rgba(37, 211, 102, .12);
    z-index: 2;
}

body:has(.sf-page-portafolio) .sf-timeline-reverse .sf-timeline-content {
    order: 2;
}

body:has(.sf-page-portafolio) .sf-timeline-reverse .sf-timeline-video {
    order: 1;
}

body:has(.sf-page-portafolio) .sf-timeline-content {
    background: #fff;
    border: 1px solid rgba(11, 53, 88, .10);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 16px 40px rgba(11, 53, 88, .08);
}

body:has(.sf-page-portafolio) .sf-timeline-content h3 {
    font-size: 24px;
    font-weight: 850;
    color: #0b3558;
    margin: 14px 0 10px;
}

body:has(.sf-page-portafolio) .sf-timeline-content p {
    font-size: 15px;
    line-height: 1.65;
    color: #5a7694;
    margin: 0;
}

body:has(.sf-page-portafolio) .sf-timeline-final .sf-timeline-content {
    background: linear-gradient(135deg, #0b3558, #123f66);
}

body:has(.sf-page-portafolio) .sf-timeline-final .sf-timeline-content h3,
body:has(.sf-page-portafolio) .sf-timeline-final .sf-timeline-content p {
    color: #fff;
}

body:has(.sf-page-portafolio) .sf-timeline-final .sf-community-flow {
    margin-top: 22px;
}

@media (max-width:991px) {
    body:has(.sf-page-portafolio) .sf-systems-timeline::before {
        left: 14px;
    }

    body:has(.sf-page-portafolio) .sf-timeline-item {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-left: 38px;
    }

    body:has(.sf-page-portafolio) .sf-timeline-item::before {
        left: 14px;
    }

    body:has(.sf-page-portafolio) .sf-timeline-reverse .sf-timeline-content,
    body:has(.sf-page-portafolio) .sf-timeline-reverse .sf-timeline-video {
        order: initial;
    }
}

/* soluciones/api_facturacion_electronica.html · bloque 1 */
body:has(.sf-page-soluciones-api-facturacion-electronica) .api-hero .api-title {
    margin-bottom: 24px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-hero .api-actions {
    margin-top: 32px !important;
    margin-bottom: 36px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-hero .api-video-placeholder {
    margin-top: 52px !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* soluciones/api_facturacion_electronica.html · bloque 2 */
body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .api-hero {
    padding-top: 46px !important;
    padding-bottom: 42px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .api-badge {
    margin-bottom: 11px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .api-title {
    margin-bottom: 12px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .api-lead {
    margin-bottom: 15px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .api-actions {
    margin-top: 16px !important;
    margin-bottom: 18px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .api-proof {
    margin-top: 21px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .api-video-placeholder {
    width: min(100%, 920px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 24px auto 0 !important;
    aspect-ratio: 16 / 9 !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .sf-block-video .sf-video-box,
body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .sf-video-box {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .sf-block-video .sf-video-box>.sf-vimeo-slot,
body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .sf-video-box>.sf-vimeo-slot {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
}

@media (max-width:767.98px) {
    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page .api-hero {
        padding-top: 28px !important;
        padding-bottom: 34px !important;
    }
}

/* soluciones/api_facturacion_electronica.html · bloque 3 */
body:has(.sf-page-soluciones-api-facturacion-electronica) {
    --api-green: #25d366;
    --api-blue: #0b3558;
    --api-text: #5a7694;
    --api-soft: #f6faf8;
    --api-border: rgba(11, 53, 88, .10);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-page {
    background: #fff;
    color: var(--api-text);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-section {
    padding: 82px 0;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-soft {
    background: var(--api-soft);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-hero {
    text-align: center;
    padding-top: 92px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(37, 211, 102, .10);
    color: var(--api-green);
    font-size: .76rem;
    font-weight: 850;
    margin-bottom: 22px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-title {
    max-width: 920px;
    margin: 0 auto 18px;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.08;
    font-weight: 900;
    color: var(--api-blue);
    letter-spacing: -.04em;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-title span,
body:has(.sf-page-soluciones-api-facturacion-electronica) .api-section-title span {
    color: var(--api-green);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-lead {
    max-width: 760px;
    margin: 0 auto 30px;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--api-text);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 12px 22px;
    border-radius: 14px;
    text-decoration: none !important;
    font-weight: 850;
    font-size: .88rem;
    line-height: 1.1;
    transition: .18s ease;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-btn-primary {
    color: #fff !important;
    background: var(--api-green);
    box-shadow: 0 10px 22px rgba(37, 211, 102, .18);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-btn-primary:hover {
    transform: translateY(-1px);
    background: #20bd5a;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-btn-soft {
    color: var(--api-blue) !important;
    background: #fff;
    border: 1px solid var(--api-border);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 42px auto 0;
    max-width: 920px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-proof div,
body:has(.sf-page-soluciones-api-facturacion-electronica) .api-card {
    background: #fff;
    border: 1px solid var(--api-border);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 14px 35px rgba(11, 53, 88, .06);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-proof strong {
    display: block;
    color: var(--api-blue);
    font-size: 1.05rem;
    margin-bottom: 4px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-proof span {
    display: block;
    color: var(--api-text);
    font-size: .88rem;
    line-height: 1.45;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-video-placeholder {
    width: 100%;
    max-width: 920px;
    margin: 48px auto 0;
    aspect-ratio: 16/9;
    border-radius: 28px;
    background: linear-gradient(135deg, #0b3558, #123f66);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    box-shadow: 0 18px 44px rgba(11, 53, 88, .14);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-video-placeholder i {
    font-size: 48px;
    color: var(--api-green);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-section-header {
    text-align: center;
    margin-bottom: 42px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-section-title {
    max-width: 850px;
    margin: 0 auto 12px;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.15;
    font-weight: 900;
    color: var(--api-blue);
    letter-spacing: -.03em;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-section-text {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--api-text);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-card i {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 211, 102, .10);
    color: var(--api-green);
    font-size: 24px;
    margin-bottom: 16px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-card h3 {
    color: var(--api-blue);
    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 850;
    margin: 0 0 8px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-card p {
    margin: 0;
    color: var(--api-text);
    font-size: .9rem;
    line-height: 1.6;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-code {
    background: #0f172a;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(11, 53, 88, .16);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-code-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #111827;
    color: #cbd5e1;
    font-size: .78rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-code pre {
    margin: 0;
    padding: 22px;
    overflow: auto;
    color: #dbeafe;
    font-size: .84rem;
    line-height: 1.65;
    font-family: Consolas, Monaco, monospace;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-cta {
    text-align: center;
    border-radius: 34px;
    padding: 48px 28px;
    background: linear-gradient(135deg, #0b3558, #123f66);
    color: #fff;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-cta h2 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 14px;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-cta p {
    max-width: 680px;
    margin: 0 auto 24px;
    color: rgba(255, 255, 255, .86);
    line-height: 1.7;
}

@media (max-width:991px) {

    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-grid-4,
    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-grid-3,
    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-proof {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:600px) {
    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-section {
        padding: 58px 0;
    }

    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-grid-4,
    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-grid-3,
    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-proof {
        grid-template-columns: 1fr;
    }

    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-actions {
        flex-direction: column;
    }

    body:has(.sf-page-soluciones-api-facturacion-electronica) .api-btn {
        width: 100%;
    }
}

/* ===== CAPA CORRECTIVA FINAL COMPARTIDA ===== */
/* ============================================================================
   SOFIAPPS · SISTEMAS / SOLUCIONES
   Archivo CSS compartido para todas las páginas de corporate/soluciones/.
   Cargar DESPUÉS de sofiapps.css para que sea la única capa correctiva.

   Paleta:
   - Azul principal: #071a31
   - Azul botones:   #03111f
   - Verde acento:   #25d366
   ============================================================================ */

:root {
    --sf-sys-blue: #071a31;
    --sf-sys-blue-dark: #03111f;
    --sf-sys-green: #25d366;
    --sf-sys-text: #5a7694;
    --sf-sys-border: rgba(7, 26, 49, .12);
    --sf-sys-shadow: 0 16px 38px rgba(7, 26, 49, .10);
}

/* ============================================================================
   1. PRIMER BLOQUE DE LOS 13 SISTEMAS ESTÁNDAR
   No toca la landing. El scope .sf-system-restored existe solo en sistemas.
   ============================================================================ */

.sf-sales-flow .sf-system-restored {
    padding-top: 20px !important;
}

.sf-sales-flow .sf-system-restored>.container {
    padding-top: 0 !important;
}

.sf-system-restored .sf-block-header {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.sf-system-restored .sf-block-title.section-title {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    color: var(--sf-sys-blue) !important;
}

/* Solo la palabra marcada explícitamente puede ser verde. */
.sf-system-restored .sf-block-title.section-title .sf-one-green,
.sf-system-restored .sf-system-green-word {
    color: var(--sf-sys-green) !important;
}

/* Elimina <br> heredados que crean huecos artificiales. */
.sf-system-restored>.container>.row>br,
.sf-system-restored .sf-block-text>br {
    display: none !important;
}

.sf-system-restored>.container>.row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================================
   2. VIDEO PRINCIPAL MONTADO SOBRE background.png
   IMPORTANTE: no alteramos position/inset/transform de .sf-bg-video-box,
   así el tema conserva exactamente el montaje original sobre la imagen.
   Solo eliminamos alturas verticales heredadas del contenido audiovisual.
   ============================================================================ */

.sf-system-restored .sf-bg-video-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.sf-system-restored .sf-bg-video-wrap>img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.sf-system-restored .sf-bg-video-box {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

.sf-system-restored .sf-bg-video-box .sf-vimeo-slot,
.sf-system-restored .sf-bg-video-box iframe,
.sf-system-restored .sf-bg-video-box video {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    object-fit: cover !important;
}

.sf-system-restored .sf-bg-video-box .sf-vimeo-slot__placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* ============================================================================
   3. CTA ENTRE VIDEO PRINCIPAL Y BLOQUE TEXTO + VIDEO DERECHO
   Márgenes compactos: aprox. 50% menos que la versión anterior.
   ============================================================================ */

.sf-system-restored .sf-system-cta {
    width: min(100%, 1040px) !important;
    margin: 24px auto 30px !important;
    padding: 0 12px !important;
    text-align: center !important;
}

.sf-system-restored .sf-system-cta__trial {
    margin: 0 !important;
    color: var(--sf-sys-blue) !important;
    font-family: "Inter", sans-serif !important;
    font-size: clamp(32px, 4vw, 54px) !important;
    font-weight: 950 !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance;
}

/* En esta frase SOLO "gratis" es verde. */
.sf-system-restored .sf-system-cta__trial .sf-free-word {
    color: var(--sf-sys-green) !important;
}

.sf-system-restored .sf-system-cta__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 17px !important;
}

.sf-system-restored .sf-system-cta__form {
    display: flex !important;
    margin: 0 !important;
}

.sf-system-restored .sf-system-cta__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 17px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 11px !important;
    background: var(--sf-sys-blue-dark) !important;
    color: #fff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    box-shadow: 0 9px 22px rgba(3, 17, 31, .15) !important;
    cursor: pointer !important;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

.sf-system-restored .sf-system-cta__btn:hover,
.sf-system-restored .sf-system-cta__btn:focus-visible {
    background: var(--sf-sys-blue) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 13px 28px rgba(3, 17, 31, .22) !important;
}

.sf-system-restored .sf-system-cta__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 9px !important;
    background: #071a31 !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

/* Halos diferenciados: azul / verde / Google multicolor. */
.sf-system-restored .sf-system-cta__btn--account .sf-system-cta__icon {
    color: #60a5fa !important;
    box-shadow: 0 0 9px rgba(59, 130, 246, .58), 0 0 19px rgba(37, 99, 235, .24) !important;
}

.sf-system-restored .sf-system-cta__btn--wa .sf-system-cta__icon {
    color: var(--sf-sys-green) !important;
    box-shadow: 0 0 9px rgba(37, 211, 102, .58), 0 0 19px rgba(37, 211, 102, .24) !important;
}

.sf-system-restored .sf-system-cta__btn--google .sf-system-cta__icon {
    background: #fff !important;
    box-shadow:
        0 0 8px rgba(66, 133, 244, .38),
        0 0 14px rgba(234, 67, 53, .24),
        0 0 20px rgba(52, 168, 83, .20),
        0 0 25px rgba(251, 188, 5, .14) !important;
}

.sf-system-restored .sf-system-google-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}

/* ============================================================================
   4. BLOQUE ORIGINAL: TEXTO IZQUIERDA + VIDEO DERECHA
   Se conserva. Solo compactamos el espacio y garantizamos video horizontal.
   ============================================================================ */

.sf-system-restored .sf-block-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sf-system-restored .sf-block-video {
    min-width: 0 !important;
}

.sf-system-restored .sf-block-video .sf-video-box {
    position: relative !important;
    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

.sf-system-restored .sf-block-video .sf-vimeo-slot,
.sf-system-restored .sf-block-video iframe,
.sf-system-restored .sf-block-video video,
.sf-system-restored .sf-block-video img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
}

/* Videos secundarios de los sistemas: siempre horizontales. */
.sf-sales-flow .sf-block-video .sf-video-box {
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

.sf-sales-flow .sf-block-video .sf-video-box iframe,
.sf-sales-flow .sf-block-video .sf-video-box video,
.sf-sales-flow .sf-block-video .sf-video-box .sf-vimeo-slot {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* ============================================================================
   5. API DE FACTURACIÓN · estructura distinta a los otros sistemas
   ============================================================================ */

.api-hero {
    padding-top: 22px !important;
}

.api-hero .api-title {
    margin-bottom: 18px !important;
}

.api-hero .api-video-placeholder {
    position: relative !important;
    width: min(100%, 980px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 18px auto 0 !important;
    overflow: hidden !important;
}

.api-hero .api-video-placeholder iframe,
.api-hero .api-video-placeholder video,
.api-hero .api-video-placeholder img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
}

/* ============================================================================
   6. RESPONSIVE
   ============================================================================ */

@media (max-width: 991.98px) {
    .sf-sales-flow .sf-system-restored {
        padding-top: 16px !important;
    }

    .sf-system-restored .sf-block-title.section-title {
        margin-bottom: 15px !important;
    }

    .sf-system-restored .sf-system-cta {
        margin: 20px auto 26px !important;
    }
}

@media (max-width: 767.98px) {
    .sf-sales-flow .sf-system-restored {
        padding-top: 12px !important;
    }

    .sf-system-restored .sf-block-header {
        margin-bottom: 6px !important;
    }

    .sf-system-restored .sf-block-title.section-title {
        margin-bottom: 12px !important;
    }

    .sf-system-restored .sf-system-cta {
        margin: 18px auto 24px !important;
        padding: 0 !important;
    }

    .sf-system-restored .sf-system-cta__trial {
        font-size: clamp(30px, 9vw, 44px) !important;
    }

    .sf-system-restored .sf-system-cta__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: min(100%, 430px) !important;
        margin: 16px auto 0 !important;
    }

    .sf-system-restored .sf-system-cta__form,
    .sf-system-restored .sf-system-cta__btn {
        width: 100% !important;
    }

    .sf-system-restored .sf-block-video .sf-video-box {
        max-width: 100% !important;
        border-radius: 13px !important;
    }

    .api-hero {
        padding-top: 14px !important;
    }

    .api-hero .api-title {
        margin-bottom: 12px !important;
    }

    .api-hero .api-video-placeholder {
        margin-top: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-system-restored .sf-system-cta__btn {
        transition: none !important;
    }
}

/* ===== AJUSTE VISUAL FINAL · CAPTURAS 2026-08-27 ===== */
/*
   Esta es la capa visual autoritativa de los sistemas.
   No modifica el HTML ni la landing.

   Objetivos:
   - Acercar el primer bloque al menú principal.
   - Reducir el hueco título -> video.
   - Hacer el video principal más grande y realmente horizontal 16:9.
   - Dar aire después de los botones antes de texto + video derecho.
   - Mantener background.png con su proporción natural, sin estirarlo.
*/

:root {
    --sf-sys-blue: #071a31;
    --sf-sys-blue-dark: #03111f;
    --sf-sys-green: #25d366;
}

/* ---------- 1. SUBIR LA COMPOSICIÓN COMPLETA ---------- */
.ms-main[class*="sf-page-soluciones-"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ms-main[class*="sf-page-soluciones-"]>.sf-sales-flow,
.sf-sales-flow {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sf-sales-flow>.sf-block-section.sf-system-restored {
    margin-top: 0 !important;
    padding-top: 10px !important;
}

.sf-system-restored>.container {
    padding-top: 0 !important;
}

.sf-system-restored .sf-block-header {
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.sf-system-restored .sf-block-header .sf-badge {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.sf-system-restored .sf-block-title.section-title {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

/* ---------- 2. BACKGROUND NATURAL + VIDEO PRINCIPAL MÁS GRANDE ---------- */
.sf-system-restored>.container>.row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.sf-system-restored .sf-bg-video-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: -4px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.sf-system-restored .sf-bg-video-wrap>img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

/*
   El cuadro anterior era demasiado pequeño y dejaba una gran franja vacía
   arriba y abajo. Se monta de forma explícita sobre background.png y se hace
   más ancho; al conservar 16:9 llena mejor la composición sin volverse vertical.
*/
.sf-system-restored .sf-bg-video-box {
    position: absolute !important;
    top: 47% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(62%, 820px) !important;
    max-width: 820px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: translate(-50%, -50%) !important;
}

.sf-system-restored .sf-bg-video-box>.sf-vimeo-slot,
.sf-system-restored .sf-bg-video-box>iframe,
.sf-system-restored .sf-bg-video-box>video,
.sf-system-restored .sf-bg-video-box>img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
}

.sf-system-restored .sf-bg-video-box .sf-vimeo-slot__placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* ---------- 3. CTA MÁS CERCA DEL VIDEO, PERO CON AIRE DESPUÉS ---------- */
.sf-system-restored .sf-system-cta {
    width: min(100%, 1040px) !important;
    margin: 8px auto 52px !important;
    padding: 0 12px !important;
    text-align: center !important;
}

.sf-system-restored .sf-system-cta__trial {
    margin: 0 !important;
}

.sf-system-restored .sf-system-cta__actions {
    margin-top: 14px !important;
}

/* La separación que faltaba en la captura: botones -> contenido inferior. */
.sf-system-restored .sf-block-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ---------- 4. VIDEO DERECHO Y VIDEOS INFERIORES: SIEMPRE 16:9 ---------- */
.sf-sales-flow .sf-block-video {
    min-width: 0 !important;
}

.sf-sales-flow .sf-block-video .sf-video-box,
.sf-sales-flow .sf-video-box {
    position: relative !important;
    width: 100% !important;
    max-width: 720px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

.sf-sales-flow .sf-block-video .sf-video-box>.sf-vimeo-slot,
.sf-sales-flow .sf-video-box>.sf-vimeo-slot,
.sf-sales-flow .sf-block-video .sf-video-box>iframe,
.sf-sales-flow .sf-block-video .sf-video-box>video,
.sf-sales-flow .sf-block-video .sf-video-box>img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
}

/* Evita que reglas antiguas vuelvan a imponer alturas verticales. */
.sf-sales-flow .sf-vimeo-slot {
    min-height: 0 !important;
    max-height: none !important;
}

/* ---------- 5. API: MISMO CRITERIO SIN TOCAR SU HTML ---------- */
body:has(.sf-page-soluciones-api-facturacion-electronica) .api-hero {
    padding-top: 10px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-hero .api-title {
    margin-bottom: 8px !important;
}

body:has(.sf-page-soluciones-api-facturacion-electronica) .api-hero .api-video-placeholder {
    position: relative !important;
    width: min(100%, 920px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 10px auto 0 !important;
    overflow: hidden !important;
}

/* ---------- 6. RESPONSIVE ---------- */
@media (max-width: 991.98px) {
    .sf-sales-flow>.sf-block-section.sf-system-restored {
        padding-top: 8px !important;
    }

    .sf-system-restored .sf-block-title.section-title {
        margin-bottom: 5px !important;
    }

    .sf-system-restored .sf-bg-video-box {
        top: 47% !important;
        width: min(68%, 690px) !important;
    }

    .sf-system-restored .sf-system-cta {
        margin: 6px auto 44px !important;
    }
}

@media (max-width: 767.98px) {
    .sf-sales-flow>.sf-block-section.sf-system-restored {
        padding-top: 6px !important;
    }

    .sf-system-restored .sf-block-header {
        margin-bottom: 3px !important;
    }

    .sf-system-restored .sf-block-title.section-title {
        margin-bottom: 4px !important;
    }

    .sf-system-restored .sf-bg-video-wrap {
        margin-top: -2px !important;
    }

    .sf-system-restored .sf-bg-video-box {
        top: 48% !important;
        width: min(82%, 620px) !important;
    }

    .sf-system-restored .sf-system-cta {
        margin: 6px auto 36px !important;
        padding: 0 !important;
    }

    .sf-system-restored .sf-system-cta__actions {
        margin-top: 12px !important;
    }

    .sf-sales-flow .sf-block-video .sf-video-box,
    .sf-sales-flow .sf-video-box {
        max-width: 100% !important;
    }
}

@media (max-width: 520px) {
    .sf-system-restored .sf-bg-video-box {
        width: 86% !important;
    }

    .sf-system-restored .sf-system-cta {
        margin-bottom: 32px !important;
    }
}


/* === SF SYSTEM HERO OVERLAY V6 · BACKGROUND NO EMPUJA === */
/* El background es decorativo y absoluto. Título, video y CTA son el flujo real. */
.sf-sales-flow>.sf-block-section.sf-system-restored {
    padding-top: 8px !important;
}

.sf-system-restored>.container {
    padding-top: 0 !important;
}

.sf-system-restored .sf-system-hero-row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sf-system-restored .sf-system-hero.sf-bg-video-wrap {
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 18px 22px 28px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #fff !important;
}

/* Background: ocupa la composición, pero NO genera altura. */
.sf-system-restored .sf-system-hero.sf-bg-video-wrap>img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.sf-system-restored .sf-system-hero__content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.sf-system-restored .sf-system-hero__content .sf-block-header {
    width: 100% !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    text-align: center !important;
}

.sf-system-restored .sf-system-hero__content .sf-block-header .sf-badge {
    margin: 0 !important;
}

.sf-system-restored .sf-system-hero__content .sf-block-title.section-title {
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Video principal: ahora participa en el flujo; 16:9 real y horizontal. */
.sf-system-restored .sf-system-hero__content .sf-bg-video-box {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: min(78%, 940px) !important;
    max-width: 940px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
}

.sf-system-restored .sf-system-hero__content .sf-bg-video-box>.sf-vimeo-slot,
.sf-system-restored .sf-system-hero__content .sf-bg-video-box>iframe,
.sf-system-restored .sf-system-hero__content .sf-bg-video-box>video,
.sf-system-restored .sf-system-hero__content .sf-bg-video-box>img,
.sf-system-restored .sf-system-hero__content .sf-bg-video-box .sf-vimeo-slot__placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
}

/* Video -> CTA: cerca, sin pegarse. */
.sf-system-restored .sf-system-hero__content .sf-system-cta {
    width: min(100%, 1040px) !important;
    margin: 18px auto 0 !important;
    padding: 0 10px !important;
    text-align: center !important;
}

.sf-system-restored .sf-system-hero__content .sf-system-cta__trial {
    margin: 0 !important;
}

.sf-system-restored .sf-system-hero__content .sf-system-cta__actions {
    margin-top: 12px !important;
}

/* Aire real después de botones antes del texto + video derecho. */
.sf-system-restored .sf-system-hero-row+.sf-block-content,
.sf-system-restored .sf-block-content {
    margin-top: 34px !important;
    padding-top: 0 !important;
}

/* Videos posteriores / columna derecha: horizontal siempre. */
.sf-system-restored .sf-block-content .sf-block-video .sf-video-box,
.sf-sales-flow .sf-block-video .sf-video-box {
    position: relative !important;
    width: 100% !important;
    max-width: 720px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.sf-system-restored .sf-block-content .sf-block-video .sf-video-box>.sf-vimeo-slot,
.sf-system-restored .sf-block-content .sf-block-video .sf-video-box>iframe,
.sf-system-restored .sf-block-content .sf-block-video .sf-video-box>video,
.sf-system-restored .sf-block-content .sf-block-video .sf-video-box>img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
}

@media (max-width: 991.98px) {
    .sf-system-restored .sf-system-hero.sf-bg-video-wrap {
        padding: 14px 16px 24px !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-block-title.section-title {
        margin-bottom: 12px !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-bg-video-box {
        width: min(86%, 780px) !important;
    }

    .sf-system-restored .sf-system-hero-row+.sf-block-content,
    .sf-system-restored .sf-block-content {
        margin-top: 28px !important;
    }
}

@media (max-width: 767.98px) {
    .sf-sales-flow>.sf-block-section.sf-system-restored {
        padding-top: 5px !important;
    }

    .sf-system-restored .sf-system-hero.sf-bg-video-wrap {
        padding: 12px 8px 20px !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-block-header {
        margin-bottom: 4px !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-block-title.section-title {
        margin-bottom: 10px !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-bg-video-box {
        width: 94% !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-system-cta {
        margin-top: 14px !important;
        padding: 0 !important;
    }

    .sf-system-restored .sf-system-hero-row+.sf-block-content,
    .sf-system-restored .sf-block-content {
        margin-top: 24px !important;
    }
}


/* ======================================================================
   SF SYSTEM HERO V7 · FONDO LIBRE + AIRE CONTROLADO
   El fondo conserva su proporción natural: no se recorta ni se estira.
   Solo ajusta geometría; no modifica el HTML.
====================================================================== */
.sf-system-restored,
.sf-system-restored>.container,
.sf-system-restored .sf-system-hero-row {
    overflow: visible !important;
}

.sf-system-restored .sf-system-hero.sf-bg-video-wrap {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 12px 0 24px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* background.png queda libre: proporción real, sin cover y sin recorte */
.sf-system-restored .sf-system-hero.sf-bg-video-wrap>img {
    position: absolute !important;
    z-index: 0 !important;
    top: -8px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: min(112%, 1380px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.sf-system-restored .sf-system-hero__content {
    position: relative !important;
    z-index: 2 !important;
}

/* Aire título -> video: antes estaba demasiado pegado */
.sf-system-restored .sf-system-hero__content .sf-block-title.section-title {
    margin: 0 auto 27px !important;
}

/* Video principal: mantiene 16:9, sin afectar el fondo */
.sf-system-restored .sf-system-hero__content .sf-bg-video-box {
    width: min(78%, 940px) !important;
    max-width: 940px !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
}

/* Aire video -> CTA */
.sf-system-restored .sf-system-hero__content .sf-system-cta {
    margin: 28px auto 0 !important;
}

/* Botones -> bloque inferior: aire suficiente, no hueco gigante */
.sf-system-restored .sf-system-hero-row+.sf-block-content,
.sf-system-restored .sf-block-content {
    margin-top: 40px !important;
}

@media (max-width: 991.98px) {
    .sf-system-restored .sf-system-hero.sf-bg-video-wrap {
        padding: 10px 0 22px !important;
    }

    .sf-system-restored .sf-system-hero.sf-bg-video-wrap>img {
        top: -4px !important;
        width: 108% !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-block-title.section-title {
        margin-bottom: 22px !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-system-cta {
        margin-top: 24px !important;
    }

    .sf-system-restored .sf-system-hero-row+.sf-block-content,
    .sf-system-restored .sf-block-content {
        margin-top: 34px !important;
    }
}

@media (max-width: 767.98px) {
    .sf-system-restored .sf-system-hero.sf-bg-video-wrap {
        padding: 8px 0 18px !important;
    }

    .sf-system-restored .sf-system-hero.sf-bg-video-wrap>img {
        top: 0 !important;
        width: 104% !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-block-title.section-title {
        margin-bottom: 18px !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-bg-video-box {
        width: 94% !important;
    }

    .sf-system-restored .sf-system-hero__content .sf-system-cta {
        margin-top: 20px !important;
    }

    .sf-system-restored .sf-system-hero-row+.sf-block-content,
    .sf-system-restored .sf-block-content {
        margin-top: 28px !important;
    }
}

/* ============================================================================
   SOFIAPPS SISTEMAS · CAPA AUTORITATIVA FINAL
   Reemplazar assets/css/sofiapps-sistemas.css con este archivo.
   ============================================================================ */

:root {
    --sf-sys-blue: #071a31;
    --sf-sys-blue-dark: #03111f;
    --sf-sys-green: #25d366;
    --sf-sys-text: #5a7694;
}

/* =========================
   HERO / H1 PRINCIPAL
   ========================= */

body .sf-sales-flow>.sf-block-section.sf-system-restored {
    margin-top: 0 !important;
    padding-top: 14px !important;
}

body .sf-system-restored .sf-system-hero__content .sf-block-header {
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: center !important;
}

body .sf-system-restored .sf-system-hero__content h1.sf-block-title.section-title {
    display: block !important;
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto 38px !important;
    padding: 0 !important;
    color: var(--sf-sys-blue) !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: clamp(48px, 5vw, 72px) !important;
    font-weight: 950 !important;
    line-height: 1.03 !important;
    letter-spacing: -.05em !important;
    text-align: center !important;
    text-wrap: balance;
}

body .sf-system-restored .sf-system-hero__content h1.sf-block-title.section-title .sf-one-green,
body .sf-system-restored .sf-system-hero__content h1.sf-block-title.section-title .sf-system-green-word {
    color: var(--sf-sys-green) !important;
    font-weight: 950 !important;
}

/* =========================
   BACKGROUND LIBRE + VIDEO
   ========================= */

body .sf-system-restored,
body .sf-system-restored>.container,
body .sf-system-restored .sf-system-hero-row,
body .sf-system-restored .sf-system-hero.sf-bg-video-wrap {
    overflow: visible !important;
}

body .sf-system-restored .sf-system-hero.sf-bg-video-wrap {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 10px 0 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .sf-system-restored .sf-system-hero.sf-bg-video-wrap>img {
    position: absolute !important;
    z-index: 0 !important;
    top: -8px !important;
    left: 50% !important;
    display: block !important;
    width: min(112%, 1380px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

body .sf-system-restored .sf-system-hero__content {
    position: relative !important;
    z-index: 2 !important;
}

body .sf-system-restored .sf-system-hero__content .sf-bg-video-box {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: min(78%, 940px) !important;
    max-width: 940px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
    border-radius: 18px !important;
}

body .sf-system-restored .sf-system-hero__content .sf-bg-video-box>.sf-vimeo-slot,
body .sf-system-restored .sf-system-hero__content .sf-bg-video-box>iframe,
body .sf-system-restored .sf-system-hero__content .sf-bg-video-box>video,
body .sf-system-restored .sf-system-hero__content .sf-bg-video-box>img,
body .sf-system-restored .sf-system-hero__content .sf-bg-video-box .sf-vimeo-slot__placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
}

body .sf-system-restored .sf-system-hero__content .sf-system-cta {
    width: min(100%, 1040px) !important;
    margin: 36px auto 0 !important;
    padding: 0 10px !important;
    text-align: center !important;
}

body .sf-system-restored .sf-system-hero__content .sf-system-cta__actions {
    margin-top: 16px !important;
}

/* ============================================================================
   CUERPO DE SISTEMAS
   RESTAURA LA REGLA PERDIDA: TEXTO + VIDEO EN DOS COLUMNAS
   ============================================================================ */

body .sf-sales-flow .sf-block-section .sf-block-content {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    align-items: center !important;
    gap: clamp(34px, 4vw, 52px) !important;
    width: 100% !important;
    margin-top: 40px !important;
    padding-top: 0 !important;
}

body .sf-sales-flow .sf-block-section .sf-block-text,
body .sf-sales-flow .sf-block-section .sf-block-video {
    min-width: 0 !important;
}

body .sf-sales-flow .sf-block-section .sf-block-text {
    text-align: left !important;
}

body .sf-sales-flow .sf-block-section .sf-block-text p {
    margin: 0 0 22px !important;
    color: var(--sf-sys-text) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
}

body .sf-sales-flow .sf-block-section .sf-block-text p:last-child {
    margin-bottom: 0 !important;
}

body .sf-sales-flow .sf-block-section .sf-block-text strong {
    color: var(--sf-sys-blue) !important;
    font-weight: 850 !important;
}

/* Orden normal */
body .sf-sales-flow>.sf-block-section .sf-block-content>.sf-block-text {
    order: 1 !important;
}

body .sf-sales-flow>.sf-block-section .sf-block-content>.sf-block-video {
    order: 2 !important;
}

/* Intercalado: siguiente bloque cambia de lado */
@media (min-width:992px) {
    body .sf-sales-flow>.sf-block-section:nth-of-type(even) .sf-block-content>.sf-block-text {
        order: 2 !important;
    }

    body .sf-sales-flow>.sf-block-section:nth-of-type(even) .sf-block-content>.sf-block-video {
        order: 1 !important;
    }
}

/* =========================
   TÍTULOS DEL CUERPO
   ========================= */

body .sf-sales-flow>.sf-block-section:not(.sf-system-restored) .sf-block-header {
    max-width: 980px !important;
    margin: 0 auto 30px !important;
    text-align: center !important;
}

body .sf-sales-flow>.sf-block-section:not(.sf-system-restored) .sf-block-title.section-title {
    max-width: 1040px !important;
    margin: 0 auto !important;
    color: var(--sf-sys-blue) !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: clamp(38px, 4.2vw, 58px) !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
    text-align: center !important;
    text-wrap: balance;
}

body .sf-sales-flow .sf-block-title.section-title .sf-system-green-word,
body .sf-sales-flow .sf-block-title.section-title .sf-one-green {
    color: var(--sf-sys-green) !important;
}

body .sf-sales-flow>.sf-block-section:not(.sf-system-restored) {
    padding-top: clamp(54px, 6vw, 82px) !important;
    padding-bottom: clamp(54px, 6vw, 82px) !important;
}

/* =========================
   VIDEOS DEL CUERPO 16:9
   ========================= */

body .sf-sales-flow .sf-block-video {
    width: 100% !important;
}

body .sf-sales-flow .sf-block-video .sf-video-box,
body .sf-sales-flow .sf-video-box,
body .sf-sales-flow .sf-nvid {
    position: relative !important;
    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

body .sf-sales-flow .sf-block-video .sf-video-box>.sf-vimeo-slot,
body .sf-sales-flow .sf-block-video .sf-video-box>iframe,
body .sf-sales-flow .sf-block-video .sf-video-box>video,
body .sf-sales-flow .sf-block-video .sf-video-box>img,
body .sf-sales-flow .sf-video-box>.sf-vimeo-slot,
body .sf-sales-flow .sf-video-box>iframe,
body .sf-sales-flow .sf-video-box>video,
body .sf-sales-flow .sf-video-box>img,
body .sf-sales-flow .sf-nvid>iframe,
body .sf-sales-flow .sf-nvid>video,
body .sf-sales-flow .sf-nvid>img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
}

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

@media (max-width:991.98px) {
    body .sf-system-restored .sf-system-hero__content h1.sf-block-title.section-title {
        font-size: clamp(42px, 6.5vw, 58px) !important;
        margin-bottom: 30px !important;
    }

    body .sf-system-restored .sf-system-hero__content .sf-bg-video-box {
        width: min(88%, 820px) !important;
    }

    body .sf-sales-flow .sf-block-section .sf-block-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-top: 34px !important;
    }

    body .sf-sales-flow>.sf-block-section .sf-block-content>.sf-block-text,
    body .sf-sales-flow>.sf-block-section .sf-block-content>.sf-block-video {
        order: initial !important;
    }

    body .sf-sales-flow>.sf-block-section:not(.sf-system-restored) .sf-block-title.section-title {
        font-size: clamp(34px, 6vw, 50px) !important;
    }
}

@media (max-width:767.98px) {
    body .sf-sales-flow>.sf-block-section.sf-system-restored {
        padding-top: 8px !important;
    }

    body .sf-system-restored .sf-system-hero.sf-bg-video-wrap {
        padding: 8px 0 18px !important;
    }

    body .sf-system-restored .sf-system-hero.sf-bg-video-wrap>img {
        top: 0 !important;
        width: 104% !important;
    }

    body .sf-system-restored .sf-system-hero__content h1.sf-block-title.section-title {
        font-size: clamp(34px, 10vw, 46px) !important;
        line-height: 1.06 !important;
        letter-spacing: -.04em !important;
        margin-bottom: 24px !important;
    }

    body .sf-system-restored .sf-system-hero__content .sf-bg-video-box {
        width: 94% !important;
    }

    body .sf-system-restored .sf-system-hero__content .sf-system-cta {
        margin-top: 24px !important;
    }

    body .sf-sales-flow .sf-block-section .sf-block-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-top: 28px !important;
    }

    body .sf-sales-flow>.sf-block-section:not(.sf-system-restored) {
        padding-top: 46px !important;
        padding-bottom: 46px !important;
    }

    body .sf-sales-flow>.sf-block-section:not(.sf-system-restored) .sf-block-header {
        margin-bottom: 22px !important;
    }

    body .sf-sales-flow>.sf-block-section:not(.sf-system-restored) .sf-block-title.section-title {
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.08 !important;
    }

    body .sf-sales-flow .sf-block-section .sf-block-text p {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }
}

/* ============================================================
   BADGE PRINCIPAL · SISTEMAS
   Verde sólido + texto blanco
   ============================================================ */

body .sf-system-restored .sf-system-hero__content .sf-block-header .sf-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: fit-content !important;
    min-height: 38px !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 9px 17px !important;

    border: 1px solid #ff7f00 !important;
    border-radius: 999px !important;

    background: #ff7f00 !important;
    color: #ffffff !important;

    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    box-shadow: 0 8px 20px rgba(37, 211, 102, .22) !important;
}

/* Icono blanco */
body .sf-system-restored .sf-system-hero__content .sf-block-header .sf-badge i {
    color: #ffffff !important;
    font-size: 16px !important;
}

/* Aire badge -> título */
body .sf-system-restored .sf-system-hero__content .sf-block-header {
    margin-bottom: 12px !important;
}

/* Móvil */
@media (max-width: 767.98px) {
    body .sf-system-restored .sf-system-hero__content .sf-block-header .sf-badge {
        min-height: 34px !important;
        padding: 8px 14px !important;
        font-size: 11.5px !important;
        white-space: normal !important;
        text-align: center !important;
    }
}