.hero{--h1f:clamp(1.9rem,min(4.6vw,7.2svh),3.8rem);position:relative;height:100svh;min-height:560px;background:radial-gradient(120vmax 70vmax at 50% 46%,#143019 0%,#0a180e 55%,#050a07 100%) #050a07;overflow:hidden}
.hero__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color-scheme:normal}
.hero__final{position:absolute;left:0;right:0;z-index:5;top:0;padding:clamp(68px,8svh,100px) var(--gut) 0;text-align:center;
  opacity:0;transform:translateY(-14px);pointer-events:none;transition:opacity .8s,transform .8s}
.hero__final h1{font-size:var(--h1f);max-width:18ch;margin-inline:auto;text-wrap:balance}
.hero__btns{position:absolute;left:0;right:0;top:calc(100svh - 150px);display:flex;gap:14px;justify-content:center;padding:0 var(--gut)}
.hero.fin .hero__final{opacity:1;transform:none;pointer-events:auto}
.hero__sello{position:absolute;z-index:6;right:clamp(14px,5vw,64px);top:clamp(84px,14svh,150px);width:clamp(112px,13vw,176px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:var(--rojo);color:#fff;transform:rotate(12deg) scale(.6);opacity:0;border:3px solid rgba(255,255,255,.85);box-shadow:0 14px 40px rgba(212,44,44,.5);
  transition:opacity .6s .3s,transform .7s .3s cubic-bezier(.2,1.4,.3,1)}
.hero.fin .hero__sello{opacity:1;transform:rotate(12deg) scale(1)}
/* el texto del sello se mide con el propio sello (cqw), no en rem: en Android el rem crece con el tamaño de letra del sistema y se salía del círculo */
.hero__sello{container-type:inline-size}
.hero__sello b{font-size:clamp(2rem,4.4vw,3.6rem);font-size:33cqw;line-height:.9;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.hero__sello span{font:700 clamp(.6rem,.9vw,.85rem)/1.1 var(--sans);font-size:9.4cqw;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hero__sello i{font:500 clamp(.6rem,.85vw,.8rem)/1.1 var(--sans);font-size:9cqw;font-style:normal;opacity:.95;margin-top:2px;white-space:nowrap}
.hero__bajar{position:absolute;z-index:6;left:50%;bottom:16px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.3);opacity:0;transition:opacity .6s .6s}
.hero.fin .hero__bajar{opacity:.85;animation:heroBaja 1.8s ease-in-out 1.4s infinite}
@keyframes heroBaja{50%{transform:translate(-50%,6px)}}
@media (min-aspect-ratio:9/10){.hero__btns{top:82svh}}
@media (max-width:600px){
  .hero{--h1f:clamp(1.5rem,7.6vw,2.2rem)}
  .hero__final h1{max-width:none}
  .hero__btns{top:calc(100svh - 160px);gap:10px}
  .hero__btns .btn{padding:.8em 1.2em;font-size:.95rem}
  .hero__final{padding-top:max(84px,10svh)}
  .hero__sello{width:clamp(100px,14svh,112px);top:calc(max(84px,10svh) + 2.3 * var(--h1f));right:16px}
  .hero__bajar{bottom:calc(14px + env(safe-area-inset-bottom));width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.hero__final,.hero__sello{transition:none}.hero.fin .hero__bajar{animation:none}}
/* frase «Soluciones digitales inteligentes»: cápsula con borde de luz que gira, letra monoespaciada y palabras que aparecen una a una */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.hero__frase{position:relative;display:block;width:fit-content;max-width:min(92vw,780px);margin:clamp(18px,3svh,26px) auto 0;padding:clamp(15px,2.2svh,20px) clamp(14px,2vw,24px) clamp(11px,1.8svh,15px);
  border:1.5px solid transparent;border-radius:18px;text-align:center;box-shadow:0 0 38px rgba(181,242,61,.14);
  background:linear-gradient(rgba(6,14,9,.82),rgba(6,14,9,.82)) padding-box,conic-gradient(from var(--ang),rgba(181,242,61,.12),var(--lima) 18%,rgba(181,242,61,.12) 42%,rgba(181,242,61,.12)) border-box;
  animation:hfGira 5s linear infinite}
@keyframes hfGira{to{--ang:360deg}}
.hf__etq{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);display:flex;align-items:center;gap:7px;white-space:nowrap;padding:4px 12px;border-radius:999px;
  background:var(--lima);color:#0b1410;font:700 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 18px rgba(181,242,61,.35)}
.hf__etq::before{content:"";width:6px;height:6px;border-radius:50%;background:#0b1410;animation:hfLate 1.6s ease-in-out infinite}
@keyframes hfLate{50%{transform:scale(1.6);opacity:.4}}
.hf__t{display:block;font:500 clamp(12.5px,1.1vw,15px)/1.55 var(--mono);text-wrap:balance;color:#e9f2e4;letter-spacing:-.01em}
.hf__t em{font-style:normal;font-weight:700}
.hf__t .w{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(6px)}
.hero.fin .hf__t .w{animation:hfEntra .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.9s + var(--i) * .07s)}
.hf__t em .w{background:linear-gradient(100deg,var(--lima) 0%,var(--lima) 38%,#fff 50%,var(--lima) 62%,var(--lima) 100%) 100% 0/280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.fin .hf__t em .w{animation:hfEntra .6s cubic-bezier(.2,.8,.2,1) forwards,hfBrillo 3.6s linear infinite;animation-delay:calc(.9s + var(--i) * .07s),calc(2.2s + var(--i) * .12s)}
.hf__t::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:5px;vertical-align:-.15em;background:var(--lima);opacity:0}
.hero.fin .hf__t::after{animation:hfCursor 1s steps(2,jump-none) 2.1s 7 both}
@keyframes hfEntra{to{opacity:1;transform:none;filter:none}}
@keyframes hfBrillo{to{background-position:0 0}}
@keyframes hfCursor{0%{opacity:1}100%{opacity:0}}
/* al terminar la animación, el mazo de cartas se achica y baja un poco para dejar lugar a la frase */
.hero__frame{transform-origin:50% 50%;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hero.fin .hero__frame{transform:translateY(4.6svh) scale(.86)}
@media (max-width:600px){
  .hero__frase{max-width:calc(100vw - 28px);margin-top:20px;padding:15px 12px 11px}
  .hf__t{font-size:clamp(12px,3.4vw,13.5px)}
  .hero.fin .hero__frame{transform:translateY(3.4svh) scale(.82)}
  .hero__sello{top:calc(max(84px,10svh) + 2.3 * var(--h1f) + 92px)}
}
@media (min-width:601px) and (max-width:1100px){.hero__sello{top:calc(max(84px,10svh) + 2.3 * var(--h1f) + 70px)}}
@media (prefers-reduced-motion:reduce){
  .hero__frase{animation:none}.hf__etq::before{animation:none}
  .hf__t .w,.hero.fin .hf__t .w,.hero.fin .hf__t em .w{animation:none;opacity:1;transform:none;filter:none}
  .hf__t::after{display:none}.hero__frame{transition:none}
}