/* Hero de Zagal (automatizacion-whatsapp.html): fondo claro, bandeja de WhatsApp animada y contadores por tipo.
   Todo va bajo #hero.zh y con prefijo zh- para no chocar con los estilos compartidos del sitio. */
@font-face{font-family:Nunito;src:url('/assets/fonts/Nunito-Latin.woff2') format('woff2');font-weight:200 1000;font-display:swap}
#hero.zh{--zh-bg:#e7dcee;--zh-ink:#1d1428;--zh-soft:#4e4359;--zh-z:#7a3ec6;--zh-red:#d9344a;--zh-green:#1a9a54;--zh-wa:#25d366;--zh-wa-ink:#1daa61;
  min-height:100svh;justify-content:center;padding-top:110px;color:var(--zh-ink);background:radial-gradient(50% 60% at 74% 52%,#f7f1fb 0%,#e7dcee00 72%),var(--zh-bg)}
#hero.zh .zh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head stage" "rest stage";column-gap:48px;align-items:center}
#hero.zh .zh-head{grid-area:head;align-self:end}
#hero.zh .zh-rest{grid-area:rest;align-self:start}
/* Logo: la palabra y la Z en capas, para que parpadee y mueva las rayas como el Zagal del móvil */
#hero.zh .zh-logo{position:relative;height:88px;aspect-ratio:556/220;margin:0 0 26px -4px}
#hero.zh .zh-logo>img{position:absolute;inset:0;width:100%;height:100%}
#hero.zh .zh-mark{position:absolute;left:-.18%;top:-.45%;width:38.24%;height:94.53%}
#hero.zh .eyebrow{color:var(--zh-soft)!important}
#hero.zh .mega{font:800 clamp(36px,4.1vw,58px)/1.06 Nunito,DM,sans-serif!important;letter-spacing:-.025em!important;color:var(--zh-ink)!important}
#hero.zh .mega em{font-style:normal;color:var(--zh-z)!important}
#hero.zh .hero-say{max-width:520px;font-size:17px;color:var(--zh-soft)!important}
#hero.zh .hero-price,#hero.zh .hero-price-unit{color:var(--zh-soft)!important}
#hero.zh .hero-price-amount{color:var(--zh-ink)!important;font-family:Nunito,sans-serif!important;font-weight:800!important;letter-spacing:-.02em!important}
#hero.zh .hero-trust,#hero.zh .hero-trust-rating,#hero.zh .hero-trust-name a{color:var(--zh-ink)!important}
#hero.zh .hero-trust img{border-color:#fff}
#hero.zh :is(.hero-trust-count,.hero-trust-name,.hero-trust-tagline){color:var(--zh-soft)!important}
#hero.zh .hero-trust a:focus-visible{outline-color:var(--zh-ink)}
#hero.zh .btn{color:var(--zh-ink)!important;border-color:#1d142840!important}
#hero.zh .btn.btn-main{background:var(--zh-ink)!important;color:#f7f3eb!important;border-color:var(--zh-ink)!important}
#hero.zh .btn.btn-ghost:hover{background:#1d14280d!important}
#hero.zh .hero-crumbs{color:var(--zh-soft);opacity:.6}
#hero.zh .hero-crumbs a:hover{color:var(--zh-z)}
#hero.zh .hero-scroll-cue{color:var(--zh-soft)}
#hero.zh .hero-scroll-cue:hover{color:var(--zh-ink)}
html body #hero.zh .hero-feature-strip li{color:var(--zh-soft)!important}
html body #hero.zh .hero-feature-strip li+li::before{color:var(--zh-z)!important}
/* El logo fijo de la esquina solo se ve sobre el hero, que ahora es claro */
html body.wa-page .corner-brand:not(.is-scrolled)::after{background:#1d1428}

/* Escenario de 640×680, escalado al hueco con assets/zagal-hero.js */
#hero.zh .zh-fit{grid-area:stage;position:relative;width:100%;container-type:inline-size}
#hero.zh .zh-fit::before{content:"";display:block;height:calc(min(100cqw,691.2px)*1.0625)}
.zh-stage{position:absolute;top:0;left:50%;width:640px;height:680px;transform-origin:50% 0}

/* Móvil con WhatsApp */
.zh-phone{position:absolute;left:150px;top:12px;width:340px;height:660px;padding:10px;border-radius:52px;background:#16121c;box-shadow:0 40px 80px #3b176840,0 0 0 2px #2a2433 inset}
.zh-screen{position:relative;height:100%;border-radius:42px;overflow:hidden;background:#fff;display:flex;flex-direction:column;font:400 14px/1.3 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,sans-serif;color:#111b21;text-align:left}
.zh-island{position:absolute;top:10px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#16121c;z-index:3}
.zh-status{display:flex;justify-content:space-between;align-items:center;height:46px;padding:12px 26px 0;font-weight:600;font-size:14px}
.zh-status svg{height:11px;fill:#111b21}
.zh-top{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 8px}
.zh-top b{font:700 23px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,sans-serif;color:#1daa61;letter-spacing:-.01em}
.zh-top span{display:flex;gap:16px}
.zh-top svg{width:20px;height:20px;fill:none;stroke:#111b21;stroke-width:1.8}
.zh-search{margin:2px 14px 10px;padding:9px 14px;border-radius:22px;background:#f0f2f5;color:#667781;font-size:13.5px}
.zh-chips{display:flex;gap:7px;padding:0 14px 8px}
.zh-chips span{padding:5px 12px;border-radius:18px;background:#f0f2f5;color:#54656f;font-size:13px;white-space:nowrap}
.zh-chips .on{background:#d9fdd3;color:#0a6e3a;font-weight:600}
.zh-list{flex:1;overflow:hidden;position:relative}
.zh-row{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#fff;transition:background .3s}
.zh-av{flex:none;width:48px;height:48px;border-radius:50%;background:#dfe5e7;display:grid;place-items:center;overflow:hidden}
.zh-av svg{width:48px;height:48px;fill:#fff}
.zh-av img{width:100%;height:100%;object-fit:cover}
.zh-rb{flex:1;min-width:0;padding-bottom:1px}
.zh-r1{display:flex;justify-content:space-between;gap:8px}
.zh-r1 b{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zh-r1 time{font-size:12px;color:#1daa61;font-weight:600;flex:none;transition:color .3s}
.zh-r2{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:2px}
.zh-r2 p{margin:0;color:#667781;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zh-badge{flex:none;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:#25d366;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;transition:transform .25s cubic-bezier(.5,0,.8,.4),opacity .25s}
.zh-row.read time{color:#667781;font-weight:400}
.zh-row.read .zh-badge{transform:scale(0);opacity:0}
.zh-row.read p{color:#3b4a54}
.zh-ticks{display:inline-block;width:17px;height:11px;margin-right:3px;vertical-align:-1px}
.zh-mic{display:inline-block;width:10px;height:14px;margin-right:4px;vertical-align:-2px;fill:#1daa61;color:#1daa61}
.zh-row.lost{background:#fde3e7;box-shadow:inset 4px 0 var(--zh-red)}
.zh-row.lost p,.zh-row.lost .zh-r1 b{color:var(--zh-red);font-weight:600}
.zh-row.lost .zh-badge{background:var(--zh-red)}
.zh-row.lost time{color:var(--zh-red)}
.zh-row.flash{background:#e9fbe5}
.zh-nav{display:flex;justify-content:space-around;padding:8px 6px 22px;border-top:1px solid #e9edef;font-size:11.5px;color:#54656f}
.zh-nav div{display:grid;justify-items:center;gap:3px;position:relative}
.zh-nav i{display:block;width:52px;height:30px;border-radius:16px;position:relative}
.zh-nav .on i{background:#d9fdd3}
.zh-nav i svg{position:absolute;inset:5px 14px;width:24px;height:20px;fill:none;stroke:#111b21;stroke-width:1.8}
.zh-nav .on{font-weight:600;color:#111b21}
.zh-nav b{position:absolute;top:-4px;left:32px;min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:#25d366;color:#fff;font-size:11px;display:grid;place-items:center;transition:transform .3s}
.zh-nav b.zero{transform:scale(0)}

/* Carteles */
.zh-alert{position:absolute;left:0;top:150px;z-index:4;width:178px;padding:14px 16px 13px;border-radius:20px;background:#fff;box-shadow:0 18px 40px #3b176833;rotate:-3deg}
.zh-alert b{display:block;font:800 76px/.9 Nunito,sans-serif;letter-spacing:-.04em;color:var(--zh-red);font-variant-numeric:tabular-nums;transition:color .4s}
.zh-alert small,.zh-stat small{display:block;font:700 11.5px/1.25 DM,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--zh-soft)}
.zh-alert small{margin-top:6px}
.zh-alert.ok b{color:var(--zh-green)}
.zh-pill{position:absolute;z-index:7;padding:10px 17px;border-radius:999px;background:var(--zh-green);color:#fff;font:600 15.5px/1 DM,sans-serif;white-space:nowrap;pointer-events:none;box-shadow:0 10px 22px #1a9a5440;will-change:transform,opacity}
/* Aviso del paciente perdido: rojo y grande, junto al contador; se va cuando su chat desaparece */
.zh-lost{position:absolute;left:-16px;top:536px;z-index:6;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;min-width:250px;padding:16px 22px 16px 20px;border-radius:20px;background:var(--zh-red);color:#fff;box-shadow:0 20px 40px #d9344a55;rotate:2deg;opacity:0;pointer-events:none}
.zh-lost.on{opacity:1}
.zh-lost svg{grid-row:span 2;width:40px;height:40px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zh-lost b{display:block;transform-origin:0 50%;font:800 30px/1 Nunito,sans-serif;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.zh-lost small{margin-top:4px;font:600 14px/1.25 DM,sans-serif;color:#fff}
/* Resumen final, sobre el centro del móvil y entre las dos columnas de contadores */
.zh-done{position:absolute;left:50%;top:330px;z-index:6;width:300px;padding:18px 18px 16px;border-radius:22px;background:var(--zh-ink);color:#fff;text-align:center;box-shadow:0 24px 50px #1d142866;transform:translate(-50%,0);opacity:0;pointer-events:none}
.zh-done.on{opacity:1}
.zh-done-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.zh-done-nums p{margin:0}
.zh-done-nums b{display:block;font:800 40px/.95 Nunito,sans-serif;letter-spacing:-.03em;color:#9ff0bd;font-variant-numeric:tabular-nums}
.zh-done-nums small{display:block;margin-top:5px;font:700 10.5px/1.2 DM,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#f7f3ebb3}
.zh-done-txt{margin:14px 0 0;text-wrap:balance;padding-top:12px;border-top:1px solid #ffffff1f;font:700 15px/1.3 Nunito,sans-serif;color:#fff}
/* Contadores por tipo: aparecen con la primera píldora que les llega */
.zh-stat{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;width:160px;padding:11px 14px;border-radius:18px;background:#fff;box-shadow:0 14px 32px #3b176830;opacity:0}
.zh-stat.on{opacity:1}
.zh-stat b{flex:none;min-width:.62em;font:800 40px/.9 Nunito,sans-serif;letter-spacing:-.03em;color:var(--zh-green);font-variant-numeric:tabular-nums}
.zh-stat small{font-size:10.5px;letter-spacing:.06em}

/* Zagal: el logo original en capas (cuerpo, ojos y rayas) */
.zh-zagal{position:absolute;left:372px;top:-58px;z-index:5;width:210px;aspect-ratio:548/536;opacity:0;filter:drop-shadow(0 16px 20px #3b176844)}
.zh-zg img{position:absolute;inset:0;width:100%;height:100%}
.zh-zg{position:absolute;inset:0;transform-origin:50% 100%}
.zh-eyes{transform-origin:40.7% 45%;transition:translate .25s}
.blink .zh-eyes{animation:zh-blink .18s ease-in-out}
@keyframes zh-blink{50%{transform:scaleY(.1)}}
.zh-ray1{transform-origin:72.4% 17.2%;animation:zh-ray 3.2s ease-in-out infinite}
.zh-ray2{transform-origin:82.1% 26.5%;animation:zh-ray 3.2s ease-in-out .12s infinite}
@keyframes zh-ray{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.18)}86%{transform:scale(.92)}}
.ping :is(.zh-ray1,.zh-ray2){animation:zh-ping .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes zh-ping{0%{transform:scale(.3);opacity:.3}55%{transform:scale(1.4);opacity:1}100%{transform:scale(1)}}
.hop .zh-zg{animation:zh-hop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes zh-hop{25%{transform:scale(1.05,.93)}55%{transform:translateY(-6%) scale(.97,1.04)}100%{transform:none}}

/* Entrada: el móvil sube con un pequeño giro y se asienta; el contador rojo cae justo después; el logo salta */
@keyframes zh-in-phone{0%{opacity:0;transform:translateY(90px) rotate(7deg) scale(.9)}55%{opacity:1;transform:translateY(-8px) rotate(-1.2deg) scale(1.01)}78%{transform:translateY(3px) rotate(.4deg)}100%{opacity:1;transform:none}}
@keyframes zh-in-card{0%{opacity:0;transform:translate(30px,-18px) scale(.7)}60%{opacity:1;transform:translate(-3px,2px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes zh-in-mark{0%{opacity:0;transform:translateY(30%) rotate(-14deg) scale(.6)}55%{opacity:1;transform:translateY(-6%) rotate(4deg) scale(1.05)}100%{opacity:1;transform:none}}
@keyframes zh-in-word{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .zh-phone{animation:zh-in-phone .95s cubic-bezier(.25,.8,.3,1) .15s both}
  .zh-alert{animation:zh-in-card .6s cubic-bezier(.25,.8,.3,1) .7s both}
  #hero.zh .zh-mark{animation:zh-in-mark .8s cubic-bezier(.25,.8,.3,1) .05s both}
  #hero.zh .zh-logo>img{animation:zh-in-word .7s cubic-bezier(.22,1,.36,1) .2s both}
  #hero.zh .zh-mark .zh-zg{animation:zh-float 5s ease-in-out 1.2s infinite}
  #hero.zh .zh-logo.hop .zh-zg{animation:zh-hop .6s cubic-bezier(.3,1.4,.5,1)}
}
@keyframes zh-float{0%,100%{transform:none}50%{transform:translateY(-3%) rotate(-2deg)}}

@media(max-width:960px){
  #hero.zh{padding-top:96px}
  #hero.zh .zh-grid{grid-template-columns:1fr;grid-template-areas:"head" "stage" "rest"}
  #hero.zh .zh-logo{height:62px;margin-bottom:18px}
  #hero.zh .zh-fit{margin:22px -4vw 6px;width:auto}
}

/* Sello de Zagal: el logo dentro de un círculo, sin texto, que se estampa al entrar en pantalla y luego mira y parpadea.
   En «El problema» cae sobre el móvil de mensajes sin responder; en precios acompaña al titular como sello de la garantía. */
.zseal{--zs:118px;--rot:-12deg;position:absolute;z-index:3;display:block;width:var(--zs);height:var(--zs);transform:rotate(var(--rot));pointer-events:none;filter:drop-shadow(0 14px 22px #1d142847)}
.zseal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zseal-bg{fill:var(--zseal-disc,#9ff0bd);stroke:var(--zseal-ring,#1d1428);stroke-width:5}
.zseal-dash{fill:none;stroke:var(--zseal-ring,#1d1428);stroke-width:1.3;stroke-dasharray:2.4 3.4;opacity:.45}
.zseal-z{position:absolute;left:19%;top:20%;width:64%;height:62.6%}
.zseal-z img{position:absolute;inset:0;width:100%;height:100%}
/* Ojos y líneas de expresión como en el logo del hero: miran, parpadean (zagal-hero.js) y las líneas laten */
.zseal-eyes{transform-origin:40.7% 45%;transition:translate .4s cubic-bezier(.3,1.3,.5,1)}
.zseal.blink .zseal-eyes{animation:zh-blink .18s ease-in-out}
.zseal-ray1{transform-origin:72.4% 17.2%}
.zseal-ray2{transform-origin:82.1% 26.5%}
@keyframes zseal-stamp{0%{opacity:0;transform:scale(1.9) rotate(calc(var(--rot) - 28deg))}55%{opacity:1;transform:scale(.9) rotate(calc(var(--rot) + 3deg))}100%{opacity:1;transform:scale(1) rotate(var(--rot))}}
@keyframes zseal-ping{0%,100%{scale:1}45%{scale:1.3}}
.zseal.is-armed{opacity:0}
.zseal.is-in{animation:zseal-stamp .6s cubic-bezier(.3,1.3,.5,1) both}
.zseal.is-in .zseal-ray1{animation:zseal-ping .5s cubic-bezier(.3,1.7,.5,1) .45s,zh-ray 3.2s ease-in-out 1.4s infinite}
.zseal.is-in .zseal-ray2{animation:zseal-ping .5s cubic-bezier(.3,1.7,.5,1) .55s,zh-ray 3.2s ease-in-out 1.52s infinite}
.zseal-host{position:relative;width:100%;max-width:410px;margin-inline:auto}
.zseal-dolor{--rot:-14deg;right:-34px;bottom:56px}
/* Precios: sello de garantía a la derecha del titular, alineado con el borde de la tarjeta Premium; el texto va fuera */
.zseal-title{position:relative}
.zseal-badge{position:absolute;right:0;top:50%;display:flex;align-items:center;gap:14px;transform:translateY(-50%);pointer-events:none}
.zseal-cap{font:800 .82rem/1.2 Nunito,DM,sans-serif;letter-spacing:.07em;text-transform:uppercase;text-align:right;color:#6b269c}
.zseal-precio{--zs:128px;--rot:-8deg;--zseal-ring:#6b269c;--zseal-disc:#fff;position:relative;flex:none}
@media(min-width:801px){#empezar h2.zseal-title{max-width:none;padding-right:250px}}
@media(max-width:1000px){.zseal-dolor{right:-12px}}
@media(max-width:800px){.zseal-badge{position:static;transform:none;margin-top:16px;flex-direction:row-reverse;justify-content:flex-end}.zseal-cap{text-align:left}.zseal-precio{--zs:92px}}
@media(max-width:600px){.zseal{--zs:96px}.zseal-dolor{right:-8px;bottom:40px}.zseal-precio{--zs:80px}}
@media(prefers-reduced-motion:reduce){.zseal.is-in,.zseal.is-in :is(.zseal-ray1,.zseal-ray2){animation:none}.zseal.is-armed{opacity:1}}