/* Página de un caso (prototipo r11). Usa los tokens de estilos.css. */
body.caso { min-height: 100svh; }
.caso-cab { position: relative; min-height: 100svh; }

/* foto principal: queda donde la dejó la lista (caso-geo.js escribe --hx, --hy, --hw, --hh) */
.caso-hero {
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  width: var(--hw);
  height: var(--hh);
  margin: 0;
  overflow: hidden;
}
/* el logo del cliente sobre el panel oscuro: es la tarjeta de Clientes que creció, así que repite su construcción */
.caso-hero { background: linear-gradient(180deg, #1C1A18 0%, #191715 100%); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .07); }
.caso-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;
}
.js .caso-cab:not(.lista):not(.llego):not(.abre) .caso-hero { clip-path: inset(0 0 100% 0); }
.js .caso-cab.abre .caso-hero { clip-path: inset(0 0 0 0); transition: clip-path 1400ms cubic-bezier(0.76, 0, 0.24, 1); }

/* título y datos: abajo a la izquierda */
.caso-texto {
  position: absolute;
  left: var(--borde);
  bottom: calc(var(--alto-barra) + 24px);
  width: calc(var(--hx) - var(--borde) - var(--grupo));
  display: flex;
  flex-direction: column;
  gap: var(--grupo);
}
.caso-titulo {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.caso-titulo .l { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.caso-titulo .l > span { display: block; }
.caso-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--par);
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--arena);
}
.caso-meta dt { display: none; }
.caso-meta dd { margin: 0; }

.js .caso-cab:not(.lista) .caso-titulo .l > span { transform: translateY(105%); }
.js .caso-cab.sube .caso-titulo .l > span { transform: none; transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 140ms); }
.js .caso-cab:not(.lista) .caso-meta { opacity: 0; transform: translateY(16px); }
.js .caso-cab.sube .caso-meta { opacity: 1; transform: none; transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) 450ms, transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 450ms; }

@media (max-width: 759px) {
  .caso-texto { top: calc(var(--hy) + var(--hh) + var(--grupo)); bottom: auto; width: auto; right: var(--borde); }
  .caso-titulo { font-size: clamp(2.4rem, 12vw, 3.4rem); }
}

/* ───────── Texto del caso, módulos, galería y cierre ───────── */
:root { --pesada: cubic-bezier(0.76, 0, 0.24, 1); --asienta: cubic-bezier(0.16, 1, 0.3, 1); }

.caso-info {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  padding: var(--seccion) var(--borde) 0;
}
.caso-parrafo {
  grid-column: 5 / 13;
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: rgba(244, 239, 230, .94);
}
.caso-parrafo .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.caso-parrafo .ln > span { display: block; }
.anima .caso-parrafo .ln > span { transform: translateY(108%); }
.anima .caso-parrafo.visible .ln > span { transform: none; transition: transform 1100ms var(--asienta); transition-delay: calc(var(--i) * 90ms); }

.caso-modulos { grid-column: 5 / 13; margin-top: var(--bloque); }
.modulos { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: modulo; }
.modulos li {
  position: relative;
  display: grid;
  grid-template-columns: clamp(44px, 6vw, 84px) 1fr;
  align-items: baseline;
  padding: 22px 0 24px;
  transition: opacity var(--dur-lento) var(--curva);
}
/* la línea de cada fila se traza de izquierda a derecha; la última cierra la lista */
.modulos li::before, .modulos li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea);
  transform-origin: left; transition: background var(--dur-lento) var(--curva);
}
.modulos li:last-child::after { top: auto; bottom: 0; }
.modulos__n { font-family: Manrope, system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 14px; letter-spacing: .02em; color: var(--arena-oscura); transition: color var(--dur-lento) var(--curva); }
.modulos__t { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.modulos__t > span {
  display: block; font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 1.9rem); line-height: 1.15; letter-spacing: -.025em; color: var(--crema);
  transition: transform 700ms var(--asienta), color var(--dur-lento) var(--curva);
}
.modulos li:last-child .modulos__t > span, .modulos li:last-child .modulos__n { color: var(--ambar-claro); }
/* al recorrer la lista, la fila bajo el cursor sube de tono y se corre; el resto baja */
@media (hover: hover) {
  .modulos:hover li { opacity: .42; }
  .modulos:hover li:hover { opacity: 1; }
  .modulos li:hover .modulos__t > span { transform: translateX(14px); }
  .modulos li:hover::before { background: rgba(244, 239, 230, .34); }
  .modulos li:hover .modulos__n { color: var(--crema); }
}
.anima .modulos li::before, .anima .modulos li:last-child::after { transform: scaleX(0); }
.anima .modulos .modulos__t > span { transform: translateY(108%); }
.anima .modulos .modulos__n { opacity: 0; }
.anima .modulos.visible li::before, .anima .modulos.visible li:last-child::after { transform: none; transition: transform 1400ms var(--pesada), background var(--dur-lento) var(--curva); transition-delay: calc(var(--i) * 120ms); }
.anima .modulos.visible li:last-child::after { transition-delay: calc(var(--i) * 120ms + 300ms); }
.anima .modulos.visible .modulos__t > span { transform: none; transition: transform 1100ms var(--asienta), color var(--dur-lento) var(--curva); transition-delay: calc(var(--i) * 120ms + 250ms); }
.anima .modulos.visible .modulos__n { opacity: 1; transition: opacity 900ms var(--asienta) calc(var(--i) * 120ms + 350ms), color var(--dur-lento) var(--curva); }
.anima .modulos.visible li:hover .modulos__t > span { transition-delay: 0s; transition: transform 700ms var(--asienta), color var(--dur-lento) var(--curva); }

/* galería numerada */
.caso-grupo { padding: var(--seccion) var(--borde) 0; }
.caso-grupo__titulo {
  display: flex;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  margin-bottom: var(--bloque);
}
.caso-grupo__titulo span { color: var(--arena-oscura); }
.caso-grupo__fotos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--seccion); align-items: start; }
.foto { margin: 0; }
.foto--ancho { grid-column: 2 / 12; }
.foto--izq { grid-column: 1 / 9; }
.foto--der { grid-column: 5 / 13; }
.foto--m-izq { grid-column: 2 / 6; }
.foto--m-der { grid-column: 8 / 12; }
.foto__marco { overflow: hidden; background: var(--carbon); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .07); }
.foto__marco img, .foto__marco video { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto figcaption {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--arena);
}
.foto figcaption span { color: var(--arena-oscura); }
.anima .foto__marco { clip-path: inset(0 0 100% 0); }
.anima .foto__marco img, .anima .foto__marco video { transform: scale(1.16); }
.anima .foto figcaption { opacity: 0; transform: translateY(10px); }
.anima .foto.visible .foto__marco { clip-path: inset(0 0 0 0); transition: clip-path 1500ms var(--pesada); }
.anima .foto.visible .foto__marco img, .anima .foto.visible .foto__marco video { transform: none; transition: transform 2000ms var(--asienta); }
.anima .foto.visible figcaption { opacity: 1; transform: none; transition: opacity 900ms var(--asienta) 800ms, transform 900ms var(--asienta) 800ms; }

/* cierre: siguiente caso */
.caso-cierre {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: var(--grupo);
  min-height: 100svh;
  padding: var(--seccion) var(--borde) calc(var(--alto-barra) + var(--grupo));
}
.sigue { display: block; text-decoration: none; color: var(--crema); }
.sigue__etiqueta {
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--arena);
}
.sigue__etiqueta > span, .sigue__nombre .l > span { display: block; }
.sigue__nombre {
  display: block;
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.sigue__nombre .l { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.caso-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: var(--grupo) 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.caso-enlaces a { color: var(--arena); text-decoration: none; transition: color var(--dur-medio) var(--curva); }
.caso-enlaces a:hover, .caso-enlaces a:focus-visible { color: var(--crema); }
.tarj-sig { position: relative; display: block; width: clamp(240px, 30vw, 440px); aspect-ratio: 1.618; overflow: hidden; background: linear-gradient(180deg, #1C1A18 0%, #191715 100%); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .07); transition: transform 700ms var(--asienta); }
.tarj-sig:hover { transform: scale(1.025); }
.tarj-sig .caso-logo { width: 62%; height: 30%; }
.salida-sigue .sigue__etiqueta > span, .salida-sigue .sigue__nombre .l > span { transform: translateY(-110%); transition: transform 1000ms var(--pesada); transition-delay: calc(var(--i, 0) * 90ms); }
.salida-sigue .caso-enlaces { opacity: 0; transition: opacity 500ms var(--asienta); }

/* el viaje de la tarjeta del caso siguiente hasta su cabecera (caso.js) */
.viaje-sig { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.viaje-sig__fondo { position: absolute; inset: 0; background: var(--negro); opacity: 0; }
.viaje-sig__panel { position: absolute; inset: 0; background: linear-gradient(180deg, #1C1A18 0%, #191715 100%); }
.viaje-sig .caso-logo { position: absolute; left: 0; top: 0; transform: none; width: auto; height: auto; }


/* ───────── Detalle de cada foto: tinta con mouse (tinta.js), texto visible sin mouse ───────── */
.foto__detalle { margin: 12px 0 0; max-width: 34em; font-size: .9rem; line-height: 1.5; color: var(--arena); }
.foto__detalle b { font-weight: 600; color: var(--crema); }
@media (hover: hover) and (pointer: fine) {
  .foto__detalle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.tinta {
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  filter: url(#tinta-ruido);
}
.tinta__caja {
  position: relative;
  display: block;
  padding: 22px 24px 24px;
  border-radius: 24px;
  background: rgba(12, 11, 9, .94);
  box-shadow: 0 0 0 1px rgba(244, 239, 230, .1), 0 24px 60px -20px rgba(12, 11, 9, .7);
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r, 0px) - 16px), transparent var(--r, 0px));
  mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r, 0px) - 16px), transparent var(--r, 0px));
  will-change: transform;
}
.tinta__titulo {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--arena);
}
.tinta__texto { display: block; font-weight: 500; font-size: 1.12rem; line-height: 1.38; letter-spacing: -.01em; color: var(--crema); }

/* cursor (cursor.js): al encastrarse en la celda ámbar, la celda de la página queda hueca y el nombre se corre */
.celda.con-cursor { opacity: 0; }
.sigue__nombre { transition: transform 700ms var(--asienta); }
.sigue.activo .sigue__nombre { transform: translateX(8px); }

/* ───────── Visor de la galería (visor.js) ───────── */
.foto__marco[data-cursor="gota"] img { cursor: none; }
dialog.visor {
  touch-action: none;                  /* el visor maneja sus gestos (deslizar, cerrar hacia abajo) */
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--crema); overflow: hidden;
}
dialog.visor:not([open]) { display: none; }
dialog.visor::backdrop { background: transparent; }
.visor__fondo { position: absolute; inset: 0; background: rgba(12, 11, 9, .975); }
.visor__fuera { position: absolute; inset: 0; }
.visor__escena { position: absolute; inset: 72px 6vw 120px; display: grid; place-items: center; pointer-events: none; }
.visor__capa { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.visor__capa img, .visor__capa video { display: block; max-width: 100%; pointer-events: auto; user-select: none; -webkit-user-drag: none; touch-action: none; box-shadow: 0 0 0 1px rgba(244, 239, 230, .08), 0 40px 100px -40px rgba(0, 0, 0, .8); }
.visor__borde { position: absolute; top: 72px; bottom: 120px; width: 18vw; }
.visor__borde--izq { left: 0; }
.visor__borde--der { right: 0; }
.visor__cab, .visor__pie { position: absolute; left: var(--borde); right: var(--borde); display: flex; gap: 24px; }
.visor__cab { top: 22px; justify-content: space-between; align-items: center; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--arena); }
.visor__botones { display: flex; gap: 28px; }
.visor__pie > *, .visor__cuenta { transition: opacity var(--dur-lento) var(--curva); }
.visor.zoom .visor__pie > *, .visor.zoom .visor__cuenta { opacity: 0; }
.visor__btn { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--arena); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.visor__btn:hover, .visor__btn:focus-visible { color: var(--crema); }
.visor__pie { bottom: 28px; align-items: baseline; flex-wrap: wrap; }
.visor__num { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--arena-oscura); }
.visor__titulo { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crema); }
.visor__texto { flex: 1 1 320px; max-width: 46em; font-weight: 500; font-size: .95rem; line-height: 1.45; color: var(--arena); }
.visor__tira {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 14px var(--borde) 18px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(to top, rgba(12, 11, 9, .96) 40%, rgba(12, 11, 9, 0));
  transform: translateY(100%); transition: transform var(--dur-lento) var(--curva);
}
.visor__tira::-webkit-scrollbar { display: none; }
.visor__tira.visible { transform: none; }
.visor__mini { position: relative; flex: none; width: 96px; height: 64px; padding: 0; overflow: hidden; background: var(--carbon); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .12); opacity: .55; transition: opacity var(--dur-medio) var(--curva); }
.visor__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor__mini span { position: absolute; left: 6px; bottom: 4px; font: 500 10px var(--mono); letter-spacing: .08em; color: var(--crema); text-shadow: 0 0 6px rgba(12, 11, 9, .9); }
.visor__mini:hover, .visor__mini.activa { opacity: 1; }
.visor__mini.activa { box-shadow: inset 0 0 0 1px var(--ambar-claro); }
.visor__lupa {
  position: fixed; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity var(--dur-rapido) var(--curva);
  background-repeat: no-repeat; background-color: var(--carbon); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7);
}
.visor__lupa.activa { opacity: 1; }
@media (hover: none) { .visor__lupa { display: none; } .visor__borde { display: none; } }
@media (max-width: 759px) { .visor__escena { inset: 64px 12px 150px; } .visor__texto { display: none; } }

/* celular: el cierre se apila (la tarjeta del siguiente caso no cabe al lado del nombre y ensanchaba la página) */
@media (max-width: 759px) {
  .caso-cierre { grid-template-columns: minmax(0, 1fr); row-gap: var(--grupo); align-items: start; min-height: 0; }
  .tarj-sig { width: min(100%, 320px); }
}