:root { --marca: #62cbff; --marca2: #9fe3ff; --tabs-h: 64px; }
@media (prefers-color-scheme: light) { :root { --marca: #0a6bd6; --marca2: #0a6bd6; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg:not(.sprite) { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 8px); }

header { flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.marca { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--marca); font-weight: 800; letter-spacing: .01em; font-size: 1.3rem; text-shadow: 0 0 18px color-mix(in srgb, var(--marca) 45%, transparent); }
.marca span { color: var(--marca2); font-weight: 600; }
.ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; padding: 0; }
.ico:hover, .ico:focus-visible { border-color: var(--marca); color: var(--marca); }
#ico-cuenta.activo { border-color: var(--marca); color: var(--marca); }

#velo { position: fixed; inset: 0; z-index: 30; background: rgba(2, 4, 12, .6); backdrop-filter: blur(3px); }
#velo[hidden] { display: none; }
nav#menu { position: fixed; z-index: 31; top: 0; bottom: 0; left: 0; width: min(310px, 86vw); display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 12px 10px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: var(--card); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .25s ease; overflow-y: auto; visibility: hidden; }
nav#menu.abierto { transform: none; visibility: visible; }
.menu-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
nav#menu a { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 12px; border-bottom: 0; color: var(--ink); text-decoration: none; }
nav#menu a:hover, nav#menu a.activo { background: color-mix(in srgb, var(--marca) 14%, transparent); color: var(--marca); border: 0; }

nav#tabs { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
nav#tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; padding: 4px 0; border: 0; border-radius: 12px; color: var(--mut); font-size: .72rem; text-decoration: none; }
nav#tabs a.activo { color: var(--marca); border: 0; background: color-mix(in srgb, var(--marca) 13%, transparent); }
nav#tabs a svg { width: 26px; height: 26px; }
@media (min-width: 900px) { nav#tabs { left: 50%; right: auto; width: 560px; transform: translateX(-50%); bottom: 12px; border: 1px solid var(--line); border-radius: 20px; } }
footer { display: none; }
@media (prefers-reduced-motion: reduce) { nav#menu { transition: none; } }