/* Punteros de la composición «Galería» (los dibuja static/js/cursor.js).

   Casi todo es blanco con `mix-blend-mode: difference`: sobre papel se ve
   oscuro, sobre tinta claro, y sobre una foto invierte lo que tiene debajo.
   Funciona en la landing y en la zona de prueba de Apariencia, por eso no
   depende de las variables de galeria.css (las usa si están). */

.gxc, .gxc * { pointer-events: none; }
/* Sin caja propia: un contenedor con z-index u opacidad crearía su propio
   contexto de apilamiento, y la diferencia de sus hijos ya no invertiría lo
   que hay debajo sino un fondo transparente. Cada pieza lleva su z-index. */
.gxc { display: contents; }
.gxc > * { position: fixed; top: 0; left: 0; z-index: 100001; will-change: transform; }
.gxc.is-oculto > *, .gxc.is-campo > * { opacity: 0 !important; }

.gxc-zona, .gxc-zona a, .gxc-zona button, .gxc-zona label, .gxc-zona img, .gxc-zona figure { cursor: none; }
.gxc-zona input, .gxc-zona textarea { cursor: text; }

.gxc-texto, .gxc-chip, .gxc-pastilla, .gxc-cota .c-num {
  font-family: var(--gx-cond, "Barlow Condensed", "Arial Narrow", sans-serif);
  font-weight: 600; text-transform: uppercase; letter-spacing: .16em; white-space: nowrap;
}

/* Punto base */
.gxc-punto { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--clay, #B08968); transition: opacity .2s, width .3s, height .3s, margin .3s; }
.gxc-punto--blanco { background: #fff; mix-blend-mode: difference; }
.gxc-punto.is-oculto { opacity: 0; }
.gxc-punto.is-enlace { width: 12px; height: 12px; margin: -6px 0 0 -6px; }

/* ── Aro invertido ─────────────────────────────────────────────────────── */
.gxc-aro {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1px solid #fff; mix-blend-mode: difference; display: grid; place-items: center;
  transition: width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1), margin .45s cubic-bezier(.2,.7,.2,1), background-color .3s;
}
.gxc-aro .gxc-texto { font-size: .72rem; color: #000; opacity: 0; transition: opacity .25s; }
.gxc-aro.is-enlace { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: #fff; }
/* El rótulo también va invertido: el aro se llena de blanco en diferencia y
   el texto, negro, deja ver la foto tal cual a través de las letras. */
.gxc-aro.is-rotulo { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: #fff; }
.gxc-aro.is-rotulo .gxc-texto { opacity: 1; }
.gxc.is-pulsado .gxc-aro { scale: .82; }

/* ── Retícula ──────────────────────────────────────────────────────────── */
.gxc-reticula { width: 0; height: 0; mix-blend-mode: difference; transition: rotate .35s cubic-bezier(.2,.7,.2,1), scale .35s; }
.gxc-reticula i { position: absolute; background: #fff; }
.gxc-reticula .r-h { width: 32px; height: 1.5px; left: -16px; top: 0; }
.gxc-reticula .r-v { width: 1.5px; height: 9px; left: 0; }
.gxc-reticula .r-v--a { top: -14px; }
.gxc-reticula .r-v--b { top: 5px; }
.gxc-reticula .r-cap { width: 12px; height: 1.5px; left: -6px; }
.gxc-reticula .r-cap--a { top: -19px; }
.gxc-reticula .r-cap--b { top: 18px; }
.gxc-reticula.is-enlace { rotate: 45deg; scale: 1.35; }
.gxc.is-pulsado .gxc-reticula { scale: .8; }

/* Rótulo pequeño junto al puntero */
.gxc-chip { font-size: .76rem; font-weight: 700; color: #fff; mix-blend-mode: difference; opacity: 0; transition: opacity .2s; }
.gxc-chip.is-on { opacity: 1; }
.gxc-chip--guias { font-size: .62rem; letter-spacing: .12em; opacity: .85; }

/* ── Selección de plano ────────────────────────────────────────────────── */
.gxc-esq { width: 11px; height: 11px; mix-blend-mode: difference; border: 0 solid #fff; transition: border-width .2s; }
.gxc-esq--tl { border-top-width: 1.5px; border-left-width: 1.5px; margin: 0; }
.gxc-esq--tr { border-top-width: 1.5px; border-right-width: 1.5px; margin: 0 0 0 -11px; }
.gxc-esq--bl { border-bottom-width: 1.5px; border-left-width: 1.5px; margin: -11px 0 0 0; }
.gxc-esq--br { border-bottom-width: 1.5px; border-right-width: 1.5px; margin: -11px 0 0 -11px; }
.gxc.is-marco .gxc-esq { width: 22px; height: 22px; border-width: 0; }
.gxc.is-marco .gxc-esq--tl { border-top-width: 2px; border-left-width: 2px; }
.gxc.is-marco .gxc-esq--tr { border-top-width: 2px; border-right-width: 2px; margin-left: -22px; }
.gxc.is-marco .gxc-esq--bl { border-bottom-width: 2px; border-left-width: 2px; margin-top: -22px; }
.gxc.is-marco .gxc-esq--br { border-bottom-width: 2px; border-right-width: 2px; margin: -22px 0 0 -22px; }
.gxc-chip--plano { margin: 26px 0 0 12px; font-size: .74rem; }

/* ── Círculo y etiqueta ────────────────────────────────────────────────── */
.gxc-mini { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: opacity .2s, width .25s, height .25s, margin .25s; }
.gxc-mini.is-enlace { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.gxc-mini.is-oculto { opacity: 0; }
.gxc-pastilla {
  font-size: .72rem; padding: 7px 13px 6px; border-radius: 999px;
  background: var(--paper, #F3EFE7); color: var(--ink, #1F1E1B);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; scale: .7; transform-origin: left bottom; transition: opacity .2s, scale .25s cubic-bezier(.2,.7,.2,1);
}
.gxc-pastilla.is-on { opacity: 1; scale: 1; }

/* ── Cota ──────────────────────────────────────────────────────────────── */
.gxc-cota { mix-blend-mode: difference; color: #fff; }
.gxc-cota .c-linea { position: absolute; left: -32px; top: 0; width: 64px; height: 1px; background: #fff; transition: width .35s cubic-bezier(.2,.7,.2,1), left .35s cubic-bezier(.2,.7,.2,1); }
.gxc-cota .c-linea::before, .gxc-cota .c-linea::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: #fff; transform: rotate(45deg); }
.gxc-cota .c-linea::before { left: 0; }
.gxc-cota .c-linea::after { right: 0; }
.gxc-cota .c-num { position: absolute; left: 0; top: -17px; translate: -50% 0; font-size: .62rem; letter-spacing: .1em; }
.gxc-cota.is-larga .c-linea { width: 140px; left: -70px; }
.gxc-cota.is-larga .c-num { font-size: .76rem; letter-spacing: .16em; }
.gxc-cota.is-enlace .c-linea { width: 40px; left: -20px; }

/* ── Compás ────────────────────────────────────────────────────────────── */
.gxc-compas {
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  border: 1px dashed #fff; mix-blend-mode: difference; display: grid; place-items: center;
  animation: gxc-gira 6s linear infinite;
  transition: width .4s cubic-bezier(.2,.7,.2,1), height .4s cubic-bezier(.2,.7,.2,1), margin .4s cubic-bezier(.2,.7,.2,1), background-color .3s;
}
.gxc-compas .gxc-texto { font-size: .7rem; color: #000; opacity: 0; }
.gxc-compas.is-enlace { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-style: solid; }
.gxc-compas.is-rotulo { width: 104px; height: 104px; margin: -52px 0 0 -52px; border-style: solid; background: #fff; animation: none; }
.gxc-compas.is-rotulo .gxc-texto { opacity: 1; }
@keyframes gxc-gira { to { rotate: 360deg; } }

/* ── Guías de dibujo ───────────────────────────────────────────────────── */
.gxc-guia { background: #fff; mix-blend-mode: difference; opacity: .55; }
.gxc-guia--h { width: 100vw; height: 1px; }
.gxc-guia--v { width: 1px; height: 100vh; }
.gxc-nodo { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border: 1px solid #fff; mix-blend-mode: difference; transition: width .25s, height .25s, margin .25s, background-color .25s; }
.gxc-nodo.is-enlace { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: #fff; }

/* ── Flecha de norte ───────────────────────────────────────────────────── */
.gxc-norte { width: 22px; height: 30px; margin: -15px 0 0 -11px; mix-blend-mode: difference; display: grid; place-items: center; transition: width .35s, height .35s, margin .35s; }
.gxc-norte svg { transition: opacity .2s, scale .3s; }
.gxc-norte .gxc-texto { position: absolute; font-size: .7rem; color: #000; opacity: 0; }
.gxc-norte.is-enlace svg { scale: 1.4; }
.gxc-norte.is-rotulo { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: #fff; }
.gxc-norte.is-rotulo svg { opacity: 0; }
.gxc-norte.is-rotulo .gxc-texto { opacity: 1; }

/* ── Trazo de lápiz ────────────────────────────────────────────────────── */
.gxc-lienzo { width: 100vw; height: 100vh; mix-blend-mode: difference; }