:root{
    --blue:#4292C3;
    --blue-dk:#357DAB;
    --navy:#0A2554;
    --ink:#16233B;
    --muted:#69748A;
    --line:#DCE3EC;
    --soft:#F2F7FB;
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0
}
body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    background:#E8EDF3;
    display:flex;
    justify-content:center;
    min-height:100vh;
}
img{
    max-width:100%;
    height:auto
}

.shell{
    display:flex;
    width:100%;
    max-width:1200px;
    min-height:100vh;
    background:#fff;
    box-shadow:0 0 0 1px rgba(10,37,84,.06), 0 0 60px -20px rgba(10,37,84,.18);
}

/* ===== IZQUIERDA ===== */
.brand{
    flex:1 1 54%;
    background:var(--soft);
    padding:52px 60px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
    border-right:1px solid var(--line);
}
.scale{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:46px;
    border-right:1px solid var(--line);
    background:#fff
}
.scale i{
    position:absolute;
    right:0;
    height:1px;
    background:#C9D6E3
}
.scale i.mj{
    background:var(--blue);
    opacity:.55
}

.logo{
    position:relative;
    z-index:2;
    margin-left:22px;
    display:flex;
    justify-content:center;
    padding-bottom:22px;
    border-bottom:1px solid var(--line)
}
.logo img{
    width:clamp(210px,26vw,300px);
    height:auto
}

.copy{
    position:relative;
    z-index:2;
    max-width:480px;
    margin-left:22px
}
.eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--blue-dk);
    margin-bottom:18px
}
.copy h1{
    font-size:clamp(26px,2.5vw,34px);
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.015em;
    margin-bottom:22px;
    color:var(--navy)
}

.feats{
    list-style:none;
    margin:0 0 22px;
    padding:0;
    max-width:440px
}
.feats li{
    display:flex;
    align-items:flex-start;
    gap:11px;
    font-size:14.5px;
    line-height:1.5;
    color:#4A576B;
    margin-bottom:11px
}
.feats svg{
    flex:none;
    width:15px;
    height:15px;
    margin-top:3px;
    stroke:var(--blue);
    stroke-width:2.4;
    fill:none
}

/* carta de control */
.chart-card{
    max-width:440px;
    margin:0 0 22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    padding:13px 14px 11px;
    box-shadow:0 1px 2px rgba(10,37,84,.04),0 8px 20px -12px rgba(10,37,84,.14)
}
.chart-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:4px
}
.chart-head b{
    font-size:12px;
    font-weight:600;
    color:var(--navy)
}
.chart-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    flex:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    color:#C0392B;
    background:#FDECEA;
    border:1px solid #F6D4D0;
    padding:2px 7px;
    border-radius:20px
}
.chart-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;
    color:var(--muted);
    margin-bottom:6px;
    letter-spacing:.02em
}
.chart-card svg{
    display:block;
    width:100%;
    height:auto
}
.ax{
    font-family:'IBM Plex Mono',monospace;
    font-size:6.5px;
    fill:#8C97A8
}
.lim{
    font-family:'IBM Plex Mono',monospace;
    font-size:6.5px;
    fill:#8C97A8
}
.yttl{
    font-family:'Inter',sans-serif;
    font-size:6.5px;
    fill:#8C97A8
}

.hilite{
    border-left:3px solid var(--blue);
    padding:6px 0 6px 16px;
    max-width:440px
}
.hilite p{
    font-size:clamp(17px,1.5vw,20px);
    line-height:1.4;
    font-weight:500;
    color:var(--navy);
    letter-spacing:-.005em
}
.hilite b{
    font-weight:700;
    color:var(--blue-dk)
}

.creds{
    position:relative;
    z-index:2;
    display:flex;
    gap:32px;
    padding-top:24px;
    margin-left:22px;
    border-top:1px solid var(--line)
}
.creds .k{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    color:var(--navy);
    font-weight:500
}
.creds .v{
    font-size:11px;
    color:var(--muted);
    margin-top:4px
}

/* ===== DERECHA ===== */
.panel{
    flex:1 1 46%;
    background-color: #116265; /*var(--navy);*/
    background-image:radial-gradient(circle at 70% 20%,rgba(66,146,195,.30) 0%,transparent 58%);
    display:flex;
    flex-direction:column;
    padding:28px 40px 30px;
    color:#fff
}
.top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap
}
.compliance{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    letter-spacing:.03em;
    color:#B9C7DA;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    padding:5px 11px;
    white-space:nowrap
}
.compliance svg{
    flex:none;
    width:11px;
    height:11px;
    stroke:#7FB6DC;
    stroke-width:2.4;
    fill:none
}
.lang{
    appearance:none;
    border:1px solid rgba(255,255,255,.18);
    border-radius:6px;
    padding:7px 30px 7px 11px;
    font:500 13px 'Inter';
    color:#B9C7DA;
    cursor:pointer;
    background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B9C7DA' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center
}
.lang option{
    color:#16233B
}

.wrap{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 0
}
.box{
    width:100%;
    max-width:380px
}

.tabs{
    display:flex;
    gap:4px;
    border-bottom:1px solid rgba(255,255,255,.14);
    margin-bottom:26px
}
.tab{
    flex:1;
    background:none;
    border:0;
    cursor:pointer;
    padding:11px 4px 12px;
    position:relative;
    font:600 12px 'Inter';
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#8397B2;
    transition:color .16s
}
.tab:hover{
    color:#C6D6E8
}
.tab[aria-selected="true"]{
    color:#fff
}
.tab[aria-selected="true"]::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background:var(--blue);
    border-radius:2px
}
.tab:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
    border-radius:4px
}

.pane{
    display:none
}
.pane.on{
    display:block;
    animation:fade .22s ease
}
@keyframes fade{
    from{
        opacity:0;
        transform:translateY(4px)
    }
    to{
        opacity:1;
        transform:none
    }
}

.lead{
    font-size:14px;
    color:#93A5BE;
    margin-bottom:24px;
    line-height:1.5
}
.f{
    margin-bottom:16px
}
.f label{
    display:block;
    font-size:13px;
    font-weight:500;
    margin-bottom:7px;
    color:#C6D3E3
}
.f input{
    width:100%;
    padding:12px 13px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:7px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font:400 14.5px 'Inter';
    transition:.15s
}
.f input::placeholder{
    color:#6E809A
}
.f input:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(66,146,195,.20);
    background:rgba(255,255,255,.10)
}

/* validacion de campos obligatorios */
.f .err{
    display:flex;
    align-items:center;
    gap:6px;
    margin:7px 0 0;
    font-size:12.5px;
    line-height:1.4;
    color:#F2A0A0
}
.f .err[hidden]{
    display:none
}
.f .err span[hidden]{
    display:none
}
.f .err svg{
    width:14px;
    height:14px;
    flex:none;
    fill:none;
    stroke:#F2A0A0;
    stroke-width:1.8;
    stroke-linecap:round
}
.f.bad input{
    border-color:#D9645E;
    background:rgba(217,100,94,.10)
}
.f.bad input:focus{
    border-color:#D9645E;
    box-shadow:0 0 0 3px rgba(217,100,94,.22)
}

.row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:4px 0 20px
}
.ck{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:#93A5BE;
    cursor:pointer
}
.ck input{
    accent-color:var(--blue);
    width:15px;
    height:15px
}
.lk{
    font-size:13px;
    color:#7FB6DC;
    font-weight:500;
    text-decoration:none;
    background:none;
    border:0;
    cursor:pointer;
    font-family:'Inter'
}
.lk:hover{
    text-decoration:underline
}

.btn{
    width:100%;
    padding:13px;
    border:0;
    border-radius:7px;
    background:var(--blue);
    color:#052042;
    font:600 14.5px 'Inter';
    cursor:pointer;
    transition:.15s;
    box-shadow:0 6px 18px -6px rgba(66,146,195,.55)
}
.btn:hover{
    filter:brightness(1.08)
}
.btn:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px
}
.btn.mt{
    margin-top:8px
}

.note{
    font-size:12.5px;
    color:#7E90AA;
    margin-top:16px;
    text-align:center;
    line-height:1.5
}
.foot{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#6E809A;
    padding-top:18px
}
.foot button.lk2{
    font:inherit;
    color:inherit;
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:2px
}
.foot button.lk2:hover{
    color:#9FB0C7
}

/* ===== TERMINOS DE USO (modal) ===== */
.tos-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,37,84,.55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:100
}
.tos-overlay.on{
    display:flex
}
.tos-modal{
    background:#fff;
    border-radius:12px;
    max-width:720px;
    width:100%;
    max-height:85vh;
    display:flex;
    flex-direction:column;
    box-shadow:0 20px 60px -20px rgba(10,37,84,.4)
}
.tos-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 22px;
    border-bottom:1px solid var(--line);
    flex:none
}
.tos-head span{
    font:600 15px 'Inter';
    color:var(--navy)
}
.tos-close{
    background:none;
    border:0;
    font-size:22px;
    line-height:1;
    color:var(--muted);
    cursor:pointer;
    padding:2px 6px
}
.tos-close:hover{
    color:var(--ink)
}
.tos-body{
    padding:20px 22px 26px;
    overflow-y:auto;
    color:var(--ink);
    font-size:13.5px;
    line-height:1.6
}
.tos-body h3{
    font-size:14.5px;
    color:var(--navy);
    margin:20px 0 8px
}
.tos-body h3:first-child{
    margin-top:0
}
.tos-body h4{
    font-size:13px;
    color:var(--blue-dk);
    margin:14px 0 6px
}
.tos-body p{
    margin-bottom:10px
}
.tos-body ul{
    margin:0 0 10px 20px
}
.tos-body li{
    margin-bottom:5px
}
.tos-body .tos-title{
    font:700 15.5px 'Inter';
    color:var(--navy);
    margin-bottom:14px
}
.tos-body .tos-ack{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-weight:500
}
@media (max-width:520px){
    .tos-modal{
        max-height:92vh
    }
    .tos-body{
        padding:16px 16px 20px
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width:1050px){
    .brand{
        padding:40px 40px
    }
    .panel{
        padding:26px 32px 28px
    }
}
@media (max-width:900px){
    body{
        background:#fff;
        display:block
    }
    .shell{
        flex-direction:column;
        min-height:100dvh;
        max-width:none;
        box-shadow:none
    }
    .panel{
        order:1
    }
    .brand{
        order:2;
        flex:none;
        padding:26px 22px 24px;
        border-right:0;
        border-top:1px solid var(--line);
        border-bottom:0;
        justify-content:flex-start;
        gap:18px
    }
    .scale{
        display:none
    }
    .logo{
        margin-left:0;
        padding-bottom:16px
    }
    .logo img{
        width:min(230px,72%)
    }
    .copy{
        margin-left:0;
        max-width:100%;
        text-align:center
    }
    .eyebrow{
        margin-bottom:10px
    }
    .copy h1{
        font-size:clamp(21px,5.6vw,28px);
        margin-bottom:16px;
        text-wrap:balance
    }
    .feats{
        max-width:380px;
        margin:0 auto 16px;
        text-align:left
    }
    .feats li{
        font-size:14px;
        margin-bottom:9px
    }
    .chart-card{
        max-width:380px;
        margin:0 auto 18px
    }
    .hilite{
        border-left:0;
        border-top:1px solid var(--line);
        padding:14px 0 0;
        margin:0 auto;
        max-width:400px;
        text-align:center
    }
    .hilite p{
        font-size:16px
    }
    .creds{
        margin-left:0;
        gap:14px 22px;
        flex-wrap:wrap;
        justify-content:center;
        padding-top:16px
    }
    .creds .k{
        font-size:12px
    }
    .creds .v{
        font-size:10.5px
    }
    .panel{
        flex:1;
        padding:22px 22px 26px;
        background-image:radial-gradient(circle at 50% 0%,rgba(66,146,195,.28) 0%,transparent 62%)
    }
    .box{
        max-width:420px
    }
    .wrap{
        padding:14px 0
    }
}
@media (max-width:520px){
    .brand{
        padding:22px 18px 20px;
        gap:14px
    }
    .logo img{
        width:min(200px,74%)
    }
    .copy h1{
        font-size:clamp(20px,6.2vw,25px)
    }
    .feats li{
        font-size:13.5px;
        gap:9px;
        margin-bottom:8px
    }
    .feats svg{
        width:14px;
        height:14px
    }
    .hilite p{
        font-size:15px
    }
    .creds{
        gap:12px 18px
    }
    .panel{
        padding:22px 18px 24px
    }
    .tab{
        font-size:11px;
        letter-spacing:.06em;
        padding:11px 2px 12px
    }
    .lead{
        margin-bottom:20px;
        font-size:13.5px
    }
    .f input{
        font-size:16px;
        padding:13px
    }
    .btn{
        padding:14px;
        font-size:15px
    }
    .row{
        flex-wrap:wrap;
        gap:10px
    }
}
@media (max-width:400px){
    .chart-card{
        display:none
    }
}
@media (max-height:640px) and (max-width:900px){
    .feats{
        display:none
    }
    .chart-card{
        display:none
    }
    .brand{
        gap:10px;
        padding:16px 18px
    }
}