/* =========================================================
   MUT_MARIONA — custom.css (re-skin del proyecto)
   =========================================================
   index.php carga esta hoja solo si existe. Es el ÚNICO sitio
   donde vive la identidad de Maria Ona / Tacones y Taladros:
   styles.css se queda idéntico a mutador_basic para poder
   diffear la base y traer mejoras.

   Reglas heredadas: prefijo tb-, estados .is-*, sumario por
   bloque, background-color en propiedad larga si transiciona.

   ─────────────────────────────────────────────────────────
   ÍNDICE
   ─────────────────────────────────────────────────────────
   §M1  Fuentes (@font-face, woff2 locales)
   §M2  Re-skin de tokens (:root)
   §M3  Tipografía del sitio
   §M4  Los tres bloques de imagen del diseño
   §M5  Rejilla de Selected Works
   §M6  Listado de Archive
   §M7  Bloque de cierre "HEELS AND DRILLS"
   §M8  Footer de tres zonas
   §M9  Responsive (≤768)
   §M10 Compatibilidad con el markup de Joomla
   §M11 Slideshow de portada
   §M12 Portada (home): una foto y nada más
   §M13 INFO
   §M14 Márgenes blancos en escritorio
   ========================================================= */


/* ---------- §M1 · Fuentes ---------- */
/* OJO LICENCIA: los OTF de origen son Monotype de escritorio
   (Univers LT Pro, Franklin Gothic Condensed). Estos woff2 salen de
   esos OTF y NO se publican hasta confirmar que el EULA cubre uso
   webfont. Si no lo cubre, hay que comprar la licencia web de las
   dos familias y reemplazar los archivos de fonts/. */
@font-face {
  font-family: "Univers";
  src: url("../fonts/univers-55roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Univers";
  src: url("../fonts/univers-65bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FranklinGotCon";
  src: url("../fonts/franklin-gotcon-reg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---------- §M2 · Re-skin de tokens ---------- */
/* Único bloque que hay que tocar para cambiar la piel del sitio.
   El diseño es blanco y negro puros: no hay grises de marca, solo
   el apagado del texto secundario. */
:root {
  --paper:  #ffffff;
  --ink:    #000000;
  --mute:   #8a8a8a;
  --rule:   rgba(0, 0, 0, 0.12);
  --accent: #000000;

  --dark-paper: #000000;
  --dark-ink:   #ffffff;
  --dark-mute:  #9a9a9a;
  --dark-rule:  rgba(255, 255, 255, 0.18);

  --display: "FranklinGotCon", "Arial Narrow", Arial, sans-serif;
  --body:    "Univers", Helvetica, Arial, sans-serif;
  /* El nav de este diseño NO es monoespaciada: --mono apunta a la
     misma Univers para que los tokens --nav-* hereden bien. */
  --mono:    "Univers", Helvetica, Arial, sans-serif;
  --fs-base: 15px;

  /* TAMAÑO DE TODO EL TEXTO DE INTERFAZ — un solo sitio.
     Menú, marca, caption de la barra, pies de foto, etiquetas del pie:
     todo cuelga de --ui-fs. Subir o bajar el registro tipográfico del
     sitio entero es cambiar este número. Los otros dos son relativos a
     él a propósito: el archive un punto más grande porque es lectura
     seguida, y el pie medio punto, para que se distinga de sus
     etiquetas. */
  --ui-fs:      9px;

  --nav-font:     var(--body);
  --nav-fs:       var(--ui-fs);
  --nav-tracking: 0.08em;

  /* Cuerpo del poema y los créditos del pie. Un punto por encima de las
     etiquetas de 10 px: se distingue, pero sigue en el registro de
     interfaz del resto del sitio. */
  --foot-fs: var(--ui-fs);

  /* El archive va al mismo cuerpo que el resto: el panel de tipografía
     del diseño dice Univers 55 Roman, 9 px, sin espaciado entre letras.
     Se deja como token propio por si algún día hay que subirlo: es una
     página de lectura seguida y 9 px es poco para 202 líneas. */
  --archive-fs: var(--ui-fs);

  /* Interlínea del listado del archive. Medida sobre la maqueta del
     diseño a 1440: las líneas van de 22 en 22 px de pantalla retina,
     que son 11 px de CSS. Con el cuerpo a 9 px eso es un 122 %, no el
     100 % que marca el panel de tipografía —el 100 % es del poema—.
     Antes aquí había 1.6 por legibilidad; se ha vuelto al dato.
     Las cuatro medidas del archive (esta, --archive-col, el aire entre
     años y el padding de arriba) salen de la misma maqueta y van juntas:
     si se toca una, se tocan todas. */
  --archive-lh: 11px;

  /* Columna del año: del margen izquierdo al comienzo del listado hay
     42 px en la maqueta (84 px de pantalla retina). Incluye el hueco:
     el año ocupa 20 px y los otros 22 son aire. */
  --archive-col: 42px;

  /* Aire entre un año y el siguiente: exactamente una línea en blanco,
     11 px. En la maqueta la distancia entre la última línea de un año y
     la primera del siguiente es el doble de la interlínea. */
  --archive-gap: 11px;

  /* Alto de las celdas del mosaico: 90 de pantalla, no 100. Asomar el
     borde de la fila siguiente es lo que invita a seguir bajando; a
     pantalla completa el mosaico parece que se acaba en cada foto.
     Los dos valores van juntos y son el mismo número: el primero es el
     de reserva y el segundo el que se usa de verdad, en svh.
     (Las fotos DENTRO de una ficha sí van a pantalla entera: eso es
     --project-h, aquí debajo.) */
  --works-h:   90vh;
  --works-h-n: 90;

  /* Alto de cada foto dentro de una ficha de proyecto (§M4) */
  --project-h: 100svh;

  /* Aire blanco a los lados de una foto marcada con "márgenes". Es un
     clamp: en una pantalla pequeña de escritorio da poco y en una
     grande no se desmadra. Solo actúa en escritorio (§M14). */
  --air-side: clamp(16px, 6vw, 120px);

  /* Aire lateral de una celda entera con portada VERTICAL. Es lo único
     que hay que tocar para que respire más o menos. Ponerlo a 0 devuelve
     la vertical a sangre. */
  --works-air: clamp(16px, 22vw, 420px);

  /* El sitio es a sangre: sin caja centrada de 1280 */
  --container: 100%;
  --gutter:    16px;
  --topbar-h:  34px;
  --radius:    0;
}


/* ---------- §M3 · Tipografía del sitio ---------- */
body {
  font-family: var(--body);
  font-size: var(--fs-base);
  color: var(--ink);
}

/* Caja alta con tracking: el registro de todo el texto de interfaz */
.tb-caps {
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  font-size: var(--ui-fs, 9px);
  line-height: 1.5;
}

.tb-display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.01em;
}


/* ---------- §M4 · Los tres bloques de imagen ---------- */
/* Todo el sitio se construye con estos tres y nada más:
   --bleed   imagen a sangre, 100 % del ancho
   --duo     dos columnas 50/50 sin canal entre ellas
   --plate   retrato centrado con márgenes blancos laterales */
.tb-fig { margin: 0; }
.tb-fig img,
.tb-fig video { display: block; width: 100%; height: auto; }

.tb-fig--bleed img,
.tb-fig--bleed video { width: 100%; }

.tb-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.tb-fig--plate {
  display: flex;
  justify-content: center;
  padding: 0 clamp(16px, 22vw, 400px);
  background-color: var(--paper);
}

/* CADA FOTO DE UNA FICHA, A PANTALLA COMPLETA
   ───────────────────────────────────────────────────────────────────
   Mismo ritmo que el mosaico: se pasa de una foto a la siguiente, no se
   ojea la página. Cada columna que lleve una imagen o un vídeo mide una
   pantalla y la foto rellena, recortando lo que sobre.
   Vale para los tres bloques sin tocarlos:
     · a sangre  → una columna de 12 = una pantalla entera
     · dos columnas → dos medias, cada una de una pantalla
     · plate     → la columna centrada, con su papel a los lados
   Y en móvil, donde las columnas se apilan, cada foto es una pantalla.

   OJO al :has(> img): la altura se le pone SOLO a las columnas que
   llevan una foto dentro. Las que llevan texto o un módulo —el
   formulario de INFO, sin ir más lejos, que también vive dentro de un
   .tb-project— se quedan como estaban. Sin esa condición, INFO se
   convertiría en una pantalla vacía con el formulario perdido en medio.

   El alto se toca en un sitio: --project-h. */
.tb-project .row > [class*="col-"]:has(> img),
.tb-project .row > [class*="col-"]:has(> video) {
  height: var(--project-h, 100svh);
}

.tb-project .row > [class*="col-"]:has(> img) > img,
.tb-project .row > [class*="col-"]:has(> video) > video {
  height: 100%;
  object-fit: cover;
}


/* En una FICHA de proyecto el fondo es siempre papel, también detrás de
   una foto vertical. El maquetador puede dejar una sección marcada como
   oscura —el generador de páginas la ponía según la luminosidad de la
   foto— y eso pintaba de negro el aire de los lados. Aquí se anula: el
   blanco de los laterales es una decisión de diseño, no del contenido.
   La clase bs-section--dark se queda en el marcado sin pintar nada; la
   tinta de la barra ya no depende de ella, la mide js/custom.js §03. */
.tb-project .bs-section--dark,
.tb-project [data-section-theme="dark"] { background-color: var(--paper); }

/* Pie de foto: caja alta diminuta, alineado al bloque */
.tb-fig figcaption {
  padding: 8px var(--gutter) 24px;
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  font-size: var(--ui-fs, 9px);
  color: var(--mute);
}


/* ---------- §M5 · Rejilla de Selected Works ---------- */
/* Dos columnas de imagen a sangre, sin canal ni márgenes. El pie
   aparece al pasar por encima, sobre la propia imagen. */
.tb-works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Altura de celda: la pantalla entera, sea media o entera de ancho.
   La imagen rellena y recorta lo que sobre.
   El token se puede tocar sin buscar la regla:
       --works-h en :root (§M2)
   svh en vez de vh donde se entienda: en móvil, vh se mide con la barra
   de direcciones escondida y da un salto al aparecer y desaparecer. */
.tb-works__item {
  position: relative;
  display: block;
  overflow: hidden;
  height: var(--works-h, 90vh);
  height: calc(var(--works-h-n, 90) * 1svh);
}

/* Las dos celdas de una fila se igualan solas: son items de un grid, así
   que se estiran a la altura de la fila. La imagen rellena esa altura y
   recorta lo que sobre. Nada de aspect-ratio fija aquí: la altura la
   marca la portada más alta de cada fila, como en el diseño. */
.tb-works__item img,
.tb-works__item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LA COSTURA BLANCA DEL VÍDEO
   Un vídeo deja a veces una línea de un píxel abajo y a la derecha. No
   es un margen: es redondeo. La celda mide 90 de pantalla y la rejilla
   parte el ancho en dos, así que casi siempre salen decimales —421,5 px
   de ancho, 506,3 de alto—; el vídeo se calcula al 100 % de eso, el
   navegador redondea a su manera y por la rendija se ve el papel.
   Con una imagen se nota menos porque suele redondear al mismo lado; el
   vídeo pinta en otra capa y no siempre coincide.
   La cura es darle un píxel de más de alto y de ancho: la celda ya
   recorta lo que sobra (overflow: hidden), así que ese píxel no se ve, y
   ya no queda decimal que no llegue al borde. Se hace SIN sacarlo del
   flujo —probado: en posición absoluta con inset y ancho a la vez, el
   navegador ignora uno de los dos y la rendija reaparece por el otro
   lado—.
   NO se aplica a los vídeos con aire: esos se ven enteros y su alto es
   el suyo, no el de la celda. */
.tb-works__item:not(.tb-works__item--air):not(.tb-works__item--air-left):not(.tb-works__item--air-right) > video {
  width: calc(100% + 1px);
  height: calc(100% + 1px);
}

/* Una celda a todo el ancho: la decide el campo cover_span del
   artículo. Es lo que permite mezclar apaisadas, verticales y vídeos
   sin que la fila quede coja. */
.tb-works__item--full { grid-column: 1 / -1; }

/* MEDIA PERO CENTRADA — cover_span: center
   La celda coge la fila entera y la imagen se queda en la mitad de en
   medio, con papel a los dos lados. Es la única forma de tener una
   media que no esté pegada a un borde: en una rejilla de dos columnas,
   una sola media siempre cae a la izquierda.
   El 25 % de cada lado es lo que deja la imagen exactamente en el
   ancho de una media. La foto sigue rellenando y recortando, como en
   cualquier otra celda: centrada, no encogida. */
.tb-works__item--center {
  grid-column: 1 / -1;
  padding-inline: 25%;
  background-color: var(--paper);
}

/* La segunda imagen de una pareja (Intro + Full Article Image). En
   escritorio ocupa la otra media columna; en móvil, con una sola
   columna, desaparece y el proyecto se queda con su imagen de intro.
   El ocultado está en §M9, con el resto del responsive. */

/* Una portada VERTICAL nunca se pinta a sangre en una celda entera.
   Estirar un vertical a las dos columnas obliga a recortarlo hasta
   dejarlo en una franja: se pierde justo lo que hace que sea vertical.
   Aquí se ve entera, centrada, con blanco a los lados. La orientación la
   mide html/com_content/category/grid.php leyendo el archivo, así que no
   hay ningún campo más que rellenar: se detecta sola.
   El aire se regula con --works-air en :root (§M2).
   Las apaisadas y los vídeos en "full" siguen a sangre, sin tocar. */
.tb-works__item--full.tb-works__item--portrait {
  padding-inline: var(--cover-m, var(--works-air, clamp(16px, 22vw, 420px)));
  background: var(--paper);

  /* Y el alto lo pone la foto, no la celda. LA MISMA REGLA QUE EN §M14 y
     por el mismo motivo: en cuanto una foto se ve ENTERA —aquí, porque
     una vertical a dos columnas no se puede pintar a sangre—, el alto
     fijo de la celda deja dos franjas de blanco muertas encima y debajo.
     El blanco tiene que estar a los lados y solo a los lados.
     Regla general del mosaico, para no volver a tropezar: si una celda
     enseña la foto entera, su alto es el de la foto. */
  height: auto;
}

.tb-works__item--full.tb-works__item--portrait img {
  height: auto;
  object-fit: fill;
}

/* El nombre del proyecto vive en el marcado pero no se ve: lo lee
   js/custom.js para pintarlo pegado al cursor y en el caption de la
   barra. Se recorta en vez de ocultarse con display:none para que siga
   estando ahí para lectores de pantalla y para quien navegue con
   teclado. */
.tb-works__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Etiqueta que sigue al cursor (la crea js/custom.js) */
.tb-works__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-ui, 0.2s ease);
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking, 0.08em);
  font-family: var(--body);
  font-size: var(--ui-fs, 9px);
  color: var(--paper, #fff);
  white-space: nowrap;
}

.tb-works__cursor.is-visible { opacity: 1; }

/* Sobre portada clara, el texto en tinta. Lo marca el campo cover_light. */
.tb-works__cursor.is-onlight { color: var(--ink, #000); }


/* ---------- §M6 · Listado de Archive ---------- */
/* Año en columna estrecha a la izquierda, proyectos a su derecha.
   Es texto puro: ni una imagen en toda la página. */
/* El padding superior va aquí y no en .tb-main: así el listado nunca se
   pega a la barra fija, lleve o no la página el sufijo tyt-flush. */
.tb-archive {
  /* Arriba: en la maqueta, del texto de la barra a la primera línea del
     listado hay 30 px. Con la barra en 34 px de alto eso deja 8 px. */
  padding: calc(var(--topbar-h, 34px) + 8px) var(--gutter) 140px;
  font-size: var(--archive-fs, 9px);
  line-height: var(--archive-lh, 1.6);
  letter-spacing: 0;
}

/* Las columnas (año | listado) las pone la rejilla de Bootstrap desde el
   maquetador: aquí solo la separación entre años. Antes esto era un grid
   propio; se quitó al adoptar M3 Design para no pelear dos rejillas. */
/* Año a la izquierda en columna estrecha y los trabajos a su derecha,
   como el Figma. Dos formas de escribirlo, las dos valen:
     - .row de Bootstrap (lo que pinta el override)
     - un bloque suelto, como un listado pegado a mano en un artículo
   El segundo no trae columnas, así que se las da el grid de abajo. */
/* Aire entre años: el listado es largo y sin respiración se lee como un
   muro. Un año se separa del anterior más de lo que se separan sus
   líneas entre sí; ahí está toda la maquetación de esta página. */
.tb-archive__year { margin-bottom: var(--archive-gap, 11px); }

.tb-archive__year:not(.row) {
  display: grid;
  grid-template-columns: var(--archive-col, 42px) minmax(0, 1fr);
  column-gap: 0;
}

/* La columna del año de Bootstrap es del 8,33 % —unos 120 px— y el
   diseño la quiere en 42. Escopado al archivo: no toca nada más. */
@media (min-width: 768px) {
  .tb-archive .row > .col-md-1  { flex: 0 0 auto; width: var(--archive-col, 42px); }
  .tb-archive .row > .col-md-11 { flex: 0 0 auto; width: calc(100% - var(--archive-col, 42px)); }
}



.tb-archive__label {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tb-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tb-archive__list li { margin: 0; }
.tb-archive__list a { color: inherit; text-decoration: none; }
.tb-archive__list a:hover { color: var(--mute); }


/* ---------- §M7 · Bloque de cierre "HEELS AND DRILLS" ---------- */
/* Lockup centrado que cierra ficha e info. Los tamaños van en clamp
   para que el titular respire igual en 1440 y en móvil. */
/* Vive en un módulo Custom en la posición footer1. Esa posición es una
   franja a ancho completo sin márgenes ni paddings por decisión del
   theme base, así que el aire se lo pone aquí el propio bloque. */
/* El emblema ya va centrado por el panel de §M8: aquí solo el aire
   lateral, para que en móvil no toque los bordes. */
/* EL INTERLINEADO ES EL ASUNTO DE ESTA PIEZA.
   Medido sobre el Figma a 300 ppp: en el diseño los CUATRO huecos entre
   líneas son iguales —32 px de tinta a tinta, con el titular midiendo
   174— o sea 0,184 del alto del titular. En la versión que había, los
   cuatro huecos eran 0,152 · 0,572 · 0,188 · 0,275: el de debajo del
   titular, casi el triple que los demás. Eso es lo que rompía la
   armonía, no los cuerpos de letra, que ya eran los correctos.

   Cómo se consigue que sean iguales:
   1. line-height: 1 en todas las líneas. Con el interlineado suelto,
      cada línea aporta un hueco distinto según su cuerpo.
   2. El hueco lo da un margen, y SIEMPRE calculado sobre --lk, el
      cuerpo del titular. Si el titular encoge en una pantalla menor,
      los cuatro huecos encogen con él y la proporción se mantiene.
   3. El margen de "under" es NEGATIVO, y no es un apaño: la caja de
      línea del titular reserva sitio para las letras que bajan (g, y,
      p) y ahí no hay ninguna, porque va todo en caja alta. Ese hueco
      muerto hay que recuperarlo.

   Los cuatro números salen de medir la propia captura, no de calcular:
   se renderizó el bloque, se midieron las bandas de tinta y se
   ajustaron hasta dejar los huecos en 8,0 · 9,3 · 8,7 · 8,7 px con un
   titular de 46 px de tinta. En proporción: 0,174 · 0,196 · 0,174 ·
   0,181, contra los 0,184 del diseño.
   Si se vuelve a tocar, medir igual: a ojo esto no se acierta. */
.tb-lockup {
  text-align: center;
  padding: 0 var(--gutter);
  background-color: var(--paper);
  color: var(--ink);

  /* El cuerpo del titular, del que cuelgan los cuatro huecos */
  --lk: clamp(38px, 4.6vw, 66px);
}

.tb-lockup__over,
.tb-lockup__under {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(9px, 0.75vw, 11px);
  line-height: 1;
  margin: 0;
}

.tb-lockup__over { font-weight: 700; }

/* El titular es una FILA, no una línea de texto corriente, y ese es todo
   el truco de esta pieza: así la palabra pequeña —"AND" en inglés, "Y"
   en castellano— se centra a la altura de las grandes en vez de
   apoyarse en la línea base, que es como se ve por defecto y como NO lo
   quiere el diseño.
   El hueco entre palabras lo da gap y no el espacio del texto: al ser
   items de una fila, los espacios sueltos del marcado se ignoran. */
.tb-lockup__title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.16em;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--lk);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: calc(var(--lk) * 0.127) 0 0;
}

/* La palabra de enlace: a poco más de la mitad de cuerpo y centrada.
   El empujón de --lockup-and es óptico: centrar la caja del texto deja
   la palabra un pelo baja, porque la caja de las mayúsculas grandes
   incluye el hueco de las letras que bajan y ninguna de esas palabras
   lo usa. Es el único número que hay que tocar si se ve descentrada. */
.tb-lockup__title span {
  font-size: 0.56em;
  transform: translateY(var(--lockup-and, -0.06em));
}

/* El negativo recupera el hueco muerto de las letras que bajan */
.tb-lockup__under { margin-top: calc(var(--lk) * -0.190); }

.tb-lockup__claim {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1;
  margin: calc(var(--lk) * 0.105) 0 0;
}

.tb-lockup__fine {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(8px, 0.65vw, 10px);
  line-height: 1;
  color: var(--ink);
  margin: calc(var(--lk) * 0.105) 0 0;
}

/* Las líneas pequeñas en versalitas del diseño ("FOUNDED BY Maria Ona") */
.tb-lockup .tb-sc { font-variant-caps: all-small-caps; letter-spacing: 0.06em; }


/* ---------- §M8 · Footer ---------- */
/* EL CIERRE DEL SITIO
   Al llegar al final de Selected Work o de una ficha, la pantalla se
   queda entera en blanco con el emblema en el centro y nada más. No es
   un pie de página: es la última pieza del recorrido, y por eso mide
   una pantalla completa y no lo que ocupe su contenido.
   El poema, la representación y los legales NO salen aquí: viven en la
   página de INFO, y el poema además en la portada. Los módulos siguen
   publicados y editándose donde siempre; aquí simplemente no se pintan.
   Excepciones, cada una en su sitio:
     · portada  → solo el poema, abajo a la izquierda (§M12)
     · archive  → sin pie (§M12)
     · INFO     → sin pie: lleva sus bloques en el propio artículo. Se
                  marca con el sufijo de clase de página "tyt-info" en
                  su ítem de menú. */
.tb-footer {
  display: grid;
  place-items: center;
  min-height: 100svh;
  background-color: var(--paper);
}

.tb-footer .tb-footcols,
.tb-footer .tb-footer__bottom { display: none; }

.tb-footer .tb-footer__area--footer1 { width: 100%; }


/* ---------- §M8b · Las tres zonas (portada e INFO) ---------- */
/* Las tres columnas del pie: poema a la izquierda, representación en el
   centro, créditos a la derecha. Cada una es un módulo (footer2/3/4),
   así que se editan por separado desde el admin.
   Alineadas por ABAJO: los bloques tienen distinto número de líneas y
   lo que tiene que casar es la última de cada uno. */
.tb-footcols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  column-gap: var(--gutter);
  padding: 0 var(--gutter) 22px;
}

.tb-footcols__start { justify-self: start; text-align: left; }
.tb-footcols__mid   { justify-self: center; text-align: center; }
.tb-footcols__end   { justify-self: end; text-align: right; }

.tb-footcols p { margin: 0; }

/* El poema y los créditos están OCULTOS y aparecen al pasar por encima
   de su columna, con un fundido. Van en position: absolute sobre la
   etiqueta para que no ocupen sitio: si ocuparan, el pie estaría siempre
   alto y en reposo debe ser una sola línea.
   Se oculta con opacity y NO con display:none ni visibility: así el
   texto sigue existiendo para lectores de pantalla y para el buscador.
   pointer-events: none evita que el bloque invisible intercepte clics. */
.tb-footcols__start,
.tb-footcols__end { position: relative; }

.tb-footreveal {
  position: absolute;
  bottom: calc(100% + 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  white-space: nowrap;
}

.tb-footcols__start .tb-footreveal { left: 0;  text-align: left; }
.tb-footcols__end   .tb-footreveal { right: 0; text-align: right; }

.tb-footcols__start:hover .tb-footreveal,
.tb-footcols__start:focus-within .tb-footreveal,
.tb-footcols__end:hover .tb-footreveal,
.tb-footcols__end:focus-within .tb-footreveal { opacity: 1; }

/* La etiqueta que invita a pasar por encima */
.tb-footcols__start:hover .tb-footlabel,
.tb-footcols__end:hover .tb-footlabel { color: var(--ink); }

/* El poema y los créditos. Medidas del Figma: Univers 55 Roman, 9 px,
   interlínea 100 %, sin espaciado entre letras. */
.tb-footpoem,
.tb-footcredits {
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: var(--foot-fs, 9px);
  line-height: 1;
  color: var(--ink);
}

/* Las líneas de servicio: más pequeñas y apagadas */
.tb-footlabel {
  margin-top: 10px !important;
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  font-size: var(--ui-fs, 9px);
  color: var(--mute);
}

.tb-footlabel strong { font-weight: 400; color: var(--ink); }

/* El enlace a la agencia: sin subrayado y en tinta, se apaga al pasar
   por encima en vez de encenderse — lo contrario que el resto del pie,
   porque aquí el estado normal ya es el destacado. */
.tb-footcols a { color: inherit; text-decoration: none; transition: opacity var(--t-ui); }
.tb-footcols a:hover { opacity: 0.55; }

@media (max-width: 768px) {
  /* Apiladas y centradas: tres columnas de texto no caben en un móvil */
  .tb-footcols {
    grid-template-columns: 1fr;
    row-gap: 26px;
    text-align: center;
    padding-bottom: 34px;
  }

  .tb-footcols__start,
  .tb-footcols__mid,
  .tb-footcols__end { justify-self: center; text-align: center; }

  /* En móvil no hay ratón que pasar por encima: se ven siempre */
  .tb-footreveal {
    position: static;
    opacity: 1;
    pointer-events: auto;
    white-space: normal;
    text-align: center !important;
    margin-bottom: 10px;
  }
}

/* footer-bottom lleva las tres líneas legales: izquierda, centro y
   derecha en la misma barra. */
.tb-footer__bottom {
  padding: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  font-size: var(--ui-fs, 9px);
}

.tb-footrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--gutter);
  padding: 0 var(--gutter);
}

.tb-footrow__start { justify-self: start; }
.tb-footrow__mid   { justify-self: center; color: var(--mute); }
.tb-footrow__end   { justify-self: end; }
.tb-footrow a { color: inherit; text-decoration: none; }
.tb-footrow strong { font-weight: 700; color: var(--ink); }


/* ---------- §M9 · Responsive (≤768) ---------- */
@media (max-width: 768px) {
  .tb-archive__year:not(.row) { grid-template-columns: 1fr; row-gap: 4px; }

  /* Las dos columnas se apilan: en móvil media imagen no se lee */
  .tb-duo,
  .tb-works { grid-template-columns: 1fr; }

  .tb-fig--plate { padding: 0 var(--gutter); }

  /* Con una sola columna, un vertical ya entra a sangre sin recortarse
     de más: se le quita el aire y vuelve a rellenar la celda. */
  .tb-works__item--full.tb-works__item--portrait {
    padding-inline: 0;
    height: calc(var(--works-h-n, 90) * 1svh);
  }

  .tb-works__item--full.tb-works__item--portrait img {
    height: 100%;
    object-fit: cover;
  }

  /* Y una "media centrada" tampoco tiene sentido cuando la columna es
     una: ocupa el ancho como todas. Lo mismo con el ancho a medida: en
     una columna, el porcentaje sobra. */
  .tb-works__item--center,
  .tb-works__item--w { padding-inline: 0; }

  /* La segunda imagen de la pareja se queda fuera en móvil: el proyecto
     aparece una vez, con su imagen de intro. */
  .tb-works__item--desk { display: none; }

  /* En móvil no hay cursor al que pegar nada: el pie se ve siempre,
     debajo de su portada. Se deshace el recorte de accesibilidad. */
  .tb-works__caption {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    display: block;
    text-transform: uppercase;
    letter-spacing: var(--nav-tracking);
    font-size: var(--ui-fs, 9px);
    color: var(--mute);
    padding: 8px var(--gutter) 20px;
  }

  .tb-works__cursor { display: none; }


  .tb-footrow {
    grid-template-columns: 1fr;
    row-gap: 6px;
    text-align: center;
  }
  .tb-footrow__start,
  .tb-footrow__mid,
  .tb-footrow__end { justify-self: center; }
}


/* ---------- §M10 · Compatibilidad con el markup de Joomla ---------- */
/* Joomla emite .visually-hidden en su propio HTML (mod_languages,
   paginación, formularios de com_users). El theme base NO la define a
   propósito —el nombre lo reclaman Bootstrap y otros starters— y el
   resultado es que ese texto sale a la vista: el "Select your language"
   del selector de idioma es exactamente eso.

   Se define aquí con la misma técnica que .tb-sr de styles.css §03:
   desaparece de la vista pero sigue existiendo para lectores de
   pantalla. NUNCA con display:none, que lo borra también para ellos. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* El contacto vive en css/contact.css, hoja aparte que index.php carga
   solo cuando hay módulo en la posición contact. */


/* ---------- §M11 · Slideshow de portada ---------- */
/* Una foto detrás de otra, sin giro, centradas en la página y con aire
   por los cuatro lados. No van a sangre: la foto flota sobre el papel,
   que es lo que le da el aire. Ni marco, ni sombra, ni pie.

   Todas las fotos se sirven en 4:5, así que la caja no cambia de forma
   al pasar de una a otra: se queda quieta y solo cambia la imagen.

   El ritmo y el fundido se declaran en el markup del módulo
   (data-tb-interval / data-tb-fade) y js/custom.js §02 los lee; aquí
   solo viven la caja y la transición.

   La barra va sobre el papel, no sobre la foto: este bloque no toca el
   tema claro/oscuro de la barra. */
.tb-slideshow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--gutter) var(--gutter) calc(var(--gutter) * 2);
  background-color: var(--paper);
}

/* La caja: alta pero sin comerse la pantalla, para que quede aire arriba
   y abajo. En móvil manda el ancho. */
.tb-slideshow__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  height: min(68svh, 112vw);
  max-height: 68svh;
  overflow: hidden;
}

/* visibility con retardo, no display: así la que sale sigue pintada
   mientras dura el fundido y no da un parpadeo. */
.tb-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--tb-slideshow-fade, 200ms) ease,
    visibility 0s linear var(--tb-slideshow-fade, 200ms);
}

.tb-slideshow__slide.is-current {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--tb-slideshow-fade, 200ms) ease,
    visibility 0s;
}

.tb-slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sin animación para quien la ha desactivado en el sistema: se queda la
   primera foto fija. js/custom.js tampoco arranca el temporizador. */
@media (prefers-reduced-motion: reduce) {
  .tb-slideshow__slide { transition: none; }
}

@media (max-width: 768px) {
  .tb-slideshow__stage { height: min(62svh, 128vw); max-height: 62svh; }
}


/* ---------- §M12 · Portada (home) ---------- */
/* La home es UNA foto y nada más: ni pie, ni scroll. La clase tb-home la
   pone index.php comparando el ítem de menú activo con el ítem por
   defecto del sitio, así que vale igual en español que en inglés.

   Sin scroll de verdad: la foto mide exactamente la pantalla —svh y no
   vh, que en móvil vh se mide con la barra del navegador escondida y
   deja un dedo de página que se puede arrastrar— y el pie se esconde.
   El pie no se borra: sigue existiendo para el resto del sitio, y el
   sello con el poema, la representación y los legales viven ahora en la
   página de INFO. */
body.tb-home {
  height: 100svh;
  overflow: hidden;
}

.tb-home .tb-main { height: 100svh; overflow: hidden; }

/* Cualquiera que sea el bloque que se monte en el maquetador, la foto de
   portada llena la pantalla y recorta lo que sobre. */
.tb-home .tb-project img,
.tb-home .tb-project video {
  display: block;
  width: 100%;
  height: 100svh;
  object-fit: cover;
}

/* En la home NO va el pie entero: va SOLO el poema, abajo a la
   izquierda, encima de la foto. Y va como en el diseño: se ve la
   etiqueta «A POEM» y el poema aparece encima al pasar el cursor, con
   el fundido de §M8b. El módulo del pie no se toca: sigue siendo el
   mismo de siempre y se edita en el mismo sitio. Esto solo decide qué
   se ve y dónde.
   La etiqueta en castellano («UN POEMA») sale del módulo del pie en
   español: es texto del módulo, no del theme. */
.tb-home .tb-footer {
  position: fixed;
  z-index: 90;
  bottom: 0;
  left: 0;
  display: block;
  min-height: 0;
  padding: 0;
  background: none;
}

.tb-home .tb-footer .tb-footcols { display: block; }

.tb-home .tb-footer__area--footer1,
.tb-home .tb-footcols__mid,
.tb-home .tb-footcols__end,
.tb-home .tb-footer__bottom { display: none; }

.tb-home .tb-footcols { padding: 0 var(--gutter) 18px; }

/* Mismo fundido que en el pie, sobre la foto: el texto va en blanco y
   se funde con lo que tenga detrás, igual que la barra (§T2 de
   nav-tyt.css). Sobre la foto clara del zapato se lee negro. */
.tb-home .tb-footcols__start {
  color: #fff;
  mix-blend-mode: difference;
}

.tb-home .tb-footpoem { margin: 0; }

/* El archive no lleva pie: es un listado que ya termina en su propio
   blanco. La clase tyt-list es el sufijo de clase de página del ítem de
   menú, el mismo que elige el listado en vez del mosaico.
   OJO, SOLO EL LISTADO (view-category): las fichas que se abren desde el
   Archive heredan el Itemid del Archive y con él la clase tyt-list, y
   esta regla les quitaba el pie. Por eso el selector lleva también la
   vista: en una ficha (view-article) el pie se queda. */
.tyt-list.view-category .tb-footer { display: none; }

/* LA BARRA SOBRE EL LISTADO DEL ARCHIVE.
   En el resto del sitio la barra flota sobre foto y se funde con ella
   (nav-tyt.css §T2). El Archive es texto sobre papel: al hacer scroll
   las líneas del listado pasaban por debajo de la marca y se leían las
   dos a la vez. Aquí se apaga la fusión —sobre papel la tinta es negra
   sin más— y se le pone a la barra un fondo que solo aparece al hacer
   scroll (js/nav.js §02 pone .is-scrolled a partir de 8 px): papel
   sólido detrás del texto de la barra que se desvanece hacia abajo, con
   un desenfoque del listado en la franja del fundido. En reposo la
   barra sigue transparente, que es como está en el diseño.
   El fondo va en un ::before y no en la propia barra para poder
   extenderlo unos px por debajo de ella (el fundido) sin cambiar su
   alto; z-index negativo lo deja detrás del texto de la barra, que ya
   es contexto de apilamiento por ser fixed.

   NI backdrop-filter NI mask-image AQUÍ, Y ESTO NO ES UN CAPRICHO.
   La primera versión llevaba un blur(6px) del listado con una máscara
   para difuminarlo. En Chrome se veía precioso; en Safari reventaba la
   página: un backdrop-filter dentro de un elemento FIXED obliga a
   WebKit a recomponer el documento entero en cada fotograma y, cuando
   falla la invalidación, el texto del listado se queda dibujado en
   todas las posiciones por las que ha pasado —la página aparece como un
   borrón de líneas superpuestas—. El degradado opaco hace el mismo
   trabajo visual, no cuesta nada y se pinta igual en los dos sitios.
   Si algún día apetece volver al desenfoque, probarlo en Safari de
   verdad antes de subirlo; el headless no reproduce el fallo. */
.tyt-list.view-category .tb-tbar {
  mix-blend-mode: normal;
  color: var(--ink, #000);
}

.tyt-list.view-category .tb-tbar::before {
  content: "";
  position: absolute;
  inset: 0 0 -22px;
  z-index: -1;
  background-image: linear-gradient(to bottom, var(--paper, #fff) 0%, var(--paper, #fff) 62%, transparent 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.tyt-list.view-category .tb-tbar.is-scrolled::before { opacity: 1; }


/* ---------- §M13 · INFO ---------- */
/* INFO es la única página donde el pie se ve ENTERO, porque en esta
   página el pie no es un pie: es el contenido. El emblema en el centro
   de la pantalla y, abajo, el poema, la representación y los legales.
   Encima va el formulario, que llega desde el artículo.
   Se marca con el sufijo de clase de página "tyt-info" en su ítem de
   menú, en los dos idiomas. */

/* El theme base reserva 55vh de alto mínimo al contenido para que el
   pie no flote en páginas cortas (styles.css). Aquí sobra: el pie mide
   una pantalla entera él solo, y ese hueco dejaba a INFO medio vacía.
   No se toca styles.css —es la base intacta—: se anula desde aquí. */
.tyt-info .tb-main { min-height: 0; }

.tyt-info .tb-footer {
  grid-template-rows: 1fr auto;
  place-items: stretch;
  align-content: stretch;
}

.tyt-info .tb-footer .tb-footer__area--footer1 { align-self: center; }

/* Las tres columnas vuelven a verse, abajo del todo */
.tyt-info .tb-footer .tb-footcols { display: grid; }


/* ---------- §M14 · Márgenes blancos en escritorio ---------- */
/* UNA foto concreta que no quiere ir a sangre: se ve ENTERA, sin
   recortar, con papel alrededor.

   Se pide de dos maneras, según dónde estés, y las dos hacen lo mismo:

     · En un artículo del mosaico automático, campo cover_span:
         air         → blanco a los dos lados, foto centrada
         air-left    → el blanco a la izquierda, la foto contra la derecha
         air-right   → el blanco a la derecha, la foto contra la izquierda
     · Maquetando a mano con M3 —el mosaico nuevo o una ficha—, la misma
       idea en clases sobre la columna o la celda:
         tb-air · tb-air-left · tb-air-right

   LO QUE HACE EL TRABAJO es object-fit: contain — la foto se ve entera
   en vez de rellenar recortando—. El alto de la celda no cambia, así que
   el ritmo de la página se mantiene.

   Y EL MARGEN LATERAL SOLO SE LE PONE A LAS VERTICALES. Esto no es un
   capricho: en una celda alta, una foto APAISADA con contain ya deja
   blanco arriba y abajo, y estrecharla además por los lados solo
   consigue empequeñecerla —queda un sello en medio de mucho blanco—.
   La vertical es la que necesita el margen, porque si no llenaría la
   celda de lado a lado.
   La orientación no hay que declararla: la mide el theme (PHP en el
   mosaico automático, js/custom.js §06 en el maquetado a mano) y deja
   puesta la clase.

   SOLO EN ESCRITORIO. En el móvil una columna ya es todo el ancho: meter
   ahí márgenes deja la foto en un sello. Por eso la regla vive dentro
   del media query.

   El aire se regula con --air-side en §M2. */
/* EL AIRE DE UNA PAREJA ES OTRA COSA, y por eso tiene sus propias
   clases en vez de reutilizar las de arriba.
   En una foto sola, "aire" significa: se ve entera, con blanco alrededor
   (contain). En una pareja eso no vale: cada foto se encogería por su
   cuenta hasta caber, y como una suele ser vertical y la otra apaisada
   acaban de tamaños distintos, flotando cada una en su hueco y con
   blanco entre medias. Deja de leerse como un díptico.

   Aquí el aire es solo un ESTRECHAMIENTO de la fila: las dos fotos
   siguen rellenando su celda —misma altura, sin huecos— y se tocan en el
   centro; el blanco aparece únicamente en los dos extremos de la fila.
   Por eso estas reglas NO tocan object-fit: se quedan con el cover de
   §M5.
   La primera lleva el blanco por la izquierda y la segunda por la
   derecha; lo decide html/com_content/category/grid.php. */
@media (min-width: 769px) {
  .tb-works__item--pair-air-left  { padding-left: var(--cover-m, var(--air-side)); }
  .tb-works__item--pair-air-right { padding-right: var(--cover-m, var(--air-side)); }

  .tb-works__item--pair-air-left,
  .tb-works__item--pair-air-right { background-color: var(--paper); }
}

@media (min-width: 769px) {
  .tb-air,
  .tb-air-left,
  .tb-air-right,
  .tb-works__item--air,
  .tb-works__item--air-left,
  .tb-works__item--air-right {
    background-color: var(--paper);
  }

  /* La foto entera, sea como sea */
  .tb-air > img,
  .tb-air > video,
  .tb-air-left > img,
  .tb-air-left > video,
  .tb-air-right > img,
  .tb-air-right > video,
  .tb-works__item--air img,
  .tb-works__item--air video,
  .tb-works__item--air-left img,
  .tb-works__item--air-left video,
  .tb-works__item--air-right img,
  .tb-works__item--air-right video {
    object-fit: contain;
  }

  /* UNA APAISADA CON AIRE OCUPA LA FILA ENTERA.
     Es la otra mitad de la misma idea: "aire" significa ver la foto
     entera y lo más grande posible dentro de su blanco. Una vertical
     cabe de sobra en media columna; una apaisada, no —en un hueco
     estrecho y alto se queda en un sello con blanco por todos lados—.
     Así que se le da la fila y ahí sí luce: a lo ancho de la página
     menos los márgenes.
     La orientación la mide el theme (PHP en el mosaico automático,
     js/custom.js §06 en lo maquetado a mano): no hay nada que declarar.
     No afecta a las parejas, que tienen sus propias clases. */
  .tb-works__item--air.tb-works__item--landscape,
  .tb-works__item--air-left.tb-works__item--landscape,
  .tb-works__item--air-right.tb-works__item--landscape,
  .tb-works__item--air.is-landscape,
  .tb-works__item--air-left.is-landscape,
  .tb-works__item--air-right.is-landscape { grid-column: 1 / -1; }

  .tb-works__item--air.tb-works__item--landscape,
  .tb-works__item--air.is-landscape { padding-inline: var(--cover-m, var(--air-side)); }

  /* NINGUNA FOTO CON AIRE LLEVA BLANCO ARRIBA NI ABAJO.
     Una celda del mosaico mide una pantalla de alto. Si dentro metemos
     una foto vista entera, casi nunca coincide con ese alto, y lo que
     sobra son dos franjas de blanco muertas encima y debajo. Pasa con
     las apaisadas de manera escandalosa, pero también con una vertical
     que no sea lo bastante alta.
     El blanco de una foto con aire tiene que estar a los lados y solo a
     los lados. Así que la celda deja de medir una pantalla y mide lo que
     mida la foto: la fila queda más baja o más alta que las demás, que
     es exactamente lo que pide una foto con aire.
     Hay que anular las DOS alturas de §M5 —la de reserva y la de svh— y
     también el height:100% de la imagen, que si no seguiría estirándose
     al alto de la celda. */
  .tb-works__item--air,
  .tb-works__item--air-left,
  .tb-works__item--air-right { height: auto; }

  .tb-works__item--air img,
  .tb-works__item--air video,
  .tb-works__item--air-left img,
  .tb-works__item--air-left video,
  .tb-works__item--air-right img,
  .tb-works__item--air-right video {
    height: auto;
    object-fit: fill;
  }

  .tb-works__item--air-left.tb-works__item--landscape,
  .tb-works__item--air-left.is-landscape { padding-left: var(--cover-m, var(--air-side)); }

  .tb-works__item--air-right.tb-works__item--landscape,
  .tb-works__item--air-right.is-landscape { padding-right: var(--cover-m, var(--air-side)); }

  /* MARGEN A MEDIDA — campo cover_margin del artículo.
     El número es el BLANCO de cada lado, en tanto por ciento de la fila:
     al 10, dos franjas del 10 % y la foto se queda con el 80 %. La celda
     coge la fila entera para que ese porcentaje se mida sobre la página,
     no sobre media columna.
     Va DESPUÉS de las reglas de aire a propósito: si un artículo lleva
     los dos, el margen lo decide este y el aire solo aporta que la foto
     se vea entera. Los dos juntos tienen sentido —"con 15 % de aire y
     entera"— y así no se pelean por el mismo padding. */
  .tb-works__item--w {
    grid-column: 1 / -1;
    padding-inline: var(--cover-m, 0);
    background-color: var(--paper);
  }

  /* Con un lado marcado, el blanco no se reparte: se va entero a ese
     lado. Se dobla para que la foto ocupe lo mismo que si estuviera
     centrada; lo que cambia es dónde cae el aire, no cuánto hay. */
  .tb-works__item--w.tb-works__item--air-left {
    padding-left: calc(var(--cover-m, 0) * 2);
    padding-right: 0;
  }

  .tb-works__item--w.tb-works__item--air-right {
    padding-left: 0;
    padding-right: calc(var(--cover-m, 0) * 2);
  }

  /* El margen de las VERTICALES. --portrait lo pone PHP en el mosaico
     automático; is-portrait lo pone el JS en lo maquetado a mano. */
  .tb-air.is-portrait,
  .tb-works__item--air.tb-works__item--portrait,
  .tb-works__item--air.is-portrait { padding-inline: var(--cover-m, var(--air-side)); }

  .tb-air-left.is-portrait,
  .tb-works__item--air-left.tb-works__item--portrait,
  .tb-works__item--air-left.is-portrait { padding-left: var(--cover-m, var(--air-side)); }

  .tb-air-right.is-portrait,
  .tb-works__item--air-right.tb-works__item--portrait,
  .tb-works__item--air-right.is-portrait { padding-right: var(--cover-m, var(--air-side)); }

  /* Con margen a un solo lado, la foto se pega al borde contrario. Sin
     esto se quedaría flotando en medio del hueco y el efecto se pierde. */
  .tb-air-left.is-portrait > img,
  .tb-air-left.is-portrait > video,
  .tb-works__item--air-left.tb-works__item--portrait img,
  .tb-works__item--air-left.tb-works__item--portrait video,
  .tb-works__item--air-left.is-portrait img,
  .tb-works__item--air-left.is-portrait video { object-position: right center; }

  .tb-air-right.is-portrait > img,
  .tb-air-right.is-portrait > video,
  .tb-works__item--air-right.tb-works__item--portrait img,
  .tb-works__item--air-right.tb-works__item--portrait video,
  .tb-works__item--air-right.is-portrait img,
  .tb-works__item--air-right.is-portrait video { object-position: left center; }
}


/* ---------- §M20 · Redes del pie ---------- */
/* Una fila de texto, sin iconos: el diseño es tipográfico y un set de
   iconos metería un lenguaje gráfico que no está en ninguna otra parte.
   Los enlaces salen de los parámetros del theme (fieldset "Redes"); el
   que se deje vacío no se pinta y no deja hueco.
   Markup en layouts/social.php. */
.tb-footer__social {
  padding: 0 var(--gutter, 16px) 24px;
}

.tb-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--nav-font, sans-serif);
  font-size: var(--nav-fs, 10px);
  letter-spacing: var(--nav-tracking, 0.08em);
  text-transform: uppercase;
}

.tb-social__link {
  color: inherit;
  text-decoration: none;
}

.tb-social__link:hover { opacity: 0.55; }

/* El correo suele ser el más largo: que no rompa la fila por la mitad */
.tb-social__item { white-space: nowrap; }

@media (max-width: 768px) {
  .tb-social { gap: 8px 18px; }
  .tb-footer__social { padding-bottom: 18px; }
}