/*
 * Viva Telecom: base del hero (compartida por los bloques hero y hero-internet). Del comun.css aprobado.
 * Las variantes de cada hero (home, TV, contacto, internet) van en el style.css de su bloque.
 */
/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;background:var(--ink);padding:calc(var(--hdr) + clamp(28px,5vw,60px)) 0 clamp(120px,12vw,160px)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 60% at 76% 46%,rgba(0,105,254,.5),transparent 72%),radial-gradient(45% 45% at 4% 100%,rgba(0,59,141,.7),transparent 70%)}
.hero-bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px);background-size:30px 30px;-webkit-mask-image:radial-gradient(75% 80% at 70% 42%,#000,transparent);mask-image:radial-gradient(75% 80% at 70% 42%,#000,transparent)}
.hero-in{display:grid;gap:34px;align-items:center}
.hero-copy{display:grid;justify-items:start;gap:0}
.hero-title{margin-top:22px;font:800 clamp(40px,6.1vw,86px)/1.02 var(--f-title);letter-spacing:-.04em;color:#fff;text-wrap:balance}
.hero-title em{font-style:normal;color:var(--brand-2)}
.hero-lead{margin-top:24px;max-width:46ch;font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:rgba(255,255,255,.78)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font:500 14px/1.2 var(--f-body);color:rgba(255,255,255,.82)}
.hero-points li{display:inline-flex;align-items:center;gap:8px}
.hero-points .ico{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--brand);color:#fff;stroke-width:3}
/* Entrada del hero solo con CSS (no espera a JS ni a las fuentes) */
.hero [data-in]{opacity:0;transform:translateY(26px);animation:t-in .9s var(--ease) forwards;animation-delay:var(--d,0s)}
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.hw>span{display:inline-block;transform:translateY(108%);animation:t-rise 1s var(--ease) forwards;animation-delay:calc(.12s + var(--i)*.07s)}
@keyframes t-in{to{opacity:1;transform:none}}
@keyframes t-rise{to{transform:none}}

.hv{position:relative;width:min(100%,520px);margin-inline:auto;aspect-ratio:845/1024}
.hv-layer{position:absolute}
.hv-photo-layer{inset:0}
.hv-photo{width:100%;height:100%;animation:t-zoom 1.6s var(--ease) both}
@keyframes t-zoom{from{transform:scale(1.05)}to{transform:none}}
.hv-rings{position:absolute;left:50%;top:57%;width:104%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.hv-rings i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(118,175,255,.55);opacity:0;animation:t-ring 7.5s linear infinite;animation-delay:calc(var(--k)*-2.5s)}
@keyframes t-ring{0%{transform:scale(.6);opacity:0}12%{opacity:.85}100%{transform:scale(1.6);opacity:0}}
.hv-l-a{left:-5%;top:15%}
.hv-l-b{right:-4%;bottom:12%}
.hv-l-c{left:-3%;bottom:30%}
.chip{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:20px;background:rgba(10,18,64,.58);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 44px -18px rgba(0,0,0,.7);color:#fff;animation:t-float 6.5s ease-in-out infinite}
.hv-l-b .chip{animation-delay:-2s}.hv-l-c .chip{animation-delay:-4s}
.hero [data-in].chip{animation:t-in .9s var(--ease) forwards,t-float 6.5s ease-in-out 2s infinite;animation-delay:var(--d,0s),0s}
@keyframes t-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.chip-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--brand);color:#fff;flex:none}
.chip-ico .ico{width:21px;height:21px}
.chip-tx{display:grid;gap:2px;line-height:1.15}
.chip-tx small{font:500 11.5px/1.2 var(--f-body);color:rgba(255,255,255,.7)}
.chip-tx b{font:700 17px/1.1 var(--f-title);letter-spacing:-.02em}
.chip-tx b i{font:500 12px/1 var(--f-body);font-style:normal;opacity:.7;margin-left:3px}
.chip-sm .chip-tx b{font-size:14px}
.chip-sm .chip-ico{width:36px;height:36px;border-radius:12px}
@media (min-width:960px){
  .hero-in{grid-template-columns:1.08fr .92fr;gap:28px;min-height:min(700px,calc(100svh - var(--hdr) - 110px))}
}
@media (max-width:959px){
  .hero-in{gap:56px}
  .hv{width:min(88%,430px)}
  .hv-l-a{left:-6%;top:10%}.hv-l-b{right:-8%;bottom:8%}.hv-l-c{display:none}
  .chip{padding:8px 14px 8px 8px;gap:10px}
  .chip-ico{width:36px;height:36px;border-radius:12px}
  .chip-tx b{font-size:15px}
}


/* Menos movimiento */
@media (prefers-reduced-motion:reduce){
  .hero [data-in],.hw>span,.hv-photo{animation-duration:.01s;animation-delay:0s}
  .hv-rings i,.chip{animation:none}
  .hv-rings i:first-child{opacity:.5;transform:scale(1)}
}