/*
 * Viva Telecom (vivatelecom.net): colores y piezas comunes de la página Verizon (lo piden sus bloques como "vgnb-verizon").
 * Del prototipo disenos/telecomnet/verizon.css.
 *
 * Colores de Verizon: rojo #ef0020, negro #0b0a0d, crema #f8f3e9 y un amarillo #f5ff1e solo para el sello "Mayor velocidad". Se aplican solo al header y al <main> de esa
 * página (el tema pone la clase vz-page en el body) y a cada bloque de Verizon (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(.vz-page .site-header, .vz-page main, [data-vg7^="verizon-"]) {
  --brand: #ef0020; --brand-2: #c4001a; --navy: #7a0012;
  --ink: #0b0a0d; --ink-2: #17090d; --sky: #ffe3e6; --sky-2: #f8f3e9;
  --paper: #f8f3e9; --soft: #ff8a97; --yellow: #f5ff1e;
  --muted: #5d544d; --line: rgba(11, 10, 13, .12);
  --g-red: linear-gradient(135deg, #ff3d4c 0%, #ef0020 52%, #b3001a 100%);
}
.vz-page ::selection { background: #ef0020; color: #fff; }
.vz-page .skip { background: #ef0020; }
.vz-page .hdr { background: rgba(11, 10, 13, .8); box-shadow: 0 18px 40px -20px rgba(11, 10, 13, .6); }
.vz-page .site-header.is-solid .hdr { background: rgba(11, 10, 13, .92); }
@media (min-width: 360px) { .vz-page .hdr-call span { display: inline; } }   /* sin botón de menú cabe el texto del botón desde 360 px */

:is(.vz-page .site-header, .vz-page main, [data-vg7^="verizon-"]) .btn-primary { box-shadow: 0 14px 34px -14px rgba(239, 0, 32, .85); }
:is(.vz-page main, [data-vg7^="verizon-"]) :is(.tag.is-light, .on-dark .tag) { color: var(--soft); }
:is(.vz-page main, [data-vg7^="verizon-"]) .btn-ghost-l { color: #fff; border-color: rgba(255, 255, 255, .4); }
:is(.vz-page main, [data-vg7^="verizon-"]) .btn-ghost-l::before { background: #fff; }
:is(.vz-page main, [data-vg7^="verizon-"]) .btn-ghost-l:hover { color: var(--ink); border-color: #fff; }
:is(.vz-page main, [data-vg7^="verizon-"]) .fld :is(input, select):hover { border-color: rgba(239, 0, 32, .4); }
:is(.vz-page main, [data-vg7^="verizon-"]) .fld :is(input, select):focus { box-shadow: 0 0 0 4px rgba(239, 0, 32, .16); }
:is(.vz-page main, [data-vg7^="verizon-"]) .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='%23ef0020' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

@keyframes vz-spin { to { rotate: 360deg; } }
@keyframes vz-float { 50% { transform: translateY(-9px); } }
@keyframes vz-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }
@keyframes vz-ring { from { transform: scale(.35); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }