* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--blue-deep-2);
    color: var(--text-primary);
    font-size: var(--fs-body);
    overflow-x: hidden;
    font-weight: var(--fw-regular)
}

a {
    color: var(--text-link);
    text-decoration: none
}

a:hover {
    color: var(--text-link-hover)
}

h1,
h2,
h3 {
    margin: 0;
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-bold);
    text-wrap: pretty
}

p {
    margin: 0;
    text-wrap: pretty
}

.mono {
    font-family: var(--font-mono)
}

#globe {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 64px);
    width: 100%
}

section {
    position: relative;
    z-index: 1
}

[data-theme=dark] {
    color: var(--text-inverse)
}

[data-theme=dark] .muted {
    color: var(--blue-light)
}

[data-theme=light] .muted {
    color: var(--text-secondary)
}

.eyebrow {
    font-size: var(--fs-body-s);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--blue-light)
}

[data-theme=light] .eyebrow {
    color: var(--blue-primary)
}

/* nav: franja superior + marca grande + menú completo en dos filas */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    transition: background var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow)
}

.topbar {
    border-bottom: 1px solid rgba(153, 201, 255, .22);
    font-size: var(--fs-caption);
    overflow: hidden;
    max-height: 42px;
    transition: max-height var(--dur-slow) var(--ease-standard), opacity var(--dur-fast)
}

body.scrolled .topbar {
    max-height: 0;
    opacity: 0;
    border-bottom-color: transparent
}

.topbar .wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 42px;
    color: var(--blue-light)
}

.topbar .trm {
    font-weight: var(--fw-bold);
    color: #fff;
    white-space: nowrap
}

.topbar .trm b {
    font-family: var(--font-mono);
    color: var(--amber-token)
}

.topbar .social {
    margin-left: auto
}

.navmain .wrap {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    padding-top: 12px;
    padding-bottom: 12px
}

.brand {
    flex: none;
    display: block
}

.brand img {
    height: clamp(46px, 5.2vw, 72px);
    width: auto;
    display: block;
    transition: height var(--dur-slow) var(--ease-standard)
}

body.scrolled .brand img {
    height: clamp(38px, 3.8vw, 52px)
}

nav .logo-blue {
    display: none
}

nav ul {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: var(--fw-bold)
}

nav ul a {
    color: #fff;
    display: block;
    padding: 3px 0
}

nav ul a:hover,
nav ul a.on {
    color: var(--amber-token)
}

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

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

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

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

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

body.light .topbar,
body.sub .topbar {
    border-bottom-color: var(--border-subtle)
}

/* al hacer scroll el nav toma fondo propio: contraste sobre cualquier sección */
body.scrolled nav {
    background: var(--blue-deep-2);
    box-shadow: var(--shadow-card)
}

body.scrolled.light nav,
body.scrolled.sub nav {
    background: rgba(255, 255, 255, .97)
}

body.light .topbar .wrap,
body.sub .topbar .wrap {
    color: var(--text-secondary)
}

body.light .topbar .trm,
body.sub .topbar .trm {
    color: var(--text-primary)
}

body.light .topbar .trm b,
body.sub .topbar .trm b {
    color: var(--blue-primary)
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    flex: none
}

.burger i {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--dur-fast), opacity var(--dur-fast)
}

body.light .burger i,
body.sub .burger i {
    background: var(--text-primary)
}

body.menu-open .burger i:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

body.menu-open .burger i:nth-child(2) {
    opacity: 0
}

body.menu-open .burger i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

@media(max-width:1180px) {
    nav ul {
        font-size: 12px;
        gap: 2px 13px
    }
}

@media(max-width:820px) {
    nav ul {
        display: none;
        position: fixed;
        top: var(--nav-h, 120px);
        left: 0;
        right: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        background: var(--blue-deep-2);
        padding: 8px 0 16px;
        box-shadow: var(--shadow-float);
        max-height: calc(100vh - var(--nav-h, 120px));
        overflow-y: auto
    }

    nav ul a {
        padding: 12px clamp(20px, 5vw, 64px);
        font-size: var(--fs-body)
    }

    nav ul {
        font-size: var(--fs-body)
    }

    body.menu-open nav ul {
        display: flex
    }

    body.menu-open nav {
        background: var(--blue-deep-2)
    }

    body.light nav ul,
    body.sub nav ul {
        background: #fff
    }

    body.light.menu-open nav,
    body.sub.menu-open nav {
        background: #fff
    }

    .burger {
        display: flex;
        margin-left: auto
    }
}

@media(max-width:760px) {
    .topbar .clock {
        display: none
    }

    .topbar .trm {
        white-space: normal
    }
}

@media(max-width:560px) {
    .topbar .social {
        display: none
    }
}

/* hero */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h, 150px) + 28px) 0 64px
}

#hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center
}

.rotator {
    display: grid
}

.rot {
    grid-area: 1/1;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard);
    pointer-events: none
}

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

#hero h1 {
    margin-top: 14px
}

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

.lede {
    font-size: var(--fs-body-l);
    max-width: 520px;
    margin-top: 20px;
    line-height: var(--lh-body)
}

.dots {
    display: flex;
    gap: 8px;
    margin-top: 40px
}

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

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

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

    #hero {
        min-height: auto;
        padding-bottom: 40px
    }
}

/* foto en el titular rotativo */
.heropics {
    position: relative;
    aspect-ratio: 4/3;
    width: 100%
}

.hp {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard);
    pointer-events: none
}

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

@media(max-width:900px) {
    .heropics {
        aspect-ratio: 16/10;
        margin-top: 28px
    }
}

/* titular: rotativo (por defecto), fijo o manifiesto */
body[data-titular=fijo] .dots,
body[data-titular=manifiesto] .dots {
    display: none
}

body[data-titular=manifiesto] .rotator {
    display: grid;
    gap: 20px
}

body[data-titular=manifiesto] .rot {
    grid-area: auto;
    opacity: 1;
    transform: none;
    border-top: 1px solid rgba(153, 201, 255, .28);
    padding-top: 16px
}

body[data-titular=manifiesto] .rot:first-child {
    border-top: 0;
    padding-top: 0
}

body[data-titular=manifiesto] #hero h1 {
    font-size: clamp(21px, 2.2vw, 30px);
    margin-top: 8px
}

body[data-titular=manifiesto] .rot .lede {
    font-size: var(--fs-body-s);
    margin-top: 8px;
    max-width: 560px
}

body[data-titular=manifiesto] [data-theme=light] .rot {
    border-top-color: var(--border-subtle)
}

/* escala */
#escala,
#flujo {
    padding: clamp(72px, 9vw, 124px) 0
}

h2.wide {
    margin-top: 14px;
    max-width: none
}

.metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 44px;
    margin-top: 48px;
    max-width: 660px
}

.metric {
    border-top: 1px solid rgba(153, 201, 255, .3);
    padding-top: 14px
}

.metric .ic {
    display: block;
    color: var(--blue-light);
    margin-bottom: 12px
}

.metric .ic svg {
    width: 24px;
    height: 24px;
    display: block
}

[data-theme=light] .metric .ic {
    color: var(--blue-primary)
}

.metric b {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(26px, 2.9vw, 38px);
    font-weight: 600;
    color: var(--amber-token);
    line-height: 1.1
}

.metric span {
    display: block;
    font-size: var(--fs-body-s);
    color: var(--blue-light);
    margin-top: 8px;
    line-height: 1.45
}

@media(max-width:560px) {
    .metrics {
        grid-template-columns: 1fr;
        gap: 16px
    }
}

[data-theme=light] .metric {
    border-top-color: var(--border-subtle)
}

[data-theme=light] .metric b {
    color: var(--blue-primary)
}

[data-theme=light] .metric span,
[data-theme=light] .steprow p {
    color: var(--text-secondary)
}

[data-theme=light] .steprow .s {
    border-top-color: var(--blue-primary)
}

[data-theme=light] .steprow i {
    color: var(--blue-primary)
}

/* cómo funciona: 4 columnas horizontales */
.steprow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 32px);
    margin-top: 52px
}

.steprow .s {
    border-top: 2px solid var(--amber-token);
    padding-top: 18px
}

.steprow i {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--fs-body-s);
    color: var(--amber-token)
}

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

.steprow p {
    color: var(--blue-light);
    font-size: var(--fs-body-s);
    line-height: 1.55
}

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

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

/* representación gráfica de cada paso */
.steprow.viz .s {
    border-top: 0;
    padding-top: 0
}

.vz {
    position: relative;
    height: 136px;
    border-radius: 14px;
    border: 1px solid rgba(153, 201, 255, .22);
    border-top: 2px solid var(--amber-token);
    background: linear-gradient(180deg, rgba(153, 201, 255, .15), rgba(0, 40, 85, .28));
    overflow: hidden;
    display: grid;
    place-items: center;
    margin-bottom: 18px
}

[data-theme=light] .vz {
    background: var(--blue-tint);
    border-color: rgba(0, 125, 255, .16);
    border-top-color: var(--blue-primary)
}

.vz1 .frm {
    width: 108px;
    background: #fff;
    border-radius: 9px;
    padding: 10px;
    display: grid;
    gap: 7px;
    box-shadow: 0 10px 22px -10px rgba(0, 18, 45, .55)
}

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

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

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

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

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

.vz1 .ok {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--amber-token);
    color: var(--blue-deep-2);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    animation: vzpop 3.4s var(--ease-standard) infinite
}

@keyframes vzpop {

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

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

    100% {
        opacity: 0;
        transform: scale(1)
    }
}

.vz2 {
    display: flex;
    align-items: center;
    justify-content: center
}

.vz2 .tiles {
    display: grid;
    gap: 8px
}

.vz2 .tiles span {
    width: 36px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 10px -6px rgba(0, 18, 45, .6)
}

.vz2 .wire {
    position: relative;
    width: 52px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(153, 201, 255, .55) 0 6px, transparent 6px 12px)
}

.vz2 .wire::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber-token);
    animation: vzflow 2.2s linear infinite
}

@keyframes vzflow {
    0% {
        left: -4px;
        opacity: 0
    }

    16% {
        opacity: 1
    }

    84% {
        opacity: 1
    }

    100% {
        left: 48px;
        opacity: 0
    }
}

.vz2 .hub {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--blue-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 17px;
    box-shadow: 0 0 0 6px rgba(0, 125, 255, .18)
}

.vz3 {
    justify-items: center;
    align-content: center;
    gap: 10px
}

.vz3 .fld {
    width: 132px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .95);
    color: var(--blue-deep-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600
}

.vz3 .fld span:last-child {
    color: var(--blue-primary);
    font-size: 11px
}

.vz3 .usd {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--amber-token)
}

.vz3 .coin {
    position: absolute;
    top: 16px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--amber-token);
    color: var(--blue-deep-2);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    animation: vzdrop 2.6s var(--ease-standard) infinite
}

@keyframes vzdrop {
    0% {
        opacity: 0;
        transform: translateY(-24px)
    }

    20% {
        opacity: 1
    }

    58% {
        opacity: 1;
        transform: translateY(26px)
    }

    74%,
    100% {
        opacity: 0;
        transform: translateY(26px) scale(.6)
    }
}

.vz4 {
    justify-items: center;
    align-content: center;
    gap: 9px
}

.vz4 .ways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px
}

.vz4 .ways span {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(153, 201, 255, .32);
    animation: vzhi 4s linear infinite
}

[data-theme=light] .vz4 .ways span {
    background: #fff;
    color: var(--blue-deep);
    border-color: rgba(0, 125, 255, .2)
}

.vz4 .ways span:nth-child(2) {
    animation-delay: 1s
}

.vz4 .ways span:nth-child(3) {
    animation-delay: 2s
}

.vz4 .ways span:nth-child(4) {
    animation-delay: 3s
}

@keyframes vzhi {

    0%,
    16% {
        background: var(--amber-token);
        color: #00356F;
        border-color: transparent
    }

    22%,
    100% {
        background: rgba(255, 255, 255, .16);
        color: #fff;
        border-color: rgba(153, 201, 255, .32)
    }
}

.vz4 .done {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--amber-token)
}

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

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

/* light product sections */
.block {
    padding: clamp(80px, 10vw, 140px) 0
}

[data-theme=light] {
    background: rgba(255, 255, 255, .94)
}

[data-theme=light].alt {
    background: rgba(244, 246, 251, .94)
}

[data-theme=deep] {
    background: var(--blue-deep);
    color: #fff
}

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

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

.block h2 {
    max-width: 720px
}

.block .lede {
    margin-top: 16px
}

.two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start
}

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

.table {
    margin-top: 40px;
    border-top: 1px solid var(--border-subtle)
}

.table .tr {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-body-s)
}

.table .tr b {
    font-size: var(--fs-body)
}

.table .th {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-bold);
    padding: 12px 0
}

.table .v {
    font-family: var(--font-mono)
}

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

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

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

@media(max-width:700px) {
    .table .tr {
        grid-template-columns: 1fr 1fr
    }

    .table .tr>:nth-child(4) {
        display: none
    }

    .table .th {
        display: none
    }
}

/* gwap card */
.card-3d {
    aspect-ratio: 1.586;
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    background: var(--gradient-brand);
    color: #fff;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-float);
    transform: rotate(-6deg);
    justify-self: center
}

.card-3d img {
    height: 22px;
    align-self: flex-start
}

.card-3d .num {
    font-family: var(--font-mono);
    font-size: var(--fs-h3);
    letter-spacing: .08em
}

.card-3d .foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    font-size: var(--fs-caption)
}

.card-3d .mc {
    display: flex
}

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

.card-3d .mc i+i {
    background: #F79E1B;
    margin-left: -10px;
    mix-blend-mode: normal
}

.facts {
    display: grid;
    gap: 18px;
    margin-top: 36px
}

.fact {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: baseline;
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px
}

.fact b {
    font-family: var(--font-mono);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--blue-primary);
    min-width: 110px
}

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

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

.tier.top {
    border-color: var(--blue-primary);
    box-shadow: var(--shadow-card)
}

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

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

.tier .v {
    font-family: var(--font-mono);
    color: var(--amber-token-deep);
    font-weight: 600;
    font-size: var(--fs-body-l)
}

.tier ul {
    margin: 6px 0 0;
    padding-left: 16px;
    font-size: var(--fs-body-s);
    color: var(--text-secondary);
    line-height: 1.5
}

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

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

/* audiencias */
.aud {
    display: grid;
    gap: 12px;
    background: var(--blue-deep-2);
    border-radius: var(--radius-l);
    padding: 28px
}

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

.aud ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--blue-light);
    line-height: 1.6;
    font-size: var(--fs-body-s)
}

.aud .mount {
    margin-top: 8px
}

/* comunidad */
.feed {
    display: grid;
    gap: 12px;
    margin-top: 32px;
    max-width: 360px
}

.feed>div {
    transition: opacity var(--dur-slow)
}

.forum {
    display: grid;
    gap: 10px;
    margin-top: 32px
}

.thread {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(153, 201, 255, .25);
    border-radius: var(--radius-m);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    font-size: var(--fs-body-s)
}

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

.thread span {
    color: var(--blue-light)
}

/* faq */
.faq {
    margin-top: 40px;
    border-top: 1px solid var(--border-subtle)
}

details {
    border-bottom: 1px solid var(--border-subtle)
}

summary {
    cursor: pointer;
    padding: 20px 0;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-l);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px
}

summary::after {
    content: "+";
    color: var(--blue-primary);
    font-family: var(--font-mono)
}

details[open] summary::after {
    content: "–"
}

details p {
    padding: 0 0 20px;
    color: var(--text-secondary);
    max-width: 680px
}

/* registro */
#registro {
    background: var(--gradient-brand);
    color: #fff
}

#registro .two {
    align-items: center
}

.form {
    background: #fff;
    color: var(--text-primary);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-float);
    padding: 32px
}

.form h3 {
    font-size: var(--fs-h2);
    margin-bottom: 6px
}

/* aviso en vivo (flotante, abajo a la izquierda) */
#avisos {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 29;
    width: min(348px, calc(100vw - 32px));
    pointer-events: none;
    font-family: var(--font-sans)
}

#avisos>div {
    pointer-events: auto;
    animation: avin .42s var(--ease-standard)
}

#avisos .lm,
.feed .lm {
    width: 98px;
    height: 86px;
    border-radius: 12px;
    display: block
}

@keyframes avin {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

body[data-aviso=seccion] #avisos,
#avisos.hold {
    display: none
}

@media(max-width:700px) {
    #avisos {
        left: 16px;
        right: 16px;
        width: auto
    }
}

/* asistente */
#asistente {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: var(--font-sans)
}

.fabs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px
}

.wastack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px
}

.wamenu {
    display: grid;
    gap: 8px;
    animation: avin .26s var(--ease-standard)
}

.wamenu a {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-float);
    padding: 10px 14px;
    color: var(--text-primary);
    min-width: 238px
}

.wamenu a:hover {
    color: var(--text-primary);
    filter: brightness(.98)
}

.wamenu .ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: grid;
    place-items: center;
    flex: none
}

.wamenu .ico svg {
    width: 18px;
    height: 18px
}

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

.wamenu span {
    font-size: var(--fs-caption);
    color: var(--text-secondary)
}

.fab .ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
    flex: none
}

.fab .ic svg {
    width: 20px;
    height: 20px
}

.fab.wa {
    width: 56px;
    padding: 0;
    justify-content: center;
    color: #fff;
    background: #25D366
}

.fab.wa svg {
    width: 24px;
    height: 24px
}

.fab.call {
    width: 56px;
    padding: 0;
    justify-content: center
}

.fab.call .ic {
    background: transparent
}

/* llamada gratis */
.callq {
    padding: 18px 18px 6px;
    font-size: var(--fs-body-s);
    color: var(--text-secondary);
    line-height: 1.5
}

.callq>b {
    display: block;
    color: var(--text-primary);
    font-size: var(--fs-body-l);
    margin-bottom: 6px;
    letter-spacing: var(--ls-tight)
}

.callopt {
    display: grid;
    gap: 10px;
    padding: 12px 18px 20px
}

.callopt button {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-l);
    padding: 14px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color var(--dur-fast), transform var(--dur-fast)
}

.callopt button:hover {
    border-color: var(--blue-primary)
}

.callopt button:active {
    transform: scale(.99)
}

.callopt .ico {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue-tint);
    color: var(--blue-primary);
    display: grid;
    place-items: center;
    flex: none
}

.callopt .ico svg {
    width: 19px;
    height: 19px
}

.callopt b {
    display: block;
    font-size: var(--fs-body-s);
    color: var(--text-primary)
}

.callopt span {
    font-size: var(--fs-caption);
    color: var(--text-secondary)
}

.callform {
    display: grid;
    gap: 14px;
    padding: 18px;
    overflow-y: auto
}

.callform input,
.callform select {
    background: #fff;
    color: var(--text-primary)
}

.callscr {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 22px 18px 14px;
    background: var(--blue-deep);
    color: #fff;
    overflow-y: auto
}

.callscr .ring {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    animation: ringpulse 2.2s var(--ease-standard) infinite
}

.callscr .ring img {
    width: 62px;
    height: 62px;
    object-fit: contain
}

@keyframes ringpulse {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 186, 2, .45)
    }

    70% {
        box-shadow: 0 0 0 20px rgba(253, 186, 2, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(253, 186, 2, 0)
    }
}

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

.callscr .t {
    color: var(--amber-token);
    font-size: var(--fs-body-s)
}

.wave {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 28px;
    margin-top: 2px
}

.wave i {
    width: 4px;
    height: 6px;
    border-radius: 2px;
    background: var(--blue-light);
    animation: wv 1.1s ease-in-out infinite
}

@keyframes wv {

    0%,
    100% {
        height: 6px
    }

    50% {
        height: 26px
    }
}

.callbtns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px
}

.cbtn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    transition: filter var(--dur-fast), transform var(--dur-fast)
}

.cbtn svg {
    width: 20px;
    height: 20px
}

.cbtn:hover {
    filter: brightness(1.15)
}

.cbtn:active {
    transform: scale(.96)
}

.cbtn.on {
    background: var(--amber-token);
    color: var(--blue-deep)
}

.cbtn.end {
    background: #E03131
}

.callnote {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    text-align: center;
    padding: 10px 18px 14px;
    line-height: 1.45;
    flex: none
}

.callnote code {
    font-family: var(--font-mono);
    color: var(--blue-primary)
}

.callscr elevenlabs-convai {
    display: block;
    min-height: 180px
}

@media(prefers-reduced-motion:reduce) {

    .callscr .ring,
    .wave i {
        animation: none
    }
}

@media(max-width:700px) {
    #asistente {
        right: 16px;
        bottom: 16px
    }

    .fabs {
        gap: 10px
    }

    .fab {
        width: 56px;
        padding: 0;
        justify-content: center
    }

    .fab-label {
        display: none
    }

    .fab .ic {
        background: transparent
    }

    .wamenu a {
        min-width: 0;
        max-width: calc(100vw - 48px)
    }

    .panel {
        width: calc(100vw - 32px);
        max-height: calc(100vh - 96px)
    }
}

/* redes */
.social {
    display: flex;
    gap: 2px
}

.social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff
}

.social a svg {
    width: 17px;
    height: 17px
}

.social a:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff
}

body.light .social a,
body.sub .social a {
    color: var(--text-secondary)
}

body.light .social a:hover,
body.sub .social a:hover {
    background: var(--blue-tint);
    color: var(--blue-primary)
}

.fab {
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--blue-primary);
    color: #fff;
    border: 0;
    padding: 0 22px 0 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-s);
    cursor: pointer;
    box-shadow: var(--shadow-fab);
    transition: filter var(--dur-fast), transform var(--dur-fast)
}

.fab:hover {
    filter: brightness(1.08)
}

.fab:active {
    transform: scale(.97)
}

.fab img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    padding: 6px
}

.panel {
    width: min(380px, calc(100vw - 48px));
    background: #fff;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-float);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    max-height: min(600px, calc(100vh - 120px));
    overflow: hidden
}

.panel header {
    background: var(--blue-deep);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px
}

.panel header img {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    padding: 4px
}

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

.panel header span {
    font-size: var(--fs-caption);
    color: var(--blue-light)
}

.panel header button {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1
}

.msgs {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    font-size: var(--fs-body-s);
    line-height: 1.5
}

.msg {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 88%;
    white-space: pre-wrap
}

.msg.u {
    align-self: flex-end;
    background: var(--blue-primary);
    color: #fff;
    border-bottom-right-radius: 4px
}

.msg.a {
    align-self: flex-start;
    background: var(--gray-100);
    border-bottom-left-radius: 4px
}

.sug {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 16px 12px
}

.sug button {
    font: inherit;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--blue-primary);
    color: var(--blue-primary);
    background: #fff;
    cursor: pointer
}

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

.ask {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-subtle)
}

.ask input {
    flex: 1;
    height: 44px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    padding: 0 16px;
    font: inherit;
    font-size: var(--fs-body-s)
}

.ask input:focus {
    outline: 0;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-inset-focus)
}

.ask button {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--blue-primary);
    color: #fff;
    cursor: pointer;
    font-size: 18px
}

.ask button:disabled {
    background: var(--gray-300)
}

.dsrow {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}