/*
 * Viva Telecom (vivatelecom.net): colores y piezas comunes de la página Spectrum (lo piden sus bloques como "vgnb-spectrum").
 * Del prototipo disenos/telecomnet/spectrum.css.
 *
 * Colores de Spectrum: azul eléctrico #005eff, azul profundo, negro azulado #07122e y blanco. Se aplican solo al header y al <main> de esa página
 * (el tema pone la clase sp-page en el body) y a cada bloque de Spectrum (también en la vista previa del editor). El footer sigue siendo el del sitio.
 * El header de estas páginas lleva solo el logo y el botón de llamar (sin menú): lo arma header.php del tema cuando la página tiene el bloque de portada.
 * Aquí también van las piezas que usan varios bloques de la página: encabezado de sección (.sp-head, .sp-title), etiqueta (.sp-pill), ícono (.sp-ico) y nota legal.
 */

:is(.sp-page .site-header, .sp-page main, [data-vg7^="spectrum-"]) {
  --brand: #005eff; --brand-2: #004dd0; --navy: #002a8a;
  --ink: #0d1220; --night: #07122e; --night-2: #0a1a45;
  --sky: #e1ecff; --sky-2: #f3f7ff; --soft: #9cc0ff;
  --muted: #4f5b74; --line: rgba(0, 94, 255, .18);
  --g-sp: linear-gradient(135deg, #1f6fff 0%, #005eff 48%, #0036b3 100%);
}
.sp-page ::selection { background: #005eff; color: #fff; }
.sp-page .skip { background: #005eff; }
@media (min-width: 360px) { .sp-page .hdr-call span { display: inline; } }   /* sin boton de menu cabe el texto del boton desde 360 px */

:is(.sp-page .site-header, .sp-page main, [data-vg7^="spectrum-"]) .btn-primary { background: var(--g-sp); box-shadow: 0 14px 34px -14px rgba(0, 94, 255, .85); }
:is(.sp-page main, [data-vg7^="spectrum-"]) .btn-ghost { border-color: rgba(13, 18, 32, .25); }
:is(.sp-page main, [data-vg7^="spectrum-"]) .btn-light { box-shadow: 0 14px 34px -14px rgba(0, 20, 80, .55); }
:is(.sp-page main, [data-vg7^="spectrum-"]) .fld :is(input, select):hover { border-color: rgba(0, 94, 255, .4); }
:is(.sp-page main, [data-vg7^="spectrum-"]) .fld :is(input, select):focus { box-shadow: 0 0 0 4px rgba(0, 94, 255, .16); }
:is(.sp-page main, [data-vg7^="spectrum-"]) .fld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23005eff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
@media (max-width: 420px) { :is(.sp-page main, [data-vg7^="spectrum-"]) .btn-lg { max-width: 100%; min-height: 60px; padding: 0 1.4em; font-size: 1rem; white-space: normal; text-align: center; line-height: 1.15; } }

@keyframes sp-streak { from { transform: translateX(0); } to { transform: translateX(260%); } }

/* Encabezado de seccion */
.sp-head { display: grid; gap: 14px; max-width: 62ch; }
.sp-title { font-size: clamp(2.1rem, 5.2vw, 3.9rem); color: var(--ink); }
.sp-title em { font-style: normal; color: var(--brand); }
.sp-head > p { max-width: 52ch; color: var(--muted); }
.on-dark .sp-title { color: #fff; }
.on-dark .sp-title em { color: var(--soft); }
.on-dark .sp-head > p { color: var(--muted-d); }
.sp-pill { display: inline-block; padding: 8px 14px; border-radius: 99px; background: rgba(0, 94, 255, .12); font: 700 .72rem/1 var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.sp-ico { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--g-sp); color: #fff; box-shadow: 0 14px 28px -12px rgba(0, 94, 255, .8); }
.sp-ico .ico { width: 26px; height: 26px; }
.sp-legal-note { max-width: 86ch; margin-top: 28px; color: var(--muted); font-size: .8rem; line-height: 1.6; }