/*
 * Viva Telecom: piezas compartidas por las páginas de proveedores (Verizon, Xfinity...). Las piden verizon.css y xfinity.css como dependencia ("vgtb-proveedor"),
 * así que cada bloque de proveedor las trae sin pedirlas. Los colores no están aquí: cada proveedor pone los suyos en sus variables
 * (--brand, --glow y --glow-2 para el brillo del fondo oscuro, etc.). Sin variables, el brillo sale rojo.
 */

/* Anillos que se expanden dentro de una tarjeta o un banner (del bloque de promoción móvil) */
.promo-bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.promo-bg i{position:absolute;right:18%;top:48%;width:min(70vw,560px);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);transform:translate(50%,-50%);animation:t-ring2 8s linear infinite;animation-delay:calc(var(--k,0)*-2.6s)}
.promo-bg i:nth-child(2){--k:1}.promo-bg i:nth-child(3){--k:2}
@keyframes t-ring2{0%{transform:translate(50%,-50%) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(50%,-50%) scale(1.5);opacity:0}}
/* Cabecera de sección con título a la izquierda y texto a la derecha */
.sec-head{position:relative;display:grid;gap:22px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
@media (min-width:860px){.sec-head{grid-template-columns:1.1fr .9fr;gap:60px}}
/* Sección oscura con brillo (el color del brillo: --glow y --glow-2, como "r,g,b") */
.sec-net{background:var(--ink);overflow:clip;isolation:isolate;--f:.5}
.net-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 22% 55%,rgba(var(--glow,239,0,32),calc(.2 + var(--f) * .25)),transparent 72%),radial-gradient(50% 40% at 100% 0,rgba(var(--glow-2,130,0,18),.55),transparent 70%)}
.net-glow::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px);background-size:30px 30px;-webkit-mask-image:radial-gradient(70% 70% at 30% 55%,#000,transparent);mask-image:radial-gradient(70% 70% at 30% 55%,#000,transparent)}
/* Precio y etiqueta de plan */
.price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:10px}
.price b{font:800 clamp(40px,4.2vw,54px)/1 var(--f-title);letter-spacing:-.04em;color:var(--ink)}
.price small{font:500 15px/1 var(--f-body);color:var(--muted)}
.plan-flag{display:inline-block;padding:6px 12px;border-radius:999px;background:#fff;color:var(--brand);font:600 10.5px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase}

/* Recuadro "Oferta elegida" del formulario (el bloque Formulario de contacto con el campo plan) */
.vz-sel{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 16px;border-radius:16px;background:var(--cream,#f8f3e9);border:1px solid var(--line,rgba(239,0,32,.18));font-size:14px;color:var(--text)}
.vz-sel[hidden]{display:none}
.vz-sel .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--brand);color:#fff;stroke-width:3}
.vz-sel b{color:#0a0a0a}

@media (prefers-reduced-motion:reduce){
  .promo-bg i{animation:none}
}