/* ══════════════════════════════════════════════════════════════════
   Vantax · diseño compartido de toda la web
   Lo usan el panel del servidor, la terminal de los devs y todas las páginas públicas.
   Colores sacados del avatar y el banner de Vantax. Sin cajas de fondo: todo se ordena con
   contornos finos, esquinas de luz, tipografía y brillo. Ligero en PC: sin backdrop-filter.
   ══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-mono.woff2') format('woff2'); }

:root {
    --fondo: #07020e; --fondo2: #10061c; --fondo3: #0b0415; --tinta: #f2eaff; --suave: #ab9cc6; --tenue: #6f5f8c;
    --acento: #a648f8; --acento2: #dcb6fb; --brillo: 166, 72, 248; --estrella: #e8d0f8;
    --circuito: #582888; --circuito2: #7038b0; --peligro: #ff6b9a; --peligro-brillo: 255, 107, 154; --aviso: #f5c26b; --ok: #6ee7b7;
    --hilo: rgba(255, 255, 255, .09); --hilo2: rgba(255, 255, 255, .17); --contorno: rgba(166, 72, 248, .34);
    --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --ancho-menu: 252px;
    color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 560px at 50% -12%, rgba(var(--brillo), .16), transparent 62%), radial-gradient(700px 500px at 100% 100%, rgba(64, 32, 96, .35), transparent 60%), radial-gradient(600px 460px at 0% 70%, rgba(40, 16, 64, .45), transparent 60%); }
#cosmic-rain-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.circuitos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .5; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; }
img { max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
.capa { position: relative; z-index: 1; }
.oculto { display: none !important; }
::selection { background: rgba(var(--brillo), .3); }
:focus-visible { outline: 2px solid var(--acento2); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
strong { font-weight: 600; color: var(--tinta); }
code { font-family: var(--mono); font-size: .9em; color: var(--acento2); }

/* ── Botones: siempre se ven como botones ─────────────────────────── */
.enlace, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 9px; border: 1px solid rgba(var(--brillo), .5); background: rgba(var(--brillo), .08); color: var(--acento2); font-size: 14px; font-weight: 550; line-height: 1.2; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, color .15s, transform .12s; }
.enlace:hover, .btn:hover { border-color: var(--acento); background: rgba(var(--brillo), .17); color: #fff; box-shadow: 0 0 0 3px rgba(var(--brillo), .12), 0 0 22px rgba(var(--brillo), .3); }
.enlace:active, .btn:active { transform: translateY(1px); }
.enlace:disabled, .btn:disabled { box-shadow: none; transform: none; border-color: var(--hilo2); background: transparent; color: var(--tenue); }
.enlace.primario, .btn.primario { background: linear-gradient(135deg, #7a2cf0, var(--acento) 55%, #c07cff); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: 0 8px 26px rgba(var(--brillo), .34), inset 0 1px 0 rgba(255, 255, 255, .25); }
.enlace.primario:hover, .btn.primario:hover { box-shadow: 0 0 0 3px rgba(var(--brillo), .2), 0 10px 32px rgba(var(--brillo), .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
.enlace.peligro, .btn.peligro { border-color: rgba(var(--peligro-brillo), .5); background: rgba(var(--peligro-brillo), .07); color: var(--peligro); }
.enlace.peligro:hover, .btn.peligro:hover { border-color: var(--peligro); background: rgba(var(--peligro-brillo), .16); color: #ffd9e6; box-shadow: 0 0 0 3px rgba(var(--peligro-brillo), .12), 0 0 22px rgba(var(--peligro-brillo), .3); }
.enlace.suave, .btn.suave, .enlace[data-no] { border-color: var(--hilo2); background: transparent; color: var(--suave); }
.enlace.suave:hover, .btn.suave:hover, .enlace[data-no]:hover { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .05); color: var(--tinta); box-shadow: none; }
.enlace.chico, .btn.chico { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.enlace.grande, .btn.grande { padding: 13px 22px; font-size: 15.5px; border-radius: 11px; }
.enlace .flecha, .btn .flecha { transition: transform .2s; }
.enlace:hover .flecha, .btn:hover .flecha { transform: translateX(3px); }
.botonera { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Un botón que está trabajando (enviar, abrir un panel…). */
.enlace.cargando, .btn.cargando { opacity: .75; pointer-events: none; }
.enlace.cargando::after, .btn.cargando::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.enlace.deshabilitado { pointer-events: none; opacity: .45; }
/* Enlace de texto dentro de un párrafo. */
.vinculo { color: var(--acento2); text-decoration: underline; text-decoration-color: rgba(var(--brillo), .5); text-underline-offset: 4px; }
.vinculo:hover { color: #fff; text-decoration-color: var(--acento); }

/* ── Contornos: marco fino con esquinas de luz. Su fondo es el color de la página: no se ve
   como una caja, pero las estrellas pasan por detrás. ─────────────────────────────────── */
.marco { position: relative; border: 1px solid var(--hilo); background: rgba(7, 2, 14, .84); }
.marco::before { content: ""; position: absolute; inset: -1px; pointer-events: none; --c: rgba(var(--brillo), .85); --l: 16px;
    background:
        linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l),
        linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l),
        linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l),
        linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l);
    background-repeat: no-repeat; transition: opacity .25s; opacity: .8; }
.marco:hover::before { opacity: 1; }
.marco > .marca-titulo { position: absolute; top: -9px; left: 18px; padding: 0 10px; background: var(--fondo); font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--acento2); line-height: 18px; }

/* ── Interruptor ───────────────────────────────────────────────────── */
.int { width: 44px; height: 25px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .03); position: relative; flex-shrink: 0; transition: border-color .25s, background .25s, box-shadow .25s; }
.int::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--suave); transition: transform .3s cubic-bezier(.3,1.3,.5,1), background .25s, box-shadow .25s; }
.int:hover { border-color: rgba(var(--brillo), .7); }
.int.on { border-color: rgba(var(--brillo), .8); background: rgba(var(--brillo), .16); box-shadow: 0 0 14px rgba(var(--brillo), .25); }
.int.on::after { transform: translateX(19px); background: linear-gradient(140deg, #fff, var(--acento2) 40%, var(--acento)); box-shadow: 0 0 12px rgba(var(--brillo), .7); }
.int.cargando::after { animation: latido .9s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }

/* ── Campos de texto ───────────────────────────────────────────────── */
.linea-txt { width: 100%; margin-top: 8px; padding: 10px 12px; background: rgba(7, 2, 14, .55); border: 1px solid var(--hilo2); border-radius: 9px; outline: none; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.linea-txt:hover { border-color: rgba(255, 255, 255, .26); }
.linea-txt:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(var(--brillo), .18); }
textarea.linea-txt { min-height: 104px; resize: vertical; line-height: 1.55; }
select.linea-txt { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--acento2) 50%), linear-gradient(135deg, var(--acento2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
select.linea-txt option { background: var(--fondo2); }
.etiqueta { display: block; font-size: 14px; color: var(--suave); margin-top: 16px; }

/* ── Menú lateral (panel y terminal) ──────────────────────────────── */
.menu { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ancho-menu); z-index: 46; display: flex; flex-direction: column; gap: 6px; padding: 26px 18px 20px 22px; border-right: 1px solid var(--contorno); background: linear-gradient(180deg, rgba(9, 3, 18, .86), rgba(7, 2, 14, .7)); box-shadow: 1px 0 0 rgba(var(--brillo), .08), 18px 0 50px rgba(0, 0, 0, .35); overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .32em; font-weight: 600; text-decoration: none; padding: 0 6px; }
.servidor-actual { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; padding: 0 6px 18px; border-bottom: 1px solid var(--hilo); min-width: 0; }
.servidor-actual img, .servidor-actual .sin-icono { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(var(--brillo), .45), 0 0 14px rgba(var(--brillo), .25); }
.servidor-actual .sin-icono { display: flex; align-items: center; justify-content: center; font-weight: 650; color: var(--acento2); background: rgba(var(--brillo), .12); }
.servidor-actual div { min-width: 0; }
.servidor-actual b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.servidor-actual span { display: block; font-size: 12px; color: var(--tenue); margin-top: 2px; }
.menu .item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; color: var(--suave); text-decoration: none; text-align: left; position: relative; transition: color .15s, background .15s, border-color .15s; }
.menu .item:hover { color: var(--tinta); background: rgba(var(--brillo), .07); border-color: rgba(var(--brillo), .18); }
.menu .item.activo { color: #fff; background: linear-gradient(90deg, rgba(var(--brillo), .2), rgba(var(--brillo), .04)); border-color: rgba(var(--brillo), .42); }
.menu .item.activo::before { content: ""; position: absolute; left: -23px; top: 8px; bottom: 8px; width: 2px; background: var(--acento); box-shadow: 0 0 10px rgba(var(--brillo), .9); }
.menu .ico { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu .item.activo .ico { filter: drop-shadow(0 0 4px rgba(var(--brillo), .9)); }
.menu .cuenta { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--tenue); }
.menu .item.activo .cuenta { color: var(--acento2); }
.menu .alerta-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--aviso); flex-shrink: 0; box-shadow: 0 0 8px rgba(245, 194, 107, .8); }
.menu-grupo { margin: 18px 10px 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--tenue); }
.menu-pie { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hilo); display: flex; flex-direction: column; gap: 2px; }
.menu .usuario { display: flex; align-items: center; gap: 10px; padding: 12px 10px 0; font-size: 13px; color: var(--suave); min-width: 0; }
.menu .usuario img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px var(--hilo2); }
.menu .usuario span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .usuario a { color: var(--tenue); text-decoration: none; font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--hilo); border-radius: 6px; }
.menu .usuario a:hover { color: var(--peligro); border-color: rgba(var(--peligro-brillo), .45); }
.barra-movil, .velo-menu { display: none; }
.con-menu main.capa { margin-left: var(--ancho-menu); }

/* ── Cabecera y pie de las páginas públicas ───────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 16px max(clamp(18px, 4vw, 48px), calc((100% - 1180px) / 2 + clamp(18px, 4vw, 48px))); border-bottom: 1px solid var(--hilo); background: linear-gradient(180deg, rgba(7, 2, 14, .94), rgba(7, 2, 14, .8)); }
.cabecera .marca img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--brillo), .5), 0 0 14px rgba(var(--brillo), .35); }
.cabecera nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.cabecera nav > a:not(.enlace) { padding: 8px 12px; border-radius: 8px; border: 1px solid transparent; color: var(--suave); text-decoration: none; font-size: 14px; transition: color .15s, border-color .15s, background .15s; }
.cabecera nav > a:not(.enlace):hover, .cabecera nav > a.activo { color: var(--tinta); border-color: rgba(var(--brillo), .3); background: rgba(var(--brillo), .07); }
.cabecera nav .enlace { margin-left: 8px; }
.cabecera .avatar { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px var(--hilo2); }
.cuenta-web { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--hilo); font-size: 14px; color: var(--suave); }
.cuenta-web span { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuenta-web a { font-size: 12.5px; color: var(--tenue); text-decoration: none; padding: 3px 8px; border: 1px solid var(--hilo); border-radius: 6px; }
.cuenta-web a:hover { color: var(--peligro); border-color: rgba(var(--peligro-brillo), .45); }
.cabecera .abrir-nav { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--hilo2); border-radius: 9px; align-items: center; justify-content: center; }
.cabecera .abrir-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pie { position: relative; z-index: 1; margin-top: 80px; padding: 34px max(clamp(18px, 4vw, 48px), calc((100% - 1180px) / 2 + clamp(18px, 4vw, 48px))) 40px; border-top: 1px solid var(--hilo); display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; font-size: 13.5px; color: var(--tenue); }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.pie a { color: var(--suave); text-decoration: none; }
.pie a:hover { color: var(--acento2); }
.pie .creditos { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--tenue); opacity: .85; }
.pie .creditos a { color: var(--tenue); text-decoration: underline; text-decoration-color: var(--hilo); text-underline-offset: 3px; }
.envoltura { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }
.titulo-grande { margin: 0; font-weight: 680; font-size: clamp(38px, 6vw, 76px); line-height: 1; letter-spacing: -.04em; background: linear-gradient(180deg, #fff 30%, var(--acento2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(var(--brillo), .35)); }
.titulo-seccion { margin: 0; font-weight: 650; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -.025em; line-height: 1.1; }
.entradilla { color: var(--suave); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; max-width: 640px; }

/* ── Avisos flotantes, confirmaciones e informes ───────────────────── */
.avisos { position: fixed; left: 32px; bottom: 28px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: min(460px, calc(100vw - 40px)); pointer-events: none; }
.con-menu .avisos { left: calc(var(--ancho-menu) + 32px); }
.aviso { pointer-events: auto; padding: 12px 16px 12px 18px; background: linear-gradient(90deg, rgba(16, 6, 28, .98), rgba(16, 6, 28, .9)); border: 1px solid var(--contorno); border-left: 3px solid var(--acento); border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.5; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); animation: entrar .35s cubic-bezier(.2,.85,.15,1); }
.aviso.error { border-color: rgba(var(--peligro-brillo), .35); border-left-color: var(--peligro); }
.aviso.atento { border-color: rgba(245, 194, 107, .3); border-left-color: var(--aviso); }
.aviso ul { margin: 6px 0 0; padding-left: 18px; color: var(--suave); font-size: 13px; }
.aviso .barra { height: 2px; background: var(--hilo); margin-top: 10px; }
.aviso .barra i { display: block; height: 100%; background: var(--acento); box-shadow: 0 0 8px rgba(var(--brillo), .8); transition: width .4s; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
.velo { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 1, 9, .86); animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; } }
.velo .contenido { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 30px 32px; margin: 0; border: 1px solid var(--contorno); border-radius: 14px; background: linear-gradient(180deg, #120720, #0a0412); box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(var(--brillo), .08); }
.velo h4 { margin: 10px 0 14px; font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.velo p { color: var(--suave); line-height: 1.6; font-size: 15.5px; margin: 0 0 8px; white-space: pre-line; }
.velo .lineas { margin: 8px 0 0; padding: 0; list-style: none; }
.velo .lineas li { padding: 10px 0; border-bottom: 1px solid var(--hilo); color: var(--suave); line-height: 1.55; font-size: 14.5px; }
.velo .vista-previa img { width: 100%; border-radius: 8px; margin-top: 8px; display: block; }
.velo .botonera { margin-top: 26px; }

/* ── Menú flotante de opciones (canales, roles, personas) ─────────── */
.menu-tk { position: absolute; z-index: 80; min-width: 240px; max-width: min(420px, calc(100vw - 24px)); max-height: 360px; overflow-y: auto; padding: 6px; background: var(--fondo2); border: 1px solid rgba(var(--brillo), .35); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .75), 0 0 0 1px rgba(var(--brillo), .08); }
.menu-tk .buscar { width: 100%; padding: 9px 10px; margin-bottom: 4px; background: transparent; border: 0; border-bottom: 1px solid var(--hilo2); outline: none; }
.menu-tk .op { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 6px; font-size: 14.5px; color: var(--suave); }
.menu-tk .op small { display: block; font-size: 12px; color: var(--tenue); margin-top: 2px; }
.menu-tk .op:hover, .menu-tk .op.foco { background: rgba(var(--brillo), .1); color: var(--tinta); }
.menu-tk .op.sel { color: var(--tinta); }
.menu-tk .op.sel::after { content: ""; flex-shrink: 0; width: 5px; height: 10px; border-right: 1.5px solid var(--acento); border-bottom: 1.5px solid var(--acento); transform: rotate(45deg); }
.menu-tk .op .punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-right: 8px; display: inline-block; }
.menu-tk .op img { width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.menu-tk .nada { padding: 12px; color: var(--tenue); font-size: 13.5px; }
.menu-tk .grupo-op { padding: 10px 12px 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }

/* ── Móvil ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .con-menu main.capa { margin-left: 0; }
    .menu { width: min(300px, 86vw); transform: translateX(-104%); transition: transform .35s cubic-bezier(.2,.85,.15,1); z-index: 70; background: var(--fondo2); }
    body.menu-abierto .menu { transform: none; }
    .velo-menu { position: fixed; inset: 0; z-index: 65; background: rgba(4, 1, 9, .7); }
    body.menu-abierto .velo-menu { display: block; }
    .barra-movil { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(180deg, var(--fondo) 60%, transparent); }
    .barra-movil button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--tinta); border: 1px solid var(--hilo2); border-radius: 9px; }
    .barra-movil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
    .titulo-movil { font-family: var(--mono); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--acento2); }
    .avisos, .con-menu .avisos { left: 16px; right: 16px; bottom: 16px; }
    .velo .contenido { padding: 24px 20px; }
    .cabecera { gap: 14px; flex-wrap: wrap; }
    .cabecera .abrir-nav { display: inline-flex; }
    .cabecera nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 8px 0 4px; }
    .cabecera.abierta nav { display: flex; }
    .cabecera nav .enlace { margin: 6px 0 0; }
    .cuenta-web { margin: 10px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--hilo); }
    .pie nav { margin-left: 0; }
}
/* Con "reducir movimiento" todo se queda quieto, salvo lo marcado como .anima-siempre (las
   demos de la portada: son lo que enseña qué hace Vantax). */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *:not(.anima-siempre, .anima-siempre *), *:not(.anima-siempre, .anima-siempre *)::before, *:not(.anima-siempre, .anima-siempre *)::after { animation: none !important; transition: none !important; }
}