/* =========================================================
   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
   ========================================================= */


/* ---------- §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;

  --nav-font:     var(--body);
  --nav-fs:       10px;
  --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: 11px;

  /* Alto de las celdas del mosaico. 90 y no 100 para que asome la fila
     siguiente e invite al scroll. Los dos valores van juntos. */
  --works-h:   90vh;
  --works-h-n: 90;

  /* 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: 10px;
  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);
}

/* 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: 10px;
  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: 90 de pantalla, media o entera da igual. No son 100
   a propósito — asomar el borde de la fila siguiente es lo que invita a
   seguir bajando; a pantalla completa el mosaico parece que se acaba.
   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;
}

/* 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; }

/* 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(--works-air, clamp(16px, 22vw, 420px));
  background: var(--paper);
}

.tb-works__item--full.tb-works__item--portrait img {
  object-fit: contain;
}

/* 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: 10px;
  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 {
  padding: calc(var(--topbar-h, 34px) + 34px) var(--gutter) 140px;
  font-size: 12px;
  line-height: 1.75;
}

/* 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: 46px; }

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

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



.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. */
.tb-lockup {
  text-align: center;
  padding: clamp(90px, 20vh, 240px) var(--gutter);
  background-color: var(--paper);
  color: var(--ink);
}

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

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

.tb-lockup__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 4px 0 2px;
}

/* El "AND" del lockup va a poco más de la mitad que HEELS / DRILLS */
.tb-lockup__title span { font-size: 0.56em; }

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

.tb-lockup__fine {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(8px, 0.65vw, 10px);
  color: var(--ink);
  margin: 4px 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 de tres zonas ---------- */
/* 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: caja alta, tamaño de lectura */
.tb-footpoem,
.tb-footcredits {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--foot-fs, 11px);
  line-height: 1.45;
  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: 10px;
  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: 10px;
}

.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; }
  .tb-works__item--full.tb-works__item--portrait img { object-fit: cover; }

  /* 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: 10px;
    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;
}

.tb-home .tb-footer { display: none; }

/* El archive tampoco 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. */
.tyt-list .tb-footer { display: none; }