/* =========================================================
   CASE STUDIES
   Mismo sistema que la home (tokens de base.css): Alte Haas
   Grotesk, dos pesos, body 20px. Aquí sólo se añade lo que
   la home no tiene: escala editorial, índice lateral,
   carruseles, bloques de proceso y salto al siguiente.
   ========================================================= */

:root {
  /* --- Escala editorial ---
     La jerarquía la sigue haciendo el tamaño, no el peso. */
  --t-case:  clamp(2.6rem, 6.4vw, 5.2rem);      /* título del proyecto */
  --t-h2:    clamp(1.6rem, 3.1vw, 2.35rem);     /* secciones */
  --t-h3:    clamp(1.25rem, 2.08vw, 1.576rem);  /* = --t-about */
  --t-lede:  clamp(1.4rem, 2.6vw, 2rem);        /* frase del hero */

  /* Superficies de la interfaz del índice. No son color de marca:
     son grises sobre el fondo, por eso van en alfa y no en hex. */
  --sheet:      rgba(0, 0, 0, 0.045);
  --sheet-on:   rgba(0, 0, 0, 0.075);
  --hairline:   rgba(0, 0, 0, 0.09);

  --measure: 62ch;   /* ancho de lectura: párrafos cortos, columna estrecha */
}

/* =========================================================
   LAYOUT EDITORIAL
   ========================================================= */
.case { padding-bottom: var(--space-8); }

/* Sitio para el índice.
   Se ensancha el margen del case study, y **simétricamente**: `.bleed`
   calcula su salida con `50% - 50vw`, que sólo da 0 si el contenedor
   está centrado en el viewport. Con padding asimétrico las imágenes a
   sangre se descolocarían. */
@media (min-width: 1101px) {
  .case { --pad: clamp(84px, 8vw, 132px); }
}

.case__section {
  padding-block: clamp(var(--space-6), 12vh, var(--space-8));
  scroll-margin-top: 120px;   /* para que el índice no deje el título debajo de la nav */
}

/* Columna de lectura: el texto nunca cruza toda la pantalla */
.prose {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.55;
}
.prose + .prose { margin-top: var(--space-3); }
.prose--lead { font-size: var(--t-h3); line-height: 1.45; }

/* Texto desplazado a la derecha: rompe la lectura en bloque y da
   aire, como en las referencias editoriales */
.offset { margin-left: auto; margin-right: 0; }
@media (max-width: 900px) { .offset { margin-left: 0; } }

/* Numeración de sección: la etiqueta va arriba, el título debajo */
.case__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.case__num {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  color: var(--fg-mute);
  flex: none;
}
.case__title {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.case__sub {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
}

/* =========================================================
   HERO DEL PROYECTO
   ========================================================= */
.chero { padding-top: clamp(120px, 22vh, 220px); }

.chero__kicker {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--fg-mute);
  margin-bottom: var(--space-3);
}
.chero__name {
  font-size: var(--t-case);
  font-weight: var(--w-bold);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.chero__lede {
  font-size: var(--t-lede);
  line-height: 1.28;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-top: var(--space-4);
}

/* Metadata: filas con hairline, no cards */
.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.meta__k {
  display: block;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.meta__v { font-size: var(--t-body); line-height: 1.4; }

/* =========================================================
   IMÁGENES
   Los huecos son visibles a propósito: dicen qué falta poner.
   Al sustituirlos por <img>, la clase .shot se queda igual.
   ========================================================= */
.shot { margin-block: var(--space-5); }
.shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.shot__cap {
  margin-top: var(--space-2);
  font-size: var(--t-label);
  color: var(--fg-mute);
  max-width: var(--measure);
}

/* Hueco pendiente de imagen real */
.hole {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ar, 16 / 9);
  border-radius: var(--radius);
  background: var(--sheet);
  border: 1px dashed var(--hairline);
  padding: var(--space-3);
  text-align: center;
}
.hole span {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Ancho completo, saliéndose del padding del contenedor */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--inset);
}
.bleed .hole, .bleed img { border-radius: var(--radius); }

/* Rejillas asimétricas: la gracia es que las piezas no midan igual */
.duo, .trio {
  display: grid;
  gap: var(--gutter);
  margin-block: var(--space-5);
}
.duo  { grid-template-columns: 1.4fr 1fr; align-items: end; }
.trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .duo, .trio { grid-template-columns: 1fr; }
}

/* =========================================================
   ENTRADA DE IMÁGENES AL ENTRAR EN VIEWPORT
   Valores del contexto: translateY(80px) scale(.96) → 0 / 1
   ========================================================= */
.rise {
  opacity: 0;
  transform: translateY(80px) scale(0.96);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.rise.is-in { opacity: 1; transform: none; }
/* En una fila, las piezas entran una detrás de otra */
.rise[data-delay="1"] { transition-delay: 90ms; }
.rise[data-delay="2"] { transition-delay: 180ms; }

/* =========================================================
   BLOQUES DE PROCESO
   Los diagramas del contexto (Audit ↓ Foundations ↓ …) como
   lista, no como imagen: así se leen y se traducen solos.
   ========================================================= */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block: var(--space-5);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  letter-spacing: -0.015em;
}
.flow li { display: flex; align-items: center; gap: var(--space-3); }
.flow li:not(:last-child)::after {
  content: "";
  width: 34px; height: 1px;
  background: var(--fg-mute);
  flex: none;
}
@media (max-width: 640px) {
  .flow { flex-direction: column; align-items: flex-start; }
  .flow li:not(:last-child)::after { width: 1px; height: 20px; }
  .flow li { flex-direction: column; align-items: flex-start; }
}

/* Insights / claves: numerados, sin card */
.keys {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.keys li { border-top: 1px solid var(--hairline); padding-top: var(--space-2); }
.keys b {
  display: block;
  font-size: var(--t-label);
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.keys p { font-size: var(--t-body); line-height: 1.45; }

/* Cita / titular suelto: el momento en que sube el volumen */
.pull {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin-block: var(--space-6);
}

/* Antes / después */
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  margin-block: var(--space-5);
}
.ba > div { border-top: 1px solid var(--hairline); padding-top: var(--space-2); }
.ba h4 {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-2);
}
.ba p { font-size: var(--t-body); line-height: 1.5; }
@media (max-width: 640px) { .ba { grid-template-columns: 1fr; } }

/* Marcador de contenido que falta por aportar */
.todo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dot);
  font-size: 0.8em;
  font-weight: var(--w-bold);
  color: var(--fg-strong);
}

/* =========================================================
   CARRUSEL
   Scroll nativo (swipe en táctil) + arrastre y flechas en
   escritorio. La siguiente pieza asoma para que se note que
   hay más.
   ========================================================= */
.car { margin-block: var(--space-5); }
.car__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.car__lab {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.car__nav { display: flex; gap: var(--space-1); }
.car__btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sheet);
  color: var(--fg-strong);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.car__btn:active { transform: scale(0.94); }
.car__btn[disabled] { opacity: 0.3; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .car__btn:hover { background: var(--sheet-on); }
}
.car__btn svg { width: 18px; height: 18px; }

.car__track {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Se sale del padding para que la primera pieza case con el margen
     y la última pueda respirar al final */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--pad);
  scroll-padding-inline: var(--pad);
}
.car__track::-webkit-scrollbar { display: none; }
.car__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.car__track.is-dragging * { pointer-events: none; }

.car__item {
  flex: 0 0 auto;
  width: clamp(240px, 46vw, 620px);
  scroll-snap-align: start;
}
.car__item .hole, .car__item img { border-radius: var(--radius); }
.car__cap {
  margin-top: var(--space-2);
  font-size: var(--t-label);
  color: var(--fg-mute);
}

/* =========================================================
   ÍNDICE LATERAL
   Comportamiento de la barra lateral de ChatGPT web: en reposo
   es sólo una pila de líneas horizontales, una por sección. Al
   pasar el cursor se despliega el índice con los nombres.
   La línea de la sección en la que estás es más larga y oscura,
   así que en reposo ya se sabe por dónde vas. Sin números.
   ========================================================= */
.dex {
  position: fixed;
  left: var(--inset);
  top: 50%;
  transform: translateY(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 18px;
  /* En reposo no hay panel: sólo las líneas sobre el fondo */
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

/* El panel aparece al pasar el cursor. `focus-within` lo abre
   también con el tabulador: sin eso, con teclado se navegaría a
   ciegas sobre unas líneas sin nombre. */
.dex:hover,
.dex:focus-within {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-color: var(--hairline);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
}

.dex__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 26px;
  padding-inline: 6px;
  border-radius: 9px;
  color: var(--fg);
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dex__link:hover { background: var(--sheet); }
}

/* La línea: es lo único que se ve en reposo */
.dex__bar {
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg-mute);
  opacity: 0.45;
  transition: width var(--dur-med) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.dex__link.is-here .dex__bar {
  width: 34px;
  opacity: 1;
  background: var(--fg-strong);
}

/* El nombre sólo existe con el índice desplegado. Se anima
   `max-width` porque `width: auto` no es animable. */
.dex__t {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0;
  transition: max-width var(--dur-slow) var(--ease-drawer),
              opacity var(--dur-fast) var(--ease-out);
}
.dex:hover .dex__t,
.dex:focus-within .dex__t { max-width: 200px; opacity: 1; }

.dex__link.is-here .dex__t { font-weight: var(--w-bold); }

/* En pantallas estrechas no cabe al lado del contenido */
@media (max-width: 1100px) { .dex { display: none; } }

/* =========================================================
   SIGUIENTE PROYECTO
   Bloque grande, no un enlace de texto. La imagen aparece al
   pasar por encima, como en la lista de la home.
   ========================================================= */
.next {
  position: relative;
  margin: var(--inset);
  border-radius: var(--radius);
  overflow: hidden;
  padding-block: clamp(var(--space-6), 18vh, var(--space-8));
  isolation: isolate;
}
.next__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.next__shot img, .next__shot .hole {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: 0;
}
.next__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
}
.next.is-on .next__shot { opacity: 1; }

.next__in { position: relative; z-index: 1; }
.next__lab {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--space-3);
  transition: color var(--dur-med) var(--ease-out);
}
.next__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  font-size: var(--t-work);
  font-weight: var(--w-bold);
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: color var(--dur-med) var(--ease-out);
}
.next__tag {
  font-size: var(--t-h3);
  color: var(--fg-mute);
  transition: color var(--dur-med) var(--ease-out);
}
.next.is-on .next__lab,
.next.is-on .next__name,
.next.is-on .next__tag { color: #fff; }
.next__link:active { transform: scale(0.995); }

/* =========================================================
   VUELTA AL TRABAJO
   ========================================================= */
.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  color: var(--fg);
}
@media (hover: hover) and (pointer: fine) {
  .back:hover span:last-child { text-decoration: underline; }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  .car__track { scroll-behavior: auto; }
  .dex { transition: none; }
}