/* /status/estado.css — piezas propias de la página de estado (rediseño «negro», 2026-10-22).
   Compartido por /status/, /en/status/, /fr/status/ y /pt/status/. Maqueta: docs/maquetas/2026-10-22-rediseno/estado/.
   Todo con prefijo zxs- sobre los tokens --zx-* de /vendor/zx-design.css; no redefine ninguna clase zx-* salvo el
   menú de idioma (.zx-lang-menu .zx-lang), que en zx-design.css es una píldora suelta. */

:root {
  --zxs-maint: #a78bfa;
  --zxs-empty: #1c1c28;
  --zxs-ok-glow: rgba(52, 211, 153, .35);
  --zxs-bad-glow: rgba(248, 113, 113, .35);
}

/* ── Modo captura (?static=1): todo visible y quieto en su estado final ── */
.zxs-static [data-zx-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.zxs-static .zx-mask > span { transform: none !important; transition: none !important; }
.zxs-static .zxs-rise, .zxs-static .zxs-up i { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ── Cabecera de página ── */
.zxs-hero { padding: 140px 0 20px; position: relative; isolation: isolate; text-align: center; }
.zxs-title { font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; margin-top: 22px; }
.zxs-lead { max-width: 620px; margin: 20px auto 0; color: var(--zx-muted); font-size: 1.05rem; }

/* ── Estado global grande con brillo ── */
.zxs-global {
  --c: var(--zx-ok); --g: var(--zxs-ok-glow);
  position: relative; overflow: hidden; margin: 44px auto 0; max-width: 860px; text-align: left;
  display: flex; align-items: center; gap: clamp(18px, 3vw, 30px);
  padding: clamp(22px, 3.4vw, 34px) clamp(20px, 3.6vw, 40px);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); border-radius: var(--zx-r-lg);
  background: radial-gradient(70% 140% at 0% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--zx-surface);
  box-shadow: 0 30px 100px -40px var(--g), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.zxs-global[data-state="maint"] { --c: var(--zxs-maint); --g: var(--zx-brand-glow); }
.zxs-global[data-state="warn"] { --c: var(--zx-warn); --g: rgba(251, 191, 36, .3); }
.zxs-global[data-state="down"] { --c: var(--zx-bad); --g: var(--zxs-bad-glow); }
.zxs-global::after { /* brillo que cruza la tarjeta */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .06) 50%, transparent 65%);
  transform: translateX(-100%); animation: zxs-sheen 6s var(--zx-ease) 1.2s infinite;
}
.zxs-global__orb { position: relative; flex: none; width: 74px; height: 74px; display: grid; place-items: center; }
.zxs-global__orb i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 24px 4px var(--g), 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); position: relative; z-index: 1; }
.zxs-global__orb span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; animation: zxs-ring 3s var(--zx-ease) infinite; }
.zxs-global__orb span:nth-child(2) { animation-delay: 1s; }
.zxs-global__orb span:nth-child(3) { animation-delay: 2s; }
.zxs-global__txt { display: grid; gap: 4px; min-width: 0; position: relative; z-index: 1; }
.zxs-global__kicker { font-size: var(--zx-fs-micro); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--c); }
.zxs-global__title { font-size: clamp(1.35rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.zxs-global__sub { color: var(--zx-muted); font-size: var(--zx-fs-small); }
.zxs-ekg { margin-left: auto; width: 180px; height: 40px; flex: none; opacity: .8; }
.zxs-ekg path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: zxs-ekg 2.6s linear infinite; filter: drop-shadow(0 0 4px var(--g)); }

/* ── Resumen ── */
.zxs-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px auto 0; max-width: 860px; text-align: left; }
.zxs-summary .zx-tile { min-height: 0; }
.zxs-summary .zx-stat b { font-size: 1.45rem; }
.zxs-sum-small { font-size: 1.05rem !important; line-height: 1.25; letter-spacing: -.01em !important; padding-top: 4px; }
.zxs-refresh { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; color: var(--zx-muted-2); font-size: .82rem; }
.zxs-refresh__sep { opacity: .5; }

/* Latido (punto que respira) — reutiliza @keyframes zx-ping del sistema */
.zxs-beat { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--zx-ok); flex: none; animation: zx-ping 2s infinite; }
.zxs-beat--down { background: var(--zx-bad); animation: zxs-ping-bad 1.4s infinite; }
.zxs-beat--maint { background: var(--zxs-maint); animation: none; }

/* ── Nodos ── */
.zxs-nodes { padding-top: clamp(56px, 8vw, 96px); }
.zxs-bar-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.zxs-bar-head h2 { font-size: var(--zx-fs-h2); margin-top: 14px; }
.zxs-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; color: var(--zx-muted); margin-bottom: 26px; }
.zxs-legend span { display: inline-flex; align-items: center; gap: 7px; }
.zxs-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--zxs-empty); display: inline-block; }
.zxs-sw--ok { background: var(--zx-ok); }
.zxs-sw--warn { background: var(--zx-warn); }
.zxs-sw--bad { background: var(--zx-bad); }

.zxs-groups { display: grid; gap: 34px; }
.zxs-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 0 4px; }
.zxs-group__head h3 { font-size: var(--zx-fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--zx-muted-2); font-weight: 700; }
.zxs-group__head span { font-size: .8rem; color: var(--zx-muted-2); }
.zxs-group__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.zxs-group__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.zxs-node {
  position: relative; min-width: 0; border: 1px solid var(--zx-line); border-radius: var(--zx-r); padding: 20px 20px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--zx-surface);
  transition: border-color var(--zx-dur-fast), box-shadow var(--zx-dur-fast);
}
.zxs-node:hover { border-color: rgba(192, 132, 252, .28); }
.zxs-node.is-open { border-color: rgba(192, 132, 252, .32); box-shadow: 0 30px 80px -50px var(--zx-brand-glow); }
.zxs-node.is-down { border-color: color-mix(in srgb, var(--zx-bad) 35%, transparent); }
.zxs-node__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zxs-node__ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--zx-line-2); background: var(--zx-surface-2); color: var(--zx-brand-2); }
.zxs-node__ico svg { width: 18px; height: 18px; }
.zxs-node__name { min-width: 0; display: grid; gap: 1px; }
.zxs-node__name b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.zxs-node__name small { font-size: .78rem; color: var(--zx-muted-2); line-height: 1.35; }

/* Barras de uptime (60 días / 48 horas) */
.zxs-up { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 18px 0 8px; }
.zxs-up i {
  flex: 1; min-width: 0; height: 100%; border-radius: 2px; background: var(--zx-ok); opacity: .9; cursor: pointer;
  transform-origin: bottom; animation: zxs-grow .7s var(--zx-ease) backwards; animation-delay: calc(var(--i, 0) * 6ms + 150ms);
  transition: opacity var(--zx-dur-fast), transform var(--zx-dur-fast);
}
.zxs-up i.w { background: var(--zx-warn); }
.zxs-up i.b { background: var(--zx-bad); }
.zxs-up i.e { background: var(--zxs-empty); }
.zxs-up i:last-child { box-shadow: 0 0 10px var(--zxs-ok-glow); }
.zxs-up i:hover, .zxs-up i:focus-visible { opacity: 1; transform: scaleY(1.18); outline: none; }
.zxs-up:hover i:not(:hover) { opacity: .55; }
.zxs-node__foot { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--zx-muted-2); }
.zxs-node__foot b { color: var(--zx-brand-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.zxs-days-30 { display: none; }
.zxs-up.is-ready i { animation: none; }   /* las barras crecen solo la primera vez, no en cada refresco de 2 s */

/* Métricas en vivo (SVG propio) */
.zxs-node__toggle { margin-top: 14px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--zx-r-sm); border: 1px solid var(--zx-line); background: rgba(255, 255, 255, .015); color: var(--zx-muted); font: 500 .84rem var(--zx-font); cursor: pointer; transition: color var(--zx-dur-fast), border-color var(--zx-dur-fast); }
.zxs-node__toggle:hover { color: var(--zx-text); border-color: var(--zx-line-2); }
.zxs-node__toggle .zxs-live { display: inline-flex; gap: 14px; font-family: var(--zx-mono); font-size: .78rem; color: var(--zx-muted-2); }
.zxs-node__toggle .zxs-live em { font-style: normal; color: var(--zx-text); }
.zxs-node__toggle svg { width: 14px; height: 14px; transition: transform .35s var(--zx-ease); }
.zxs-node.is-open .zxs-node__toggle svg { transform: rotate(180deg); }
.zxs-metrics { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.zxs-node.is-open .zxs-metrics { display: grid; }
.zxs-chart { border: 1px solid var(--zx-line); border-radius: var(--zx-r-sm); background: var(--zx-bg); padding: 12px 12px 8px; min-width: 0; }
.zxs-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .78rem; color: var(--zx-muted); font-weight: 600; }
.zxs-chart__head b { color: var(--zx-text); font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zxs-chart svg { display: block; width: 100%; height: 70px; margin-top: 8px; overflow: visible; }
.zxs-chart .ln { fill: none; stroke: var(--k); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.zxs-chart .ar { fill: var(--k); opacity: .14; }
.zxs-chart .dt { fill: var(--k); }
.zxs-chart__foot { display: flex; justify-content: space-between; font-size: .68rem; color: var(--zx-muted-2); margin-top: 4px; }

/* ── Incidencias ── */
.zxs-inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.zxs-col { min-width: 0; }
.zxs-sub { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; letter-spacing: -.01em; margin-bottom: 14px; }
.zxs-sub__ico { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: .82rem; font-weight: 800; border: 1px solid var(--zx-line-2); background: var(--zx-surface-2); color: var(--zx-brand-2); }
.zxs-sub__ico--warn { color: var(--zx-warn); }
.zxs-list { display: grid; gap: 10px; }
.zxs-empty { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--zx-line); border-radius: var(--zx-r); background: var(--zx-surface); }
.zxs-empty__ok { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--zx-ok); background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .25); font-weight: 800; }
.zxs-empty strong { display: block; font-size: .95rem; }
.zxs-empty p { color: var(--zx-muted); font-size: .86rem; margin-top: 2px; }

.zxs-inc { border: 1px solid var(--zx-line); border-radius: var(--zx-r); background: var(--zx-surface); padding: 18px 20px; display: grid; gap: 10px; }
.zxs-inc--maint { border-color: rgba(167, 139, 250, .35); background: radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, .12), transparent 55%), var(--zx-surface); }
.zxs-inc--active { border-color: rgba(248, 113, 113, .35); }
.zxs-inc__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.zxs-inc__top strong { font-size: .98rem; letter-spacing: -.01em; }
.zxs-inc__svc { font-size: .8rem; color: var(--zx-muted-2); }
.zxs-inc__date { margin-left: auto; font-size: .78rem; color: var(--zx-muted-2); white-space: nowrap; }
.zxs-inc p { color: var(--zx-muted); font-size: .9rem; line-height: 1.6; white-space: pre-line; }
.zxs-inc p strong { color: var(--zx-text); }
.zxs-win { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--zxs-maint); }
.zxs-st { font-size: .76rem; font-weight: 600; color: var(--zx-muted); display: inline-flex; align-items: center; gap: 6px; }
.zxs-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zxs-st--investigating { color: var(--zx-bad); }
.zxs-st--identified, .zxs-st--monitoring { color: var(--zx-warn); }
.zxs-st--scheduled { color: var(--zxs-maint); }
.zxs-st--resolved { color: var(--zx-ok); }

/* Caídas detectadas por el monitor */
.zxs-down { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--zx-line); border-radius: var(--zx-r); background: var(--zx-surface); }
.zxs-down__date { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--zx-surface-2); border: 1px solid var(--zx-line); line-height: 1; }
.zxs-down__date b { font-size: 1.05rem; font-weight: 800; }
.zxs-down__date small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--zx-muted); margin-top: -10px; }
.zxs-down__txt { min-width: 0; display: grid; gap: 2px; }
.zxs-down__txt strong { font-size: .92rem; }
.zxs-down__txt span { font-size: .8rem; color: var(--zx-muted); }
.zxs-down__dur { font-family: var(--zx-mono); font-size: .86rem; font-weight: 600; color: var(--zx-warn); white-space: nowrap; }
.zxs-down--severe .zxs-down__dur { color: var(--zx-bad); }

/* Archivo de resueltas: línea de tiempo plegable */
.zxs-archive { margin-top: 18px; border: 1px solid var(--zx-line); border-radius: var(--zx-r); background: var(--zx-surface); }
.zxs-archive[open] { border-color: rgba(192, 132, 252, .3); }
.zxs-archive summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-weight: 600; color: var(--zx-muted); }
.zxs-archive summary > span { display: inline-flex; align-items: center; gap: 10px; }
.zxs-archive summary::-webkit-details-marker { display: none; }
.zxs-archive summary:hover { color: var(--zx-text); }
.zxs-archive summary i { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--zx-line-2); position: relative; transition: transform .4s var(--zx-ease); }
.zxs-archive summary i::before, .zxs-archive summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.zxs-archive summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.zxs-archive[open] summary i { transform: rotate(45deg); }
.zxs-timeline { list-style: none; margin: 0; padding: 4px 22px 22px 22px; display: grid; gap: 0; }
.zxs-timeline > li { position: relative; padding: 0 0 20px 26px; border-left: 1px solid var(--zx-line-2); margin-left: 6px; }
.zxs-timeline > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.zxs-timeline > li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--zx-bg); border: 2px solid var(--zx-brand-2); }
.zxs-timeline .zxs-inc { background: transparent; border: 0; padding: 0; gap: 8px; }
.zxs-updates { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.zxs-updates li { padding: 10px 12px; border-radius: var(--zx-r-sm); background: var(--zx-bg); border: 1px solid var(--zx-line); display: grid; gap: 4px; }
.zxs-updates li > div { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .74rem; color: var(--zx-muted-2); }
.zxs-updates li > span { font-size: .86rem; color: var(--zx-muted); }

.zxs-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* Tooltip flotante de las barras */
.zxs-tip { position: fixed; z-index: 80; pointer-events: none; padding: 8px 11px; border-radius: 10px; background: rgba(12, 12, 18, .96); border: 1px solid var(--zx-line-2); box-shadow: 0 14px 40px -12px #000; font-size: .78rem; line-height: 1.45; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.zxs-tip b { display: block; font-weight: 700; }
.zxs-tip span { color: var(--zx-muted); }
.zxs-tip em { font-style: normal; color: var(--zx-warn); font-weight: 600; display: block; }

/* Entrada de lo que pinta estado.js */
.zxs-rise { animation: zxs-rise .7s var(--zx-ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

@keyframes zxs-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes zxs-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes zxs-ring { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes zxs-sheen { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(100%); } }
@keyframes zxs-ekg { from { stroke-dashoffset: 300; } to { stroke-dashoffset: -300; } }
@keyframes zxs-ping-bad { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .6); } 80%, 100% { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); } }

/* ── Móvil ── */
@media (max-width: 960px) {
  .zxs-group__list, .zxs-group__list--3 { grid-template-columns: 1fr; }
  .zxs-inc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .zxs-hero { padding-top: 112px; }
  .zxs-summary { grid-template-columns: 1fr 1fr; }
  .zxs-ekg { display: none; }
  .zxs-global { gap: 16px; }
  .zxs-global__orb { width: 54px; height: 54px; }
  .zxs-global__orb i { width: 20px; height: 20px; }
  .zxs-node { padding: 16px 14px 14px; }
  .zxs-node__toggle .zxs-live { display: none; }
  /* En el móvil, 60 barras no caben: se ven los últimos 30 días */
  .zxs-up[data-mode="days"] i:nth-child(-n+30) { display: none; }
  .zxs-up[data-mode="hours"] i:nth-child(-n+24) { display: none; }
  .zxs-days-all { display: none; }
  .zxs-days-30 { display: inline; }
  .zxs-up { gap: 3px; }
  .zxs-inc__date { margin-left: 0; width: 100%; }
  .zxs-down { grid-template-columns: auto 1fr; }
  .zxs-down__dur { grid-column: 2; }
  .zxs-timeline { padding: 4px 16px 18px; }
  .zxs-archive summary { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .zxs-rise, .zxs-up i { animation: none !important; opacity: 1; transform: none; }
}

/* ── Ajustes sobre piezas del sistema (zx-tag, zx-pillnav--tabs): solo colocación ── */
.zxs-tabs { display: inline-flex; align-items: center; gap: 10px; }
.zxs-tabs__label { font-size: .8rem; color: var(--zx-muted-2); }
.zxs-node__top .zx-tag { margin-left: auto; flex: none; padding: 5px 10px; }
.zxs-node.is-warn { border-color: color-mix(in srgb, var(--zx-warn) 30%, transparent); }
.zxs-beat--warn { background: var(--zx-warn); animation: zxs-ping-warn 1.8s infinite; }
.zxs-tag-maint { color: var(--zxs-maint); }
@keyframes zxs-ping-warn { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); } }
@media (max-width: 640px) { .zxs-hide-m { display: none; } .zxs-tabs { width: 100%; justify-content: space-between; } }

/* Encabezados de sección con aspecto de h2 (la página conserva sus encabezados de siempre para el SEO) */
.zxs-h2, .zx-head p.zxs-h2, .zx-cta p.zxs-h2 { font-size: var(--zx-fs-h2); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--zx-text); }
.zxs-bar-head .zxs-h2 { margin-top: 14px; }
.zx-head p.zxs-h2, .zx-cta p.zxs-h2 { max-width: 760px; margin: 0; }

/* ── Cabecera: selector de idioma (mismo marcado que el resto de la web) y cuenta (zx-session.js) ── */
.zx-lang-dd { position: relative; }
.zx-lang-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--zx-line); border-radius: var(--zx-r-pill); padding: 8px 11px; color: var(--zx-muted); font: 600 .82rem var(--zx-font); cursor: pointer; line-height: 1; transition: border-color var(--zx-dur-fast), color var(--zx-dur-fast); }
.zx-lang-btn:hover { color: var(--zx-text); border-color: var(--zx-line-2); }
.zx-flag { border-radius: 2px; object-fit: cover; flex: none; display: block; }
.zx-caret { opacity: .55; transition: transform .2s; flex: none; }
.zx-lang-dd.open .zx-caret { transform: rotate(180deg); }
.zx-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 172px; background: rgba(12, 12, 18, .97); border: 1px solid var(--zx-line-2); border-radius: 14px; padding: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); display: none; z-index: 60; }
.zx-lang-dd.open .zx-lang-menu { display: block; }
.zx-lang-menu .zx-lang { display: flex; border: 0; border-radius: 9px; padding: 9px 11px; gap: 10px; color: var(--zx-muted); font-size: .87rem; white-space: nowrap; }
.zx-lang-menu .zx-lang:hover, .zx-lang-menu .zx-lang.active { background: rgba(139, 92, 246, .16); color: var(--zx-text); }
.zx-lang-menu .zx-lang img { width: 21px; }
.zx-nav__end #zx-account { display: flex; align-items: center; }
.zx-socials { display: flex; gap: 10px; }
.zx-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--zx-line); display: grid; place-items: center; color: var(--zx-muted); transition: color var(--zx-dur-fast), border-color var(--zx-dur-fast); }
.zx-socials a:hover { color: var(--zx-text); border-color: var(--zx-line-2); }
.zx-socials svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .zx-lang-btn span { display: none; }
  .zx-nav__end #zx-account .zx-nm { display: none; }
  .zx-nav__end #zx-account .zx-login { padding: 9px 12px; font-size: .84rem; }
}
@media (max-width: 480px) {
  /* En el móvil no caben logo + idioma + «Iniciar sesión» + menú: el acceso queda como icono (el texto sigue para lectores) */
  .zx-nav__end { gap: 6px; }
  .zx-nav__end #zx-account .zx-login { font-size: 0; gap: 0; padding: 10px 12px; border-radius: 999px; }
  .zx-lang-btn { padding: 8px 9px; }
}

/* Entre 861 y 1180 px, como la portada y la tienda: fuera «Características» y del botón de entrar solo el icono; enlaces y botones sin partir. */
@media (min-width:861px){.zx-pillnav a,.zx-nav__end .zx-btn{white-space:nowrap}}
@media (min-width:861px) and (max-width:1180px){.zx-pillnav a[href$="#features"]{display:none}.zx-nav__end .zx-login{font-size:0;gap:0;padding:10px}}
/* Logo y menú nunca pegados (Alex, 2026-10-25): en escritorio el logo no encoge, siempre hay 24 px hasta la píldora (16 del hueco + 8) y los enlaces de la píldora van algo más juntos para que quepa todo. */
@media (min-width:861px){.zx-brand{flex-shrink:0;margin-right:8px}.zx-pillnav a{padding-left:10px;padding-right:10px}}
@media (min-width:861px) and (max-width:940px){.zx-nav__end .zx-btn{display:none}}