/* Automatización de WhatsApp en tono claro, a juego con el hero de Zagal.
   Sobrescribe los colores oscuros de la plantilla de campaña sin tocar los móviles, pantallas y pegatinas de ejemplo,
   que conservan sus colores reales. El menú y el pie siguen siendo los del resto de la web. */
body.wa-page{--zl-bg:#f6f1f9;--zl-card:#fff;--zl-tint:#efe5f6;--zl-ink:#1d1428;--zl-soft:#4e4359;--zl-mute:#6f6479;--zl-line:#1d14281f;--zl-z:#6b269c;--zl-z2:#7a3ec6;--zl-green:#13804a;--zl-red:#c62f45;--zl-shadow:0 14px 34px #3b17681a}
html body.wa-page,html body.wa-page main{background:var(--zl-bg)!important;color:var(--zl-ink)}
/* Sin fondo propio: si no, tapa el hero a todo el ancho y no se ve la tarjeta de «El problema» */
html body.wa-page .service-content{background:transparent!important;color:var(--zl-ink)}
html body.wa-page #hero.zh{background:radial-gradient(50% 60% at 74% 52%,#f7f1fb 0%,#e7dcee00 72%),#e7dcee}
html body.wa-page :is(.dolor,.zt){background:transparent!important}
/* Marco y muesca del menú del color de la página, como en Páginas web (allí el marco es el lila de la página) */
html:has(body.wa-page){--ink:#f6f1f9}

/* Titulares en Nunito, como el del hero */
html body.wa-page :is(main .blk:not(#hero) :is(h2,.zt-title,.zs-title,.tier-name),#dolor h3,dialog.panel-dialog h2){font-family:Nunito,DM,sans-serif!important;font-weight:800!important;letter-spacing:-.025em!important}
html body.wa-page :is(main .blk:not(#hero) :is(h2,.zt-title),dialog.panel-dialog h2) em{font-family:inherit!important;font-style:normal!important;font-weight:inherit!important}

/* Texto general de las secciones (fuera de las maquetas) */
html body.wa-page main .blk:not(#hero) :is(.eyebrow,.zt-kicker,.res-label){color:var(--zl-z)!important}
html body.wa-page main .blk:not(#hero) :is(h2,h3,.big,.zt-title,.zs-title,summary,th,dt,.tier-name,.res-num.small):not(:is(.lock,.phone,.sv-screen,.sv-phone,.zt-phone,.zs,.calc-result,.fear) *){color:var(--zl-ink)!important}
html body.wa-page main .blk:not(#hero) :is(p,li,td,label,small,span,.lead,strong,b,figcaption,.try-text,.demo-caption,.tier-meta,.tier-for,.fine,.legal):not(:is(.lock,.phone,.sv-screen,.sv-phone,.zt-phone,.zt-toast,.zs,.calc,.calc-result,.btn,.try-cta,.tier-flag,.zt-sticker,.zt-tape,.zt-new,.zt-price,.ft-tip,.zh-new-ico,.notif,.cmp-no,.steps-strip,.trust-strip,.zseal-badge) *):not(:is(.btn,.try-cta,.tier-flag,.zt-new,.ft-tip,.cmp-no,.notif-ico,.try-ico,.zh-new-ico)){color:var(--zl-soft)!important}
html body.wa-page main .blk:not(#hero) :is(h2,h3,.big,.zt-title) em{color:var(--zl-z2)!important}
html body.wa-page main .blk:not(#hero) a:not(.btn,.try-card,.zt-addon,.pd-shot){color:var(--zl-z)!important}
html body.wa-page main .blk:not(#hero) :is(.demo-explain,.tier-price,.panel-more,.tier-more,.faq-icon){color:var(--zl-z)!important}
html body.wa-page main .blk:not(#hero) :is(.try-step,.res-num:not(.small)){color:var(--zl-green)!important}
html body.wa-page main .blk:not(#hero) .cmp-no{color:#1d142859!important}

/* Botón principal: oscuro sobre claro, como en el hero */
html body.wa-page :is(main .blk:not(#hero),dialog) .btn.btn-main:not(.zt-btn){background:var(--zl-ink)!important;color:#f7f3eb!important;border-color:var(--zl-ink)!important}
html body.wa-page :is(main .blk:not(#hero),dialog) .btn:not(.btn-main){color:var(--zl-ink)!important;border-color:#1d142840!important}

/* El problema */
html body.wa-page .dolor .pain-stats{border-color:var(--zl-line)!important}
html body.wa-page .dolor .pain-stats b{color:var(--zl-ink)!important}
/* Transición del hero como en Páginas web (web-hero-transition): «El problema» sube como una tarjeta del lila claro de la
   página sobre el lila del hero (sin degradado al final, para que se vean sus esquinas), algo más estrecha que en Páginas web,
   y el velo funde el hero en ese mismo lila claro, de modo que al final la tarjeta se confunde con la página. */
html body.wa-page .web-hero-veil{background:var(--zl-bg)}
/* El hero es más alto que la pantalla y se fija con su borde inferior abajo: al encogerse desde abajo, ese borde no se
   mueve y la tarjeta siempre sube por encima del hero (si se encoge desde arriba, asoma su borde recto). */
html.web-transition body.wa-page #hero.zh{transform-origin:50% 100%}
/* Precios y Preguntas van fuera de .service-content: sin esto, el velo fijo (z-index 1) las tapa al bajar. */
html body.wa-page main>.service-content~section{position:relative;z-index:2}
html body.service-social-compact.campaign-page.wa-page .service-content>section.dolor:first-child{position:relative;width:min(calc((100% - 24px) * .8),1320px);margin:0 auto!important;border-radius:48px 48px 0 0!important;background:var(--zl-bg)!important;box-shadow:none!important}
/* Sin sombra en el borde de la tarjeta: sobre el hero claro se veía como un halo morado (en Páginas web cae sobre el vídeo oscuro y no se nota). */
html.web-transition body.wa-page .service-content>section.dolor:first-child::after{content:none}
@media(max-width:800px){html body.service-social-compact.campaign-page.wa-page .service-content>section.dolor:first-child{width:calc((100% - 24px) * .9);border-radius:32px 32px 0 0!important}}
html body.wa-page .dolor .fear{background:var(--zl-card)!important;border-color:var(--zl-line)!important;box-shadow:var(--zl-shadow)}
html body.wa-page .dolor .fear h3{color:var(--zl-red)!important}
html body.wa-page .dolor .fear-fix{border-color:var(--zl-line)!important}
html body.wa-page .dolor .fear-fix span{color:var(--zl-green)!important}

/* Pruébalo */
html body.wa-page .try-card{border-color:var(--zl-line)!important;box-shadow:var(--zl-shadow)}
html body.wa-page .try-card-wa{background:linear-gradient(135deg,#e2f6e9,#fff 70%)!important}
html body.wa-page .try-card-case{background:linear-gradient(135deg,#efe3f8,#fff 70%)!important}
html body.wa-page .try-card :is(b,.try-text){color:var(--zl-ink)!important}
html body.wa-page .try-card .try-step{color:var(--zl-green)!important}
html body.wa-page .try-card-case .try-step{color:var(--zl-z)!important}
html body.wa-page #pruebalo .phone{box-shadow:0 30px 60px #3b176833}

/* Zagal coge el teléfono */
html body.wa-page .zt{background:radial-gradient(42% 55% at 76% 46%,#d9c6ef 0%,#f6f1f900 70%),var(--zl-bg)!important}

/* Qué hace y tu WhatsApp de siempre */
html body.wa-page :is(#que-hace,#tu-whatsapp,#pruebalo) button:not(.btn){color:var(--zl-soft)!important;border-color:var(--zl-line)!important;background:var(--zl-card)!important}
html body.wa-page :is(#que-hace,#tu-whatsapp,#pruebalo) button:not(.btn):is([aria-selected="true"],[aria-pressed="true"],.on,.is-on,.active){background:var(--zl-ink)!important;color:#f7f3eb!important;border-color:var(--zl-ink)!important}
html body.wa-page .cap{background:var(--zl-card)!important;border-color:var(--zl-line)!important;box-shadow:var(--zl-shadow)}
html body.wa-page :is(.cap-ico,.same-ico,.pd-ico){background:var(--zl-tint)!important;color:var(--zl-z)!important}
html body.wa-page .sector-human{color:var(--zl-ink)!important}

/* Haz la cuenta */
html body.wa-page .calc{box-shadow:var(--zl-shadow)}
html body.wa-page .calc-result{background:var(--zl-ink)!important}

/* Precios */
html body.wa-page #empezar .tier{background:var(--zl-card)!important;border-color:var(--zl-line)!important;box-shadow:var(--zl-shadow)}
html body.wa-page #empezar .tier.on{background:linear-gradient(160deg,#fff,#f4ecfa)!important;border-color:#6b269c66!important}
html body.wa-page #empezar :is(.tier li,.tier-alta,.cmp,.cmp th,.cmp td){border-color:var(--zl-line)!important}
html body.wa-page #empezar .tier-flag{background:var(--zl-z)!important;color:#fff!important}
html body.wa-page #empezar .tier :is(strong,b){color:var(--zl-ink)!important}
html body.wa-page #empezar .cmp{background:var(--zl-card)!important}
html body.wa-page #empezar .zt-addon{background:var(--zl-card)!important;border-color:var(--zl-line)!important;box-shadow:var(--zl-shadow);color:var(--zl-ink)!important}
html body.wa-page #empezar .zt-addon :is(b,strong,span:not(.zh-new-ico)){color:var(--zl-ink)!important}
html body.wa-page main :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select){background:var(--zl-card)!important;color:var(--zl-ink)!important;border-color:#1d142833!important}
html body.wa-page main :is(input,textarea)::placeholder{color:var(--zl-mute)!important}
html body.wa-page #empezar .ft-tip{background:var(--zl-ink)!important;color:#f7f3eb!important}
/* Cómo lo ponemos en marcha: cuatro tarjetas con el número en un círculo morado, unidas por una línea */
html body.wa-page #empezar .steps-strip{gap:14px;margin-top:34px}
html body.wa-page #empezar .steps-strip li{position:relative;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 18px 20px;background:var(--zl-card);border:1px solid var(--zl-line);border-radius:18px;box-shadow:var(--zl-shadow);font:700 .98rem/1.35 Nunito,DM,sans-serif;color:var(--zl-ink)}
html body.wa-page #empezar .steps-strip span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--zl-z);color:#fff;font:800 .95rem/1 Nunito,DM,sans-serif;box-shadow:0 6px 14px #6b269c40}
html body.wa-page #empezar .steps-strip li:not(:last-child)::after{content:"";position:absolute;left:calc(100% + 1px);top:37px;width:12px;height:2px;border-radius:2px;background:var(--zl-z);opacity:.4}
/* Garantías en una sola línea (si no caben, se desliza en horizontal) */
html body.wa-page #empezar .trust-strip{flex-wrap:nowrap;justify-content:space-between;gap:16px;margin-top:22px;overflow-x:auto;scrollbar-width:none}
html body.wa-page #empezar .trust-strip::-webkit-scrollbar{display:none}
html body.wa-page #empezar .trust-strip li{flex:none;white-space:nowrap;font-size:.75rem;color:var(--zl-soft)}
@media(min-width:1240px){html body.wa-page #empezar .trust-strip li{font-size:.82rem}}
html body.wa-page #empezar .trust-strip svg{color:var(--zl-green)}
@media(max-width:1000px){html body.wa-page #empezar .steps-strip li::after{display:none}}
@media(max-width:600px){html body.wa-page #empezar .steps-strip{gap:10px}html body.wa-page #empezar .steps-strip li{flex-direction:row;align-items:center;gap:14px;padding:12px 16px}html body.wa-page #empezar .steps-strip span{flex:none;width:34px;height:34px}}

/* Preguntas */
html body.wa-page #preguntas :is(details,.faq-item,li){border-color:var(--zl-line)!important}

/* Ventanas emergentes */
html body.wa-page dialog.panel-dialog{background:var(--zl-card)!important;color:var(--zl-ink);border-color:var(--zl-line)!important;box-shadow:0 30px 80px #1d14284d}
html body.wa-page dialog.panel-dialog :is(h2,h3,dt){color:var(--zl-ink)!important}
html body.wa-page dialog.panel-dialog :is(p,.pd-lead,.meta-note){color:var(--zl-soft)!important}
html body.wa-page dialog.panel-dialog :is(.eyebrow,a,dd){color:var(--zl-z)!important}
html body.wa-page dialog.panel-dialog :is(.pd-close,.pd-shot,div){border-color:var(--zl-line)!important}
html body.wa-page dialog.panel-dialog .pd-close{color:var(--zl-ink)!important}

/* Por qué Zagal: las pegatinas de línea pasan a tinta oscura y la crema se separa del fondo */
html body.wa-page #por-que-zagal .zs-line{color:#1d1628!important;border-color:#1d162833!important}
html body.wa-page #por-que-zagal .zs-line *{color:inherit!important}
html body.wa-page #por-que-zagal .zs-cream{border:1px solid #1d16281f;box-shadow:0 10px 24px #3b17681f}
/* El muro de «Por qué Zagal», en Nunito como el resto de la página (venía con Caviar, la fuente general del sitio). */
html body.wa-page .zs{font-family:Nunito,DM,sans-serif!important;font-weight:700!important;letter-spacing:-.015em!important}