body.sub {
    background: var(--surface-page);
    color: var(--text-primary)
}

body.sub section:not([data-theme=deep]) {
    background: rgba(255, 255, 255, .94)
}

body.sub section.alt:not([data-theme=deep]) {
    background: rgba(244, 246, 251, .94)
}

body.sub section[data-theme=deep] {
    background: linear-gradient(180deg, rgba(0, 52, 105, .9), rgba(0, 30, 62, .94))
}

body.sub section:not([data-theme=deep]) .ben,
body.sub .tier,
body.sub .book {
    background: rgba(255, 255, 255, .92)
}

body.sub section[data-theme=deep] .ben {
    background: var(--blue-deep-2) !important;
    border-color: rgba(153, 201, 255, .35)
}

body.sub section[data-theme=deep] .ben b {
    color: #fff
}

body.sub section[data-theme=deep] .ben p {
    color: #E5F1FF
}

body.sub section[data-theme=deep] .ben .ic {
    background: rgba(255, 255, 255, .12);
    color: var(--amber-token)
}

body.sub [data-theme=deep] .eyebrow,
body.sub [data-theme=deep] h2 {
    color: #fff
}

body.sub nav {
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-card)
}

/* ritmo blanco/azul en subpáginas: donde hay secciones azules, las claras van opacas y el mapamundi queda de fondo sólido tras el azul */
body.sub:has(section[data-theme=deep]) section:not([data-theme=deep]) {
    background: #fff
}

body.sub:has(section[data-theme=deep]) section.alt:not([data-theme=deep]) {
    background: var(--gray-100)
}

#globe.deep-bg {
    background: linear-gradient(180deg, #00489A 0%, #00356F 55%, #001A38 100%)
}

[data-theme=deep] .stepsrow b {
    color: #fff
}

[data-theme=deep] .stepsrow p {
    color: var(--blue-light)
}

[data-theme=deep] .faq {
    border-top-color: rgba(153, 201, 255, .3)
}

[data-theme=deep] details {
    border-bottom-color: rgba(153, 201, 255, .3)
}

[data-theme=deep] summary {
    color: #fff
}

[data-theme=deep] summary::after {
    color: var(--amber-token)
}

[data-theme=deep] details p {
    color: var(--blue-light)
}

[data-theme=deep] .vframe {
    box-shadow: 0 24px 48px -18px rgba(0, 12, 30, .7)
}

body.sub nav .logo-white {
    display: none
}

body.sub nav .logo-blue {
    display: block
}

body.sub nav ul a {
    color: var(--text-primary)
}

body.sub nav ul a:hover,
body.sub nav ul a.on {
    color: var(--blue-primary)
}

.crumb {
    padding-top: calc(var(--nav-h, 150px) + 24px);
    font-size: var(--fs-body-s);
    color: var(--text-muted)
}

.crumb a {
    color: var(--text-secondary)
}

.crumb b {
    color: var(--text-primary);
    font-weight: var(--fw-bold)
}

.phero {
    padding: 32px 0 clamp(60px, 8vw, 100px)
}

.phero .two {
    align-items: center
}

.phero .lede {
    margin-top: 18px
}

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

.checks li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start
}

.checks svg {
    width: 22px;
    height: 22px;
    color: var(--blue-primary)
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px
}

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

@media(max-width:600px) {

    .grid3,
    .grid2 {
        grid-template-columns: 1fr
    }
}

.ben {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-l);
    padding: 24px;
    display: grid;
    gap: 8px;
    align-content: start
}

.ben .ic {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-m);
    background: var(--blue-tint);
    color: var(--blue-primary);
    display: grid;
    place-items: center;
    margin-bottom: 6px
}

.ben .ic svg {
    width: 22px;
    height: 22px
}

.ben b {
    font-size: var(--fs-h3)
}

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

[data-theme=deep] .ben {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(153, 201, 255, .25);
    color: #fff
}

[data-theme=deep] .ben p {
    color: var(--blue-light)
}

[data-theme=deep] .ben .ic {
    background: rgba(255, 255, 255, .1);
    color: var(--amber-token)
}

.stepsrow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px
}

.stepsrow .s {
    border-top: 2px solid var(--blue-primary);
    padding-top: 16px
}

.stepsrow i {
    font-style: normal;
    font-family: var(--font-mono);
    color: var(--blue-primary);
    font-size: var(--fs-body-s)
}

.stepsrow b {
    display: block;
    font-size: var(--fs-h3);
    margin: 8px 0 6px
}

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

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

.pcta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    align-items: center
}

/* reseñas carrusel */
.reviews {
    margin-top: 40px;
    display: grid;
    gap: 16px
}

.rv-ai {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;
    background: var(--blue-tint);
    border-radius: var(--radius-l);
    padding: 16px 20px;
    font-size: var(--fs-body-s)
}

.rv-ai img {
    width: 44px;
    height: 44px;
    border-radius: 50%
}

.rv-ai b {
    display: block
}

.rv-ai span {
    color: var(--text-secondary)
}

.rv-track {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.rv-run {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: rvrun 60s linear infinite
}

.rv-track.paused .rv-run {
    animation-play-state: paused
}

@keyframes rvrun {
    from {
        transform: translateX(-50%)
    }

    to {
        transform: translateX(0)
    }
}

.rv-run .rv {
    width: 280px;
    flex: none;
    box-shadow: var(--shadow-card);
    background: rgba(255, 255, 255, .95)
}

.rv-head {
    background: var(--surface-page-alt);
    border-radius: var(--radius-l);
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

.rv-head>b {
    font-size: var(--fs-h3)
}

.g {
    font-weight: 700;
    font-size: 22px;
    color: #4285F4;
    letter-spacing: -.02em
}

.g i {
    font-style: normal
}

.g i:nth-of-type(1) {
    color: #EA4335
}

.g i:nth-of-type(2) {
    color: #FBBC05
}

.g i:nth-of-type(3) {
    color: #34A853
}

.rv-score {
    display: flex;
    align-items: center;
    gap: 8px
}

.rv-score>b {
    font-size: var(--fs-h2)
}

.rv-score span {
    color: var(--text-muted);
    font-size: var(--fs-body-s)
}

.stars {
    display: inline-flex;
    gap: 2px
}

.rv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px
}

.rv {
    border-radius: var(--radius-l);
    padding: 20px;
    display: grid;
    gap: 10px;
    align-content: start;
    font-size: var(--fs-body-s)
}

.rv p {
    color: var(--text-primary);
    line-height: 1.5
}

.rv>b {
    font-size: var(--fs-body)
}

.rv-who {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center
}

.rv-who b {
    display: block;
    font-size: var(--fs-body-s)
}

.rv-who span {
    font-size: var(--fs-caption);
    color: var(--text-muted)
}

.rv-who img,
.av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.av {
    background: var(--blue-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700
}

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

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

/* tarjetas satipsfaction: fila india, a lo largo de la columna */
.lcards {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 1/1.83
}

.lcard {
    position: absolute;
    left: 50%;
    width: 46%;
    aspect-ratio: 190/270;
    border-radius: 18px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    box-shadow: var(--shadow-float);
    transition: transform var(--dur-slow) var(--ease-standard)
}

.lcard small {
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    opacity: .85
}

.lcard img {
    width: 54%;
    align-self: center;
    order: 3;
    margin-top: auto
}

.lcard>div {
    order: 2
}

.lcard .nm {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold)
}

.lcard .mono {
    font-size: var(--fs-caption);
    opacity: .85
}

.lcard:nth-child(1) {
    background: var(--blue-secondary);
    top: 0;
    transform: translateX(-78%) rotate(-5deg);
    z-index: 1
}

.lcard:nth-child(2) {
    background: var(--blue-primary);
    top: 21.4%;
    transform: translateX(-22%) rotate(4deg);
    z-index: 2
}

.lcard:nth-child(3) {
    background: var(--blue-deep);
    top: 42.8%;
    transform: translateX(-78%) rotate(-4deg);
    z-index: 3
}

.lcard:nth-child(4) {
    background: var(--blue-deep-2);
    top: 64.3%;
    transform: translateX(-22%) rotate(5deg);
    z-index: 4
}

.lcard:nth-child(1):hover {
    transform: translateX(-80%) rotate(-5deg) translateY(-8px)
}

.lcard:nth-child(2):hover {
    transform: translateX(-20%) rotate(4deg) translateY(-8px)
}

.lcard:nth-child(3):hover {
    transform: translateX(-80%) rotate(-4deg) translateY(-8px)
}

.lcard:nth-child(4):hover {
    transform: translateX(-20%) rotate(5deg) translateY(-8px)
}

@media(max-width:700px) {
    .lcards {
        max-width: 330px
    }
}

.levels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px
}

/* tarjeta por categoría dentro de cada perfil */
.tcard {
    aspect-ratio: 1.586;
    border-radius: 12px;
    padding: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 14px;
    box-shadow: var(--shadow-card)
}

.tcard>span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: var(--fw-bold);
    opacity: .85
}

.tcard img {
    width: 50px;
    align-self: flex-end;
    margin: -4px 0
}

.tcard>b {
    font-size: var(--fs-body-l);
    color: #fff
}

.tcard.t1 {
    background: var(--blue-secondary)
}

.tcard.t2 {
    background: var(--blue-primary)
}

.tcard.t3 {
    background: var(--blue-deep)
}

.tcard.t4 {
    background: var(--blue-deep-2)
}

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

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

/* gwap */
.gwap-visual {
    position: relative;
    width: 100%;
    max-width: 520px;
    justify-self: center;
    aspect-ratio: 520/600
}

.gwap-visual::before {
    content: "";
    position: absolute;
    right: -4%;
    top: 4%;
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 125, 255, .16), transparent 66%)
}

.gwap-card {
    position: absolute;
    left: 0;
    bottom: 3%;
    width: min(306px, 62%);
    aspect-ratio: 1.586;
    border-radius: 20px;
    color: #fff;
    padding: clamp(16px, 4.2%, 22px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
    overflow: hidden;
    background: linear-gradient(142deg, #0A72E6 0%, #00489A 46%, #002548 100%);
    box-shadow: 0 26px 50px -16px rgba(0, 36, 72, .6), 0 4px 12px -4px rgba(0, 36, 72, .35);
    animation: cardfloat 9s ease-in-out infinite
}

.gwap-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 90% at 4% -10%, rgba(255, 255, 255, .26), transparent 52%), radial-gradient(100% 80% at 108% 112%, rgba(0, 125, 255, .42), transparent 60%);
    pointer-events: none
}

.gwap-card::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -30%;
    width: 44%;
    height: 200%;
    transform: rotate(16deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
    pointer-events: none
}

.gwap-card>* {
    position: relative;
    z-index: 1
}

@keyframes cardfloat {

    0%,
    100% {
        transform: rotate(-6deg) translateY(0)
    }

    50% {
        transform: rotate(-6deg) translateY(-12px)
    }
}

.gwap-card .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.gwap-card img {
    height: 17px;
    filter: drop-shadow(0 1px 2px rgba(0, 20, 45, .35))
}

.gwap-card .nfc svg {
    width: 19px;
    height: 19px;
    opacity: .8;
    display: block
}

.gwap-card .mid {
    display: flex;
    align-items: center;
    gap: 14px
}

.gwap-card .chip {
    width: 40px;
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(150deg, #FFE08A, #FDBA02 42%, #C98A00);
    position: relative;
    flex: none;
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 20, 45, .3)
}

.gwap-card .chip::before {
    content: "";
    position: absolute;
    inset: 7px 9px;
    border-top: 1px solid rgba(90, 60, 0, .38);
    border-bottom: 1px solid rgba(90, 60, 0, .38)
}

.gwap-card .chip::after {
    content: "";
    position: absolute;
    inset: 4px 14px;
    border-left: 1px solid rgba(90, 60, 0, .38);
    border-right: 1px solid rgba(90, 60, 0, .38)
}

.gwap-card .num {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(7px, 2.2%, 11px);
    letter-spacing: .05em;
    font-size: clamp(13px, 4.2%, 17px);
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 18, 40, .45)
}

.gwap-card .cfoot {
    display: flex;
    align-items: flex-end;
    gap: clamp(12px, 5%, 26px)
}

.gwap-card .cfoot small {
    display: block;
    font-size: 8.5px;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 3px
}

.gwap-card .cfoot b {
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: .04em
}

.gwap-card .mc {
    display: flex;
    margin-left: auto;
    align-items: center
}

.gwap-card .mc i {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #EB001B;
    display: block
}

.gwap-card .mc i+i {
    background: #F79E1B;
    margin-left: -8px;
    mix-blend-mode: hard-light
}

.gwap-dev {
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(.58);
    transform-origin: top right
}

@media(prefers-reduced-motion:reduce) {
    .gwap-card {
        animation: none;
        transform: rotate(-6deg)
    }
}

.phone {
    position: absolute;
    width: 250px;
    height: 420px;
    border-radius: 36px;
    background: #111;
    padding: 10px;
    box-shadow: var(--shadow-float);
    transform: translateX(90px)
}

.phone .scr {
    background: #fff;
    border-radius: 28px;
    height: 100%;
    padding: 22px 16px;
    display: grid;
    gap: 14px;
    align-content: start;
    font-size: var(--fs-caption);
    color: var(--text-primary)
}

.phone .scr .hi b {
    display: block;
    font-size: var(--fs-body)
}

.phone .scr .hi span {
    color: var(--text-muted)
}

.phone .tabs {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--radius-pill);
    padding: 4px
}

.phone .tabs span {
    flex: 1;
    text-align: center;
    padding: 6px;
    border-radius: var(--radius-pill)
}

.phone .tabs span.on {
    background: #fff;
    box-shadow: var(--shadow-card);
    font-weight: 700
}

.phone .bal {
    background: var(--blue-deep);
    color: #fff;
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 4px;
    position: relative;
    overflow: hidden
}

.phone .bal span {
    opacity: .8
}

.phone .bal b {
    font-family: var(--font-mono);
    font-size: var(--fs-h3);
    color: var(--amber-token)
}

.phone .bal img {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    opacity: .9
}

.phone .acts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center
}

.phone .acts span {
    display: grid;
    gap: 4px;
    justify-items: center
}

.phone .acts i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-100);
    display: block
}

.phone .tx {
    display: grid;
    gap: 8px
}

.phone .tx div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 6px
}

.phone .tx b {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--green-500, #2f9e44)
}

.stores {
    display: flex;
    gap: 10px;
    margin-top: 24px
}

.stores a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111;
    color: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: var(--fs-caption);
    line-height: 1.1
}

.stores a b {
    display: block;
    font-size: var(--fs-body-s)
}

.stores a:hover {
    color: #fff;
    filter: brightness(1.15)
}

@media(max-width:1000px) {
    .gwap-visual {
        max-width: 440px
    }

    .gwap-dev {
        transform: scale(.49)
    }
}

@media(max-width:600px) {
    .gwap-visual {
        max-width: 340px
    }

    .gwap-dev {
        transform: scale(.38)
    }
}

/* pasos animados */
.stepsrow.anim .s {
    border-top: 0;
    padding-top: 0
}

.sanim {
    position: relative;
    height: 104px;
    border-radius: var(--radius-m);
    background: var(--blue-tint);
    overflow: hidden;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-top: 2px solid var(--blue-primary)
}

[data-theme=deep] .sanim {
    background: rgba(255, 255, 255, .08)
}

.sanim .ph {
    width: 42px;
    height: 68px;
    border-radius: 9px;
    border: 2px solid var(--blue-primary);
    background: #fff
}

.sanim .dl {
    position: absolute;
    color: var(--blue-primary);
    animation: sdl 2.4s var(--ease-standard) infinite
}

.sanim .dl svg {
    width: 22px;
    height: 22px;
    display: block
}

@keyframes sdl {
    0% {
        opacity: 0;
        transform: translateY(-26px)
    }

    18% {
        opacity: 1
    }

    64% {
        opacity: 1;
        transform: translateY(8px)
    }

    80%,
    100% {
        opacity: 0;
        transform: translateY(8px)
    }
}

.sanim .cd {
    width: 96px;
    height: 60px;
    border-radius: 9px;
    background: var(--gradient-brand);
    box-shadow: var(--shadow-card);
    position: relative
}

.sanim .cd::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .75)
}

.sanim .cd.ghost {
    position: absolute;
    background: rgba(0, 125, 255, .16);
    box-shadow: none
}

.a2 .cd:not(.ghost) {
    animation: scdin 3.2s var(--ease-standard) infinite
}

@keyframes scdin {
    0% {
        opacity: 0;
        transform: translateY(16px) rotate(-6deg)
    }

    22%,
    72% {
        opacity: 1;
        transform: none
    }

    92%,
    100% {
        opacity: 0;
        transform: translateY(-8px)
    }
}

.a2 .ok {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2F9E44;
    color: #fff;
    display: grid;
    place-items: center;
    transform: translate(46px, 20px);
    animation: sokin 3.2s var(--ease-standard) infinite
}

.a2 .ok svg {
    width: 14px;
    height: 14px
}

@keyframes sokin {

    0%,
    34% {
        opacity: 0;
        transform: translate(46px, 20px) scale(0)
    }

    48%,
    74% {
        opacity: 1;
        transform: translate(46px, 20px) scale(1)
    }

    92%,
    100% {
        opacity: 0
    }
}

.a3 .coin {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--amber-token);
    color: var(--blue-deep);
    font-weight: var(--fw-bold);
    font-size: 12px;
    display: grid;
    place-items: center;
    animation: sdrop 2.6s var(--ease-standard) infinite
}

@keyframes sdrop {
    0% {
        opacity: 0;
        transform: translateY(-38px)
    }

    16% {
        opacity: 1
    }

    62% {
        opacity: 1;
        transform: translateY(-2px)
    }

    78%,
    100% {
        opacity: 0;
        transform: translateY(-2px) scale(.7)
    }
}

.a4 {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center
}

.a4 .cd.sm {
    width: 74px;
    height: 46px;
    animation: stap 2.4s var(--ease-standard) infinite
}

@keyframes stap {

    0%,
    100% {
        transform: translateX(-8px) rotate(-6deg)
    }

    45%,
    60% {
        transform: translateX(4px) rotate(-2deg)
    }
}

.a4 .rad {
    display: flex;
    align-items: center;
    gap: 4px
}

.a4 .rad i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue-primary);
    animation: srad 1.5s ease-in-out infinite
}

.a4 .rad i:nth-child(2) {
    animation-delay: .2s
}

.a4 .rad i:nth-child(3) {
    animation-delay: .4s
}

@keyframes srad {

    0%,
    100% {
        opacity: .2;
        transform: scale(.7)
    }

    50% {
        opacity: 1;
        transform: scale(1.35)
    }
}

.a4 .term {
    width: 42px;
    height: 56px;
    border-radius: 9px;
    background: #fff;
    border: 2px solid var(--blue-primary);
    position: relative;
    flex: none
}

.a4 .term::after {
    content: "";
    position: absolute;
    inset: 7px 7px auto;
    height: 14px;
    border-radius: 3px;
    background: var(--blue-tint)
}

/* pasos gráficos: satélites */
.sv1 .frm {
    width: 104px;
    background: #fff;
    border-radius: 9px;
    padding: 10px;
    display: grid;
    gap: 7px;
    box-shadow: var(--shadow-card)
}

.sv1 .frm span {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: #DCE6F5
}

.sv1 .frm .t {
    width: 46%;
    background: #9FC3EE
}

.sv1 .frm .f {
    background: var(--blue-primary);
    animation: svtype 3.4s var(--ease-standard) infinite
}

@keyframes svtype {
    0% {
        width: 8%
    }

    45%,
    100% {
        width: 86%
    }
}

.sv1 .ok {
    position: absolute;
    right: 20px;
    bottom: 18px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2F9E44;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: var(--fw-bold);
    animation: svpop 3.4s var(--ease-standard) infinite
}

@keyframes svpop {

    0%,
    52% {
        opacity: 0;
        transform: scale(.4)
    }

    66%,
    88% {
        opacity: 1;
        transform: scale(1)
    }

    100% {
        opacity: 0
    }
}

.sv2 .acct {
    width: 118px;
    background: #fff;
    border-radius: 9px;
    padding: 10px;
    display: grid;
    gap: 4px;
    box-shadow: var(--shadow-card);
    animation: svin 3.2s var(--ease-standard) infinite
}

.sv2 .acct b {
    font-size: 11px;
    color: var(--text-primary);
    font-family: var(--font-mono)
}

.sv2 .acct span {
    font-size: 8px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--blue-primary);
    font-weight: var(--fw-bold)
}

@keyframes svin {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    20%,
    80% {
        opacity: 1;
        transform: none
    }

    96%,
    100% {
        opacity: 0
    }
}

.sv2 .stamp {
    position: absolute;
    right: 20px;
    top: 22px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #2F9E44;
    color: #2F9E44;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: var(--fw-bold);
    animation: svstamp 3.2s var(--ease-standard) infinite
}

@keyframes svstamp {

    0%,
    42% {
        opacity: 0;
        transform: scale(1.6) rotate(-12deg)
    }

    56%,
    86% {
        opacity: 1;
        transform: scale(1) rotate(-12deg)
    }

    100% {
        opacity: 0;
        transform: scale(1) rotate(-12deg)
    }
}

.sv3 .room {
    width: 98px;
    height: 62px;
    border-radius: 9px;
    background: var(--blue-deep);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card)
}

.sv3 .room::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 24%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%)
}

.sv3 .room::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 56%;
    width: 28px;
    height: 26px;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, .78);
    transform: translateX(-50%)
}

.sv3 .live {
    position: absolute;
    top: 18px;
    left: calc(50% - 45px);
    display: flex;
    align-items: center;
    gap: 4px;
    background: #E03131;
    color: #fff;
    font-size: 8px;
    font-weight: var(--fw-bold);
    letter-spacing: .09em;
    padding: 3px 6px;
    border-radius: 4px
}

.sv3 .live i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    animation: svblink 1.4s ease-in-out infinite
}

@keyframes svblink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .25
    }
}

.sv3 .mon {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue-primary);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-card)
}

.sv3 .mon svg {
    width: 16px;
    height: 16px
}

.sv3 .arc {
    position: absolute;
    left: 16px;
    bottom: 18px;
    display: flex;
    align-items: flex-end;
    gap: 3px
}

.sv3 .arc i {
    width: 4px;
    border-radius: 2px;
    background: var(--blue-primary);
    animation: svwv 1.2s ease-in-out infinite;
    transform-origin: bottom
}

.sv3 .arc i:nth-child(1) {
    height: 8px
}

.sv3 .arc i:nth-child(2) {
    height: 14px;
    animation-delay: .15s
}

.sv3 .arc i:nth-child(3) {
    height: 20px;
    animation-delay: .3s
}

@keyframes svwv {

    0%,
    100% {
        transform: scaleY(.45)
    }

    50% {
        transform: scaleY(1)
    }
}

.sv4 {
    padding-top: 16px
}

.sv4 .rc {
    width: 124px;
    background: #fff;
    border-radius: 9px;
    padding: 9px 8px;
    display: grid;
    gap: 5px;
    box-shadow: var(--shadow-card);
    justify-items: center
}

.sv4 .rc b {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--blue-primary);
    white-space: nowrap
}

.sv4 .rc span {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: var(--fw-bold);
    color: var(--text-muted)
}

.sv4 .coin {
    position: absolute;
    top: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--amber-token);
    color: var(--blue-deep);
    font-size: 12px;
    font-weight: var(--fw-bold);
    display: grid;
    place-items: center;
    animation: sdrop 2.6s var(--ease-standard) infinite
}

@media(prefers-reduced-motion:reduce) {
    .sanim * {
        animation: none !important
    }

    .sv1 .frm .f {
        width: 86%
    }
}

/* términos */
.terms {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    margin-top: 40px;
    align-items: start
}

.toc {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 4px;
    font-size: var(--fs-body-s)
}

.toc a {
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: var(--radius-m);
    display: flex;
    gap: 10px
}

.toc a i {
    font-style: normal;
    font-family: var(--font-mono);
    color: var(--blue-primary)
}

.toc a:hover,
.toc a.on {
    background: var(--blue-tint);
    color: var(--blue-primary)
}

.tbody {
    display: grid;
    gap: 8px;
    max-width: 720px
}

.tbody article {
    padding: 28px 0;
    border-top: 1px solid var(--border-subtle);
    scroll-margin-top: 96px
}

.tbody h3 {
    font-size: var(--fs-h3);
    display: flex;
    gap: 12px;
    align-items: baseline
}

.tbody h3 i {
    font-style: normal;
    font-family: var(--font-mono);
    color: var(--blue-primary);
    font-size: var(--fs-body-s)
}

.tbody p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 10px
}

.tbody .sum {
    background: var(--blue-tint);
    border-radius: var(--radius-m);
    padding: 14px 16px;
    font-size: var(--fs-body-s);
    color: var(--blue-deep);
    margin-top: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start
}

.tbody .sum svg {
    width: 18px;
    height: 18px;
    margin-top: 2px
}

.tmeta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: var(--fs-body-s);
    color: var(--text-muted);
    margin-top: 18px
}

.tmeta b {
    color: var(--text-primary)
}

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

    .toc {
        position: static;
        grid-template-columns: 1fr 1fr
    }
}

/* agenda */
.book {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    margin-top: 36px;
    overflow: hidden
}

.book .who {
    padding: 32px;
    border-right: 1px solid var(--border-subtle);
    display: grid;
    gap: 10px;
    align-content: start
}

.book .who img.lg {
    height: 28px;
    margin-bottom: 24px
}

.book .who .av {
    width: 56px;
    height: 56px;
    font-size: 20px
}

.book .who small {
    color: var(--text-muted);
    font-size: var(--fs-body-s)
}

.book .who h3 {
    font-size: var(--fs-h2)
}

.book .meta {
    display: grid;
    gap: 6px;
    font-size: var(--fs-body-s);
    color: var(--text-secondary)
}

.book .meta span {
    display: flex;
    gap: 8px;
    align-items: center
}

.book .meta svg {
    width: 16px;
    height: 16px
}

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

.book .pick {
    padding: 32px
}

.book .pick h3 {
    font-size: var(--fs-h3);
    margin-bottom: 16px
}

.cal {
    display: grid;
    gap: 6px
}

.cal .mh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-s)
}

.cal .mh button {
    border: 0;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: var(--blue-primary);
    width: 32px;
    height: 32px
}

.cal .dh,
.cal .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center
}

.cal .dh span {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 6px 0
}

.cal .days button {
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--fs-body-s);
    color: var(--text-muted);
    cursor: default
}

.cal .days button.av {
    background: var(--blue-tint);
    color: var(--blue-primary);
    font-weight: 700;
    cursor: pointer
}

.cal .days button.av:hover {
    filter: brightness(.96)
}

.cal .days button.sel {
    background: var(--blue-primary);
    color: #fff
}

.tz {
    margin-top: 16px;
    font-size: var(--fs-caption);
    color: var(--text-muted)
}

.tz b {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px
}

.slots {
    display: grid;
    gap: 8px;
    margin-top: 16px
}

.slots button {
    height: 44px;
    border-radius: var(--radius-m);
    border: 1px solid var(--blue-primary);
    background: #fff;
    color: var(--blue-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer
}

.slots button:hover {
    background: var(--blue-tint)
}

.slots .sel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.slots .sel span {
    height: 44px;
    border-radius: var(--radius-m);
    background: var(--gray-600, #495057);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700
}

.book .pick .back {
    border: 0;
    background: transparent;
    color: var(--blue-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-bottom: 12px
}

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

    .book .who {
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle)
    }
}

/* hero con video (satélites) */
.vframe {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius-l);
    overflow: hidden;
    background: var(--blue-deep);
    box-shadow: var(--shadow-card)
}

.vframe video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none
}

.vframe.live video {
    display: block
}

.vframe.live image-slot {
    display: none
}

.vframe image-slot {
    position: absolute;
    inset: 0
}

.vph {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    text-align: center;
    padding: 24px;
    color: #fff;
    pointer-events: none;
    background: radial-gradient(circle at 50% 42%, rgba(0, 53, 111, .42), rgba(0, 53, 111, .04))
}

.vph .pl {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(153, 201, 255, .55);
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    transition: transform var(--dur-slow) var(--ease-standard), background var(--dur-slow)
}

.vframe:hover .vph .pl {
    transform: scale(1.06);
    background: rgba(255, 255, 255, .26)
}

.vph .pl svg {
    width: 24px;
    height: 24px;
    color: #fff
}

.vph b {
    font-size: var(--fs-body-l)
}

.vph span {
    font-size: var(--fs-caption);
    color: var(--blue-light);
    max-width: 320px
}

.vph code {
    font-family: var(--font-mono);
    color: var(--amber-token)
}

.vframe.live .vph {
    display: none
}

.sat-bens {
    margin-top: clamp(28px, 4vw, 44px)
}

/* espacio para fotografía */
.photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
    margin-top: 40px
}

.photos figure {
    margin: 0;
    display: grid;
    gap: 10px
}

.photos .ph {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow)
}

.photos figure:hover .ph {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float)
}

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

[data-theme=deep] .photos figcaption {
    color: var(--blue-light)
}

.photos .wide {
    grid-column: span 3
}

.photos .wide .ph {
    aspect-ratio: 21/9
}

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

    .photos .wide {
        grid-column: span 2
    }
}

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

    .photos .wide {
        grid-column: span 1;
        aspect-ratio: 4/3
    }

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

/* aparición suave al entrar en vista */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard)
}

[data-reveal].in {
    opacity: 1;
    transform: none
}

.ben,
.tier {
    transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow), border-color var(--dur-slow)
}

.ben:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card)
}

@media(prefers-reduced-motion:reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none
    }

    .ben:hover,
    .photos figure:hover .ph {
        transform: none
    }
}

/* footer del template general: 3 columnas + barra legal */
.foot {
    background: var(--blue-deep-2);
    color: var(--blue-light);
    padding: clamp(48px, 6vw, 76px) 0 28px;
    font-size: var(--fs-body-s);
    position: relative;
    z-index: 1
}

.foot .cols {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: clamp(28px, 5vw, 56px)
}

.foot h4 {
    color: #fff;
    font-size: var(--fs-body-l);
    margin: 0 0 18px;
    letter-spacing: var(--ls-tight)
}

.foot p {
    margin: 0 0 12px;
    line-height: 1.55
}

.foot a {
    color: #fff
}

.foot a:hover {
    color: var(--amber-token)
}

.fl {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start
}

.fl svg {
    width: 16px;
    height: 16px;
    color: var(--blue-light);
    margin-top: 3px
}

.seal {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(153, 201, 255, .25);
    border-radius: var(--radius-m);
    padding: 14px 16px;
    margin-top: 18px
}

.seal .lk {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue-deep);
    display: grid;
    place-items: center;
    flex: none
}

.seal .lk svg {
    width: 20px;
    height: 20px
}

.seal b {
    display: block;
    color: #fff;
    font-size: var(--fs-body)
}

.seal>span>span {
    font-size: var(--fs-caption)
}

.foot .rate {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: var(--fs-caption)
}

.foot .rate .rs {
    display: flex;
    gap: 2px;
    color: var(--amber-token)
}

.foot .rate .rs svg {
    width: 15px;
    height: 15px
}

.foot .rate b {
    color: #fff;
    font-size: var(--fs-body)
}

.mmv {
    border: 1px dashed rgba(153, 201, 255, .45);
    border-radius: var(--radius-m);
    min-height: 156px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    text-align: center;
    padding: 18px
}

.mmv b {
    color: #fff;
    font-size: var(--fs-body)
}

.mmv span {
    font-size: var(--fs-caption);
    max-width: 220px
}

.mmv-live img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-m)
}

.foot .legal {
    margin-top: clamp(32px, 4vw, 48px);
    padding-top: 22px;
    border-top: 1px solid rgba(153, 201, 255, .25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.foot .legal img {
    height: 26px
}

.foot .legal .lks {
    display: flex;
    gap: 12px;
    align-items: center
}

.foot .legal .lks i {
    font-style: normal;
    opacity: .5
}

@media(max-width:800px) {
    .foot .cols {
        grid-template-columns: 1fr
    }
}