/* ═══════════════════════════════════════════════════════════════════════════
   ZK HOUSE ADS — estilos. Ver js/zk-houseads.js para el porqué y los datos.

   Se lee como un bloque de red publicitaria (marco, rótulo, medidas IAB) pero
   el contenido es nuestro. Manda el DATO y el GRÁFICO, nunca una foto de stock.
   ═══════════════════════════════════════════════════════════════════════════ */

.zkha {
  --zkha-tinta: #070c14;
  --zkha-acento: #2dd4bf;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background:
    radial-gradient(120% 95% at 10% 0%, rgba(0, 166, 147, .20) 0%, transparent 58%),
    radial-gradient(95% 85% at 94% 100%, rgba(56, 130, 246, .16) 0%, transparent 58%),
    var(--zkha-tinta);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #fff;
  font-family: inherit;
}

.zkha__rotulo {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
  background: rgba(255, 255, 255, .07);
  padding: 4px 9px;
  border-radius: 12px 0 8px 0;
}
.zkha--propio .zkha__rotulo { color: var(--zkha-acento); background: rgba(45, 212, 191, .13); }

.zkha__cuerpo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 28px 20px 20px;
}

/* ── Cifra ───────────────────────────────────────────────────────────────── */
.zkha__cifra {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.038em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 30px rgba(45, 212, 191, .34);
}
.zkha__cifra-pie {
  margin: 6px 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--zkha-acento);
}

.zkha__titular {
  margin: 0 0 6px;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.zkha__apoyo {
  margin: 0 0 13px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .64);
  max-width: 42ch;
}

.zkha__datos {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin: 0 0 15px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.zkha__dato { display: flex; flex-direction: column; gap: 1px; }
.zkha__dato b {
  font-size: 15px; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #fff;
}
.zkha__dato span {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.zkha__cta {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 10px 17px; border-radius: 999px;
  background: var(--zkha-acento); color: #04231f;
  font-size: 13px; font-weight: 750; letter-spacing: -.01em; text-decoration: none;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, background .16s ease;
}
.zkha__cta::after { content: '→'; font-size: 14px; transition: transform .16s cubic-bezier(.2,.7,.3,1); }
.zkha__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(45,212,191,.55); }
.zkha__cta:hover::after { transform: translateX(3px); }
.zkha__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ═══════════ GRÁFICOS ═══════════ */

.zkha__svg { display: block; width: 100%; margin-bottom: 12px; }

/* ── Curva: la línea se dibuja sola ──────────────────────────────────────── */
.zkha__svg--curva { height: 64px; }
.zkha__linea {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, .55));
}
.zkha__area { opacity: 0; }
.zkha__punta { opacity: 0; }
.zkha.is-live .zkha__linea { animation: zkha-trazo 1.6s cubic-bezier(.35,.1,.2,1) forwards; }
.zkha.is-live .zkha__area  { animation: zkha-aparece .9s ease .9s forwards; }
.zkha.is-live .zkha__punta { animation: zkha-aparece .3s ease 1.5s forwards, zkha-latido-punta 2.4s ease-out 1.8s infinite; }
@keyframes zkha-trazo { to { stroke-dashoffset: 0; } }
@keyframes zkha-aparece { to { opacity: 1; } }
@keyframes zkha-latido-punta {
  0%   { filter: drop-shadow(0 0 0 rgba(45,212,191,.9)); }
  60%  { filter: drop-shadow(0 0 10px rgba(45,212,191,.0)); }
  100% { filter: drop-shadow(0 0 0 rgba(45,212,191,0)); }
}

/* ── Radar: barrido que gira + ecos que se encienden ─────────────────────── */
.zkha__svg--radar { height: 78px; width: auto; margin: 0 auto 12px; }
.zkha__barrido { transform-origin: 45px 39px; }
.zkha.is-live .zkha__barrido { animation: zkha-gira 3.4s linear infinite; }
@keyframes zkha-gira { to { transform: rotate(360deg); } }

.zkha__eco { opacity: 0; }
.zkha.is-live .zkha__eco {
  /* Cada punto se enciende cuando "pasa" el barrido por encima. */
  animation: zkha-eco 3.4s ease-out infinite;
  animation-delay: calc(var(--i) * .56s);
}
@keyframes zkha-eco {
  0%   { opacity: 0; transform: scale(.4); }
  8%   { opacity: 1; transform: scale(1.5); }
  30%  { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ── Barras ──────────────────────────────────────────────────────────────── */
.zkha__barras { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-bottom: 12px; }
.zkha__barras i {
  flex: 1 1 0; height: 5px; max-width: 24px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(to top, rgba(45,212,191,.30), var(--zkha-acento));
  transition: height .85s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i) * .085s);
}
.zkha.is-live .zkha__barras i { height: var(--h); }

/* ── Tecleado ────────────────────────────────────────────────────────────── */
.zkha__teclea {
  min-height: 3.1em;
  margin-bottom: 12px;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: #fff;
}
.zkha__cursor {
  display: inline-block; width: 2px; height: 1.05em;
  margin-left: 2px; vertical-align: text-bottom;
  background: var(--zkha-acento);
  box-shadow: 0 0 8px rgba(45, 212, 191, .8);
  animation: zkha-cursor 1s steps(2, start) infinite;
}
@keyframes zkha-cursor { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }

/* ── Brillo que recorre el marco ─────────────────────────────────────────── */
.zkha__brillo { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.zkha__brillo::before {
  content: '';
  position: absolute; top: -50%; bottom: -50%; left: -30%; width: 18%;
  transform: rotate(16deg) translate3d(-300%, 0, 0);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.15), transparent);
  filter: blur(9px);
}
.zkha.is-live .zkha__brillo::before { animation: zkha-brillo 6.5s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes zkha-brillo {
  0%        { transform: rotate(16deg) translate3d(-300%, 0, 0); }
  40%, 100% { transform: rotate(16deg) translate3d(700%, 0, 0); }
}

/* ═══════════ FORMATOS (medidas IAB) ═══════════ */

.zkha--infeed { min-height: 300px; height: 100%; }

/* Columna lateral: estrecha y alta. */
.zkha--sidebar { min-height: 232px; }
.zkha--sidebar .zkha__cuerpo { padding: 26px 17px 18px; }
.zkha--sidebar .zkha__cifra { font-size: 30px; }
.zkha--sidebar .zkha__titular { font-size: 15px; }
.zkha--sidebar .zkha__apoyo { display: none; }
.zkha--sidebar .zkha__datos { gap: 12px; margin-bottom: 13px; }
.zkha--sidebar .zkha__cta { padding: 9px 14px; font-size: 12.5px; }

.zkha--leaderboard { max-width: 728px; margin: 22px auto; min-height: 90px; }
.zkha--leaderboard .zkha__cuerpo { flex-direction: row; align-items: center; gap: 22px; padding: 14px 18px 14px 22px; }
.zkha--leaderboard .zkha__svg { width: 96px; flex: 0 0 auto; margin: 0; }
.zkha--leaderboard .zkha__cifra { font-size: 26px; }
.zkha--leaderboard .zkha__cifra-pie { margin: 2px 0 0; font-size: 9px; }
.zkha--leaderboard .zkha__titular { font-size: 15px; margin: 0; }
.zkha--leaderboard .zkha__apoyo { display: none; }
.zkha--leaderboard .zkha__teclea { min-height: 1.5em; margin: 0; font-size: 15px; }
.zkha--leaderboard .zkha__datos { margin: 0; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); gap: 16px; }
.zkha--leaderboard .zkha__cta { margin-left: auto; flex: 0 0 auto; }

.zkha--billboard { max-width: 970px; margin: 26px auto; min-height: 250px; }
.zkha--billboard .zkha__cuerpo { flex-direction: row; align-items: center; gap: 32px; padding: 26px 30px; }
.zkha--billboard .zkha__svg { width: 210px; flex: 0 0 auto; margin: 0; }
.zkha--billboard .zkha__cifra { font-size: 50px; }
.zkha--billboard .zkha__datos { border-top: 0; border-left: 1px solid rgba(255,255,255,.12); padding: 4px 0 4px 24px; margin: 0; flex-direction: column; gap: 12px; }

.zkha--rectangle { max-width: 300px; min-height: 250px; }
.zkha--rectangle .zkha__apoyo { display: none; }
.zkha--halfpage { max-width: 300px; min-height: 600px; }

.zkha--mobile { max-width: 320px; min-height: 100px; margin: 16px auto; }
.zkha--mobile .zkha__cuerpo { flex-direction: row; align-items: center; gap: 13px; padding: 12px 14px; }
.zkha--mobile .zkha__cifra { font-size: 21px; }
.zkha--mobile .zkha__svg, .zkha--mobile .zkha__apoyo,
.zkha--mobile .zkha__datos { display: none; }
.zkha--mobile .zkha__cta { margin-left: auto; padding: 8px 13px; font-size: 12px; }

@media (max-width: 760px) {
  .zkha--leaderboard .zkha__cuerpo,
  .zkha--billboard .zkha__cuerpo { flex-direction: column; align-items: flex-start; gap: 12px; }
  .zkha--leaderboard .zkha__datos,
  .zkha--billboard .zkha__datos {
    border-left: 0; border-top: 1px solid rgba(255,255,255,.10);
    padding: 12px 0 0; flex-direction: row;
  }
  .zkha--leaderboard .zkha__cta, .zkha--billboard .zkha__cta { margin-left: 0; }
  .zkha--billboard .zkha__cifra { font-size: 36px; }
  .zkha--billboard .zkha__svg { width: 100%; }
  .zkha__cta { min-height: 44px; }
}

/* ── Sin movimiento: la pieza se queda completa, no a medias ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .zkha__brillo { display: none; }
  .zkha__cursor { animation: none; opacity: 1; }
  .zkha__linea { stroke-dashoffset: 0; }
  .zkha__area, .zkha__punta, .zkha__eco { opacity: 1; }
  .zkha.is-live .zkha__linea, .zkha.is-live .zkha__area, .zkha.is-live .zkha__punta,
  .zkha.is-live .zkha__eco, .zkha.is-live .zkha__barrido { animation: none; }
  .zkha__barras i { transition: none; height: var(--h); }
  .zkha__cta, .zkha__cta::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMAS — un fondo distinto por creatividad (06-ago-2026)

   Joseba: «son todos con fondo muy oscuro, variedad de fondos quedaría bien
   para que exista contraste entre cada anuncio». En una columna con tres
   banners seguidos, tres fondos iguales se leen como un solo bloque; con
   fondos distintos cada uno se lee como un anunciante distinto, que es
   justo la sensación que queremos dar.

   Cada tema redefine SOLO tokens; los componentes no saben de temas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Noche (el de partida): tinta azulada + teal ──────────────────────────── */
.zkha--t-noche { --zkha-acento: #2dd4bf; }

/* ── Claro: papel, para que rompa de verdad entre dos oscuros ─────────────── */
.zkha--t-claro {
  --zkha-acento: #0f766e;
  background:
    radial-gradient(120% 95% at 8% 0%, rgba(15, 118, 110, .10) 0%, transparent 58%),
    radial-gradient(90% 80% at 96% 100%, rgba(15, 23, 42, .06) 0%, transparent 55%),
    #f6f7f5;
  border-color: rgba(15, 23, 42, .12);
  color: #0f172a;
}
.zkha--t-claro .zkha__titular { color: #0b1220; }
.zkha--t-claro .zkha__cifra { color: #0b1220; text-shadow: none; }
.zkha--t-claro .zkha__apoyo { color: rgba(15, 23, 42, .62); }
.zkha--t-claro .zkha__rotulo { color: rgba(15,23,42,.5); background: rgba(15,23,42,.06); }
.zkha--t-claro .zkha__datos { border-top-color: rgba(15, 23, 42, .12); }
.zkha--t-claro .zkha__dato b { color: #0b1220; }
.zkha--t-claro .zkha__dato span { color: rgba(15, 23, 42, .5); }
.zkha--t-claro .zkha__cta { background: #0b1220; color: #fff; }
.zkha--t-claro .zkha__cta:hover { box-shadow: 0 8px 20px -6px rgba(11, 18, 32, .45); }
.zkha--t-claro .zkha__brillo::before { background: linear-gradient(100deg, transparent, rgba(15,23,42,.06), transparent); }

/* ── Terminal: casi negro y verde de fósforo, para el tecleado ────────────── */
.zkha--t-terminal {
  --zkha-acento: #4ade80;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(74, 222, 128, .10) 0%, transparent 60%),
    #05070a;
  border-color: rgba(74, 222, 128, .22);
}
.zkha--t-terminal .zkha__teclea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
.zkha--t-terminal .zkha__cta { background: #4ade80; color: #04240f; }

/* ── Ámbar: grafito cálido, contrasta con todos los fríos ─────────────────── */
.zkha--t-ambar {
  --zkha-acento: #fbbf24;
  background:
    radial-gradient(120% 95% at 12% 0%, rgba(251, 191, 36, .20) 0%, transparent 56%),
    radial-gradient(90% 80% at 92% 100%, rgba(239, 68, 68, .12) 0%, transparent 55%),
    #17120a;
  border-color: rgba(251, 191, 36, .20);
}
.zkha--t-ambar .zkha__cta { background: #fbbf24; color: #26190a; }

/* ── Índigo: azul profundo ────────────────────────────────────────────────── */
.zkha--t-indigo {
  --zkha-acento: #818cf8;
  background:
    radial-gradient(120% 95% at 15% 0%, rgba(129, 140, 248, .24) 0%, transparent 58%),
    radial-gradient(90% 85% at 95% 100%, rgba(45, 212, 191, .12) 0%, transparent 55%),
    #0b0f21;
  border-color: rgba(129, 140, 248, .22);
}
.zkha--t-indigo .zkha__cta { background: #818cf8; color: #10122b; }

/* ── Menta: para lo NUESTRO (servicio Zokko), en color de marca ───────────── */
.zkha--t-menta {
  --zkha-acento: #00a693;
  background:
    linear-gradient(150deg, #063d38 0%, #04211f 60%, #051614 100%);
  border-color: rgba(0, 166, 147, .28);
}
.zkha--t-menta .zkha__cta { background: #00a693; color: #04231f; }

/* ═══════════════════════════════════════════════════════════════════════════
   RS MOTOR — anunciante real, con SUS colores (rojo/negro/franjas de
   competición, sacados de su logo). Que NO se parezca a los nuestros es el
   objetivo: así se lee como un anuncio comprado.
   ═══════════════════════════════════════════════════════════════════════════ */
.zkha--t-rsmotor {
  --zkha-acento: #e30613;
  background:
    radial-gradient(130% 100% at 85% 0%, rgba(227, 6, 19, .30) 0%, transparent 55%),
    linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  border-color: rgba(227, 6, 19, .34);
}
.zkha--t-rsmotor .zkha__rotulo { color: rgba(255,255,255,.55); background: rgba(227, 6, 19, .18); }
.zkha--t-rsmotor .zkha__cta { background: #e30613; color: #fff; }
.zkha--t-rsmotor .zkha__cta:hover { background: #ff1f2d; box-shadow: 0 8px 22px -6px rgba(227,6,19,.6); }
.zkha--t-rsmotor .zkha__cifra-pie { color: #ff4d57; }

/* Su logo, arriba a la derecha: es la marca, no un adorno. */
.zkha__logo {
  position: absolute;
  top: 13px; right: 14px;
  z-index: 4;
  height: 26px;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
}
.zkha--leaderboard .zkha__logo, .zkha--mobile .zkha__logo { height: 21px; }
.zkha--billboard .zkha__logo { height: 38px; top: 18px; right: 20px; }

/* Franjas de competición: recorren el banner en diagonal, guiño a su marca. */
.zkha__franjas {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
  opacity: .5;
}
.zkha__franjas i {
  position: absolute;
  top: -30%; bottom: -30%;
  width: 26px;
  transform: rotate(18deg);
  background: linear-gradient(to bottom, rgba(255,255,255,.09), rgba(255,255,255,.03));
}
.zkha__franjas i:nth-child(1) { left: 4%;  width: 8px;  background: rgba(227, 6, 19, .55); }
.zkha__franjas i:nth-child(2) { left: 10%; }
.zkha__franjas i:nth-child(3) { left: 18%; width: 14px; }
.zkha__franjas i:nth-child(4) { left: 25%; width: 6px;  background: rgba(227, 6, 19, .30); }
/* Deriva lenta: sugiere velocidad sin marear. */
.zkha.is-live .zkha__franjas i {
  animation: zkha-franja 9s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * .4s);
}
.zkha.is-live .zkha__franjas i:nth-child(2) { animation-delay: .5s; }
.zkha.is-live .zkha__franjas i:nth-child(3) { animation-delay: 1s; }
.zkha.is-live .zkha__franjas i:nth-child(4) { animation-delay: 1.5s; }
@keyframes zkha-franja {
  from { transform: rotate(18deg) translateX(0); }
  to   { transform: rotate(18deg) translateX(14px); }
}

/* En la flota el titular manda: no hay cifra que le robe el sitio. */
.zkha--flota .zkha__titular { font-size: clamp(17px, 1.9vw, 22px); margin-top: 4px; }
.zkha--flota .zkha__cuerpo { padding-top: 46px; }   /* hueco para el logo */

@media (prefers-reduced-motion: reduce) {
  .zkha.is-live .zkha__franjas i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4 — MONTAJES (06-ago-2026). Joseba: «montajes más elaborados gráficamente,
   gráficos animados, efectos stickers sobre otros fondos, slideshow».
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PASE DE DIAPOSITIVAS del anunciante ──────────────────────────────────
   Coches REALES suyos con la pegatina de precio encima, como un anuncio de
   concesionario de toda la vida. Cada ficha entra, se queda y sale. */
.zkha__pase {
  position: relative;
  z-index: 2;
  height: 128px;
  margin: 0 -6px 14px;
  border-radius: 9px;
  overflow: hidden;
}
.zkha__pase-item {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.06);
}
.zkha__pase-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.04);
}
.zkha__pase-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 20px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.88), transparent);
}
.zkha__pase-txt {
  font-size: 11px; font-weight: 650; color: #fff;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pegatina de precio: inclinada, como pegada a mano sobre el parabrisas. */
.zkha__pegatina {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff; background: #e30613;
  padding: 4px 8px; border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 0 3px 10px rgba(227, 6, 19, .45);
}

/* 4 fichas × 4,2 s = 16,8 s de vuelta completa. Cada una visible ~3,4 s. */
.zkha.is-live .zkha__pase-item {
  animation: zkha-pase 16.8s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: calc(var(--i) * 4.2s);
}
@keyframes zkha-pase {
  0%              { opacity: 0; transform: scale(1.06); }
  3%, 22%         { opacity: 1; transform: scale(1); }
  /* Deriva lenta mientras está a la vista: la foto "respira". */
  25%             { opacity: 0; transform: scale(1.02); }
  100%            { opacity: 0; transform: scale(1.06); }
}

/* ── SELLO: disco que late detrás del titular ─────────────────────────────── */
.zkha__sello {
  position: absolute;
  top: 50%; right: -34px;
  z-index: 1;
  width: 150px; height: 150px;
  transform: translateY(-50%);
  pointer-events: none;
}
.zkha__sello span, .zkha__sello span::before, .zkha__sello span::after {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: var(--zkha-acento);
  opacity: .30;
}
.zkha__sello span::before { content: ''; inset: 16px; opacity: .55; }
.zkha__sello span::after  { content: ''; inset: 32px; opacity: .8; }
.zkha.is-live .zkha__sello span { animation: zkha-sello 5s ease-in-out infinite; }
@keyframes zkha-sello {
  0%, 100% { transform: scale(1);    opacity: .30; }
  50%      { transform: scale(1.09); opacity: .55; }
}

/* ── INVENTARIO: casillas de huecos; las ocupadas encendidas ──────────────── */
.zkha__inventario { display: flex; gap: 7px; margin-bottom: 14px; }
.zkha__inventario i {
  flex: 1 1 0; height: 34px; max-width: 46px;
  border-radius: 6px;
  border: 1.5px dashed rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .03);
}
.zkha__inventario i.ocupado {
  border-style: solid;
  border-color: var(--zkha-acento);
  background: color-mix(in srgb, var(--zkha-acento) 26%, transparent);
}
/* Los libres parpadean por turnos, muy suave: "quedan huecos". */
.zkha.is-live .zkha__inventario i:not(.ocupado) {
  animation: zkha-libre 2.8s ease-in-out infinite;
}
.zkha.is-live .zkha__inventario i:nth-child(3) { animation-delay: .35s; }
.zkha.is-live .zkha__inventario i:nth-child(4) { animation-delay: .7s; }
@keyframes zkha-libre {
  0%, 100% { border-color: rgba(255,255,255,.26); }
  50%      { border-color: color-mix(in srgb, var(--zkha-acento) 70%, transparent); }
}

/* ── PULSERA: electro que se dibuja en bucle ──────────────────────────────── */
.zkha__svg--pulso { height: 52px; color: var(--zkha-acento); }
.zkha__electro {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  filter: drop-shadow(0 0 5px currentColor);
}
.zkha.is-live .zkha__electro { animation: zkha-electro 3.2s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes zkha-electro {
  0%       { stroke-dashoffset: 300; }
  55%,100% { stroke-dashoffset: 0; }
}

/* ── Tema grafito (para el ángulo de coste) ───────────────────────────────── */
.zkha--t-grafito {
  --zkha-acento: #cbd5e1;
  background:
    radial-gradient(120% 95% at 20% 0%, rgba(203, 213, 225, .14) 0%, transparent 58%),
    linear-gradient(155deg, #262a31 0%, #14171c 100%);
  border-color: rgba(203, 213, 225, .18);
}
.zkha--t-grafito .zkha__cta { background: #e2e8f0; color: #14171c; }

/* ── Ajustes del montaje ──────────────────────────────────────────────────── */
.zkha--montaje .zkha__cuerpo { padding-top: 44px; }
.zkha--montaje .zkha__titular { font-size: clamp(16px, 1.8vw, 20px); }
.zkha--montaje .zkha__apoyo { margin-bottom: 12px; }
/* En formatos anchos el pase va al lado, no encima. */
.zkha--leaderboard .zkha__pase { width: 190px; flex: 0 0 auto; height: 62px; margin: 0; }
.zkha--billboard .zkha__pase   { width: 300px; flex: 0 0 auto; height: 160px; margin: 0; }

.zkha--leaderboard .zkha__sello,
.zkha--mobile .zkha__sello { display: none; }
.zkha--leaderboard .zkha__inventario { margin: 0; }
.zkha--mobile .zkha__pase, .zkha--mobile .zkha__inventario { display: none; }

@media (max-width: 760px) {
  .zkha--leaderboard .zkha__pase,
  .zkha--billboard .zkha__pase { width: 100%; height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento se queda la PRIMERA ficha visible, no el hueco vacío. */
  .zkha.is-live .zkha__pase-item { animation: none; }
  .zkha__pase-item { opacity: 0; }
  .zkha__pase-item:first-child { opacity: 1; transform: none; }
  .zkha.is-live .zkha__sello span,
  .zkha.is-live .zkha__inventario i:not(.ocupado) { animation: none; }
  .zkha__electro { stroke-dashoffset: 0; }
  .zkha.is-live .zkha__electro { animation: none; }
}