/* ===================================================================== Monitor Banca VE — Hoja de estilos Identidad: violeta profundo + dorado + acento salmón (estilo HostArmada) Soporta tema claro y oscuro vía [data-theme] en . ===================================================================== */ :root { --mbv-violeta: #4B0082; --mbv-violeta-oscuro: #3A0066; --mbv-dorado: #D4AF37; --mbv-dorado-brillante: #FFD700; --mbv-salmon: #FF8A75; --mbv-salmon-hover: #FF745C; --mbv-exito: #20C997; --mbv-inactivo: #DC3545; --mbv-radio: 16px; --mbv-fuente-display: 'Montserrat', sans-serif; --mbv-fuente-cuerpo: 'Inter', sans-serif; /* --- Tokens de tema (modo claro, por defecto) --- */ --mbv-fondo: #F8F9FA; --mbv-superficie: #FFFFFF; --mbv-superficie-alt: #FBF9F3; --mbv-texto: #241633; --mbv-texto-suave: #6b6178; --mbv-borde: rgba(75, 0, 130, 0.08); --mbv-sombra: 0 10px 30px rgba(58, 0, 102, 0.07); --mbv-sombra-fuerte: 0 18px 40px rgba(58, 0, 102, 0.16); --mbv-punto-color: rgba(75, 0, 130, 0.14); } [data-theme="dark"] { --mbv-fondo: #150524; --mbv-superficie: #1E0B33; --mbv-superficie-alt: #200a38; --mbv-texto: #F1EBFB; --mbv-texto-suave: #b9aecb; --mbv-borde: rgba(212, 175, 55, 0.16); --mbv-sombra: 0 10px 30px rgba(0, 0, 0, 0.35); --mbv-sombra-fuerte: 0 18px 40px rgba(0, 0, 0, 0.5); --mbv-punto-color: rgba(212, 175, 55, 0.18); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--mbv-fuente-cuerpo); color: var(--mbv-texto); background: var(--mbv-fondo); -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } h1, h2, h3 { font-family: var(--mbv-fuente-display); color: var(--mbv-violeta-oscuro); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--mbv-dorado-brillante); } a { color: inherit; } .mbv-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mbv-dorado); background: rgba(75, 0, 130, 0.08); border: 1px solid rgba(212, 175, 55, 0.35); padding: 4px 14px; border-radius: 999px; margin-bottom: 12px; } /* ===================== FONDO DE PUNTITOS ===================== */ .mbv-dotted-bg { background-image: radial-gradient(var(--mbv-punto-color) 1.4px, transparent 1.4px); background-size: 22px 22px; } /* ===================== HEADER ===================== */ .mbv-header { background: color-mix(in srgb, var(--mbv-superficie) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mbv-borde); z-index: 1030; } .mbv-logo-mark { border-radius: 12px; display: block; box-shadow: var(--mbv-sombra); object-fit: cover; } .mbv-logo-text { font-family: var(--mbv-fuente-display); font-weight: 600; color: var(--mbv-violeta-oscuro); } [data-theme="dark"] .mbv-logo-text { color: var(--mbv-texto); } .mbv-logo-text strong { color: var(--mbv-dorado); font-weight: 800; } .mbv-logo-text-footer { color: rgba(255,255,255,0.9); } .mbv-nav { gap: 26px; } .mbv-nav a { text-decoration: none; font-weight: 500; font-size: 0.92rem; color: var(--mbv-texto); transition: color 0.2s ease; } .mbv-nav a:hover { color: var(--mbv-violeta); } [data-theme="dark"] .mbv-nav a:hover { color: var(--mbv-dorado-brillante); } .mbv-btn-cta { background: var(--mbv-salmon); color: #FFFFFF; font-weight: 700; border-radius: 999px; padding: 8px 22px; border: none; transition: background 0.2s ease; white-space: nowrap; } .mbv-btn-cta:hover { background: var(--mbv-salmon-hover); color: #FFFFFF; } .mbv-btn-telegram { background: transparent; color: var(--mbv-violeta); border: 1.5px solid var(--mbv-violeta); font-weight: 700; border-radius: 999px; padding: 7px 18px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: all 0.2s ease; } .mbv-btn-telegram:hover { background: var(--mbv-violeta); color: #fff; } [data-theme="dark"] .mbv-btn-telegram { color: var(--mbv-dorado-brillante); border-color: var(--mbv-dorado); } [data-theme="dark"] .mbv-btn-telegram:hover { background: var(--mbv-dorado); color: var(--mbv-violeta-oscuro); } .mbv-theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mbv-borde); background: var(--mbv-superficie); display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; } .mbv-theme-icon-dark { display: none; } [data-theme="dark"] .mbv-theme-icon-light { display: none; } [data-theme="dark"] .mbv-theme-icon-dark { display: inline; } .mbv-clock { font-family: var(--mbv-fuente-display); font-weight: 700; font-size: 0.82rem; color: var(--mbv-violeta-oscuro); background: var(--mbv-superficie); border: 1px solid rgba(212, 175, 55, 0.4); padding: 6px 14px; border-radius: 999px; box-shadow: var(--mbv-sombra); } [data-theme="dark"] .mbv-clock { color: var(--mbv-dorado-brillante); } .mbv-clock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mbv-exito); animation: mbv-pulso 1.8s infinite; } .mbv-clock-label { color: var(--mbv-dorado); font-size: 0.68rem; } .mbv-burger { border: 1px solid var(--mbv-borde); border-radius: 10px; width: 40px; height: 40px; } .mbv-burger-icon, .mbv-burger-icon::before, .mbv-burger-icon::after { content: ''; display: block; width: 18px; height: 2px; background: var(--mbv-violeta-oscuro); margin: 4px auto; } [data-theme="dark"] .mbv-burger-icon, [data-theme="dark"] .mbv-burger-icon::before, [data-theme="dark"] .mbv-burger-icon::after { background: var(--mbv-dorado-brillante); } .mbv-offcanvas { background: var(--mbv-superficie); color: var(--mbv-texto); } .mbv-offcanvas .mbv-nav-mobile a { text-decoration: none; color: var(--mbv-texto); font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--mbv-borde); } /* ===================== HERO ===================== */ .mbv-hero { background: radial-gradient(circle at 15% 20%, rgba(212, 175, 55, 0.14), transparent 45%), linear-gradient(180deg, var(--mbv-violeta-oscuro) 0%, var(--mbv-violeta) 100%); padding: 64px 0 48px; color: #FFFFFF; } .mbv-hero.mbv-dotted-bg { background-blend-mode: overlay, normal, normal; } .mbv-hero-heading { max-width: 720px; margin-bottom: 36px; } .mbv-hero-heading h1 { color: #FFFFFF; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; margin: 0 0 12px; } .mbv-hero-sub { color: rgba(255, 255, 255, 0.8); font-size: 1.02rem; margin: 0; } .mbv-hero-sub strong { color: var(--mbv-dorado-brillante); } .mbv-hero .mbv-eyebrow { background: rgba(255, 255, 255, 0.1); border-color: rgba(212, 175, 55, 0.5); } .mbv-card { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px; border-radius: var(--mbv-radio); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px); box-shadow: var(--mbv-sombra-fuerte); transition: transform 0.25s ease; } .mbv-card:hover { transform: translateY(-3px); } .mbv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mbv-card-label { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.7); } .mbv-card-value { font-family: var(--mbv-fuente-display); font-size: 1.55rem; font-weight: 800; color: #FFFFFF; } .mbv-card-value small { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.6); } .mbv-card-foot { font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); } .mbv-card-accent { background: linear-gradient(145deg, rgba(212, 175, 55, 0.22), rgba(255, 255, 255, 0.08)); border-color: rgba(212, 175, 55, 0.5); } .mbv-card-accent .mbv-card-value { color: var(--mbv-dorado-brillante); } .mbv-card-brecha .mbv-card-value { color: var(--mbv-exito); } .mbv-copy-btn { background: rgba(255,255,255,0.14); border: none; border-radius: 8px; width: 26px; height: 26px; font-size: 0.8rem; line-height: 1; cursor: pointer; color: #fff; transition: transform 0.15s ease, background 0.15s ease; } .mbv-copy-btn:hover { background: rgba(255,255,255,0.28); } .mbv-copy-btn.mbv-copy-success { transform: scale(1.15); background: var(--mbv-exito); } .mbv-copy-btn-light { background: rgba(255,255,255,0.16); } /* ===================== SECCIONES ===================== */ .mbv-section { padding: 64px 0; } .mbv-section-alt { background: var(--mbv-superficie); } .mbv-section-heading { max-width: 640px; margin-bottom: 28px; } .mbv-section-heading h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; margin: 0; } /* ===================== GRÁFICA ===================== */ .mbv-chart-panel { background: var(--mbv-superficie); border-radius: 20px; box-shadow: var(--mbv-sombra); border: 1px solid var(--mbv-borde); padding: 24px; } .mbv-chart-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 18px; } .mbv-periodo-group { gap: 6px; } .mbv-btn-periodo { border: 1px solid var(--mbv-borde); color: var(--mbv-violeta-oscuro); background: var(--mbv-superficie); font-weight: 600; font-size: 0.85rem; border-radius: 999px !important; padding: 6px 16px; margin-right: 6px; } [data-theme="dark"] .mbv-btn-periodo { color: var(--mbv-texto); } .mbv-btn-periodo.active, .mbv-btn-periodo:hover { background: var(--mbv-violeta); border-color: var(--mbv-violeta); color: #fff; } .mbv-rango-personalizado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: var(--mbv-texto-suave); } .mbv-btn-aplicar { background: var(--mbv-dorado); color: var(--mbv-violeta-oscuro); font-weight: 700; border: none; border-radius: 999px; padding: 5px 16px; } .mbv-btn-aplicar:hover { background: var(--mbv-dorado-brillante); } .mbv-chart-wrap { position: relative; width: 100%; min-height: 110px; } .mbv-chart-status { margin: 10px 0 0; font-size: 0.8rem; color: var(--mbv-texto-suave); min-height: 1.2em; } /* ===================== SKELETON / SHIMMER ===================== */ .mbv-skeleton { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(90deg, var(--mbv-borde) 25%, rgba(212,175,55,0.18) 37%, var(--mbv-borde) 63%); background-size: 400% 100%; animation: mbv-shimmer 1.4s ease infinite; opacity: 1; transition: opacity 0.3s ease; pointer-events: none; } .mbv-skeleton.mbv-skeleton-hidden { opacity: 0; } @keyframes mbv-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ===================== TARJETA MÓDULO PRIVADO ===================== */ .mbv-privado-card { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: linear-gradient(160deg, var(--mbv-violeta-oscuro), var(--mbv-violeta)); border-radius: 20px; padding: 32px; color: #fff; box-shadow: var(--mbv-sombra-fuerte); } .mbv-privado-icon { font-size: 2.4rem; } .mbv-privado-texto { flex: 1; min-width: 240px; } .mbv-privado-texto h2 { color: #fff; margin: 4px 0 8px; } .mbv-privado-texto p { color: rgba(255,255,255,0.78); margin: 0; } /* ===================== CALCULADORA ===================== */ .mbv-calc-panel { background: linear-gradient(160deg, var(--mbv-superficie), var(--mbv-superficie-alt)); border-radius: 20px; border: 1px solid rgba(212, 175, 55, 0.25); box-shadow: var(--mbv-sombra); padding: 28px; } .mbv-calc-row { display: grid; grid-template-columns: 1fr 1fr auto 1fr; gap: 14px; align-items: end; } @media (max-width: 780px) { .mbv-calc-row { grid-template-columns: 1fr 1fr; } .mbv-calc-swap { order: 5; justify-self: center; } } .mbv-calc-field label { display: block; font-size: 0.76rem; font-weight: 600; color: var(--mbv-texto-suave); margin-bottom: 4px; } .mbv-calc-swap { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--mbv-borde); background: var(--mbv-superficie); color: var(--mbv-violeta); font-size: 1.1rem; font-weight: 700; align-self: center; } .mbv-calc-swap:hover { background: var(--mbv-violeta); color: #fff; } .mbv-calc-resultado { margin-top: 22px; padding: 18px 22px; border-radius: 14px; background: var(--mbv-violeta-oscuro); color: #fff; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .mbv-calc-resultado-label { font-size: 0.85rem; color: rgba(255,255,255,0.7); } .mbv-calc-resultado-valor { font-family: var(--mbv-fuente-display); font-size: 1.7rem; font-weight: 800; color: var(--mbv-salmon); flex: 1; } .mbv-calc-disclaimer { margin: 14px 0 0; font-size: 0.72rem; color: var(--mbv-texto-suave); } /* ===================== PASOS (CÓMO FUNCIONA) ===================== */ .mbv-paso { height: 100%; background: var(--mbv-superficie); border: 1px solid var(--mbv-borde); border-radius: var(--mbv-radio); padding: 26px 22px; box-shadow: var(--mbv-sombra); } .mbv-paso-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(75,0,130,0.1); color: var(--mbv-violeta); font-family: var(--mbv-fuente-display); font-weight: 800; margin-bottom: 14px; } [data-theme="dark"] .mbv-paso-num { background: rgba(212,175,55,0.16); color: var(--mbv-dorado-brillante); } .mbv-paso h3 { font-size: 1.05rem; margin: 0 0 8px; } .mbv-paso p { color: var(--mbv-texto-suave); font-size: 0.92rem; margin: 0; } /* ===================== FAQ / ACORDEÓN ===================== */ .mbv-accordion .accordion-item { background: var(--mbv-superficie); border: 1px solid var(--mbv-borde); border-radius: 12px !important; margin-bottom: 10px; overflow: hidden; } .mbv-accordion .accordion-button { background: var(--mbv-superficie); color: var(--mbv-texto); font-weight: 600; font-family: var(--mbv-fuente-display); font-size: 0.95rem; } .mbv-accordion .accordion-button:not(.collapsed) { color: var(--mbv-violeta); background: rgba(75,0,130,0.05); } [data-theme="dark"] .mbv-accordion .accordion-button:not(.collapsed) { color: var(--mbv-dorado-brillante); background: rgba(212,175,55,0.08); } .mbv-accordion .accordion-body { color: var(--mbv-texto-suave); font-size: 0.9rem; } .mbv-accordion .accordion-button:focus { box-shadow: none; } /* ===================== SOBRE NOSOTROS ===================== */ .mbv-about-text { color: var(--mbv-texto-suave); line-height: 1.7; } .mbv-trust-card { background: linear-gradient(160deg, var(--mbv-violeta-oscuro), var(--mbv-violeta)); color: #fff; border-radius: var(--mbv-radio); padding: 26px; box-shadow: var(--mbv-sombra-fuerte); } .mbv-trust-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; } .mbv-trust-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; } .mbv-trust-icon { font-size: 1.1rem; } .mbv-trust-disclaimer { font-size: 0.76rem; color: rgba(255,255,255,0.65); margin: 0; } /* ===================== FOOTER ===================== */ .mbv-footer { background: var(--mbv-violeta-oscuro); color: rgba(255,255,255,0.75); font-size: 0.85rem; padding: 26px 0; } /* El footer siempre tiene fondo violeta oscuro, sin importar el tema activo, así que el botón de Telegram necesita sus propios colores fijos aquí — si hereda el estilo violeta-sobre-violeta del header, se vuelve invisible. */ .mbv-footer .mbv-btn-telegram { color: #FFFFFF; border-color: rgba(212, 175, 55, 0.7); background: rgba(255, 255, 255, 0.06); } .mbv-footer .mbv-btn-telegram:hover { background: var(--mbv-dorado); border-color: var(--mbv-dorado); color: var(--mbv-violeta-oscuro); } .mbv-footer-divider { border-color: rgba(255,255,255,0.15); margin: 18px 0; } .mbv-footer-note { color: rgba(255,255,255,0.5); } /* ===================== TOASTS ===================== */ .mbv-toast-container { position: fixed; right: 18px; bottom: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; } .mbv-toast { background: var(--mbv-violeta-oscuro); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 0.85rem; box-shadow: var(--mbv-sombra-fuerte); border-left: 4px solid var(--mbv-exito); opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; } .mbv-toast.mbv-toast-show { opacity: 1; transform: translateY(0); } .mbv-toast.mbv-toast-error { border-left-color: var(--mbv-inactivo); } /* ===================== INSIGNIAS DE BANCO (color + emoji) ===================== */ .mbv-banco-badge-emoji { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; border-radius: 12px; font-size: 1.3rem; border: 1.5px solid; flex-shrink: 0; } .mbv-banco-logo-img { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } /* ===================== HISTORIAL DETALLADO (tabla con paginación) ===================== Usa un acento verde azulado (teal) nuevo, que no existe en el resto del sitio, a propósito — para que esta sección se distinga de un vistazo del violeta/dorado habitual, tal como se pidió. */ :root { --mbv-teal: #0E7C86; --mbv-teal-oscuro: #0A5F67; --mbv-teal-suave: rgba(14, 124, 134, 0.12); } [data-theme="dark"] { --mbv-teal: #2DD4C7; --mbv-teal-oscuro: #1FA99E; --mbv-teal-suave: rgba(45, 212, 199, 0.14); } .mbv-eyebrow-historial { color: var(--mbv-teal); border-color: rgba(14, 124, 134, 0.35); background: var(--mbv-teal-suave); } .mbv-historial-panel { background: var(--mbv-superficie); border-radius: 20px; box-shadow: var(--mbv-sombra); border: 1px solid rgba(14, 124, 134, 0.18); padding: 24px; } .mbv-historial-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; } .mbv-historial-controls-label { font-size: 0.82rem; font-weight: 600; color: var(--mbv-texto-suave); } .mbv-limite-group { gap: 6px; } .mbv-btn-limite { border: 1px solid rgba(14, 124, 134, 0.3); color: var(--mbv-teal); background: var(--mbv-superficie); font-weight: 600; font-size: 0.85rem; border-radius: 999px !important; padding: 6px 16px; margin-right: 6px; } .mbv-btn-limite.active, .mbv-btn-limite:hover { background: var(--mbv-teal); border-color: var(--mbv-teal); color: #fff; } .mbv-historial-tabla-wrap { position: relative; width: 100%; min-height: 140px; overflow-x: auto; } .mbv-historial-tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; white-space: nowrap; } .mbv-historial-tabla thead th { background: linear-gradient(120deg, var(--mbv-teal), var(--mbv-teal-oscuro)); color: #fff; font-family: var(--mbv-fuente-display); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; padding: 12px 14px; } .mbv-historial-tabla thead th:first-child { border-radius: 10px 0 0 10px; } .mbv-historial-tabla thead th:last-child { border-radius: 0 10px 10px 0; } .mbv-historial-tabla tbody td { padding: 12px 14px; border-bottom: 1px solid var(--mbv-borde); color: var(--mbv-texto); } .mbv-historial-tabla tbody tr:nth-child(even) { background: var(--mbv-teal-suave); } .mbv-historial-tabla tbody tr:hover { background: rgba(14, 124, 134, 0.16); } .mbv-historial-tabla .mbv-hist-usd { font-weight: 700; color: var(--mbv-violeta); } [data-theme="dark"] .mbv-historial-tabla .mbv-hist-usd { color: var(--mbv-dorado-brillante); } .mbv-historial-tabla .mbv-hist-usdt { font-weight: 700; color: var(--mbv-dorado); } .mbv-hist-tendencia { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; } .mbv-hist-tendencia.sube { color: var(--mbv-exito); background: rgba(32, 201, 151, 0.12); } .mbv-hist-tendencia.baja { color: var(--mbv-inactivo); background: rgba(220, 53, 69, 0.1); } .mbv-hist-tendencia.igual { color: var(--mbv-texto-suave); background: rgba(107, 97, 120, 0.1); } .mbv-skeleton-tabla { border-radius: 12px; } .mbv-historial-vacio { padding: 24px; text-align: center; color: var(--mbv-texto-suave); font-size: 0.9rem; } /* ===================== TARJETA BYBIT P2P (nueva) ===================== Identidad negro/naranja-dorado propia de Bybit — a propósito distinta del dorado que ya usa la tarjeta de Binance, para diferenciarlas de un vistazo cuando están una junto a la otra. */ .mbv-card-bybit { background: linear-gradient(150deg, #14151A 0%, #1E1F26 100%); border-color: rgba(247, 166, 0, 0.45); } .mbv-card-bybit .mbv-card-label { color: rgba(247, 166, 0, 0.85); } .mbv-card-bybit .mbv-card-value { color: #FFB020; } .mbv-card-bybit .mbv-card-value small { color: rgba(255, 176, 32, 0.65); } .mbv-card-bybit .mbv-copy-btn { background: rgba(247, 166, 0, 0.16); } .mbv-card-bybit .mbv-copy-btn:hover { background: rgba(247, 166, 0, 0.3); } .mbv-subseccion-p2p { margin-top: 22px; } .mbv-subseccion-p2p-titulo { color: rgba(255, 255, 255, 0.75); font-family: var(--mbv-fuente-display); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .mbv-subseccion-p2p-titulo::before { content: ''; width: 22px; height: 2px; background: var(--mbv-dorado); display: inline-block; } /* ===================== UTILIDADES ===================== */ @keyframes mbv-pulso { 0% { box-shadow: 0 0 0 0 rgba(32, 201, 151, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(32, 201, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(32, 201, 151, 0); } } @media (prefers-reduced-motion: reduce) { .mbv-clock-dot, .mbv-skeleton { animation: none; } .mbv-card, body { transition: none; } } :focus-visible { outline: 2px solid var(--mbv-dorado); outline-offset: 2px; }