/* =========================================================
   BANRED DESIGN SYSTEM
========================================================= */

:root {

    --banred-purple: #1e0c42;
    --banred-purple-2: #32136f;

    --banred-blue: #3157ff;
    --banred-blue-2: #4778ff;

    --banred-cyan: #00d9ff;
    --banred-cyan-2: #42cfff;

    --breb-blue: #00bdf2;
    --breb-green: #00e69a;

    --black: #0b0815;

    --text: #18152b;
    --muted: #6d687c;

    --white: #ffffff;

    --surface: #f7f8fc;
    --border: #e7e8f0;

    --radius: 28px;

    --shadow:
        0 20px 70px rgba(30,12,66,.10);

    --transition:
        500ms cubic-bezier(.22,.61,.36,1);
}


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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    color: var(--text);

    background: #fff;

    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}


html,
body {
    max-width: 100%;
    overflow-x: clip;
}

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


img {
    max-width: 100%;
    display: block;
}


button {
    font-family: inherit;
}


.container {

    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin: auto;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {

    font-family:
        "Manrope",
        sans-serif;

    letter-spacing: -0.045em;
}


h1 {

    font-size:
        clamp(
            50px,
            6vw,
            82px
        );

    line-height: .98;

    font-weight: 800;
}


h2 {

    font-size:
        clamp(
            38px,
            5vw,
            60px
        );

    line-height: 1.02;

    font-weight: 800;
}


.gradient-text {
    background: linear-gradient(
        90deg,
        #1E0C42 0%,
        #C7003F 25%,
        #F90050 42%,
        #F96A00 62%,
        #FAAB00 78%,
        #DAF204 100%
    );

    background-size: 250% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: banredGradientMove 5s ease-in-out infinite;
}

@keyframes banredGradientMove {
    0% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}


.breb-gradient {

    background:
        linear-gradient(
            100deg,
            #00bdf2,
            #00e69a
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    display: inline-flex;

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

    gap: 12px;

    border-radius: 8px;

    padding:
        14px 22px;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

    cursor: pointer;
}


.btn:hover {

    transform:
        translateY(-3px);

}


.btn-primary {

    color: #fff;

    background:
        linear-gradient(
            100deg,
            var(--banred-purple),
            #4120a0
        );

    box-shadow:
        0 12px 28px
        rgba(30,12,66,.20);

}


.btn-outline {

    color: var(--banred-purple);

    border:
        1px solid
        #8f83b0;

    background: #fff;

}


.btn-light {

    color:
        var(--banred-purple);

    background:
        #fff;

}


.btn-dark-outline {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.4);

}


.btn-large {

    padding:
        16px 26px;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position:
        fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 10000;

    background:
        rgba(255,255,255,.88);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid
        rgba(30,12,66,.05);

}


.header-inner {

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    height: 82px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

}


.brand img {

    width:
        128px;

}


.main-nav {

    display:
        flex;

    align-items:
        center;

    gap: 28px;

    font-size: 13px;

    font-weight: 600;

}


.main-nav a {

    transition:
        color .25s ease;

}



.main-nav a:hover {
    background: linear-gradient(
        90deg,
        #1E0C42 0%,
        #C90043 25%,
        #FF0050 45%,
        #FF6A00 65%,
        #FFB000 80%,
        #D8F000 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    transition: color .25s ease;
}



.header-actions {

    display:
        flex;

    align-items:
        center;

    gap: 9px;

}


.search-button {

    width: 35px;
    height: 35px;

    border: 0;

    background: transparent;

    position: relative;

}


.search-button span {

    position: absolute;

    width: 13px;
    height: 13px;

    border:
        2px solid
        var(--banred-purple);

    border-radius: 50%;

    left: 8px;
    top: 7px;

}


.search-button span::after {

    content: "";

    position: absolute;

    width: 7px;
    height: 2px;

    background:
        var(--banred-purple);

    transform:
        rotate(45deg);

    right: -6px;
    bottom: -3px;

}


.mobile-menu {

    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    background: #f4f2fa;

    border: 0;

    border-radius: 12px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    position: relative;

    z-index: 1001;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height:
        780px;

    padding:
        155px 0 80px;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 72% 30%,
            rgba(0,217,255,.12),
            transparent 26%
        ),

        radial-gradient(
            circle at 50% 70%,
            rgba(49,87,255,.10),
            transparent 35%
        ),

        #fafbff;

}


.hero-container {

    display:
        grid;

    grid-template-columns:
        .95fr 1.05fr;

    align-items:
        center;

    gap:
        50px;

}


.eyebrow {

    color:
        #625b78;

    font-size:
        11px;

    letter-spacing:
        .12em;

    font-weight:
        800;

    margin-bottom:
        20px;

}


.hero h1 {

    color:
        var(--banred-purple);

}


.hero-copy > p {

    margin-top:
        25px;

    max-width:
        570px;

    font-size:
        17px;

    line-height:
        1.65;

    color:
        var(--muted);

}


.hero-buttons {

    display:
        flex;

    gap:
        12px;

    margin-top:
        30px;

}


.hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;

    margin-top:
        30px;

    font-size:
        12px;

    font-weight:
        700;

}


.hero-trust > div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.trust-icon {
    width:
        27px;
    height:
        27px;
    display:
        grid;
    place-items:
        center;
    border-radius:
        50%;
    color:
        var(--banred-purple);
    background:
        #eeeaff;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    height:
        520px;

    position:
        relative;

}


.hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(50px);

    pointer-events:
        none;

}


.hero-glow-1 {

    width:
        350px;

    height:
        350px;

    background:
        rgba(49,87,255,.13);

    right:
        -100px;

    top:
        150px;

}


.hero-glow-2 {

    width:
        250px;

    height:
        250px;

    background:
        rgba(0,217,255,.13);

    left:
        45%;

    top:
        100px;

}


.hero-orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(49,87,255,.12);

    border-radius:
        50%;

    animation:
        orbitRotate
        18s linear infinite;

}


.orbit-one {

    width:
        450px;

    height:
        450px;

    right:
        0;

    top:
        35px;

}


.orbit-two {

    width:
        330px;

    height:
        330px;

    right:
        70px;

    top:
        95px;

    animation-direction:
        reverse;

}


.hero-person {

    position:
        absolute;

    width:
        310px;

    height:
        430px;

    left:
        25%;

    bottom:
        0;

    z-index:
        3;

}


.person-placeholder {

    position:
        absolute;

    inset:
        0;

}


.person-head {

    width:
        125px;

    height:
        145px;

    background:
        linear-gradient(
            145deg,
            #c58d6a,
            #8e5945
        );

    border-radius:
        48% 48% 45% 45%;

    position:
        absolute;

    top:
        15px;

    left:
        92px;

}


.person-head::before {

    content:
        "";

    position:
        absolute;

    width:
        130px;

    height:
        50px;

    background:
        #171321;

    border-radius:
        70% 70% 20% 20%;

    top:
        -5px;

    left:
        -2px;

}


.person-body {

    position:
        absolute;

    width:
        290px;

    height:
        330px;

    left:
        10px;

    bottom:
        0;

    border-radius:
        45% 45% 0 0;

    background:

        linear-gradient(
            130deg,
            #1e0c42,
            #3157ff 58%,
            #00c9e8
        );

    box-shadow:
        0 30px 80px
        rgba(30,12,66,.28);

}


.floating-card {

    position:
        absolute;

    z-index:
        5;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid
        rgba(30,12,66,.08);

    box-shadow:
        var(--shadow);

    border-radius:
        18px;

    backdrop-filter:
        blur(10px);

}


.transfer-card {

    left:
        -35px;

    top:
        100px;

    padding:
        13px 17px;

    display:
        flex;

    gap:
        10px;

    align-items:
        center;

    animation:
        floatCard
        5s ease-in-out infinite;

}


.avatar {

    width:
        37px;

    height:
        37px;

    border-radius:
        12px;

    display:
        grid;

    place-items:
        center;

    font-weight:
        800;

    color:
        white;

}


.avatar-purple {

    background:
        linear-gradient(
            135deg,
            #3157ff,
            #7e4dff
        );

}


.transfer-card small,
.transfer-card span {

    display:
        block;

    color:
        #817b8f;

    font-size:
        9px;

}


.transfer-card strong {

    display:
        block;

    font-size:
        11px;

}


.company-card {

    right:
        -25px;

    top:
        170px;

    padding:
        16px;

    min-width:
        170px;

    animation:
        floatCard
        6s ease-in-out infinite
        .8s;

}


.company-icon {

    width:
        34px;

    height:
        34px;

    background:
        #e9e5ff;

    border-radius:
        10px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--banred-purple);

    font-weight:
        900;

}


.company-card strong {

    display:
        block;

    margin-top:
        5px;

}


.company-card small {

    font-weight:
        700;

}


.success {

    display:
        block;

    color:
        #09a96d;

    font-size:
        9px;

    margin-top:
        5px;

}


.services-card {

    right:
        30px;

    bottom:
        45px;

    padding:
        18px;

    width:
        175px;

    animation:
        floatCard
        6s ease-in-out infinite
        1.5s;

}


.services-card strong {

    display:
        block;

    margin-bottom:
        10px;

}


.services-card div {

    font-size:
        10px;

    margin:
        6px 0;

    color:
        #666;

}


.hero-breb {

    position:
        absolute;

    left:
        50%;

    top:
        220px;

    transform:
        translate(-50%,-50%);

    z-index:
        6;

}

.breb-core-logo {
    width: 92px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.breb-core {

    width:
        105px;

    height:
        105px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    font-size:
        19px;

    font-weight:
        800;

    background:
        linear-gradient(
            135deg,
            #00E69A 0%,
            #00D9C6 42%,
            #00BDF2 72%,
            #1687FF 100%
        );

    box-shadow:
        0 0 50px
        rgba(0,220,180,.35);

}


.breb-line {

    position:
        absolute;

    height:
        2px;

    width:
        130px;

    background:
        linear-gradient(
            90deg,
            #00d9ff,
            #00e69a
        );

    transform-origin:
        left center;

    animation:
        connectionFlow
        2.5s linear infinite;

}


.line-a {

    right:
        80px;

    top:
        25px;

    transform:
        rotate(-22deg);

}


.line-b {

    right:
        80px;

    top:
        52px;

}


.line-c {

    right:
        80px;

    top:
        80px;

    transform:
        rotate(20deg);

}


.hero-message {

    position:
        absolute;

    left:
        55%;

    top:
        35px;

    padding:
        13px 17px;

    background:
        #fff;

    border-radius:
        15px;

    box-shadow:
        var(--shadow);

    font-size:
        10px;

    z-index:
        7;

}


.hero-message strong {

    display:
        block;

    font-size:
        13px;

}


/* =========================================================
   PARTNERS
========================================================= */

.partners {

    border-top:
        1px solid
        #eee;

    border-bottom:
        1px solid
        #eee;

    padding:
        24px 0;

}


.partners p {

    font-size:
        11px;

    color:
        #777;

    margin-bottom:
        15px;

}


.partners-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    flex-wrap:
        wrap;

    font-weight:
        800;

    color:
        #333;

    font-size:
        13px;

}


/* =========================================================
   GENERIC SECTION
========================================================= */

.section {

    padding:
        110px 0;

}


.section-tag {

    display:
        inline-block;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        #eeeaff;

    color:
        #5b42a6;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    margin-bottom:
        17px;

}


.section-intro p,
.business-header p,
.coverage-copy p,
.integration-copy p,
.payment-copy p,
.stories-header p {

    color:
        var(--muted);

    line-height:
        1.7;

    font-size:
        15px;

}


/* =========================================================
   SOLUTIONS
========================================================= */

.solutions {

    background:
        #fff;

}


.solutions-layout {

    display:
        grid;

    grid-template-columns:
        .72fr 1.28fr;

    gap:
        65px;

    align-items:
        center;

}


.section-intro h2 {

    color:
        var(--banred-purple);

    margin-bottom:
        18px;

}


.section-intro p {

    max-width:
        370px;

    margin-bottom:
        28px;

}


.solution-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        13px;

}


.solution-card {

    position:
        relative;

    padding:
        25px 20px;

    min-height:
        205px;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f8f8fd
        );

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

}


.solution-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        0 20px 50px
        rgba(30,12,66,.11);

    border-color:
        #d8d0f0;

}


.solution-icon {

    width:
        45px;

    height:
        45px;

    border-radius:
        15px;

    display:
        grid;

    place-items:
        center;

    font-weight:
        900;

    margin-bottom:
        18px;

}


.icon-bank {

    color:
        #3157ff;

    background:
        #e7ecff;

}


.icon-payment {

    color:
        #00a56f;

    background:
        #e0fff4;

}


.icon-transfer {

    color:
        #2475df;

    background:
        #e5f1ff;

}


.icon-recharge {

    color:
        #e48b00;

    background:
        #fff0d5;

}


.icon-digital {

    color:
        #c32386;

    background:
        #ffe4f5;

}


.icon-api {

    color:
        #6841df;

    background:
        #eee8ff;

}


.solution-card h3 {

    color:
        var(--banred-purple);

    font-size:
        16px;

    margin-bottom:
        8px;

}


.solution-card p {

    color:
        #777;

    font-size:
        11px;

    line-height:
        1.55;

}


.card-arrow {

    position:
        absolute;

    right:
        18px;

    bottom:
        17px;

    width:
        26px;

    height:
        26px;

    border:
        1px solid
        #c9c1df;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    font-size:
        11px;

}


/* =========================================================
   BRE-B
========================================================= */

.breb-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        90px 0;

    color:
        white;

    background:
        linear-gradient(
            120deg,
            #12062d,
            #251066 50%,
            #101c63
        );

}


.breb-section::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    background:
        rgba(0,217,255,.13);

    filter:
        blur(70px);

    right:
        -100px;

    top:
        -150px;

}


.breb-section::after {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    border-radius:
        50%;

    background:
        rgba(0,230,154,.10);

    filter:
        blur(70px);

    left:
        30%;

    bottom:
        -150px;

}


.breb-layout {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        .72fr 1.28fr;

    gap:
        60px;

    align-items:
        center;

}


.breb-copy h2 {

    max-width:
        470px;

    margin-bottom:
        20px;

}


.breb-copy p {

    max-width:
        500px;

    line-height:
        1.7;

    color:
        #d5d0e3;

    margin-bottom:
        28px;

}


.breb-tag {

    color:
        #b8fff0;

    background:
        rgba(0,230,154,.12);

}


.breb-network {

    min-height:
        370px;

    position:
        relative;

}


.breb-users {

    position:
        absolute;

    left:
        0;

    top:
        70px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.breb-user {
    width: 185px;
    height: 58px;
    padding: 9px 10px;

    position: relative;

    display: flex;
    align-items: center;
    gap: 9px;

    border: 1px solid rgba(255,255,255,.15);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.045)
        );

    backdrop-filter: blur(14px);

    border-radius: 15px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);

    font-size: 11px;

    overflow: hidden;

    animation:
        brebUserFloat
        5s ease-in-out infinite;
}

.breb-user:nth-child(2) {
    animation-delay: .7s;
}

.breb-user:nth-child(3) {
    animation-delay: 1.4s;
}

.breb-user-data {
    min-width: 0;
    flex: 1;
}

.send-status {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(0,217,255,.08);

    color: #00d9ff;

    font-size: 8px;

    flex-shrink: 0;

    animation:
        sendStatusPulse
        2s ease-in-out infinite;
}

.send-status i {
    transition: transform .3s ease;
}

.breb-user:hover .send-status i {
    transform: translateX(3px);
}



.breb-user-data strong {
    display: block;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.2;
}

.breb-user-data small {
    display: block;

    margin-top: 3px;

    color: #aaa4bc;

    font-size: 8px;
    line-height: 1.2;
}

.breb-user small {

    display:
        block;

    color:
        #a8a0bb;

    font-size:
        8px;

}


.mini-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    overflow: visible;
    background:
        linear-gradient(
            135deg,
            #00c2ff,
            #00ef9a
        );

    color: #fff;

    font-size: 11px;

    box-shadow:
        0 0 18px rgba(0,217,255,.28);

    position: relative;

    z-index: 2;
}

.breb-money-bubble {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;

    background:
        rgba(255,255,255,.14);

    border:
        1px solid
        rgba(255,255,255,.42);

    box-shadow:
        0 0 12px rgba(0,230,154,.30),
        inset 0 0 8px rgba(255,255,255,.12);

    backdrop-filter: blur(6px);

    z-index: 1;

    opacity: 0;

    pointer-events: none;

    animation:
        brebMoneyFloat
        4.5s
        ease-out
        infinite;
}

@keyframes brebMoneyFloat {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            scale(.35);
    }

    15% {
        opacity: 1;

        transform:
            translate(
                calc(-50% + var(--x-start)),
                calc(-50% + var(--y-start))
            )
            scale(.85);
    }

    55% {
        opacity: .9;

        transform:
            translate(
                calc(-50% + var(--x-mid)),
                calc(-50% + var(--y-mid))
            )
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(
                calc(-50% + var(--x-end)),
                calc(-50% + var(--y-end))
            )
            scale(.65);
    }

}

.bubble-1 {
    --x-start: -8px;
    --y-start: -48px;

    --x-mid: -35px;
    --y-mid: -82px;

    --x-end: -58px;
    --y-end: -115px;

    animation-delay: 0s;
}


.bubble-2 {
    --x-start: 18px;
    --y-start: -50px;

    --x-mid: 35px;
    --y-mid: -90px;

    --x-end: 55px;
    --y-end: -125px;

    animation-delay: 1.1s;
}


.bubble-3 {
    --x-start: 48px;
    --y-start: -8px;

    --x-mid: 72px;
    --y-mid: -35px;

    --x-end: 92px;
    --y-end: -62px;

    animation-delay: 2.2s;
}


.bubble-4 {
    --x-start: -48px;
    --y-start: 8px;

    --x-mid: -72px;
    --y-mid: -20px;

    --x-end: -95px;
    --y-end: -48px;

    animation-delay: 3.1s;
}


.bubble-5 {
    --x-start: 8px;
    --y-start: 48px;

    --x-mid: 28px;
    --y-mid: 72px;

    --x-end: 42px;
    --y-end: 98px;

    animation-delay: 3.8s;
}

.mini-avatar i {
    animation:
        brebSendIcon
        2.2s ease-in-out infinite;
}


.breb-big-core {
    position: absolute;

    left: calc(50% + 60px);
    top: 167.5px;

    transform: translate(-50%,-50%);

    width: 125px;
    height: 125px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 21px;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #00E69A 0%,
            #00D9C6 42%,
            #00BDF2 72%,
            #1687FF 100%
        );

    border:
        2px solid
        rgba(255,255,255,.55);

    box-shadow:
        0 0 55px
        rgba(0,220,180,.38);

    animation:
        corePulse
        3s ease-in-out infinite;
}

/* ==========================================================
   BRE-B — FLUJO DE TRANSACCIONES
========================================================== */

.breb-flow {
    position: absolute;

    left: 185px;
    top: 70px;

    width: calc(50% - 187.5px);
    height: 194px;

    pointer-events: none;

    z-index: 3;
}

.breb-flow-right {
    position: absolute;

    left: calc(50% + 122.5px);
    right: 155px;

    top: 167.5px;

    height: 10px;

    transform: translateY(-50%);

    pointer-events: none;

    z-index: 3;
}

.breb-flow-right-svg {
    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;
}
.flow-line-right {
    fill: none;

    stroke:
        #00d9ff;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-dasharray:
        6 12;

    opacity:
        .9;

    filter:
        drop-shadow(
            0 0 5px
            rgba(0,217,255,.35)
        );

    animation:
        brebDataFlowRight
        2.2s
        linear
        infinite;
}

@keyframes brebDataFlowRight {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -72;
    }

}


.breb-flow-svg {
    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;
}

.flow-particle {
    fill: #ffffff;

    filter:
        drop-shadow(
            0 0 5px
            rgba(0,239,154,.95)
        )
        drop-shadow(
            0 0 9px
            rgba(0,217,255,.75)
        );
}

/* LÍNEAS CURVAS */

.flow-line {
    fill: none;

    stroke: #00d9ff;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 6 12;

    opacity: .9;

    filter:
        drop-shadow(
            0 0 5px
            rgba(0,217,255,.35)
        );

    animation:
        brebDataFlow
        2.2s
        linear
        infinite;
}

.flow-line:nth-child(2) {
    animation-delay: .35s;
}

.flow-line:nth-child(3) {
    animation-delay: .70s;
}

@keyframes brebDataFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -72;
    }

}




/* ==========================================================
   PARTÍCULAS DE DATOS
========================================================== */

.flow-line {
    stroke-dasharray: 1 0;

    animation:
        brebFlowGlow
        3s
        ease-in-out
        infinite;
}

@keyframes brebFlowGlow {

    0% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .45;
    }

}



.breb-company {

    position:
        absolute;

    right:
        -30px;

    top:
        90px;

    width:
        185px;

    padding:
        18px;

    border:
        1px solid
        rgba(255,255,255,.2);

    background:
        rgba(255,255,255,.95);

    color:
        #17152b;

    border-radius:
        18px;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.25);

    z-index:
        5;
}

.company-logo {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        #e9e7ff;

    color:
        #2e1771;

    font-weight:
        900;

}


.breb-company strong {

    display:
        block;

    font-size:
        10px;

    margin-top:
        8px;

}


.breb-company b {

    display:
        block;

    font-size:
        20px;

    margin:
        5px 0;

}


.payment-status {

    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 8px;

    padding: 6px 9px;

    border-radius: 999px;

    background:
        rgba(0, 190, 125, .09);

    border:
        1px solid
        rgba(0, 169, 110, .18);

    color:
        #00a96e;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1;

    overflow:
        hidden;

    animation:
        paymentStatusGlow
        3s
        ease-in-out
        infinite;
}

.payment-status i {

    position: relative;

    display: grid;
    place-items: center;

    width: 17px;
    height: 17px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #00b878;

    color:
        #ffffff;

    font-size:
        9px;

    box-shadow:
        0 0 0 0
        rgba(0,184,120,.30);

    animation:
        paymentCheckPulse
        2.4s
        ease-out
        infinite;
}

.payment-status i::after {

    content:
        "";

    position: absolute;

    inset:
        -4px;

    border:
        1px solid
        rgba(0,184,120,.35);

    border-radius:
        50%;

    animation:
        paymentCheckRing
        2.4s
        ease-out
        infinite;
}


.payment-status::after {

    content:
        "";

    position: absolute;

    top:
        0;

    left:
        -60px;

    width:
        45px;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        paymentStatusShine
        4s
        ease-in-out
        infinite;
}


.breb-benefits {

    grid-column:
        2;

    display:
        flex;

    gap:
        28px;

    flex-wrap:
        wrap;

    color:
        #d4cde5;

    font-size:
        11px;

}


.breb-benefits span {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    transition:
        transform .25s ease;
}

.breb-benefits span:hover {

    transform:
        scale(1.08);
}



@keyframes brebDataTravel {

    0% {
        left: -10px;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 25px);
        opacity: 0;
    }
}


@keyframes brebSendIcon {

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

    50% {
        transform: translateX(2px);
    }
}


@keyframes sendStatusPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0,217,255,0);
    }

    50% {
        transform: scale(1.08);
        box-shadow:
            0 0 14px rgba(0,217,255,.18);
    }
}


@keyframes brebUserFloat {

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

    50% {
        transform: translateY(-3px);
    }
}


@keyframes paymentStatusGlow {

    0%,
    100% {

        box-shadow:
            0 0 0
            rgba(0,184,120,0);
    }

    50% {

        box-shadow:
            0 0 18px
            rgba(0,184,120,.10);
    }
}


@keyframes paymentCheckPulse {

    0% {

        transform:
            scale(1);

        box-shadow:
            0 0 0 0
            rgba(0,184,120,.30);
    }

    35% {

        transform:
            scale(1.08);

        box-shadow:
            0 0 0 5px
            rgba(0,184,120,0);
    }

    100% {

        transform:
            scale(1);

        box-shadow:
            0 0 0 0
            rgba(0,184,120,0);
    }
}


@keyframes paymentCheckRing {

    0% {

        opacity:
            .8;

        transform:
            scale(.7);
    }

    70% {

        opacity:
            0;

        transform:
            scale(1.55);
    }

    100% {

        opacity:
            0;

        transform:
            scale(1.55);
    }
}


@keyframes paymentStatusShine {

    0%,
    65% {

        left:
            -60px;
    }

    85%,
    100% {

        left:
            calc(100% + 60px);
    }
}


/* =========================================================
   BUSINESS
========================================================= */

.business {

    background:
        #fff;

}


.business-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        50px;

    margin-bottom:
        45px;

}


.business-header h2 {

    color:
        var(--banred-purple);

}


.business-header > div:last-child {

    max-width:
        390px;

}


.business-header p {

    margin-bottom:
        20px;

}


.business-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        14px;

}


.business-card {

    border:
        1px solid
        var(--border);

    border-radius:
        24px;

    overflow:
        hidden;

    background:
        #fff;

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.business-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);

}


.business-image {

    height:
        210px;

    position:
        relative;

    overflow:
        hidden;

}


.commerce-image {

    background:
        linear-gradient(
            145deg,
            #e9e5ff,
            #aebdff
        );

}


.agent-image {

    background:
        linear-gradient(
            145deg,
            #e1f4ff,
            #8de2ff
        );

}


.company-image {

    background:
        linear-gradient(
            145deg,
            #efe9ff,
            #c3b2ff
        );

}


.entity-image {

    background:
        linear-gradient(
            145deg,
            #e6f5ff,
            #b8d2ff
        );

}


.image-person {

    position:
        absolute;

    width:
        150px;

    height:
        200px;

    border-radius:
        50% 50% 0 0;

    bottom:
        -20px;

    left:
        50%;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            145deg,
            #1e0c42,
            #3157ff
        );

}


.business-info {

    padding:
        18px;

}


.business-icon {

    width:
        32px;

    height:
        32px;

    border-radius:
        10px;

    display:
        grid;

    place-items:
        center;

    color:
        #fff;

    background:
        var(--banred-purple);

    font-size:
        12px;

}


.business-info h3 {

    margin:
        14px 0 7px;

    color:
        var(--banred-purple);

    font-size:
        17px;

}


.business-info p {

    font-size:
        10px;

    line-height:
        1.5;

    color:
        #777;

    min-height:
        31px;

}


.business-info a {

    display:
        inline-block;

    margin-top:
        15px;

    color:
        #4d36a2;

    font-size:
        11px;

    font-weight:
        800;

}


/* =========================================================
   COVERAGE
========================================================= */

.coverage {

    background:
        #f7f8fd;

}


.coverage-layout {

    display:
        grid;

    grid-template-columns:
        .75fr 1.1fr .7fr;

    align-items:
        center;

    gap:
        30px;

}


.coverage-copy h2 {

    color:
        var(--banred-purple);

    margin-bottom:
        20px;

}


.coverage-copy p {

    max-width:
        300px;

    margin-bottom:
        25px;

}


.coverage-map {

    height:
        420px;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

}


.colombia-map {

    width:
        250px;

    height:
        350px;

    background:
        linear-gradient(
            145deg,
            #dcd7ff,
            #8da4ff
        );

    clip-path:
        polygon(
            42% 0,
            58% 6%,
            64% 17%,
            75% 23%,
            70% 35%,
            82% 46%,
            68% 54%,
            75% 67%,
            60% 79%,
            57% 92%,
            45% 100%,
            38% 88%,
            28% 84%,
            32% 70%,
            20% 60%,
            28% 48%,
            19% 36%,
            30% 26%,
            25% 14%,
            37% 9%
        );

    position:
        relative;

    filter:
        drop-shadow(
            0 20px 35px
            rgba(49,87,255,.18)
        );

}


.map-point {

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--banred-purple);

    box-shadow:
        0 0 0 6px
        rgba(49,87,255,.12);

    animation:
        mapPulse
        2.5s infinite;

}


.p1 { left: 46%; top: 18%; }
.p2 { left: 54%; top: 29%; }
.p3 { left: 42%; top: 38%; }
.p4 { left: 58%; top: 43%; }
.p5 { left: 36%; top: 49%; }
.p6 { left: 48%; top: 57%; }
.p7 { left: 60%; top: 64%; }
.p8 { left: 43%; top: 73%; }
.p9 { left: 53%; top: 82%; }


.coverage-number {

    position:
        absolute;

    top:
        40px;

    right:
        10px;

    padding:
        16px;

    border-radius:
        15px;

    background:
        #fff;

    box-shadow:
        var(--shadow);

    font-size:
        11px;

}


.coverage-number strong {

    display:
        block;

    color:
        var(--banred-blue);

    font-size:
        28px;

}


.coverage-info {

    background:
        #fff;

    padding:
        28px;

    border-radius:
        25px;

    box-shadow:
        0 15px 50px
        rgba(30,12,66,.06);

}


.coverage-info h3 {

    color:
        var(--banred-purple);

    font-size:
        18px;

    margin-bottom:
        22px;

}


.coverage-info div {

    padding:
        11px 0;

    border-bottom:
        1px solid
        #eee;

    font-size:
        11px;

    color:
        #666;

}


.coverage-info div:last-child {

    border-bottom:
        0;

}


/* =========================================================
   INTEGRATIONS
========================================================= */

.integration-layout {

    display:
        grid;

    grid-template-columns:
        .65fr 1.35fr;

    gap:
        70px;

    align-items:
        center;

}


.integration-copy h2 {

    color:
        var(--banred-purple);

    margin-bottom:
        18px;

}


.integration-copy p {

    max-width:
        350px;

    margin-bottom:
        25px;

}


.integration-diagram {

    min-height:
        350px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.integration-box {

    padding:
        15px;

    border:
        1px solid
        #dedbea;

    background:
        #fff;

    border-radius:
        18px;

    box-shadow:
        var(--shadow);

    position:
        relative;

    z-index:
        3;

}


.integration-box div {

    min-width:
        145px;

    padding:
        10px;

    font-size:
        10px;

    color:
        #4e4a58;

    border-bottom:
        1px solid
        #eee;

}


.integration-box div:last-child {

    border-bottom:
        0;

}


.integration-center {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%,-50%);

    z-index:
        4;

}


.banred-symbol {

    width:
        100px;

    height:
        100px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        white;

    font-size:
        45px;

    font-weight:
        900;

    background:
        linear-gradient(
            135deg,
            #1e0c42,
            #3157ff
        );

    box-shadow:
        0 0 55px
        rgba(49,87,255,.30);

}


.integration-lines {

    position:
        absolute;

    left:
        24%;

    right:
        24%;

    top:
        50%;

    z-index:
        2;

}


.integration-lines span {

    position:
        absolute;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #3157ff,
            #00d9ff
        );

    animation:
        integrationFlow
        2s linear infinite;

}


.integration-lines span:nth-child(1) {
    transform:
        translateY(-55px)
        rotate(-12deg);
}


.integration-lines span:nth-child(2) {
    transform:
        translateY(-18px)
        rotate(-5deg);
}


.integration-lines span:nth-child(3) {
    transform:
        translateY(18px)
        rotate(5deg);
}


.integration-lines span:nth-child(4) {
    transform:
        translateY(55px)
        rotate(12deg);
}


/* =========================================================
   IMPACT
========================================================= */

.impact {

    padding:
        80px 0;

    color:
        white;

    background:
        linear-gradient(
            110deg,
            #14082e,
            #25105e,
            #101957
        );

    position:
        relative;

    overflow:
        hidden;

}


.impact::after {

    content:
        "";

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    border-radius:
        50%;

    right:
        -100px;

    top:
        -200px;

    border:
        1px solid
        rgba(0,217,255,.18);

}


.impact-inner {

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        60px;

    align-items:
        center;

}


.impact-title > span {

    font-size:
        10px;

    letter-spacing:
        .12em;

    color:
        #a9a0c1;

}


.impact-title h2 {

    color:
        white;

    margin:
        12px 0;

}


.impact-title strong {

    display:
        block;

    background:
        linear-gradient(
            100deg,
            #7f63ff,
            #00d9ff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.impact-title p {

    color:
        #c4bdd5;

    line-height:
        1.6;

    max-width:
        360px;

    font-size:
        13px;

}


.impact-stats {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

}


.impact-stat {

    padding:
        10px 22px;

    border-left:
        1px solid
        rgba(255,255,255,.16);

}


.impact-stat strong {

    display:
        block;

    font-family:
        Manrope;

    font-size:
        34px;

}


.impact-stat span {

    font-size:
        10px;

    color:
        #c8c1d7;

    line-height:
        1.5;

}


/* =========================================================
   PAYMENT
========================================================= */

.payment-demo {

    background:
        #fff;

}


.payment-layout {

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    align-items:
        center;

    gap:
        80px;

}


.payment-copy h2 {

    color:
        var(--banred-purple);

    margin-bottom:
        20px;

}


.payment-copy p {

    max-width:
        400px;

}


.payment-animation {

    position:
        relative;

    min-height:
        400px;

    display:
        grid;

    place-items:
        center;

}


.invoice-card {

    width:
        400px;

    min-height:
        300px;

    padding:
        20px;

    border:
        1px solid
        #e1dfeb;

    border-radius:
        25px;

    box-shadow:
        0 30px 70px
        rgba(30,12,66,.12);

    position:
        relative;

    overflow:
        hidden;

    background:
        white;

}


.invoice-top {

    display:
        flex;

    justify-content:
        space-between;

    padding-bottom:
        15px;

    border-bottom:
        1px solid
        #eee;

    font-size:
        12px;

    font-weight:
        700;

}


.invoice-status {

    color:
        #d78c00;

    background:
        #fff4d9;

    padding:
        5px 8px;

    border-radius:
        999px;

    font-size:
        8px;

}


.invoice-content {

    padding:
        20px 0;

}


.invoice-content strong {

    display:
        block;

    font-size:
        15px;

    margin-bottom:
        6px;

}


.invoice-content > span {

    font-size:
        10px;

    color:
        #777;

}


.invoice-lines {

    margin-top:
        22px;

}


.invoice-lines div {

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        10px;

    padding:
        7px 0;

}


.invoice-total {

    border-top:
        1px solid
        #eee;

    padding-top:
        15px;

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        11px;

}


.invoice-total strong {

    font-size:
        24px;

    color:
        var(--banred-purple);

}


.payment-success {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.97);

    opacity:
        0;

    transform:
        scale(.9);

    transition:
        all .7s ease;

}


.payment-success.active {

    opacity:
        1;

    transform:
        scale(1);

}


.success-check {

    width:
        70px;

    height:
        70px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #00b77a,
            #00d9a0
        );

    font-size:
        30px;

    margin-bottom:
        15px;

    animation:
        successPop
        .6s ease;

}


.payment-success strong {

    color:
        #111;

    font-size:
        20px;

}


.payment-success span {

    color:
        #777;

    font-size:
        11px;

    margin-top:
        5px;

}


.payment-flow {

    position:
        absolute;

    bottom:
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    font-size:
        10px;

    color:
        #777;

}


.payment-flow i {

    width:
        35px;

    height:
        1px;

    background:
        #c7c2d1;

}


/* =========================================================
   STORIES
========================================================= */

.stories {

    background:
        #f8f8fc;

}


.stories-header {

    margin-bottom:
        40px;

}


.stories-header h2 {

    color:
        var(--banred-purple);

    margin-bottom:
        12px;

}


.stories-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        15px;

}


.story {

    background:
        #fff;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    padding:
        28px;

}


.story-avatar {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    background:
        #eee8ff;

    color:
        #4d2ca7;

    border-radius:
        50%;

    font-weight:
        800;

    margin-bottom:
        20px;

}


.story-avatar.blue {

    background:
        #e5edff;

    color:
        #3157ff;

}


.story-avatar.cyan {

    background:
        #e2fbff;

    color:
        #009fb8;

}


.story p {

    color:
        #5f5a69;

    line-height:
        1.65;

    font-size:
        13px;

    margin-bottom:
        20px;

}


.story strong {

    display:
        block;

    font-size:
        12px;

}


.story small {

    color:
        #8a8590;

    font-size:
        10px;

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    position:
        relative;

    overflow:
        hidden;

    color:
        white;

    background:
        linear-gradient(
            110deg,
            #16082f,
            #24105c,
            #111f70
        );

}


.final-container {

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    position:
        relative;

}


.final-copy {

    position:
        relative;

    z-index:
        5;

    max-width:
        620px;

}


.final-copy > span {

    font-size:
        10px;

    letter-spacing:
        .15em;

    color:
        #bfb7d0;

}


.final-copy h2 {

    color:
        white;

    font-size:
        clamp(
            42px,
            5vw,
            66px
        );

    margin:
        15px 0;

}


.final-copy h2 em {

    font-style:
        normal;

    background:
        linear-gradient(
            90deg,
            #6f83ff,
            #00d9ff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.final-copy p {

    color:
        #c9c2d7;

    margin-bottom:
        25px;

}


.final-buttons {

    display:
        flex;

    gap:
        12px;

}


.final-person {

    position:
        absolute;

    right:
        30px;

    bottom:
        0;

    width:
        360px;

    height:
        450px;

}


.final-person-head {

    position:
        absolute;

    width:
        125px;

    height:
        140px;

    top:
        30px;

    left:
        115px;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #c98e6b,
            #8e5b48
        );

}


.final-person-head::before {

    content:
        "";

    position:
        absolute;

    top:
        -5px;

    left:
        0;

    width:
        125px;

    height:
        55px;

    border-radius:
        60% 60% 20% 20%;

    background:
        #171321;

}


.final-person-body {

    position:
        absolute;

    width:
        330px;

    height:
        350px;

    bottom:
        -40px;

    left:
        10px;

    border-radius:
        45% 45% 0 0;

    background:
        linear-gradient(
            145deg,
            #1e0c42,
            #3157ff
        );

    box-shadow:
        0 0 90px
        rgba(49,87,255,.3);

}


.shirt-detail {

    position:
        absolute;

    top:
        80px;

    left:
        145px;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #00d9ff,
            #3157ff
        );

    font-weight:
        900;

}


.motion-trail {

    position:
        absolute;

    right:
        210px;

    top:
        100px;

    width:
        400px;

    height:
        300px;

    border-top:
        2px solid
        rgba(0,217,255,.5);

    border-radius:
        50%;

    transform:
        rotate(-15deg);

}


.motion-trail span {

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #00d9ff;

    animation:
        trailMove
        3s linear infinite;

}


.motion-trail span:nth-child(1) {
    top: 10px;
}

.motion-trail span:nth-child(2) {
    top: 30px;
    animation-delay: .8s;
}

.motion-trail span:nth-child(3) {
    top: 50px;
    animation-delay: 1.6s;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background:
        #090710;

    color:
        #aaa3b5;

    padding:
        55px 0 25px;

}


.footer-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        60px;

}


.footer-brand img {

    width:
        125px;

    filter:
        brightness(0)
        invert(1);

}


.footer-brand p {

    margin:
        15px 0;

    font-size:
        12px;

}


.socials {

    display:
        flex;

    gap:
        8px;

}


.socials a {

    width:
        32px;

    height:
        32px;

    border:
        1px solid
        #35313e;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    font-size:
        11px;

}


.footer-links {

    display:
        flex;

    gap:
        80px;

}


.footer-links h4 {

    color:
        white;

    margin-bottom:
        15px;

    font-size:
        13px;

}


.footer-links a {

    display:
        block;

    margin:
        10px 0;

    font-size:
        11px;

    color:
        #9992a6;

}


.footer-bottom {

    margin-top:
        45px;

    padding-top:
        20px;

    border-top:
        1px solid
        #24212a;

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        10px;

}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    width:
        55px;

    height:
        55px;

    border-radius:
        50%;

    background:
        #19cf75;

    color:
        white;

    display:
        grid;

    place-items:
        center;

    z-index:
        200;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.2);

    animation:
        whatsappPulse
        2.5s infinite;

}


.whatsapp > i {
    font-size: 30px;
    line-height: 1;
    color: #ffffff;
}

.whatsapp-tooltip {
    position: absolute;

    right: 68px;
    top: 50%;

    transform:
        translateY(-50%)
        translateX(8px);

    background: #1e0c42;
    color: #ffffff;

    padding: 10px 15px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    box-shadow:
        0 10px 30px
        rgba(30,12,66,.18);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}


/* Flechita del globo */

.whatsapp-tooltip::after {

    content: "";

    position: absolute;

    right: -6px;
    top: 50%;

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

    width: 12px;
    height: 12px;

    background: #1e0c42;
}


/* Mostrar al pasar el mouse */

.whatsapp:hover .whatsapp-tooltip {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}

/* =========================================================
   REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes floatCard {

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

    50% {
        transform:
            translateY(-12px);
    }

}


@keyframes orbitRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes connectionFlow {

    0% {
        opacity:
            .3;
    }

    50% {
        opacity:
            1;
    }

    100% {
        opacity:
            .3;
    }

}


@keyframes dataTravel {

    0% {
        left:
            -40px;
    }

    100% {
        left:
            190px;
    }

}


@keyframes corePulse {

    50% {
        transform:
            translate(-50%,-50%)
            scale(1.05);

        box-shadow:
            0 0 85px
            rgba(0,217,255,.5);
    }

}


@keyframes mapPulse {

    50% {

        box-shadow:
            0 0 0 12px
            rgba(49,87,255,.03);

    }

}


@keyframes integrationFlow {

    0% {
        opacity:
            .2;
    }

    50% {
        opacity:
            1;
    }

    100% {
        opacity:
            .2;
    }

}


@keyframes successPop {

    0% {
        transform:
            scale(.3);
    }

    80% {
        transform:
            scale(1.12);
    }

    100% {
        transform:
            scale(1);
    }

}


@keyframes trailMove {

    0% {

        left:
            0;

        opacity:
            0;

    }

    30% {
        opacity:
            1;
    }

    100% {

        left:
            350px;

        opacity:
            0;

    }

}


@keyframes whatsappPulse {

    50% {

        box-shadow:
            0 0 0 12px
            rgba(25,207,117,.08);

    }

}


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

@media(max-width:1050px) {

    .main-nav {
        display: none;
    }

    .hero-container,
    .solutions-layout,
    .breb-layout,
    .integration-layout,
    .payment-layout {

        grid-template-columns:
            1fr;

    }


    .hero-copy {

        text-align:
            center;

    }


    .hero-copy > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-buttons,
    .hero-trust {

        justify-content:
            center;

    }


    .hero-visual {

        max-width:
            650px;

        width:
            100%;

        margin:
            auto;

    }


    .breb-benefits {

        grid-column:
            auto;

    }


    .business-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .coverage-layout {

        grid-template-columns:
            1fr;

    }


    .coverage-copy {

        text-align:
            center;

    }


    .coverage-copy p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .coverage-map {

        max-width:
            500px;

        margin:
            auto;

    }


    .coverage-info {

        max-width:
            500px;

        margin:
            auto;

    }


    .impact-inner {

        grid-template-columns:
            1fr;

    }


    .impact-stats {

        grid-template-columns:
            repeat(4,1fr);

    }


    .final-person {

        opacity:
            .4;

    }

}


@media(max-width:700px) {

    .header-actions {

        display:
            none;

    }


        .mobile-menu {

        display: flex;

        width: 42px;
        height: 42px;

        flex-shrink: 0;

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

        flex-direction: column;

        gap: 5px;

        padding: 0;

        background: #f4f2fa;

        border: 0;

        border-radius: 12px;

        position: relative;

        z-index: 1001;

        cursor: pointer;

    }


    .mobile-menu span {

        display: block;

        width: 20px;

        height: 2px;

        border-radius: 999px;

        background:
            var(--banred-purple);

        transition:
            transform .25s ease,
            opacity .25s ease;

    }

        .mobile-menu.is-open span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}


.mobile-menu.is-open span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}

}

/* =========================================================
   ANIMACIÓN MENÚ
========================================================= */

@keyframes banredMenuIn {

    from {
        opacity: 0;
        transform:
            translateY(-10px)
            scale(.98);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}


    .hero {

        padding-top:
            130px;

    }


    .hero h1 {

        font-size:
            47px;

    }


    .hero-visual {

        height:
            450px;

    }


    .hero-person {

        transform:
            scale(.8);

        left:
            15%;

    }


    .transfer-card {

        left:
            -10px;

    }


    .company-card {

        right:
            -10px;

    }


    .services-card {

        right:
            0;

    }


    .solution-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .business-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .business-grid {

        grid-template-columns:
            1fr;

    }


    .impact-stats {

        grid-template-columns:
            repeat(2,1fr);

        gap:
            25px 0;

    }


    .stories-grid {

        grid-template-columns:
            1fr;

    }


    .footer-top {

        flex-direction:
            column;

    }


    .footer-links {

        gap:
            35px;

        flex-wrap:
            wrap;

    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            8px;

    }


    .final-person {

        right:
            -150px;

    }


}


@media(max-width:480px) {

    .container {

        width:
            calc(100% - 28px);

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .hero-buttons .btn {

        width:
            100%;

    }


    .solution-grid {

        grid-template-columns:
            1fr;

    }


    .hero-visual {

        transform:
            scale(.82);

        transform-origin:
            top center;

        margin-bottom:
            -70px;

    }


    .invoice-card {

        width:
            100%;

    }


    .payment-flow {

        display:
            none;

    }

}

/* =========================================================
   HERO V2
   COMPOSICIÓN TIPO REFERENCIA
========================================================= */

.hero-visual-v2 {

    height: 570px;

    position: relative;

    overflow: visible;

    transform: none !important;

}


/* ---------------------------------------------------------
   AURA
--------------------------------------------------------- */

.hero-aura {

    position: absolute;

    width: 520px;
    height: 520px;

    right: 5px;
    top: 20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,217,255,.16) 0%,
            rgba(49,87,255,.10) 38%,
            rgba(49,87,255,0) 72%
        );

    filter: blur(8px);

}


/* ---------------------------------------------------------
   RED DE CONEXIONES
--------------------------------------------------------- */

.hero-network-lines {

    position: absolute;

    width: 450px;
    height: 400px;

    right: 80px;
    top: 75px;

    z-index: 1;

}


.network-line {

    position: absolute;

    height: 2px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(0,217,255,.1),
            #00d9ff,
            #3157ff,
            rgba(49,87,255,.05)
        );

    opacity: .65;

}


.network-line::after {

    content: "";

    position: absolute;

    width: 35px;
    height: 4px;

    top: -1px;

    left: 0;

    border-radius: 20px;

    background: #fff;

    filter: blur(3px);

    animation:
        networkParticle
        2.8s linear infinite;

}


.line-1 {

    width: 250px;

    left: 5px;
    top: 145px;

    transform: rotate(-27deg);

}


.line-2 {

    width: 320px;

    left: 0;
    top: 220px;

    transform: rotate(0deg);

}


.line-3 {

    width: 240px;

    left: 20px;
    top: 290px;

    transform: rotate(27deg);

}


.line-4 {

    width: 160px;

    left: 185px;
    top: 105px;

    transform: rotate(-4deg);

}


@keyframes networkParticle {

    from {
        left: -40px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    to {
        left: 100%;
        opacity: 0;
    }

}


/* ---------------------------------------------------------
   PERSONA
--------------------------------------------------------- */

.hero-person-v2 {

    position: absolute;

    width: 300px;
    height: 500px;

    right: 125px;
    bottom: 0;

    z-index: 3;

}


/* cabello */

.person-hair {

    position: absolute;

    width: 142px;
    height: 150px;

    top: 15px;
    left: 82px;

    background:
        linear-gradient(
            145deg,
            #10121e,
            #202333
        );

    border-radius:
        55% 55% 35% 35%;

    transform:
        rotate(-4deg);

    z-index: 5;

}


/* cara */

.person-face {

    position: absolute;

    width: 110px;
    height: 135px;

    top: 45px;
    left: 98px;

    background:
        linear-gradient(
            145deg,
            #d7a17d,
            #ad7055
        );

    border-radius:
        48% 48% 45% 45%;

    z-index: 6;

}


/* cuello */

.person-neck {

    position: absolute;

    width: 47px;
    height: 55px;

    left: 130px;
    top: 158px;

    background: #b8785b;

    z-index: 4;

}


/* ojos */

.face-eye {

    position: absolute;

    width: 7px;
    height: 4px;

    background: #302018;

    border-radius: 50%;

    top: 63px;

}


.eye-left {
    left: 32px;
}


.eye-right {
    right: 31px;
}


/* sonrisa */

.face-smile {

    position: absolute;

    width: 25px;
    height: 10px;

    left: 43px;
    top: 92px;

    border-bottom:
        2px solid #633b31;

    border-radius: 0 0 50% 50%;

}


/* camiseta */

.person-shirt {

    position: absolute;

    width: 280px;
    height: 330px;

    left: 10px;
    bottom: -10px;

    border-radius:
        48% 48% 0 0;

    background:
        linear-gradient(
            145deg,
            #1e0c42 0%,
            #30207e 40%,
            #3157ff 72%,
            #00bfe8 100%
        );

    box-shadow:
        0 30px 80px
        rgba(30,12,66,.25);

    z-index: 2;

}


.shirt-glow {

    position: absolute;

    width: 150px;
    height: 250px;

    right: 0;
    top: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(0,217,255,.35),
            transparent
        );

    filter: blur(25px);

}


/* brazo */

.person-arm {

    position: absolute;

    width: 72px;
    height: 230px;

    left: 25px;
    top: 225px;

    border-radius:
        45px;

    background:
        linear-gradient(
            145deg,
            #c68d6e,
            #9c614c
        );

    transform:
        rotate(18deg);

    z-index: 7;

}


/* celular */

.person-phone {

    position: absolute;

    width: 65px;
    height: 118px;

    left: 42px;
    top: 260px;

    padding: 5px;

    border-radius: 13px;

    background: #111;

    transform:
        rotate(-12deg);

    z-index: 10;

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.25);

}


.phone-screen {

    height: 100%;

    border-radius: 9px;

    padding: 8px;

    background:
        linear-gradient(
            160deg,
            #f8fbff,
            #e6edff
        );

}


.phone-top {

    width: 25px;
    height: 3px;

    margin: auto;

    background: #333;

    border-radius: 5px;

}


.phone-logo {

    width: 28px;
    height: 28px;

    margin: 16px auto 9px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1e0c42,
            #3157ff
        );

    font-size: 12px;
    font-weight: 800;

}


.phone-line {

    width: 35px;
    height: 4px;

    margin:
        6px auto;

    border-radius: 5px;

    background: #ccd5ed;

}


.phone-line.short {
    width: 24px;
}


/* ---------------------------------------------------------
   BADGE 24/7
--------------------------------------------------------- */

.hero-badge {

    position: absolute;

    z-index: 8;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid
        rgba(30,12,66,.06);

    box-shadow:
        0 18px 45px
        rgba(30,12,66,.12);

    backdrop-filter:
        blur(15px);

}


/* 24/7 */

.badge-247 {

    right: 290px;
    top: 25px;

    padding:
        9px 14px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 999px;

}


.badge-icon {

    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #00cfa2,
            #3157ff
        );

}


.badge-247 small {

    display: block;

    color: #777;

    font-size: 8px;

}


.badge-247 strong {

    display: block;

    font-size: 13px;

}


/* enviar */

.badge-send {

    right: 30px;
    top: 65px;

    width: 43px;
    height: 43px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    color: #3157ff;

    animation:
        sendFloat
        4s ease-in-out infinite;

}


.send-icon {

    font-size: 17px;

}


@keyframes sendFloat {

    50% {
        transform:
            translateY(-8px)
            rotate(5deg);
    }

}


/* ---------------------------------------------------------
   CARD BASE
--------------------------------------------------------- */

.hero-card {

    position: absolute;

    z-index: 9;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid
        rgba(30,12,66,.07);

    box-shadow:
        0 25px 60px
        rgba(30,12,66,.13);

    backdrop-filter:
        blur(14px);

}


/* ---------------------------------------------------------
   PERSONAS
--------------------------------------------------------- */

.people-card {

    left: 15px;
    top: 165px;

    width: 185px;

    padding: 15px;

    border-radius: 17px;

    animation:
        cardFloat
        5s ease-in-out infinite;

}


.card-title {

    color: #888;

    font-size: 8px;

    margin-bottom: 12px;

}


.person-row {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 0;

}


.person-row strong {

    display: block;

    color: #272331;

    font-size: 9px;

}


.person-row small {

    display: block;

    color: #999;

    font-size: 7px;

    margin-top: 2px;

}


.mini-person {

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    font-size: 9px;
    font-weight: 800;

}


.mini-person.purple {
    background:
        linear-gradient(
            135deg,
            #6c4aff,
            #a35dff
        );
}


.mini-person.blue {
    background:
        linear-gradient(
            135deg,
            #3157ff,
            #00a8ff
        );
}


.mini-person.cyan {
    background:
        linear-gradient(
            135deg,
            #00bfe8,
            #00d79c
        );
}


/* ---------------------------------------------------------
   BRE-B
--------------------------------------------------------- */

.hero-breb-v2 {

    position: absolute;

    right: 185px;
    top: 220px;

    width: 125px;
    height: 125px;

    z-index: 12;

}


.breb-core-v2 {

    width: 105px;
    height: 105px;

    position: absolute;

    left: 10px;
    top: 10px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    font-size: 19px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #00bdf2 0%,
            #00d9c2 52%,
            #00e69a 100%
        );

    box-shadow:
        0 15px 45px
        rgba(0,210,190,.35);

}


.breb-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid
        rgba(0,217,255,.35);

    animation:
        brebRing
        3s ease-out infinite;

}


@keyframes brebRing {

    0% {
        transform: scale(.8);
        opacity: .8;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }

}


/* ---------------------------------------------------------
   TECHPAY
--------------------------------------------------------- */

.techpay-card {

    right: 5px;
    top: 185px;

    width: 180px;

    padding: 16px;

    border-radius: 18px;

    display: flex;

    gap: 10px;

    align-items: flex-start;

    animation:
        cardFloat
        5.5s ease-in-out infinite
        .5s;

}


.techpay-icon {

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #4935a0;

    background:
        #ebe7ff;

    font-weight: 900;

}


.techpay-content small {

    display: block;

    font-size: 8px;

    color: #555;

}


.techpay-content strong {

    display: block;

    font-size: 18px;

    margin:
        3px 0;

    color:
        #201934;

}


.techpay-content span {

    font-size: 7px;

    color: #00a56e;

}


/* ---------------------------------------------------------
   OPORTUNIDADES
--------------------------------------------------------- */

.hero-opportunity {

    position: absolute;

    right: 120px;
    top: 10px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 15px;

    background:
        rgba(255,255,255,.95);

    border-radius: 15px;

    box-shadow:
        0 15px 40px
        rgba(30,12,66,.1);

}


.opportunity-icon {

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #3157ff,
            #00c8dd
        );

}


.hero-opportunity small {

    display: block;

    color: #777;

    font-size: 8px;

}


.hero-opportunity strong {

    display: block;

    color: #24202d;

    font-size: 10px;

}


/* ---------------------------------------------------------
   SERVICIOS
--------------------------------------------------------- */

.services-card-v2 {

    right: 25px;
    bottom: 45px;

    width: 180px;

    padding: 18px;

    border-radius: 18px;

    animation:
        cardFloat
        6s ease-in-out infinite
        1s;

}


.services-card-v2 h3 {

    color:
        #252132;

    font-size: 14px;

    line-height: 1.1;

    margin-bottom: 10px;

}


.services-card-v2 div {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 8px;

    color: #777;

    padding: 5px 0;

}


.services-card-v2 div span {

    font-size: 10px;

}


@keyframes cardFloat {

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

    50% {
        transform:
            translateY(-9px);
    }

}


/* =========================================================
   NAV ACTIVE
========================================================= */



.main-nav a.active {
    background: linear-gradient(
        90deg,
        #1E0C42 0%,
        #C90043 25%,
        #FF0050 45%,
        #FF6A00 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}




/* =========================================================
   RESPONSIVE HERO V2
========================================================= */

@media(max-width:1050px) {

    .hero-visual-v2 {

        max-width: 680px;

        margin:
            30px auto 0;

    }

}


@media(max-width:700px) {

    .hero-visual-v2 {

        height: 500px;

        transform:
            scale(.78) !important;

        transform-origin:
            top center;

        margin-bottom:
            -90px;

    }

    .hero-person-v2 {

        right: 90px;

    }

    .people-card {

        left: -5px;

    }

    .hero-breb-v2 {

        right: 175px;

    }

}


@media(max-width:480px) {

    .hero-visual-v2 {

        transform:
            scale(.63) !important;

        margin-bottom:
            -150px;

    }

}

/* ============================================================
   BANRED 3.0 — AJUSTE FINAL HERO
   Persona real + Bre-B + tarjetas
   ============================================================ */


/* ------------------------------------------------------------
   CONTENEDOR PRINCIPAL
------------------------------------------------------------ */

.hero-banred {

    position: relative;

    width: 100%;

    height: 610px;

    overflow: visible;

}


/* ------------------------------------------------------------
   FONDOS LUMINOSOS
------------------------------------------------------------ */

.hero-banred .glow-one {

    position: absolute;

    width: 520px;
    height: 520px;

    right: 20px;
    top: 20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49,87,255,.13) 0%,
            rgba(49,87,255,.07) 35%,
            transparent 72%
        );

    filter: blur(8px);

    pointer-events: none;

    z-index: 0;

}


.hero-banred .glow-two {

    position: absolute;

    width: 420px;
    height: 420px;

    right: 170px;
    top: 80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,217,255,.11) 0%,
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;

    z-index: 0;

}


.hero-banred .glow-three {

    position: absolute;

    width: 300px;
    height: 300px;

    right: 300px;
    top: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(90,60,220,.10) 0%,
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;

    z-index: 0;

}


/* ------------------------------------------------------------
   PERSONA
------------------------------------------------------------ */

.hero-banred .banred-person {

    position: absolute;

    width: 375px;

    height: 540px;

    right: 125px;

    bottom: 0;

    z-index: 4;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}


.hero-banred .banred-person img {

    display: block;

    width: 100%;

    height: 100%;

    max-width: none;

    object-fit: contain;

    object-position: center bottom;

    filter:
        drop-shadow(
            0 22px 35px
            rgba(30,12,66,.12)
        );

    animation:
        banredPersonFloat
        6s
        ease-in-out
        infinite;

}


@keyframes banredPersonFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-6px);

    }

}


/* ------------------------------------------------------------
   RED DE CONEXIONES
------------------------------------------------------------ */

.hero-banred .banred-network {

    position: absolute;

    width: 650px;

    height: 560px;

    right: 0;

    top: 20px;

    z-index: 2;

    pointer-events: none;

}


.hero-banred .network-svg {

    width: 100%;

    height: 100%;

    overflow: visible;

}


.hero-banred .network-path {

    fill: none;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 8 10;

    animation:
        banredNetworkFlow
        3s
        linear
        infinite;

    opacity: .65;

}


.hero-banred .path-a,
.hero-banred .path-b {

    stroke: #7a7cff;

}


.hero-banred .path-c,
.hero-banred .path-d {

    stroke: #39c9e9;

}


.hero-banred .path-b {

    animation-delay:
        .6s;

}


.hero-banred .path-c {

    animation-delay:
        1s;

}


.hero-banred .path-d {

    animation-delay:
        1.5s;

}


@keyframes banredNetworkFlow {

    from {

        stroke-dashoffset:
            0;

    }

    to {

        stroke-dashoffset:
            -60;

    }

}


/* ------------------------------------------------------------
   TARJETA PERSONAS
------------------------------------------------------------ */

.hero-banred .transfer-card {

    position: absolute;

    left: 0;

    top: 160px;

    width: 210px;

    padding: 17px;

    display: block;

    box-sizing: border-box;

    border-radius: 18px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid
        rgba(30,12,66,.07);

    box-shadow:
        0 20px 45px
        rgba(30,12,66,.12);

    backdrop-filter:
        blur(15px);

    z-index: 15;

    animation:
        banredCardFloat
        6s
        ease-in-out
        infinite;

}


/* encabezado */

.hero-banred .transfer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 11px;

    font-size: 9px;

    color: #8a8695;

}


/* personas */

.hero-banred .transfer-person {

    display: flex;

    align-items: center;

    gap: 9px;

    width: 100%;

    padding: 7px 0;

    opacity: 1;

    transform: none;

    animation:
        banredPersonAppear
        .7s
        ease both;

}


.hero-banred .transfer-person:nth-child(2) {

    animation-delay:
        .5s;

}


.hero-banred .transfer-person:nth-child(3) {

    animation-delay:
        1s;

}


.hero-banred .transfer-person:nth-child(4) {

    animation-delay:
        1.5s;

}


@keyframes banredPersonAppear {

    from {

        opacity: 0;

        transform:
            translateX(-12px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* avatar */

.hero-banred .transfer-person .avatar {

    width: 31px;

    height: 31px;

    min-width: 31px;

    flex: 0 0 31px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: white;

    font-size: 10px;

    font-weight: 800;

}


.hero-banred .avatar-l {

    background:
        linear-gradient(
            135deg,
            #7950f2,
            #a85cff
        );

}


.hero-banred .avatar-m {

    background:
        linear-gradient(
            135deg,
            #3157ff,
            #008cff
        );

}


.hero-banred .avatar-c {

    background:
        linear-gradient(
            135deg,
            #00bfd0,
            #00d69d
        );

}


/* texto */

.hero-banred .transfer-person-info {

    min-width: 0;

}


.hero-banred .transfer-person-info strong {

    display: block;

    font-size: 10px;

    line-height: 1.15;

    color: #201b2b;

}


.hero-banred .transfer-person-info small {

    display: block;

    margin-top: 3px;

    font-size: 8px;

    line-height: 1.2;

    color: #9995a3;

}


/* ------------------------------------------------------------
   BRE-B
------------------------------------------------------------ */

.hero-banred .breb-center {

    position: absolute;

    width: 125px;

    height: 125px;

    right: 205px;

    top: 270px;

    z-index: 25;

}



.hero-banred .breb-logo-white {

    width: 76px;

    height: auto;

    max-width: 76px;

    filter:
        brightness(0)
        invert(1);

}


.hero-banred .breb-pulse {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid
        rgba(0,205,225,.45);

    animation:
        banredBrebPulse
        3s
        ease-out
        infinite;

}


.hero-banred .pulse-two {

    animation-delay:
        1.5s;

}


@keyframes banredBrebPulse {

    0% {

        transform:
            scale(.78);

        opacity:
            .75;

    }

    100% {

        transform:
            scale(1.6);

        opacity:
            0;

    }

}


/* ------------------------------------------------------------
   TECHPAY
------------------------------------------------------------ */

.hero-banred .techpay-card {

    position: absolute;

    right: 0;

    top: 195px;

    width: 190px;

    min-width: 190px;

    padding: 15px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    box-sizing: border-box;

    border-radius: 18px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid
        rgba(30,12,66,.07);

    box-shadow:
        0 20px 45px
        rgba(30,12,66,.12);

    z-index: 16;

    animation:
        banredCardFloat
        5.5s
        ease-in-out
        infinite;

    animation-delay:
        .4s;

}


.hero-banred .techpay-symbol {

    width: 34px;

    height: 34px;

    min-width: 34px;

    border-radius: 10px;

    display: grid;

    place-items: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            #1e0c42,
            #3157ff
        );

    font-weight: 800;

}


.hero-banred .techpay-data {

    min-width: 0;

}


.hero-banred .techpay-data small {

    display: block;

    font-size: 8px;

    color: #85818e;

}


.hero-banred .techpay-data strong {

    display: block;

    margin: 3px 0;

    font-size: 18px;

    line-height: 1.1;

    color: #1e0c42;

}


.hero-banred .techpay-status {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 7px;

    white-space: nowrap;

    color: #00a878;

}


.hero-banred .techpay-status i {

    width: 6px;

    height: 6px;

    min-width: 6px;

    border-radius: 50%;

    background: #00a878;

}


/* ==========================================================
   SERVICIOS PÚBLICOS — FINAL LIMPIO
========================================================== */

.hero-banred .services-card {
    position: absolute !important;

    right: -55px !important;
    bottom: 35px !important;

    width: 220px !important;
    max-width: 220px !important;

    padding: 17px !important;

    box-sizing: border-box !important;

    border-radius: 20px !important;

    background: rgba(255,255,255,.97) !important;

    border: 1px solid rgba(30,12,66,.07) !important;

    box-shadow:
        0 20px 45px rgba(30,12,66,.11) !important;

    z-index: 24 !important;

    animation:
        banredServicesFloat
        6s ease-in-out infinite !important;

    animation-delay: 1s !important;
}


/* TÍTULO */

.hero-banred .services-card h3 {
    margin: 0 0 14px !important;

    color: #211b32 !important;

    font-size: 14px !important;

    line-height: 1.2 !important;

    font-weight: 700 !important;
}


/* CUADRÍCULA */

.hero-banred .services-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    column-gap: 18px !important;

    row-gap: 13px !important;

    width: 100% !important;
}


/* SERVICIO */

.hero-banred .service-item {
    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    width: auto !important;

    min-width: 0 !important;

    height: 30px !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    color: #77737f !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    transition:
        transform .25s ease !important;
}


/* HOVER */

.hero-banred .service-item:hover {
    transform: translateX(2px) !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* CÍRCULO DEL ICONO */

.hero-banred .service-icon {
    width: 25px !important;

    height: 25px !important;

    min-width: 25px !important;

    display: grid !important;

    place-items: center !important;

    flex-shrink: 0 !important;

    border-radius: 50% !important;

    background: #f7f8fc !important;

    border: 1px solid #edf0f5 !important;

    font-size: 10px !important;

    line-height: 1 !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* CÍRCULO HOVER */

.hero-banred .service-item:hover .service-icon {
    transform: scale(1.08) !important;

    box-shadow:
        0 5px 12px rgba(30,12,66,.10) !important;
}


/* COLORES DE ICONOS */

.hero-banred
.service-item:nth-child(1)
.service-icon {
    color: #f96a00 !important;
}


.hero-banred
.service-item:nth-child(2)
.service-icon {
    color: #3157ff !important;
}


.hero-banred
.service-item:nth-child(3)
.service-icon {
    color: #f96a00 !important;
}


.hero-banred
.service-item:nth-child(4)
.service-icon {
    color: #3157ff !important;
}


/* ANULA EL CSS ANTIGUO */

.hero-banred
.service-item > span:first-child {
    width: 25px !important;

    min-width: 25px !important;

    text-align: center !important;
}


/* ANIMACIÓN */

@keyframes banredServicesFloat {

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

    50% {
        transform: translateY(-7px);
    }
}

/* ------------------------------------------------------------
   FLECHA
------------------------------------------------------------ */

.hero-banred .send-floating {

    position: absolute;

    right: 10px;

    top: 115px;

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: white;

    color: #3157ff;

    box-shadow:
        0 12px 30px
        rgba(30,12,66,.12);

    z-index: 20;

    animation:
        banredSendFloat
        4s
        ease-in-out
        infinite;

}


@keyframes banredSendFloat {

    50% {

        transform:
            translateY(-8px)
            rotate(5deg);

    }

}


/* ------------------------------------------------------------
   ANIMACIÓN GENERAL DE TARJETAS
------------------------------------------------------------ */

@keyframes banredCardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


/* ============================================================
   IMPORTANTÍSIMO:
   anulamos estilos viejos que pueden interferir
============================================================ */

.hero-banred .hero-person,
.hero-banred .hero-person-v2,
.hero-banred .person-placeholder,
.hero-banred .person-head,
.hero-banred .person-body,
.hero-banred .hero-breb,
.hero-banred .breb-core,
.hero-banred .breb-line,
.hero-banred .hero-message {

    display: none !important;

}


/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1400px) {

    .hero-banred .banred-person {

        width: 400px;

        height: 570px;

        right: 125px;

    }

    .hero-banred .breb-center {

        right: 215px;

        top: 285px;

    }

    .hero-banred .transfer-card {

        left: 5px;

        top: 175px;

    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1200px) {

    .hero-banred .banred-person {

        width: 350px;

        height: 520px;

        right: 95px;

    }

    .hero-banred .breb-center {

        right: 165px;

        top: 265px;

    }

    .hero-banred .transfer-card {

        left: -5px;

        width: 195px;

    }

    .hero-banred .techpay-card {

        right: -10px;

    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

    .hero-banred {

        height: 560px;

    }

    .hero-banred .banred-person {

        right: 80px;

    }

    .hero-banred .breb-center {

        right: 150px;

    }

}


/* ============================================================
   MÓVIL
============================================================ */

@media (max-width: 700px) {

    .hero-banred {

        height: 520px;

        transform:
            scale(.75);

        transform-origin:
            top center;

        margin-bottom:
            -100px;

    }

}


@media (max-width: 480px) {

    .hero-banred {

        transform:
            scale(.58);

        margin-bottom:
            -170px;

    }

}

/* ==========================================================
   BANRED 3.0
   HERO FINAL
   Persona real + Bre-B + conexiones + tarjetas
========================================================== */

.hero-banred {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: visible;
}


/* ==========================================================
   FONDOS / AURAS
========================================================== */

.hero-banred .banred-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
    z-index: 0;
}

.hero-banred .glow-one {
    width: 520px;
    height: 520px;
    right: 20px;
    top: 10px;

    background:
        radial-gradient(
            circle,
            rgba(38,145,255,.16) 0%,
            rgba(38,145,255,.07) 38%,
            transparent 72%
        );
}

.hero-banred .glow-two {
    width: 390px;
    height: 390px;
    right: 180px;
    top: 70px;

    background:
        radial-gradient(
            circle,
            rgba(0,216,230,.12) 0%,
            transparent 72%
        );
}

.hero-banred .glow-three {
    width: 300px;
    height: 300px;
    right: 330px;
    top: 180px;

    background:
        radial-gradient(
            circle,
            rgba(99,58,255,.10) 0%,
            transparent 72%
        );
}


/* ==========================================================
   RED DE CONEXIONES
========================================================== */

.hero-banred .banred-network {
    position: absolute;

    width: 650px;
    height: 560px;

    right: 0;
    top: 20px;

    z-index: 2;

    pointer-events: none;
}

.hero-banred .network-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hero-banred .network-path {
    fill: none;

    stroke-width: 2;
    stroke-linecap: round;

    stroke-dasharray: 8 10;

    animation:
        banredNetworkMove
        3s
        linear
        infinite;

    opacity: .55;
}

.hero-banred .path-a,
.hero-banred .path-b {
    stroke: #6d77ff;
}

.hero-banred .path-c,
.hero-banred .path-d {
    stroke: #00cfe4;
}

.hero-banred .path-b {
    animation-delay: .5s;
}

.hero-banred .path-c {
    animation-delay: 1s;
}

.hero-banred .path-d {
    animation-delay: 1.5s;
}

@keyframes banredNetworkMove {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -70;
    }

}


/* ==========================================================
   PERSONA REAL
========================================================== */

.hero-banred .banred-person {

    position: absolute;

    /*
       MÁS PEQUEÑA QUE ANTES
       para que no tape las tarjetas
    */

    width: 355px;
    height: 515px;

    right: 115px;
    bottom: 0;

    z-index: 8;

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

    pointer-events: none;
}

.hero-banred .banred-person img {

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: contain;
    object-position: center bottom;

    filter:
        drop-shadow(
            0 24px 35px
            rgba(30,12,66,.12)
        );

    animation:
        banredPersonFloat
        6s
        ease-in-out
        infinite;
}

@keyframes banredPersonFloat {

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

    50% {
        transform: translateY(-5px);
    }

}


/* ==========================================================
   TARJETAS BASE
========================================================== */

.hero-banred .banred-card {

    position: absolute;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid
        rgba(30,12,66,.07);

    box-shadow:
        0 22px 55px
        rgba(30,12,66,.12);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-sizing: border-box;
}


/* ==========================================================
   BADGE 24/7
========================================================== */

.hero-banred .badge-realtime {

    right: 300px;
    top: 20px;

    z-index: 15;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 15px 40px
        rgba(30,12,66,.10);

    animation:
        banredBadgeFloat
        5s
        ease-in-out
        infinite;
}

.hero-banred .badge-opportunity {

    right: 45px;
    top: 55px;

    z-index: 15;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 15px 40px
        rgba(30,12,66,.10);

    animation:
        banredBadgeFloat
        5.5s
        ease-in-out
        infinite;

    animation-delay: .7s;
}

.hero-banred .floating-icon {

    width: 35px;
    height: 35px;

    min-width: 35px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    font-weight: 700;
}

.hero-banred .realtime-icon {

    background:
        linear-gradient(
            135deg,
            #00c99c,
            #00aeea
        );
}

.hero-banred .opportunity-icon {

    background:
        linear-gradient(
            135deg,
            #3157ff,
            #00cfe4
        );
}

.hero-banred .floating-text small {

    display: block;

    color: #777;

    font-size: 9px;
}

.hero-banred .floating-text strong {

    display: block;

    color: #1e0c42;

    font-size: 14px;
}

@keyframes banredBadgeFloat {

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

    50% {
        transform: translateY(-8px);
    }

}


/* ==========================================================
   TARJETA — ENVIANDO DINERO
========================================================== */

.hero-banred .transfer-card {

    left: -35px;
    top: 165px;

    width: 215px;

    padding: 17px;

    border-radius: 19px;

    z-index: 18;

    animation:
        banredTransferFloat
        6s
        ease-in-out
        infinite;
}

.hero-banred .transfer-header {

    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;

    color: #8a8a8a;

    font-size: 9px;
}

.hero-banred .transfer-loader {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #3157ff;

    box-shadow:
        0 0 0 5px
        rgba(49,87,255,.10);

    animation:
        banredLoaderPulse
        1.4s
        ease-in-out
        infinite;
}

.hero-banred .transfer-person {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 7px 0;

    opacity: 0;

    animation:
        banredPersonAppear
        .7s
        ease
        forwards;
}

.hero-banred .transfer-person:nth-child(2) {
    animation-delay: .5s;
}

.hero-banred .transfer-person:nth-child(3) {
    animation-delay: 1.1s;
}

.hero-banred .transfer-person:nth-child(4) {
    animation-delay: 1.7s;
}

.hero-banred .avatar {

    width: 31px;
    height: 31px;

    min-width: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    color: white;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.hero-banred .avatar-l {

    background:
        linear-gradient(
            135deg,
            #744cff,
            #a55dff
        );
}

.hero-banred .avatar-m {

    background:
        linear-gradient(
            135deg,
            #3157ff,
            #00a9ff
        );
}

.hero-banred .avatar-c {

    background:
        linear-gradient(
            135deg,
            #00bfcf,
            #00d6a0
        );
}

.hero-banred .transfer-person-info {

    min-width: 0;
}

.hero-banred .transfer-person-info strong {

    display: block;

    font-size: 10px;

    color: #24202f;
}

.hero-banred .transfer-person-info small {

    display: block;

    margin-top: 2px;

    font-size: 8px;

    color: #999;
}

@keyframes banredTransferFloat {

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

    50% {
        transform: translateY(-7px);
    }

}

@keyframes banredPersonAppear {

    from {

        opacity: 0;

        transform:
            translateX(-14px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}

@keyframes banredLoaderPulse {

    50% {

        transform: scale(1.35);

        opacity: .5;

    }

}


/* ==========================================================
   BRE-B
========================================================== */

.hero-banred .breb-center {

    position: absolute;

    width: 125px;
    height: 125px;

    right: 220px;
    top: 275px;

    z-index: 30;
}


.hero-banred .breb-logo-white {

    width: 74px;

    height: auto;

    display: block;

    filter:
        brightness(0)
        invert(1);
}

.hero-banred .breb-pulse {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid
        rgba(0,205,225,.55);

    animation:
        banredBrebPulse
        3s
        ease-out
        infinite;
}

.hero-banred .pulse-two {

    animation-delay:
        1.5s;
}

@keyframes banredBrebPulse {

    0% {

        transform: scale(.78);

        opacity: .8;

    }

    100% {

        transform: scale(1.65);

        opacity: 0;

    }

}


/* ==========================================================
   TECHPAY
========================================================== */

.hero-banred .techpay-card {

    right: 0;

    top: 190px;

    width: 190px;

    padding: 16px;

    border-radius: 18px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    z-index: 25;

    animation:
        banredTechFloat
        5.5s
        ease-in-out
        infinite;

    animation-delay: .4s;
}

.hero-banred .techpay-symbol {

    width: 34px;
    height: 34px;

    min-width: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #1e0c42,
            #3157ff
        );

    font-weight: 800;
}

.hero-banred .techpay-data {

    min-width: 0;
}

.hero-banred .techpay-data small {

    display: block;

    color: #777;

    font-size: 8px;
}

.hero-banred .techpay-data strong {

    display: block;

    margin: 3px 0;

    color: #1e0c42;

    font-size: 18px;
}

.hero-banred .techpay-status {

    display: flex;

    align-items: center;

    gap: 4px;

    color: #f0a400;

    font-size: 7px;

    white-space: nowrap;

    transition:
        .4s ease;
}

.hero-banred .techpay-status i {

    width: 6px;
    height: 6px;

    min-width: 6px;

    border-radius: 50%;

    background: #f0a400;
}

.hero-banred .techpay-status.success {

    color: #00a878;
}

.hero-banred .techpay-status.success i {

    background: #00a878;
}

@keyframes banredTechFloat {

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

    50% {
        transform: translateY(-9px);
    }

}


/* ==========================================================
   SERVICIOS PÚBLICOS
========================================================== */

.hero-banred .services-card {

    right: 20px;

    bottom: 42px;

    width: 190px;

    padding: 16px;

    border-radius: 19px;

    z-index: 24;

    animation:
        banredServicesFloat
        6s
        ease-in-out
        infinite;

    animation-delay: 1s;
}

.hero-banred .services-card h3 {

    margin:
        0 0 9px;

    color: #211b32;

    font-size: 14px;
}

.hero-banred .service-item {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 5px 0;

    color: #777;

    font-size: 9px;
}

.hero-banred .service-item span:first-child {

    width: 20px;

    text-align: center;

    font-size: 12px;
}

@keyframes banredServicesFloat {

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

    50% {
        transform: translateY(-7px);
    }

}


/* ==========================================================
   FLECHA
========================================================== */

.hero-banred .send-floating {

    position: absolute;

    right: 5px;

    top: 115px;

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 12px 30px
        rgba(30,12,66,.13);

    color: #3157ff;

    z-index: 30;

    animation:
        banredArrowFloat
        4s
        ease-in-out
        infinite;
}

@keyframes banredArrowFloat {

    50% {

        transform:
            translateY(-8px)
            rotate(5deg);

    }

}


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

@media (max-width: 1200px) {

    .hero-banred .banred-person {

        width: 330px;
        height: 490px;

        right: 90px;
    }

    .hero-banred .breb-center {

        right: 175px;
    }

    .hero-banred .badge-realtime {

        right: -140px;
    }

}

@media (max-width: 1000px) {

    .hero-banred {

        height: 560px;
    }

    .hero-banred .banred-person {

        width: 310px;
        height: 460px;

        right: 55px;
    }

    .hero-banred .breb-center {

        right: 140px;
        top: 255px;
    }

    .hero-banred .transfer-card {

        left: -10px;
    }

    .hero-banred .techpay-card {

        right: -10px;
    }

    .hero-banred .services-card {

        right: 0;
    }

}

@media (max-width: 800px) {

    .hero-banred {

        height: 540px;

        transform:
            scale(.82);

        transform-origin:
            top center;

        margin-bottom:
            -95px;
    }

}

@media (max-width: 600px) {

    .hero-banred {

        height: 520px;

        transform:
            scale(.68);

        margin-bottom:
            -165px;
    }

}

@media (max-width: 450px) {

    .hero-banred {

        transform:
            scale(.55);

        margin-bottom:
            -220px;
    }

}

/* ==========================================================
   BANRED — HERO FINAL OVERRIDE
   CORRECCIÓN DE COMPOSICIÓN
   Pegar AL FINAL de style.css
========================================================== */


/* ==========================================================
   CONTENEDOR PRINCIPAL
========================================================== */

.hero-banred {
    position: relative !important;
    width: 100% !important;
    height: 600px !important;
    overflow: visible !important;
}


/* ==========================================================
   RED / CONEXIONES
========================================================== */

.hero-banred .banred-network {
    position: absolute !important;

    width: 650px !important;
    height: 560px !important;

    right: 0 !important;
    top: 15px !important;

    z-index: 2 !important;

    pointer-events: none !important;
}

.hero-banred .network-svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

.hero-banred .network-path {
    fill: none !important;

    stroke-width: 2px !important;
    stroke-linecap: round !important;

    stroke-dasharray: 7 11 !important;

    opacity: .48 !important;

    animation:
        banredNetworkFlow
        3s
        linear
        infinite !important;
}

.hero-banred .path-a,
.hero-banred .path-b {
    stroke: #6575ff !important;
}

.hero-banred .path-c,
.hero-banred .path-d {
    stroke: #00cfe3 !important;
}

.hero-banred .path-b {
    animation-delay: .5s !important;
}

.hero-banred .path-c {
    animation-delay: 1s !important;
}

.hero-banred .path-d {
    animation-delay: 1.5s !important;
}

@keyframes banredNetworkFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -72px;
    }

}


/* ==========================================================
   PERSONA
========================================================== */

.hero-banred .banred-person {

    position: absolute !important;

    width: 365px !important;
    height: 525px !important;

    right: 105px !important;
    bottom: 0 !important;

    z-index: 8 !important;

    display: flex !important;

    align-items: flex-end !important;
    justify-content: center !important;

    pointer-events: none !important;
}

.hero-banred .banred-person img {

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    filter:
        drop-shadow(
            0 25px 40px
            rgba(30,12,66,.13)
        ) !important;

    animation:
        banredPersonFloat
        6s
        ease-in-out
        infinite !important;
}

@keyframes banredPersonFloat {

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

    50% {
        transform: translateY(-5px);
    }

}


/* ==========================================================
   BADGES — MUY IMPORTANTE
   Evita que se estiren por todo el hero
========================================================== */

.hero-banred .banred-floating {

    position: absolute !important;

    width: max-content !important;
    max-width: 290px !important;

    box-sizing: border-box !important;

    background:
        rgba(255,255,255,.96) !important;

    border:
        1px solid
        rgba(30,12,66,.06) !important;

    box-shadow:
        0 16px 40px
        rgba(30,12,66,.10) !important;

    border-radius: 18px !important;

    backdrop-filter:
        blur(15px) !important;

    -webkit-backdrop-filter:
        blur(15px) !important;

    z-index: 25 !important;

}


/* ==========================================================
   BADGE 24/7
========================================================== */

.hero-banred .badge-realtime {

    right: 0px !important;
    top: 20px !important;

    width: max-content !important;
    max-width: 220px !important;

    min-height: 60px !important;

    padding:
        10px 16px !important;

    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    animation:
        banredBadgeFloat
        5s
        ease-in-out
        infinite !important;
}


/* ==========================================================
   BADGE OPORTUNIDADES
========================================================== */

.hero-banred .badge-opportunity {

    right: 70px !important;
    top: 90px !important;

    width: 270px !important;
    max-width: 270px !important;

    min-height: 60px !important;

    padding:
        10px 16px !important;

    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    animation:
        banredBadgeFloat
        5.5s
        ease-in-out
        infinite !important;

    animation-delay: .7s !important;
}

.hero-banred .floating-icon {

    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    max-width: 36px !important;

    flex: 0 0 36px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    color: #fff !important;

    font-weight: 700 !important;
}

.hero-banred .realtime-icon {

    background:
        linear-gradient(
            135deg,
            #00c9a0,
            #00afd8
        ) !important;
}

.hero-banred .opportunity-icon {

    background:
        linear-gradient(
            135deg,
            #3157ff,
            #00cfe4
        ) !important;
}

.hero-banred .floating-text {

    min-width: 0 !important;
}

.hero-banred .floating-text small {

    display: block !important;

    margin: 0 !important;

    color: #85818e !important;

    font-size: 9px !important;

    line-height: 1.2 !important;
}

.hero-banred .floating-text strong {

    display: block !important;

    margin: 2px 0 0 !important;

    color: #1e0c42 !important;

    font-size: 14px !important;

    line-height: 1.15 !important;
}

@keyframes banredBadgeFloat {

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

    50% {
        transform: translateY(-7px);
    }

}


/* ==========================================================
   TARJETA DE TRANSFERENCIAS - AQUIIII
========================================================== */

.hero-banred .transfer-card {

    position: absolute !important;

    left: -45px !important;
    top: 175px !important;

    width: 215px !important;
    max-width: 215px !important;

    padding: 16px !important;

    border-radius: 19px !important;

    box-sizing: border-box !important;

    z-index: 22 !important;

    background:
        rgba(255,255,255,.97) !important;

    border:
        1px solid
        rgba(30,12,66,.07) !important;

    box-shadow:
        0 20px 45px
        rgba(30,12,66,.12) !important;

    animation:
        banredTransferFloat
        6s
        ease-in-out
        infinite !important;
}

.hero-banred .transfer-header {

    display: flex !important;

    justify-content: space-between !important;
    align-items: center !important;

    margin-bottom: 9px !important;

    font-size: 9px !important;

    color: #8a8791 !important;
}

.hero-banred .transfer-loader {

    width: 8px !important;
    height: 8px !important;

    border-radius: 50% !important;

    background: #3157ff !important;

    box-shadow:
        0 0 0 5px
        rgba(49,87,255,.10) !important;

    animation:
        banredLoaderPulse
        1.4s
        ease-in-out
        infinite !important;
}

.hero-banred .transfer-person {

    display: flex !important;

    align-items: center !important;

    gap: 9px !important;

    padding: 7px 0 !important;

    width: 100% !important;

    opacity: 1 !important;
}

.hero-banred .avatar {

    width: 31px !important;
    height: 31px !important;

    min-width: 31px !important;

    flex: 0 0 31px !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 50% !important;

    color: #fff !important;

    font-size: 10px !important;

    font-weight: 800 !important;
}

.hero-banred .avatar-l {

    background:
        linear-gradient(
            135deg,
            #744cff,
            #a55dff
        ) !important;
}

.hero-banred .avatar-m {

    background:
        linear-gradient(
            135deg,
            #3157ff,
            #00a9ff
        ) !important;
}

.hero-banred .avatar-c {

    background:
        linear-gradient(
            135deg,
            #00bfcf,
            #00d6a0
        ) !important;
}

.hero-banred .transfer-person-info {

    min-width: 0 !important;
}

.hero-banred .transfer-person-info strong {

    display: block !important;

    color: #292535 !important;

    font-size: 10px !important;
}

.hero-banred .transfer-person-info small {

    display: block !important;

    margin-top: 2px !important;

    color: #999 !important;

    font-size: 8px !important;
}

@keyframes banredTransferFloat {

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

    50% {
        transform: translateY(-7px);
    }

}

@keyframes banredLoaderPulse {

    50% {
        transform: scale(1.3);
        opacity: .5;
    }

}


/* ==========================================================
   BRE-B
========================================================== */

.hero-banred .breb-center {

    position: absolute !important;

    width: 112px !important;
    height: 112px !important;

    right: 215px !important;
    top: 365px !important;

    z-index: 30 !important;
}


.hero-banred .breb-logo-white {

    width: 72px !important;

    height: auto !important;

    display: block !important;

    filter:
        brightness(0)
        invert(1) !important;
}

.hero-banred .breb-pulse {

    position: absolute !important;

    inset: 0 !important;

    border-radius: 50% !important;

    border:
        1px solid
        rgba(0,205,225,.50) !important;

    animation:
        banredBrebPulse
        3s
        ease-out
        infinite !important;
}

.hero-banred .pulse-two {

    animation-delay: 1.5s !important;
}

@keyframes banredBrebPulse {

    0% {
        transform: scale(.80);
        opacity: .75;
    }

    100% {
        transform: scale(1.65);
        opacity: 0;
    }

}


/* ==========================================================
   Banred
========================================================== */

.hero-banred .techpay-card {

    position: absolute !important;

    right: -45px !important;
    top: 215px !important;

    width: 195px !important;
    max-width: 195px !important;

    padding: 16px !important;

    box-sizing: border-box !important;

    border-radius: 18px !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 10px !important;

    z-index: 24 !important;

    background:
        rgba(255,255,255,.97) !important;

    border:
        1px solid
        rgba(30,12,66,.07) !important;

    box-shadow:
        0 20px 45px
        rgba(30,12,66,.11) !important;

    animation:
        banredTechFloat
        5.5s
        ease-in-out
        infinite !important;
}

.hero-banred .techpay-symbol {

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 10px !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #1e0c42,
            #3157ff
        ) !important;

    font-weight: 800 !important;
}

.hero-banred .techpay-data {

    min-width: 0 !important;
}

.hero-banred .techpay-data small {

    display: block !important;

    font-size: 8px !important;

    color: #85818e !important;
}

.hero-banred .techpay-data strong {

    display: block !important;

    margin: 3px 0 !important;

    color: #1e0c42 !important;

    font-size: 18px !important;

    line-height: 1.1 !important;
}

.hero-banred .techpay-status {

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    font-size: 7px !important;

    white-space: nowrap !important;

    color: #00a878 !important;
}

.hero-banred .techpay-status i {

    width: 6px !important;
    height: 6px !important;

    min-width: 6px !important;

    border-radius: 50% !important;

    background: #00a878 !important;
}

@keyframes banredTechFloat {

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

    50% {
        transform: translateY(-8px);
    }

}


/* ==========================================================
   SERVICIOS PÚBLICOS
========================================================== */

.hero-banred .services-card {

    position: absolute !important;

    right: -55px !important;
    bottom: 35px !important;

    width: 190px !important;
    max-width: 190px !important;

    padding: 17px !important;

    box-sizing: border-box !important;

    border-radius: 19px !important;

    z-index: 24 !important;

    background:
        rgba(255,255,255,.97) !important;

    border:
        1px solid
        rgba(30,12,66,.07) !important;

    box-shadow:
        0 20px 45px
        rgba(30,12,66,.11) !important;

    animation:
        banredServicesFloat
        6s
        ease-in-out
        infinite !important;

    animation-delay: 1s !important;
}

.hero-banred .services-card h3 {

    margin:
        0 0 10px !important;

    color: #211b2b !important;

    font-size: 14px !important;

    line-height: 1.2 !important;
}

.hero-banred .service-item {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 5px 0 !important;

    color: #77737f !important;

    font-size: 9px !important;
}

.hero-banred .service-item span:first-child {

    width: 19px !important;

    min-width: 19px !important;

    text-align: center !important;
}

@keyframes banredServicesFloat {

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

    50% {
        transform: translateY(-7px);
    }

}


/* ==========================================================
   FLECHA
========================================================== */

.hero-banred .send-floating {

    position: absolute !important;

    right: 5px !important;
    top: 135px !important;

    width: 45px !important;
    height: 45px !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 50% !important;

    background: #fff !important;

    color: #3157ff !important;

    box-shadow:
        0 12px 30px
        rgba(30,12,66,.12) !important;

    z-index: 30 !important;

    animation:
        banredSendFloat
        4s
        ease-in-out
        infinite !important;
}

@keyframes banredSendFloat {

    50% {
        transform:
            translateY(-8px)
            rotate(5deg);
    }

}


/* ==========================================================
   DESKTOP GRANDE
========================================================== */

@media (min-width: 1400px) {

    .hero-banred .banred-person {

        width: 380px !important;
        height: 545px !important;

        right: 105px !important;
    }

    .hero-banred .badge-realtime {

        right: 340px !important;
        top: 10px !important;
    }

    .hero-banred .badge-opportunity {

        right: 40px !important;
        top: 55px !important;
    }

    .hero-banred .breb-center {

        right: 215px !important;
        top: 365px !important;
    }

}


/* ==========================================================
   TABLET / LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .hero-banred .banred-person {

        width: 330px !important;
        height: 490px !important;

        right: 80px !important;
    }

    .hero-banred .badge-realtime,
    .hero-banred .badge-opportunity {

        width: 220px !important;
        max-width: 220px !important;

        right: 45px !important;
    }

    .hero-banred .breb-center {

        right: 175px !important;
        top: 345px !important;
    }

}

@media (max-width: 1000px) {

    .hero-banred {

        height: 560px !important;
    }

    .hero-banred .banred-person {

        width: 305px !important;
        height: 455px !important;

        right: 45px !important;
    }

    .hero-banred .badge-realtime {

        right: 25px !important;
        top: 20px !important;

        width: 200px !important;
        max-width: 200px !important;
    }

    .hero-banred .badge-opportunity {

        right: 25px !important;
        top: 88px !important;

        width: 200px !important;
        max-width: 225px !important;
    }

    .hero-banred .breb-center {

        right: 140px !important;
        top: 330px !important;
    }

    .hero-banred .transfer-card {

        left: -5px !important;
    }

    .hero-banred .techpay-card {

        right: -5px !important;
    }

    .hero-banred .services-card {

        right: 0 !important;
    }

}



/* =========================================================
   BANRED — PORTADA RESPONSIVE MÓVIL
========================================================= */

@media (max-width: 700px) {

    .hero-container {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .hero-copy {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(34px, 8.5vw, 42px) !important;
        line-height: 1.12 !important;
        overflow-wrap: break-word;
    }

    .hero-copy > p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .hero-buttons {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    .hero-trust {
        justify-content: center !important;
        gap: 14px !important;
    }

    .hero-banred {
        position: relative !important;
        left: 50% !important;
        width: 650px !important;
        max-width: none !important;
        height: 560px !important;

        transform: translateX(-50%) scale(.68) !important;
        transform-origin: top center !important;

        margin-bottom: -175px !important;
    }
}

@media (max-width: 500px) {

    .hero h1 {
        font-size: clamp(32px, 8.5vw, 38px) !important;
    }

    .hero-banred {
        transform: translateX(-50%) scale(.52) !important;
        margin-bottom: -260px !important;
    }
}


/* ==========================================================
   BRE-B — CÍRCULO CENTRAL
========================================================== */

.hero-banred .breb-circle {

    position: absolute;

    left: 6px;
    top: 6px;

    width: 100px;
    height: 100px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #00C2FF 0%,
            #00D3E1 35%,
            #00DCD0 60%,
            #00EF9A 100%
        );

    box-shadow:
        0 18px 45px rgba(0, 190, 220, .28),
        0 0 0 1px rgba(255,255,255,.30) inset;

    z-index: 30;
}


/* LOGO BRE-B EN BLANCO */

.hero-banred .breb-logo-white {

    width: 72px;
    height: auto;

    display: block;

    filter:
        brightness(0)
        invert(1);
}


/* ONDAS ALREDEDOR DEL CÍRCULO */

.hero-banred .breb-pulse {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid
        rgba(0, 211, 225, .50);

    animation:
        banredBrebPulse
        3s
        ease-out
        infinite;
}


.hero-banred .pulse-two {

    animation-delay: 1.5s;
}


/* ANIMACIÓN DE LAS ONDAS */

@keyframes banredBrebPulse {

    0% {

        transform:
            scale(.80);

        opacity: .75;
    }

    100% {

        transform:
            scale(1.65);

        opacity: 0;
    }
}


/* ANIMACIÓN GALERIA BANCOS */

.partners-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.partners-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 70px;
    animation: partnersScroll 30s linear infinite;
}

.partner-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 55px;
}

.partner-logo img {
    max-width: 130px;
    max-height: 42px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .65;
    transition: filter .3s ease, opacity .3s ease;
}

.partner-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes partnersScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.partners-marquee:hover .partners-track {
    animation-play-state: paused;
}


/* TARJETAS MODELOS DE SERVICIO */
.card-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verification-check {
    opacity: 0;
    transform: scale(.5);
    transition:
        opacity .25s ease,
        transform .3s cubic-bezier(.34,1.56,.64,1);
}

.verification-check i {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #00D3E1;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
}

.solution-card:hover .verification-check {
    opacity: 1;
    transform: scale(1);
}

/* =========================================================
   BANRED 3.0 — MENÚ MÓVIL
   ========================================================= */

@media (max-width: 1050px) {

    .site-header {
        overflow: visible !important;
    }

    .site-header .main-nav.mobile-open {
        display: flex !important;

        position: absolute !important;

        top: 82px !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        height: auto !important;

        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 4px !important;

        padding: 12px !important;

        background: rgba(255,255,255,.98) !important;

        border: 1px solid rgba(30,12,66,.08) !important;
        border-radius: 18px !important;

        box-shadow:
            0 20px 60px rgba(30,12,66,.16) !important;

        backdrop-filter: blur(20px);

        z-index: 10001 !important;
    }

    .site-header .main-nav.mobile-open a {
        display: block !important;

        width: 100% !important;

        padding: 15px 16px !important;

        color: #1e0c42 !important;

        font-size: 15px !important;
        font-weight: 700 !important;

        background: transparent !important;

        border-radius: 10px !important;

        text-align: left !important;
    }

    
.site-header .main-nav.mobile-open a:hover {
    background: linear-gradient(
        90deg,
        #1E0C42 0%,
        #C90043 25%,
        #FF0050 45%,
        #FF6A00 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    transform: translateX(3px);
}


/* Degradado del enlace activo en el menú móvil */
.site-header .main-nav.mobile-open a.active {
    background: linear-gradient(
        90deg,
        #1E0C42 0%,
        #C90043 25%,
        #FF0050 45%,
        #FF6A00 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}



    .site-header .main-nav.mobile-open .mobile-login {
        margin-top: 7px !important;

        padding-top: 15px !important;

        border-top:
            1px solid rgba(30,12,66,.08) !important;

        border-radius: 0 !important;

        color: #fff !important;

        background:
            linear-gradient(
                100deg,
                var(--banred-purple),
                #4120a0
            ) !important;

        text-align: center !important;
    }
}


/* Mover únicamente la chica en móviles */
@media (max-width: 500px) {
    .hero-banred .banred-person {
        right: 180px !important;
    }
}


/* Mover únicamente el círculo Bre-B en móviles */
@media (max-width: 500px) {
    .hero-banred .breb-center {
        left: calc(50% - 30px) !important;
    }
}


/* Botón principal de la portada con degradado Bre-B */
.hero-buttons .btn-primary {
    background: linear-gradient(
        135deg,
        #00C2FF 0%,
        #00D3E1 35%,
        #00DCD0 60%,
        #00EF9A 100%
    ) !important;

    color: #1E0C42 !important;
    box-shadow: 0 12px 28px rgba(0, 190, 220, 0.25);
}




/* =====================================================
   BANRED | LINEAS DE NEGOCIO — PRESENTACION PREMIUM
===================================================== */

.business-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
}

.business-grid .business-card {
    --line-accent: #4d36a2;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(180px, .55fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e9e5f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(30, 12, 66, .035);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.business-grid .business-card:hover {
    transform: translateY(-3px);
    border-color: #d8cdec;
    box-shadow: 0 14px 34px rgba(30, 12, 66, .08);
}

.business-grid .business-card--breb {
    --line-accent: #00bfae;
    border-color: #b9eee7;
    background: linear-gradient(110deg, #ffffff 0%, #f5fffd 100%);
}

.business-grid .business-card__main {
    padding: 27px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.business-grid .business-card__eyebrow {
    margin-bottom: 19px;
    color: var(--line-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.business-grid .business-card__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    border-radius: 14px;
    color: var(--line-accent);
    background: color-mix(in srgb, var(--line-accent) 10%, white);
    font-size: 19px;
}

.business-grid .business-card__main h3 {
    margin: 0 0 11px;
    color: #1e0c42;
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -.55px;
}

.business-grid .business-card__main p {
    max-width: 380px;
    margin: 0 0 23px;
    color: #686477;
    font-size: 13px;
    line-height: 1.8;
}

.business-grid .business-card__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    color: var(--line-accent);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.business-grid .business-card__link span {
    font-size: 18px;
    transition: transform .2s ease;
}

.business-grid .business-card__link:hover span {
    transform: translateX(4px);
}

.business-grid .business-card__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 21px;
    min-width: 0;
    padding: 28px 24px;
    border-left: 1px solid #f0edf5;
}

.business-grid .business-card__details-title {
    margin-bottom: 1px;
    color: #918a9e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.business-grid .business-card__details > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.business-grid .business-card__details > div > i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--line-accent);
    font-size: 13px;
}

.business-grid .business-card__details b {
    display: block;
    margin-bottom: 4px;
    color: #29213d;
    font-size: 12px;
    line-height: 1.4;
}

.business-grid .business-card__details small {
    display: block;
    color: #777184;
    font-size: 11px;
    line-height: 1.6;
}

.business-grid .business-card__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    min-width: 0;
    padding: 28px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, #211044, #382071);
}

.business-grid .business-card__aside::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -90px;
    bottom: -105px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255,255,255,.035),
                0 0 0 45px rgba(255,255,255,.025);
    pointer-events: none;
}

.business-grid .business-card__aside-number {
    color: rgba(255,255,255,.65);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.business-grid .business-card__aside > i {
    font-size: 31px;
    color: #d8d0ff;
}

.business-grid .business-card__aside > span:last-child {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.65;
}

.business-grid .business-card--breb .business-card__aside {
    color: #053e43;
    background: linear-gradient(135deg, #d9fbf5 0%, #a0f2e5 48%, #00d7bd 100%);
}

.business-grid .business-card--breb .business-card__aside-number {
    color: #087f79;
}

.business-grid .business-card--breb .business-card__aside > i {
    color: #007f7a;
}

.business-grid .business-card__breb-mark {
    font-size: 37px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -2px;
    color: #007f7a;
}

@media (max-width: 1000px) {
    .business-grid .business-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .business-grid .business-card__aside {
        grid-column: 1 / -1;
        min-height: 105px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 22px;
        padding: 22px 26px;
    }

    .business-grid .business-card__aside > span:last-child {
        margin-left: auto;
    }
}

@media (max-width: 600px) {
    .business-grid {
        gap: 15px !important;
    }

    .business-grid .business-card {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 17px;
    }

    .business-grid .business-card__main {
        padding: 23px 22px 20px;
    }

    .business-grid .business-card__eyebrow {
        margin-bottom: 15px;
    }

    .business-grid .business-card__icon {
        margin-bottom: 14px;
    }

    .business-grid .business-card__details {
        gap: 17px;
        padding: 21px 22px 24px;
        border-top: 1px solid #f0edf5;
        border-left: 0;
    }

    .business-grid .business-card__aside {
        grid-column: auto;
        min-height: 95px;
        padding: 18px 22px;
        gap: 16px;
    }

    .business-grid .business-card__aside > i {
        font-size: 24px;
    }

    .business-grid .business-card__breb-mark {
        font-size: 30px;
    }

    .business-grid .business-card__aside > span:last-child {
        font-size: 12px;
    }
}


.business-card__breb-logo {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    object-fit: contain;

    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 1))
        drop-shadow(0 0 7px rgba(255, 255, 255, .9))
        drop-shadow(0 0 15px rgba(255, 255, 255, .55));
}






/* =========================================================
   PÁGINA BRE-B PARA EMPRESAS
   ========================================================= */

.breb-editorial,
.breb-solutions,
.breb-process,
.breb-tech,
.breb-contact {
    position: relative;
    font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
}

.breb-editorial {
    padding: 112px 0 104px;
    background: #fff;
}

.breb-editorial-intro {
    max-width: 760px;
    margin-bottom: 62px;
}

.breb-kicker {
    display: inline-block;
    margin-bottom: 22px;
    color: #6b547f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.5;
}

.breb-editorial-intro h2,
.breb-section-heading h2,
.breb-process-heading h2,
.breb-tech-copy h2,
.breb-contact-inner h2 {
    margin: 0;
    color: #1e0c42;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -1.8px;
    line-height: 1.13;
}

.breb-editorial-intro h2 span {
    color: #76658d;
}

.breb-editorial-intro > p,
.breb-section-heading > p,
.breb-process-heading > p,
.breb-tech-copy > p,
.breb-contact-inner > div > p {
    max-width: 650px;
    margin: 24px 0 0;
    color: #686373;
    font-size: 16px;
    line-height: 1.9;
}

.breb-feature-list {
    border-top: 1px solid #e9e5ef;
}

.breb-feature {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 28px;
    padding: 30px 4px;
    border-bottom: 1px solid #e9e5ef;
}

.breb-feature-number {
    color: #8b7b9e;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.breb-feature h3,
.breb-solution h3,
.breb-process-step h3 {
    margin: 0;
    color: #1e0c42;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.45px;
}

.breb-feature p,
.breb-solution p,
.breb-process-step p {
    max-width: 690px;
    margin: 9px 0 0;
    color: #706b7a;
    font-size: 14px;
    line-height: 1.85;
}

.breb-feature > i {
    color: #88739e;
    font-size: 15px;
    transition: transform .2s ease;
}

.breb-feature:hover > i {
    transform: translateX(4px);
}

.breb-solutions {
    padding: 104px 0;
    background: #f8f7fa;
}

.breb-section-heading {
    max-width: 740px;
    margin-bottom: 52px;
}

.breb-solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e4deeb;
    border-bottom: 1px solid #e4deeb;
}

.breb-solution {
    min-width: 0;
    padding: 30px 28px 34px;
    border-right: 1px solid #e4deeb;
}

.breb-solution:first-child {
    padding-left: 0;
}

.breb-solution:last-child {
    padding-right: 0;
    border-right: 0;
}

.breb-solution-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 48px;
    color: #746284;
}

.breb-solution-top span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.breb-solution-top i {
    font-size: 19px;
}

.breb-solution h3 {
    font-size: 19px;
}

.breb-legal-note {
    margin: 24px 0 0;
    color: #7b7584;
    font-size: 12px;
    line-height: 1.8;
}

.breb-process {
    padding: 112px 0;
    background: #fff;
}

.breb-process-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 100px;
    align-items: start;
}

.breb-process-heading > p {
    margin-bottom: 26px;
}

.breb-text-link,
.breb-tech-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #4d286e;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.breb-text-link span,
.breb-tech-link span {
    transition: transform .2s ease;
}

.breb-text-link:hover span,
.breb-tech-link:hover span {
    transform: translateX(4px);
}

.breb-process-steps {
    border-top: 1px solid #e9e5ef;
}

.breb-process-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid #e9e5ef;
}

.breb-step-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e4dbea;
    border-radius: 50%;
    color: #563575;
    font-size: 12px;
    font-weight: 800;
}

.breb-process-step h3 {
    font-size: 17px;
}

.breb-process-step p {
    font-size: 13px;
}

.breb-tech {
    padding: 0 0 110px;
    background: #fff;
}

.breb-tech-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    gap: 65px;
    align-items: center;
    padding: 62px;
    border-radius: 4px;
    background: #f6f3f9;
}

.breb-tech-copy h2 {
    max-width: 520px;
    font-size: clamp(29px, 3.5vw, 42px);
    letter-spacing: -1.3px;
}

.breb-tech-copy > p {
    font-size: 14px;
}

.breb-tech-link {
    margin-top: 26px;
}

.breb-code-visual {
    overflow: hidden;
    border: 1px solid #e4dcea;
    border-radius: 8px;
    background: #fff;
}

.breb-code-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 18px;
    border-bottom: 1px solid #eee9f2;
}

.breb-code-top > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9d0e2;
}

.breb-code-top small {
    margin-left: auto;
    color: #897e96;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.breb-code-body {
    padding: 22px 20px;
}

.breb-code-body > p {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #f0edf3;
    color: #514660;
    font-family: monospace;
    font-size: 12px;
}

.breb-code-body > p span {
    color: #a59aaf;
}

.breb-code-body > p b {
    font-weight: 600;
}

.breb-code-body > p em {
    color: #8a6ba6;
    font-style: normal;
}

.breb-code-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    color: #4d765e;
    font-size: 11px;
    font-weight: 700;
}

.breb-contact {
    padding: 0 0 110px;
    background: #fff;
}

.breb-contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
    padding: 52px 0;
    border-top: 1px solid #e7e1ed;
    border-bottom: 1px solid #e7e1ed;
}

.breb-contact-inner > div {
    max-width: 680px;
}

.breb-contact-inner h2 {
    font-size: clamp(30px, 3.5vw, 43px);
}

.breb-contact-inner > div > p {
    margin-top: 16px;
    font-size: 14px;
}

.breb-contact-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 52px;
    padding: 0 23px;
    border-radius: 3px;
    background: #1e0c42;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease;
}

.breb-contact-button:hover {
    background: #39205d;
}

@media (max-width: 900px) {
    .breb-process-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .breb-tech-panel {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 42px;
    }

    .breb-contact-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 650px) {
    .breb-editorial,
    .breb-solutions,
    .breb-process {
        padding: 72px 0;
    }

    .breb-tech {
        padding-bottom: 72px;
    }

    .breb-contact {
        padding-bottom: 72px;
    }

    .breb-editorial-intro {
        margin-bottom: 38px;
    }

    .breb-editorial-intro h2,
    .breb-section-heading h2,
    .breb-process-heading h2 {
        letter-spacing: -1px;
    }

    .breb-feature {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 14px;
        padding: 25px 0;
    }

    .breb-feature > i {
        display: none;
    }

    .breb-feature h3 {
        font-size: 18px;
    }

    .breb-feature p {
        font-size: 13px;
    }

    .breb-solutions-grid {
        grid-template-columns: 1fr;
    }

    .breb-solution,
    .breb-solution:first-child,
    .breb-solution:last-child {
        padding: 25px 0;
        border-right: 0;
        border-bottom: 1px solid #e4deeb;
    }

    .breb-solution:last-child {
        border-bottom: 0;
    }

    .breb-solution-top {
        margin-bottom: 25px;
    }

    .breb-tech-panel {
        padding: 28px 22px;
    }

    .breb-contact-inner {
        padding: 36px 0;
    }

    .breb-contact-button {
        width: 100%;
    }
}



/* =========================================================
   BRE-B: DEMOSTRACIÓN INTERACTIVA
   ========================================================= */

.breb-gradient-text {
    background: linear-gradient(
        100deg,
        #1e0c42 0%,
        #6b2b86 36%,
        #c90043 68%,
        #ff6a00 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1e0c42;
}

.breb-demo {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(111, 64, 151, .09), transparent 43%),
        #f8f6fa;
}

.breb-demo-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(340px, .85fr);
    gap: 80px;
    align-items: center;
}

.breb-demo-copy h2 {
    margin: 0;
    color: #1e0c42;
    font-size: clamp(34px, 4vw, 51px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -1.8px;
}

.breb-demo-copy > p {
    max-width: 490px;
    margin: 22px 0;
    color: #686373;
    font-size: 15px;
    line-height: 1.9;
}

.breb-demo-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 480px;
    margin-top: 30px;
    padding-top: 19px;
    border-top: 1px solid #e5dfeb;
    color: #716a7d;
    font-size: 12px;
    line-height: 1.8;
}

.breb-demo-disclaimer i {
    margin-top: 3px;
    color: #76558f;
}

.breb-lookup-card {
    min-width: 0;
    padding: 30px;
    border: 1px solid #e8e2ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(30, 12, 66, .09);
}

.breb-lookup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.breb-lookup-eyebrow {
    color: #8a7b99;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.breb-lookup-header h3 {
    margin: 8px 0 0;
    color: #1e0c42;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.6px;
}

.breb-lookup-symbol {
    display: grid;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8fff6, #e9f7ff);
}

.breb-lookup-symbol img {
    display: block;
    width: 37px;
    height: 37px;
    object-fit: contain;
}

.breb-lookup-form label {
    display: block;
    margin-bottom: 9px;
    color: #443b51;
    font-size: 12px;
    font-weight: 800;
}

.breb-lookup-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid #ddd5e7;
    border-radius: 5px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.breb-lookup-input-wrap:focus-within {
    border-color: #80619e;
    box-shadow: 0 0 0 3px rgba(128, 97, 158, .11);
}

.breb-lookup-input-wrap > i {
    color: #88769b;
    font-size: 14px;
}

.breb-lookup-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1e0c42;
    font: inherit;
    font-size: 13px;
}

.breb-lookup-input-wrap input::placeholder {
    color: #aaa2b4;
}

.breb-lookup-form > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 51px;
    margin-top: 14px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(100deg, #1e0c42, #492269);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: box-shadow .2s, transform .2s;
}

.breb-lookup-form > button:hover {
    box-shadow: 0 8px 20px rgba(30, 12, 66, .18);
    transform: translateY(-1px);
}

.breb-lookup-form > button:disabled {
    cursor: wait;
    opacity: .65;
}

.breb-demo-progress {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 100px;
    color: #5d4b70;
    font-size: 12px;
}

.breb-demo-spinner {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border: 2px solid #e8dff0;
    border-top-color: #74459b;
    border-radius: 50%;
    animation: brebDemoSpin .75s linear infinite;
}

@keyframes brebDemoSpin {
    to { transform: rotate(360deg); }
}

.breb-demo-result {
    padding: 20px 0 0;
    animation: brebDemoAppear .35s ease both;
}

@keyframes brebDemoAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.breb-demo-result-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee8f3;
}

.breb-demo-check {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #e7faf1;
    color: #16865d;
}

.breb-demo-result-top strong,
.breb-demo-result-top small {
    display: block;
}

.breb-demo-result-top strong {
    color: #1e0c42;
    font-size: 13px;
    line-height: 1.6;
}

.breb-demo-result-top small {
    margin-top: 4px;
    color: #8b8195;
    font-size: 10px;
    line-height: 1.6;
}

.breb-demo-data {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 19px 0;
}

.breb-demo-data span {
    margin-top: 6px;
    color: #898092;
    font-size: 10px;
}

.breb-demo-data strong {
    overflow-wrap: anywhere;
    color: #352344;
    font-size: 13px;
}

.breb-demo-result-note {
    padding: 12px;
    border-radius: 4px;
    background: #f7f4fa;
    color: #756b81;
    font-size: 10px;
    line-height: 1.7;
}

.breb-demo-reset {
    margin-top: 16px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #633887;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.breb-lookup-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #f0edf3;
    color: #91899b;
    font-size: 10px;
    line-height: 1.6;
}

.breb-lookup-footer i {
    color: #80619e;
}

@media (max-width: 850px) {
    .breb-demo {
        padding: 76px 0;
    }

    .breb-demo-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .breb-demo-copy h2 {
        font-size: clamp(34px, 7vw, 46px);
    }

    .breb-lookup-card {
        width: 100%;
        max-width: 560px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .breb-demo {
        padding: 62px 0;
    }

    .breb-lookup-card {
        padding: 22px 18px;
        border-radius: 8px;
    }

    .breb-lookup-header h3 {
        font-size: 20px;
    }

    .breb-demo-copy h2 {
        letter-spacing: -1.2px;
    }
}



/* =========================================================
   BRE-B PARA EMPRESAS: COLORES Y MOVIMIENTO
   ========================================================= */

/* Degradado oficial de identidad Banred */
.breb-gradient-text {
    display: inline;
    background: linear-gradient(
        100deg,
        #1e0c42 0%,
        #6b2b86 30%,
        #c90043 58%,
        #ff0050 78%,
        #ff6a00 100%
    );
    background-size: 200% auto;
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1e0c42;
    animation: brebGradientShift 6s ease-in-out infinite alternate;
}

@keyframes brebGradientShift {
    from { background-position: 0% center; }
    to   { background-position: 100% center; }
}

/* La propiedad display de otros estilos no debe anular hidden */
.breb-demo [hidden] {
    display: none !important;
}

/* Fondo con acentos de Bre-B */
.breb-demo {
    background:
        radial-gradient(ellipse at 95% 15%, rgba(0, 201, 167, .12), transparent 38%),
        radial-gradient(ellipse at 8% 90%, rgba(0, 185, 214, .09), transparent 35%),
        #f8f7fa;
}

.breb-demo-copy h2 .breb-gradient-text {
    background-image: linear-gradient(
        100deg,
        #1e0c42,
        #6b2b86,
        #c90043,
        #ff6a00
    );
}

/* Tarjeta de consulta */
.breb-lookup-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 185, 214, .22);
    box-shadow: 0 24px 65px rgba(30, 12, 66, .09);
    transition: box-shadow .3s ease, transform .3s ease;
}

.breb-lookup-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #00c9a7, #00b9d6, #6b2b86);
    content: "";
}

.breb-lookup-card:hover {
    box-shadow: 0 28px 72px rgba(30, 12, 66, .14);
}

.breb-lookup-symbol {
    background: linear-gradient(135deg, #d8fff3, #d9f8ff);
    box-shadow: inset 0 0 0 1px rgba(0, 185, 214, .15);
}

.breb-lookup-form > button {
    background: linear-gradient(105deg, #00c9a7 0%, #00b9d6 52%, #5b6fe8 100%);
    color: #1e0c42;
    box-shadow: 0 7px 20px rgba(0, 185, 214, .16);
}

.breb-lookup-form > button:hover {
    background: linear-gradient(105deg, #00dfb7 0%, #00c4e3 52%, #7184f4 100%);
    box-shadow: 0 10px 26px rgba(0, 185, 214, .24);
}

.breb-lookup-input-wrap:focus-within {
    border-color: #00b9b0;
    box-shadow: 0 0 0 3px rgba(0, 201, 167, .13);
}

/* Consulta: solo se ve después de pulsar el botón */
.breb-demo-progress {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 100px;
    color: #1e0c42;
    font-size: 13px;
    font-weight: 700;
}

.breb-demo-spinner {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 3px solid #d9f8f2;
    border-top-color: #00b9d6;
    border-right-color: #00c9a7;
    border-radius: 50%;
    animation: brebDemoSpin .7s linear infinite;
}

@keyframes brebDemoSpin {
    to { transform: rotate(360deg); }
}

.breb-demo-result {
    border-top: 1px solid #e9e5ef;
    animation: brebDemoAppear .45s cubic-bezier(.2, .75, .25, 1) both;
}

.breb-demo-check {
    background: linear-gradient(135deg, #caffed, #c9f8ff);
    color: #087e70;
    box-shadow: 0 0 0 5px rgba(0, 201, 167, .08);
}

.breb-demo-result-top strong {
    color: #1e0c42;
}

.breb-demo-result-note {
    border-left: 3px solid #00b9d6;
    background: linear-gradient(100deg, #effffb, #f2fbff);
}

.breb-demo-reset {
    color: #087e9a;
}

.breb-demo-reset:hover {
    color: #1e0c42;
}

/* Animación de aparición de resultados */
@keyframes brebDemoAppear {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   MOVIMIENTO EN LAS SECCIONES COMERCIALES
   ========================================================= */

/* Líneas de beneficios: acento turquesa y reacción al pasar */
.breb-feature {
    position: relative;
    transition: background .3s ease, padding .3s ease;
}

.breb-feature::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 3px;
    background: linear-gradient(180deg, #00c9a7, #00b9d6, #6b2b86);
    content: "";
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .3s ease;
}

.breb-feature:hover {
    padding-left: 15px;
    background: linear-gradient(90deg, rgba(0, 201, 167, .045), transparent 75%);
}

.breb-feature:hover::before {
    transform: scaleY(1);
}

.breb-feature-number {
    transition: color .25s ease;
}

.breb-feature:hover .breb-feature-number {
    color: #00a995;
}

.breb-feature > i {
    transition: transform .3s ease, color .3s ease;
}

.breb-feature:hover > i {
    color: #00a995;
    transform: translateX(6px);
}

/* Tarjetas: movimiento escalonado y acentos de Bre-B */
.breb-solutions-grid {
    border-color: #e4deeb;
}

.breb-solution {
    position: relative;
    overflow: hidden;
    transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.breb-solution::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #00c9a7, #00b9d6, #6b2b86, #ff6a00);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.breb-solution:hover {
    z-index: 1;
    background: #fff;
    box-shadow: 0 16px 35px rgba(30, 12, 66, .07);
    transform: translateY(-7px);
}

.breb-solution:hover::after {
    transform: scaleX(1);
}

.breb-solution-top i {
    transition: color .3s ease, transform .3s ease;
}

.breb-solution:hover .breb-solution-top i {
    color: #00a995;
    transform: translateY(-4px) scale(1.08);
}

.breb-solution-top span {
    transition: color .3s ease;
}

.breb-solution:hover .breb-solution-top span {
    color: #008e8c;
}

/* Pasos del proceso: número iluminado y línea de color */
.breb-process-step {
    position: relative;
    transition: padding .3s ease, background .3s ease;
}

.breb-process-step::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, #00c9a7, #00b9d6, #6b2b86);
    content: "";
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s ease;
}

.breb-process-step:hover {
    padding-left: 13px;
    background: linear-gradient(90deg, rgba(0, 185, 214, .045), transparent);
}

.breb-process-step:hover::before {
    transform: scaleY(1);
}

.breb-step-index {
    transition: color .3s ease, background .3s ease, border-color .3s ease;
}

.breb-process-step:hover .breb-step-index {
    border-color: transparent;
    background: linear-gradient(135deg, #00c9a7, #00b9d6);
    color: #1e0c42;
}

/* Panel técnico: borde animado y detalles de color */
.breb-tech-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(107, 43, 134, .10);
    background:
        radial-gradient(ellipse at 95% 0%, rgba(0, 201, 167, .12), transparent 38%),
        linear-gradient(135deg, #f6f3f9, #f2fbfa);
}

.breb-tech-panel::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, #00c9a7, #00b9d6, #6b2b86, #ff6a00);
    content: "";
}

.breb-code-visual {
    border-color: rgba(0, 185, 214, .25);
    box-shadow: 0 16px 38px rgba(30, 12, 66, .07);
    transition: transform .35s ease, box-shadow .35s ease;
}

.breb-tech-panel:hover .breb-code-visual {
    box-shadow: 0 22px 45px rgba(30, 12, 66, .12);
    transform: translateY(-4px);
}

.breb-code-top {
    background: linear-gradient(90deg, #f0fffb, #f2faff);
}

.breb-code-top > span:nth-child(1) {
    background: #00c9a7;
}

.breb-code-top > span:nth-child(2) {
    background: #00b9d6;
}

.breb-code-top > span:nth-child(3) {
    background: #9b70bf;
}

.breb-code-body > p {
    transition: background .25s ease, padding .25s ease;
}

.breb-code-body > p:hover {
    padding-right: 6px;
    padding-left: 6px;
    background: #f0fffb;
}

.breb-code-body > p em {
    color: #00a995;
}

.breb-code-status i {
    color: #00a995;
    animation: brebStatusPulse 2s ease-in-out infinite;
}

@keyframes brebStatusPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.13); }
}

/* Botón de contacto con colores Bre-B */
.breb-contact-button {
    background: linear-gradient(105deg, #00c9a7, #00b9d6);
    color: #1e0c42;
    box-shadow: 0 8px 22px rgba(0, 185, 214, .16);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.breb-contact-button:hover {
    background: linear-gradient(105deg, #00dfb7, #00c4e3);
    color: #1e0c42;
    box-shadow: 0 12px 28px rgba(0, 185, 214, .24);
    transform: translateY(-2px);
}

/* Entrada suave al desplazarse por la página */
.breb-motion-item {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .65s ease var(--breb-delay, 0ms),
        transform .65s cubic-bezier(.2, .7, .25, 1) var(--breb-delay, 0ms);
}

.breb-motion-item.breb-is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respeta la preferencia de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    .breb-gradient-text,
    .breb-demo-spinner,
    .breb-code-status i {
        animation: none !important;
    }

    .breb-feature,
    .breb-solution,
    .breb-process-step,
    .breb-tech-panel,
    .breb-code-visual,
    .breb-motion-item {
        transition: none !important;
        transform: none !important;
    }

    .breb-motion-item {
        opacity: 1 !important;
    }
}

@media (max-width: 850px) {
    .breb-demo-layout {
        gap: 38px;
    }

    .breb-solution:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 650px) {
    .breb-feature:hover,
    .breb-process-step:hover {
        padding-left: 8px;
    }

    .breb-solution:hover {
        transform: none;
    }

    .breb-tech-panel {
        padding: 28px 22px;
    }
}



/* =========================================================
   BANRED · BRE-B | CONSULTA DE LLAVE
   Diseño fintech refinado
   ========================================================= */

.breb-lookup-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    border: 1px solid #e2ebe9;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 20px 55px rgba(30, 12, 66, .075),
        0 2px 8px rgba(30, 12, 66, .025);
}

/* Encabezado */
.breb-lookup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 25px 27px;
    border: 0;
    border-bottom: 1px solid #edf1f3;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(0, 201, 167, .10), transparent 42%),
        #ffffff;
}

.breb-lookup-header > div:first-child {
    min-width: 0;
}

.breb-lookup-eyebrow {
    color: #078d83;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.65px;
}

.breb-lookup-header h3 {
    margin: 8px 0 0;
    color: #1e0c42;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.25;
}

.breb-lookup-symbol {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #c6f0e8;
    border-radius: 15px;
    background: linear-gradient(145deg, #e7fbf6, #f2fcff);
    box-shadow: none;
}

.breb-lookup-symbol img {
    display: block;
    width: 33px;
    height: 33px;
    object-fit: contain;
}

/* Formulario */
.breb-lookup-form {
    padding: 24px 27px 27px;
    background: #ffffff;
}

.breb-lookup-form label {
    display: block;
    margin-bottom: 9px;
    color: #514761;
    font-size: 12px;
    font-weight: 750;
}

.breb-lookup-input-wrap {
    min-height: 53px;
    border: 1px solid #dce7e8;
    border-radius: 8px;
    background: #fbfdfd;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.breb-lookup-input-wrap > i {
    color: #078d83;
}

.breb-lookup-input-wrap:focus-within {
    border-color: #50cdb9;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 201, 167, .09);
}

.breb-lookup-form > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 51px;
    margin-top: 13px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(105deg, #00c9a7, #63dfd0);
    color: #123d43;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 5px 14px rgba(0, 185, 166, .13);
    transition: box-shadow .2s ease, transform .2s ease;
}

.breb-lookup-form > button:hover {
    box-shadow: 0 9px 20px rgba(0, 185, 166, .20);
    transform: translateY(-1px);
}

/* Resultado */
.breb-demo-result {
    margin: 0;
    padding: 24px 27px 23px;
    border: 0;
    border-top: 1px solid #edf1f3;
    background: #ffffff;
    animation: brebDemoAppear .35s ease both;
}

.breb-demo-result-top {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid #edf0f4;
}

.breb-demo-check {
    display: grid;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 4px solid #e7faf4;
    border-radius: 50%;
    background: linear-gradient(140deg, #00c9a7, #a4f0dc);
    color: #087365;
    font-size: 16px;
    box-shadow: none;
}

.breb-demo-result-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.breb-result-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #078d83;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.breb-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00b894;
    box-shadow: 0 0 0 3px #e5f8f2;
}

.breb-demo-result-heading strong {
    color: #1e0c42;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.breb-demo-result-heading small {
    color: #858092;
    font-size: 10px;
    line-height: 1.5;
}



/* =========================================================
   BANRED / BRE-B — CONSULTA DE LLAVE
   Diseño fintech compacto y refinado
   ========================================================= */

.breb-lookup-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    border: 1px solid #e3eceb;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 15px 42px rgba(30, 12, 66, .055);
}

.breb-lookup-card::before {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #00c9a7, #00b9d6, #6656b5);
    content: "";
    pointer-events: none;
}

/* ENCABEZADO */
.breb-lookup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 23px 26px 20px;
    border: 0;
    border-bottom: 1px solid #edf0f3;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(0, 201, 167, .07), transparent 45%),
        #fff;
}

.breb-lookup-header > div:first-child {
    min-width: 0;
}

.breb-lookup-eyebrow {
    color: #008e83;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.breb-lookup-header h3 {
    margin: 7px 0 0;
    color: #1e0c42;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.8px;
}

.breb-lookup-symbol {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid #c9f0e8;
    border-radius: 50%;
    background: #effbf8;
    box-shadow: none;
}

.breb-lookup-symbol img {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

/* FORMULARIO */
.breb-lookup-form {
    padding: 21px 26px 23px;
    background: #fff;
}

.breb-lookup-form label {
    display: block;
    margin-bottom: 8px;
    color: #514761;
    font-size: 11px;
    font-weight: 700;
}

.breb-lookup-input-wrap {
    min-height: 48px;
    border: 1px solid #dce6e8;
    border-radius: 8px;
    background: #fbfdfd;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.breb-lookup-input-wrap:focus-within {
    border-color: #51cdb9;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 201, 167, .09);
}

.breb-lookup-input-wrap > i {
    color: #008e83;
}

.breb-lookup-form > button {
    min-height: 46px;
    margin-top: 11px;
    padding: 0 17px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(100deg, #00c9a7, #00b9d6);
    color: #123b43;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 13px rgba(0, 185, 166, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}

.breb-lookup-form > button:hover {
    box-shadow: 0 7px 18px rgba(0, 185, 166, .18);
    transform: translateY(-1px);
}

/* RESULTADO */
.breb-demo-result {
    margin: 0;
    padding: 23px 26px 22px;
    border: 0;
    border-top: 1px solid #edf0f3;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(0, 201, 167, .035), transparent 48%),
        #fff;
    animation: brebCompactEnter .35s ease both;
}

.breb-demo-result-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0 0 17px;
    border: 0;
    border-bottom: 1px solid #edf0f3;
}

.breb-demo-check {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #c9f1e5;
    border-radius: 50%;
    background: #e7faf4;
    color: #008b78;
    font-size: 14px;
    box-shadow: none;
}

.breb-demo-result-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.breb-result-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #008e83;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.breb-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00b894;
    box-shadow: 0 0 0 3px rgba(0, 184, 148, .09);
}

.breb-demo-result-heading strong {
    color: #1e0c42;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.breb-demo-result-heading small {
    color: #858092;
    font-size: 10px;
    line-height: 1.45;
}

/* COMPOSICIÓN DE LOS DATOS */
.breb-demo-data {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "key key"
        "holder entity";
    gap: 0;
    margin: 0;
    padding: 0;
}

/* LLAVE: TODO CENTRADO */
.breb-demo-data .breb-data-row:first-child {
    grid-area: key;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    margin: 19px 0 21px;
    padding: 21px 15px 19px;
    border: 0;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 201, 167, .105), transparent 67%),
        linear-gradient(140deg, #f2fbf8, #f7fbfd);
    text-align: center;
    transform: none;
}

.breb-demo-data .breb-data-row:first-child:hover {
    padding: 21px 15px 19px;
    border: 0;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 201, 167, .105), transparent 67%),
        linear-gradient(140deg, #f2fbf8, #f7fbfd);
    transform: none;
}

/* Icono de llave */
.breb-demo-data .breb-data-row:first-child .breb-data-icon {
    display: grid;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    place-items: center;
    margin: 0;
    border: 1px solid #d5f1e9;
    border-radius: 50%;
    background: #fff;
    color: #009b8d;
    font-size: 17px;
    box-shadow: 0 3px 12px rgba(0, 153, 137, .055);
}

/* Etiqueta y número, uno debajo del otro */
.breb-demo-data .breb-data-row:first-child .breb-data-content {
    display: flex !important;
    flex: 0 1 auto;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    text-align: center !important;
}

.breb-demo-data .breb-data-row:first-child .breb-data-content > span {
    color: #727c89;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.breb-demo-data .breb-data-row:first-child .breb-data-content > strong {
    display: block;
    width: 100%;
    color: #008f83;
    font-size: clamp(27px, 3.5vw, 35px);
    font-weight: 800;
    letter-spacing: -.9px;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Verificación debajo del número */
.breb-demo-data .breb-data-row:first-child .breb-data-verified {
    position: static !important;
    display: grid !important;
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #dcf7ed;
    color: #008d77;
    font-size: 12px;
}

/* TITULAR Y ENTIDAD: COMPACTOS Y ALINEADOS */
.breb-demo-data .breb-data-row:nth-child(2),
.breb-demo-data .breb-data-row:nth-child(3) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 3px 12px 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.breb-demo-data .breb-data-row:nth-child(3) {
    padding-right: 0;
    padding-left: 15px;
    border-left: 1px solid #e8eaf0;
}

.breb-demo-data .breb-data-row:nth-child(2):hover,
.breb-demo-data .breb-data-row:nth-child(3):hover {
    padding-top: 3px;
    padding-bottom: 4px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.breb-demo-data .breb-data-row:nth-child(2) .breb-data-icon,
.breb-demo-data .breb-data-row:nth-child(3) .breb-data-icon {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f0eafa;
    color: #765995;
    font-size: 13px;
}

.breb-demo-data .breb-data-row:nth-child(3) .breb-data-icon {
    background: #eaf6fb;
    color: #397e9b;
}

.breb-demo-data .breb-data-row:nth-child(2) .breb-data-content,
.breb-demo-data .breb-data-row:nth-child(3) .breb-data-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.breb-demo-data .breb-data-row:nth-child(2) .breb-data-content > span,
.breb-demo-data .breb-data-row:nth-child(3) .breb-data-content > span {
    color: #858092;
    font-size: 10px;
    line-height: 1.4;
}

.breb-demo-data .breb-data-row:nth-child(2) .breb-data-content > strong,
.breb-demo-data .breb-data-row:nth-child(3) .breb-data-content > strong {
    color: #25183e;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.breb-demo-data .breb-data-row:nth-child(2) .breb-data-verified,
.breb-demo-data .breb-data-row:nth-child(3) .breb-data-verified {
    display: none;
}

/* AVISO */
.breb-demo-result-note {
    margin-top: 22px;
    padding: 10px 13px;
    border: 0;
    border-left: 2px solid #00c9a7;
    border-radius: 0;
    background: #f4faf9;
    color: #747d89;
    font-size: 10px;
    line-height: 1.7;
}

/* CONSULTAR OTRA LLAVE */
.breb-demo-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    margin-top: 13px;
    padding: 10px 15px;
    border: 1px solid #c5ece4;
    border-radius: 7px;
    background: #f0fbf8;
    color: #00877e;
    font-size: 11px;
    font-weight: 800;
    transition: background .2s ease, transform .2s ease;
}

.breb-demo-reset::after {
    content: "\f2f1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.breb-demo-reset:hover {
    border-color: #a6e4d9;
    background: #e4f8f2;
    color: #1e0c42;
    transform: translateY(-1px);
}

/* PIE */
.breb-lookup-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 14px 26px 16px;
    border-top: 1px solid #edf0f3;
    background: #fbfcfd;
    color: #858092;
    font-size: 10px;
    line-height: 1.5;
}

.breb-lookup-footer > i {
    color: #008e83;
}

/* CONSULTA EN CURSO */
.breb-demo-progress {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 80px;
    padding: 18px 26px;
    background: #fff;
    color: #1e0c42;
    font-size: 12px;
    font-weight: 700;
}

.breb-demo [hidden] {
    display: none !important;
}

@keyframes brebCompactEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TABLET */
@media (max-width: 700px) {
    .breb-lookup-header {
        padding: 21px 22px 19px;
    }

    .breb-demo-result {
        padding: 21px 22px;
    }

    .breb-demo-data {
        grid-template-areas:
            "key key"
            "holder holder"
            "entity entity";
    }

    .breb-demo-data .breb-data-row:nth-child(2),
    .breb-demo-data .breb-data-row:nth-child(3) {
        padding: 12px 0;
        border: 0;
        border-bottom: 1px solid #edf0f3;
    }

    .breb-demo-data .breb-data-row:nth-child(3) {
        padding-left: 0;
        border-bottom: 0;
    }

    .breb-demo-result-note {
        margin-top: 17px;
    }

    .breb-lookup-footer {
        padding-right: 22px;
        padding-left: 22px;
    }
}

/* MÓVIL */
@media (max-width: 480px) {
    .breb-lookup-header {
        gap: 12px;
        padding: 20px 18px;
    }

    .breb-lookup-header h3 {
        font-size: 21px;
    }

    .breb-lookup-symbol {
        flex-basis: 41px;
        width: 41px;
        height: 41px;
    }

    .breb-lookup-symbol img {
        width: 28px;
        height: 28px;
    }

    .breb-lookup-form {
        padding: 19px 18px 21px;
    }

    .breb-demo-result {
        padding: 19px 18px;
    }

    .breb-demo-result-top {
        padding-bottom: 15px;
    }

    .breb-demo-data .breb-data-row:first-child {
        gap: 8px;
        margin: 16px 0 17px;
        padding: 19px 12px 17px;
    }

    .breb-demo-data .breb-data-row:first-child:hover {
        padding: 19px 12px 17px;
    }

    .breb-demo-data .breb-data-row:first-child .breb-data-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
        font-size: 16px;
    }

    .breb-demo-data .breb-data-row:first-child .breb-data-content > strong {
        font-size: clamp(25px, 8vw, 32px);
    }

    .breb-demo-data .breb-data-row:nth-child(2),
    .breb-demo-data .breb-data-row:nth-child(3) {
        gap: 10px;
    }

    .breb-demo-data .breb-data-row:nth-child(2) .breb-data-content > strong,
    .breb-demo-data .breb-data-row:nth-child(3) .breb-data-content > strong {
        font-size: 12px;
    }

    .breb-demo-result-note {
        margin-top: 16px;
    }

    .breb-demo-progress {
        padding: 17px 18px;
    }

    .breb-lookup-footer {
        padding: 13px 18px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .breb-demo-result {
        animation: none;
    }

    .breb-lookup-form > button,
    .breb-demo-reset {
        transition: none;
    }
}


/* =========================================================
   BANRED / BRE-B — ENCABEZADO CLARO
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(30, 12, 66, .08);
    box-shadow: 0 4px 20px rgba(30, 12, 66, .045);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.site-header .header-inner {
    background: transparent !important;
}

.site-header .main-nav a {
    color: #302344;
    transition: color .2s ease;
}

.site-header .main-nav a:hover,
.site-header .main-nav a.active {
    color: #008f83;
}

.site-header .brand img {
    display: block;
    max-height: 46px;
    width: auto;
}

.site-header .header-actions .btn-outline {
    border-color: #d9e7e6;
    background: #fff;
    color: #1e0c42;
    transition: background .2s ease, border-color .2s ease;
}

.site-header .header-actions .btn-outline:hover {
    border-color: #00c9a7;
    background: #effbf8;
}

/* Botón del menú móvil */
.site-header .mobile-menu span {
    background: #1e0c42;
}

/* Menú desplegado en móvil */
@media (max-width: 900px) {
    .site-header .main-nav.mobile-open {
        background: rgba(255, 255, 255, .98) !important;
        border: 1px solid #e8eaf0;
        border-radius: 12px;
        box-shadow: 0 16px 38px rgba(30, 12, 66, .12);
    }

    .site-header .main-nav.mobile-open a {
        color: #302344;
    }

    .site-header .main-nav.mobile-open a:hover,
    .site-header .main-nav.mobile-open a.active {
        color: #008f83;
    }
}


/* =========================================================
   BRE-B — TRANSICIÓN LIMPIA ENTRE HEADER Y PRESENTACIÓN
   ========================================================= */

.breb-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #f8fbfc;
}

.breb-section .breb-background {
    pointer-events: none;
}

/* Mantiene el contenido por encima del fondo decorativo */
.breb-section .breb-layout {
    position: relative;
    z-index: 1;
}


/* =========================================================
   BRE-B — RECAUDOS EMPRESARIALES ANIMADOS
   ========================================================= */

.breb-collections-demo {
    position: relative;
    padding: 76px 0 82px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 5% 15%, rgba(0, 201, 167, .075), transparent 35%),
        radial-gradient(ellipse at 95% 80%, rgba(102, 86, 181, .07), transparent 34%),
        #f8fafc;
}

.breb-collections-heading {
    max-width: 690px;
    margin: 0 auto 34px;
    text-align: center;
}

.breb-collections-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #008f83;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.breb-collections-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00b894;
    box-shadow: 0 0 0 4px rgba(0, 184, 148, .11);
}

.breb-collections-heading h2 {
    margin: 14px 0 12px;
    color: #1e0c42;
    font-size: clamp(27px, 3.5vw, 40px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.4px;
}

.breb-collections-heading h2 .breb-gradient-text {
    background: linear-gradient(100deg, #00a98f, #00b9d6, #6950b5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.breb-collections-heading p {
    max-width: 590px;
    margin: 0 auto;
    color: #777487;
    font-size: 14px;
    line-height: 1.8;
}

.breb-collections-panel {
    max-width: 690px;
    margin: 0 auto;
    padding: 26px 29px 20px;
    border: 1px solid #e7eaf0;
    border-radius: 17px;
    background: rgba(255, 255, 255, .97);
    box-shadow:
        0 22px 65px rgba(30, 12, 66, .075),
        0 2px 8px rgba(30, 12, 66, .025);
}

.breb-collections-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf0f4;
}

.breb-collections-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.breb-collections-brand-mark {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 11px;
    background: #f0ebfa;
    color: #7051a0;
    font-size: 16px;
}

.breb-collections-brand > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.breb-collections-brand strong {
    color: #1e0c42;
    font-size: 13px;
    font-weight: 800;
}

.breb-collections-brand > div > span {
    color: #898597;
    font-size: 10px;
}

.breb-collections-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 30px;
    background: #effaf6;
    color: #078b70;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.breb-collections-status > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00b894;
    animation: brebCollectionsPulse 1.8s ease-in-out infinite;
}

.breb-collections-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 27px 0 22px;
}

.breb-collections-label {
    color: #898597;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.breb-collections-total {
    margin-top: 8px;
    color: #1e0c42;
    font-size: clamp(30px, 5vw, 43px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}

.breb-collections-total.is-updating {
    color: #008f83;
}

.breb-collections-caption {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: #008f83;
    font-size: 11px;
}

.breb-collections-wallet {
    display: grid;
    flex: 0 0 53px;
    width: 53px;
    height: 53px;
    place-items: center;
    border: 1px solid #d8f1e9;
    border-radius: 15px;
    background: linear-gradient(145deg, #e8faf5, #f0f9ff);
    color: #008f83;
    font-size: 21px;
}

.breb-collections-progress {
    padding: 18px 0 21px;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}

.breb-collections-progress-meta,
.breb-collections-goal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.breb-collections-progress-meta {
    margin-bottom: 11px;
    color: #777487;
    font-size: 11px;
}

.breb-collections-progress-meta strong {
    color: #1e0c42;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.breb-collections-track {
    height: 8px;
    overflow: hidden;
    border-radius: 20px;
    background: #e9e7f0;
}

.breb-collections-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00c9a7, #00b9d6, #6656b5);
    transition: width 1s cubic-bezier(.2, .7, .2, 1);
}

.breb-collections-goal {
    margin-top: 9px;
    color: #898597;
    font-size: 10px;
}

.breb-collections-goal strong {
    color: #514761;
    font-size: 10px;
    font-weight: 750;
}

.breb-collections-activity {
    padding-top: 19px;
}

.breb-collections-activity-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
    color: #302344;
    font-size: 11px;
    font-weight: 800;
}

.breb-collections-demo-label {
    color: #8c8799;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.breb-collections-notification {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 0;
    border-top: 1px solid #f0f1f5;
    animation: brebCollectionsSlide .4s ease both;
}

.breb-collections-avatar {
    display: grid;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 50%;
    background: #f0eafa;
    color: #7250a0;
    font-size: 14px;
}

.breb-collections-payment {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.breb-collections-payment strong {
    overflow: hidden;
    color: #302344;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breb-collections-payment span {
    color: #898597;
    font-size: 10px;
}

.breb-collections-amount {
    color: #00977f;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.breb-collections-footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    color: #8a8796;
    font-size: 9px;
    line-height: 1.7;
}

.breb-collections-footnote i {
    margin-top: 2px;
    color: #008f83;
}

@keyframes brebCollectionsPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@keyframes brebCollectionsSlide {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .breb-collections-demo {
        padding: 54px 0 58px;
    }

    .breb-collections-heading {
        margin-bottom: 25px;
        padding: 0 5px;
    }

    .breb-collections-heading h2 {
        font-size: 28px;
        letter-spacing: -.9px;
    }

    .breb-collections-heading p {
        font-size: 12px;
    }

    .breb-collections-panel {
        padding: 21px 18px 17px;
        border-radius: 13px;
    }

    .breb-collections-top {
        align-items: flex-start;
    }

    .breb-collections-status {
        padding: 7px 9px;
        font-size: 9px;
    }

    .breb-collections-summary {
        padding: 23px 0 19px;
    }

    .breb-collections-total {
        font-size: clamp(27px, 8vw, 36px);
        letter-spacing: -1px;
    }

    .breb-collections-wallet {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        font-size: 17px;
    }

    .breb-collections-payment strong {
        font-size: 11px;
    }

    .breb-collections-amount {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .breb-collections-status > span,
    .breb-collections-notification {
        animation: none;
    }

    .breb-collections-track > span {
        transition: none;
    }
}


/* BRE-B: AJUSTE MÓVIL CORREGIDO */
@media (max-width: 650px) {
    .breb-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .breb-network {
        width: 100%;
        min-width: 0;
        min-height: 370px;
        transform: none;
        margin: 0;
        overflow: hidden;
    }

    .breb-network .breb-users {
        left: 0;
        top: 70px;
    }

    .breb-network .breb-user {
        width: 125px;
    }

    .breb-network .breb-big-core {
        left: 50%;
        top: 167px;
        width: 90px;
        height: 90px;
        transform: translate(-50%, -50%);
    }

    .breb-network .breb-flow {
        left: 125px;
        width: calc(50% - 125px);
    }

    .breb-network .breb-flow-right {
        left: calc(50% + 45px);
        right: 125px;
    }

    .breb-network .breb-company {
        right: 0;
        top: 90px;
        width: 125px;
        padding: 10px;
    }

    .breb-network .breb-company b {
        font-size: 16px;
    }

    .breb-benefits {
        grid-column: 1;
        gap: 12px;
    }
}

@media (max-width: 380px) {
    .breb-network .breb-user {
        width: 110px;
    }

    .breb-network .breb-company {
        width: 110px;
    }

    .breb-network .breb-flow {
        left: 110px;
    }

    .breb-network .breb-flow-right {
        right: 110px;
    }
}

/* BRE-B: LOGO POR ENCIMA DE LAS LÍNEAS */
.breb-network .breb-big-core {
    z-index: 10 !important;
    isolation: isolate;
}

.breb-network .breb-flow,
.breb-network .breb-flow-right {
    z-index: 1 !important;
}