/* =========================================================
   SITI Negocios · 1. hero (variante del hero del landing)
   ========================================================= */
.hero__h1--md{font-size:clamp(2.6rem,5.4vw,5.4rem);margin-top:0}

.biz-phone{position:relative;display:grid;place-items:center;padding:20px 0}
.biz-phone__halo{
  position:absolute;inset:-6%;z-index:-1;border-radius:50%;filter:blur(40px);
  background:radial-gradient(circle at 55% 42%,rgba(var(--hot),.32),rgba(254,187,40,.18) 45%,transparent 68%);
  animation:breathe2 10s ease-in-out infinite;
}
/* ---------- ondas de escaneo ----------
   Centradas en el celular: tres guías finas fijas (como un radar) y cuatro
   pulsos que crecen y se apagan en relevo, como la señal de un escaneo QR. */
.waves{position:absolute;left:50%;top:50%;width:min(1100px,150vw);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.waves > *{position:absolute;inset:0;margin:auto;border-radius:50%}
.waves__guide{border:1px solid rgba(var(--hot),.16)}
.waves__guide:nth-of-type(1){width:44%;height:44%}
.waves__guide:nth-of-type(2){width:68%;height:68%;border-style:dashed;border-color:rgba(var(--hot),.1)}
.waves__guide:nth-of-type(3){width:92%;height:92%;border-color:rgba(var(--hot),.07)}
.waves__pulse{
  width:100%;height:100%;border:1.5px solid rgba(var(--hot),.7);
  box-shadow:0 0 30px rgba(var(--hot),.18),inset 0 0 30px rgba(var(--hot),.08);
  opacity:0;transform:scale(.3);animation:wave 6.4s cubic-bezier(.2,.6,.35,1) infinite;
}
.waves__pulse:nth-of-type(2){animation-delay:-1.6s}
.waves__pulse:nth-of-type(3){animation-delay:-3.2s}
.waves__pulse:nth-of-type(4){animation-delay:-4.8s}
@keyframes wave{0%{transform:scale(.3);opacity:0}12%{opacity:.9}100%{transform:scale(1);opacity:0}}
/* sobre el texto no: el resplandor se queda del lado del celular */
.hero--biz .hero__glow{right:-18%;top:42%}
@media (prefers-reduced-motion:reduce){
  .waves__pulse:nth-of-type(1){opacity:.5;transform:scale(.55)}
}

/* botón de vidrio para fondos de color (CTA) */
.btn--glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--glass .btn__fill{background:#fff}
.btn--glass:hover .btn__txt{color:#7A2E00}
.cta__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

@media (max-width:860px){
  .biz-phone{max-width:360px}
  .waves{width:170vw}
}
@media (max-width:560px){
  .hero__h1--md{font-size:clamp(2.3rem,11vw,3.2rem)}
}