/*
 * Viva Telecom (vivatelecom.net): colores y piezas comunes de la página AT&T (lo piden sus bloques como "vgnb-att").
 * Del prototipo disenos/telecomnet/att.css.
 *
 * Colores de AT&T: cian #009fdb, azul #0072b8 y marino #00388f. Se aplican solo al header y al <main> de esa página (el tema pone la clase at-page en el body)
 * y a cada bloque de AT&T (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(.at-page .site-header, .at-page main, [data-vg7^="att-"]) {
  --brand: #0072b8; --brand-2: #35c4f2; --cyan: #009fdb; --navy: #00388f;
  --ink: #04122e; --ink-2: #071d45; --sky: #d3effb; --sky-2: #eef8fd;
  --soft: #8fdcf7; --muted: #566370; --line: rgba(0, 114, 184, .2);
  --g-att: linear-gradient(135deg, #0b84c9 0%, #0069b4 48%, #00388f 100%);
}
.at-page ::selection { background: #0072b8; color: #fff; }
.at-page .skip { background: #0072b8; }
.at-page .hdr { background: rgba(4, 18, 46, .8); box-shadow: 0 18px 40px -20px rgba(4, 18, 46, .6); }
.at-page .site-header.is-solid .hdr { background: rgba(4, 18, 46, .92); }
@media (min-width: 360px) { .at-page .hdr-call span { display: inline; } }   /* sin botón de menú cabe el texto del botón desde 360 px */

:is(.at-page .site-header, .at-page main, [data-vg7^="att-"]) .btn-primary { background: var(--g-att); box-shadow: 0 14px 34px -14px rgba(0, 159, 219, .85); }
:is(.at-page main, [data-vg7^="att-"]) .btn-light { box-shadow: 0 14px 34px -14px rgba(0, 20, 60, .6); }
:is(.at-page main, [data-vg7^="att-"]) .btn-light::before { background: var(--sky); }
:is(.at-page main, [data-vg7^="att-"]) :is(.tag.is-light, .on-dark .tag) { color: var(--soft); }
:is(.at-page main, [data-vg7^="att-"]) .fld :is(input, select):hover { border-color: rgba(0, 114, 184, .4); }
:is(.at-page main, [data-vg7^="att-"]) .fld :is(input, select):focus { box-shadow: 0 0 0 4px rgba(0, 114, 184, .16); }
:is(.at-page main, [data-vg7^="att-"]) .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='%230072b8' 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(.at-page main, [data-vg7^="att-"]) .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 at-pulse { from { transform: scale(.32); opacity: .8; } to { transform: scale(1.12); opacity: 0; } }
@keyframes at-float { 50% { translate: 0 -9px; } }