/*
 * Viva Telecom (vivatelecom.net): colores y piezas comunes de la página Xfinity (lo piden sus bloques como "vgnb-xfinity").
 * Del prototipo disenos/telecomnet/xfinity.css.
 *
 * Colores de Xfinity: morado #6822ff a #bd29f2, morado oscuro, negro #0b0615 y lavanda. Se aplican solo al header y al <main> de esa página (el tema pone la clase
 * xf-page en el body) y a cada bloque de Xfinity (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.
 */

:is(.xf-page .site-header, .xf-page main, [data-vg7^="xfinity-"]) {
  --brand: #6822ff; --brand-2: #5a23b9; --navy: #3d1881;
  --ink: #0b0615; --ink-2: #150a2b; --sky: #e7dcfb; --sky-2: #f1ecf8;
  --soft: #cdb4ff; --mag: #bd29f2; --muted: #5d5775; --line: rgba(90, 35, 185, .2);
  --g-vio: linear-gradient(135deg, #6822ff 0%, #8a2bf0 55%, #bd29f2 100%);
  --g-deep: linear-gradient(135deg, #6822ff 0%, #5a23b9 42%, #2a0d63 100%);
}
.xf-page ::selection { background: #6822ff; color: #fff; }
.xf-page .skip { background: #6822ff; }
.xf-page .hdr { background: rgba(11, 6, 21, .8); box-shadow: 0 18px 40px -20px rgba(11, 6, 21, .6); }
.xf-page .site-header.is-solid .hdr { background: rgba(11, 6, 21, .92); }
@media (min-width: 360px) { .xf-page .hdr-call span { display: inline; } }   /* sin botón de menú cabe el texto del botón desde 360 px */

:is(.xf-page .site-header, .xf-page main, [data-vg7^="xfinity-"]) .btn-primary { background: var(--g-vio); box-shadow: 0 14px 34px -14px rgba(104, 34, 255, .9); }
:is(.xf-page main, [data-vg7^="xfinity-"]) .btn-light { box-shadow: 0 14px 34px -14px rgba(10, 0, 40, .6); }
:is(.xf-page main, [data-vg7^="xfinity-"]) .btn-light::before { background: var(--sky); }
:is(.xf-page main, [data-vg7^="xfinity-"]) :is(.tag.is-light, .on-dark .tag), [data-vg7^="xfinity-"].on-dark .tag { color: var(--soft); }
:is(.xf-page main, [data-vg7^="xfinity-"]) .fld :is(input, select):hover { border-color: rgba(104, 34, 255, .4); }
:is(.xf-page main, [data-vg7^="xfinity-"]) .fld :is(input, select):focus { box-shadow: 0 0 0 4px rgba(104, 34, 255, .16); }
:is(.xf-page main, [data-vg7^="xfinity-"]) .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='%236822ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

@keyframes xf-float { 50% { translate: 0 -9px; } }
@keyframes xf-flow { to { stroke-dashoffset: -100; } }
@keyframes xf-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }