/* Complemento de atención telefónica (automatizacion-whatsapp.html): aviso en el hero, sección #telefono a modo de anuncio
   con un móvil que suena y Zagal coge la llamada, y nota bajo los planes. Prefijo zt- (y zh-new dentro del hero). */

/* ---------- Aviso en el hero ---------- */
#hero.zh .zh-new{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:6px 14px 6px 6px;border-radius:999px;background:#1d1428;color:#f7f3eb!important;font:500 14px/1.2 DM,sans-serif;text-decoration:none;box-shadow:0 10px 24px #3b176830;transition:transform .25s,box-shadow .25s}
#hero.zh .zh-new:hover{transform:translateY(-2px);box-shadow:0 14px 30px #3b176844}
#hero.zh .zh-new:focus-visible{outline:2px solid #7a3ec6;outline-offset:3px}
#hero.zh .zh-new b{margin-right:4px;padding:3px 8px;border-radius:999px;background:#b48cf0;color:#1d1428;font:700 11px/1 DM,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.zh-new-ico{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#25d366}
.zh-new-ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:zt-ripple 1.8s ease-out infinite}
.zh-new-ico svg{width:16px;height:16px;fill:#fff;animation:zt-buzz 1.8s ease-in-out infinite}
#hero.zh .zh-new>svg{width:14px;height:14px;flex:none}

/* ---------- Sección anuncio ---------- */
#telefono.zt{--zt-bg:#1d1428;--zt-ink:#f7f3eb;--zt-soft:#cbbfd8;--zt-lila:#b48cf0;--zt-wa:#25d366;--zt-red:#ef4b5f;
  position:relative;overflow:hidden;padding:0 0 110px;background:radial-gradient(42% 55% at 76% 46%,#5b2d9a66 0%,#1d142800 70%),radial-gradient(30% 40% at 8% 90%,#7a3ec633 0%,#1d142800 70%),var(--zt-bg);color:var(--zt-ink)}
#telefono.zt *{box-sizing:border-box}

/* Cinta que corre arriba, como un cartel */

.zt-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"head visual" "body visual";column-gap:64px;align-items:center}
.zt-head{grid-area:head;align-self:end}
.zt-body{grid-area:body;align-self:start}
.zt-visual{grid-area:visual}

#telefono .zt-kicker{display:flex;align-items:center;gap:12px;margin:0 0 22px;font:500 12px/1.4 DM,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--zt-soft)!important}
.zt-new{padding:5px 10px;border-radius:999px;background:var(--zt-wa);color:#06331a;font-weight:700;letter-spacing:.1em}
#telefono .zt-title{margin:0 0 22px;font:400 clamp(40px,5.4vw,78px)/.98 Fraunces,serif!important;letter-spacing:-.04em!important;color:var(--zt-ink)!important;text-wrap:balance}
#telefono .zt-title em{font-style:italic;color:var(--zt-lila)!important}
#telefono .zt-lead{max-width:560px;margin:0;font:400 18px/1.55 DM,sans-serif;color:var(--zt-soft)!important}
#telefono .zt-lead strong{color:var(--zt-ink);font-weight:600}

.zt-points{margin:30px 0 0;padding:0;list-style:none;display:grid;gap:14px;max-width:560px}
.zt-points li{display:grid;grid-template-columns:26px 1fr;gap:12px;font:400 16px/1.5 DM,sans-serif;color:var(--zt-soft)}
.zt-points li strong{color:var(--zt-ink);font-weight:600}
.zt-points svg{width:26px;height:26px;padding:5px;border-radius:50%;background:#ffffff14;stroke:var(--zt-lila);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Precio: tarjeta tipo ticket */
.zt-price{position:relative;max-width:560px;margin:36px 0 28px;padding:26px 28px 22px;border-radius:24px;background:var(--zt-ink);color:#1d1428}
.zt-price::before,.zt-price::after{content:"";position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--zt-bg)}
.zt-price::before{left:-11px}.zt-price::after{right:-11px}
.zt-price-tag{display:inline-block;margin:0 0 10px;font:700 11px/1 DM,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7a3ec6}
.zt-price-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.zt-amount{font:400 clamp(52px,6vw,72px)/.9 Fraunces,serif;letter-spacing:-.05em;color:#1d1428}
.zt-unit{font:600 17px/1.2 DM,sans-serif;color:#4e4359}
#telefono .zt-price-sub{margin:10px 0 18px;font:400 15px/1.45 DM,sans-serif;color:#4e4359!important}
.zt-facts{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1.5px dashed #1d142833}
.zt-facts div{padding:14px 10px 0 0}
.zt-facts div+div{padding-left:14px;border-left:1.5px dashed #1d142833}
.zt-facts dt{font:700 10.5px/1.2 DM,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7a6c88}
.zt-facts dd{margin:5px 0 0;font:600 15px/1.3 DM,sans-serif;color:#1d1428}
#telefono .zt-tax{margin:16px 0 0;font:400 12.5px/1.4 DM,sans-serif;color:#7a6c88!important}
#telefono .zt-cta{display:inline-flex;align-items:center;gap:10px;background:var(--zt-wa)!important;color:#06331a!important;border-color:var(--zt-wa)!important;font-weight:600}
#telefono .zt-cta:hover{background:#4ee283!important}

/* ---------- Móvil que suena ---------- */
.zt-visual{position:relative;display:grid;place-items:center;min-height:640px;padding:96px 0 20px}
.zt-rings{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;pointer-events:none}
.zt-rings i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--zt-wa);opacity:0}
.zt-visual[data-state=ring] .zt-rings i{animation:zt-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.zt-rings i:nth-child(2){animation-delay:.8s!important}
.zt-rings i:nth-child(3){animation-delay:1.6s!important}
@keyframes zt-ring{0%{transform:scale(.9);opacity:.7}100%{transform:scale(2.1);opacity:0}}

.zt-phone{position:relative;z-index:2;width:300px;height:610px;padding:10px;border-radius:50px;background:#0f0b14;box-shadow:0 50px 90px #0008,0 0 0 2px #2f2838 inset,0 0 80px #7a3ec655}
.zt-visual[data-state=ring] .zt-phone{animation:zt-shake 2.4s ease-in-out infinite}
@keyframes zt-shake{0%,40%,100%{transform:rotate(0)}4%,12%,20%,28%{transform:rotate(-3deg)}8%,16%,24%,32%{transform:rotate(3deg)}36%{transform:rotate(0)}}
.zt-screen{position:relative;height:100%;overflow:hidden;border-radius:40px;background:linear-gradient(180deg,#3a2556 0%,#241733 55%,#140e1c 100%);color:#fff;font:400 14px/1.3 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,sans-serif;text-align:center}
.zt-island{position:absolute;top:10px;left:50%;width:90px;height:26px;margin-left:-45px;border-radius:20px;background:#0f0b14;z-index:3}
.zt-status{display:flex;justify-content:space-between;padding:14px 26px 0;font-weight:600;font-size:13px}
.zt-status i{display:inline-block;width:22px;height:10px;border:1.5px solid #fff;border-radius:3px;position:relative}
.zt-status i::after{content:"";position:absolute;inset:1.5px 6px 1.5px 1.5px;border-radius:1px;background:#fff}

.zt-who{padding:40px 18px 0}
.zt-label{display:block;font-size:14px;color:#ffffffaa;transition:color .3s}
.zt-name{display:block;margin:8px 0 4px;font:600 27px/1.1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,sans-serif;letter-spacing:-.02em}
.zt-num{display:block;font-size:14px;color:#ffffffaa}
.zt-timer{display:block;height:18px;margin-top:6px;font-size:15px;font-variant-numeric:tabular-nums;color:var(--zt-wa);opacity:0;transition:opacity .3s}

/* Zagal: aparece al coger la llamada */
.zt-av{position:relative;width:92px;height:92px;margin:18px auto 0;border-radius:50%;background:#ffffff14;display:grid;place-items:center}
.zt-av-person{width:50px;height:50px;fill:#ffffff66;transition:opacity .35s,transform .35s}
.zt-z{position:absolute;inset:6px;opacity:0;transform:scale(.4) rotate(-12deg);transition:opacity .4s,transform .55s cubic-bezier(.3,1.5,.5,1)}
.zt-z img{position:absolute;inset:0;width:100%;height:100%}
.zt-z .zh-ray1{transform-origin:72.4% 17.2%;animation:zt-ray 3.2s ease-in-out infinite}
.zt-z .zh-ray2{transform-origin:82.1% 26.5%;animation:zt-ray 3.2s ease-in-out .12s infinite}
@keyframes zt-ray{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.18)}86%{transform:scale(.92)}}
.zt-av::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--zt-lila);opacity:0}
.zt-visual[data-state=talk] .zt-av::after{animation:zt-speak 1.2s ease-out infinite}
@keyframes zt-speak{0%{transform:scale(.95);opacity:.8}100%{transform:scale(1.25);opacity:0}}

/* Onda de voz */
.zt-wave{display:flex;justify-content:center;align-items:center;gap:4px;height:30px;margin-top:10px;opacity:0;transition:opacity .3s}
.zt-wave i{width:4px;height:6px;border-radius:2px;background:var(--zt-lila);animation:zt-bar 1s ease-in-out infinite;animation-play-state:paused}
.zt-visual[data-state=talk] .zt-wave i{animation-play-state:running}
.zt-wave i:nth-child(odd){animation-duration:.8s}
.zt-wave i:nth-child(3n){animation-duration:1.3s}
.zt-wave i:nth-child(4n){animation-delay:-.4s}
.zt-wave i:nth-child(5n){animation-delay:-.7s}
@keyframes zt-bar{0%,100%{height:6px}50%{height:26px}}

/* Subtítulos en directo */
.zt-subs{position:absolute;left:14px;right:14px;top:326px;bottom:112px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;overflow:hidden;text-align:left;-webkit-mask:linear-gradient(#0000,#000 30%);mask:linear-gradient(#0000,#000 30%)}
.zt-sub{max-width:86%;padding:8px 11px;border-radius:15px;font-size:13px;line-height:1.35;animation:zt-in .35s cubic-bezier(.22,1,.36,1) both}
.zt-sub small{display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.zt-sub.c{align-self:flex-start;background:#ffffff1f;border-bottom-left-radius:4px}
.zt-sub.z{align-self:flex-end;background:var(--zt-lila);color:#1d1428;border-bottom-right-radius:4px}
@keyframes zt-in{from{opacity:0;transform:translateY(10px)}}

/* Aviso de cita reservada */
.zt-toast{position:absolute;left:14px;right:14px;top:54px;z-index:4;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:18px;background:#f7f3eb;color:#1d1428;text-align:left;box-shadow:0 14px 30px #0006;opacity:0;transform:translateY(-16px) scale(.96);transition:opacity .35s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.zt-toast span{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#1a9a54}
.zt-toast svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.zt-toast b{display:block;font-size:13.5px}
.zt-toast small{display:block;font-size:12px;color:#4e4359}
.zt-visual[data-state=done] .zt-toast{opacity:1;transform:none}

/* Botones */
.zt-actions{position:absolute;left:0;right:0;bottom:34px;display:flex;justify-content:space-around;padding:0 34px}
.zt-btn{position:relative;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;transition:transform .3s,opacity .3s,background .3s}
.zt-btn svg{width:30px;height:30px;fill:#fff}
.zt-btn small{position:absolute;top:74px;left:50%;transform:translateX(-50%);font-size:12px;color:#ffffffcc;white-space:nowrap}
.zt-decline{background:var(--zt-red)}
.zt-decline svg{transform:rotate(135deg)}
.zt-accept{background:var(--zt-wa)}
.zt-visual[data-state=ring] .zt-accept{animation:zt-pulse 1.2s ease-in-out infinite}
.zt-visual[data-state=ring] .zt-accept svg{animation:zt-buzz 1.2s ease-in-out infinite}
@keyframes zt-pulse{0%,100%{box-shadow:0 0 0 0 #25d36699}50%{box-shadow:0 0 0 14px #25d36600}}
.zt-accept.press{transform:scale(.86)}
/* Hablando: queda solo colgar en el centro; al terminar, se apaga */
.zt-visual:is([data-state=talk],[data-state=done]) .zt-accept{opacity:0;transform:scale(.4)}
.zt-visual:is([data-state=talk],[data-state=done]) .zt-decline{transform:translateX(82px)}
.zt-visual:is([data-state=talk],[data-state=done]) .zt-btn small{opacity:0}
.zt-visual[data-state=done] .zt-decline{opacity:.35}

.zt-visual:is([data-state=talk],[data-state=done]) .zt-timer,
.zt-visual:is([data-state=talk],[data-state=done]) .zt-wave{opacity:1}
.zt-visual:is([data-state=talk],[data-state=done]) .zt-label{color:var(--zt-lila)}
.zt-visual:is([data-state=talk],[data-state=done]) .zt-z{opacity:1;transform:none}
.zt-visual:is([data-state=talk],[data-state=done]) .zt-av-person{opacity:0;transform:scale(.6)}
.zt-visual[data-state=done] .zt-wave{opacity:.25}
.zt-visual[data-state=done] .zt-timer{color:#ffffffaa}

/* Pegatina giratoria, como en un cartel */
.zt-sticker{position:absolute;z-index:3;right:calc(50% - 236px);top:0;width:132px;height:132px;display:grid;place-items:center;border-radius:50%;background:var(--zt-lila);color:#1d1428;box-shadow:0 18px 36px #0006;rotate:12deg}
.zt-sticker svg{position:absolute;inset:0;width:100%;height:100%;animation:zt-spin 18s linear infinite}
.zt-sticker text{font:700 10.5px DM,sans-serif;letter-spacing:.18em;fill:#1d1428}
.zt-sticker b{font:400 34px/1 Fraunces,serif;letter-spacing:-.03em}
@keyframes zt-spin{to{transform:rotate(360deg)}}

@keyframes zt-ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes zt-buzz{0%,50%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-14deg)}10%,20%,30%{transform:rotate(14deg)}}

/* ---------- Nota bajo los planes ---------- */
.zt-addon{display:flex;align-items:center;gap:16px;margin:28px 0 0;padding:18px 22px;border-radius:20px;background:#1d1428;color:#f7f3eb!important;text-decoration:none;font:400 15.5px/1.45 DM,sans-serif;transition:transform .25s}
.zt-addon:hover{transform:translateY(-2px)}
.zt-addon b{color:#fff;font-weight:600}
.zt-addon .zh-new-ico{width:40px;height:40px}
.zt-addon .zh-new-ico svg{width:20px;height:20px}
.zt-addon>svg{flex:none;width:16px;height:16px;margin-left:auto}

@media(max-width:960px){
  #telefono.zt{padding-bottom:80px}
  .zt-grid{grid-template-columns:1fr;grid-template-areas:"head" "visual" "body"}
  .zt-visual{min-height:0;margin:28px 0 10px;padding:80px 0 30px}
  .zt-sticker{width:104px;height:104px;right:calc(50% - 200px)}
  .zt-sticker b{font-size:27px}
  .zt-sticker text{font-size:9px}
}
@media(max-width:520px){
  .zt-phone{width:270px;height:560px}
  .zt-name{font-size:24px}
  .zt-av{width:72px;height:72px;margin-top:12px}
  .zt-av-person{width:40px;height:40px}
  .zt-subs{top:290px}
  .zt-sticker{right:6px}
  .zt-facts{grid-template-columns:1fr}
  .zt-facts div+div{padding-left:0;border-left:0;border-top:1.5px dashed #1d142833;margin-top:12px}
  .zt-price{padding:22px 20px 20px}
  .zt-addon{align-items:flex-start}
  .zt-addon>svg{display:none}
}
@media(prefers-reduced-motion:reduce){
  .zt-sticker svg,.zh-new-ico::after,.zh-new-ico svg,.zt-z img{animation:none!important}
}