/* XKLA · Trabajo: índice /trabajo/ y fichas /proyecto/<slug>/
   Prefijo propio: .t-*  y  .ficha-cab. Solo transform y opacity en lo que se anima.
   Índice
   0 · Transición tarjeta → ficha (View Transitions entre documentos)
   1 · Índice: filtro y retícula
   2 · Cabecera de ficha y principal
   3 · Texto editorial y galerías
   4 · Entregables, siguiente proyecto
   5 · Video en galerías */

/* 0 · Transición compartida (solo navegadores con soporte; sin soporte no pasa nada) --------------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }

/* 1 · Índice -------------------------------------------------------------------------------------- */
.t-indice { padding-bottom: var(--seccion); }
.t-filtro { padding: 0 var(--m); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.no-js .t-filtro { display: none; }
.t-filtro__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(236, 234, 228, .28); border-radius: 2px; font-size: var(--t15); line-height: 1;
  transition: background-color .25s linear, color .25s linear, border-color .25s linear;
}
.t-chip:hover { border-color: rgba(236, 234, 228, .6); }
.t-chip__n { color: var(--hueso-2); font-variant-numeric: tabular-nums; transition: color .25s linear; }
.t-chip[aria-pressed="true"] { background: var(--hueso); color: var(--grafito); border-color: var(--hueso); }
.t-chip[aria-pressed="true"] .t-chip__n { color: rgba(18, 18, 17, .66); }
.t-cuenta { flex: none; min-height: 44px; display: flex; align-items: center; font-size: var(--t15); color: var(--hueso-2); font-variant-numeric: tabular-nums; }

.t-lista {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--g);
  align-items: start; padding: clamp(32px, 3.4vw, 64px) var(--m) 0;
}
.t-lista .obra__media, .t-sig .obra__media { aspect-ratio: 4 / 3; }
.obra__media picture { position: absolute; inset: 0; }
@media (min-width: 1600px) { .t-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Filtro por disciplina: lo aplica un atributo de <html>, así ?disciplina= se ve sin parpadeo */
html[data-filtro="marca-e-identidad"] .obra:not([data-d~="marca-e-identidad"]),
html[data-filtro="packaging"] .obra:not([data-d~="packaging"]),
html[data-filtro="ilustracion"] .obra:not([data-d~="ilustracion"]),
html[data-filtro="editorial"] .obra:not([data-d~="editorial"]),
html[data-filtro="campana"] .obra:not([data-d~="campana"]),
html[data-filtro="estrategia"] .obra:not([data-d~="estrategia"]),
html[data-filtro="contenido"] .obra:not([data-d~="contenido"]),
html[data-filtro="web"] .obra:not([data-d~="web"]),
html[data-filtro="ui-ux"] .obra:not([data-d~="ui-ux"]) { display: none; }

/* Al filtrar, las tarjetas entran con opacidad y una escala mínima */
@keyframes t-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.movimiento .obra.t-entra { animation: t-entra .6s var(--escala) both; animation-delay: calc(var(--j, 0) * 70ms); }

@media (max-width: 899px) {
  .t-filtro { flex-direction: column-reverse; gap: 0; }
  .t-filtro__chips {
    flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2 * var(--m)); margin-inline: calc(var(--m) * -1);
    padding: 4px var(--m); scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--m); overscroll-behavior-x: contain;
  }
  .t-filtro__chips::-webkit-scrollbar { display: none; }
  .t-chip { flex: none; scroll-snap-align: start; }
  .t-cuenta { min-height: 36px; }
  .t-lista { grid-template-columns: 1fr; row-gap: 40px; }
}

/* 2 · Cabecera de ficha ---------------------------------------------------------------------------- */
.ficha-cab { grid-template-rows: auto 1fr auto; align-content: start; }
.ficha-cab .pagina-cab__titulo { grid-column: 1 / span 6; grid-row: 1; }
.ficha-cab .pagina-cab__entradilla { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
.t-datos {
  grid-column: 8 / -1; grid-row: 1 / span 2; align-self: start; margin: 0;
  display: grid; grid-template-columns: minmax(6.5rem, 30%) 1fr; align-items: baseline; gap: 10px var(--g);
  padding-top: .35em;
}
.t-datos dt { font-size: var(--t15); color: var(--hueso-2); }
.t-datos dd { margin: 0; font-size: var(--t17); line-height: 1.4; }
.ficha-cab .pagina-cab__imagen { grid-row: 3; margin-top: clamp(40px, 4.4vw, 96px); }
.marco--5x2 { aspect-ratio: 5 / 2; }
.t-principal .marco { background: var(--grafito-2); }
@media (max-width: 899px) {
  .ficha-cab .pagina-cab__titulo, .ficha-cab .pagina-cab__entradilla, .t-datos { grid-column: 1 / -1; grid-row: auto; }
  .t-datos { margin-top: 28px; grid-template-columns: 5.6rem 1fr; gap: 8px 16px; padding-top: 0; }
  .ficha-cab .pagina-cab__imagen { grid-row: auto; margin-top: 36px; }
  .t-principal--16x10 .marco, .t-principal--5x2 .marco { aspect-ratio: 4 / 3; }
}

/* 3 · Texto editorial y galerías --------------------------------------------------------------------- */
.t-resumen { padding-top: clamp(56px, 6vw, 128px); }
.t-resumen__texto { max-width: 44ch; font-weight: 450; }
.t-cap { padding-top: var(--seccion); }
.t-cap .dos-col__titulo { text-wrap: balance; }
.t-cap .dos-col__cuerpo > p, .t-cap .dos-col__cuerpo > ul { margin: 0; }
.t-cap .dos-col__cuerpo > * + * { margin-top: 1em; }
.t-lead { font-weight: 600; font-variation-settings: "opsz" 28; }
.t-lista-hot { display: grid; gap: 10px; }
.t-lista-hot em { font-weight: 600; }

.t-gals { margin-top: clamp(32px, 3.6vw, 80px); display: grid; gap: var(--g); }
.t-gal { display: grid; grid-template-columns: var(--c, 1fr); gap: var(--g); align-items: start; }
.t-i { margin: 0; min-width: 0; }
.t-i .marco { width: 100%; }
.t-gal--uno { --c: repeat(12, minmax(0, 1fr)); }
.t-gal--uno .t-i { grid-column: 1 / -1; }
.t-gal--lamina .t-i { grid-column: 5 / -1; }
/* Un cuadrado grande (2 × 2) y cuatro pequeños */
.t-gal--cuadros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t-i--grande { grid-column: span 2; grid-row: span 2; }
@media (max-width: 899px) {
  .t-gal { grid-template-columns: var(--cm, 1fr); }
  .t-i[data-ancho] { grid-column: 1 / -1; }
  .t-i[data-tel] .marco { width: min(100%, 300px); }
  .t-gal--lamina .t-i { grid-column: 1 / -1; }
  .t-gal--cuadros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-i--grande { grid-column: 1 / -1; grid-row: auto; }
}

/* 4 · Entregables y siguiente proyecto -------------------------------------------------------------- */
.t-ents { display: grid; gap: 10px; }
.t-credito { margin-top: 1.4em; font-size: var(--t15); }
.t-hablemos { margin-top: clamp(28px, 2.6vw, 48px) !important; }
.t-sig { padding-top: var(--seccion); padding-bottom: var(--seccion); }
.t-sig__enlace {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end;
}
.t-sig__txt { grid-column: 1 / span 5; grid-row: 1; display: grid; gap: 14px; align-content: end; padding-bottom: 4px; }
.t-sig__rotulo { font-size: var(--t21); color: var(--hueso-2); }
.t-sig__nombre { font-size: var(--t40); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.t-sig__marco { grid-column: 7 / -1; grid-row: 1; }
.t-todo { margin-top: 40px; text-align: right; }
@media (max-width: 899px) {
  .t-sig__txt, .t-sig__marco { grid-column: 1 / -1; grid-row: auto; }
  .t-sig__marco { margin-top: 24px; order: 2; }
  .t-sig__enlace { display: block; }
  .t-todo { text-align: left; }
}

/* 5 · Video en galerías ----------------------------------------------------------------------------- */
.t-pausa {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; min-height: 44px; padding: 0 14px;
  background: rgba(18, 18, 17, .78); color: var(--hueso); border-radius: 2px; font-size: var(--t15);
  opacity: 0; transition: opacity .25s linear;
}
.t-video:hover .t-pausa, .t-video:focus-within .t-pausa { opacity: 1; }
@media (hover: none) { .t-pausa { opacity: .9; } }

/* Medida de lectura de las fichas: 62 ch como máximo */
.t-cap .dos-col__cuerpo { max-width: 62ch; }