/*
 * Viva Telecom (vivatelecom.net): colores y piezas comunes de la página EarthLink (lo piden sus bloques como "vgnb-earthlink").
 * Del prototipo disenos/telecomnet/earthlink.css.
 *
 * Colores de EarthLink: azul petroleo #0075a3, naranja #f68d1f y negro azulado #06202b / #041a24. Se aplican solo al header y al <main> de esa página (el tema pone la clase
 * el-page en el body) y a cada bloque de EarthLink (también en la vista previa del editor). El footer sigue siendo el del sitio. La página no lleva fotos.
 * 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.
 * Las clases propias van con el prefijo el-; lo genérico (botones, etiquetas, campos del formulario) va acotado a esta página para no mezclarse con otros proveedores.
 */

:is(.el-page .site-header, .el-page main, [data-vg7^="earthlink-"]) {
  --brand: #0075a3; --brand-2: #005a80; --navy: #04222f;
  --ink: #06202b; --night: #041a24; --night-2: #062d3d;
  --orange: #f68d1f; --orange-2: #ffa63d;
  --sky: #dff1f8; --sky-2: #f1f8fb; --soft: #7fd4f3;
  --muted: #4a6672; --line: rgba(0, 117, 163, .2);
  --g-el: linear-gradient(135deg, #1597c9 0%, #0075a3 50%, #00506f 100%);
  --g-or: linear-gradient(135deg, #ffb04d 0%, #f68d1f 55%, #e9780a 100%);
}
.el-page ::selection { background: #f68d1f; color: #06202b; }
.el-page .skip { background: #0075a3; }
@media (min-width: 360px) { .el-page .hdr-call span { display: inline; } }   /* sin botón de menú cabe el texto del botón desde 360 px */

:is(.el-page main, [data-vg7^="earthlink-"]) :is(.tag.is-light, .on-dark .tag) { color: var(--soft); }
:is(.el-page .site-header, .el-page main, [data-vg7^="earthlink-"]) .btn-primary { background: var(--g-or); color: var(--ink); box-shadow: 0 14px 34px -14px rgba(246, 141, 31, .85); }
:is(.el-page .site-header, .el-page main, [data-vg7^="earthlink-"]) .btn-primary::before { background: var(--ink); }
:is(.el-page .site-header, .el-page main, [data-vg7^="earthlink-"]) .btn-primary:hover { color: #fff; }
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-light { box-shadow: 0 14px 34px -14px rgba(0, 20, 40, .6); }
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-light::before { background: var(--sky); }
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-ghost { border-color: rgba(6, 32, 43, .25); }
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-ghost::before { background: var(--ink); }
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-dark { background: var(--night); color: #fff; box-shadow: 0 18px 36px -16px rgba(4, 26, 36, .85); }
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-dark::before { background: #fff; }
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-dark:hover { color: var(--ink); transform: translateY(-2px); }
@media (max-width: 420px) {
  :is(.el-page main, [data-vg7^="earthlink-"]) .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; }
}
:is(.el-page main, [data-vg7^="earthlink-"]) .fld :is(input, select):hover { border-color: rgba(0, 117, 163, .45); }
:is(.el-page main, [data-vg7^="earthlink-"]) .fld :is(input, select):focus { box-shadow: 0 0 0 4px rgba(0, 117, 163, .18); }
:is(.el-page main, [data-vg7^="earthlink-"]) .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='%230075a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

@keyframes el-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes el-float { 50% { translate: 0 -9px; } }
@keyframes el-shimmer { to { background-position: -200% 0; } }
@keyframes el-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
@keyframes el-wiggle { 0%, 50%, 100% { rotate: 0deg; } 8%, 24% { rotate: -16deg; } 16%, 32% { rotate: 16deg; } 40% { rotate: -8deg; } }
@keyframes el-sig { 0%, 100% { opacity: .25; } 40%, 70% { opacity: 1; } }

/* Encabezado de sección (lo usan planes, conexiones, usos, 5G, soporte y formulario) */
.el-head { display: grid; gap: 14px; max-width: 62ch; }
.el-title { font-size: clamp(2.1rem, 5.2vw, 3.9rem); color: var(--ink); }
.el-title em { font-style: normal; color: var(--orange); }
.el-head > p { max-width: 52ch; color: var(--muted); }
.on-dark .el-title { color: #fff; }
.on-dark .el-head > p { color: var(--muted-d); }
.el-ico { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--g-el); color: #fff; box-shadow: 0 14px 28px -12px rgba(0, 117, 163, .8); }
.el-ico .ico { width: 26px; height: 26px; }