/*=========================
RESET
=========================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#1d1d1d;
    overflow-x:hidden;

}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

/*=========================
COLORES
=========================*/

:root{

    --gold:#C79B43;
    --gold2:#b98a2d;
    --dark:#071426;
    --dark2:#08192f;
    --gray:#666;
    --light:#fafafa;

}

header{

    background:#34414b;
    height:85px;

    position:fixed;
    width:100%;
    top:0;
    z-index:999;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

}

.nav{

    display:flex;
    justify-content:space-between;
    align-items:center;
    height:85px;

}

.logo{

    width:110px;
    max-height:58px;
    object-fit:contain;

}

.login-page{

    min-height:100vh;
    background:
        linear-gradient(rgba(237,240,242,.78),rgba(200,208,213,.78)),
        url("../img/cards.png") center/cover no-repeat fixed;

}

.user-page{

    min-height:100vh;
    padding:104px 20px 50px;
    background:
        linear-gradient(rgba(237,240,242,.78),rgba(200,208,213,.78)),
        url("../img/cards.png") center/cover no-repeat fixed;

}

.user-menu{

    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:1000;
    min-height:70px;
    display:flex;
    align-items:center;
    background:#34414b;
    box-shadow:0 3px 10px rgba(0,0,0,.15);

}

.user-menu__links{

    width:min(100%,1000px);
    margin:auto;
    padding:0 20px;
    display:flex;
    justify-content:center;
    gap:28px;

}

.user-menu__content{

    width:100%;
    margin:auto;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;

}

.user-menu__logo{

    display:block;
    width:90px;
    height:54px;
    flex:0 0 90px;

}

.user-menu__logo img{

    width:100%;
    height:100%;
    object-fit:contain;

}

.user-menu__content .user-menu__links{

    width:auto;
    margin:0;
    padding:0;
    flex:1;
    justify-content:flex-end;

}

.user-menu__links a{

    color:#fff;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;

}

.user-menu__links a:hover,
.user-menu__links a[aria-current="page"]{

    color:var(--gold);

}

.user-dashboard{

    width:min(100%,1000px);
    margin:auto;
    text-align:center;

}

.user-logo{

    width:120px;
    max-height:70px;
    margin:0 auto 24px;
    object-fit:contain;

}

.user-dashboard > section{

    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;

}

.user-dashboard > section > h1{

    margin-bottom:6px;
    color:var(--dark);

}

.user-dashboard > section > p{

    margin-bottom:30px;
    color:var(--gray);

}

.settings-card{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:70px;
    padding:22px;
    border:1px solid #dfe4e7;
    border-radius:10px;
    background:#f8fafb;
    text-align:left;

}

.settings-section-title{

    margin:0 0 10px;
    color:var(--dark);
    font-size:18px;
    text-align:left;

}

.settings-card p{

    color:var(--gray);

}

.configuration-page .settings-card > div > p{

    color:var(--dark);
    font-size:15px;
    font-weight:600;
    text-align:left;

}

.account-settings-title{

    margin-top:30px;

}

.account-settings-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:12px;

}

.configuration-page .settings-card{

    min-height:47px;
    padding:7px 14px;

}

.settings-action-card{

    justify-content:space-between;

}

.settings-action-card.password-change-trigger{

    color:inherit;
    cursor:pointer;
    text-decoration:none;
    transition:background .2s ease,color .2s ease,transform .2s ease;

}

.settings-action-card.password-change-trigger:hover,
.settings-action-card.password-change-trigger:focus-visible{

    background:#0b2b4b;
    color:#fff;
    outline:none;
    transform:translateY(-2px);

}

.settings-action-card.password-change-trigger:hover h3,
.settings-action-card.password-change-trigger:focus-visible h3{

    color:#fff;

}

.settings-action-card.advisor-trigger{

    color:inherit;
    cursor:pointer;
    text-decoration:none;
    transition:background .2s ease,color .2s ease,transform .2s ease;

}

.settings-action-card.advisor-trigger:hover,
.settings-action-card.advisor-trigger:focus-visible{

    background:#0b2b4b;
    color:#fff;
    outline:none;
    transform:translateY(-2px);

}

.settings-action-card.advisor-trigger:hover h3,
.settings-action-card.advisor-trigger:focus-visible h3{

    color:#fff;

}

.settings-action-card h3,
.settings-switch-card h3{

    color:var(--dark);
    font-size:15px;
    text-align:left;

}

.settings-action-card__arrow{

    color:var(--gold2);
    font-size:28px;
    line-height:1;

}

.theme-switch{

    display:flex;
    align-items:center;
    gap:10px;
    color:var(--dark);
    cursor:pointer;
    font-weight:600;
    white-space:nowrap;

}

.theme-switch input{

    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);

}

.theme-switch__control{

    position:relative;
    width:48px;
    height:26px;
    border-radius:999px;
    background:#9ca7ae;
    transition:background .25s ease;

}

.theme-switch__control::after{

    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    transition:transform .25s ease;

}

.theme-switch input:checked + .theme-switch__control{

    background:var(--gold);

}

.theme-switch input:checked + .theme-switch__control::after{

    transform:translateX(22px);

}

.theme-switch input:focus-visible + .theme-switch__control{

    outline:3px solid rgba(199,155,67,.45);
    outline-offset:3px;

}

.configuration-page.dark-theme{

    background:#071426;

}

.configuration-page.dark-theme .user-dashboard > section > h1,
.configuration-page.dark-theme .settings-section-title,
.configuration-page.dark-theme .theme-switch{

    color:#fff;

}

.configuration-page.dark-theme .user-dashboard > section > p,
.configuration-page.dark-theme .settings-card p{

    color:#c4cbd1;

}

.configuration-page.dark-theme .settings-card > div > p{

    color:#fff;

}

.configuration-page.dark-theme .settings-action-card h3{

    color:#fff;

}

.configuration-page.dark-theme .settings-card{

    border-color:#344557;
    background:#10233a;

}

body.dark-theme{

    background:#071426;
    color:#edf2f5;

}

body.dark-theme.user-page,
body.dark-theme.login-page{

    background:#071426;

}

body.dark-theme header,
body.dark-theme .user-menu{

    background:#030b14;

}

body.dark-theme .hero{

    background:linear-gradient(rgba(7,20,38,.96),rgba(7,20,38,.96));

}

body.dark-theme .benefits,
body.dark-theme .steps,
body.dark-theme .testimonials{

    background:#0b1d35;

}

body.dark-theme .hero-text h1,
body.dark-theme .hero-text h3,
body.dark-theme .hero-text p,
body.dark-theme .section-title h2,
body.dark-theme .section-title p,
body.dark-theme .benefit h3,
body.dark-theme .benefit p,
body.dark-theme .step h3,
body.dark-theme .step p,
body.dark-theme .testimonial,
body.dark-theme .user-dashboard > section > h1,
body.dark-theme .user-dashboard > section > p,
body.dark-theme .user-data-card,
body.dark-theme .user-data-card h2,
body.dark-theme .user-data-card p,
body.dark-theme .login-card,
body.dark-theme .login-card h1,
body.dark-theme .login-card > p,
body.dark-theme .login-form label,
body.dark-theme .back-link{

    color:#edf2f5;

}

body.dark-theme .user-data-card,
body.dark-theme .login-card,
body.dark-theme .settings-card{

    border-color:#344557;
    background:#10233a;

}

body.dark-theme .settings-section-title,
body.dark-theme .settings-card h2,
body.dark-theme .settings-card p{

    color:#edf2f5;

}

body.dark-theme .login-form input{

    border-color:#506174;
    background:#071426;
    color:#fff;

}

@media(max-width:700px){

    .settings-card{

        align-items:flex-start;
        flex-direction:column;

    }

    .account-settings-grid{

        grid-template-columns:1fr;

    }

    .my-cards-grid{

        grid-template-columns:1fr;

    }

    .settings-action-card{

        align-items:center;
        flex-direction:row;

    }

}

.user-data-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    text-align:left;

}

.user-data-card{

    padding:10px;
    border:1px solid #dfe4e7;
    border-radius:10px;
    background:#f8fafb;

}

.transaction-card{

    display:grid;
    grid-column:1 / -1;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    padding:0;

}

/* Desde el quinto campo del resumen, las operaciones usan una tipografía más compacta. */
.transaction-card .transaction-data-item p{

    font-size:14px;

}

.transaction-card .transaction-data-item:last-child p{

    font-size:16px;

}

.transaction-data-item{

    padding:20px;

}

.transaction-status{

    font-size:12px !important;
    font-weight:600 !important;

}

.transaction-data-item + .transaction-data-item{

    border-top:0;
    border-left:1px solid #dfe4e7;

}

.user-data-card h2{

    margin-bottom:8px;
    color:#55616a;
    font-size:14px;
    font-weight:600;

}

.user-data-card p{

    color:var(--dark);
    font-size:20px;
    font-weight:700;

}

.account-data-card{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

}

.account-data-grid{

    grid-template-columns:1fr;

}

.account-data-grid .settings-card{

    min-height:0;
    padding:5px 14px;

}

.account-data-grid .account-data-card h2{

    font-size:14px;

}

.account-data-grid .account-data-card p{

    font-size:12px;
    font-weight:600;
    text-align:left;

}

.account-data-grid .account-data-card{

    align-items:flex-start;
    flex-direction:column;
    gap:3px;
    justify-content:flex-start;

}

.account-data-card h2{

    margin-bottom:0;
    text-align:left;

}

.account-data-card p{

    text-align:right;
    overflow-wrap:anywhere;

}

.my-cards-grid{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    align-items:start;

}

.account-actions-grid{

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:start;

}

.account-action-card{

    text-align:left;

}

.account-action-card h2{

    min-height:44px;
    margin:0 0 10px;
    text-align:center;
    color:var(--dark);
    font-size:clamp(12px,1.5vw,16px);
    line-height:1.35;

}

.account-action-card img{

    display:block;
    width:25%;
    margin:0 auto;
    aspect-ratio:1.58 / 1;
    object-fit:contain;
    transition:transform .35s;

}

.account-action-card img:hover{

    transform:translateY(-3px);

}

.account-action-link{

    display:block;

}

.account-action-link:focus-visible{

    outline:2px solid var(--gold);
    outline-offset:4px;

}

.account-action-link:focus-visible img{

    transform:translateY(-3px);

}

.account-summary-button{

    margin-top:28px;

}

.account-actions-grid + .account-summary-button{

    margin-top:9px;

}

.account-quick-actions::after{

    margin-top:20px;

}

.account-quick-actions .account-action-card h2{

    min-height:29px;
    margin-bottom:3px;

}

.spei-logo{

    display:block;
    width:min(100%,360px);
    height:auto;
    margin:-3px auto 11px;

}

.store-logo{

    display:block;
    width:min(100%,230px);
    height:auto;
    margin:-3px auto 11px;

}

.reference-barcode{

    width:min(100%,380px);
    margin:0 auto 18px;
    padding:12px 16px 8px;
    border:0;
    border-radius:0;
    background:transparent;

}

.reference-barcode svg{

    display:block;
    width:100%;
    height:82px;

}

.reference-barcode p{

    margin:6px 0 0;
    color:var(--dark);
    font-size:14px;
    font-weight:600;
    letter-spacing:.12em;

}

body.dark-theme .reference-barcode svg rect{

    fill:#f5f7fa;

}

body.dark-theme .reference-barcode p{

    color:#f5f7fa;

}

.transfer-details-grid{

    margin:0 auto;
    max-width:680px;

}

.transfer-details-grid .account-data-card{

    align-items:center;
    flex-direction:row;
    justify-content:space-between;

}

.transfer-instructions{

    margin:24px auto 0;
    max-width:680px;
    padding:22px;
    border:1px solid #dfe4e7;
    border-radius:10px;
    background:#f8fafb;
    color:var(--dark);
    text-align:left;

}

.transfer-instructions__intro{

    margin:0 0 18px;
    color:var(--dark);
    font-size:14px;
    font-weight:600;
    line-height:1.55;

}

.transfer-instructions h2{

    margin:0 0 12px;
    color:var(--dark);
    font-size:16px;

}

.transfer-instructions ol{

    display:grid;
    gap:10px;
    margin:0;
    padding-left:22px;
    color:var(--gray);
    font-size:13px;
    line-height:1.5;

}

.transfer-details-grid .account-data-card p,
.clabe-copy-button{

    margin:0;
    color:var(--dark);
    font-size:14px;
    font-weight:600;
    text-align:right;

}

.clabe-copy-button{

    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    font-family:inherit;

}

.clabe-copy-button:hover,
.clabe-copy-button:focus-visible,
.clabe-copy-button.is-copied{

    color:var(--gold);
    text-decoration:underline;

}

body.dark-theme .transfer-details-grid .account-data-card p,
body.dark-theme .clabe-copy-button{

    color:#edf2f5;

}

body.dark-theme .transfer-instructions{

    border-color:#344557;
    background:#10233a;
    color:#edf2f5;

}

body.dark-theme .transfer-instructions__intro,
body.dark-theme .transfer-instructions h2,
body.dark-theme .transfer-instructions ol{

    color:#edf2f5;

}

.copy-success-message{

    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1300;
    margin:0;
    padding:12px 16px;
    border-radius:8px;
    background:#0b2b4b;
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    font-weight:600;

}

.transfer-form{

    display:grid;
    gap:10px;
    max-width:680px;
    margin:0 auto;
    text-align:left;

}

.transfer-form label{

    color:var(--dark);
    font-size:13px;
    font-weight:600;

}

.transfer-form input,
.transfer-form select{

    width:100%;
    min-height:46px;
    padding:10px 12px;
    border:1px solid #dfe4e7;
    border-radius:8px;
    background:#f8fafb;
    color:var(--dark);
    font:inherit;

}

.transfer-form input::placeholder{

    color:#7a8791;
    opacity:1;

}

.transfer-form input:focus,
.transfer-form select:focus{

    border-color:var(--gold);
    outline:2px solid rgba(199,155,67,.25);
    outline-offset:1px;

}

.transfer-amount-field{

    position:relative;

}

.transfer-amount-field input{

    padding-left:30px;

}

.transfer-amount-field__currency{

    position:absolute;
    top:50%;
    left:12px;
    z-index:1;
    transform:translateY(-50%);
    color:#53616d;
    font-weight:600;
    pointer-events:none;

}

.transfer-form__actions{

    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:14px;

}

.transfer-form__action{

    border:0;
    font:inherit;
    line-height:normal;
    text-align:center;

}

.transfer-form__actions button.transfer-form__action{

    cursor:pointer;

}

.transfer-form__message{

    margin:0;
    padding:10px 12px;
    border-radius:8px;
    background:#fff0f0;
    color:#8b1e1e;
    font-size:14px;

}

.transfer-form__message--success{

    background:#e6f6e9;
    color:#17662a;

}

body.dark-theme .transfer-form label,
body.dark-theme .transfer-form input,
body.dark-theme .transfer-form select{

    color:#edf2f5;

}

body.dark-theme .transfer-amount-field__currency{

    color:#edf2f5;

}

body.dark-theme .transfer-form input,
body.dark-theme .transfer-form select{

    border-color:#344557;
    background:#10233a;

}

.my-card{

    text-align:left;

}

.my-card h2{

    margin-bottom:10px;
    color:var(--dark);
    font-size:18px;

}

.my-card img{

    width:100%;
    max-width:460px;
    margin:auto;

}

.my-cards-actions{

    display:flex;
    justify-content:center;
    gap:12px;

}

.my-cards-actions button.btn{

    border:0;
    cursor:pointer;
    font:inherit;
    line-height:normal;

}

.account-activation-modal{

    position:fixed;
    inset:0;
    z-index:1200;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(7,20,38,.56);
    backdrop-filter:blur(4px);

}

.account-activation-modal[hidden]{

    display:none;

}

.account-activation-popup{

    position:relative;
    width:min(100%,620px);
    padding:34px;
    border:1px solid #d3b35e;
    border-radius:16px;
    background:#fff;
    box-shadow:0 25px 65px rgba(0,0,0,.38);
    color:var(--dark);
    text-align:left;

}

.account-activation-popup h2{

    margin:0 36px 16px 0;
    font-size:22px;

}

.account-activation-popup p{

    color:#425362;
    line-height:1.65;

}

.account-activation-modal__close{

    position:absolute;
    top:12px;
    right:16px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:#eef1f3;
    color:#26323a;
    cursor:pointer;
    font-size:29px;
    line-height:1;

}

.account-activation-popup__actions{

    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;

}

.physical-card-flip{

    width:100%;
    max-width:460px;
    aspect-ratio:1.58 / 1;
    perspective:1000px;

}

.physical-card-flip__inner{

    position:relative;
    width:100%;
    height:100%;
    transition:transform .7s ease;
    transform-style:preserve-3d;

}

.physical-card-flip:hover .physical-card-flip__inner,
.physical-card-flip:focus .physical-card-flip__inner{

    transform:rotateY(180deg);

}

.physical-card-flip__face{

    position:absolute;
    inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

}

.physical-card-image{

    position:relative;

}

.physical-card-image img{

    display:block;
    width:100%;
    height:100%;
    margin:auto;

}

.physical-card-back{

    transform:rotateY(180deg);

}

.physical-card-back__surface{

    position:absolute;
    inset:5.3% 3.2% 3.1%;
    overflow:hidden;
    border-radius:5%;
    background:linear-gradient(135deg,#2f2105,#806018 47%,#d9ad4c);
    box-shadow:inset 0 0 0 1px rgba(255,225,143,.75);

}

.physical-card-back__stripe{

    height:22%;
    margin-top:11%;
    background:linear-gradient(#141414,#020202,#171717);

}

.physical-card-back__label{

    margin:8% 9% 1%;
    color:#fff3cc;
    font-size:clamp(7px,1.2vw,11px);
    font-weight:700;
    letter-spacing:.11em;

}

.physical-card-back__signature{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:16%;
    margin:0 9%;
    padding:3px 8px;
    background:#f5f0dc;
    color:#1b1b1b;

}

.physical-card-back__signature span{

    overflow:hidden;
    font-family:cursive;
    font-size:clamp(11px,2vw,18px);
    font-style:italic;
    text-overflow:ellipsis;
    white-space:nowrap;

}

.physical-card-back__signature strong{

    padding-left:8px;
    border-left:1px solid #b3aa89;
    font-size:clamp(8px,1.4vw,13px);
    white-space:nowrap;

}

.physical-card-back__brand{

    position:absolute;
    right:9%;
    bottom:10%;
    color:#f4d276;
    font-size:clamp(19px,4vw,36px);
    font-weight:800;
    letter-spacing:.08em;

}

.virtual-card-flip{

    width:100%;
    max-width:460px;
    aspect-ratio:1.58 / 1;
    perspective:1000px;

}

.virtual-card-flip__inner{

    position:relative;
    width:100%;
    height:100%;
    transition:transform .7s ease;
    transform-style:preserve-3d;

}

.virtual-card-flip:hover .virtual-card-flip__inner,
.virtual-card-flip:focus .virtual-card-flip__inner{

    transform:rotateY(180deg);

}

.virtual-card-flip__face{

    position:absolute;
    inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

}

.virtual-card-flip__front img{

    display:block;
    width:100%;
    height:100%;
    margin:0;

}

.virtual-card-flip__back{

    transform:rotateY(180deg);

}

.virtual-card-flip__back-surface{

    position:absolute;
    inset:5.4% 3.7% 4.4%;
    overflow:hidden;
    border:1px solid rgba(101,176,236,.65);
    border-radius:6%;
    background:
        radial-gradient(circle at 76% 82%,rgba(0,196,191,.28),transparent 35%),
        linear-gradient(135deg,#03132d,#062e62 58%,#0b5d9f);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);

}

.virtual-card-flip__stripe{

    height:22%;
    margin-top:11%;
    background:linear-gradient(#141414,#020202,#171717);

}

.virtual-card-flip__back p{

    margin:5% 10% 0;
    color:#e7fbff;
    font-size:clamp(15px,3.5vw,32px);
    font-weight:700;
    letter-spacing:.08em;
    line-height:1.25;

}

.virtual-card-flip__back span{

    position:absolute;
    right:10%;
    bottom:10%;
    color:#12c2c6;
    font-size:clamp(7px,1.4vw,13px);
    font-weight:700;
    letter-spacing:.12em;

}

.physical-card-number{

    position:absolute;
    top:55%;
    left:7.3%;
    color:#f4d276;
    font-size:clamp(13px,2.2vw,21px);
    font-weight:600;
    letter-spacing:.13em;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.9);

}

.physical-card-expiration{

    position:absolute;
    top:72.5%;
    left:33.5%;
    min-width:16%;
    padding:5px 3px;
    border-radius:3px;
    background:#4d350b;
    color:#f4d276;
    font-size:clamp(12px,2.1vw,20px);
    font-weight:600;
    letter-spacing:.12em;
    line-height:1.1;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.9);

}

.physical-card-holder{

    position:absolute;
    top:84.5%;
    left:10%;
    max-width:68%;
    color:#f4d276;
    font-size:clamp(10px,1.7vw,16px);
    font-weight:600;
    letter-spacing:.08em;
    line-height:1.2;
    text-transform:uppercase;
    text-shadow:0 1px 2px rgba(0,0,0,.9);

}

body.dark-theme .my-card h2{

    color:#fff;

}

body.dark-theme .account-activation-popup{

    border-color:#506174;
    background:#10233a;
    color:#fff;

}

body.dark-theme .account-activation-popup p{

    color:#d2dae1;

}

body.dark-theme .account-activation-modal__close{

    background:#344557;
    color:#fff;

}

body.dark-theme .account-action-card h2{

    color:#fff;

}

.transaction-detail-grid{

    grid-template-columns:1fr;

}

.transaction-detail-card{

    display:grid;
    grid-template-columns:minmax(220px, 1fr) minmax(0, 2fr);
    align-items:center;
    width:100%;

}

.transaction-detail-card h2{

    margin:0;
    text-align:left;

}

.transaction-detail-card p{

    text-align:right;

}

.logout-button{

    margin-top:28px;

}

.login-main{

    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:24px 20px;

}

.login-card{

    width:min(100%,440px);
    padding:28px;
    background:white;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(7,20,38,.18);

}

.login-card::after{

    display:none;

}

.login-card .logo{

    width:100px;
    max-height:none;
    margin:0 auto 18px;

}

.login-card h1{

    margin-bottom:4px;
    color:var(--dark);
    font-size:26px;

}

.login-card > p{

    margin-bottom:18px;
    color:var(--gray);

}

.login-card .login-error{

    margin:-8px 0 16px;
    padding:10px 12px;
    border-radius:5px;
    background:#fff0f0;
    color:#a32222;
    font-size:13px;

}

.login-form label{

    display:block;
    margin:12px 0 6px;
    color:var(--dark);
    font-size:14px;
    font-weight:600;

}

.login-form input{

    width:100%;
    padding:10px 12px;
    border:1px solid #cbd1d5;
    border-radius:5px;
    font:inherit;

}

.login-form input:focus{

    outline:2px solid rgba(199,155,67,.35);
    border-color:var(--gold);

}

.login-form .btn{

    width:100%;
    margin-top:18px;
    border:0;
    cursor:pointer;
    font:inherit;

}

.back-link{

    display:inline-block;
    margin-top:16px;
    color:#4d5962;
    font-size:14px;

}

.back-link:hover{

    color:var(--gold2);

}

.account-actions{

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

}

.language-selector{

    position:relative;

}

.language-selector--floating{

    position:fixed;
    top:18px;
    right:20px;
    z-index:1300;

}

.user-page .language-selector--floating{

    top:82px;

}

.compact-transaction-page .language-selector--floating{

    top:12px;

}

.credit-transaction-page .language-selector--floating{

    top:12px;

}

.language-selector--floating .language-selector__toggle{

    background:#34414b;
    box-shadow:0 6px 16px rgba(0,0,0,.2);

}

.logout-shortcut{

    position:fixed;
    top:82px;
    right:118px;
    z-index:1300;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:5px;
    background:#34414b;
    box-shadow:0 6px 16px rgba(0,0,0,.2);
    color:#fff;
    font-size:14px;
    font-weight:600;

}

.logout-shortcut:hover,
.logout-shortcut:focus-visible{

    border-color:var(--gold);
    color:var(--gold);
    outline:none;

}

.compact-transaction-page .logout-shortcut,
.credit-transaction-page .logout-shortcut{

    top:12px;
    right:106px;

}

.language-selector__toggle{

    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:5px;
    background:transparent;
    color:#fff;
    cursor:pointer;
    font:inherit;
    font-size:14px;

}

.language-selector__toggle:hover,
.language-selector__toggle:focus-visible{

    border-color:var(--gold);
    color:var(--gold);
    outline:none;

}

.language-selector__menu{

    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:126px;
    padding:6px;
    border-radius:7px;
    background:#fff;
    box-shadow:0 12px 28px rgba(0,0,0,.24);

}

.language-selector__menu button{

    width:100%;
    padding:8px 10px;
    border:0;
    border-radius:4px;
    background:transparent;
    color:var(--dark);
    cursor:pointer;
    font:inherit;
    text-align:left;

}

.language-selector__menu button:hover,
.language-selector__menu button:focus-visible{

    background:#f2e8d0;
    outline:none;

}

.advisor-modal{

    position:fixed;
    inset:0;
    z-index:1200;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(7,20,38,.56);
    backdrop-filter:blur(4px);

}

.advisor-modal[hidden]{

    display:none;

}

.password-modal{

    position:fixed;
    inset:0;
    z-index:1200;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(7,20,38,.56);
    backdrop-filter:blur(4px);

}

.password-modal[hidden]{ display:none; }

.password-popup{

    position:relative;
    width:min(100%,380px);
    padding:14px 24px;
    border:1px solid #d3b35e;
    border-radius:18px;
    background:linear-gradient(135deg,#f6f2e2,#d8c06f 55%,#f4e6a4);
    box-shadow:0 25px 65px rgba(0,0,0,.38),inset 0 1px 1px white;
    color:#1a2731;

}

.password-popup::after{

    content:none;
    display:none;

}

.password-popup .credit-chip{ position:absolute; top:14px; left:24px; width:40px; height:29px; }
.password-popup h2{ display:flex; align-items:center; min-height:29px; margin:0 0 7px; padding-left:50px; font-size:19px; }
.password-modal__close{ position:absolute; top:10px; right:15px; border:0; background:transparent; color:#1a2731; cursor:pointer; font-size:30px; }
.password-form{ display:grid; gap:3px; text-align:left; }
.password-form label{ font-size:12px; font-weight:700; }
.password-input-wrap{ position:relative; }
.password-form input{ width:100%; padding:5px 38px 5px 10px; border:1px solid #9d8232; border-radius:6px; background:rgba(255,255,255,.8); color:#1a2731; }
.password-toggle{ position:absolute; top:50%; right:8px; border:0; background:transparent; color:#425362; cursor:pointer; font-size:18px; transform:translateY(-50%); }
.password-form__actions{ display:flex; gap:10px; margin:5px 0 0; padding:0; }
.password-form .btn{ justify-self:start; border:0; cursor:pointer; }
.password-form__message{ margin:0 0 14px; padding:9px 10px; border-radius:6px; background:#fff0f0; color:#8b1e1e; font-size:13px; }
.password-form__message--success{ background:#e6f6e9; color:#17662a; }

.advisor-popup{

    position:relative;
    isolation:isolate;
    width:min(100%,480px);
    min-height:260px;
    padding:42px 38px 32px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.9);
    border-radius:20px;
    background:linear-gradient(135deg,#f4f6f7 0%,#a6afb6 45%,#e6eaed 100%);
    box-shadow:0 25px 65px rgba(0,0,0,.38),inset 0 1px 1px white;
    color:#1a2731;

}

.advisor-popup::before{

    content:"";
    position:absolute;
    z-index:-1;
    top:-145px;
    right:-105px;
    width:300px;
    height:300px;
    border:36px solid rgba(255,255,255,.3);
    border-radius:50%;

}

.credit-chip{

    display:block;
    width:54px;
    height:39px;
    margin-bottom:42px;
    border-radius:7px;
    background:linear-gradient(135deg,#e4cd85,#9d8232 55%,#eadb98);
    box-shadow:inset 0 0 0 1px rgba(92,69,10,.25);

}

.advisor-popup p{

    margin-bottom:30px;
    font-size:23px;
    font-weight:700;
    letter-spacing:.7px;

}

.advisor-popup .btn{

    border:0;
    cursor:pointer;

}

.advisor-close{

    position:absolute;
    top:12px;
    right:16px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.46);
    color:#26323a;
    cursor:pointer;
    font-size:29px;
    line-height:1;

}

nav ul{

    display:flex;
    gap:35px;

}

nav a{

    color:white;
    font-size:14px;
    transition:.3s;

}

nav a:hover{

    color:var(--gold);

}

.btn{

    padding:14px 28px;
    border-radius:5px;
    display:inline-block;
    transition:.35s;
    font-weight:500;

}

.gold{

    background:var(--gold);
    color:white;

}

.gold:hover{

    background:#d4aa56;
    transform:translateY(-3px);

}

.dark{

    background:#08192f;
    color:white;

}

.dark:hover{

    background:#102746;

}

.hero{

    margin-top:85px;
    padding:90px 0;

    background:

    linear-gradient(
    rgba(255,255,255,.92),
    rgba(255,255,255,.92)),

    url("../img/bg.jpg");

    background-size:cover;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:center;

}

.hero-text h1{

    font-size:82px;
    color:#071426;
    line-height:1;

}

.hero-text h3{

    letter-spacing:8px;
    margin-bottom:25px;

}

.hero-text p{

    font-size:24px;
    width:80%;
    color:#444;

}

.hero-text span{

    color:var(--gold);

}

.buttons{

    margin-top:35px;
    display:flex;
    gap:20px;

}

.hero-image img{

    width:105%;
    animation:float 4s ease infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.benefits{

    padding:90px 0;

}

.section-title span{

    color:var(--gold);

    font-size:13px;

    font-weight:600;

}

.section-title h2{

    margin:15px 0;

    font-size:42px;

    color:#162338;

}

.section-title strong{

    color:var(--gold);

}

.section-title p{

    color:#666;
    max-width:600px;

}

.benefits-grid{

    margin-top:50px;

    display:grid;

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

    gap:35px;

}

.benefit{

    display:flex;
    gap:20px;

}

.benefit i{

    color:var(--gold);

    font-size:35px;

}

.benefit h3{

    margin-bottom:8px;

}

.products{

    background:#061225;
    padding:90px 0;

}

.center{

    text-align:center;

}

.products h2{

    color:white;

}

.cards{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.product-card{

    background:#0b1d35;

    border-radius:18px;

    padding:25px;

    text-align:center;

    transition:.4s;

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

}

.product-card:hover{

    transform:translateY(-10px);

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

}

.product-card img{

    width:90%;

    margin:auto;

}

.product-card h3{

    margin:20px 0 10px;

    color:white;

}

.product-card p{

    color:#b8b8b8;

}

.product-card a{

    display:inline-block;

    margin-top:20px;

    color:var(--gold);

    font-weight:600;

}

.steps{

    padding:90px 0;

}

.steps-grid{

    margin-top:60px;

    display:grid;

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

    gap:20px;

}

.step{

    text-align:center;

}

.circle{

    width:90px;

    height:90px;

    background:#08192f;

    color:white;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:25px;

}

.stats{

    background:#071426;

    padding:50px 0;

}

.stats-grid{

    display:grid;

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

    text-align:center;

}

.stats h2{

    color:var(--gold);

    font-size:42px;

}

.stats p{

    color:white;

}

.testimonials{

    padding:90px 0;

}

.testimonial-grid{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.testimonial{

    background:white;

    border-radius:10px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.3s;

}

.testimonial:hover{

    transform:translateY(-8px);

}

.cta{

    background:#061225;

    padding:80px 0;

    color:white;

}

.cta h2{

    font-size:52px;

    margin-bottom:20px;

}

.cta p{

    margin-bottom:35px;

    color:#ddd;

}

.cta::after{

    margin-top:10px;

}

footer{

    background:#04101d;

    padding:60px 0;

}

.footer{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

}

.footer-brand{

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

}

.footer-brand p{

    flex:1;

}

.footer h4{

    color:white;

    margin-bottom:20px;

}

.footer a{

    display:block;

    color:#b8b8b8;

    margin-bottom:10px;

}

.footer p{

    color:#b8b8b8;

    line-height:1.8;

}

@media(max-width:992px){

.hero-grid,
.cards,
.steps-grid,
.stats-grid,
.footer,
.benefits-grid,
.testimonial-grid{

grid-template-columns:1fr;

}

.hero-text h1{

font-size:60px;

}

.hero-text p{

width:100%;

}

.transaction-card{

grid-template-columns:1fr;

}

.user-data-grid{

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

}

.transaction-data-item + .transaction-data-item{

border-top:1px solid #dfe4e7;
border-left:0;

}

nav{

display:none;

}

.buttons{

flex-direction:column;

}

}

header.scroll{

background:#2b363f;

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

transition:.4s;

}

.product-card,
.benefit,
.step,
.testimonial{

opacity:0;

transform:translateY(40px);

transition:.7s;

}

.show{

opacity:1;

transform:translateY(0);

}

.product-card{

position:relative;

overflow:hidden;

}

.product-card::before{

content:"";

position:absolute;

left:-150px;

top:0;

width:70px;

height:100%;

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

transform:skewX(-25deg);

transition:.8s;

}

.product-card:hover::before{

left:400px;

}

.btn{

position:relative;

overflow:hidden;

}

.btn::after{

content:"";

position:absolute;

width:30px;

height:160%;

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

top:-20px;

left:-50px;

transform:rotate(20deg);

transition:.6s;

}

.btn:hover::after{

left:150%;

}

section{

position:relative;

}

section::after{

content:"";

display:block;

width:100%;

height:1px;

background:rgba(0,0,0,.05);

margin-top:80px;

}

.hero-image img{

filter:drop-shadow(0 30px 30px rgba(0,0,0,.25));

}

.product-card img{

filter:drop-shadow(0 20px 20px rgba(0,0,0,.35));

}

.products{

background:

radial-gradient(circle at top,#13294d 0%,#061225 60%);

}

footer{

background:

linear-gradient(to bottom,#061225,#030b14);

}

.footer-whatsapp{

    width:60px;
    flex:0 0 60px;
    transition:.3s;

}

.footer-whatsapp:hover{

    transform:scale(1.12);

}

#top{

position:fixed;

bottom:110px;

right:35px;

width:50px;

height:50px;

display:none;

justify-content:center;

align-items:center;

border:none;

border-radius:50%;

background:#C79B43;

color:white;

font-size:20px;

cursor:pointer;

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

z-index:999;

}

@media(max-width:700px){

    .account-actions{

        gap:5px;

    }

    .account-actions .btn{

        padding:10px 8px;
        font-size:11px;

    }

    .language-selector__toggle{

        padding:10px;

    }

    .language-selector__toggle #language-current{

        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);

    }

    .language-selector--floating{

        top:12px;
        right:12px;

    }

    .user-page .language-selector--floating{

        top:82px;

    }

    .compact-transaction-page .language-selector--floating{

        top:10px;

    }

    .credit-transaction-page .language-selector--floating{

        top:10px;

    }

    .logout-shortcut{

        top:82px;
        right:61px;
        padding:10px 8px;
        font-size:11px;

    }

    .compact-transaction-page .logout-shortcut,
    .credit-transaction-page .logout-shortcut{

        top:10px;
        right:57px;

    }

}

/* Pantallas pequeñas: evita que los controles fijos, menús y grids hereden
   medidas de escritorio o estilos inline que provoquen desbordamiento. */
@media(max-width:700px){

    header{

        height:75px;

    }

    .nav{

        height:75px;
        gap:8px;

    }

    .nav .logo{

        width:64px;
        max-height:48px;
        flex:0 0 64px;

    }

    .account-actions{

        min-width:0;
        gap:5px;

    }

    .account-actions .btn{

        padding:9px 7px;
        font-size:10px;
        white-space:nowrap;

    }

    .hero{

        margin-top:75px;
        padding:56px 0;

    }

    .hero-text h1{

        font-size:clamp(46px,16vw,60px);

    }

    .hero-text h3{

        letter-spacing:clamp(3px,1.7vw,6px);
        font-size:clamp(15px,5.5vw,20px);

    }

    .hero-text p{

        font-size:18px;

    }

    .section-title h2,
    .cta h2{

        font-size:clamp(30px,10vw,42px);

    }

    .benefit{

        display:grid;
        grid-template-columns:35px minmax(0,1fr);
        gap:6px 20px;

    }

    .benefit i{

        grid-row:span 2;

    }

    .benefit h3,
    .benefit p{

        min-width:0;
        overflow-wrap:anywhere;

    }

    .benefit p{

        overflow-wrap:anywhere;

    }

    .footer-brand{

        min-width:0;

    }

    .footer-brand p{

        min-width:0;
        overflow-wrap:anywhere;

    }

    .user-menu{

        min-height:112px;

    }

    .user-menu__content{

        min-height:112px;
        padding:6px 12px;
        flex-wrap:wrap;
        justify-content:center;

    }

    .user-menu__logo{

        width:62px;
        height:38px;
        flex:0 0 62px;

    }

    .user-menu__content .user-menu__links{

        flex:0 0 100%;
        flex-wrap:wrap;
        justify-content:center;
        gap:5px 10px;

    }

    .user-menu__links a{

        font-size:11px;

    }

    .user-page{

        padding:144px 14px 32px;

    }

    .user-dashboard{

        width:100%;

    }

    .user-page .language-selector--floating,
    .user-page .logout-shortcut{

        top:122px;

    }

    .user-page .logout-shortcut{

        right:61px;

    }

    /* En las páginas de cuenta, los controles acompañan al logotipo en la
       barra superior: cerrar sesión a la izquierda e idioma a la derecha. */
    .user-page .language-selector--floating{

        top:6px;
        right:12px;

    }

    .user-page .logout-shortcut{

        top:6px;
        right:auto;
        left:12px;

    }

    /* Las vistas de transacción conservan la distribución móvil estándar:
       cerrar sesión a la izquierda e idioma a la derecha. */
    .compact-transaction-page .language-selector--floating,
    .credit-transaction-page .language-selector--floating{

        top:6px;
        right:12px;

    }

    .compact-transaction-page .logout-shortcut,
    .credit-transaction-page .logout-shortcut{

        top:6px;
        right:auto;
        left:12px;

    }

    .compact-transaction-page .user-logo,
    .credit-transaction-page .user-logo{

        width:92px;
        max-height:54px;

    }

    .account-actions-grid{

        grid-template-columns:1fr;
        gap:18px;

    }

    /* Las caras de las tarjetas son absolutas. En celular cada tarjeta ocupa
       su propia fila para que el giro no invada la tarjeta vecina. */
    .my-cards-grid{

        grid-template-columns:1fr;
        gap:32px;

    }

    .my-card{

        min-width:0;

    }

    .physical-card-flip,
    .virtual-card-flip{

        margin-right:auto;
        margin-left:auto;

    }

    .account-action-card h2,
    .account-quick-actions .account-action-card h2{

        min-height:0;
        font-size:16px;

    }

    .account-action-card img{

        width:min(58%,220px);

    }

    /* Las imágenes azul y dorada tienen una proporción ligeramente más
       ancha que la plateada; se ajustan para igualar su ancho visual. */
    .account-action-card:nth-child(n + 2) img{

        width:min(55%,209px);

    }

    /* Mantiene las dos columnas del resumen con el mismo ancho, incluso
       cuando alguno de sus importes es más largo. */
    .user-data-grid{

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

    }

    .user-data-grid > .user-data-card{

        min-width:0;

    }

    .user-data-grid > .user-data-card > p{

        overflow-wrap:anywhere;

    }

    .transaction-card[style]{

        grid-template-columns:1fr !important;

    }

    .transaction-card .transaction-data-item + .transaction-data-item{

        border-top:1px solid #dfe4e7 !important;
        border-left:0 !important;

    }

    .transaction-detail-card[style]{

        grid-template-columns:1fr !important;
        gap:4px;

    }

    .transaction-detail-card p{

        text-align:left;
        overflow-wrap:anywhere;

    }

    .transfer-details-grid .account-data-card{

        align-items:flex-start;
        flex-direction:column;
        gap:4px;

    }

    .transfer-details-grid .account-data-card p,
    .clabe-copy-button{

        text-align:left;
        overflow-wrap:anywhere;

    }

    .copy-success-message{

        right:14px;
        bottom:14px;
        left:14px;
        text-align:center;

    }

    .account-activation-modal,
    .advisor-modal,
    .password-modal{

        padding:14px;
        overflow-y:auto;

    }

    .account-activation-popup,
    .advisor-popup,
    .password-popup{

        width:100%;
        padding:26px 20px;

    }

    /* Los avisos de contacto con el asesor se muestran a escala reducida
       en celular, conservando sus proporciones y controles. */
    .advisor-popup{

        transform:scale(.5);
        transform-origin:center;

    }

    .advisor-popup p{

        font-size:clamp(19px,7vw,23px);

    }

    .account-activation-popup__actions,
    .password-form__actions{

        align-items:stretch;
        flex-direction:column;

    }

    .account-activation-popup__actions .btn,
    .password-form__actions .btn{

        width:100%;
        text-align:center;

    }

}