/* Panal Negro — una sola página. Paleta y tipografía del sistema de marca. */
:root {
  --negro: #0C0B09;
  --carbon: #1C1A18;
  --grafito: #2D2A26;
  --piedra: #5F5A52;
  --arena-oscura: #8D887D;
  --arena: #A9A397;
  --ambar: #F5A524;
  --ambar-claro: #FFC857;
  --crema: #F4EFE6;
  --linea: rgba(244, 239, 230, .1);

  /* Grilla y aire del manual (Marca/02-visual/tokens.css): 12 columnas, medianil 24, contenido hasta 1200 */
  --margen: clamp(20px, 5vw, 120px);
  --ancho: 1200px;
  --medianil: 24px;
  /* borde de la caja de 1200: todo (barra, portada, secciones, menú) se alinea acá. El % se resuelve donde se usa */
  --borde: max(var(--margen), calc((100% - var(--ancho)) / 2));
  --apertura: 216px;
  --seccion: 144px;
  --bloque: 96px;
  --grupo: 48px;
  --par: 24px;
  --alto-barra: 64px;
  --escala-final: .95;           /* tamaño al que se aleja la portada; JS lo lee */
  /* Movimiento: tokens del manual (Marca/02-visual/tokens.css) */
  --dur-rapido: 120ms;
  --dur-medio: 240ms;
  --dur-lento: 400ms;
  --dur-marca: 700ms;
  --escalon: 60ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);
  --curva-salida: cubic-bezier(0.3, 0, 1, 1);
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

}
@media (max-width: 700px) {
  :root { --escala-final: .96; --alto-barra: 60px; }
}
@media (max-width: 760px) {
  :root { --apertura: 128px; --seccion: 88px; --bloque: 56px; --grupo: 32px; --par: 16px; --medianil: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--negro); }
body {
  margin: 0;
  background: var(--negro);
  color: var(--crema);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-abierto { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ambar-claro); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--ambar); color: var(--negro); }

/* ───────── Escena: portada fija + sección que sube ───────── */
.escena {
  position: relative;
  background: var(--ambar);
}
.portada {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.ventana {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--negro);
  transform-origin: 50% 50%;
  will-change: transform, filter;
  /* JS escribe --r (radio) en px ya compensado por la escala */
  border-radius: var(--r, 0px);
}
.capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--negro);
}
.capa:nth-of-type(2) { opacity: 0; }
.lienzo {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.lienzo.activo { opacity: 1; z-index: 3; }

.velo {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(100% 85% at 0% 0%, rgba(12, 11, 9, .9), rgba(12, 11, 9, .6) 45%, rgba(12, 11, 9, 0) 80%),
    linear-gradient(to top, rgba(12, 11, 9, .6), rgba(12, 11, 9, 0) 28%);
}

/* Título */
.cabecera {
  position: absolute;
  z-index: 5;
  top: calc(min(var(--apertura), 22svh) + env(safe-area-inset-top));
  left: var(--borde);
  right: var(--borde);
}
.titulo {
  margin: 0;
  max-width: 11.5em;
  font-weight: 600;
  font-size: clamp(2.5rem, 6.6vw, 6rem);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.firma {
  margin: var(--par) 0 0;
  max-width: 30em;
  font-weight: 500;
  font-size: clamp(1.02rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  color: rgba(244, 239, 230, .88);
  text-shadow: 0 1px 14px rgba(12, 11, 9, .6);
}

/* ───────── Sección: clientes + servicios ───────── */
.obra {
  position: relative;
  z-index: 2;
  background: var(--negro);
  border-radius: calc(clamp(20px, 2.4vw, 32px) * var(--radio, 1)) calc(clamp(20px, 2.4vw, 32px) * var(--radio, 1)) 0 0;
  box-shadow: 0 -40px 90px -40px rgba(12, 11, 9, .6);
}
.obra__contenido {
  padding: var(--seccion) var(--borde) calc(var(--alto-barra) + var(--grupo) + env(safe-area-inset-bottom));
}
.etiqueta {
  margin: 0;
  line-height: 1.4;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--arena);
}
.obra__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--par) var(--grupo);
  padding-bottom: var(--grupo);
}
.obra__linea {
  margin: 0;
  max-width: 34em;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -.01em;
  color: rgba(244, 239, 230, .9);
}
.obra__cabeza--sigue { margin-top: var(--seccion); }

/* ───────── Clientes: secuencia de tarjetas (una vez, con bloqueo suave) ───────── */
.clientes-escena { position: relative; height: 100svh; }
.clientes-escena.quieta { height: auto; }
.clientes-escenario { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.quieta .clientes-escenario { position: relative; height: auto; overflow: visible; }
.clientes-capa {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(84px, 11vh, 120px) var(--borde) calc(var(--alto-barra) + 28px);
  pointer-events: none;
}
.final .clientes-capa { pointer-events: auto; }
.quieta .clientes-capa { position: relative; padding-top: var(--seccion); padding-bottom: 0; }
.clientes-cabeza {
  position: absolute;
  top: clamp(28px, 5vh, 48px);
  left: var(--borde);
  right: var(--borde);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 40px;
}
.quieta .clientes-cabeza { position: static; padding-bottom: var(--grupo); }
.animada .clientes-cabeza .obra__linea { opacity: 0; }
.fila-clientes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--medianil);
}
.tarjeta { will-change: transform; visibility: hidden; }
.animada .tarjeta, .final .tarjeta { visibility: visible; }
.tarjeta > a { display: block; text-decoration: none; color: var(--crema); }
.tarjeta__cara {
  position: relative;
  aspect-ratio: 1 / 1.618;
  background: linear-gradient(180deg, #1C1A18 0%, #191715 100%);
  box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .07);
  overflow: hidden;
}
.tarjeta__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68%;
  height: 26%;
  transform: translate(-50%, -50%);
  background: var(--crema);
  opacity: .94;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.tarjeta__pie {
  padding-top: 16px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.tarjeta__pie small {
  display: block;
  margin-top: 5px;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--arena-oscura);
}
.tarjeta > a:focus-visible { outline-offset: 6px; }

/* Filas numeradas con líneas finas (etapas) */
.filas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linea);
}
.fila {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: baseline;
  gap: 8px var(--medianil);
  padding: 32px 0;
  border-bottom: 1px solid var(--linea);
}
.fila__num { grid-column: 1;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--piedra);
  font-variant-numeric: tabular-nums;
}
.fila__nombre {
  grid-column: 2 / span 6;
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 3rem);   /* 48 px: título 2 del manual */
  line-height: 1.04;
  letter-spacing: -.03em;
}
.fila__texto {
  grid-column: 8 / span 5;
  margin: 0;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--arena);
}
.fila__entrega {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--crema);
}
.pie {
  margin: var(--bloque) 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--arena-oscura);
}

/* Aparición escalonada */
.js .aparece {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-lento) var(--curva), transform var(--dur-lento) var(--curva);
  transition-delay: calc(var(--i, 0) * var(--escalon));
}
.js .aparece.visible { opacity: 1; transform: none; }

/* ───────── Servicios y Cómo trabajamos: escenas por tramos (ronda r10; escena.js, servicios.js, metodo.js) ─────────
   En compu: la lista en las columnas 1 a 5 y un escenario fijo en las 7 a 12. En celular: el escenario fijo arriba (46svh).
   Cada paso corre su tramo una vez al cruzar la línea de lectura; el scroll queda libre. */
.recorrido {
  --alto-escenario: min(72svh, 680px);
  --arriba-escenario: calc((100svh - var(--alto-escenario) - var(--alto-barra)) / 2);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: start;
}
.pasos { grid-column: 1 / span 5; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.escenario {
  grid-column: 7 / span 6;
  grid-row: 1;
  position: sticky;
  top: var(--arriba-escenario);
  height: var(--alto-escenario);
}
.escena-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.paso {
  min-height: 70svh;
  display: flex;
  flex-direction: column;
  padding: 28px 0 var(--grupo);
  border-top: 1px solid var(--linea);
}
.paso__num { font-family: var(--mono); font-size: 13px; color: var(--piedra); font-variant-numeric: tabular-nums; transition: color var(--dur-medio) var(--curva); }
.paso__nombre { margin: 12px 0 0; font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.04; letter-spacing: -.03em; }
.paso__recibe { display: block; margin: 18px 0 0; font-family: var(--mono); font-size: 13px; color: var(--crema); }
.paso__texto { margin: 14px 0 0; max-width: 27em; font-size: clamp(.98rem, 1.1vw, 1.06rem); line-height: 1.55; color: var(--arena); }
/* el paso que se lee queda pleno y los demás bajan; el número del que se lee va en ámbar claro (sobre negro) */
.escena-lista .paso__nombre, .escena-lista .paso__texto, .escena-lista .paso__recibe { opacity: .34; transition: opacity var(--dur-medio) var(--curva); }
.escena-lista .paso.activo .paso__nombre, .escena-lista .paso.activo .paso__texto, .escena-lista .paso.activo .paso__recibe { opacity: 1; }
.escena-lista .paso.activo .paso__num { color: var(--ambar-claro); }

/* Método: el legajo */
.mesa { position: absolute; inset: 0 0 30px 0; }
.escenario__nota { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--piedra); }
.doc {
  position: absolute; left: 0; top: 0;
  width: var(--ancho-doc, 260px);
  aspect-ratio: 1 / 1.4142;
  container-type: inline-size;
  background: var(--crema) center / cover no-repeat;
  color: var(--negro);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 22px 44px -12px rgba(0, 0, 0, .7), 0 4px 10px rgba(0, 0, 0, .35);
  transform-origin: 50% 60%;
  opacity: 0;
  transition: filter var(--dur-medio) var(--curva);
  overflow: hidden;
}
.doc.debajo { filter: brightness(.82); }
.doc__in { position: absolute; inset: 0; padding: 7cqw 7.5cqw; display: flex; flex-direction: column; }
.doc__cabeza { display: flex; justify-content: space-between; align-items: center; padding-bottom: 3cqw; border-bottom: .3cqw solid var(--negro); }
.doc__marca { display: flex; align-items: center; gap: 2cqw; font-family: var(--mono); font-size: 2.6cqw; letter-spacing: .25em; }
.doc__marca svg { width: 5cqw; height: 5.4cqw; color: var(--negro); --acento: var(--ambar); }
.doc__cod { font-family: var(--mono); font-size: 2.3cqw; color: var(--piedra); text-align: right; line-height: 1.5; }
.doc__titulo { margin: 9cqw 0 0; font-weight: 600; font-size: 7.4cqw; letter-spacing: -.03em; line-height: 1.05; }
.doc__bajada { margin: 2.5cqw 0 0; font-size: 3.3cqw; color: var(--piedra); line-height: 1.45; }
.doc__lista { list-style: none; margin: 7cqw 0 0; padding: 0; border-top: .2cqw solid #DDD5C6; }
.doc__lista li { display: flex; gap: 4cqw; padding: 2.6cqw 0; border-bottom: .2cqw solid #DDD5C6; font-size: 3.5cqw; font-weight: 500; }
.doc__lista b { font-family: var(--mono); font-weight: 400; font-size: 2.8cqw; color: #8D5416; min-width: 4cqw; padding-top: .4cqw; }
.doc__cajetin { margin-top: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; border: .25cqw solid var(--negro); font-family: var(--mono); font-size: 2.2cqw; }
.doc__cajetin span { padding: 1.4cqw 1.8cqw; border-left: .25cqw solid var(--negro); line-height: 1.35; }
.doc__cajetin span:first-child { border-left: 0; }
.doc__cajetin i { display: block; font-style: normal; color: var(--piedra); font-size: 1.8cqw; }
.doc__firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 8cqw; margin-top: auto; margin-bottom: 6cqw; }
.doc__firmas span { border-top: .25cqw solid var(--negro); padding-top: 1.6cqw; font-family: var(--mono); font-size: 2.3cqw; color: var(--piedra); }
.doc--lomo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5cqw; background: #DDD5C6; border-right: .3cqw solid rgba(12, 11, 9, .15); }
.doc--lomo .doc__in { padding-left: 12cqw; }
.ejemplo { position: absolute; right: 4cqw; bottom: 3.4cqw; font-family: var(--mono); font-size: 2.3cqw; color: #8D5416; }
/* el entorno de prueba no es papel: es una pantalla */
.doc--pantalla { aspect-ratio: 1.45 / 1; width: calc(var(--ancho-doc, 260px) * 1.3); background: var(--carbon); color: var(--crema); border-radius: 1.4cqw;
  box-shadow: inset 0 0 0 .25cqw rgba(244, 239, 230, .14), 0 22px 44px -12px rgba(0, 0, 0, .8); }
.pant__barra { display: flex; justify-content: space-between; align-items: center; padding: 2.2cqw 3cqw; border-bottom: .2cqw solid rgba(244, 239, 230, .1); font-family: var(--mono); font-size: 2.1cqw; color: var(--arena); }
.pant__barra b { font-weight: 400; color: var(--negro); background: var(--ambar-claro); padding: .5cqw 1.4cqw; border-radius: .6cqw; }
.pant__cuerpo { display: grid; grid-template-columns: 26% 1fr; height: calc(100% - 7.5cqw); }
.pant__menu { border-right: .2cqw solid rgba(244, 239, 230, .1); padding: 2.6cqw 2.4cqw; font-family: var(--mono); font-size: 1.9cqw; color: var(--arena); line-height: 2.1; }
.pant__menu .si { color: var(--crema); }
.pant__area { padding: 3cqw; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; gap: 2cqw; }
.pant__area p { margin: 0 0 1cqw; grid-column: 1 / -1; font-weight: 600; font-size: 3.4cqw; letter-spacing: -.02em; }
.pant__tarjeta { height: 10cqw; border-radius: 1cqw; background: var(--grafito); }
.pant__fila { grid-column: 1 / -1; height: 3cqw; border-radius: .6cqw; background: var(--grafito); opacity: .7; }
.pant__nota { position: absolute; left: 3cqw; bottom: 2.4cqw; font-family: var(--mono); font-size: 2cqw; color: var(--arena); }
/* la ámbar al cerrar el legajo: el próximo módulo */
.proximo {
  position: absolute; top: 0; right: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0; transform-origin: 85% 20%;
  font-family: var(--mono); font-size: 11px; color: var(--ambar-claro);
}
.proximo svg { width: 46px; height: 41px; display: block; }
.proximo path { fill: var(--ambar); }

@media (max-width: 899px) {
  .recorrido { display: block; --alto-escenario: 46svh; --arriba-escenario: 0px; }
  .escenario {
    z-index: 3;
    margin: 0 calc(-1 * var(--borde));
    background: var(--negro);
    box-shadow: 0 1px 0 var(--linea), 0 24px 24px -8px var(--negro);
  }
  .escena-lienzo { inset: 10px var(--borde) 8px; width: calc(100% - 2 * var(--borde)); height: calc(100% - 18px); }
  .mesa { left: var(--borde); right: var(--borde); top: 8px; bottom: 30px; }
  .escenario__nota { left: var(--borde); right: var(--borde); bottom: 8px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .proximo { right: var(--borde); top: 10px; font-size: 10px; }
  .proximo svg { width: 34px; height: 30px; }
  .paso { min-height: 52svh; padding: 28px 0 var(--grupo); }
  .paso__nombre { font-size: 1.75rem; }
}

/* ───────── Barra fija ───────── */
.barra {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--alto-barra) + env(safe-area-inset-bottom));
  padding: 0 var(--borde) env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--crema);
  --acento: var(--ambar);
  transition: background-color var(--dur-medio) var(--curva);
}
.barra.solida { background: var(--negro); }
.marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* logo horizontal: mínimo 140 px de ancho (manual) */
.marca svg { display: block; height: 30px; width: calc(30px * 5.7445); }
.boton-menu {
  font-weight: 500;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  padding: 10px 0 10px 16px;
}
.logo__acento { fill: var(--acento, var(--ambar)); transition: fill var(--dur-rapido) var(--curva) var(--acento-demora, 0s); }

/* ───────── Menú ───────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--grupo) + env(safe-area-inset-top)) var(--borde) calc(var(--alto-barra) + var(--grupo) + env(safe-area-inset-bottom));
  background: var(--negro);
  transform: translateY(100%);
  transition: transform var(--dur-lento) var(--curva);
  visibility: hidden;
}
.menu[hidden] { display: none; }
.menu.abierto { transform: none; visibility: visible; }
.menu.cerrando { visibility: visible; }
.menu__arriba {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity var(--dur-medio) var(--curva);
}
.menu.abierto .menu__arriba { opacity: 1; transition-delay: calc(var(--dur-lento) + 6 * var(--escalon)); }
.menu__logo { width: 44px; height: 47px; color: var(--crema); --acento: var(--ambar); flex: none; }
.menu__arriba p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--arena); }
.menu__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.menu__links a {
  display: block;
  overflow: hidden;
  padding: .04em 0 .1em;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(2.6rem, 8.4vw, 6rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.menu__links span {
  display: inline-block;
  position: relative;
  transform: translateY(110%);
  transition: transform var(--dur-lento) var(--curva), color var(--dur-rapido) var(--curva);
}
.menu.abierto .menu__links span { transform: none; }
.menu.abierto .menu__links a:nth-child(1) span { transition-delay: calc(var(--dur-medio) + 0 * var(--escalon)), 0s; }
.menu.abierto .menu__links a:nth-child(2) span { transition-delay: calc(var(--dur-medio) + 1 * var(--escalon)), 0s; }
.menu.abierto .menu__links a:nth-child(3) span { transition-delay: calc(var(--dur-medio) + 2 * var(--escalon)), 0s; }
.menu.abierto .menu__links a:nth-child(4) span { transition-delay: calc(var(--dur-medio) + 3 * var(--escalon)), 0s; }
.menu.abierto .menu__links a:nth-child(5) span { transition-delay: calc(var(--dur-medio) + 4 * var(--escalon)), 0s; }
.menu.abierto .menu__links a:nth-child(6) span { transition-delay: calc(var(--dur-medio) + 5 * var(--escalon)), 0s; }
.menu__links a:hover span, .menu__links a:focus-visible span { color: var(--ambar-claro); }

/* ───────── Intro ───────── */
.intro { display: none; }
.js .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--negro);
}
.js .intro.lista { background: none; }
.js.sin-intro .intro { display: none; }
.intro__svg { display: block; width: 100%; height: 100%; }

/* ───────── Cursor propio (cursor.js): solo con mouse, sin movimiento reducido ni colores forzados ───────── */
.cursor-propio, .cursor-propio * { cursor: none !important; }
.cursor-propio [data-cursor="sistema"], .cursor-propio [data-cursor="sistema"] * { cursor: auto !important; }
.cursor {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-rapido) var(--curva);
  will-change: transform;
}
.cursor.visible { opacity: 1; }
.cursor__forma {
  position: absolute;
  left: -80px;
  top: -80px;
  width: 160px;
  height: 160px;
  overflow: visible;
  filter: drop-shadow(0 1px 4px rgba(12, 11, 9, .35));
  transition: transform var(--dur-rapido) var(--curva);
}
.cursor.presionado .cursor__forma { transform: scale(.86); }
.cursor[data-estado="inicio"] .cursor__forma { filter: none; }   /* encastrada en el logo, sin sombra sobre las celdas vecinas */
.cursor__progreso { fill: none; stroke: var(--cur, var(--crema)); stroke-width: 2.4; stroke-linecap: round; }
/* íconos: se dibujan en 400 ms (entran) y se borran en 120 ms (salen) */
.cursor__icono path {
  fill: none;
  stroke: var(--cur, var(--crema));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  filter: drop-shadow(0 0 1px var(--cur-filo, transparent));
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset var(--dur-rapido) var(--curva-salida), opacity var(--dur-rapido) var(--curva-salida);
}
.cursor[data-icono="abajo"] .cursor__abajo,
.cursor[data-icono="arriba"] .cursor__arriba,
.cursor[data-icono="externo"] .cursor__externo,
.cursor[data-icono="pausa"] .cursor__pausa,
.cursor[data-icono="izq"] .cursor__izq,
.cursor[data-icono="der"] .cursor__der,
.cursor[data-icono="cerrar"] .cursor__cerrar,
.cursor[data-icono="menos"] .cursor__menos,
.cursor[data-icono="play"] .cursor__play {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset var(--dur-lento) var(--curva) var(--dur-rapido), opacity var(--dur-rapido) var(--curva) var(--dur-rapido);
}
/* la flecha baja (o sube) 4 px dos veces y queda quieta */
.cursor[data-icono="abajo"] .cursor__abajo { animation: cursor-baja var(--dur-marca) var(--curva) calc(var(--dur-lento) + var(--dur-rapido)) 2; }
.cursor[data-icono="arriba"] .cursor__arriba { animation: cursor-sube var(--dur-marca) var(--curva) calc(var(--dur-lento) + var(--dur-rapido)) 2; }
@keyframes cursor-baja { 50% { transform: translateY(4px); } }
@keyframes cursor-sube { 50% { transform: translateY(-4px); } }
/* etiqueta: mono en mayúsculas, 11 px y +0,08 em (manual, tipografía), sobre una placa negra que sobre el fondo
   negro no se ve y sobre texto o video la separa */
.cursor__etiqueta {
  position: absolute;
  left: 26px;
  top: 0;
  padding: 6px 7px 6px 8px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crema);
  background: rgba(12, 11, 9, .8);
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity var(--dur-rapido) var(--curva-salida), transform var(--dur-rapido) var(--curva-salida);
}
.cursor.izquierda .cursor__etiqueta { left: auto; right: 26px; transform: translate(6px, -50%); }
.cursor .cursor__etiqueta.visible {
  opacity: 1;
  transform: translate(0, -50%);
  transition: opacity var(--dur-medio) var(--curva), transform var(--dur-medio) var(--curva);
}
/* el cursor se encastra en la celda ámbar del logo: mientras, la celda del logo queda hueca */
.marca { --acento-demora: var(--dur-rapido); }
.marca.con-celda { --acento: transparent; --acento-demora: 0s; }
.cursor-propio .boton-menu { transition: transform var(--dur-medio) var(--curva); }
/* tarjeta con el cursor encima: el logo termina de asentarse (efecto "hover" de Apple para objetos grandes) */
.final .tarjeta__logo { transition: opacity var(--dur-rapido) var(--curva); }
.final .tarjeta > a:hover .tarjeta__logo { opacity: 1 !important; }

/* ───────── Celular ───────── */
@media (max-width: 760px) {
  .fila-clientes { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .tarjeta { grid-column: span 2; }
  .tarjeta:nth-child(4) { grid-column: 2 / span 2; }
  .tarjeta__pie { font-size: .78rem; padding-top: 8px; }
  .tarjeta__pie small { display: none; }
  .clientes-cabeza .obra__linea { display: none; }
  .fila { grid-template-columns: 40px 1fr; padding: 24px 0; }
  .fila__nombre, .fila__texto { grid-column: 2; }
  .marca svg { height: 27px; width: calc(27px * 5.7445); }
}

/* ───────── Menos movimiento ───────── */
@media (prefers-reduced-motion: reduce) {
  .menu, .menu__links span, .menu__arriba { transition-duration: .01s !important; transition-delay: 0s !important; }
  .menu { transform: none; opacity: 0; transition: opacity .3s !important; }
  .menu.abierto { opacity: 1; }
}
.menu.cerrando { transition-timing-function: var(--curva-salida); }

/* ───────── Viaje de la tarjeta elegida hacia la página del caso (r11) ───────── */
.viaje {
  position: fixed;
  z-index: 25;
  overflow: hidden;
  background: linear-gradient(180deg, #1C1A18 0%, #191715 100%);
  box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .07);
  pointer-events: none;
}
.viaje .tarjeta__logo { opacity: .94; }
.viaje img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; }

/* el cursor vive en la capa superior del navegador (popover) para quedar sobre el visor y la pantalla completa */
.cursor[popover] { inset: auto; right: auto; bottom: auto; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; width: 0; height: 0; }

/* ───────── Volver atrás (r11): la lista llega armada y la vuelta se anima entre documentos (volver.js) ───────── */
/* si se vuelve de un caso, la fila ya está armada antes de que corra clientes.js */
.vuelta .tarjeta { visibility: visible; }
.vuelta .clientes-capa { pointer-events: auto; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
/* dos paneles sobre carbón: el que se va se comprime contra un costado, el que llega entra por el otro (volver.js los mueve) */
html::view-transition { background: #1C1A18; }
html::view-transition-group(root) { animation: none; }
html::view-transition-old(root), html::view-transition-new(root) { animation: none; mix-blend-mode: normal; border-radius: 14px; box-shadow: 0 0 0 1px rgba(244, 239, 230, .1); }
html[data-vt="b-atras"]::view-transition-old(root), html[data-vt="b-adelante"]::view-transition-new(root) { transform-origin: 100% 50%; }
html[data-vt="b-atras"]::view-transition-new(root), html[data-vt="b-adelante"]::view-transition-old(root) { transform-origin: 0% 50%; }
@media (max-width: 759px) {
  html[data-vt="b-atras"]::view-transition-old(root), html[data-vt="b-adelante"]::view-transition-new(root) { transform-origin: 50% 100%; }
  html[data-vt="b-atras"]::view-transition-new(root), html[data-vt="b-adelante"]::view-transition-old(root) { transform-origin: 50% 0%; }
}