/* Estilo común CIDE: limpio, fondo claro, azul corporativo */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');
:root {
  --navy: #002D74; --navy-2: #1E4A92; --granate: #772835;
  --ink: #0F1E3D; --ink-2: #5A6782; --ink-3: #98A2B6;
  --bg: #FFFFFF; --bg-2: #F4F6FA; --line: #E3E7EF;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body { font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif; color: var(--ink); background: var(--bg); }
.logo { display: block; height: calc(var(--u) * 9); width: auto; }
.live { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2.4); color: var(--ink-2); font-weight: 500; }
.live i { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; background: #2E9E5B; animation: live 2s infinite; }
.live.off i { background: #C0392B; }
@keyframes live { 50% { opacity: .3; } }
.acento { color: var(--granate); }
.kicker { font-size: calc(var(--u) * 2.4); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.dot-cat { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--c); }
.fly { position: fixed; z-index: 10; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin: calc(var(--u) * -4) 0 0 calc(var(--u) * -4); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--u) * 4); background: var(--c); box-shadow: 0 8px 24px rgba(0, 45, 116, .2); pointer-events: none; }
.counter { text-align: right; }
.counter .n { font-size: calc(var(--u) * 10); font-weight: 700; line-height: .9; color: var(--navy); font-variant-numeric: tabular-nums; }
.counter .l { font-size: calc(var(--u) * 2.6); color: var(--ink-2); }
.counter.bump .n { animation: bump .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 40% { transform: scale(1.15); color: var(--granate); } }
.ticker { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.6); border-radius: 999px; background: var(--bg-2); font-size: calc(var(--u) * 2.5); color: var(--ink-2); opacity: 0; transform: translateY(30%); transition: all .5s; white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.ticker.on { opacity: 1; transform: none; }
.ticker b { color: var(--navy); }
.idioma { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
.idioma button { font: inherit; font-weight: 600; font-size: inherit; border: none; background: transparent; color: var(--ink-2); padding: .35em .9em; border-radius: 999px; cursor: pointer; }
.idioma button.on { background: var(--navy); color: #fff; }
.qr { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4) calc(var(--u) * 1.2) calc(var(--u) * 1.2); border: 1px solid var(--line); border-radius: calc(var(--u) * 2); background: #fff; flex: none; }
.qr .img { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.qr .img svg { display: block; width: 100%; height: 100%; }
.qr .img svg path, .qr .img svg rect[fill="black"] { fill: var(--navy); }
.qr b { display: block; font-size: calc(var(--u) * 2.8); color: var(--navy); line-height: 1.15; }
.qr span { font-size: calc(var(--u) * 2.2); color: var(--ink-2); }