/* Bantokens home v2 — solo lo que cambia frente a site.css (menú agrupado, CTA, calculadora, jerarquía) */
/* nav: el menú agrupado y sus submenús viven en chrome-v2.js (aplica a todas las páginas) */
/* hero: titular fijo, CTA visible, premios como prueba rotativa */
#hero .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    min-height: 52px
}

#hero .ctanote {
    font-size: var(--fs-caption);
    margin-top: 14px;
    letter-spacing: .01em
}

.proof {
    display: grid;
    min-height: clamp(200px, 20vw, 260px);
    max-width: 560px
}

.pf {
    grid-area: 1/1;
    display: grid;
    gap: 10px;
    align-content: start;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s var(--ease-standard), transform .5s var(--ease-standard);
    pointer-events: none
}

.pf.on {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.pf .k {
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-bold);
    color: var(--amber-token)
}

.pf h1 {
    margin: 0;
    color: #fff
}

.pf h1 em {
    font-style: normal;
    color: var(--amber-token)
}

.pf p {
    margin: 0;
    font-size: var(--fs-body-l);
    color: rgba(230, 240, 255, .8);
    line-height: var(--lh-body);
    max-width: 48ch;
    text-wrap: pretty
}

#pdots {
    display: flex;
    gap: 8px;
    margin-top: 26px
}

#pdots button {
    width: 30px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: background var(--dur-fast)
}

#pdots button.on {
    background: var(--amber-token)
}

body[data-prueba="estática"] #pdots {
    display: none
}

body[data-prueba="estática"] .proof {
    gap: 24px;
    min-height: 0
}

body[data-prueba="estática"] .pf {
    grid-area: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto
}

@media(prefers-reduced-motion:reduce) {
    .pf {
        transition: none
    }
}

/* calculadora "¿cuánto gano?" en el primer pantallazo */
.calc {
    background: #fff;
    color: var(--text-primary);
    border-radius: 20px;
    box-shadow: var(--shadow-float);
    padding: 26px;
    display: grid;
    gap: 16px;
    max-width: 430px;
    justify-self: end;
    width: 100%
}

.calc .ck {
    display: block;
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-bold);
    color: var(--blue-primary)
}

.calc .ct {
    display: block;
    font-size: var(--fs-h3);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-bold);
    margin-top: 4px
}

.calc .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.calc .chips button {
    font: inherit;
    font-size: 13px;
    font-weight: var(--fw-bold);
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast)
}

.calc .chips button:hover {
    border-color: var(--blue-primary);
    color: var(--blue-primary)
}

.calc .chips button.on {
    background: var(--blue-tint);
    border-color: var(--blue-primary);
    color: var(--blue-primary)
}

.calc .cl {
    display: grid;
    gap: 10px;
    font-size: var(--fs-caption);
    color: var(--text-secondary);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide)
}

.calc input[type=range] {
    width: 100%;
    accent-color: var(--blue-primary);
    height: 24px
}

.calc .crow {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    align-items: baseline;
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px
}

.calc .tk {
    font-size: var(--fs-body-s);
    color: var(--text-secondary)
}

.calc .out {
    font-family: var(--font-mono);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 600;
    color: var(--blue-primary);
    grid-column: 1/-1;
    line-height: 1.1
}

.calc .cbadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--status-success-fg, #1E7B3C);
    justify-self: start
}

.calc .cbadge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: block
}

.calc .cnote {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5
}

@media(max-width:900px) {
    .calc {
        justify-self: stretch;
        max-width: none;
        margin-top: 8px
    }
}

/* escala: dos cifras protagonistas, cuatro de apoyo */
/* escala: las cifras rodean el panel de Bantip */
.orbit {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
    gap: clamp(22px, 2.6vw, 44px);
    align-items: center;
    margin-top: clamp(34px, 4vw, 58px)
}

.orbit .ocol {
    display: grid;
    gap: clamp(24px, 3vw, 42px);
    position: relative;
    z-index: 2
}

.orbit .metric {
    border-top: 0;
    padding: clamp(18px, 1.6vw, 24px);
    background: rgb(3 24 56 / 0%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(153, 201, 255, .28);
    border-radius: 18px;
    gap: 6px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 32px rgba(0, 10, 30, .45);
    transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), box-shadow var(--dur-fast)
}

.orbit .metric:hover {
    border-color: rgba(153, 201, 255, .5);
    box-shadow: 0 14px 40px rgba(0, 10, 30, .65)
}

.orbit .metric b {
    font-size: clamp(26px, 2.5vw, 36px);
    color: #fff;
    white-space: nowrap
}

.orbit .metric b span {
    color: inherit !important;
    font-size: inherit !important;
    display: inline !important;
    margin: 0 !important;
    max-width: none !important;
}

.orbit .metric span {
    max-width: 24ch;
    color: #E6F0FF
}

.orbit .metric .ic {
    color: var(--amber-token)
}

.orbit .ocol:first-child .metric {
    text-align: left;
    justify-items: start
}

.orbit .ocol:first-child .metric span {
    margin-left: 0
}

.orbit .ocol:first-child .metric .ic svg {
    margin-left: 0
}

/* panel de Bantip (extensión) */
.btp {
    --bs: #0E1726;
    --bs2: #162338;
    --bbd: #223654;
    width: clamp(292px, 27vw, 376px);
    background: var(--bs);
    border: 1px solid var(--bbd);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    color: #F4F6FB;
    font-size: 12.5px;
    line-height: 1.45
}

.btp .rail {
    background: var(--bs);
    border-right: 1px solid var(--bbd);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0
}

.btp .rail .lg {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--blue-primary);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: grid;
    place-items: center;
    margin-bottom: 8px
}

.btp .rb {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #94A3B8
}

.btp .rb .bar {
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 2px;
    background: var(--blue-primary);
    opacity: 0
}

.btp .rb.on {
    background: rgba(0, 125, 255, .14);
    color: #4DA5FF
}

.btp .rb.on .bar {
    opacity: 1
}

.btp .bd {
    padding: 14px;
    display: grid;
    gap: 9px;
    align-content: start
}

.btp .bhead {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start
}

.btp .bhead b {
    display: block;
    font-size: 15px;
    line-height: 1.25;
    max-width: 14ch
}

.btp .who {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94A3B8;
    font-size: 11.5px;
    margin-top: 5px
}

.btp .who i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64748B
}

.btp .wbtn {
    display: flex;
    gap: 5px
}

.btp .wbtn i {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: var(--bs2);
    border: 1px solid var(--bbd)
}

.btp .bline {
    color: #C6D2E2;
    margin: 0
}

.btp .bline b {
    color: #F4F6FB
}

.btp .bline em {
    font-style: normal;
    font-weight: 700;
    color: var(--amber-token)
}

.btp .bbar {
    display: flex;
    align-items: center;
    gap: 8px
}

.btp .bbar>span {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: var(--bs2);
    overflow: hidden
}

.btp .bbar>span i {
    display: block;
    width: 8%;
    height: 100%;
    background: var(--blue-primary)
}

.btp .bbar b {
    font-size: 11px;
    color: #94A3B8
}

.btp .bstat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px
}

.btp .ok {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #C6D2E2;
    font-size: 11.5px
}

.btp .ok i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a
}

.btp .chip {
    border: 1px solid var(--bbd);
    border-radius: 99px;
    padding: 4px 10px;
    font-size: 11px;
    color: #C6D2E2;
    background: var(--bs2)
}

.btp .chip.sm {
    padding: 3px 9px;
    font-size: 10.5px;
    color: #4DA5FF;
    border-color: rgba(77, 165, 255, .4)
}

.btp .bcard {
    background: var(--bs2);
    border: 1px solid var(--bbd);
    border-radius: 14px;
    padding: 11px;
    display: grid;
    gap: 7px;
    margin-top: 3px
}

.btp .bcard p {
    margin: 0;
    color: #94A3B8;
    font-size: 11.5px
}

.btp .bct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.btp .bct b {
    font-size: 12.5px
}

.btp .ia {
    background: var(--blue-primary);
    color: #fff;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700
}

.btp .bstep {
    color: #C6D2E2 !important
}

.btp .bev {
    background: #0E1726;
    border: 1px solid var(--bbd);
    border-radius: 10px;
    padding: 9px
}

.btp .bev b {
    font-size: 11.5px;
    display: block;
    margin-bottom: 4px
}

.btp .bfb {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #64748B;
    font-size: 10.5px
}

.btp .chip svg {
    vertical-align: -2px;
    margin-right: 4px
}

.btp .bct b {
    display: flex;
    align-items: center;
    gap: 6px
}

.btp .ci {
    color: var(--amber-token);
    display: grid;
    place-items: center
}

.btp .peek {
    margin-top: 6px
}

@media(max-width:1060px) {
    .orbit {
        grid-template-columns: 1fr 1fr
    }

    .btp {
        grid-column: 1/-1;
        grid-row: 1;
        justify-self: center
    }

    .orbit .ocol:first-child .metric {
        text-align: left;
        justify-items: start
    }

    .orbit .ocol:first-child .metric span {
        margin-left: 0
    }

    .orbit .ocol:first-child .metric .ic svg {
        margin-left: 0
    }
}

@media(max-width:760px) {
    .orbit {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .orbit .ocol {
        grid-template-columns: 1fr 1fr;
        gap: 22px 18px
    }

    .orbit .metric b {
        font-size: clamp(23px, 7vw, 31px)
    }

    .orbit .metric span {
        font-size: 13px;
        line-height: 1.35;
        max-width: 20ch
    }

    .btp {
        width: 100%;
        max-width: 352px
    }
}

@media(max-width:400px) {
    .btp {
        grid-template-columns: 42px minmax(0, 1fr);
        font-size: 12px
    }

    .btp .bd {
        padding: 12px;
        gap: 8px
    }

    .btp .rb {
        width: 30px;
        height: 30px
    }

    .btp .bhead b {
        font-size: 14px
    }
}

/* footer v2: logo de fondo, grande y opaco a lo largo de todo el pie */
.foot {
    position: relative;
    overflow: hidden
}

.foot .wrap {
    position: relative;
    z-index: 1
}

.foot .legal {
    position: static;
    overflow: visible
}

.foot .legal img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 118%;
    max-width: none;
    opacity: .08;
    z-index: 0;
    pointer-events: none;
    filter: blur(.4px)
}

.foot .legal .lks,
.foot .legal>span:last-child {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none
}

/* productos: los servicios que ya existen, enlazados desde la home */
.prods {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 44px
}

.prod {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-l);
    padding: 24px;
    display: grid;
    gap: 9px;
    align-content: start;
    color: var(--text-primary);
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast), border-color var(--dur-fast)
}

.prod:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: var(--blue-secondary);
    color: var(--text-primary)
}

.prod b {
    font-size: var(--fs-h3);
    letter-spacing: var(--ls-tight)
}

.prod p {
    font-size: var(--fs-body-s);
    color: var(--text-secondary);
    line-height: 1.55
}

.prod em {
    font-style: normal;
    font-size: var(--fs-body-s);
    font-weight: var(--fw-bold);
    color: var(--blue-primary);
    margin-top: 4px
}

.prodwide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-l);
    padding: clamp(22px, 3vw, 34px)
}

.prodwide h3 {
    font-size: clamp(22px, 2.4vw, 30px);
    margin-top: 12px
}

.prodwide p {
    margin-top: 12px;
    font-size: var(--fs-body);
    color: var(--text-secondary);
    max-width: 440px
}

.prodwide .pics {
    aspect-ratio: 16/11;
    width: 100%
}

.prodwide .dsrow {
    margin-top: 20px
}

@media(max-width:900px) {
    .prods {
        grid-template-columns: 1fr 1fr
    }

    .prodwide {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .prods {
        grid-template-columns: 1fr
    }
}

/* registro de cierre */
#registro .eyebrow {
    color: #fff;
    opacity: .85
}

#registro .lede {
    color: rgba(255, 255, 255, .94)
}

#registro .rlist {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
    font-size: var(--fs-body)
}

#registro .rlist li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start
}

#registro .rlist i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 12px;
    font-weight: var(--fw-bold);
    margin-top: 2px
}

.form .fnote {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5
}

.form .done {
    display: grid;
    gap: 8px
}

.form .done h3 {
    margin: 0
}

.form .done p {
    color: var(--text-secondary);
    font-size: var(--fs-body-s)
}

/* panel funcional de la extensión, incrustado desde Bantip.html */
.btp-live {
    width: max(300px, min(var(--btpw, 465px), calc(min(100vw, 1400px) - 92px - 568px)));
    transition: width .28s cubic-bezier(.4, 0, .2, 1)
}

.btp-live iframe {
    display: block;
    width: 100%;
    height: clamp(588px, 72vh, 725px);
    min-height: 588px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color-scheme: light;
    opacity: 1;
    box-shadow: none
}

@media(max-width:1060px) {
    .btp-live {
        grid-column: 1/-1;
        grid-row: 1;
        justify-self: center;
        width: 100%;
        max-width: min(100%, var(--btpw, 740px))
    }
}

#escala>.wrap {
    max-width: 1400px
}