/************************************************
RESET
************************************************/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    font-family:'Poppins',sans-serif;

    background:#F4F7FB;

    color:#1F2937;

    overflow-x:hidden;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

    display:block;

}

/************************************************
VARIABLES
************************************************/

:root{

    --pay-azul:#0F3057;

    --pay-azul2:#123E73;

    --pay-dorado:#D4AF37;

    --pay-gris:#F4F7FB;

    --pay-texto:#4B5563;

    --pay-blanco:#FFFFFF;

}

/************************************************
CONTENEDOR
************************************************/

.mb-pay-container{

    width:min(92%,1200px);

    margin:auto;

}

/************************************************
HEADER
************************************************/

.mb-pay-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:rgba(15,48,87,.96);

    backdrop-filter:blur(10px);

    z-index:999;

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

}

.mb-pay-header .mb-pay-container{

    height:85px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mb-pay-logo img{

    height:56px;

}

.mb-pay-menu{

    display:flex;

    gap:40px;

}

.mb-pay-menu a{

    color:#FFF;

    font-weight:500;

    transition:.30s;

}

.mb-pay-menu a:hover{

    color:var(--pay-dorado);

}

.mb-pay-volver{

    background:var(--pay-dorado);

    color:var(--pay-azul);

    padding:14px 30px;

    border-radius:40px;

    font-weight:700;

}

/************************************************
HERO
************************************************/

.mb-pay-hero{

    background:linear-gradient(135deg,#071A38,#0F3057);

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:100px;

    padding-bottom:80px;

}

.mb-pay-card{

    max-width:720px;

    margin:auto;

    background:#FFF;

    border-radius:24px;

    padding:60px;

    text-align:center;

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

}

.mb-pay-badge{

    display:inline-block;

    background:var(--pay-dorado);

    color:#FFF;

    padding:8px 20px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:30px;

}

.mb-pay-card h1{

    color:var(--pay-azul);

    font-size:52px;

    margin-bottom:25px;

}

.mb-pay-card p{

    color:var(--pay-texto);

    line-height:1.9;

    font-size:19px;

    margin-bottom:40px;

}

.mb-pay-lista{

    display:grid;

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

    gap:18px;

}

.mb-pay-lista div{

    background:#F7F9FC;

    padding:18px;

    border-radius:14px;

    font-weight:600;

}

/************************************************
EMPRESAS
************************************************/

.mb-pay-empresas{

    padding:100px 0;

    background:#FFF;

    text-align:center;

}

.mb-pay-empresas h2{

    color:var(--pay-azul);

    font-size:42px;

    margin-bottom:20px;

}

.mb-pay-empresas p{

    max-width:700px;

    margin:auto;

    color:var(--pay-texto);

    line-height:1.8;

}

.mb-pay-empty{

    margin-top:50px;

    background:#F4F7FB;

    border:2px dashed #CBD5E1;

    border-radius:18px;

    padding:60px;

    color:#64748B;

}

/************************************************
FOOTER
************************************************/

.mb-pay-footer{

    background:var(--pay-azul);

    color:#FFF;

    text-align:center;

    padding:30px;

}

/************************************************
RESPONSIVE
************************************************/

@media(max-width:992px){

    .mb-pay-menu{

        display:none;

    }

}

@media(max-width:768px){

    .mb-pay-card{

        padding:40px 25px;

    }

    .mb-pay-card h1{

        font-size:38px;

    }

    .mb-pay-lista{

        grid-template-columns:1fr;

    }

    .mb-pay-empresas h2{

        font-size:32px;

    }

}

@media(max-width:480px){

    .mb-pay-header .mb-pay-container{

        height:75px;

    }

    .mb-pay-logo img{

        height:44px;

    }

    .mb-pay-volver{

        padding:10px 20px;

        font-size:14px;

    }

    .mb-pay-card h1{

        font-size:30px;

    }

    .mb-pay-card p{

        font-size:17px;

    }

}