*
{
    box-sizing: border-box;
}
:root 
{
    --bd: #0d1f4e;
    --bm: #1a3c8f;
    --ba: #2563eb;
    --bl: #eff4ff;
    --td: #0f172a;
    --tm: #475569;
    --ts: #94a3b8;
    --br: #e2e8f0;
    --nav-h: 64px;
}
html 
{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body 
{
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--td) !important;
    background: #fff;
    overflow-x: clip;
}
section 
{
    overflow-x: clip;
}
a 
{
    text-decoration: none !important
}
/* ── Loader ── */
#loader 
{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0d1f4e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transition: opacity .6s, visibility .6s
}
#loader.hide 
{
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}
.l-brand 
{
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff
}
.l-brand img
{
    height: 45px;
    width: auto;
    margin-top: -4px;
    margin-right: 4px
}
img.logo
{
    height: 45px;
    width: auto;
    margin-top: -4px;
    margin-right: 4px
}
.l-ring 
{
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, .12);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: spin .75s linear infinite
}
.l-txt 
{
    font-size: .76rem;
    color: rgba(255, 255, 255, .4);
    letter-spacing: .5px
}
@keyframes spin 
{
    to 
    {
        transform: rotate(360deg)
    }
}
/* ── Reveal ── */
.rv 
{
    opacity: 0;
    transform: translateY(55px);
    transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1)
}
.rv.on 
{
    opacity: 1;
    transform: translateY(0)
}
.rvl 
{
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1)
}
.rvl.on 
{
    opacity: 1;
    transform: translateX(0)
}
.rvr 
{
    opacity: 0;
    transform: translateX(60px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1)
}
.rvr.on 
{
    opacity: 1;
    transform: translateX(0)
}
.d1 
{
    transition-delay: .1s
}
.d2 
{
    transition-delay: .2s
}
.d3 
{
    transition-delay: .3s
}
.d4 
{
    transition-delay: .4s
}
.d5 
{
    transition-delay: .5s
}
.d6 
{
    transition-delay: .6s
}
.anc 
{
    display: block;
    height: var(--nav-h);
    margin-top: calc(-1 * var(--nav-h));
    visibility: hidden;
    pointer-events: none
}
/* ── Navbar ── */
.navbar 
{
    background: #fff;
    border-bottom: 1px solid var(--br);
    transition: box-shadow 0.3s;
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0 0;
}
.navbar.scrolled 
{
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
}
.navbar>.container 
{
    height: var(--nav-h);
    display: flex;
    align-items: center;
}
.navbar-brand 
{
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--bd) !important;
    letter-spacing: -0.5px;
}
.nav-desktop
{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.nav-desktop .nav-link 
{
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--tm);
    padding: 6px 11px !important;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.nav-desktop .nav-link:hover, .nav-desktop .nav-link.active 
{
    color: var(--ba) ;
    background: var(--bl);
}
.btn-nav 
{
    background: var(--ba) !important;
    color: #fff !important;
    border-radius: 50px;
    padding: 9px 22px !important;
    font-weight: 700;
    font-size: 0.82rem;
    transition: background 0.2s, transform 0.15s;
}
.btn-nav:hover 
{
    background: var(--bd) !important;
    transform: translateY(-1px);
    color: white !important;
}
.nav-toggler 
{
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
    margin-left: auto;
}
.nav-toggler:hover 
{
    background: var(--bl);
}
.nav-toggler i 
{
    font-size: 22px;
    color: var(--bd);
    display: block;
}
/* mobile drawer */
.nav-mobile 
{
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--br);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    z-index: 1029;
}
.nav-mobile.open 
{
    max-height: 420px;
    opacity: 1;
}
.nav-mobile-inner 
{
    padding: 12px 16px 20px;
}
.nav-mobile .nav-link 
{
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tm) !important;
    padding: 10px 12px !important;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}

.nav-mobile .nav-link:hover, .nav-mobile .nav-link.active 
{
    color: var(--ba) !important;
    background: var(--bl);
}
.nav-mobile .btn-wa 
{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #25d366;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 50px;
    padding: 11px 20px;
    margin-top: 8px;
    justify-content: center;
    transition: background 0.2s;
}
.nav-mobile .btn-wa:hover 
{
    background: #1ebe5c;
}
@media (max-width: 991px) 
{
    .nav-desktop 
    {
        display: none;
    }
    .nav-toggler 
    {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-mobile 
    {
        display: block;
    }
}
/* ── Hero ── */
.hero 
{
    background: linear-gradient(135deg, #060e28 0%, #0d1f4e 55%, #1740a0 100%);
    padding: 88px 0 64px;
    position: relative;
    overflow: hidden
}
.hero::after 
{
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%);
    top: -150px;
    right: -100px;
    pointer-events: none
}
.hero-badge 
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .9);
    font-size: .74rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 20px
}
.hero h1 
{
    font-size: clamp(1.85rem, 3.8vw, 2.9rem);
    font-weight: 800;
    line-height: 1.13;
    color: #fff;
    letter-spacing: -.5px
}
.hero h1 em 
{
    font-style: normal;
    color: #60a5fa
}
.hero-sub 
{
    color: rgba(255, 255, 255, .68);
    font-size: .93rem;
    line-height: 1.78;
    max-width: 460px
}
.btn-hw 
{
    background: #fff;
    color: var(--bd);
    font-weight: 700;
    font-size: .84rem;
    border-radius: 50px;
    padding: 12px 26px;
    border: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    transition: transform .15s, box-shadow .2s
}
.btn-hw:hover 
{
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    color: var(--bd)
}
.btn-hg 
{
    background: rgba(255, 255, 255, .09);
    color: #fff;
    font-weight: 600;
    font-size: .84rem;
    border-radius: 50px;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, .22);
    transition: background .2s
}
.btn-hg:hover 
{
    background: rgba(255, 255, 255, .17);
    color: #fff
}
.dash-wrap 
{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
    transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
    transition: transform .5s
}
.dash-wrap:hover 
{
    transform: perspective(900px) rotateY(0) rotateX(0)
}
.dash-wrap img 
{
    width: 100%;
    display: block
}
/* ── Stats ── */
.stats-bar 
{
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 36px rgba(0, 0, 0, .09);
    margin-top: -32px;
    position: relative;
    z-index: 20;
    padding: 26px 36px
}
.sv 
{
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--bd);
    line-height: 1
}
.sl 
{
    font-size: .73rem;
    color: var(--ts);
    margin-top: 4px;
    font-weight: 500
}
.sdiv + .sdiv 
{
    border-left: 1px solid var(--br)
}
/* ── Section labels ── */
.eye 
{
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ba)
}
.stitle 
{
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--bd);
    letter-spacing: -.3px;
    line-height: 1.2
}
.ssub 
{
    font-size: .88rem;
    color: var(--tm);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto
}
/* ── Service cards ── */
.service-bg 
{
    background: var(--bl)
}
.sc 
{
    border: 1px solid var(--br);
    border-radius: 16px;
    padding: 26px 22px;
    background: #fff;
    height: 100%;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    cursor: pointer
}
.sc:hover 
{
    box-shadow: 0 14px 44px rgba(37, 99, 235, .11);
    transform: translateY(-6px);
    border-color: #bfdbfe
}
.sc-icon 
{
    width: 50px;
    height: 50px;
    background: var(--bl);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px
}
.sc-icon i 
{
    font-size: 23px;
    color: var(--ba)
}
.sc h5 
{
    font-size: .95rem;
    font-weight: 700;
    color: var(--bd);
    margin-bottom: 7px
}
.sc p 
{
    font-size: .82rem;
    color: var(--tm);
    line-height: 1.65;
    margin: 0
}
.sc-lnk 
{
    font-size: .79rem;
    font-weight: 600;
    color: var(--ba);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px
}
.sc-lnk i 
{
    font-size: 13px;
    transition: transform .2s
}
.sc:hover .sc-lnk i 
{
    transform: translateX(4px)
}
/* ── About ── */
.about-vis 
{
    background: linear-gradient(135deg, var(--bm), var(--ba));
    border-radius: 24px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}
.about-vis::before 
{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, .1), transparent 60%)
}
.about-vis i 
{
    font-size: 90px;
    color: rgba(255, 255, 255, .22);
    position: relative;
    z-index: 1
}
.chk 
{
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 15px
}
.chk-dot 
{
    width: 22px;
    height: 22px;
    background: #dbeafe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px
}
.chk-dot i 
{
    font-size: 11px;
    color: var(--ba)
}
.chk p 
{
    font-size: .86rem;
    color: var(--tm);
    margin: 0;
    line-height: 1.65
}
/* ── Project cards ── */
.pc 
{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--br);
    background: #fff;
    height: 100%;
    transition: box-shadow .25s, transform .25s
}
.pc:hover 
{
    box-shadow: 0 14px 44px rgba(0, 0, 0, .1);
    transform: translateY(-6px)
}
.pt 
{
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center
}
.pt i 
{
    font-size: 50px;
    color: rgba(255, 255, 255, .42)
}
.t1 
{
    background: linear-gradient(135deg, #0d1f4e, #2563eb)
}
.t2 
{
    background: linear-gradient(135deg, #064e3b, #10b981)
}
.t3 
{
    background: linear-gradient(135deg, #4c1d95, #8b5cf6)
}
.t4 
{
    background: linear-gradient(135deg, #78350f, #f59e0b)
}
.t5 
{
    background: linear-gradient(135deg, #831843, #ec4899)
}
.pb2 
{
    padding: 17px 19px
}
.pb2 h6 
{
    font-size: .9rem;
    font-weight: 700;
    color: var(--bd);
    margin-bottom: 5px
}
.pb2 p 
{
    font-size: .79rem;
    color: var(--tm);
    margin: 0;
    line-height: 1.55
}
.ptag 
{
    font-size: .69rem;
    padding: 3px 10px;
    border-radius: 50px;
    display: inline-block;
    margin-top: 9px;
    font-weight: 600
}
/* ── Testimonios ── */
.testi-section 
{
    background: var(--bl)
}
.testi-card 
{
    background: #fff;
    border: 1px solid var(--br);
    border-radius: 16px;
    padding: 28px 24px;
    height: 100%;
    transition: box-shadow .25s, transform .25s
}
.testi-card:hover 
{
    box-shadow: 0 12px 40px rgba(37, 99, 235, .09);
    transform: translateY(-4px)
}
.testi-stars 
{
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 14px
}
.testi-text 
{
    font-size: .87rem;
    color: var(--tm);
    line-height: 1.75;
    margin-bottom: 20px;
    font-style: italic
}
.testi-avatar 
{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bm), var(--ba));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0
}
.testi-name 
{
    font-size: .88rem;
    font-weight: 700;
    color: var(--bd)
}
.testi-role 
{
    font-size: .75rem;
    color: var(--ts)
}
.quote-icon 
{
    font-size: 2.5rem;
    color: #dbeafe;
    line-height: 1;
    margin-bottom: 8px;
    font-family: Georgia, serif
}
/* ── Clients ── */
.clients-section
{
    background:#fff;padding:60px 0
}

/* ocultar por defecto hasta que JS decida */
.clients-static
{
    display:none
}
.clients-carousel-wrap
{
    display:none
}
/* MODO ESTÁTICO */
.clients-static
{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px 0
}
/* MODO CARRUSEL */
.clients-carousel-wrap
{
    overflow:hidden;
    position:relative
}
.clients-carousel-wrap::before, .clients-carousel-wrap::after
{
    content:'';
    position:absolute;
    top:0;bottom:0;
    width:80px;
    z-index:2;
    pointer-events:none
}
.clients-carousel-wrap::before 
{
    left: 0;
    background: linear-gradient(to right, #fff, transparent)
}
.clients-carousel-wrap::after 
{
    right: 0;
    background: linear-gradient(to left, #fff, transparent)
}
.clients-carousel-track 
{
    display: flex;
    width: max-content;
    animation: cscroll 28s linear infinite
}
.clients-carousel-track:hover 
{
    animation-play-state: paused
}
/* item base */
.ci 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    min-width: 148px
}
.ci-logo 
{
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--br);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    transition: box-shadow .2s, transform .2s;
    flex-shrink: 0
}
.ci:hover .ci-logo 
{
    box-shadow: 0 6px 22px rgba(37, 99, 235, .14);
    transform: translateY(-3px)
}
.ci-logo img 
{
    width: 46px;
    height: 46px;
    object-fit: contain
}
.ci-name 
{
    font-size: .71rem;
    font-weight: 600;
    color: var(--tm);
    text-align: center;
    max-width: 115px;
    line-height: 1.3
}
@keyframes cscroll
{
    0%
    {
        transform:translateX(0)
    }
    100%
    {
        transform:translateX(var(--scroll-dist))
    }
}
/* ── Contacto ── */
.contact-section 
{
    background: linear-gradient(160deg, #060e28 0%, #0d1f4e 60%, #1a3c8f 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden
}
.contact-section::before 
{
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .2), transparent 70%);
    bottom: -150px;
    right: -100px;
    pointer-events: none
}
.contact-eyebrow 
{
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #60a5fa
}
.contact-title 
{
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px
}
.contact-sub 
{
    color: rgba(255, 255, 255, .6);
    font-size: .88rem;
    line-height: 1.75
}
.info-col 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%
}
.info-pill 
{
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 13px 16px;
    margin-bottom: 10px;
    transition: background .2s
}
.info-pill:hover 
{
    background: rgba(255, 255, 255, .11)
}
.info-pill-icon 
{
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(37, 99, 235, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}
.info-pill-icon i 
{
    font-size: 17px;
    color: #93c5fd
}
.info-pill-label 
{
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 2px
}
.info-pill-val 
{
    font-size: .86rem;
    font-weight: 600;
    color: #fff
}
.info-pill-val a 
{
    color: #fff !important
}
.info-pill-val a:hover 
{
    color: #93c5fd !important
}
.wa-float-btn 
{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    font-size: .86rem;
    border-radius: 50px;
    padding: 13px 24px;
    border: none;
    transition: background .2s, transform .15s;
    width: 100%;
    justify-content: center;
    margin-top: 10px
}
.wa-float-btn:hover 
{
    background: #1ebe5c;
    transform: translateY(-2px);
    color: #fff
}
.wa-float-btn i 
{
    font-size: 20px
}
.form-glass 
{
    background: rgba(255, 255, 255, .97);
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .25)
}
.form-section-title 
{
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bd);
    margin-bottom: 4px
}
.form-section-sub 
{
    font-size: .8rem;
    color: var(--ts);
    margin-bottom: 22px
}
.form-label 
{
    font-size: .8rem;
    font-weight: 600;
    color: var(--td);
    margin-bottom: 5px
}
.form-control,
.form-select 
{
    border: 1.5px solid var(--br);
    border-radius: 10px;
    font-size: .86rem;
    padding: 11px 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: border-color .2s, box-shadow .2s;
    background: #fff
}

.form-control:focus,
.form-select:focus 
{
    border-color: var(--ba);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    outline: none
}
.input-icon-wrap 
{
    position: relative
}
.input-icon-wrap i 
{
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: var(--ts);
    pointer-events: none
}
.input-icon-wrap .form-control 
{
    padding-left: 38px
}
.btn-submit 
{
    background: linear-gradient(135deg, var(--ba), var(--bm));
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    border-radius: 50px;
    padding: 14px 32px;
    border: none;
    width: 100%;
    transition: opacity .2s, transform .15s;
    box-shadow: 0 6px 20px rgba(37, 99, 235, .3)
}
.btn-submit:hover 
{
    opacity: .9;
    transform: translateY(-1px)
}
/* ── CTA ── */
.cta-block 
{
    background: linear-gradient(135deg, #060e28, #1a3c8f);
    border-radius: 24px;
    padding: 60px 44px;
    position: relative;
    overflow: hidden
}
.cta-block h2 
{
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px
}
.cta-block p 
{
    color: rgba(255, 255, 255, .68);
    font-size: .9rem
}
.btn-cw 
{
    background: #fff;
    color: var(--bd);
    font-weight: 700;
    font-size: .84rem;
    border-radius: 50px;
    padding: 13px 28px;
    border: none;
    transition: transform .15s, box-shadow .2s
}
.btn-cw:hover 
{
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    color: var(--bd)
}
.btn-cg 
{
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 600;
    font-size: .84rem;
    border-radius: 50px;
    padding: 13px 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    transition: background .2s
}
.btn-cg:hover 
{
    background: rgba(255, 255, 255, .17);
    color: #fff
}
/* ── Footer ── */
footer 
{
    background: #060d1f;
    color: #64748b;
    padding: 52px 0 0
}
.fb 
{
    font-size: 1.22rem;
    font-weight: 800;
    color: #fff
}
.fdesc 
{
    font-size: .82rem;
    line-height: 1.75;
    color: #a0a3a8;
    margin-top: 10px
}
.ftitle 
{
    font-size: .76rem;
    font-weight: 700;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 15px
}
footer ul 
{
    list-style: none;
    padding: 0;
    margin: 0
}
footer ul li 
{
    margin-bottom: 9px
}
footer ul a 
{
    font-size: .82rem;
    color: #a0a3a8;
    transition: color .2s
}
footer ul a:hover 
{
    color: #fff
}
.fsoc a 
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #64748b;
    transition: background .2s, color .2s
}
.fsoc a:hover 
{
    background: var(--ba);
    color: #fff
}
footer hr 
{
    border-color: #111c38;
    margin-top: 40px
}
.fbot 
{
    padding: 16px 0;
    font-size: .73rem;
    color: #334155
}
/* ── Scroll to top ── */
.scroll-top 
{
    position: fixed;
    bottom: 28px;
    right: 86px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--bd);
    border: 1.5px solid var(--br);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s, box-shadow .2s;
    cursor: pointer;
    pointer-events: none;
}
.scroll-top.show 
{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto
}
.scroll-top:hover 
{
    box-shadow: 0 6px 22px rgba(0, 0, 0, .15);
    color: var(--ba)
}
.scroll-top i{font-size:20px}
/* ── WhatsApp flotante ── */
.wa-sticky
{
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 1000;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .3s, transform .3s, background .2s;
    pointer-events: none;
}
.wa-sticky.show 
{
    opacity: 1;
    transform: scale(1);
    pointer-events: auto
}
.wa-sticky:hover 
{
    background: #1ebe5c;
    transform: scale(1.08) !important
}
.wa-sticky i 
{
    font-size: 28px
}
.wa-sticky::before 
{
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .4);
    animation: pulse 2s ease-out infinite;
}
@keyframes pulse 
{
    0% 
    {
        transform: scale(1);
        opacity: .8
    }
    100% 
    {
        transform: scale(1.5);
        opacity: 0
    }
}
/* --------------------------------------------------------- */
@media(max-width:991px) 
{
    .stats-bar 
    {
        padding: 18px 22px
    }
    .sdiv 
    {
        border-left: none !important;
        padding-top: 10px
    }
    .sdiv:nth-child(even) 
    {
        border-left: 1px solid var(--br) !important
    }
    .cta-block 
    {
        padding: 40px 26px
    }
    .dash-wrap 
    {
        transform: none
    }
    .form-glass 
    {
        padding: 24px 20px
    }
    .contact-section 
    {
        padding: 56px 0
    }
    .info-col 
    {
        height: auto
    }
    .wa-sticky 
    {
        bottom: 20px;
        right: 16px;
        width: 50px;
        height: 50px
    }
    .scroll-top 
    {
        bottom: 20px;
        right: 74px;
        width: 40px;
        height: 40px
    }
}
@media(max-width:767px) 
{
    .hero 
    {
        padding: 60px 0 44px
    }
    .stats-bar 
    {
        margin-top: -18px;
        padding: 16px 18px
    }
    .sv 
    {
        font-size: 1.65rem
    }
}
@media(max-width:575px) 
{
    .cta-block 
    {
        padding: 32px 18px;
        text-align: center
    }
}