:root{
    --bg:#02070e;
    --bg2:#06101d;
    --panel:#091524;
    --panel2:#0d1a2d;
    --border:rgba(132,173,220,.17);
    --text:#f4f8ff;
    --muted:#9babbd;
    --blue:#087cff;
    --blue2:#00b8ff;
    --teal:#00d0c4;
    --purple:#8759ff;
    --green:#31d98b;
    --gold:#f6b819;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background:
        radial-gradient(circle at 75% 10%, rgba(0,115,255,.15), transparent 30%),
        radial-gradient(circle at 20% 35%, rgba(0,183,255,.07), transparent 30%),
        linear-gradient(180deg,#02070e 0%,#040a12 45%,#02070e 100%);
    color:var(--text);
    min-height:100vh;
}

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

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
}

.container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}

.topbar{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(16px);
    background:rgba(2,7,14,.78);
    border-bottom:1px solid var(--border);
}

.nav{
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-icon{
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    font-weight:900;
    letter-spacing:-2px;
    border-radius:14px;
    background:
        linear-gradient(135deg,#127dff,#00c2ff);
    box-shadow:
        0 10px 30px rgba(0,123,255,.28),
        inset 0 0 24px rgba(255,255,255,.18);
}

.brand div:last-child{
    display:flex;
    flex-direction:column;
    line-height:1.08;
}

.brand strong{
    font-size:18px;
}

.brand span{
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.desktop-nav{
    display:flex;
    align-items:center;
    gap:38px;
}

.desktop-nav a{
    color:#c5d0dc;
    font-size:14px;
    position:relative;
    padding:28px 0;
}

.desktop-nav a:hover,
.desktop-nav a.active{
    color:#fff;
}

.desktop-nav a.active:after{
    content:"";
    height:2px;
    left:0;
    right:0;
    bottom:18px;
    position:absolute;
    background:linear-gradient(90deg,var(--blue),var(--blue2));
    box-shadow:0 0 12px var(--blue);
}

.login-btn{
    border:1px solid rgba(156,188,224,.28);
    color:#fff;
    background:#07101d;
    border-radius:10px;
    padding:11px 17px;
}

.hero{
    padding:58px 0 26px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:28px;
}

.eyebrow{
    color:#76caff;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    letter-spacing:.15em;
    font-weight:700;
}

.pulse{
    width:8px;
    height:8px;
    background:#22b7ff;
    border-radius:50%;
    box-shadow:0 0 14px #22b7ff;
}

.hero h1{
    margin:18px 0 12px;
    font-size:clamp(45px,5.4vw,72px);
    line-height:.99;
    letter-spacing:-.048em;
}

.hero h1 span{
    background:linear-gradient(90deg,#0db4ff,#087cff,#00dcf2);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-text{
    margin:0 0 25px;
    max-width:610px;
    color:#c0cad5;
    line-height:1.6;
    font-size:18px;
}

.identify-box{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(9,21,36,.8);
    box-shadow:0 18px 50px rgba(0,0,0,.3);
}

.user-field{
    min-height:52px;
    display:flex;
    align-items:center;
    border:1px solid rgba(140,171,207,.24);
    border-radius:10px;
    background:#0b1726;
    overflow:hidden;
}

.field-icon{
    width:50px;
    text-align:center;
    font-size:22px;
    color:#9ccaff;
}

.user-field input{
    flex:1;
    width:100%;
    border:0;
    outline:none;
    color:#fff;
    background:transparent;
    padding:0 14px 0 0;
}

.user-field input::placeholder{
    color:#8090a3;
}

.primary-btn,
.secondary-btn{
    border-radius:10px;
    border:0;
    min-height:52px;
    padding:0 24px;
    font-weight:700;
}

.primary-btn{
    color:#fff;
    background:linear-gradient(180deg,#1685ff,#0666ec);
    box-shadow:
        0 8px 24px rgba(0,108,255,.26),
        inset 0 1px rgba(255,255,255,.25);
}

.primary-btn:hover{
    filter:brightness(1.08);
}

.secondary-btn{
    color:#52e9ef;
    background:#07121e;
    border:1px solid #0ecad4;
}

.secure-note{
    margin:11px 0 0;
    color:#8e9eaf;
    font-size:13px;
    display:flex;
    gap:8px;
    align-items:center;
}

.secure-note span{
    color:#67d9ff;
}

.hero-visual{
    height:420px;
    position:relative;
    display:grid;
    place-items:center;
}

.cloud{
    position:relative;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
}

.cloud-shape{
    width:245px;
    height:135px;
    position:absolute;
    top:55px;
    border:3px solid #22b9ff;
    border-radius:75px;
    background:
        radial-gradient(circle at 50% 75%, rgba(0,139,255,.42), rgba(3,31,65,.8));
    box-shadow:
        0 0 26px rgba(0,145,255,.7),
        inset 0 0 35px rgba(0,153,255,.22);
}

.cloud-shape:before,
.cloud-shape:after{
    content:"";
    position:absolute;
    background:#082954;
    border:3px solid #22b9ff;
    border-bottom:0;
}

.cloud-shape:before{
    width:92px;
    height:92px;
    border-radius:50%;
    top:-52px;
    left:45px;
}

.cloud-shape:after{
    width:75px;
    height:75px;
    border-radius:50%;
    top:-28px;
    right:33px;
}

.check{
    z-index:3;
    position:absolute;
    font-size:78px;
    left:82px;
    top:12px;
    color:#37eaff;
    text-shadow:0 0 24px #00aaff;
}

.platform{
    width:400px;
    height:140px;
    position:absolute;
    bottom:55px;
    display:grid;
    place-items:center;
    transform:perspective(600px) rotateX(58deg);
}

.ring{
    position:absolute;
    border:2px solid #087cff;
    border-radius:50%;
    box-shadow:0 0 22px rgba(0,135,255,.75);
}

.ring-1{
    width:390px;
    height:120px;
}

.ring-2{
    width:300px;
    height:88px;
}

.ring-3{
    width:200px;
    height:56px;
}

.center-light{
    width:90px;
    height:30px;
    border-radius:50%;
    background:#1ee4ff;
    box-shadow:0 0 60px 28px rgba(0,177,255,.9);
}

.data-lines{
    position:absolute;
    top:190px;
    display:flex;
    gap:14px;
}

.data-lines i{
    display:block;
    width:3px;
    height:100px;
    background:linear-gradient(#25e7ff,transparent);
    box-shadow:0 0 12px #00c8ff;
}

.account-types{
    padding:7px 0 28px;
}

.cards.three{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.info-card{
    min-height:112px;
    padding:18px;
    border-radius:14px;
    border:1px solid var(--border);
    background:
        linear-gradient(145deg,rgba(14,31,52,.95),rgba(7,17,29,.92));
    display:flex;
    gap:15px;
}

.icon-circle{
    min-width:54px;
    height:54px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:27px;
    box-shadow:inset 0 0 22px rgba(255,255,255,.08);
}

.blue .icon-circle{
    background:rgba(0,129,255,.18);
    color:#49bdff;
    border:1px solid rgba(30,151,255,.45);
}

.teal .icon-circle{
    background:rgba(0,208,196,.15);
    color:#58fff4;
    border:1px solid rgba(0,208,196,.38);
}

.purple .icon-circle{
    background:rgba(135,89,255,.18);
    color:#c09eff;
    border:1px solid rgba(135,89,255,.4);
}

.info-card h3{
    margin:3px 0 6px;
    font-size:16px;
}

.info-card p{
    margin:0;
    color:#9dabba;
    line-height:1.45;
    font-size:13px;
}

.how{
    padding:6px 0 40px;
}

.section-title{
    margin:0 0 25px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
}

.section-title span{
    height:1px;
    background:linear-gradient(90deg,transparent,var(--border));
}

.section-title span:last-child{
    background:linear-gradient(90deg,var(--border),transparent);
}

.section-title h2{
    margin:0;
    font-size:20px;
}

.steps{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    gap:16px;
    align-items:center;
}

.step{
    position:relative;
}

.step-number{
    position:absolute;
    top:-5px;
    left:-1px;
    width:28px;
    height:28px;
    border-radius:8px;
    display:grid;
    place-items:center;
    font-size:13px;
    background:#06346f;
    color:#6fc9ff;
    border:1px solid #0e6fd1;
}

.teal-number{
    background:#083a3a;
    border-color:#0bbba9;
    color:#6cfff2;
}

.purple-number{
    background:#30205d;
    border-color:#6846c9;
    color:#bea8ff;
}

.step-icon{
    margin-left:31px;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid var(--border);
    background:#0b1726;
    font-size:21px;
}

.step h3{
    font-size:14px;
    margin:12px 0 5px;
}

.step p{
    margin:0;
    color:#8291a3;
    font-size:12px;
    line-height:1.45;
}

.step-arrow{
    color:#49627e;
    font-size:23px;
}

.levels-section{
    padding-bottom:28px;
}

.levels-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:16px;
}

.levels-main{
    border:1px solid var(--border);
    border-radius:16px;
    background:
        linear-gradient(145deg,rgba(10,25,43,.96),rgba(5,13,23,.96));
    padding:22px;
}

.levels-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:17px;
}

.levels-heading h2{
    margin:0 0 6px;
    font-size:20px;
}

.levels-heading p{
    margin:0;
    max-width:560px;
    color:#8fa0b2;
    font-size:13px;
    line-height:1.5;
}

.auto-badge{
    border:1px solid rgba(0,124,255,.28);
    background:rgba(0,124,255,.08);
    color:#77c4ff;
    padding:9px 12px;
    border-radius:9px;
    font-size:12px;
    white-space:nowrap;
}

.levels{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.level{
    min-height:160px;
    border-radius:14px;
    border:1px solid var(--border);
    background:#091522;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:.2s ease;
}

.level:hover{
    transform:translateY(-3px);
}

.shield{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    margin-bottom:7px;
    font-size:25px;
    clip-path:polygon(50% 0,95% 18%,82% 80%,50% 100%,18% 80%,5% 18%);
    background:rgba(255,255,255,.1);
}

.level span{
    font-size:10px;
    letter-spacing:.18em;
    color:#7f8b9b;
}

.level h3{
    margin:4px 0;
    font-size:20px;
}

.level p{
    margin:0;
    font-size:12px;
    color:#93a0af;
}

.copper{
    border-color:rgba(202,115,56,.36);
}

.copper .shield,
.copper h3{
    color:#e69355;
}

.silver{
    border-color:rgba(175,195,223,.27);
}

.silver .shield,
.silver h3{
    color:#c3d2e5;
}

.gold{
    border-color:rgba(255,196,42,.42);
}

.gold .shield,
.gold h3{
    color:#ffc52d;
}

.platinum .shield,
.platinum h3{
    color:#85bcff;
}

.active-level{
    background:
        radial-gradient(circle at top,rgba(255,182,0,.13),transparent 55%),
        #0a1420;
    box-shadow:
        0 0 0 1px rgba(255,199,42,.44),
        0 0 30px rgba(255,173,0,.1);
}

.current-level{
    position:absolute;
    top:-9px;
    padding:4px 10px;
    border-radius:8px;
    background:#775000;
    border:1px solid #dca900;
    color:#ffdd65;
    font-size:9px;
    font-weight:800;
}

.upgrade-text{
    margin-top:14px;
    text-align:center;
    color:#5be3e8;
    font-size:12px;
}

.account-preview{
    border:1px solid var(--border);
    border-radius:16px;
    background:
        linear-gradient(180deg,#0b192b,#07111e);
    padding:22px;
}

.account-header{
    display:flex;
    gap:6px;
    align-items:baseline;
    font-size:20px;
}

.account-header strong{
    color:#2abaff;
}

.status-pill{
    display:inline-flex;
    margin-top:12px;
    color:#75f5c0;
    background:rgba(23,174,114,.12);
    border:1px solid rgba(42,224,147,.25);
    border-radius:8px;
    padding:6px 10px;
    font-size:12px;
}

.account-data{
    margin-top:22px;
    display:flex;
    flex-direction:column;
    gap:19px;
}

.account-data div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.account-data span{
    color:#7f91a6;
    font-size:11px;
}

.account-data strong{
    font-size:14px;
}

.account-data b{
    color:#f8bf2e;
}

.progress{
    width:100%;
    height:6px;
    background:#101c2b;
    border-radius:10px;
    overflow:hidden;
    margin-top:7px;
}

.progress div{
    height:100%;
    background:linear-gradient(90deg,#eca900,#ffce36);
    box-shadow:0 0 12px #f8b400;
}

.renew-btn{
    width:100%;
    height:50px;
    margin-top:23px;
    border:0;
    border-radius:9px;
    color:#fff;
    font-weight:700;
    background:linear-gradient(180deg,#1383ff,#0868ed);
    box-shadow:0 8px 24px rgba(0,102,255,.22);
}

.payment-note{
    color:#8192a5;
    font-size:11px;
    text-align:center;
    margin-top:14px;
}

.trust{
    padding-bottom:35px;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    border:1px solid var(--border);
    background:var(--border);
    border-radius:16px;
    overflow:hidden;
}

.trust-item{
    min-height:105px;
    background:#07121f;
    padding:20px;
    display:flex;
    align-items:center;
    gap:13px;
}

.trust-icon{
    min-width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    border:1px solid rgba(0,126,255,.4);
    background:rgba(0,126,255,.08);
    color:#31adff;
    font-size:20px;
}

.teal-icon{
    border-color:rgba(0,220,204,.35);
    color:#45e7da;
}

.purple-icon{
    border-color:rgba(135,89,255,.4);
    color:#ab8bff;
}

.trust-item h3{
    margin:0 0 5px;
    font-size:14px;
}

.trust-item p{
    margin:0;
    color:#7f8fa2;
    font-size:11px;
    line-height:1.4;
}

footer{
    border-top:1px solid var(--border);
    padding:24px 0;
    background:#02070e;
}

.footer-content{
    display:flex;
    justify-content:space-between;
    color:#718196;
    font-size:12px;
}

.footer-content div:first-child{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.footer-content strong{
    color:#cbd4df;
}

.registration-modal{
    position:fixed;
    z-index:100;
    inset:0;
    display:grid;
    place-items:center;
    background:rgba(0,4,10,.78);
    backdrop-filter:blur(12px);
    padding:20px;
}

.registration-modal.hidden{
    display:none;
}

.modal-card{
    width:min(430px,100%);
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px;
    background:#091522;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    position:relative;
}

.modal-close{
    position:absolute;
    top:13px;
    right:15px;
    width:35px;
    height:35px;
    color:#fff;
    background:#101c2a;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:22px;
}

.modal-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:rgba(0,124,255,.12);
    border:1px solid rgba(0,124,255,.35);
    color:#4db6ff;
    font-size:30px;
}

.modal-card h2{
    margin:18px 0 7px;
}

.modal-card p{
    margin:0 0 20px;
    color:#8e9eaf;
}

.modal-card input{
    width:100%;
    height:52px;
    margin-bottom:10px;
    border-radius:9px;
    padding:0 14px;
    color:#fff;
    border:1px solid var(--border);
    outline:none;
    background:#07111e;
}

.primary-btn.full{
    width:100%;
    margin-top:5px;
}


@media (max-width: 950px){

    .desktop-nav,
    .login-btn{
        display:none;
    }

    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding-top:38px;
    }

    .hero-visual{
        display:none;
    }

    .cards.three{
        grid-template-columns:1fr;
    }

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

    .step-arrow{
        display:none;
    }

    .levels-layout{
        grid-template-columns:1fr;
    }

    .trust-grid{
        grid-template-columns:1fr 1fr;
    }
}


@media (max-width: 650px){

    .container{
        width:min(100% - 26px,1180px);
    }

    .nav{
        height:68px;
    }

    .brand-icon{
        width:42px;
        height:42px;
        font-size:14px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero-text{
        font-size:15px;
    }

    .identify-box{
        grid-template-columns:1fr;
    }

    .primary-btn,
    .secondary-btn{
        width:100%;
    }

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

    .levels-heading{
        flex-direction:column;
    }

    .levels{
        grid-template-columns:1fr 1fr;
    }

    .trust-grid{
        grid-template-columns:1fr;
    }

    .footer-content{
        gap:15px;
        flex-direction:column;
    }
}


/* =========================================================
   P2P - PORTADA SIMPLE CLIENTES
   ========================================================= */

.simple-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 50% -10%,rgba(0,121,255,.18),transparent 35%),
        radial-gradient(circle at 85% 35%,rgba(0,205,220,.07),transparent 27%),
        linear-gradient(180deg,#02070e,#040b14 55%,#02070d);
}

.simple-header{
    border-bottom:1px solid rgba(118,160,210,.13);
    background:rgba(2,7,14,.82);
    backdrop-filter:blur(18px);
    position:sticky;
    top:0;
    z-index:40;
}

.simple-nav{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.simple-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.simple-brand-logo{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    font-weight:900;
    font-size:13px;
    background:linear-gradient(135deg,#0a7cff,#00c8ed);
    box-shadow:0 10px 28px rgba(0,122,255,.27);
}

.simple-brand div:last-child{
    display:flex;
    flex-direction:column;
}

.simple-brand strong{
    font-size:18px;
}

.simple-brand span{
    color:#74869a;
    font-size:10px;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.help-link{
    color:#a5b6c9;
    font-size:13px;
    border:1px solid rgba(135,171,211,.18);
    padding:10px 14px;
    border-radius:10px;
}

.simple-hero{
    padding:75px 0 42px;
}

.simple-container{
    max-width:1050px;
}

.simple-heading{
    text-align:center;
    max-width:720px;
    margin:0 auto 39px;
}

.simple-kicker{
    display:inline-block;
    color:#4ac3ff;
    letter-spacing:.18em;
    font-size:11px;
    font-weight:800;
}

.simple-heading h1{
    margin:13px 0 12px;
    font-size:clamp(42px,5vw,66px);
    line-height:1.02;
    letter-spacing:-.045em;
}

.simple-heading h1 span{
    display:block;
    background:linear-gradient(90deg,#118aff,#00d2e8);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.simple-heading p{
    margin:0;
    color:#9aaabc;
    font-size:17px;
    line-height:1.6;
}

.action-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:18px;
}

.main-action-card{
    border:1px solid rgba(126,168,216,.17);
    background:
        linear-gradient(145deg,rgba(12,29,50,.97),rgba(5,14,25,.98));
    border-radius:22px;
    padding:31px;
    position:relative;
    overflow:hidden;
    box-shadow:0 25px 65px rgba(0,0,0,.24);
}

.main-action-card:before{
    content:"";
    width:220px;
    height:220px;
    position:absolute;
    border-radius:50%;
    top:-105px;
    right:-80px;
    background:rgba(0,124,255,.07);
    filter:blur(2px);
}

.action-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:17px;
    background:rgba(0,128,255,.12);
    border:1px solid rgba(0,145,255,.32);
    color:#43beff;
    font-size:30px;
    margin-bottom:20px;
}

.new-icon{
    color:#55f3e9;
    border-color:rgba(0,220,208,.32);
    background:rgba(0,205,195,.1);
}

.action-label{
    color:#61c8ff;
    letter-spacing:.14em;
    font-size:10px;
    font-weight:900;
}

.main-action-card h2{
    font-size:30px;
    margin:8px 0 9px;
}

.main-action-card p{
    color:#899bae;
    line-height:1.55;
    font-size:14px;
    max-width:520px;
}

.simple-input-wrap{
    height:60px;
    display:flex;
    align-items:center;
    border:1px solid rgba(117,161,211,.24);
    border-radius:12px;
    background:#071421;
    margin:23px 0 11px;
    transition:.2s;
}

.simple-input-wrap.input-error{
    border-color:#ff4d6c;
    box-shadow:0 0 0 3px rgba(255,55,91,.08);
}

.simple-input-wrap span{
    width:55px;
    text-align:center;
    color:#4ab9ff;
    font-size:21px;
}

.simple-input-wrap input{
    flex:1;
    min-width:0;
    background:none;
    border:0;
    outline:none;
    color:#fff;
    padding-right:15px;
}

.simple-input-wrap input::placeholder{
    color:#64788e;
}

.big-action-btn{
    width:100%;
    min-height:58px;
    border:0;
    border-radius:12px;
    color:white;
    font-weight:800;
    letter-spacing:.01em;
    background:linear-gradient(180deg,#168bff,#0968ed);
    box-shadow:
        0 11px 25px rgba(0,107,255,.23),
        inset 0 1px rgba(255,255,255,.22);
}

.big-action-btn span{
    margin-left:8px;
}

.big-action-btn:hover{
    filter:brightness(1.08);
}

.secondary-action{
    background:linear-gradient(180deg,#0cbab4,#087b8f);
    box-shadow:0 11px 25px rgba(0,191,185,.15);
}

.small-safe{
    text-align:center;
    color:#66798e;
    margin-top:13px;
    font-size:11px;
}

.new-user-visual{
    display:flex;
    align-items:center;
    margin:31px 0 8px;
}

.new-user-visual div,
.signup-progress div{
    min-width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid rgba(76,193,255,.36);
    background:#0a2339;
    color:#5bc8ff;
    font-size:12px;
    font-weight:800;
}

.new-user-visual span,
.signup-progress span{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,#167eff,#0ac9d0);
    opacity:.48;
}

.new-user-steps{
    display:flex;
    justify-content:space-between;
    color:#718499;
    font-size:10px;
    margin:0 0 31px;
}

.trust-row{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid rgba(126,168,216,.13);
    border-radius:17px;
    overflow:hidden;
    background:rgba(8,20,34,.64);
}

.trust-row > div{
    min-height:95px;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:11px;
    align-content:center;
    padding:18px;
    border-right:1px solid rgba(126,168,216,.11);
}

.trust-row > div:last-child{
    border-right:0;
}

.trust-row > div > span{
    grid-row:1 / 3;
    width:37px;
    height:37px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:#0b2239;
    color:#41baff;
}

.trust-row strong{
    font-size:13px;
}

.trust-row small{
    color:#718397;
    font-size:10px;
}

.simple-help{
    padding:15px 0 55px;
}

.help-card{
    max-width:1050px;
    margin:auto;
    border:1px solid rgba(126,168,216,.14);
    border-radius:20px;
    background:#07121f;
    padding:28px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:35px;
    align-items:center;
}

.help-card h2{
    margin:8px 0;
    font-size:24px;
}

.help-card p{
    margin:0;
    max-width:620px;
    color:#8294a7;
    line-height:1.55;
    font-size:13px;
}

.help-checks{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.help-checks span{
    padding:10px 12px;
    color:#9eb3c8;
    border:1px solid rgba(126,168,216,.15);
    border-radius:9px;
    font-size:11px;
    white-space:nowrap;
}

.simple-footer{
    border-top:1px solid rgba(126,168,216,.12);
}

.simple-footer .container{
    min-height:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#63758a;
    font-size:11px;
}

.flow-modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(0,4,9,.79);
    backdrop-filter:blur(14px);
}

.flow-modal.hidden{
    display:none;
}

.flow-card{
    width:min(520px,100%);
    max-height:92vh;
    overflow:auto;
    border:1px solid rgba(126,168,216,.2);
    border-radius:22px;
    padding:31px;
    background:
        radial-gradient(circle at top right,rgba(0,125,255,.1),transparent 40%),
        #081522;
    box-shadow:0 32px 90px rgba(0,0,0,.5);
    position:relative;
}

.flow-close{
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border:1px solid rgba(126,168,216,.14);
    background:#0a1827;
    border-radius:10px;
    color:white;
    font-size:23px;
}

.flow-icon{
    width:55px;
    height:55px;
    margin-bottom:16px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#4cc2ff;
    border:1px solid rgba(0,135,255,.34);
    background:rgba(0,130,255,.1);
    font-size:29px;
}

.flow-card h2{
    font-size:28px;
    margin:8px 0;
}

.flow-card > p{
    color:#899aae;
    line-height:1.5;
    font-size:13px;
}

.demo-result{
    margin-top:25px;
}

.demo-result.hidden{
    display:none;
}

.customer-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(126,168,216,.13);
    padding-bottom:17px;
}

.customer-top div{
    display:flex;
    flex-direction:column;
}

.customer-top small{
    color:#708196;
}

.customer-top strong{
    font-size:19px;
    color:#46bcff;
}

.active-pill{
    padding:7px 10px;
    border-radius:8px;
    color:#66ebb1;
    background:rgba(40,205,133,.11);
    border:1px solid rgba(40,205,133,.21);
    font-size:11px;
}

.customer-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin:17px 0;
    gap:10px;
}

.customer-summary > div{
    border:1px solid rgba(126,168,216,.12);
    background:#07121e;
    border-radius:10px;
    padding:13px;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.customer-summary span{
    color:#728499;
    font-size:10px;
}

.customer-summary strong{
    font-size:13px;
}

.demo-result h3{
    font-size:14px;
    margin:22px 0 10px;
}

.price-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:13px;
}

.price-options button{
    min-height:82px;
    border-radius:11px;
    border:1px solid rgba(126,168,216,.18);
    background:#071421;
    color:white;
    display:flex;
    flex-direction:column;
    gap:7px;
    align-items:center;
    justify-content:center;
}

.price-options button:hover{
    border-color:#158dff;
    background:#0a1d31;
}

.price-options button strong{
    font-size:12px;
}

.price-options button span{
    color:#43c0ff;
    font-size:21px;
    font-weight:900;
}

.demo-warning{
    display:block;
    margin-top:12px;
    text-align:center;
    color:#5f7288;
    font-size:9px;
    line-height:1.45;
}

.signup-progress{
    display:flex;
    align-items:center;
    margin:27px 0;
}

.signup-progress .active{
    background:#0e72de;
    color:white;
}

.signup-form{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.signup-form label{
    display:flex;
    flex-direction:column;
    gap:7px;
    color:#93a5b8;
    font-size:11px;
}

.signup-form input{
    height:52px;
    border-radius:10px;
    border:1px solid rgba(126,168,216,.18);
    background:#07121e;
    color:#fff;
    outline:none;
    padding:0 13px;
}


@media(max-width:780px){

    .simple-hero{
        padding-top:45px;
    }

    .action-grid{
        grid-template-columns:1fr;
    }

    .simple-heading{
        margin-bottom:28px;
    }

    .simple-heading h1{
        font-size:43px;
    }

    .main-action-card{
        padding:23px;
    }

    .trust-row{
        grid-template-columns:1fr 1fr;
    }

    .help-card{
        grid-template-columns:1fr;
    }

    .help-checks{
        grid-template-columns:1fr 1fr;
    }

}


@media(max-width:520px){

    .simple-nav{
        min-height:65px;
    }

    .help-link{
        font-size:10px;
        padding:8px 9px;
    }

    .simple-brand-logo{
        width:40px;
        height:40px;
    }

    .simple-heading h1{
        font-size:38px;
    }

    .simple-heading p{
        font-size:14px;
    }

    .trust-row{
        grid-template-columns:1fr;
    }

    .trust-row > div{
        border-right:0;
        border-bottom:1px solid rgba(126,168,216,.11);
    }

    .trust-row > div:last-child{
        border-bottom:0;
    }

    .help-checks{
        grid-template-columns:1fr;
    }

    .price-options{
        grid-template-columns:1fr;
    }

    .customer-summary{
        grid-template-columns:1fr;
    }

    .simple-footer .container{
        flex-direction:column;
        justify-content:center;
        gap:4px;
    }

}



/* =====================================================
   P2P CHECKOUT
   ===================================================== */

.checkout-page{
    min-height:100vh;
    background:
        radial-gradient(
            circle at 50% -5%,
            rgba(0,125,255,.17),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #02070e,
            #040b14 55%,
            #02070e
        );
}

.checkout-back{
    color:#8fa5bc;
    font-size:13px;
}

.checkout-main{
    padding:60px 0 75px;
}

.checkout-container{
    max-width:960px;
}

.checkout-heading{
    max-width:650px;
    margin:0 auto 35px;
    text-align:center;
}

.checkout-heading h1{
    margin:10px 0;
    font-size:clamp(38px,5vw,56px);
    letter-spacing:-.04em;
}

.checkout-heading p{
    color:#8899ad;
    line-height:1.6;
    margin:0;
}

.checkout-layout{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.checkout-card{
    border:1px solid rgba(126,168,216,.16);
    border-radius:19px;
    padding:26px;
    background:
        linear-gradient(
            145deg,
            rgba(11,27,46,.97),
            rgba(5,14,24,.98)
        );
}

.checkout-card-title{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:22px;
}

.checkout-card-title small{
    color:#5981a7;
    font-size:9px;
    letter-spacing:.15em;
    font-weight:800;
}

.checkout-card-title h2{
    margin:2px 0 0;
    font-size:21px;
}

.checkout-number{
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#5bc5ff;
    background:rgba(0,128,255,.1);
    border:1px solid rgba(0,141,255,.3);
    font-weight:900;
}

.important-number{
    color:#ffce64;
    background:rgba(255,167,0,.1);
    border-color:rgba(255,178,0,.3);
}

.checkout-summary{
    display:flex;
    flex-direction:column;
    gap:1px;
}

.summary-line{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(126,168,216,.1);
}

.summary-line span,
.summary-users > span{
    color:#75889c;
    font-size:12px;
}

.summary-line strong{
    font-size:14px;
}

.summary-users{
    padding:16px 0;
}

.checkout-users{
    margin-top:10px;
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );
    gap:8px;
}

.checkout-user{
    padding:11px;
    display:flex;
    align-items:center;
    gap:9px;
    border-radius:10px;
    background:#07131f;
    border:1px solid rgba(126,168,216,.11);
}

.checkout-user-icon{
    width:31px;
    height:31px;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#43beff;
    background:#0b2238;
}

.checkout-user strong{
    font-size:12px;
}

.checkout-total{
    margin-top:8px;
    padding:17px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:
        linear-gradient(
            90deg,
            rgba(0,124,255,.10),
            rgba(0,204,216,.06)
        );
    border:1px solid rgba(0,135,255,.17);
}

.checkout-total span{
    color:#9fb1c4;
}

.checkout-total strong{
    font-size:29px;
    color:#4cc6ff;
}

.stripe-box{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:12px;
    background:#07131f;
    border:1px solid rgba(126,168,216,.12);
}

.stripe-logo{
    min-width:48px;
    height:48px;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-size:23px;
    font-weight:900;
    color:white;
    background:
        linear-gradient(
            135deg,
            #635bff,
            #7d73ff
        );
}

.stripe-box > div:last-child{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.stripe-box span{
    color:#74879b;
    font-size:11px;
}

.stripe-pay-button{
    min-height:59px;
    margin:13px 0 18px;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    color:white;
    font-weight:900;
    background:
        linear-gradient(
            180deg,
            #675cff,
            #5148e5
        );
    box-shadow:
        0 11px 28px
        rgba(97,87,255,.20);
}

.stripe-pay-button:hover{
    filter:brightness(1.08);
}

.stripe-instructions{
    display:grid;
    grid-template-columns:
        repeat(4,1fr);
    gap:8px;
}

.stripe-instructions > div{
    min-height:75px;
    padding:11px;
    border-radius:10px;
    background:#07121e;
    border:1px solid rgba(126,168,216,.09);
    display:flex;
    flex-direction:column;
    gap:7px;
}

.stripe-instructions b{
    width:24px;
    height:24px;
    border-radius:7px;
    display:grid;
    place-items:center;
    background:#0a2640;
    color:#4fc4ff;
    font-size:10px;
}

.stripe-instructions span{
    color:#8193a7;
    font-size:10px;
    line-height:1.4;
}

.mandatory-warning{
    display:flex;
    gap:13px;
    padding:16px;
    margin-bottom:16px;
    border-radius:12px;
    background:rgba(255,160,0,.075);
    border:1px solid rgba(255,172,0,.22);
}

.warning-icon{
    min-width:39px;
    height:39px;
    border-radius:11px;
    display:grid;
    place-items:center;
    color:#ffce63;
    font-weight:900;
    background:rgba(255,170,0,.13);
}

.mandatory-warning strong{
    color:#ffd471;
    font-size:13px;
}

.mandatory-warning p{
    margin:4px 0 0;
    color:#9c8c70;
    font-size:11px;
    line-height:1.5;
}

.upload-zone{
    min-height:190px;
    border:2px dashed rgba(61,181,255,.30);
    border-radius:15px;
    background:rgba(0,121,255,.045);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:7px;
    cursor:pointer;
    transition:.2s;
}

.upload-zone:hover{
    border-color:#27b6ff;
    background:rgba(0,125,255,.07);
}

.upload-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#50c5ff;
    font-size:25px;
    background:#0b2238;
}

.upload-zone strong{
    margin-top:4px;
    font-size:14px;
}

.upload-zone > span{
    color:#718499;
    font-size:10px;
}

.upload-button{
    margin-top:8px;
    padding:9px 14px;
    border-radius:8px;
    color:#68caff;
    background:#0b233a;
    border:1px solid rgba(0,134,255,.27);
    font-size:10px;
    font-weight:800;
}

.proof-preview{
    margin-top:14px;
    display:grid;
    grid-template-columns:100px 1fr;
    gap:14px;
    padding:13px;
    border-radius:12px;
    border:1px solid rgba(38,211,145,.20);
    background:rgba(36,204,137,.055);
}

.proof-preview.hidden{
    display:none;
}

.proof-preview img{
    width:100px;
    height:80px;
    border-radius:9px;
    object-fit:cover;
    background:#07121e;
}

.preview-data{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:4px;
}

.preview-data strong{
    font-size:12px;
}

.preview-data span{
    color:#718499;
    font-size:10px;
}

.preview-data button{
    margin-top:5px;
    border:0;
    padding:0;
    color:#ff7386;
    background:none;
    font-size:10px;
}

.send-lock-message{
    padding:14px;
    border-radius:10px;
    text-align:center;
    background:#08131f;
    border:1px solid rgba(126,168,216,.11);
    color:#778a9f;
    font-size:11px;
    margin-bottom:11px;
}

.send-lock-message.hidden{
    display:none;
}

.final-send-button{
    width:100%;
    min-height:61px;
    border:0;
    border-radius:12px;
    color:white;
    font-weight:900;
    background:
        linear-gradient(
            180deg,
            #1387ff,
            #0865e9
        );
    box-shadow:
        0 11px 26px
        rgba(0,105,255,.22);
}

.final-send-button:disabled{
    cursor:not-allowed;
    opacity:.36;
    box-shadow:none;
}

.send-status{
    margin-top:13px;
    padding:15px;
    border-radius:11px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.send-status.hidden{
    display:none;
}

.send-status.sending{
    display:block;
    color:#77bfff;
    background:rgba(0,124,255,.07);
    border:1px solid rgba(0,124,255,.16);
}

.send-status.success{
    color:#6eeab3;
    background:rgba(35,205,135,.07);
    border:1px solid rgba(35,205,135,.20);
}

.send-status.success strong{
    font-size:14px;
}

.send-status.success span{
    color:#c0d6ca;
    font-size:11px;
}

.send-status.success small{
    color:#79978a;
}

.send-status.error{
    color:#ff8190;
    background:rgba(255,60,80,.07);
    border:1px solid rgba(255,60,80,.18);
}


@media(max-width:700px){

    .checkout-main{
        padding-top:38px;
    }

    .checkout-card{
        padding:20px;
    }

    .stripe-instructions{
        grid-template-columns:1fr 1fr;
    }

    .checkout-total strong{
        font-size:24px;
    }

}


@media(max-width:430px){

    .stripe-instructions{
        grid-template-columns:1fr;
    }

    .proof-preview{
        grid-template-columns:80px 1fr;
    }

    .proof-preview img{
        width:80px;
        height:70px;
    }

}


/* P2P STEPPER MOBILE FIRST */

.mobile-stepper-wrap{
    max-width:960px;
    margin:0 auto 22px;
    padding:0 20px;
}

.mobile-stepper{
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

.mobile-step{
    min-width:66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:#60748b;
}

.mobile-step span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#0a1725;
    border:1px solid rgba(124,168,217,.20);
    font-size:11px;
    font-weight:900;
}

.mobile-step small{
    font-size:9px;
    text-align:center;
}

.mobile-step.done span{
    background:rgba(30,205,142,.13);
    border-color:rgba(41,224,151,.35);
    color:#63ebb4;
}

.mobile-step.active{
    color:#83ceff;
}

.mobile-step.active span{
    background:linear-gradient(180deg,#148aff,#086ae9);
    border-color:#208fff;
    color:#fff;
    box-shadow:0 0 20px rgba(0,125,255,.25);
}

.mobile-step-line{
    flex:1;
    max-width:95px;
    height:2px;
    margin-top:16px;
    background:rgba(117,157,202,.16);
}

.mobile-step-line.done{
    background:linear-gradient(
        90deg,
        #22d392,
        #148bff
    );
}

.mobile-guide-message{
    margin-top:14px;
    padding:14px 16px;
    border-radius:13px;
    background:rgba(8,23,39,.94);
    border:1px solid rgba(126,168,216,.14);
    display:flex;
    flex-direction:column;
    gap:4px;
}

.mobile-guide-message strong{
    color:#dcecff;
    font-size:13px;
}

.mobile-guide-message span{
    color:#8396aa;
    font-size:11px;
    line-height:1.45;
}


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

@media(max-width:600px){

    body{
        overflow-x:hidden;
    }

    .checkout-main{
        padding-top:22px;
    }

    .mobile-stepper-wrap{
        position:sticky;
        top:65px;
        z-index:30;

        padding:
            10px 13px
            15px;

        background:
            linear-gradient(
                180deg,
                rgba(2,7,14,.99) 82%,
                rgba(2,7,14,0)
            );
    }

    .mobile-step{
        min-width:51px;
    }

    .mobile-step span{
        width:30px;
        height:30px;
    }

    .mobile-step small{
        font-size:8px;
    }

    .mobile-step-line{
        margin-top:14px;
    }

    .mobile-guide-message{
        margin-top:11px;
    }

    .mobile-guide-message strong{
        font-size:12px;
    }

    .mobile-guide-message span{
        font-size:10px;
    }

    .checkout-card{
        padding:18px;
        border-radius:16px;
    }

    .stripe-pay-button{
        min-height:64px;
        font-size:14px;
    }

    .upload-zone{
        min-height:185px;
        text-align:center;
        padding:20px 15px;
    }

    .final-send-button{
        min-height:64px;
        font-size:14px;
    }

    button,
    a,
    input,
    label{
        touch-action:manipulation;
    }

}


/* P2P RECORDATORIO STRIPE */

.stripe-return-warning{
    margin-bottom:13px;
    padding:14px 15px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    gap:5px;

    background:rgba(255,171,0,.075);
    border:1px solid rgba(255,181,0,.23);
}

.stripe-return-warning strong{
    color:#ffd36a;
    font-size:13px;
}

.stripe-return-warning span{
    color:#a7936c;
    font-size:11px;
    line-height:1.5;
}


.stripe-return-reminder{
    margin:-4px 0 18px;
    padding:14px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    border-radius:12px;

    background:rgba(0,132,255,.065);
    border:1px solid rgba(0,145,255,.18);
}

.stripe-return-reminder > span{
    min-width:38px;
    height:38px;
    display:grid;
    place-items:center;

    border-radius:10px;

    color:#55c6ff;
    background:#0b2238;

    font-size:20px;
}

.stripe-return-reminder > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.stripe-return-reminder strong{
    color:#cfeeff;
    font-size:12px;
}

.stripe-return-reminder small{
    color:#7f94aa;
    line-height:1.45;
    font-size:10px;
}


@media(max-width:600px){

    .stripe-return-warning{
        padding:13px;
    }

    .stripe-return-warning strong{
        font-size:12px;
    }

    .stripe-return-warning span{
        font-size:10px;
    }

    .stripe-return-reminder{
        padding:13px;
    }

}


/* P2P GUIA PAGO Y RESUMEN */

.operation-mini-summary{
    margin:0 0 16px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.operation-mini-summary > div{
    min-height:72px;
    padding:13px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;

    background:
        linear-gradient(
            145deg,
            rgba(11,27,46,.96),
            rgba(6,15,25,.96)
        );

    border:1px solid rgba(126,168,216,.13);
}

.operation-mini-summary small{
    color:#71859a;
    font-size:9px;
}

.operation-mini-summary strong{
    color:#dcecff;
    font-size:13px;
}

.operation-mini-summary > div:last-child strong{
    color:#4ac7ff;
    font-size:18px;
}


.payment-confirm-box{
    margin:0 0 18px;
    padding:17px;
    border-radius:14px;

    display:flex;
    align-items:flex-start;
    gap:13px;

    background:
        linear-gradient(
            145deg,
            rgba(0,140,255,.08),
            rgba(0,210,198,.045)
        );

    border:1px solid rgba(53,177,255,.18);
}

.payment-confirm-icon{
    min-width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border-radius:12px;

    color:#64e8bb;

    background:
        rgba(36,204,140,.10);

    border:
        1px solid
        rgba(36,204,140,.23);

    font-weight:900;
}

.payment-confirm-content{
    flex:1;
}

.payment-confirm-label{
    color:#54bfff;
    letter-spacing:.13em;
    font-size:9px;
    font-weight:900;
}

.payment-confirm-content h3{
    margin:5px 0;
    font-size:17px;
}

.payment-confirm-content p{
    margin:0;
    color:#8194a9;
    font-size:11px;
    line-height:1.5;
}

.payment-confirm-actions{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
}

.payment-done-btn,
.payment-not-done-btn{
    min-height:48px;
    border-radius:10px;
    font-weight:800;
}

.payment-done-btn{
    border:0;
    color:white;

    background:
        linear-gradient(
            180deg,
            #1387ff,
            #0868ed
        );
}

.payment-not-done-btn{
    padding:0 16px;
    color:#8fa5bb;
    background:#07131f;
    border:1px solid rgba(126,168,216,.16);
}

.payment-confirmed-message{
    margin-top:12px;
    padding:11px 12px;

    border-radius:9px;

    color:#6decb5;
    background:rgba(32,203,134,.07);

    border:
        1px solid
        rgba(32,203,134,.18);

    font-size:10px;
    line-height:1.45;
}

.payment-confirmed-message.hidden{
    display:none;
}


@media(max-width:600px){

    .operation-mini-summary{
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .operation-mini-summary > div{
        min-height:65px;
    }

    .payment-confirm-box{
        padding:14px;
    }

    .payment-confirm-icon{
        min-width:38px;
        height:38px;
    }

    .payment-confirm-content h3{
        font-size:16px;
    }

    .payment-confirm-actions{
        grid-template-columns:1fr;
    }

    .payment-done-btn,
    .payment-not-done-btn{
        width:100%;
        min-height:54px;
    }

}


/* ======================================================
   IDENTIFICACION REAL
   ====================================================== */

.identified-success{
    margin:16px 0;
    padding:13px 14px;
    border-radius:11px;
    display:flex;
    flex-direction:column;
    gap:4px;

    color:#67eab3;

    background:
        rgba(35,205,136,.065);

    border:
        1px solid
        rgba(35,205,136,.18);
}

.identified-success strong{
    font-size:12px;
}

.identified-success span{
    color:#79978b;
    font-size:10px;
    line-height:1.45;
}


.identified-group{
    margin:15px 0;
    padding:15px;
    border-radius:12px;

    background:#07131f;

    border:
        1px solid
        rgba(126,168,216,.13);
}

.identified-group.hidden{
    display:none;
}

.identified-group-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.identified-group-title span{
    color:#728499;
    font-size:10px;
}

.identified-group-title strong{
    color:#49c1ff;
    font-size:13px;
}

.identified-group-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:7px;
}

.identified-group-grid > div{
    min-height:61px;
    padding:10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;

    border-radius:9px;
    background:#0a1826;

    border:
        1px solid
        rgba(126,168,216,.09);
}

.identified-group-grid small{
    color:#6e8094;
    font-size:9px;
}

.identified-group-grid strong{
    color:#dbeaff;
    font-size:13px;
}

.group-help-text{
    margin-top:11px;
    color:#7190a7;
    font-size:10px;
    line-height:1.5;
}


@media(max-width:520px){

    .identified-group-grid{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   P2P RENOVACION PREMIUM V2
   ========================================================= */

.hidden{
    display:none !important;
}


.renew-flow-page{
    padding:45px 0 80px;
    min-height:calc(100vh - 76px);
}


.renew-flow-container{
    max-width:980px;
}


/* =========================
   PASOS
   ========================= */

.wizard-top{
    margin-bottom:20px;
}

.wizard-progress{
    display:flex;
    align-items:flex-start;
    width:100%;
    margin-bottom:15px;
}

.wizard-step{
    min-width:95px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;

    color:#5e7186;
}

.wizard-step span{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#081522;

    border:
        1px solid
        rgba(126,168,216,.18);

    font-size:11px;
    font-weight:900;
}

.wizard-step small{
    font-size:9px;
    text-align:center;
}

.wizard-step.done span{
    color:#62ebb3;

    background:
        rgba(34,207,140,.10);

    border-color:
        rgba(34,207,140,.26);
}

.wizard-step.active{
    color:#83ceff;
}

.wizard-step.active span{
    color:#fff;

    background:
        linear-gradient(
            180deg,
            #168cff,
            #0869ec
        );

    border-color:#2495ff;

    box-shadow:
        0 0 22px
        rgba(0,128,255,.23);
}

.wizard-line{
    flex:1;
    height:2px;

    margin-top:17px;

    background:
        rgba(126,168,216,.13);
}

.wizard-line.done{
    background:
        linear-gradient(
            90deg,
            #21ce8e,
            #1589ff
        );
}


.wizard-help{
    padding:15px 17px;

    display:flex;
    flex-direction:column;
    gap:4px;

    border-radius:14px;

    background:
        linear-gradient(
            90deg,
            rgba(0,124,255,.09),
            rgba(0,205,213,.045)
        );

    border:
        1px solid
        rgba(57,173,255,.16);
}

.wizard-help strong{
    color:#dceeff;
    font-size:13px;
}

.wizard-help span{
    color:#8194a9;
    font-size:11px;
    line-height:1.45;
}


/* =========================
   TARJETA PRINCIPAL
   ========================= */

.renew-card{
    padding:28px;

    border-radius:22px;

    border:
        1px solid
        rgba(126,168,216,.16);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(0,126,255,.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(11,27,46,.98),
            rgba(4,13,23,.99)
        );

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


.renew-loading{
    min-height:260px;

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

    gap:8px;

    text-align:center;
}

.renew-loading span{
    color:#74879b;
    font-size:11px;
}


.loader-circle{
    width:38px;
    height:38px;

    margin-bottom:7px;

    border-radius:50%;

    border:
        3px solid
        rgba(0,132,255,.14);

    border-top-color:#259eff;

    animation:
        p2pSpin .8s linear infinite;
}

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


/* =========================
   CUENTA
   ========================= */

.renew-user-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    padding-bottom:20px;

    border-bottom:
        1px solid
        rgba(126,168,216,.11);
}

.renew-user-header > div:first-child{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.renew-user-header span{
    color:#6f8297;
    font-size:10px;
}

.renew-user-header h1{
    margin:0;

    font-size:31px;

    letter-spacing:-.025em;

    color:#f3f8ff;
}

.renew-badge{
    padding:8px 11px;

    border-radius:9px;

    color:#63c9ff;

    background:
        rgba(0,126,255,.09);

    border:
        1px solid
        rgba(0,145,255,.21);

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

    letter-spacing:.04em;
}


.renew-summary{
    margin:17px 0 28px;

    display:grid;

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

    gap:8px;
}

.renew-summary > div{
    min-height:75px;

    padding:13px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:4px;

    border-radius:11px;

    background:#07131f;

    border:
        1px solid
        rgba(126,168,216,.10);
}

.renew-summary small{
    color:#6d8094;
    font-size:9px;
}

.renew-summary strong{
    color:#dcecff;
    font-size:13px;
}


/* =========================
   TITULOS
   ========================= */

.renew-section-title{
    margin:26px 0 15px;
}

.renew-section-title > span{
    color:#43bdff;

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

    letter-spacing:.16em;
}

.renew-section-title h2{
    margin:7px 0 6px;

    font-size:23px;

    letter-spacing:-.02em;
}

.renew-section-title p{
    margin:0;

    max-width:680px;

    color:#7d90a5;

    font-size:11px;

    line-height:1.55;
}


/* =========================
   NORMAL: CANTIDAD
   ========================= */

.normal-count-options{
    display:grid;

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

    gap:9px;
}

.count-option{
    min-height:92px;

    padding:14px;

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

    gap:5px;

    border-radius:13px;

    color:#cbd8e6;

    background:#07131f;

    border:
        1px solid
        rgba(126,168,216,.13);

    transition:.18s;
}

.count-option:hover{
    transform:translateY(-2px);

    border-color:
        rgba(48,169,255,.44);
}

.count-option.selected{
    color:#fff;

    background:
        linear-gradient(
            145deg,
            rgba(0,126,255,.16),
            rgba(0,184,210,.07)
        );

    border-color:#148dff;

    box-shadow:
        0 0 0 1px
        rgba(0,129,255,.15);
}

.count-option strong{
    font-size:14px;
}

.count-option span{
    color:#718499;
    font-size:10px;
}


/* =========================
   USUARIOS NORMALES
   ========================= */

.normal-users-box{
    margin-top:12px;

    display:grid;
    gap:9px;
}

.normal-user-input{
    display:flex;
    flex-direction:column;

    gap:7px;
}

.normal-user-input span{
    color:#8497aa;

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

.normal-user-input input{
    width:100%;
    height:55px;

    padding:0 14px;

    border-radius:11px;

    outline:none;

    color:#fff;

    background:#06111d;

    border:
        1px solid
        rgba(126,168,216,.15);
}

.normal-user-input input:focus{
    border-color:#178fff;

    box-shadow:
        0 0 0 3px
        rgba(0,126,255,.08);
}


/* =========================
   DURACIONES
   ========================= */

.duration-section{
    margin-top:28px;

    padding-top:5px;

    border-top:
        1px solid
        rgba(126,168,216,.10);
}

.duration-options{
    display:grid;

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

    gap:9px;
}

.duration-option{
    min-height:100px;

    display:flex;
    flex-direction:column;

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

    gap:7px;

    border-radius:14px;

    color:#e0ebf8;

    background:#07131f;

    border:
        1px solid
        rgba(126,168,216,.14);

    transition:.18s;
}

.duration-option:hover{
    transform:translateY(-2px);

    border-color:#168fff;
}

.duration-option.selected{
    background:
        radial-gradient(
            circle at top,
            rgba(0,130,255,.17),
            transparent 80%
        ),
        #081728;

    border-color:#168fff;

    box-shadow:
        0 0 25px
        rgba(0,124,255,.09);
}

.duration-option strong{
    font-size:17px;
}

.duration-option span{
    color:#58c6ff;

    font-size:10px;
}


/* =========================
   TOTAL
   ========================= */

.renew-total-box{
    margin:15px 0 12px;

    display:grid;

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

    gap:8px;
}

.renew-total-box > div{
    min-height:72px;

    padding:13px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:4px;

    border-radius:11px;

    background:
        rgba(0,126,255,.045);

    border:
        1px solid
        rgba(0,126,255,.11);
}

.renew-total-box span{
    color:#71859a;
    font-size:9px;
}

.renew-total-box strong{
    color:#ddecfb;
    font-size:14px;
}

.renew-total-box > div:last-child strong{
    color:#48c5ff;
    font-size:20px;
}


/* =========================
   GRUPOS
   ========================= */

.group-actions{
    margin:12px 0;

    display:flex;
    gap:8px;
}

.mini-action-btn{
    min-height:40px;

    padding:0 13px;

    border-radius:9px;

    color:#89a2b9;

    background:#07131f;

    border:
        1px solid
        rgba(126,168,216,.14);
}

.group-member-list{
    display:grid;
    gap:8px;
}

.group-member{
    padding:13px;

    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:11px;

    border-radius:12px;

    cursor:pointer;

    background:#07131f;

    border:
        1px solid
        rgba(126,168,216,.11);
}

.group-member:hover{
    border-color:
        rgba(38,166,255,.34);
}

.group-member input{
    width:20px;
    height:20px;

    accent-color:#128bff;
}

.group-member-main{
    display:flex;

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

    gap:10px;
}

.group-member-main > div:first-child{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.group-member-main strong{
    font-size:13px;
}

.group-member-main small{
    color:#718499;
    font-size:9px;
}

.member-status{
    padding:5px 8px;

    border-radius:7px;

    font-size:9px;
}

.member-status.active{
    color:#68eab2;

    background:
        rgba(36,205,138,.08);
}

.member-status.expired{
    color:#ff9c79;

    background:
        rgba(255,100,65,.08);
}

.member-expiry{
    color:#6f8296;
    font-size:9px;
}


/* =========================
   MOVIL
   ========================= */

@media(max-width:650px){

    .renew-flow-page{
        padding:18px 0 55px;
    }

    .renew-flow-container{
        width:calc(100% - 22px);
    }

    .wizard-top{
        position:sticky;

        top:65px;

        z-index:25;

        padding:9px 0 12px;

        background:
            linear-gradient(
                180deg,
                rgba(2,7,14,.99) 86%,
                transparent
            );
    }

    .wizard-step{
        min-width:58px;
    }

    .wizard-step span{
        width:30px;
        height:30px;
    }

    .wizard-step small{
        font-size:7px;
    }

    .wizard-line{
        margin-top:14px;
    }

    .wizard-help{
        padding:12px;
    }

    .renew-card{
        padding:18px;

        border-radius:17px;
    }

    .renew-user-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .renew-user-header h1{
        font-size:26px;
    }

    .renew-summary{
        grid-template-columns:1fr;
    }

    .renew-section-title h2{
        font-size:20px;
    }

    .normal-count-options{
        grid-template-columns:1fr;
    }

    .count-option{
        min-height:75px;
    }

    .duration-options{
        grid-template-columns:1fr;
    }

    .duration-option{
        min-height:78px;

        flex-direction:row;

        justify-content:space-between;

        padding:0 18px;
    }

    .duration-option strong{
        font-size:15px;
    }

    .renew-total-box{
        grid-template-columns:1fr 1fr;
    }

    .renew-total-box > div:last-child{
        grid-column:1 / -1;
    }

    .big-action-btn{
        min-height:64px;

        font-size:13px;
    }

    .group-actions{
        display:grid;

        grid-template-columns:1fr 1fr;
    }

    .group-member{
        grid-template-columns:auto 1fr;
    }

    .member-expiry{
        grid-column:2;
    }

}



/* ======================================================
   CALCULO DE NIVEL DE RENOVACION
   ====================================================== */

.level-calculation{
    margin:16px 0;
    padding:14px;

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(0,126,255,.07),
            rgba(0,205,180,.035)
        );

    border:
        1px solid
        rgba(44,163,255,.16);
}

.level-calculation.hidden{
    display:none !important;
}

.level-calculation-grid{
    display:grid;
    grid-template-columns:
        repeat(4,1fr);
    gap:7px;
}

.level-calculation-grid > div{
    min-height:65px;

    padding:10px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;

    border-radius:10px;

    background:
        rgba(3,14,25,.62);

    border:
        1px solid
        rgba(126,168,216,.09);
}

.level-calculation-grid small{
    color:#71859a;
    font-size:9px;
}

.level-calculation-grid strong{
    color:#dcecff;
    font-size:14px;
}

.level-up-message,
.level-maintain-message{
    margin-top:10px;
    padding:11px 12px;

    border-radius:9px;

    font-size:10px;
    line-height:1.5;
}

.level-up-message{
    color:#69eab4;

    background:
        rgba(30,204,136,.075);

    border:
        1px solid
        rgba(30,204,136,.16);
}

.level-maintain-message{
    color:#72c8ff;

    background:
        rgba(0,130,255,.07);

    border:
        1px solid
        rgba(0,130,255,.14);
}


@media(max-width:650px){

    .level-calculation-grid{
        grid-template-columns:
            1fr 1fr;
    }

}


/* P2P_TEXTO_MOVIL_GLOBAL_V1 */

@media(max-width:700px){

    body{
        font-size:17px !important;
    }

    h1{
        font-size:36px !important;
        line-height:1.08 !important;
    }

    h2{
        font-size:29px !important;
        line-height:1.12 !important;
    }

    h3{
        font-size:23px !important;
        line-height:1.15 !important;
    }

    h4{
        font-size:19px !important;
    }

    p,
    .subtitle,
    .description,
    .card p,
    .helper,
    .help-text,
    .muted,
    .text-muted{
        font-size:16px !important;
        line-height:1.55 !important;
    }

    label,
    .label,
    .field-label{
        font-size:15px !important;
    }

    small,
    .small,
    .helper-text,
    .meta{
        font-size:14px !important;
    }

    input,
    select,
    textarea{
        font-size:17px !important;
        min-height:56px !important;
    }

    input::placeholder,
    textarea::placeholder{
        font-size:16px !important;
    }

    button,
    .btn,
    .button,
    a.btn,
    input[type="submit"]{
        font-size:17px !important;
        min-height:58px !important;
    }

    .card-title,
    .feature-title,
    .member-name,
    .username{
        font-size:18px !important;
    }

    .badge,
    .status,
    .eyebrow,
    .kicker,
    .section-label{
        font-size:13px !important;
    }

    .step,
    .step-label,
    .progress-step{
        font-size:14px !important;
    }

    .price,
    .total,
    .amount{
        font-size:24px !important;
    }

}