/* =========================================================
   CHRONICLE
   Réplica del Figma «Chronicle web v2 · desktop 1441»
   (t2eIeiJfUAvbDIu09BmGj1, frame 880:94217).

   Rejilla: 12 columnas, 45px de margen y 20px de calle sobre
   1440. Columna = (1440 − 90 − 11·20) / 12 = 94,17px.
     · El texto va en las columnas 4–9 (x 388, ancho 665).
     · Las imágenes van de mitad de la 2 a mitad de la 11
       (x 207, ancho 1026): el área 2/12 menos media columna
       por cada lado.
   Todo lo que aquí es px viene medido del Figma.
   ========================================================= */

/* =========================================================
   TOKENS
   Los colores viven aquí y sólo aquí: para el modo oscuro basta
   con redefinirlos en [data-theme="dark"]. Los contenedores de
   imagen llevan cada uno el gris que tiene en el Figma.
   ========================================================= */
.cv2 {
  --bg:    #fcfbf9;
  --fg:    #282724;   /* toda la tipografía */
  --fg-2:  #6a6a62;   /* secundaria: pies de foto, etiquetas de la ficha */
  --fg-strong: var(--fg);

  --font-body: "Aspekta", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Contenedores de imagen (color de relleno del Figma) */
  --c-a:     #f5f5f5;
  --c-b:     #f0f0f0;
  --c-c:     #f1f1f1;
  --c-d:     #f2f2f2;
  --c-e:     #fafafa;
  --c-cream: #faf9ef;
  --c-warm:  #f8f7f5;
  --c-white: #ffffff;
  --c-blue:  #eaf3f6;

  /* Tarjetas del resumen y citas: trazo negro al 5 % por dentro y
     sombra 0 2 27.6 del Figma (blur 13.8 en CSS) al 8 % */
  --card:        #f6f6f6;
  --card-line:   rgba(0, 0, 0, 0.05);
  --card-shadow: 0 2px 13.8px rgba(0, 0, 0, 0.08);
  --badge:       rgba(140, 140, 140, 0.10);
  --line:        rgba(40, 39, 36, 0.10);
  --handle:      #969696;
  --hero-veil:   rgba(172, 172, 172, 0.20);

  --pad: 45px;
  --gut: 20px;
  --gap: 80px;   /* aire entre bloques: es constante en todo el Figma */
}

/* Modo oscuro: se activa con <html data-theme="dark">. Los
   valores son una primera propuesta; las imágenes de los
   dispositivos van sin fondo para que esto funcione. */
[data-theme="dark"] .cv2 {
  --bg:    #161513;
  --fg:    #f3f1ec;
  --fg-2:  #9c9b93;

  --c-a:     #222120;
  --c-b:     #1e1d1b;
  --c-c:     #201f1d;
  --c-d:     #222120;
  --c-e:     #1b1a19;
  --c-cream: #24221c;
  --c-warm:  #242220;
  --c-white: #2a2927;
  --c-blue:  #1c2528;

  --card:        #222120;
  --card-line:   rgba(255, 255, 255, 0.06);
  --card-shadow: 0 2px 13.8px rgba(0, 0, 0, 0.35);
  --badge:       rgba(255, 255, 255, 0.08);
  --line:        rgba(255, 255, 255, 0.10);
  --handle:      #6b6b6b;
  --hero-veil:   rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .cv2 .page { background: var(--bg); }

@media (max-width: 1024px) { .cv2 { --pad: 32px; } }
@media (max-width: 640px)  { .cv2 { --pad: 20px; --gut: 16px; --gap: 56px; } }

/* ---------- Documento ---------- */
.cv2 {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}
.cv2 .page { background: var(--bg); }
/* La selección de texto es la de base.css: el amarillo de la home */
.cv2 ::selection { background: var(--dot); color: var(--fg); }

.cv2 main {
  padding-top: 102px;     /* el hero empieza en y=102 */
  padding-bottom: 250px;  /* lo que queda tras el último párrafo */
}
@media (max-width: 640px) { .cv2 main { padding-top: 88px; padding-bottom: 120px; } }

/* =========================================================
   REJILLA
   ========================================================= */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding-inline: var(--pad);
}
.row + .row { margin-top: var(--gap); }

/* Texto: columnas 4 a 9 */
.t { grid-column: 4 / 10; }

/* Imagen: de mitad de la 2 a mitad de la 11. El área 2/12 mide
   10 columnas + 9 calles; media columna es (100% − 9·calle) / 20.
   El porcentaje del padding se resuelve contra el área del grid. */
.m {
  grid-column: 2 / 12;
  padding-inline: calc((100% - 9 * var(--gut)) / 20);
}
@media (max-width: 1100px) {
  .t { grid-column: 3 / 11; }
  .m { grid-column: 1 / -1; padding-inline: 0; }
}
@media (max-width: 720px) {
  .t { grid-column: 1 / -1; }
}

/* =========================================================
   TIPOGRAFÍA
   Alte Haas Grotesk Bold para los títulos, Aspekta para el resto.
   ========================================================= */
.cv2 h1, .cv2 h2, .cv2 h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.cv2 h1, .cv2 h2 { font-size: 36px; }
.cv2 h3 { font-size: 24px; }

.cv2 p { color: var(--fg); }
.cv2 p + p { margin-top: 1.6em; }   /* una línea en blanco del Figma */
.cv2 strong { font-weight: 700; }

/* Etiqueta de sección: FOUNDATIONS, RESULTADO… */
.kick {
  font-size: 15px;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Bloque de texto: etiqueta, título y párrafos */
.t > .kick + h2 { margin-top: 24px; }
.t > h2 + p, .t > h2 + .copy { margin-top: 24px; }
.t > h3 + p, .t > h3 + .copy { margin-top: 16px; }
.t--tight > h2 + p, .t--tight > h2 + .copy { margin-top: 16px; }

@media (max-width: 720px) {
  .cv2 h1, .cv2 h2 { font-size: 30px; }
  .cv2 h3 { font-size: 22px; }
  .cv2 { font-size: 16px; }
}

/* Pastilla: Product Designer, Antes, Después, Chronicle en el
   producto… Aspekta 14/18 sobre gris al 10 %. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 22px;
  background: var(--badge);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.0015em;
  white-space: nowrap;
  color: var(--fg);
}

/* =========================================================
   PORTADA
   ========================================================= */
.cover {
  position: relative;
  aspect-ratio: 1026 / 487;   /* 487 de alto sobre el ancho de imagen del Figma */
  border-radius: 39px;
  overflow: hidden;
  background: var(--c-white);
}
/* El render va centrado, más alto que el contenedor y ligeramente
   subido, como en el Figma; conserva su proporción. */
.cover img {
  position: absolute;
  top: -14%;
  left: 50%;
  height: 128%;
  width: auto;
  max-width: none;
  translate: -50% 0;
}
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-veil);
  pointer-events: none;
}

/* Portada a sangre: el render exportado ya trae su fondo, sin velo */
.cover--fill img {
  inset: 0;
  left: 0; top: 0;
  width: 100%; height: 100%;
  translate: none;
  object-fit: cover;
}
.cover--fill::after { display: none; }

/* Ficha · herramientas (Figma 1364:92083): azulejos de 44 con esquinas
   de 12,4, solapados 13,75 y cada uno con un giro distinto (el del
   Figma es antihorario, de ahí el signo). El trazo y la sombra vienen
   en el propio PNG, exportado con margen: la imagen es más grande que
   el azulejo y se centra con márgenes negativos. Sin logo, azulejo gris. */
.tools { display: flex; }
.tools > * {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 12.4px;
  background: #cac9c9;
  flex: none;
}
.tools > * + * { margin-left: -13.75px; }
.tools > *:nth-child(2) { transform: rotate(-4deg); }
.tools > *:nth-child(3) { transform: rotate(6deg); }
.tools > *:nth-child(4) { transform: rotate(-2deg); }
.tools > *:has(img) { background: none; }
.tools img {
  position: absolute;
  /* el azulejo mide 138 de los 218 px de la imagen (40 de margen) */
  width: 69.5px; height: 69.5px;
  left: -12.75px; top: -12.75px;
  max-width: none;
}

.hero-title { --gap: 57px; }
.intro { --gap: 28px; }

/* Entradilla en las columnas 4–7 y ficha en las 8–9 */
.intro__lede { grid-column: 4 / 8; }
.intro__meta { grid-column: 8 / 10; }

@media (max-width: 1100px) {
  .intro__lede { grid-column: 3 / 8; }
  .intro__meta { grid-column: 8 / 11; }
}
@media (max-width: 720px) {
  .intro__lede { grid-column: 1 / -1; }
  .intro__meta { grid-column: 1 / -1; margin-top: 40px; }
}

.meta { margin: 0; padding-top: 5px; }
.meta dt {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.meta dd { margin: 11px 0 0; }
.meta dd + dt { margin-top: 20px; }
.meta .avatars { margin-top: 8px; }
.meta .avatars + dt { margin-top: 31px; }
.meta .badge + .badge { margin-top: 16px; }
.meta .badges { display: flex; flex-direction: column; align-items: flex-start; }

.avatars { display: flex; }
.avatars img {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3.5px solid var(--bg);
  box-sizing: content-box;
  margin: -3.5px;
}
.avatars img + img { margin-left: -14px; }

/* =========================================================
   TARJETAS · Problemas / Decisiones / Resultados
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 427px;
  padding: 36px;
  border-radius: 32px;
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
}
.card__icon { width: 56px; height: 56px; }
.card__icon img { width: 100%; height: 100%; object-fit: contain; }
.card h2 { font-size: 32px; }
.card p { margin-top: 12px; }

@media (max-width: 1100px) { .card { min-height: 0; padding: 28px; } .card h2 { font-size: 28px; } }
@media (max-width: 720px)  { .cards { grid-template-columns: 1fr; } }

/* =========================================================
   SEPARADOR con pastilla centrada
   La línea va de margen a margen (45 → 1395). La pastilla lleva
   un aro del color del fondo que corta la línea.
   ========================================================= */
.divider {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  place-items: center;
  height: 34px;
}
.divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line);
}
.divider .badge {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 6px var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =========================================================
   CONTENEDORES DE IMAGEN
   Cada .box lleva su gris (--c) y su radio (--r). Las imágenes
   van exportadas sin fondo y a la medida exacta del contenedor,
   así que sólo hay que dejarlas ocupar el ancho.
   ========================================================= */
.box {
  --c: var(--c-a);
  --r: 32px;
  position: relative;
  border-radius: var(--r);
  background: var(--c);
  overflow: hidden;
}
.box > img { width: 100%; height: auto; }

.box--b     { --c: var(--c-b); }
.box--c     { --c: var(--c-c); }
.box--d     { --c: var(--c-d); }
.box--e     { --c: var(--c-e); }
.box--cream { --c: var(--c-cream); }
.box--warm  { --c: var(--c-warm); }
.box--white { --c: var(--c-white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.box--blue  { --c: var(--c-blue); }

.box--r23 { --r: 23px; }
.box--r24 { --r: 24px; }

/* Antes / Después, arriba a 37px de las esquinas */
.box .tag { position: absolute; top: 37px; left: 37px; }
.box .tag--r { left: auto; right: 37px; }
@media (max-width: 720px) {
  .box .tag { top: 16px; left: 16px; }
  .box .tag--r { right: 16px; }
}

/* Pie de foto: centrado, en las columnas del texto */
.cap {
  grid-column: 4 / 10;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--fg-2);
}
@media (max-width: 1100px) { .cap { grid-column: 3 / 11; } }
@media (max-width: 720px)  { .cap { grid-column: 1 / -1; } }
/* Todos los pies de foto (sueltos, de rejilla o de cita) en #6A6A62 */
.cv2 .cap, .cv2 figcaption, .cv2 cite { color: var(--fg-2); }

/* Dos contenedores a la par (503 + 20 + 503) */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* Uno alto a la izquierda (509) y dos apilados a la derecha (497) */
.two--stack { grid-template-columns: 509fr 497fr; }
.two--stack .stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 19px;
}

/* =========================================================
   COMPARADOR Antes / Después
   Dos capas a ancho completo recortadas con clip-path; entre las
   dos queda un hueco (--gap) y en él el tirador de 4×60 del Figma.
   El corte (--x) lo mueve chronicle.js siguiendo al ratón al pasar
   por encima, sin pulsar y sin transición: el tirador va clavado al
   cursor. Cada capa lleva su color y
   sus cuatro esquinas, así el corte cierra la tarjeta en vez de
   partir la imagen.
   ========================================================= */
.cmp {
  --gap: 16px;
  --r: 23px;
  --x: 50%;
  position: relative;
  aspect-ratio: 1026 / 440;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;   /* el gesto horizontal es nuestro; el vertical, del scroll */
}
.cmp--result { --gap: 20px; --r: 24px; aspect-ratio: 1026 / 563; }
.cmp:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: var(--r); }

.cmp__layer {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: var(--c, var(--c-b));   /* el color lo pone .box--x */
}
.cmp__layer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.cmp__before { clip-path: inset(0 calc(100% - var(--x) + var(--gap) / 2) 0 0 round var(--r)); }
.cmp__after  { clip-path: inset(0 0 0 calc(var(--x) + var(--gap) / 2) round var(--r)); }

.cmp__layer .tag { position: absolute; top: 37px; left: 37px; }
.cmp__layer .tag--r { left: auto; right: 37px; }

.cmp__handle {
  position: absolute;
  top: 50%;
  left: var(--x);
  width: 4px;
  height: 60px;
  translate: -50% -50%;
  border-radius: 16px;
  background: var(--handle);
  pointer-events: none;
}

@media (max-width: 720px) {
  .cmp { --gap: 12px; }
  .cmp__handle { height: 44px; }
  .cmp__layer .tag { top: 16px; left: 16px; }
  .cmp__layer .tag--r { left: auto; right: 16px; }
}
/* Seis componentes en dos columnas, con pie */
.comps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.comps__col { display: flex; flex-direction: column; gap: 28px; }
.comps figure { margin: 0; }
.comps figcaption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--fg-2);
}
@media (max-width: 720px) { .comps { grid-template-columns: 1fr; } }

/* =========================================================
   CIFRAS del resultado
   ========================================================= */
.stats {
  display: flex;
  gap: 16px;
  padding-top: 21px;
  margin-top: 15px;
}
.stats > div { flex: 1 0 0; min-width: 0; }
.stats .n {
  font-size: 37.4px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
}
.stats .l {
  font-size: 15px;
  line-height: 1.6;
  margin: 8px 0 0;
}
@media (max-width: 720px) { .stats .n { font-size: 32px; } }

/* =========================================================
   PIE: anterior / siguiente (Figma 1258:52243)
   Arriba del footer, a 119 del borde: a la izquierda el anterior y
   a la derecha el siguiente. Con el estilo del resto del sitio: la
   etiqueta como los «kick» de los case studies (15px, mayúsculas,
   gris) y el nombre del proyecto como un titular (Alte Haas Bold
   36). El pie común (columnas, firma, made with) va debajo.
   ========================================================= */
.footer--nav {
  justify-content: space-between;
  padding-top: calc(clamp(40px, 7.9vw, 119px) + var(--page-r));
}
.pnav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.pnav__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-fg);
}
.pnav__link--next { text-align: right; align-items: flex-end; }
.pnav__lab {
  font-family: "Aspekta", var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--dur-fast) var(--ease-out);
}
.pnav__name {
  font-size: 36px;
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.pnav__lab [aria-hidden] {
  display: inline-block;
  transition: transform var(--dur-med) var(--ease-out);
}
.pnav__link:hover .pnav__lab { color: var(--ink-fg); }
.pnav__link--prev:hover .pnav__lab [aria-hidden] { transform: translateX(-4px); }
.pnav__link--next:hover .pnav__lab [aria-hidden] { transform: translateX(4px); }
.pnav__link:focus-visible { outline: 2px solid var(--ink-fg); outline-offset: 6px; }

@media (max-width: 720px) { .pnav__name { font-size: 28px; } }
@media (max-width: 640px) {
  .pnav { flex-direction: column; align-items: stretch; gap: 24px; }
  .pnav__link--next { align-items: flex-end; }
  .pnav__name { font-size: 24px; }
}