/* Club Archi: la lupa "con ojos de Archista" (assets/js/club-lens.js). Usa los tokens del theme si están. */

/* El ojo del menú pasa a ser un botón (el theme lo deja sin eventos: era decorativo). */
#navEye.cl-eye { pointer-events: auto !important; cursor: pointer; }
#navEye.cl-eye:focus:not(:focus-visible) { outline: none; }
#navEye.cl-eye::after { content: ""; position: absolute; inset: -10px -6px; border-radius: 14px; }
#navEye.cl-eye:focus-visible { outline: 2px solid var(--pink, #ff3d7f); outline-offset: 8px; border-radius: 12px; }
/* El cartel "Mirá con ojos de Archista": como los botones del sitio (el degradé rosa a naranja). Con precios de socio
   en la página late mientras está (cl-eye--rich); el aviso de la primera vez brilla tres veces. La flecha lleva el color
   del degradé donde cae (en el medio; en el celu, más a la derecha). */
.cl-eye__tip {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5;
  transform: translate(-50%, -4px); opacity: 0; visibility: hidden; pointer-events: none;
  padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  background: var(--gradient, linear-gradient(95deg, #ff3d7f, #ff8a3d)); color: #fff;
  font: 700 12px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  box-shadow: 0 10px 28px rgba(255, 61, 127, .45), inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.cl-eye__tip::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  background: #ff645e; border-radius: 2px; transform: rotate(45deg);
}
@keyframes clTipGlow {
  0%, 100% { box-shadow: 0 10px 28px rgba(255, 61, 127, .45), inset 0 0 0 1px rgba(255, 255, 255, .2); }
  50% { box-shadow: 0 10px 34px rgba(255, 61, 127, .75), 0 0 0 7px rgba(255, 61, 127, .2), inset 0 0 0 1px rgba(255, 255, 255, .2); }
}
#navEye.cl-eye--hint .cl-eye__tip { animation: clTipGlow 1.6s ease-in-out .2s 3; }
@keyframes clTipLatido {
  0%, 100% { box-shadow: 0 10px 28px rgba(255, 61, 127, .45), inset 0 0 0 1px rgba(255, 255, 255, .2); filter: none; }
  45% { box-shadow: 0 10px 38px rgba(255, 61, 127, .85), 0 0 0 8px rgba(255, 61, 127, .22), 0 0 26px 6px rgba(255, 138, 61, .45), inset 0 0 0 1px rgba(255, 255, 255, .35); filter: brightness(1.12); }
}
@keyframes clLidLatido { 50% { filter: drop-shadow(0 0 6px rgba(255, 61, 127, 1)) drop-shadow(0 0 18px rgba(255, 61, 127, .8)); } }
#navEye.cl-eye--rich .cl-eye__tip { animation: clTipLatido 1.15s ease-in-out infinite; }
#navEye.cl-eye--rich .nav__eye-lid { animation: clLidLatido 1.15s ease-in-out infinite; }
/* Mientras el cartel está puesto, el ojo brilla apenas: es lo que hay que tocar. */
#navEye.cl-eye .nav__eye-lid { transition: filter .3s ease; }
/* Mientras los ojos esperan los precios (pocas veces: se piden al cargar la página), el ojo se enciende y el botón tocado
   late. */
html.cl-lens-wait #navEye.cl-eye .nav__eye-lid { filter: drop-shadow(0 0 4px rgba(255, 61, 127, .95)) drop-shadow(0 0 12px rgba(255, 61, 127, .6)); }
.cl-lens-fab.is-waiting, .cl-lens-invite.is-waiting, .cl-lens-open.is-waiting { animation: clEsperando 1s ease-in-out infinite; }
@keyframes clEsperando { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cl-lens-fab.is-waiting, .cl-lens-invite.is-waiting, .cl-lens-open.is-waiting { animation: none; opacity: .7; } }
#navEye.cl-eye--price .nav__eye-lid, #navEye.cl-eye--hint .nav__eye-lid { filter: drop-shadow(0 0 4px rgba(255, 61, 127, .95)) drop-shadow(0 0 12px rgba(255, 61, 127, .6)); }
#navEye.cl-eye:focus-visible .cl-eye__tip, #navEye.cl-eye--hint .cl-eye__tip, #navEye.cl-eye--price .cl-eye__tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
@media (hover: hover) {
  #navEye.cl-eye:hover .cl-eye__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
}
.cl-lens-on #navEye.cl-eye .cl-eye__tip { opacity: 0; visibility: hidden; }
@media (max-width: 720px) {
  /* En el celu el ojo está a la derecha, al lado de la cuenta: el cartel se alinea a la derecha para no salirse. */
  .cl-eye__tip, #navEye.cl-eye:hover .cl-eye__tip { left: auto; right: -54px; transform: translate(0, -4px); }
  #navEye.cl-eye--hint .cl-eye__tip, #navEye.cl-eye--price .cl-eye__tip, #navEye.cl-eye:focus-visible .cl-eye__tip { transform: translate(0, 0); }
  .cl-eye__tip::before { left: auto; right: 74px; background: #ff7351; }
}
/* El cursor propio del theme queda arriba de la vista de socio. */
.cl-lens-on .cursor, .cl-lens-on .cursor-ring { z-index: 2147483600 !important; }
.cl-lens-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Botón flotante que invita a mirar con ojos de Archista: en todas las páginas (se aparta mientras se ve el botón de la
   sección). Con la lupa prendida queda solo la cruz para cerrarla. */
.cl-lens-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 900; display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--night, #161616); color: var(--cream, #f5f1ea); border: 1px solid rgba(255, 61, 127, .55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase;
}
.cl-lens-fab[hidden] { display: none; }
.cl-lens-fab { transition: opacity .25s ease, transform .25s ease, border-color .2s ease, visibility 0s; }
/* Apartado: tampoco queda para el teclado ni para los lectores de pantalla (se esconde del todo al terminar de irse). */
.cl-lens-fab.is-quiet, .cl-lens-fab.is-away {
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, border-color .2s ease, visibility 0s .25s;
}
/* Con la lupa prendida, el botón flotante es la cruz para cerrarla, solo donde el ojo del menú no se ve (en 1101 a 1300 px
   el theme lo esconde); si el ojo se ve, ya tiene su cruz (y en el celu la del flotante pisaba el botón del panel). */
.cl-lens-on .cl-lens-fab.is-quiet, .cl-lens-on .cl-lens-fab.is-away { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: none; }
.cl-lens-on .cl-lens-fab.is-extra { display: none; }
/* Con texto abajo, solo el ojo (redondo). */
.cl-lens-fab.is-compact { width: 48px; padding: 0; justify-content: center; }
.cl-lens-fab.is-compact .cl-fab-long, .cl-lens-fab.is-compact .cl-fab-short { display: none; }
.cl-fab-short { display: none; }
.cl-lens-on .cl-lens-fab .cl-fab-long, .cl-lens-on .cl-lens-fab .cl-fab-short { display: none; }
.cl-lens-on .cl-lens-fab { padding: 0 12px; }
@media (max-width: 720px) {
  .cl-lens-fab { left: 12px; bottom: 12px; min-height: 44px; padding: 0 14px 0 12px; }
  .cl-lens-fab.is-compact { width: 44px; padding: 0; }
  .cl-fab-long { display: none; }
  .cl-fab-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .cl-lens-fab { transition: none; } }

/* Camafeos del plugin, en las páginas sin camafeos del theme: como los del theme, al costado, aparecen al bajar y solo
   con la pantalla ancha (en tinta sobre los fondos claros). */
.cl-cameo {
  position: absolute; z-index: 2; width: clamp(110px, 10vw, 160px); pointer-events: none; opacity: 0;
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.cl-cameo.is-in { opacity: .5; transform: var(--rest-tr, none); }
.cl-cameo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }
.cl-cameo--ink img { filter: brightness(0.18) saturate(0) drop-shadow(0 6px 14px rgba(0, 0, 0, .18)); }
@media (max-width: 1099px) { .cl-cameo { display: none; } }
@media (prefers-reduced-motion: reduce) { .cl-cameo { display: none; } }
/* El camafeo del pie: chico y centrado, antes del pie del sitio. Va cuando no se ve ningún camafeo de los costados (lo
   decide club-lens.js con is-off): en el celu, en la tablet salvo donde el theme muestra los suyos y en la compu si no
   entró ninguno. Alto fijo: la imagen carga al acercarse y no corre el pie del sitio. */
.cl-cameo-pie {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 172px;
  padding: 6px 0 30px; overflow: hidden; pointer-events: none;
}
.cl-cameo-pie img {
  display: block; width: auto; height: auto; max-width: 118px; max-height: 136px; opacity: 0;
  transform: rotate(-4deg) translateY(22px); transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
.cl-cameo-pie.cl-cameo--ink img { filter: brightness(0.18) saturate(0) drop-shadow(0 6px 14px rgba(0, 0, 0, .18)); }
.cl-cameo-pie.is-in img { opacity: .55; transform: rotate(-4deg); }
.cl-cameo-pie.is-off { display: none; }
/* Al final de una página sin pie del sitio: aire abajo para que no lo tapen el botón de la lupa ni la fonola. */
.cl-cameo-pie--fin { height: 236px; padding-bottom: 94px; }
@media (prefers-reduced-motion: reduce) { .cl-cameo-pie img { transition: none; transform: rotate(-4deg); } }
/* En el celu, el paso de pago (el theme lo deja compacto, sin pie del sitio): sin camafeo. */
@media (max-width: 767px) { html body.archi-step3-active .cl-cameo-pie { display: none; } }
.cl-lens-fab svg { color: var(--pink, #ff3d7f); }
.cl-lens-fab .cl-fab-x, .cl-lens-on .cl-lens-fab .cl-fab-eye { display: none; }
.cl-lens-on .cl-lens-fab .cl-fab-x { display: block; margin: 0 5px; }
/* Con la lupa prendida, una cruz en el centro del ojo: se cierra tocándolo. */
#navEye .cl-eye__x {
  position: absolute; left: 50%; top: 49%; z-index: 2; display: grid; place-items: center; box-sizing: border-box;
  width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
  background: rgba(14, 12, 10, .92); color: var(--cream, #f5f1ea); border: 1.5px solid var(--pink, #ff3d7f);
  box-shadow: 0 0 10px rgba(255, 61, 127, .55);
  opacity: 0; transform: translate(-50%, -50%) scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.cl-lens-on #navEye .cl-eye__x { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cl-lens-fab:hover, .cl-lens-fab:focus-visible { border-color: var(--pink, #ff3d7f); background: #1f1418; }
.cl-lens-on .cl-lens-fab { z-index: 2147482003; }
#navEye.cl-eye--hint { animation: clEyeCall 1.1s ease-in-out 2; }
@keyframes clEyeCall { 0%, 100% { transform: none; } 40% { transform: scale(1.14); } 70% { transform: scale(.96); } }

/* El botón al lado del precio, en la ficha del evento o del producto. */
.cl-lens-open {
  align-self: flex-start; width: auto; max-width: 100%;
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; min-height: 40px; padding: 8px 16px;
  border: 1px solid rgba(255, 61, 127, .6); border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
  font: 600 12px/1.2 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease;
}
.cl-lens-open:hover, .cl-lens-open:focus-visible { background: rgba(255, 61, 127, .12); border-color: var(--pink, #ff3d7f); outline: none; }
.cl-lens-open svg { color: var(--pink, #ff3d7f); flex: 0 0 auto; }
@media (pointer: coarse) { .cl-lens-open { min-height: 44px; } }

/* El cartelito de la portada, sobre las funciones de la semana: invita a mirarlas con ojos de Archista. El sello del ojo
   es el de los carteles de precio de la lupa. */
.cl-lens-invite {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 7px 18px 7px 7px; width: max-content; max-width: 100%; align-self: flex-start;
  border: 1px solid rgba(255, 61, 127, .6); border-radius: 999px; background: var(--black, #0a0a0a); color: var(--cream, #f5f1ea);
  cursor: pointer; text-align: left; transform: rotate(-1.5deg); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.cl-lens-invite:hover, .cl-lens-invite:focus-visible, .cl-lens-invite[aria-pressed="true"] {
  transform: rotate(0) translateY(-2px); border-color: var(--pink, #ff3d7f); box-shadow: 0 16px 36px rgba(255, 61, 127, .25); outline: none;
}
.cl-lens-invite__eye {
  flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff;
  background: var(--gradient, linear-gradient(95deg, #ff3d7f, #ff8a3d)); transform: rotate(-9deg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), inset 0 0 0 5px rgba(10, 10, 10, .1);
}
.cl-lens-invite__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-lens-invite__text b { font: 700 12px/1.15 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; }
.cl-lens-invite__text small { font: italic 400 14px/1.2 var(--font-display, Georgia, serif); color: var(--cream-soft, #d6cfc1); }
/* Al aparecer late tres veces, como el cartel del ojo: que se vea que es para tocar. */
.cl-lens-invite { animation: clInviteGlow 1.6s ease-in-out .6s 3; }
@keyframes clInviteGlow {
  0%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
  50% { box-shadow: 0 12px 34px rgba(255, 61, 127, .45), 0 0 0 7px rgba(255, 61, 127, .16); }
}
@media (prefers-reduced-motion: reduce) { .cl-lens-invite { transition: none; animation: none; } }

/* La capa: la página vista "con ojos de Archista". Se recorta con un círculo (la lupa). */
.cl-lens {
  position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; visibility: hidden;
  clip-path: circle(0px at 0px 0px); -webkit-clip-path: circle(0px at 0px 0px);
}
.cl-lens.is-on { visibility: visible; }
.cl-lens__veil {
  position: absolute; inset: 0;
  -webkit-backdrop-filter: grayscale(1) contrast(1.12);
  backdrop-filter: grayscale(1) contrast(1.12);
  /* El medio tono de líneas de la Mona del logo: diagonales finas, oscuras sobre lo claro y claras sobre lo oscuro. */
  background:
    repeating-linear-gradient(-38deg, rgba(10, 10, 10, .2) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-38deg, transparent 0 3px, rgba(245, 241, 234, .07) 3px 4px, transparent 4px 6px),
    linear-gradient(135deg, rgba(255, 61, 127, .1), rgba(255, 138, 61, .08));
}
@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  .cl-lens__veil { background-color: rgba(245, 241, 234, .55); }
}
.cl-lens__marks { position: absolute; inset: 0; }
/* Las figuras patafísicas (donde no hay precios de socio): las líneas crema de las láminas, con su pie de lámina. */
.cl-lens-fig { position: absolute; left: 0; top: 0; margin: 0; pointer-events: none; transform-origin: 50% 40%; }
.cl-lens-fig img { display: block; width: 100%; height: auto; }
.cl-lens-fig__cap {
  display: block; margin-top: 6px; text-align: center; color: var(--cream, #f5f1ea);
  font: italic 400 13px/1.3 var(--font-display, Georgia, serif); letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.cl-lens-fig__cap b { font-style: normal; font-weight: 700; color: var(--pink, #ff3d7f); margin-right: 5px; }
/* Sobre un fondo claro, la figura en tinta. */
.cl-lens-fig--ink img { filter: invert(1) sepia(.35); }
.cl-lens-fig--ink .cl-lens-fig__cap { color: #1c1714; text-shadow: 0 1px 4px rgba(245, 241, 234, .9); }

.cl-lens-tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border-radius: 999px; white-space: nowrap;
  background: var(--black, #0a0a0a); color: var(--cream, #f5f1ea); border: 1px solid rgba(255, 61, 127, .6);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4); will-change: transform;
}
.cl-lens-tag__stamp {
  flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--gradient, linear-gradient(95deg, #ff3d7f, #ff8a3d)); color: #fff;
  font: 600 19px/1 var(--font-display, Georgia, serif); transform: rotate(-9deg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), inset 0 0 0 5px rgba(10, 10, 10, .1);
}
.cl-lens-tag--musica .cl-lens-tag__stamp { width: 84px; border-radius: 999px; font: 700 9px/1.1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); }
/* En las filas de la cartelera del celu el cartel va en una línea abajo del nombre: la fila se estira mientras los ojos
   de Archista están prendidos (club-lens.js, rowRoom, que pone y saca la clase y corrige el scroll). */
.cl-lens-room { padding-bottom: 48px !important; }
/* Sobre el precio de la ficha: tapa todo el bloque del precio normal. */
.cl-lens-tag--over { box-sizing: border-box; border-radius: 18px; padding-right: 20px; }
.cl-lens-tag__body { display: grid; gap: 1px; }
.cl-lens-tag__body small { font: 600 10px/1.2 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--orange, #ff8a3d); }
.cl-lens-tag__body b { font: 600 23px/1.1 var(--font-display, Georgia, serif); color: var(--cream, #f5f1ea); }
.cl-lens-tag__body s { font: 500 12px/1.2 var(--font-body, sans-serif); color: rgba(245, 241, 234, .45); text-decoration-thickness: 1.5px; }
/* En una línea: sobre un precio de una sola línea (la página de la entrada, del alto del precio) y en las filas de la
   cartelera del celu (abajo del nombre). */
.cl-lens-tag--line { gap: 8px; padding: 3px 14px 3px 3px; }
.cl-lens-tag--line .cl-lens-tag__stamp { width: 30px; height: 30px; font-size: 12px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.cl-lens-tag--musica.cl-lens-tag--line .cl-lens-tag__stamp { width: 66px; height: 22px; font-size: 7px; }
.cl-lens-tag--line .cl-lens-tag__body { display: flex; align-items: baseline; gap: 8px; }
.cl-lens-tag--line .cl-lens-tag__body b { font-size: 18px; }
/* Una entrada sin descuento del Club (a la gorra, con promo): lo dice sobre el precio en vez de no mostrar nada. */
.cl-lens-tag--note { padding: 8px 18px; border-color: rgba(245, 241, 234, .4); }
.cl-lens-tag--note.cl-lens-tag--line { padding: 4px 14px; }
/* El precio del Club va más grande (Joaquín, 1/10); los avisos sin precio ("A la gorra", "10% en la barra") quedan como
   estaban, así entran en un celu de 320 px. */
.cl-lens-tag--note .cl-lens-tag__body b { font-size: 19px; }
.cl-lens-tag--note.cl-lens-tag--line .cl-lens-tag__body b { font-size: 16px; }
/* En un celu angosto ("A la gorra · con el Club" y "10% en la barra" no entran en una línea): en dos. */
@media (max-width: 360px) {
  .cl-lens-tag--note.cl-lens-tag--line { padding: 3px 14px; border-radius: 16px; }
  .cl-lens-tag--note.cl-lens-tag--line .cl-lens-tag__body { display: grid; gap: 0; }
}
.cl-lens-bar__quote { grid-column: 1 / -1; margin: 0; font: italic 400 14px/1.4 var(--font-display, Georgia, serif); color: var(--cream, #f5f1ea); }
@media (max-width: 400px) { .cl-lens-bar__quote { display: none; } }

/* La lupa grabada (solo con el mouse). El recuadro mide lo que la lupa al doble (--r = 2 x radio) y se achica con
   scale(); la imagen (assets/img/lupa.webp, 1222 x 1202) va con el centro del vidrio (422,7 / 410,8) en el centro del
   recuadro y el borde de adentro del aro (radio de 312 a 326 px) sobre el borde del círculo. */
.cl-lens-ring {
  --r: 236px;
  position: fixed; left: 0; top: 0; z-index: 2147482001; width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.cl-lens-ring.is-on { opacity: 1; }
.cl-lens-ring::before {
  content: ""; position: absolute; left: -14.83%; top: -13.01%; width: 187.42%; height: 184.36%;
  background: url("../img/lupa.webp") center / 100% 100% no-repeat;
}
.cl-lens-ring__hint {
  position: fixed; left: 0; top: 0; z-index: 2147482001; pointer-events: none; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px; background: var(--night, #161616); color: var(--cream, #f5f1ea);
  font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s ease;
}
.cl-lens-ring__hint.is-on { opacity: .95; }

/* La vista completa: el llamado del Club, abajo. */
.cl-lens-bar {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 2147482002;
  width: min(560px, calc(100vw - 24px)); box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 18px;
  padding: 18px 60px 18px 22px; border-radius: 22px;
  background: var(--night, #161616); color: var(--cream, #f5f1ea); border: 1px solid rgba(255, 61, 127, .45);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translate(-50%, 18px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.cl-lens-bar.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .25s, .25s, 0s; }
/* Escondido con su cruz: los ojos de Archista siguen prendidos; vuelve la próxima vez. */
.cl-lens-bar.is-on.is-hidden { opacity: 0; visibility: hidden; transform: translate(-50%, 18px); transition-delay: 0s, 0s, .3s; pointer-events: none; }
.cl-lens-bar__eyebrow { grid-column: 1 / -1; margin: 0; font: 700 11px/1.2 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--orange, #ff8a3d); }
.cl-lens-bar__text { margin: 0; font: 500 15px/1.45 var(--font-body, sans-serif); color: var(--cream-soft, #d6cfc1); }
.cl-lens-bar__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--gradient, linear-gradient(95deg, #ff3d7f, #ff8a3d)); color: #fff !important; text-decoration: none !important;
  font: 700 14px/1 var(--font-body, sans-serif); white-space: nowrap;
}
.cl-lens-bar__cta::after { content: "\2192"; margin-left: 8px; }
.cl-lens-bar__cta:focus-visible { outline: 2px solid var(--cream, #f5f1ea); outline-offset: 3px; }
.cl-lens-bar__close {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted, #a8a29e); cursor: pointer;
}
.cl-lens-bar__close:hover, .cl-lens-bar__close:focus-visible { color: var(--cream, #f5f1ea); background: rgba(255, 255, 255, .06); outline: none; }
@media (max-width: 560px) {
  .cl-lens-bar { grid-template-columns: 1fr; padding: 16px 52px 16px 18px; }
  .cl-lens-bar__cta { justify-self: start; margin-top: 8px; }
  .cl-lens-tag { gap: 8px; padding-right: 12px; }
  .cl-lens-tag__stamp { width: 42px; height: 42px; font-size: 16px; }
  .cl-lens-tag--musica .cl-lens-tag__stamp { width: 78px; font-size: 8.5px; }
  .cl-lens-tag__body b { font-size: 19px; }
  .cl-lens-tag--note .cl-lens-tag__body b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #navEye.cl-eye--hint { animation: none; }
  .cl-lens-bar, .cl-lens-ring, .cl-eye__tip, #navEye .cl-eye__x { transition: none; }
  #navEye .cl-eye__tip, #navEye.cl-eye--rich .nav__eye-lid { animation: none; }
  #navEye.cl-eye--rich .cl-eye__tip { box-shadow: 0 10px 34px rgba(255, 61, 127, .75), 0 0 0 6px rgba(255, 61, 127, .25), inset 0 0 0 1px rgba(255, 255, 255, .3); }
}