/*
 * Viva Telecom (vivatelecom.net): colores y piezas comunes de la página T-Mobile (lo piden sus bloques como "vgnb-t-mobile").
 * Del prototipo disenos/telecomnet/tmobile.css.
 *
 * Colores de T-Mobile: magenta #e20074, negro #0a0a0c y rosa muy claro #fdf0f7. Se aplican solo al header y al <main> de esa página (el tema pone la clase
 * tm-page en el body) y a cada bloque de T-Mobile (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(.tm-page .site-header, .tm-page main, [data-vg7^="t-mobile-"]) {
  --brand: #e20074; --brand-2: #ff4fa8; --navy: #8c0049;
  --ink: #0a0a0c; --ink-2: #151518; --sky: #ffd9ec; --sky-2: #fdf0f7;
  --soft: #ff9fd0; --muted: #63636b; --line: rgba(226, 0, 116, .2);
  --g-mag: linear-gradient(135deg, #ff2d9a 0%, #e20074 48%, #9c0052 100%);
}
.tm-page ::selection { background: #e20074; color: #fff; }
.tm-page .skip { background: #e20074; }
.tm-page .hdr { background: rgba(10, 10, 12, .8); box-shadow: 0 18px 40px -20px rgba(10, 10, 12, .6); }
.tm-page .site-header.is-solid .hdr { background: rgba(10, 10, 12, .92); }
@media (min-width: 360px) { .tm-page .hdr-call span { display: inline; } }   /* sin botón de menú cabe el texto del botón desde 360 px */

:is(.tm-page .site-header, .tm-page main, [data-vg7^="t-mobile-"]) .btn-primary { background: var(--g-mag); box-shadow: 0 14px 34px -14px rgba(226, 0, 116, .9); }
:is(.tm-page main, [data-vg7^="t-mobile-"]) .btn-light { box-shadow: 0 14px 34px -14px rgba(60, 0, 30, .6); }
:is(.tm-page main, [data-vg7^="t-mobile-"]) :is(.tag.is-light, .on-dark .tag) { color: var(--soft); }
:is(.tm-page main, [data-vg7^="t-mobile-"]) .fld :is(input, select):hover { border-color: rgba(226, 0, 116, .4); }
:is(.tm-page main, [data-vg7^="t-mobile-"]) .fld :is(input, select):focus { box-shadow: 0 0 0 4px rgba(226, 0, 116, .16); }
:is(.tm-page main, [data-vg7^="t-mobile-"]) .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='%23e20074' 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(.tm-page main, [data-vg7^="t-mobile-"]) .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; }
}