/* ==========================================================================
   04 · PROYECTOS — composición editorial con cambios de escala
   ========================================================================== */
.projects { padding: var(--space-6) var(--gutter-r) var(--space-6) var(--gutter); }
.projects__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.projects__head .kicker { grid-column: 1 / -1; }
.projects__title { font-size: clamp(2.6rem, 1rem + 6vw, 8rem); font-weight: 800; letter-spacing: var(--track-display); line-height: 0.9; max-width: 14ch; }
.projects__title em { color: var(--blue); }
.projects__count { font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }

.projects__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: clamp(4rem, 10vw, 9rem);
  align-items: start;
}
.project { display: grid; gap: 1.25rem; min-width: 0; }
.project__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--mist);
  cursor: pointer;
}
.project__media img { width: 100%; height: auto; transition: transform 1.1s var(--ease-out); }
.project__media:hover img, .project__media:focus-visible img { transform: scale(1.035); }
.project__media:hover .project__cue, .project__media:focus-visible .project__media:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.project__meta { display: grid; gap: 0.55rem; align-content: start; }
.project__index { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.project__badge { color: var(--on-blue); background: var(--ink); padding: 0.1em 0.6em; border-radius: 3px; }
.project__client { color: var(--blue-ui); }
.project__name { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
.project__type { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.65rem); line-height: 1.1; }
.project__goal { color: var(--ink-2); max-width: 48ch; font-size: 0.98rem; }

/* Composiciones */
.project--feature { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: inherit; align-items: end; }
.project--feature .project__media { grid-column: 1 / 7; }
.project--feature .project__meta { grid-column: 8 / 12; padding-bottom: 2rem; }
.project--feature-r { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: inherit; align-items: center; }
.project--feature-r .project__media { grid-column: 5 / 13; grid-row: 1; }
.project--feature-r .project__meta { grid-column: 1 / 5; grid-row: 1; }
.project--band {
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: inherit;
  align-items: center;
  margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1);
  padding: clamp(3rem, 8vw, 7rem) var(--gutter-r) clamp(3rem, 8vw, 7rem) var(--gutter);
  background: var(--ink);
  color: var(--paper);
}
.project--band .project__media { grid-column: 2 / 6; background: #000; }
.project--band .project__meta { grid-column: 7 / 12; }
.project--band .project__name { font-size: clamp(3rem, 1rem + 7vw, 9rem); }
.project--band .project__goal { color: #C9CED6; }
.project--band .project__index { color: var(--chrome); }
.project--band .project__badge { background: var(--blue); }
.project--band .project--half { grid-column: 1 / 7; }
.project--half-offset { grid-column: 7 / 13; margin-top: clamp(4rem, 16vw, 16rem); }
.project--third { grid-column: span 4; }
.project--third-offset { grid-column: span 4; margin-top: clamp(3rem, 10vw, 10rem); }

@media (max-width: 899px) {
  .project--feature .project__media, .project--feature-r .project__media,
  .project--feature .project__meta, .project--feature-r .project__meta { grid-column: 1 / -1; grid-row: auto; padding: 0; }
  .project--band .project__media { grid-column: 2 / 12; }
  .project--band .project__meta { grid-column: 1 / -1; margin-top: 2rem; }
  .project--half, .project--half-offset { grid-column: 1 / -1; margin-top: 0; }
  .project--third, .project--third-offset { grid-column: span 6; margin-top: 0; }
}
@media (max-width: 599px) {
  .project--third, .project--third-offset { grid-column: 1 / -1; }
  .projects__head { grid-template-columns: 1fr; }
}

.projects__more { margin-top: var(--space-6); font-size: var(--fs-lede); }
.projects__more a { color: var(--blue-ui); border-bottom: 2px solid currentColor; }

/* ---------- Ficha (dialog) ---------- */
.case {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--paper); color: var(--ink);
}
.case::backdrop { background: rgb(27 45 102 / 0.6); }
.case[open] { animation: case-in 0.5s var(--ease-out); }
@keyframes case-in { from { opacity: 0; transform: translateY(24px); } }
.case__inner {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: calc(env(safe-area-inset-top, 0px) + 5rem) var(--gutter-r) calc(env(safe-area-inset-bottom, 0px) + 2rem) var(--gutter);
  align-items: center;
}
.case__close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 1.25rem); right: var(--gutter-r);
  min-height: 44px; padding: 0 1.2em; border-radius: 999px; border: 2px solid var(--ink);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
}
.case__media img { width: 100%; height: auto; }
.case__meta { display: grid; gap: 1.25rem; align-content: center; }
.case__index { font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue-ui); }
.case__title { font-size: clamp(2.4rem, 1rem + 4vw, 5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.92; }
.case__facts { display: grid; gap: 1rem; }
.case__facts div { border-top: 1px solid var(--rule); padding-top: 0.75rem; display: grid; gap: 0.25rem; }
.case__facts dt { font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.case__facts dd { font-size: 1.02rem; }
.case__nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.case__nav button { min-height: 44px; padding: 0 1.1em; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--fs-small); font-weight: 600; }
.case__nav button:hover { background: var(--blue); }
@media (max-width: 899px) {
  .case__inner { grid-template-columns: 1fr; align-items: start; }
}

/* Llamada a la página con todos los proyectos */
.projects__cta { display: flex; justify-content: center; margin-top: clamp(4rem, 9vw, 8rem); }
.pill--ink {
  min-height: 60px;
  padding-inline: 2.2em;
  background: var(--ink);
  color: #fff;
  font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1.1rem);
  font-weight: 700;
}
.pill--ink span { transition: transform 0.4s var(--ease-out); }
.pill--ink:hover { background: var(--blue); }
.pill--ink:hover span { transform: translateX(4px); }

/* Página «Archivo de proyectos» */
.projects--all { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(2rem, 6vw, 5rem)); }
.projects__back { color: var(--blue-ui); border-bottom: 1.5px solid currentColor; padding-bottom: 0.1em; }
.projects__back:hover { color: var(--ink); }

/* Portada → Proyectos: corte limpio de azul a blanco */
.projects--home { padding-top: clamp(4rem, 8vw, 7rem); }

/* menos aire entre el titular y el primer proyecto */
.projects__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* Portada: las tres imágenes con el mismo tamaño y proporción (la de Dierema) */
.projects--home .project__media { aspect-ratio: 16 / 9; }
.projects--home .project__media img { height: 100%; object-fit: cover; }
.projects--home .project--feature .project__media { grid-column: 1 / 7; }
.projects--home .project--feature-r .project__media { grid-column: 7 / 13; }
.projects--home .project--feature-r .project__meta { grid-column: 2 / 6; }
@media (max-width: 899px) {
  .projects--home .project--feature .project__media,
  .projects--home .project--feature-r .project__media,
  .projects--home .project--feature-r .project__meta { grid-column: 1 / -1; }
}

/* Flecha del botón «Ver proyecto»: trazo fino, nunca emoji */
.ico-arrow { width: 0.95em; height: 0.95em; flex: none; }

/* Categoría en azul (sustituye a «P/01 · Cliente») */
.project__category { color: var(--blue-ui); }
/* «Ver proyecto»: debajo del texto, no sobre la imagen */
.project__open {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.75rem;
  min-height: 48px;
  padding: 0 1.4em;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: background-color 0.25s ease;
}
.project__open .ico-arrow { transition: transform 0.4s var(--ease-out); }
.project__open:hover, .project__open:focus-visible { background: var(--ink); }
.project__open:hover .ico-arrow { transform: translate(2px, -2px); }
.project--band .project__category { color: var(--halo); }
.project--band .project__open:hover { background: #fff; color: var(--ink); }

/* «Ver más proyectos»: enlace de texto (no botón) con subrayado y flecha */
.projects__cta {
  justify-content: flex-start;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.more-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding-block: 0.4rem;
  color: var(--ink);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgb(21 23 27 / 0.35);
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.more-link span { display: inline-block; font-weight: 400; transition: transform 0.4s var(--ease-out); }
.more-link:hover, .more-link:focus-visible { color: var(--blue-ui); text-decoration-color: currentColor; }
.more-link:hover span { transform: translateX(6px); }

/* Tarjeta: nombre → área (azul) → descripción → botón */
.project__area {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.65rem);
  line-height: 1.1;
  color: var(--blue-ui);
}
.project__area .project__badge { font-family: var(--font-sans); font-style: normal; font-size: 0.7rem; }
.project--band .project__area { color: var(--halo); }

/* «Ver más proyectos»: mayúsculas, peso medio y flecha de línea */
.more-link {
  align-items: center;
  gap: 0.9em;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}
.more-link__arrow { width: 2.4em; height: 0.75em; transition: transform 0.4s var(--ease-out); }
.more-link:hover .more-link__arrow { transform: translateX(6px); }

/* Titular de Proyectos: «Los trabajos que explican / cómo pienso.» en pantallas anchas */
@media (min-width: 1100px) {
  .projects--home .projects__title { max-width: none; font-size: min(clamp(2.6rem, 1rem + 6vw, 8rem), 6.6vw); }
  .projects--home .projects__title > span { display: block; white-space: nowrap; }
}

/* Archivo de proyectos: retícula ordenada, todas las imágenes cuadradas y fondo blanco */
.projects--all { background: var(--paper); }
.projects--all .projects__grid { row-gap: clamp(3rem, 6vw, 5.5rem); }
.project--grid { grid-column: span 4; }
.projects--all .project__media { aspect-ratio: 1 / 1; }
.projects--all .project__media img { height: 100%; object-fit: cover; }
.projects--all .project__name { font-size: clamp(1.7rem, 1rem + 1.6vw, 2.6rem); }
@media (max-width: 899px) { .project--grid { grid-column: span 6; } }
@media (max-width: 599px) { .project--grid { grid-column: 1 / -1; } }

/* ==========================================================================
   Archivo de proyectos: solo imágenes
   Escritorio: tiras verticales, 7 a la vista; la que tiene el ratón se ensancha.
   Móvil: imágenes horizontales una debajo de otra.
   ========================================================================== */
.archive {
  --cols: 7;
  --gap: clamp(8px, 0.9vw, 14px);
  --h: clamp(380px, 66vh, 680px);
  display: flex;
  gap: var(--gap);
  margin: 0 calc(var(--gutter-r) * -1) 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter-r) 14px var(--gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgb(21 23 27 / 0.25) transparent;
}
.archive::-webkit-scrollbar { height: 3px; }
.archive::-webkit-scrollbar-thumb { background: rgb(21 23 27 / 0.25); border-radius: 3px; }
.archive__item {
  flex: none;
  width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  height: var(--h);
  transition: width 0.7s var(--ease-out);
}
.archive__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--mist);
  cursor: pointer;
}
.archive__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
  -webkit-user-drag: none;
}
.archive__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (hover: hover) and (min-width: 700px) {
  .archive__item:hover, .archive__item:focus-within { width: min(calc(var(--h) * 1.15), 46vw); }
  .archive__item:hover img { transform: scale(1.02); }
}
.archive.is-dragging .archive__btn { cursor: grabbing; }
@media (min-width: 700px) and (max-width: 1099px) { .archive { --cols: 4; } }
@media (max-width: 699px) {
  .archive { flex-direction: column; gap: 10px; margin: 0; padding: 0; overflow: visible; }
  .archive__item { width: 100%; height: auto; aspect-ratio: 16 / 10; min-height: 0; overflow: hidden; }
  /* con JS: la altura la marca archive.js (franja baja → imagen completa al ir bajando) */
  .archive.is-unfold .archive__item { aspect-ratio: auto; transition: height 0.5s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .archive__item, .archive__btn img { transition: none; }
}
.projects--all .projects__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* La cabecera del archivo, compacta, para que la fila de imágenes quepa entera en pantalla */
@media (min-width: 700px) {
  .projects--all { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(1.25rem, 3vw, 2.5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
  .projects--all .projects__head { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
  .projects--all .projects__title { font-size: clamp(2.4rem, 1rem + 3.4vw, 5rem); max-width: none; }
  .archive { --h: clamp(360px, calc(100svh - var(--header-h) - 15rem), 760px); }
}

/* Portada · 01 Proyectos: franjas horizontales apiladas (como el despliegue de la sección 2).
   Solo una abierta: en escritorio, la que tiene el ratón; en móvil, la que pasa por media pantalla. */
.archive.archive--home {
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 12px);
  margin: 0;
  padding: 0;
  overflow: visible;
}
.archive--home .archive__item { width: 100%; height: auto; aspect-ratio: 16 / 5; min-height: 0; overflow: hidden; }
.archive--home.is-unfold .archive__item { aspect-ratio: auto; transition: height 0.45s var(--ease-out); }
@media (max-width: 699px) {
  .archive--home .archive__item { aspect-ratio: 16 / 9; }
}
.projects--home .projects__head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }

/* encuadre de Serena en la portada: que se vea el logotipo grabado */
.archive--home #p-serena img { object-position: 50% 72%; }

/* la ficha recibe el foco al abrirse: sin contorno */
.case:focus, .case:focus-visible { outline: none; }