* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box
}

:root {
    --teal  : #00897B;
    --tl    : #00B4A6;
    --tl2   : #00D4C4;
    --mag   : #E91E7B;
    --ml    : #FF3D94;
    --dk    : #0A0E1A;
    --dk2   : #111827;
    --dk3   : #1a1f2e;
    --bg    : #FFFFFF;
    --bg2   : #F8FAFB;
    --bg3   : #F1F5F9;
    --tx    : #0F172A;
    --tx2   : #334155;
    --tx3   : #64748B;
    --border: #E2E8F0;
    --gr    : #94A3B8
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background : var(--bg);
    color      : var(--tx);
    overflow-x : hidden
}

a {
    text-decoration: none;
    color          : inherit
}

nav {
    position       : fixed;
    top            : 0;
    width          : 100%;
    z-index        : 100;
    padding        : 14px 40px;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    background     : rgba(255, 255, 255, .92);
    /* backdrop-filter: blur(20px); */
    backdrop-filter: none;
    border-bottom  : 1px solid var(--border)
}

.logo {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.logo-text {
    font-size     : 22px;
    font-weight   : 800;
    color         : var(--teal);
    letter-spacing: -.5px
}

.logo-img {
    height    : 40px;
    width     : auto;
    object-fit: contain;
    display   : block;
}

.nav-links {
    display    : flex;
    gap        : 28px;
    align-items: center;
    list-style : none
}

.nav-links a {
    color      : var(--tx3);
    font-size  : 13px;
    font-weight: 500;
    transition : .3s
}

.nav-links a:hover {
    color: var(--tx)
}

.nav-cta {
    background   : var(--teal);
    color        : #fff !important;
    padding      : 10px 20px;
    border-radius: 50px;
    font-weight  : 700 !important
}

section {
    padding: 100px 40px;
    overflow:hidden;
}

.container {
    max-width: 1100px;
    margin   : 0 auto
}

.sbadge {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    background   : rgba(0, 137, 123, .08);
    border       : 1px solid rgba(0, 137, 123, .15);
    padding      : 6px 16px;
    border-radius: 50px;
    font-size    : 12px;
    font-weight  : 600;
    color        : var(--teal);
    margin-bottom: 20px
}

.stitle {
    font-size     : clamp(28px, 4vw, 42px);
    font-weight   : 900;
    letter-spacing: -1px;
    line-height   : 1.15;
    margin-bottom : 16px
}

.ssub {
    font-size  : 16px;
    color      : var(--tx3);
    line-height: 1.7;
    max-width  : 560px
}

.ht {
    background             : linear-gradient(135deg, var(--teal), var(--tl));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip        : text
}

.hm {
    background             : linear-gradient(135deg, var(--mag), var(--ml));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip        : text
}

/* HERO */
.hero {
    min-height : 100vh;
    display    : flex;
    align-items: center;
    padding    : 120px 40px 80px;
    position   : relative;
    /* overflow   : hidden; */
    overflow   : clip;
    background : var(--bg);
    text-align : left;
}


.hero::before {
    content      : '';
    position     : absolute;
    width        : 600px;
    height       : 600px;
    background   : radial-gradient(circle, rgba(0, 180, 166, .06) 0%, transparent 70%);
    top          : -100px;
    right        : -100px;
    border-radius: 50%;
    animation    : fl 8s ease-in-out infinite
}

.hero::after {
    content      : '';
    position     : absolute;
    width        : 500px;
    height       : 500px;
    background   : radial-gradient(circle, rgba(233, 30, 123, .04) 0%, transparent 70%);
    bottom       : -150px;
    left         : -100px;
    border-radius: 50%;
    animation    : fl 10s ease-in-out infinite reverse
}

@keyframes fl {

    0%,
    100% {
        /* transform: translate(0, 0) scale(1) */
    }

    50% {
        /* transform: translate(30px, -30px) scale(1.05) */
    }
}

.hero-grid {
    max-width            : 1100px;
    margin               : 0 auto;
    width                : 100%;
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 60px;
    align-items          : center;
    position             : relative;
    z-index              : 2
}

.hero-content {
    max-width: 560px
}

.hero-badge {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    background   : rgba(0, 137, 123, .08);
    border       : 1px solid rgba(0, 137, 123, .18);
    padding      : 8px 18px;
    border-radius: 50px;
    font-size    : 13px;
    font-weight  : 600;
    color        : var(--teal);
    margin-bottom: 24px
}

.hero-badge::before {
    content      : '';
    width        : 8px;
    height       : 8px;
    background   : var(--teal);
    border-radius: 50%;
    animation    : pu 2s infinite
}

@keyframes pu {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

h1 {
    font-size     : clamp(34px, 4.5vw, 52px);
    font-weight   : 900;
    line-height   : 1.08;
    letter-spacing: -1.5px;
    margin-bottom : 22px
}

.hero-sub {
    font-size    : 16px;
    line-height  : 1.7;
    color        : var(--tx3);
    margin-bottom: 36px;
    max-width    : 480px
}

.hero-ctas {
    display      : flex;
    gap          : 14px;
    flex-wrap    : wrap;
    margin-bottom: 44px
}

.bp {
    background   : linear-gradient(135deg, var(--teal), var(--tl));
    color        : #fff;
    padding      : 15px 32px;
    border-radius: 50px;
    font-size    : 15px;
    font-weight  : 800;
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    transition   : .3s;
    box-shadow   : 0 4px 20px rgba(0, 137, 123, .25);
    border       : none;
    cursor       : pointer
}

.bp:hover {
    /* transform : translateY(-2px); */
    box-shadow: 0 8px 30px rgba(0, 137, 123, .35)
}

.bs {
    background   : transparent;
    color        : var(--tx);
    padding      : 15px 28px;
    border-radius: 50px;
    font-size    : 15px;
    font-weight  : 600;
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    border       : 1px solid var(--border);
    transition   : .3s;
    cursor       : pointer
}

.bs:hover {
    border-color: var(--mag);
    color       : var(--mag)
}

.trust-row {
    display  : flex;
    gap      : 28px;
    flex-wrap: wrap
}

.trust-item {
    display    : flex;
    align-items: center;
    gap        : 10px;
    font-size  : 12px;
    color      : var(--tx3);
    font-weight: 500
}

.trust-icon {
    width          : 36px;
    height         : 36px;
    border-radius  : 10px;
    background     : var(--bg2);
    border         : 1px solid var(--border);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 15px
}

/* HERO CARD - DARK */
.hero-card {
    background   : var(--dk2);
    border       : 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    padding      : 36px;
    position     : relative;
    overflow     : hidden;
    box-shadow   : 0 8px 40px rgba(0, 0, 0, .12)
}

.hero-card::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    right     : 0;
    height    : 3px;
    background: linear-gradient(90deg, var(--teal), var(--mag))
}

.card-title {
    font-size    : 19px;
    font-weight  : 800;
    margin-bottom: 6px;
    color        : #fff
}

.card-sub {
    font-size    : 13px;
    color        : var(--gr);
    margin-bottom: 24px;
    line-height  : 1.5
}

.blist {
    list-style    : none;
    display       : flex;
    flex-direction: column;
    gap           : 14px
}

.blist li {
    display    : flex;
    align-items: center;
    gap        : 12px;
    font-size  : 14px;
    color      : rgba(255, 255, 255, .85);
    font-weight: 500
}

.chk {
    width          : 24px;
    height         : 24px;
    border-radius  : 8px;
    background     : rgba(0, 180, 166, .15);
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0
}

.chk svg {
    width : 14px;
    height: 14px;
    stroke: var(--tl2)
}

/* STEPS - DARK CARDS */
.steps-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 26px;
    margin-top           : 60px;
    position             : relative;
}

/* LINEA GENERAL */
.steps-grid::before {
    content : '';
    position: absolute;

    top  : 50%;
    left : 8%;
    right: 8%;

    height: 2px;

    background:
        linear-gradient(90deg,
            rgba(0, 180, 166, .08),
            rgba(0, 180, 166, .8),
            rgba(0, 180, 166, .08));

    transform: translateY(-50%);

    z-index: 0;

    box-shadow:
        0 0 20px rgba(0, 180, 166, .18);
}

.step-card {
    position       : relative;
    z-index        : 2;

    background:
        linear-gradient(
            180deg,
            #11182B 0%,
            #0C1324 100%
        );

    border         : 1px solid rgba(255,255,255,.06);
    border-radius  : 28px;

    padding        : 34px 24px;

    text-align     : center;

    min-height     : 320px;

    display        : flex;
    flex-direction : column;

    /* CAMBIO */
    justify-content: flex-start;
    align-items    : center;

    transition     : all .35s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.03);
}

/* .step-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(0, 180, 166, .2);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(0, 180, 166, .08);
} */

/* GLOW CENTRAL */
/* .step-card::before {
    content : '';
    position: absolute;

    top  : 50%;
    right: -40px;

    width : 58px;
    height: 88px;

    transform: translateY(-50%);

    background:
        radial-gradient(circle,
            rgba(0, 212, 196, .55),
            transparent 70%);

    filter: blur(16px);

    z-index: 3;
} */

.step-card:last-child::before {
    display: none;
}

/* MINI FLECHA */
/* .step-card::after {
    content: '';

    position: absolute;

    top  : 50%;
    right: -6px;

    width : 10px;
    height: 10px;

    transform:
        translateY(-50%) rotate(45deg);

    border-top:
        2px solid var(--tl2);

    border-right:
        2px solid var(--tl2);

    z-index: 4;
} */

.step-card:last-child::after {
    display: none;
}

.step-num {
    width : 56px;
    height: 56px;

    margin: 0 auto 24px;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            var(--teal),
            var(--tl));

    color: #fff;

    display        : flex;
    align-items    : center;
    justify-content: center;

    font-size  : 22px;
    font-weight: 900;

    box-shadow:
        0 10px 25px rgba(0, 180, 166, .35);
}

.step-card h3 {
    font-size  : 18px;
    font-weight: 800;
    line-height: 1.3;

    color: #fff;

    margin-bottom: 14px;
    margin-top: 8px;
}

.step-card p {
    font-size  : 15px;
    line-height: 1.8;
    color      : var(--gr);
}

/* MOBILE */
@media(max-width: 900px) {

    .steps-grid {
        grid-template-columns: 1fr;
        gap                  : 20px;
    }

    .steps-grid::before {
        display: none;
    }

    .step-card::before,
    .step-card::after {
        display: none;
    }

    .step-card {
        min-height: auto;
    }
}

/* SIMULATOR */
.sim {
    background: var(--bg2)
}

.product-selector {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 20px;
    margin-top           : 48px;
    margin-bottom        : 36px
}

.pcard {
    background   : var(--dk2);
    border       : 2px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding      : 28px;
    cursor       : pointer;
    /* transition   : all .3s; */
    position     : relative;
    overflow     : hidden;
    box-shadow   : 0 4px 20px rgba(0, 0, 0, .1);
    color        : #fff
}

.pcard::before {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : 0;
    right     : 0;
    height    : 3px;
    opacity   : 0;
    /* transition: .3s */
}

.pcard.express::before {
    background: linear-gradient(90deg, var(--teal), var(--tl))
}

.pcard.clave::before {
    background: linear-gradient(90deg, var(--mag), var(--ml))
}

.pcard:hover {
    /* transform : translateY(-2px); */
    box-shadow: 0 12px 35px rgba(0, 0, 0, .15)
}

.pcard.on.express {
    border-color: var(--teal);
    box-shadow  : 0 0 0 1px var(--teal), 0 12px 35px rgba(0, 137, 123, .2)
}

.pcard.on.clave {
    border-color: var(--mag);
    box-shadow  : 0 0 0 1px var(--mag), 0 12px 35px rgba(233, 30, 123, .2)
}

.pcard.on::before {
    opacity: 1
}

.pheader {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 16px
}

.pname {
    font-size  : 18px;
    font-weight: 800;
    display    : flex;
    align-items: center;
    gap        : 10px
}

.pdesc {
    font-size    : 14px;
    color        : var(--gr);
    line-height  : 1.6;
    margin-bottom: 18px
}

.pspecs {
    display       : flex;
    flex-direction: column;
    gap           : 10px
}

.spec {
    display    : flex;
    align-items: center;
    gap        : 10px;
    font-size  : 13px;
    font-weight: 500
}

.spec-icon {
    width          : 28px;
    height         : 28px;
    border-radius  : 8px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 13px;
    flex-shrink    : 0
}

.express .spec-icon {
    background: rgba(0, 180, 166, .15)
}

.clave .spec-icon {
    background: rgba(233, 30, 123, .15)
}

.spec-lbl {
    color: var(--gr)
}

.spec-val {
    color      : #fff;
    font-weight: 700;
    margin-left: auto
}

.pradio {
    width          : 22px;
    height         : 22px;
    border-radius  : 50%;
    border         : 2px solid rgba(255, 255, 255, .2);
    display        : flex;
    align-items    : center;
    justify-content: center;
    /* transition     : .3s */
}

.pcard.on.express .pradio {
    border-color: var(--tl);
    background  : var(--tl)
}

.pcard.on.clave .pradio {
    border-color: var(--ml);
    background  : var(--ml)
}

.pradio::after {
    content      : '';
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    background   : var(--dk2);
    opacity      : 0;
    /* transition   : .3s */
}

.pcard.on .pradio::after {
    opacity: 1
}

.sim-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 48px;
    align-items          : start
}

.sim-panel {
    display: none
}

.sim-panel.on {
    display: block
}

/* SIM BOX - DARK */
.sbox {
    background   : var(--dk2);
    border       : 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    padding      : 36px;
    color        : #fff;
    box-shadow   : 0 4px 20px rgba(0, 0, 0, .1)
}

.sbox h3 {
    font-size    : 18px;
    font-weight  : 700;
    margin-bottom: 24px
}

.field {
    margin-bottom: 24px
}

.field label {
    display      : block;
    font-size    : 13px;
    font-weight  : 600;
    color        : var(--gr);
    margin-bottom: 10px
}

.field input[type=range] {
    width             : 100%;
    appearance        : none;
    -webkit-appearance: none;
    height            : 6px;
    border-radius     : 3px;
    background        : rgba(255, 255, 255, .1);
    outline           : none;
    margin-bottom     : 8px
}

.field input[type=range]::-webkit-slider-thumb {
    appearance        : none;
    -webkit-appearance: none;
    width             : 22px;
    height            : 22px;
    border-radius     : 50%;
    background        : linear-gradient(135deg, var(--teal), var(--tl));
    cursor            : pointer;
    box-shadow        : 0 2px 10px rgba(0, 137, 123, .4)
}

.range-vals {
    display        : flex;
    justify-content: space-between;
    font-size      : 11px;
    color          : var(--gr)
}

.rdisplay {
    font-size    : 28px;
    font-weight  : 900;
    color        : var(--tl2);
    margin-bottom: 4px
}

.pill-group {
    display  : flex;
    gap      : 8px;
    flex-wrap: wrap
}

.pill {
    padding      : 10px 18px;
    border-radius: 50px;
    border       : 1px solid rgba(255, 255, 255, .12);
    background   : transparent;
    color        : var(--gr);
    font-size    : 13px;
    font-weight  : 600;
    cursor       : pointer;
    /* transition   : .3s; */
    font-family  : 'Inter', sans-serif
}

.pill:hover {
    border-color: var(--mag);
    color       : var(--ml)
}

.pill.on {
    background  : var(--mag);
    color       : #fff;
    border-color: var(--mag)
}

.plazo-fixed {
    padding      : 12px 20px;
    border-radius: 12px;
    border       : 1px solid rgba(0, 180, 166, .25);
    background   : rgba(0, 180, 166, .08);
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    font-size    : 14px;
    font-weight  : 700;
    color        : var(--tl2)
}

.info-box {
    border-radius: 14px;
    padding      : 16px 20px;
    font-size    : 13px;
    line-height  : 1.6
}

.info-box.teal {
    background: rgba(0, 180, 166, .08);
    border    : 1px solid rgba(0, 180, 166, .18);
    color     : var(--gr)
}

.info-box.mag {
    background: rgba(233, 30, 123, .08);
    border    : 1px solid rgba(233, 30, 123, .18);
    color     : var(--gr)
}

.info-box strong.t {
    color: var(--tl2)
}

.info-box strong.m {
    color: var(--ml)
}

/* RESULT BOX - DARK */
.rbox {
    background   : var(--dk2);
    border-radius: 24px;
    padding      : 36px;
    text-align   : center;
    color        : #fff;
    box-shadow   : 0 4px 20px rgba(0, 0, 0, .1)
}

.rbox.tb {
    border: 1px solid rgba(0, 180, 166, .25)
}

.rbox.mb {
    border: 1px solid rgba(233, 30, 123, .25)
}

.rbox h3 {
    font-size    : 16px;
    font-weight  : 700;
    color        : var(--gr);
    margin-bottom: 28px
}

.rbig {
    font-size    : 48px;
    font-weight  : 900;
    margin-bottom: 4px
}

.rlabel {
    font-size    : 13px;
    color        : var(--gr);
    margin-bottom: 24px
}

.rrow {
    display        : flex;
    justify-content: space-around;
    margin         : 28px 0;
    padding        : 20px 0;
    border-top     : 1px solid rgba(255, 255, 255, .06);
    border-bottom  : 1px solid rgba(255, 255, 255, .06)
}

.ritem {
    text-align: center
}

.ritem .rv {
    font-size    : 20px;
    font-weight  : 800;
    margin-bottom: 2px
}

.ritem .rl {
    font-size: 11px;
    color    : var(--gr)
}

.rtotal {
    text-align   : center;
    margin-bottom: 20px;
    padding      : 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.bfull {
    width          : 100%;
    justify-content: center;
    margin-top     : 8px
}

.bmf {
    background     : linear-gradient(135deg, var(--mag), var(--ml));
    color          : #fff;
    padding        : 15px 32px;
    border-radius  : 50px;
    font-size      : 15px;
    font-weight    : 800;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    /* transition     : .3s; */
    box-shadow     : 0 4px 20px rgba(233, 30, 123, .25);
    border         : none;
    cursor         : pointer;
    width          : 100%
}

.bmf:hover {
    /* transform : translateY(-2px); */
    box-shadow: 0 8px 30px rgba(233, 30, 123, .35)
}

/* BENEFICIOS - DARK CARDS */
/* .ben-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 20px;
    margin-top           : 48px
}

.ben-card {
    background   : var(--dk2);
    border       : 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding      : 32px;
    transition   : .3s;
    color        : #fff;
    box-shadow   : 0 4px 20px rgba(0, 0, 0, .1)
}

.ben-card:hover {
    transform : translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .15)
}

.ben-icon {
    width          : 48px;
    height         : 48px;
    border-radius  : 14px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 22px;
    margin-bottom  : 18px
}

.ben-icon.t {
    background: rgba(0, 180, 166, .12)
}

.ben-icon.m {
    background: rgba(233, 30, 123, .12)
}

.ben-card h3 {
    font-size    : 16px;
    font-weight  : 700;
    margin-bottom: 8px
}

.ben-card p {
    font-size  : 13px;
    color      : var(--gr);
    line-height: 1.6
} */

/* EMPRESAS - MIXED */
.sec-alt {
    background: var(--bg2)
}

.emp-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 48px;
    margin-top           : 48px;
    align-items          : center
}

.emp-features {
    display       : flex;
    flex-direction: column;
    gap           : 20px
}

.emp-feat {
    display         : flex;
    gap             : 16px;
    padding         : 20px;
    background      : var(--dk2);
    border          : 1px solid rgba(255, 255, 255, .06);
    border-radius   : 16px;
    /* transition   : .3s; */
    color           : #fff;
    box-shadow      : 0 4px 15px rgba(0, 0, 0, .1)
}

/* .emp-feat:hover {
    transform : translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15)
} */

.emp-feat-icon {
    width          : 44px;
    height         : 44px;
    border-radius  : 12px;
    background     : rgba(0, 180, 166, .12);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 20px;
    flex-shrink    : 0
}

.emp-feat h4 {
    font-size    : 18px;
    font-weight  : 700;
    margin-bottom: 16px
}

.emp-feat p {
    font-size  : 16px;
    color      : var(--gr);
    line-height: 1.5
}

/* FORMS - DARK CARDS */
.forms-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 32px;
    margin-top           : 48px
}

.fcard {
    background   : var(--dk2);
    border       : 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    padding      : 36px;
    position     : relative;
    overflow     : hidden;
    color        : #fff;
    box-shadow   : 0 4px 20px rgba(0, 0, 0, .1)
}

.fcard::before {
    content : '';
    position: absolute;
    top     : 0;
    left    : 0;
    right   : 0;
    height  : 3px
}

.fcard.emp::before {
    background: linear-gradient(90deg, var(--teal), var(--tl))
}

.fcard.col::before {
    background: linear-gradient(90deg, var(--mag), var(--ml))
}

.fcard h3 {
    font-size    : 18px;
    font-weight  : 800;
    margin-bottom: 6px
}

.fcard .fsub {
    font-size    : 13px;
    color        : var(--gr);
    margin-bottom: 24px
}

.ig {
    margin-bottom: 16px
}

.ig label {
    display      : block;
    font-size    : 12px;
    font-weight  : 600;
    color        : var(--gr);
    margin-bottom: 6px
}

.ig input,
.ig select {
    width        : 100%;
    padding      : 12px 16px;
    border-radius: 12px;
    border       : 1px solid rgba(255, 255, 255, .1);
    background   : rgba(255, 255, 255, .05);
    color        : #fff;
    font-size    : 14px;
    font-family  : 'Inter', sans-serif;
    /* transition   : .3s; */
    outline      : none
}

.ig input:focus,
.ig select:focus {
    border-color: var(--teal);
    background  : rgba(0, 180, 166, .08)
}

.ig select option {
    background: var(--dk2);
    color     : #fff
}

.ig input::placeholder {
    color: var(--gr)
}

.irow {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 12px
}

.fnote {
    font-size : 11px;
    color     : var(--gr);
    text-align: center;
    margin-top: 12px
}

.bteal {
    background   : linear-gradient(135deg, var(--teal), var(--tl));
    color        : #fff;
    width        : 100%;
    padding      : 14px;
    border-radius: 50px;
    font-size    : 14px;
    font-weight  : 800;
    border       : none;
    cursor       : pointer;
    /* transition   : .3s; */
    font-family  : 'Inter', sans-serif
}

.bteal:hover {
    /* transform : translateY(-2px); */
    box-shadow: 0 8px 25px rgba(0, 137, 123, .35)
}

.bmag {
    background   : linear-gradient(135deg, var(--mag), var(--ml));
    color        : #fff;
    width        : 100%;
    padding      : 14px;
    border-radius: 50px;
    font-size    : 14px;
    font-weight  : 800;
    border       : none;
    cursor       : pointer;
    /* transition   : .3s; */
    font-family  : 'Inter', sans-serif
}

.bmag:hover {
    /* transform : translateY(-2px); */
    box-shadow: 0 8px 25px rgba(233, 30, 123, .35)
}

.smsg {
    display   : none;
    text-align: center;
    padding   : 40px 20px
}

.smsg.show {
    display: block
}

.smsg .icon {
    font-size    : 48px;
    margin-bottom: 16px
}

.smsg h4 {
    font-size    : 18px;
    font-weight  : 800;
    margin-bottom: 8px
}

.smsg p {
    font-size: 13px;
    color    : var(--gr)
}

/* FAQ - DARK CARDS */
.faq-list {
    max-width     : 740px;
    margin        : 48px auto 0;
    display       : flex;
    flex-direction: column;
    gap           : 12px
}

.fqi {
    background   : var(--dk2);
    border       : 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    overflow     : hidden;
    transition   : .3s;
    box-shadow   : 0 2px 12px rgba(0, 0, 0, .08)
}

.fqi.open {
    border-color: rgba(0, 180, 166, .3)
}

.fqq {
    padding        : 20px 24px;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    cursor         : pointer;
    font-size      : 15px;
    font-weight    : 600;
    transition     : .3s;
    color          : #fff
}

.fqq:hover {
    color: var(--tl2)
}

.fqq span {
    transition: .3s;
    font-size : 20px;
    color     : var(--tl)
}

.fqi.open .fqq span {
    transform: rotate(45deg)
}

.fqa {
    max-height: 0;
    overflow  : hidden;
    transition: max-height .3s ease;
    padding   : 0 24px
}

.fqi.open .fqa {
    max-height: 200px
}

.fqa p {
    padding    : 0 0 20px;
    font-size  : 14px;
    color      : var(--gr);
    line-height: 1.7
}

/* FOOTER */
footer {
    background: var(--dk);
    color     : rgba(255, 255, 255, .8);
    padding   : 60px 40px 30px
}

.fgrid {
    max-width            : 1100px;
    margin               : 0 auto;
    display              : grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap                  : 40px;
    margin-bottom        : 40px
}

.fbrand p {
    font-size  : 13px;
    color      : rgba(255, 255, 255, .6);
    line-height: 1.7;
    margin-top : 12px;
    max-width  : 280px
}

.fcol h4 {
    font-size     : 12px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color         : rgba(255, 255, 255, .4);
    margin-bottom : 16px
}

.fcol a {
    display      : block;
    font-size    : 13px;
    color        : rgba(255, 255, 255, .7);
    margin-bottom: 10px;
    transition   : .3s
}

.fcol a:hover {
    color: var(--tl)
}

.fbot {
    max-width      : 1100px;
    margin         : 0 auto;
    padding-top    : 24px;
    border-top     : 1px solid rgba(255, 255, 255, .1);
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    font-size      : 11px;
    color          : rgba(255, 255, 255, .4)
}

.fsoc {
    display: flex;
    gap    : 16px
}

.fsoc a {
    width          : 36px;
    height         : 36px;
    border-radius  : 10px;
    background     : rgba(255, 255, 255, .06);
    border         : 1px solid rgba(255, 255, 255, .1);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : rgba(255, 255, 255, .6);
    transition     : .3s;
    font-size      : 14px
}

.fsoc a:hover {
    border-color: var(--tl);
    color       : var(--tl)
}

.fsoc svg {
    width       : 18px;
    height      : 18px;
    stroke-width: 2;
}

.ft-logo {
    font-size     : 22px;
    font-weight   : 800;
    color         : var(--tl);
    letter-spacing: -.5px
}

.wabtn {
    position       : fixed;
    bottom         : 24px;
    right          : 24px;
    width          : 60px;
    height         : 60px;
    border-radius  : 50%;
    background     : #25D366;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 99;
    box-shadow     : 0 4px 20px rgba(37, 211, 102, .4);
    transition     : .3s;
    cursor         : pointer;
    border         : none
}

.wabtn:hover {
    /* transform: scale(1.1) */
}

.wabtn svg {
    width : 30px;
    height: 30px;
    fill  : white
}

@media(max-width:900px) {
    section {
        padding: 70px 20px
    }

    nav {
        padding: 12px 20px
    }

    .logo-img {
        height: 32px;
    }

    .nav-links {
        display: none
    }

    .hero {
        padding: 100px 20px 60px
    }

    .hero-content {
        max-width: 900px
    }

    .hero-sub {
        max-width: 900px
    }

    .hero-ctas {
        flex-direction : row;
        margin         : auto;
        margin-bottom  : auto;
        max-width      : 900px;
        display        : flex;
        justify-content: center;
        margin-bottom  : 40px;
    }

    .hero-grid,
    .sim-grid,
    .emp-grid,
    .forms-grid {
        grid-template-columns: 1fr
    }

    .product-selector {
        grid-template-columns: 1fr
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap                  : 22px;
    }

    .step-arrow,
    .step-card::after {
        display: none;
    }

    .step-card {
        border-radius: 22px;
    }

    .ben-grid {
        grid-template-columns: 1fr
    }

    .fgrid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:480px) {
    h1 {
        font-size: 30px
    }

    .logo-img {
        height: 28px;
    }

    .hero-ctas {
        flex-direction: column
    }

    .bp,
    .bs {
        width          : 100%;
        justify-content: center
    }

    .steps-grid,
    .irow {
        grid-template-columns: 1fr
    }

    .fgrid {
        grid-template-columns: 1fr
    }

    .rbig {
        font-size: 36px
    }
}

/* ANIMACIONES */

trust-icon,
.spec-icon,
.ben-icon,
.emp-feat-icon {
    color: var(--tl);
    /* o var(--mag) según sección */
}

.trust-icon i,
.spec-icon i,
.ben-icon i,
.emp-feat-icon i {
    width       : 20px;
    height      : 20px;
    stroke-width: 2;
}

.trust-icon i {
    transition: transform .2s ease;
}

.trust-item:hover i {
    /* transform: scale(1.1); */
}

/* ICONOS */
i[data-lucide] {
    width       : 18px;
    height      : 18px;
    stroke-width: 2;
}

.pname i {
    width : 20px;
    height: 20px;
}

.spec-icon i {
    width : 16px;
    height: 16px;
}

.wicon {
    display    : flex;
    align-items: center;
    gap        : 8px;
}