/* =========================================================
   DOTS.MEMORIES — case study (v2)
   Se apoya en base.css + components.css + case.css.

   Maquetación tomada del Figma "Dots. Memories — v2
   (revisado)" (473:16497): frame de 1512px, dentro un frame
   de 1280px centrado, dividido en 12 columnas con canal de
   24px. El texto arranca en la columna 3.

     columna   = (1280 - 11·24) / 12 = 84,67px
     cols 3-10 = 8·84,67 + 7·24      = 845px
     cols 3-7  = 5·84,67 + 4·24      = 519px  <- columna de lectura
     cols 6-10 = 5·84,67 + 4·24      = 519px  <- citas de insight
     cols 8-10 = 3·84,67 + 2·24      = 302px  <- apoyos a la derecha

   Que son los 847/845, 520/521 y 519 que miden las cajas del
   Figma. Los apoyos (278 y 240) van alineados a la derecha,
   acabando en la columna 10 como en el original.
   ========================================================= */

.dots {
  /* El borde del frame de 1280: hasta que la ventana no da
     para 1280 + márgenes, manda el padding de la página. */
  --edge: max(var(--pad), (100vw - 1280px) / 2);

  /* --- Color propio de la v2 --- */
  --td-mute: #6b6b73;   /* etiquetas y apoyos */
  --td-cap:  #969696;   /* pies de imagen */

  /* --- Escala del Figma sobre 1512px ---
     El máximo de cada clamp es el valor exacto del Figma.
     Este case study escribe a 17px, no a los 20px del resto
     del sitio, así que el cuerpo va aparte. */
  --td-title: clamp(2rem,    3.70vw, 2.8rem);    /* 56px */
  --td-h2:    clamp(1.55rem, 2.65vw, 2rem);      /* 40px */
  --td-pull:  clamp(1.15rem, 1.85vw, 1.4rem);    /* 28px */
  --td-stat:  clamp(1.8rem,  3.17vw, 2.4rem);    /* 48px */
  --td-lead:  clamp(0.8rem,  1.12vw, 0.85rem);   /* 17px */
  --td-list:  clamp(0.72rem, 0.99vw, 0.75rem);   /* 15px */
  --td-note:  clamp(0.68rem, 0.93vw, 0.7rem);    /* 14px */
  --td-kick:  clamp(0.62rem, 0.86vw, 0.65rem);   /* 13px */
  --td-ins:   clamp(0.78rem, 1.12vw, 0.85rem);   /* 17px */

  padding-bottom: var(--space-6);
}

/* El case study no usa el .container de base: necesita tope
   de 1280px para que la rejilla mida lo que mide en el Figma. */
.dots .wrap {
  width: 100%;
  padding-inline: var(--edge);
}

/* ---------- La rejilla de 12 ---------- */
.g {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: start;
}
/* Por defecto, de la 3 a la 10 */
.g > *          { grid-column: 3 / span 8; }
.g > .col-read  { grid-column: 3 / span 5; }   /* columna de lectura */
.g > .col-quote { grid-column: 6 / span 5; }   /* cita del insight   */
.g > .col-side  { grid-column: 8 / span 3; }   /* apoyo a la derecha */
.g > .col-rules { grid-column: 3 / span 3; }   /* lista de reglas    */

/* Anchos de imagen. El ancho dice la jerarquía: a sangre es el
   momento de la sección, 3-10 la pieza principal, 6-10 la que
   ilustra la frase de al lado y 3-5 el detalle suelto. */
.g > .media--half { grid-column: 6 / span 5; }
.g > .media--note { grid-column: 3 / span 3; }

/* Ficha del hero: tres datos de 2 columnas (193px) */
.g > .col-m1 { grid-column: 3 / span 2; }
.g > .col-m2 { grid-column: 5 / span 2; }
.g > .col-m3 { grid-column: 7 / span 2; }
.g > .col-m4 { grid-column: 9 / span 2; }

@media (max-width: 900px) {
  .g > *,
  .g > .col-read, .g > .col-quote, .g > .col-side, .g > .col-rules,
  .g > .media--half, .g > .media--note,
  .g > .col-m1, .g > .col-m2, .g > .col-m3, .g > .col-m4 { grid-column: 1 / -1; }
  .g { row-gap: var(--space-4); }
}

/* ---------- Secciones ----------
   En el Figma las secciones se separan por 120-160px de aire
   vertical. Nada de filetes. */
.dots .sec {
  margin-block: clamp(var(--space-6), 10vw, 152px);
  scroll-margin-top: 110px;
}
/* Dentro de una sección, cada fila respira igual */
.dots .sec .g + .g,
.dots .sec .g + .strip,
.dots .strip + .g { margin-top: clamp(var(--space-4), 5vw, 75px); }

/* ---------- Etiqueta de sección ----------
   13px, negrita, versalita ancha y gris: en la v2 la etiqueta
   ya no compite con el titular, sólo lo anuncia. */
.dots .kick {
  font-size: var(--td-kick);
  font-weight: var(--w-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-mute);
  margin-bottom: 16px;
}

/* ---------- Titular de sección ---------- */
.dots .h2 {
  font-size: var(--td-h2);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  /* 700px en el Figma; el primero es el único a todo el ancho */
  max-width: 700px;
}
.dots .h2--wide { max-width: none; }
.dots .head { margin-bottom: 30px; }

/* ---------- Cuerpo de texto ---------- */
.dots .copy {
  font-size: var(--td-lead);
  line-height: 1.65;
}
.dots .copy + .copy { margin-top: 1.65em; }
.dots .copy b, .dots .copy strong { font-weight: var(--w-bold); }

/* ---------- Hero ---------- */
.dots .dhero { padding-top: clamp(120px, 20vh, 188px); }
.dots .dhero__name {
  font-size: var(--td-title);
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* El resultado, arriba. Sin esto la única cifra de la página
   aparecía pasados nueve mil píxeles de scroll. */
.dots .dhero__win {
  margin-top: 20px;
  max-width: 520px;
  font-size: var(--td-pull);
  font-weight: var(--w-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Ficha: Rol · Ambito · Plataforma · Usuarios */
/* La ficha es una rejilla dentro de otra: si hereda las cols 3-10
   del padre, sus 12 columnas miden 845px y no 1280, y los datos
   dejan de caer en la 3, la 5 y la 7. */
.dots .spec {
  grid-column: 1 / -1;
  margin-top: 56px;
  row-gap: var(--space-3);
}
.dots .spec dt {
  font-size: var(--td-kick);
  font-weight: var(--w-bold);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--td-mute);
}
.dots .spec dd {
  font-size: var(--td-lead);
  line-height: 1.5;
}

/* ---------- Listas con guion ----------
   Tal cual el Figma: "— Generan miles de fotos y vídeos". */
.dots .list {
  font-size: var(--td-list);
  line-height: 1.75;
}
.dots .list li {
  padding-left: 1.15em;
  text-indent: -1.15em;
}

/* ---------- Carril de evidencia (cols 8-10) ----------
   Izquierda el argumento, derecha la prueba. Cada apunte se alinea
   con el párrafo que anota, no con el arranque de la sección: es lo
   único que hace que se lea como nota al margen y no como una
   segunda columna de texto.
   Los 302px dan para unos 40 caracteres: si algo no cabe en cuatro
   líneas no es marginalia, es cuerpo. */
.dots .rail__item + .rail__item { margin-top: 28px; }

/* Hueco pendiente de dato real. Mismo criterio que los .hole del
   resto del sitio: se ve que falta, no se disimula. */
.dots .rail__todo {
  border: 1px dashed rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: var(--td-note);
  line-height: 1.5;
  color: var(--td-mute);
}
.dots .rail__todo b {
  display: block;
  font-weight: var(--w-bold);
  color: var(--fg-strong);
  margin-bottom: 2px;
}

/* ---------- Apoyo a la derecha ---------- */
.dots .side__t {
  font-size: var(--td-kick);
  font-weight: var(--w-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-mute);
  margin-bottom: 12px;
}
.dots .note {
  font-size: var(--td-note);
  line-height: 1.6;
  color: var(--td-mute);
}

/* ---------- Insights ----------
   Etiqueta a la izquierda (cols 3-5) y, a su altura, la frase
   grande con su explicación debajo (cols 6-10). */
.dots .ins__n {
  font-size: var(--td-ins);
  font-weight: var(--w-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-mute);
}
.dots .ins__src {
  margin-top: 12px;
  font-size: var(--td-note);
  line-height: 1.5;
  color: var(--td-mute);
}
.dots .ins__do {
  margin-top: 20px;
  font-size: var(--td-lead);
  line-height: 1.65;
}
.dots .ins__do b {
  display: block;
  font-size: var(--td-kick);
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-mute);
  margin-bottom: 6px;
}

.dots .ins__q {
  font-size: var(--td-pull);
  font-weight: var(--w-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 16px;
}

/* ---------- Frase ancla ----------
   El "Querían el libro. No querían hacer el libro." de la
   sección de diseño: mismo tratamiento que la cita de insight. */
.dots .pull {
  font-size: var(--td-pull);
  font-weight: var(--w-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 30px;
}

/* ---------- Métricas ----------
   El único sitio donde se rompe el margen. Toda la página respeta
   las columnas 3-10; aquí las cifras salen a las doce. No hace falta
   decir "esto es el resultado": se ve.
   Una sola rotura en toda la página. Dos ya serían ruido. */
.dots .stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.dots .stat b {
  display: block;
  font-size: var(--td-stat);
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* El dato que falta no hereda el cuerpo de la cifra: es un aviso, no
   un número, así que se encoge a su contenido en vez de ocupar toda
   la columna como haría un <b> en bloque. */
.dots .stat b.todo {
  display: inline-block;
  font-size: var(--td-list);
  line-height: 1.4;
  letter-spacing: 0;
}
.dots .stat span {
  display: block;
  margin-top: 14px;
  font-size: var(--td-list);
  line-height: 1.6;
  color: var(--td-mute);
}
@media (max-width: 640px) {
  .dots .stats { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* =========================================================
   DIAGRAMA DE FLUJO
   Se llama .dflow y no .flow porque case.css ya usa .flow
   para las listas de proceso.

   Va en horizontal y a sangre, con arrastre lateral si no cabe:
   es el mismo gesto que ya hacen las tiras de pantallas de esta
   misma página, así que el patrón no es nuevo para quien lee.

   El color vive DENTRO de la rama, no en el tronco: la gama que
   se muestra depende del tipo de portada, así que los dos
   caminos no se juntan hasta el tipo de papel.

   Las líneas de conexión no son filetes de separación: son el
   contenido del diagrama. Sin ellas esto es una lista.
   ========================================================= */
.dots .dflow {
  --wire: rgba(0, 0, 0, 0.22);
  --bracket: 22px;
  margin: 0;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.dots .dflow__scroll {
  display: flex;
  align-items: center;
  padding-inline: var(--inset);
  overflow-x: auto;
  overflow-y: hidden;   /* mismo motivo que en las tiras */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.dots .dflow__scroll::-webkit-scrollbar { display: none; }

/* Cada paso */
.dots .dflow__node {
  flex: none;
  font-size: var(--td-kick);
  font-weight: var(--w-bold);
  line-height: 1.3;
  white-space: nowrap;
  padding: 9px 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
}
/* El primero manda: es la entrada al flujo */
.dots .dflow__node--in {
  border-color: var(--fg-strong);
  border-width: 1.5px;
}

/* Cable horizontal */
.dots .dflow__wire {
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--wire);
}
/* El del carril corto estira hasta igualar al largo, para que los
   dos Color queden a la misma altura y el cierre encaje */
.dots .dflow__wire--grow { flex: 1 1 14px; width: auto; }

/* La rama */
.dots .dflow__fork {
  flex: none;
  display: flex;
  flex-direction: column;
}
.dots .dflow__q {
  font-size: var(--td-kick);
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-mute);
  margin-left: var(--bracket);
  margin-bottom: 10px;
}

/* Dos filas exactamente iguales y sin canal: así los centros de
   los carriles caen al 25% y al 75%, que es de donde tienen que
   colgar las patas de la llave. Con canal ya no serían el 25/75 y
   habría que calcularlo cada vez que cambie el espaciado. */
.dots .dflow__lanes {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin-inline: var(--bracket);
}
.dots .dflow__lane {
  display: flex;
  align-items: center;
  padding-block: 12px;
  min-width: 0;
}

/* Apertura y cierre.
   Son una caja a la que se le quita un borde lateral: sin el
   derecho queda "⊏" (se abre hacia los dos carriles) y sin el
   izquierdo queda "⊐" (los recoge). Van en absoluto contra los
   carriles, del 25% al 75%, o sea exactamente de centro a centro. */
.dots .dflow__split,
.dots .dflow__close {
  position: absolute;
  top: 25%;
  bottom: 25%;
  width: var(--bracket);
  border: 1px solid var(--wire);
}
.dots .dflow__split {
  left: calc(var(--bracket) * -1);
  border-right: 0;
  border-radius: 10px 0 0 10px;
}
.dots .dflow__close {
  right: calc(var(--bracket) * -1);
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

/* Tronco compartido: a partir del tipo de papel ya no hay decisión */
.dots .dflow__trunk { display: flex; align-items: center; }
.dots .dflow__trunk li { display: flex; align-items: center; }
.dots .dflow__trunk li:not(:last-child)::after {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--wire);
  flex: none;
}

.dots .dflow figcaption {
  margin-top: 22px;
  padding-inline: var(--edge);
  font-size: var(--td-note);
  line-height: 1.6;
  color: var(--td-mute);
  max-width: 700px;
}

@media (max-width: 640px) {
  .dots .dflow { --bracket: 18px; }
  .dots .dflow__node { padding: 8px 11px; }
  .dots .dflow__wire,
  .dots .dflow__trunk li:not(:last-child)::after { width: 16px; }
}

/* =========================================================
   MEDIA
   Todo bloque de imagen es un .media. Hoy lleva <img> con la
   captura del Figma; para cambiarlo por vídeo basta sustituir
   la etiqueta por <video autoplay muted loop playsinline>:
   las reglas valen para los dos.
   ========================================================= */
.dots .media { margin: 0; }
.dots .media img,
.dots .media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.dots .media figcaption {
  margin-top: 14px;
  font-size: var(--td-kick);
  line-height: 1.65;
  color: var(--td-cap);
  text-align: center;
}

/* A sangre: 1492px sobre un frame de 1512, o sea el ancho de
   la ventana menos los 10px de margen del resto del sitio. */
.dots .media--full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--inset);
}

/* ---------- Tira horizontal ----------
   En el Figma estas filas suman más de lo que mide el frame y
   se salen por la derecha. Eso es un carrusel, no una fila
   cortada, así que aquí se maqueta como tal: arranca en el
   mismo margen que las imágenes a sangre, se desplaza y
   engancha. Sin JS.
   Las piezas no miden todas igual (949 y 380 en una fila, 582
   en la otra), así que lo que se fija es la ALTURA y el ancho
   sale solo: es la única forma de que una fila mixta case. */
.dots .strip {
  display: flex;
  gap: var(--gutter);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--inset);
  /* Sin esto el enganche mide desde el borde de la ventana y
     la tira se auto-desplaza al cargar */
  scroll-padding-inline: var(--inset);
  /* Al declarar overflow-x el navegador convierte también el eje
     vertical en scrollable. Con el translateY(80px) de la entrada
     sobran unos píxeles de alto, aparece un scroll vertical de 60px
     dentro de la tira y el gesto se queda atrapado ahí en vez de
     mover la página. Cerrando el eje Y sólo queda el horizontal. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  align-items: start;
}
.dots .strip::-webkit-scrollbar { display: none; }
/* Dentro de una tira, la entrada es sólo fundido: un desplazamiento
   vertical dentro de un carrusel horizontal ni pega ni hace falta, y
   además es lo único que generaba alto de sobra en el contenedor. */
.dots .strip .rise,
.dots .strip .rise.is-in { transform: none; }

.dots .strip .media {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.dots .strip .media figcaption {
  text-align: left;
  max-width: 100%;
}
/* La altura va en la imagen y no en el <figure>: si se la pones al
   contenedor, la imagen al 100% se come el hueco y el pie desaparece.
   676px sobre 1512 = 44,7vw · 545px = 36,1vw */
.dots .strip .media img,
.dots .strip .media video {
  width: auto;
  max-width: none;
}
.dots .strip--tall .media img,
.dots .strip--tall .media video { height: clamp(300px, 44.7vw, 676px); }
.dots .strip--wide .media img,
.dots .strip--wide .media video { height: clamp(280px, 36.1vw, 545px); }

/* En pantalla estrecha la altura deja de mandar: una pieza de 949px
   escalada por altura se va del ancho de la ventana y hay que
   arrastrar media pantalla para verla. Aquí cada pieza ocupa una
   fracción del ancho y la altura sale de su proporción. */
@media (max-width: 700px) {
  .dots .strip--tall .media,
  .dots .strip--wide .media { width: min(80vw, 400px); }
  .dots .strip .media img,
  .dots .strip .media video { width: 100%; height: auto; }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .dots .strip { scroll-behavior: auto; }
}