/* ══════════════════════════════════════════════════════════════════
   Sitio · home y nosotros. El overlay de contacto se mudó a
   main.css: lo usan también las cinco fichas de proyecto.
   Se apoya en main.css: mismos tokens, mismo blend difference.
   ══════════════════════════════════════════════════════════════════ */

/* ── HOME: una sola pantalla, sin scroll ──────────────────────── */
.home_c{
  position:relative;width:100%;height:100svh;overflow:hidden;
  color:var(--color-light);
  background-color:var(--color-dark);
}
/* Cuadrícula de fondo, apagada a prueba. Son dos gradientes de 1px, sin
   canvas ni imágenes: descomentar los dos bloques para volver a verla.
.home_c{
  background-image:
    linear-gradient(to right,  rgba(233,234,228,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,234,228,.055) 1px, transparent 1px);
  background-size:72px 72px;
  background-position:center center;
}
@media(max-width:768px){.home_c{background-size:48px 48px}}
*/

.works_infos{
  position:fixed;bottom:0;left:0;z-index:6;
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;
  width:100%;padding:26px 24px;gap:24px;
  color:var(--color-light);mix-blend-mode:difference;
  font-size:13px;font-weight:500;line-height:132%;text-transform:uppercase;
}
.works_infos .l,.works_infos .m,.works_infos .r{display:flex;flex-direction:column;gap:2px}
/* cada línea entera: sin esto la segunda parte se parte en dos */
.works_infos .l{max-width:none}
.works_infos .l .defecto span{white-space:nowrap}
.works_infos .m{align-items:center;text-align:center}
.works_infos .r{align-items:flex-end;text-align:right}
.works_infos a{pointer-events:auto;transition:opacity .2s ease-out}
.works_infos a:hover{opacity:.5}

.home_lema{
  /* main.css pone display:flex en todos los h1-h5: sin esto las dos
     líneas se acomodan en fila y quedan pegadas. */
  display:block;
  color:var(--color-light);mix-blend-mode:difference;
  font-family:var(--display);font-size:clamp(30px,4.4vw,68px);line-height:88%;
  text-align:center;text-wrap:balance;pointer-events:none;
}
.home_lema .linea{display:block;overflow:hidden}
.home_lema .linea span{display:block}
.home_proy{
  display:flex;flex-direction:column;gap:10px;
  width:clamp(220px,26vw,420px);
  transition:filter .8s var(--ease),transform .8s var(--ease);
  will-change:transform,filter;
}
/* el que recibe el hover se agranda */
.home_proy:hover{transform:scale(1.05)}
.home_proy:hover .home_proy_media img{transform:scale(1)}
/* los demás quedan en blanco y negro (la clase la pone Discover()) */
.home_proy.is-faded{filter:grayscale(100%);opacity:.55}
.home_proy_info .n .cube{width:4px;aspect-ratio:1;background-color:currentColor}
.home_proy_info .nombre{font-family:var(--display);font-size:22px;text-transform:none;line-height:100%}
.home_proy_info .tipo{text-align:right;opacity:.7}

/* reloj vivo */
.jour_abs{display:flex;flex-direction:column;gap:2px}
.jour{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.jour .cube{width:4px;aspect-ratio:1;background-color:currentColor}


@media(max-width:768px){
  /* En el teléfono la barra de abajo queda sólo con el lema. El nombre
     del proyecto señalado y el reloj con el mail se caen: el primero
     depende de un hover que en táctil no existe, y el segundo repite
     algo que el menú y el pie ya dicen. Con los tres, la franja comía
     tres renglones debajo de la órbita y le sacaba aire al trabajo. */
  .works_infos{grid-template-columns:1fr;gap:12px;padding:20px}
  /* .m lleva las dos clases —m y slot— porque más abajo hay un
     `.works_infos .slot{display:grid}` que pesa lo mismo (0,2,0) y va
     después, así que le ganaba: el nombre del proyecto seguía ocupando
     su renglón en el teléfono aunque esta regla dijera lo contrario.
     Se notaba ahora que el equipo se apoya en el pie. */
  .works_infos .m.slot,.works_infos .r{display:none}
  .works_infos .l .senalado{display:none}
  .works_infos .l .defecto{opacity:1 !important}
  .works_infos .l .defecto span{white-space:normal}
  .home_lema{padding:0 20px;font-size:clamp(32px,11vw,60px)}
}
.lista{display:flex;flex-direction:column;gap:88px;padding-top:60px}
.caso{display:flex;flex-direction:column;gap:12px;width:100%}
.caso:hover .caso_media img{transform:scale(1)}
.caso_n .cube{width:4px;aspect-ratio:1;background-color:#455e53}
.caso_tipo{color:#6d6f68;text-align:right}

/* ── TALENTOS: capas fijas con contador ───────────────────────── */
/* ── TALENTOS · díptico ────────────────────────────────────────────
   Los dos retratos ocupan media pantalla cada uno y siempre están a la
   vista: son un par matcheado en encuadre y pose con colores opuestos,
   y eso sólo funciona si se ven juntos.

   Al abrir una ficha, esa foto se queda en su lado y el lado contrario
   se vuelve blanco con la información. La foto de la otra persona no se
   achica: se retira, para que no compita con la que estás leyendo. ── */
/* ══════════════════════════════════════════════════════════════════
   NOSOTROS
   Habla el mismo idioma que las fichas de proyecto: el claro de la
   marca, rótulos en mono gris, títulos en la display fina, cuerpo en
   Montserrat con el gris del texto, filetes de un pixel y el verde de
   estado en los hover. Antes tenía su propio mundo —papel de diario
   primero, ventanas de Windows después— y era la única página del
   sitio que no se parecía al resto.
   ══════════════════════════════════════════════════════════════════ */
.nosotros_c{
  --hecho:#1B8A4B;
  --filete:#06040326;
  background-color:var(--color-light);color:var(--color-dark);
}
.nosotros_c .inner{
  width:min(100% - 80px,1180px);margin-inline:auto;
  background-color:transparent;
}

/* El rótulo de cada bloque: el mismo de las etiquetas de las fichas. */
.nos_rotulo{
  margin:0 0 26px;padding-bottom:13px;
  border-bottom:1px solid var(--filete);
  font-family:var(--sans);font-size:var(--fontXS);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:#8b8d85;
}

.nos_entrada{padding:150px 0 0}
.nos_titulo{
  margin:0;max-width:20ch;
  font-family:var(--display);font-size:clamp(32px,5.2vw,72px);
  font-weight:300;line-height:100%;letter-spacing:-.03em;text-wrap:balance;
}
.nos_bajada{
  margin:28px 0 0;max-width:56ch;
  font-family:var(--texto);font-size:18px;font-weight:400;line-height:170%;
  color:#4a4c46;
}
.nos_bajada strong,
.nos_cierre strong{color:var(--color-dark);font-weight:600}

.nos_bloque{padding:96px 0 0}

/* ── QUÉ HACEMOS ─────────────────────────────────────────────────
   Cuatro servicios con una línea cada uno. Antes los cuatro nombres
   pasaban en una cinta de texto que se desplazaba: se veían, pero no
   decían qué era ninguno. */
.servicios{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background-color:var(--filete);
  border:1px solid var(--filete);
}
.serv{
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;
  align-content:start;
  padding:28px 26px 30px;background-color:var(--color-light);
}
.serv_n{
  grid-row:1/3;
  font-family:var(--sans);font-size:var(--fontXS);
  letter-spacing:.14em;color:#8b8d85;
  font-variant-numeric:tabular-nums;
}
.serv_t{
  margin:0;
  font-family:var(--display);font-size:22px;font-weight:400;
  line-height:112%;letter-spacing:-.01em;
}
.serv_d{
  margin:0;max-width:44ch;
  font-family:var(--texto);font-size:15.5px;font-weight:400;line-height:168%;
  color:#4a4c46;
}

/* ── PRODUCCIÓN PROPIA ───────────────────────────────────────────
   Las dos piezas de cinco cuadros, con la nota al costado. Mismo radio
   que las reacciones de las fichas. */
.piezas{
  display:grid;grid-template-columns:200px 200px 1fr;
  gap:30px;align-items:start;
}
.pieza{margin:0}
.pieza img{
  width:100%;height:auto;display:block;
  border-radius:14px;
  background-color:#dcddd6;
}
.pieza figcaption{
  margin-top:11px;
  font-family:var(--sans);font-size:var(--fontXXS);
  letter-spacing:.13em;text-transform:uppercase;color:#8b8d85;
}
.piezas_nota{
  margin:0;max-width:38ch;
  font-family:var(--texto);font-size:15.5px;line-height:168%;color:#4a4c46;
}

/* ── CÓMO TRABAJAMOS ─────────────────────────────────────────────
   Tres pasos numerados, con el mismo número en mono que usa la línea
   de tiempo de las fichas: es la misma idea —dónde estás en un
   proceso— y por eso se dibuja igual. */
.pasos{list-style:none;margin:0;padding:0}
.paso{
  display:grid;grid-template-columns:auto 1fr;gap:24px;
  padding:26px 0;border-top:1px solid var(--filete);
}
.paso:first-child{border-top:0;padding-top:4px}
.paso_n{
  font-family:var(--sans);font-size:var(--fontXS);
  letter-spacing:.14em;color:var(--hecho);
  font-variant-numeric:tabular-nums;
}
.paso_t{
  margin:0 0 9px;
  font-family:var(--display);font-size:24px;font-weight:400;
  line-height:110%;letter-spacing:-.01em;
}
.paso_d{
  margin:0;max-width:62ch;
  font-family:var(--texto);font-size:16px;font-weight:400;line-height:172%;
  color:#4a4c46;
}

/* ── EL EQUIPO ───────────────────────────────────────────────────
   Una fila por persona, que se despliega. Vivían en su propia página,
   con dos retratos a pantalla completa que usaban toda la ventana para
   decir dos nombres. Acá cierran el relato —quién lo hace— sin pedir
   una navegación aparte. */
.perfiles{display:flex;flex-direction:column}
.perfil{border-top:1px solid var(--filete)}
.perfil:first-child{border-top:0}
.perfil_cab{
  width:100%;padding:20px 0;cursor:pointer;
  display:grid;grid-template-columns:48px 1fr auto;
  align-items:center;gap:20px;
  background:none;border:0;color:inherit;text-align:left;
}
.perfil_foto{
  width:48px;height:48px;object-fit:cover;object-position:50% 22%;
  display:block;border-radius:8px;
  filter:grayscale(1);opacity:.8;
  transition:filter .35s var(--ease),opacity .35s var(--ease);
}
.perfil.abierto .perfil_foto,
.perfil_cab:hover .perfil_foto{filter:none;opacity:1}
.perfil_id{display:flex;flex-direction:column;gap:7px;min-width:0}
.perfil_nombre{
  font-family:var(--display);font-size:26px;font-weight:400;
  line-height:100%;letter-spacing:-.01em;
  transition:color .25s var(--ease);
}
.perfil_rol{
  font-family:var(--sans);font-size:var(--fontXS);
  letter-spacing:.13em;text-transform:uppercase;color:#8b8d85;
}
.perfil_cab:hover .perfil_nombre,
.perfil_cab:focus-visible .perfil_nombre{color:var(--hecho)}
/* el más se vuelve menos girando una de sus dos barras */
.perfil_mas{
  position:relative;flex:0 0 auto;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--filete);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.perfil_mas::before,
.perfil_mas::after{
  content:'';position:absolute;top:50%;left:50%;
  width:12px;height:1px;background-color:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease);
}
.perfil_mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.perfil.abierto .perfil_mas::after{transform:translate(-50%,-50%) rotate(180deg)}
.perfil.abierto .perfil_mas{border-color:var(--color-dark)}

/* Se abre con grid-template-rows de 0fr a 1fr: anima la altura real sin
   que nadie tenga que medirla en JS ni fijar un máximo inventado. */
.perfil_cuerpo{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.perfil.abierto .perfil_cuerpo{grid-template-rows:1fr}
.perfil_dentro{overflow:hidden;opacity:0;transition:opacity .3s var(--ease)}
.perfil.abierto .perfil_dentro{opacity:1;transition-delay:.1s}
.perfil_texto{
  margin:0 0 24px;max-width:62ch;
  font-family:var(--texto);font-size:16px;font-weight:400;line-height:170%;
  color:#4a4c46;
}
.perfil_cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;padding-bottom:28px;
}
.perfil_rotulo{
  margin:0 0 11px;
  font-family:var(--sans);font-size:var(--fontXXS);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:#8b8d85;
}
.perfil_lista{list-style:none;margin:0;padding:0}
.perfil_lista li{
  padding:8px 0;border-bottom:1px solid var(--filete);
  font-family:var(--texto);font-size:15px;font-weight:500;line-height:150%;
}
.perfil_lista li:first-child{border-top:1px solid var(--filete)}

/* ── CIERRE ──────────────────────────────────────────────────────
   El mismo cierre que las fichas de proyecto, hasta el botón. */
.nos_cierre{
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  padding:110px 0 14vh;
}
.nos_cierre h2{
  margin:0;max-width:22ch;
  font-family:var(--display);font-size:clamp(28px,4vw,54px);
  font-weight:300;line-height:102%;letter-spacing:-.03em;text-wrap:balance;
}
.nos_cierre p{
  margin:0;max-width:56ch;
  font-family:var(--texto);font-size:18px;line-height:170%;color:#4a4c46;
}
.nos_cta{
  margin-top:14px;padding:16px 28px;border-radius:100px;
  background-color:var(--color-dark);color:var(--color-light);
  font-family:var(--texto);font-size:var(--fontS);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.nos_cta:hover,.nos_cta:focus-visible{
  background-color:var(--hecho);transform:translateY(-2px);
}

@media(max-width:900px){
  .nosotros_c .inner{width:min(100% - 40px,1180px)}
  .nos_entrada{padding:120px 0 0}
  .nos_bloque{padding:72px 0 0}
  .servicios{grid-template-columns:1fr}
  .serv{padding:22px 20px 24px}
  /* las dos piezas quedan una al lado de la otra y la nota abajo: con
     una sola columna cada 9:16 medía casi una pantalla */
  .piezas{grid-template-columns:1fr 1fr;gap:18px}
  .piezas_nota{grid-column:1/-1}
  .paso{grid-template-columns:auto 1fr;gap:16px}
  .perfil_cab{grid-template-columns:44px 1fr auto;gap:15px;padding:17px 0}
  .perfil_foto{width:44px;height:44px}
  .perfil_cols{grid-template-columns:1fr;gap:22px}
  .nos_cierre{padding:80px 0 10vh}
}
@media(prefers-reduced-motion:reduce){
  .perfil_cuerpo,.perfil_dentro,.perfil_mas::before,.perfil_mas::after{transition:none}
}

/* ── ÓRBITA DE PROYECTOS (canvas) ─────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   LA DUPLA · los dos perfiles, al costado del home
   Chicos y al margen: la página es la órbita de proyectos y esto es una
   nota al pie —quién los hizo—. Cada uno abre su propio contenedor con
   todo lo suyo, así que no hace falta una página aparte para decir dos
   nombres y cuatro datos.

   Va sobre la órbita, que ocupa la pantalla entera. Por eso el bloque
   NO recibe eventos y sólo los reciben las fichas: si no, un rectángulo
   invisible se comería el arrastre del carrusel en toda esa franja.
   ══════════════════════════════════════════════════════════════════ */
/* Abajo a la izquierda, anclado por el pie: al abrirse una ficha el
   bloque crece HACIA ARRIBA y no empuja nada. Con top no se podría —el
   contenido bajaría y se metería debajo de la barra—. */
.duo{
  position:absolute;left:40px;bottom:96px;
  z-index:6;width:252px;
  pointer-events:none;
  color:var(--color-light);
}
.duo_rotulo{
  margin:0 0 12px;padding-bottom:9px;
  border-bottom:1px solid #e9eae42e;
  font-family:var(--sans);font-size:var(--fontXXS);
  letter-spacing:.2em;text-transform:uppercase;color:#8b8d85;
}
.duo_lista_p{display:flex;flex-direction:column}
.duo_p{border-bottom:1px solid #e9eae41f;pointer-events:auto}

.duo_cab{
  width:100%;padding:11px 0;cursor:pointer;
  display:grid;grid-template-columns:30px 1fr auto;
  align-items:center;gap:11px;
  background:none;border:0;color:inherit;text-align:left;
}
.duo_foto{
  width:30px;height:30px;object-fit:cover;object-position:50% 22%;
  display:block;border-radius:5px;
  filter:grayscale(1);opacity:.72;
  transition:filter .35s var(--ease),opacity .35s var(--ease);
}
.duo_p.abierto .duo_foto,
.duo_cab:hover .duo_foto{filter:none;opacity:1}
.duo_id{display:flex;flex-direction:column;gap:3px;min-width:0}
.duo_nombre{
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  transition:color .25s var(--ease);
}
.duo_rol{
  font-family:var(--sans);font-size:9px;
  letter-spacing:.11em;text-transform:uppercase;color:#8b8d85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.duo_cab:hover .duo_nombre,
.duo_cab:focus-visible .duo_nombre{color:#1B8A4B}
/* el más se vuelve menos girando una de sus dos barras */
.duo_mas{
  position:relative;flex:0 0 auto;width:16px;height:16px;
}
.duo_mas::before,
.duo_mas::after{
  content:'';position:absolute;top:50%;left:50%;
  width:11px;height:1px;background-color:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease);
}
.duo_mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.duo_p.abierto .duo_mas::after{transform:translate(-50%,-50%) rotate(180deg)}

/* El contenedor que se despliega. La altura la anima grid-template-rows
   de 0fr a 1fr: nadie tiene que medirla ni fijar un máximo inventado. */
.duo_cuerpo{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.duo_p.abierto .duo_cuerpo{grid-template-rows:1fr}
.duo_dentro{overflow:hidden;opacity:0;transition:opacity .3s var(--ease)}
.duo_p.abierto .duo_dentro{opacity:1;transition-delay:.1s}
.duo_texto{
  margin:0 0 12px;
  font-family:var(--texto);font-size:13px;font-weight:400;line-height:162%;
  color:#b9bbb4;
}
.duo_lista{list-style:none;margin:0 0 16px;padding:0}
.duo_lista li{
  position:relative;padding:4px 0 4px 13px;
  font-family:var(--texto);font-size:12.5px;font-weight:500;line-height:150%;
}
.duo_lista li::before{
  content:'';position:absolute;left:0;top:11px;
  width:4px;height:4px;border-radius:50%;background-color:#1B8A4B;
}

/* En pantallas bajas o angostas la columna del costado no entra sin
   pisar la órbita: el bloque baja a la esquina y se acuesta. */
@media(max-height:620px){
  /* en una ventana muy baja el bloque abierto llegaría al header: se
     angosta y se pega más al pie */
  .duo{bottom:88px;width:224px}
}
@media(max-width:640px){
  /* En teléfono va al pie, encima de la barra, y anclado abajo: al
     abrirse crece hacia arriba, sobre la órbita, que es espacio vacío.
     Estático no puede ir —en el flujo caería en el tope del contenedor,
     o sea debajo del header fijo. */
  /* Abajo del todo. La franja de .works_infos ocupa los últimos 67px,
     pero en teléfono no muestra NADA: el nombre del proyecto señalado y
     el reloj están en display:none —dependen de un hover que en táctil
     no existe— y el lema que llenaba la izquierda se fue cuando este
     bloque tomó su lugar. Eran 67px de padding vacío empujando al
     equipo a media altura. */
  .duo{
    left:20px;right:20px;bottom:22px;
    width:auto;
  }
  .duo_rotulo{margin-bottom:6px}
  /* Apiladas y NO en fila. En fila cada ficha medía 158px, y un párrafo
     de 13px ahí adentro daba renglones de cuatro palabras: se leía peor
     que no estar. Apiladas, el texto abierto toma los 335 de ancho. */
  .duo_lista_p{flex-direction:column}
  .duo_cab{grid-template-columns:28px 1fr auto;gap:11px;padding:9px 0}
  .duo_foto{width:28px;height:28px}
  /* La ficha abierta se despega del fondo: sobre la órbita, un texto
     suelto sin plano detrás se pierde contra las portadas.
     El plano va casi opaco —0.94— y no a medias: con 0.57 el logotipo
     del centro de la órbita, que va en mix-blend-mode difference, se
     transparentaba por encima del párrafo. */
  .duo_p.abierto{
    background-color:#060403f0;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-radius:10px;
    margin:0 -12px;padding:0 12px;
    box-shadow:0 0 0 1px #e9eae414;
  }
  .duo_texto{
    font-size:15px;line-height:172%;color:#c9cbc4;
    margin-bottom:14px;
  }
  .duo_lista li{font-size:14px;padding:5px 0 5px 14px}
  .duo_lista li::before{top:12px}
  .duo_lista{margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  .duo_cuerpo,.duo_dentro,.duo_mas::before,.duo_mas::after{transition:none}
}

/* ── EL FONDO QUE RESPIRA ────────────────────────────────────────
   Dos manchas de luz muy tenues moviéndose muy despacio sobre el negro.
   No es una galaxia: es que el negro plano de un fondo a pantalla
   completa se lee como apagado, y basta con que algo se mueva ahí atrás
   —aunque no se pueda decir qué— para que la página se sienta viva.

   Sólo se animan transform y opacity, que son las dos cosas que el
   compositor resuelve sin repintar nada. Animar el degradado en sí
   —background-position, o los colores— obligaría a repintar la pantalla
   entera en cada cuadro, que es justo lo que no se puede hacer con un
   lienzo de canvas girando encima.

   Las opacidades son bajísimas a propósito: por encima de un 10% deja
   de leerse como profundidad y empieza a leerse como una mancha, y
   encima le come contraste a las portadas. */
.home_c{overflow:hidden}
.home_c::before,
.home_c::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:110vmax;height:110vmax;border-radius:50%;
  will-change:transform,opacity;
}
.home_c::before{
  top:-38vmax;left:-30vmax;
  background:radial-gradient(circle, #23356e 0%, #23356e00 66%);
  opacity:.09;
  animation:respira_a 34s var(--ease) infinite alternate;
}
.home_c::after{
  bottom:-42vmax;right:-32vmax;
  background:radial-gradient(circle, #6e3a23 0%, #6e3a2300 66%);
  opacity:.06;
  animation:respira_b 46s var(--ease) infinite alternate;
}
@keyframes respira_a{
  from{transform:translate3d(0,0,0) scale(1);opacity:.055}
  to  {transform:translate3d(14vmax,7vmax,0) scale(1.22);opacity:.105}
}
@keyframes respira_b{
  from{transform:translate3d(0,0,0) scale(1.14);opacity:.038}
  to  {transform:translate3d(-11vmax,-9vmax,0) scale(1);opacity:.075}
}
@media(prefers-reduced-motion:reduce){
  /* quietas, pero no ausentes: la profundidad se queda, el movimiento no */
  .home_c::before,.home_c::after{animation:none}
}

.orbita_c{position:absolute;inset:0;z-index:4}
.orbita{position:absolute;inset:0;width:100%;height:100%;display:block}
.orbita_centro{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;
  color:var(--color-light);mix-blend-mode:difference;pointer-events:none;
}

/* la barra inferior alterna entre su texto fijo y la portada señalada */
.works_infos .slot{display:grid}
.works_infos .slot > *{grid-area:1/1;transition:opacity .28s ease}
.works_infos .slot > *{display:flex;flex-direction:column;gap:2px}
.works_infos:not(.senalando) .senalado{opacity:0;pointer-events:none}
.works_infos.senalando .defecto{opacity:0;pointer-events:none}
.works_infos .senalado .nombre{font-family:var(--display);font-size:23px;text-transform:none;line-height:100%}

@media(max-width:900px){
  /* en táctil no hay hover: el anillo se muestra sin señalado */
  .orbita{pointer-events:auto}
}