/* ==========================================================================
   trabajo.css — páginas de trabajo (trabajos/<slug>/), al estilo de /i
   Se carga SIEMPRE después de base.css y solo en las páginas de trabajo:
   /i no la enlaza, así que nada de aquí puede afectarla.

   Reglas del amarillo (no negociables):
   - #FECD0D, #E6BF00 y #C09100 NUNCA son color de texto sobre fondo claro.
   - Solo se usan como: fondo del CTA y de la pastilla de numeración (con el
     texto en #111), subrayado de 2px en el hover de los enlaces, barra de
     3rem x 3px sobre las cifras, ::selection y halo del doble anillo de foco.
   - Fuera de :root no hay ni un color literal: solo var(), transparent y
     currentColor.
   ========================================================================== */

/* Tokens. Los mismos valores que /i, más la marca del logo y el ancho de la
   columna de lectura. */
:root {
  --bg: #fdfdfc; --ink: #111; --mute: rgba(0, 0, 0, 0.4); --mute-read: rgba(0, 0, 0, 0.6);
  --line: #f2f2f2; --line-2: #ededed; --u: #d9d9d9; --u-hover: #666;
  --font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "Newsreader", Georgia, serif;
  --container: 36.375rem;
  --duration-snappy: 220ms; --duration-smooth: 300ms; --ease-smooth: cubic-bezier(0.19, 1, 0.22, 1);
  --brand: #FECD0D; --brand-hover: #E6BF00; --brand-active: #C09100;
}

/* Texto base de /i: 0.875rem / 1.25rem, wght 460. base.css deja 16px porque
   es lo que usa /i en el body; aquí se ajusta al texto de lectura. */
body {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.00563rem;
  font-variation-settings: "wght" 460;
}

p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.00563rem;
  font-variation-settings: "wght" 460;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Ninguna imagen, vídeo o SVG se sale de su contenedor: si no cabe, encoge
   (height: auto mantiene la proporción que reservan width/height). */
img, video, svg { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Los dos anchos de la página
   La página de un trabajo tiene una columna de lectura (la de /i) y un
   contenedor más ancho para lo que necesita más sitio (el hero y la galería).
   Los dos se centran solos y llevan dentro su propio relleno lateral: no hay
   márgenes negativos ni ninguna medida en vw, así que nada puede salirse de la
   ventana ni provocar scroll horizontal.
   En móvil el relleno lateral es el de /i (1.5rem); en escritorio, la columna
   conserva el 1rem de /i para que su ancho de línea sea exactamente el de
   antes.
   -------------------------------------------------------------------------- */
.container {
  max-width: 64rem;
  padding-inline: 0;
}

.contenido,
.contenido-ancho {
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 1rem;
}

.contenido { max-width: var(--container); }

.contenido-ancho {
  max-width: 64rem;
  padding-inline: 1.5rem;
}

@media screen and (max-width: 768px) {
  .contenido { padding-inline: 1.5rem; }
}

/* Selección: fondo de marca y texto #111 (12,55:1). */
::selection { color: var(--ink); background: var(--brand); }
::-moz-selection { color: var(--ink); background: var(--brand); }

/* Doble anillo de foco, estricto: el hueco de 2px entre el elemento y el
   outline se pinta del color del fondo (--bg), el outline #111 ocupa de 2px a
   4px por fuera del borde y el halo de marca va de 4px a 8px, siempre POR
   FUERA del outline (las sombras se pintan de atrás adelante, así que el aro
   de --bg tapa el amarillo de 0px a 2px; el outline se pinta encima de las dos
   sombras). Vale para todos los interactivos: vuelta, enlaces, cards, CTA,
   Telegram y el conejo del pie. En las cards el anillo envuelve la card entera
   (el <a>), así que el overflow:hidden de .pager-media no lo recorta. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 8px var(--brand);
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* El velo degradado superior de /i es un recurso de su portada: sobre las
   fotografías de los trabajos ensuciaría el borde de arriba. */
.container::before { content: none; }

/* Vuelta a /i. */
.volver { display: inline-block; margin-bottom: 2rem; }

/* Enlaces de texto: subrayado de 1px #d9d9d9; en hover, 2px de marca. */
.enlace { position: relative; display: inline-block; color: var(--ink); }
.enlace::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--u);
  transition: height var(--duration-snappy) ease, background-color var(--duration-snappy) ease;
}
.enlace:hover::before { height: 2px; background: var(--brand); }
.enlace:active::before { background: var(--brand-active); }

/* Enlaces dentro de un párrafo (por ejemplo «Probar LinkBuilder»). A diferencia
   de .enlace no llevan un pseudo-elemento: el subrayado es el del propio texto,
   así el enlace puede partirse entre dos líneas sin dejar una raya suelta. */
.enlace-texto {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--u);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--duration-snappy) ease,
              text-decoration-thickness var(--duration-snappy) ease;
}
.enlace-texto:hover { text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.enlace-texto:active { text-decoration-color: var(--brand-active); }

/* Cabecera del trabajo: un solo H1 y, debajo, el tipo y el año en atenuado
   legible. La jerarquía la marcan la imagen y el aire, no el tamaño. */
.obra-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0 0.5rem;
}

.obra-head h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: -0.01rem;
  color: var(--ink);
  text-wrap: balance;
}

.obra-head time { color: var(--mute-read); }

/* Entradilla: lema en la cursiva Newsreader de /i y el párrafo literal. */
.entradilla { margin-top: 1.5rem; }
.entradilla .lema { margin-top: 0; }

.entradilla em {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 0.9375rem;
  font-weight: 430;
  font-variation-settings: "opsz" 10;
  letter-spacing: 0.01rem;
  line-height: 1;
}

/* Prosa: párrafos con 1rem arriba y 70ch de ancho de lectura. */
.prosa p { margin-top: 1rem; max-width: 70ch; }

.subtitulo {
  margin-top: 2rem;
  color: var(--ink);
  font-weight: 500;
  font-variation-settings: "wght" 500;
  max-width: 70ch;
}

/* Listas de «* texto»: sin negrita y con guion atenuado. */
.lista { margin-top: 1rem; max-width: 70ch; }
.lista li { position: relative; padding-left: 1rem; }
.lista li + li { margin-top: 0.25rem; }
.lista li::before { content: "–"; position: absolute; left: 0; color: var(--mute-read); }

/* Pasos numerados (los «1. 2. 3.» del original): la misma lista, con el número
   que pone el navegador en lugar del guion. */
.lista-numerada { list-style: decimal outside; padding-left: 1.125rem; }
.lista-numerada li { padding-left: 0; }
.lista-numerada li::before { content: none; }

/* Figuras. El fondo #f2f2f2 se pinta en la propia imagen: ocupa exactamente el
   hueco que reservan width/height, así que no hay CLS ni marco de sobra. */
.foto img { background: var(--line); }

/* Pie de foto: literal, en el mismo atenuado legible del pie y con el ancho de
   lectura de la prosa. Solo aparece cuando el texto original describe la
   imagen; si no, no se deja ningún hueco. */
.pie {
  margin-top: 0.5rem;
  max-width: 70ch;
  color: var(--mute-read);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  text-wrap: pretty;
}

/* Una figura con pie se encoge hasta el ancho natural de su imagen (el mismo
   --natural que usa la imagen), para que el pie empiece y acabe donde empieza y
   acaba la foto y no quede descolgado a la izquierda de una imagen centrada. */
.foto-con-pie { width: min(100%, var(--natural, 100%)); margin-inline: auto; }

/* Hero: ocupa todo el ancho de su .contenido-ancho (el ancho de la página sin
   el relleno lateral) y se ve entero. Sin radio ni sombra, como /i. 3rem
   arriba, 2rem abajo. */
.hero {
  margin: 3rem 0 2rem;
}

/* La portada se ve entera: sin recorte vertical ni object-fit. Manda el ancho
   y la imagen conserva su proporción real (el alto sale de width/height). */
.hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ficha de datos: el patrón de fila de .post-list de /i, con columnas fijas y
   el separador #f2f2f2 naciendo donde nace en .post-list: en la línea de la
   columna del valor, sin pasar por debajo de la etiqueta. Las filas son
   display:contents y cada celda se coloca sola en la rejilla.

   En móvil la columna de la etiqueta mide 5.5rem (88px): son los 66px que
   ocupa «Disciplinas» a 0.8125rem más los 8px de relleno derecho, con holgura
   para la fuente de reserva. Así la etiqueta más larga cabe entera en una
   línea y no hay que guionizarla ni partirla. */
.ficha {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  margin-top: 3rem;
}

/* Si hay hero delante, él ya deja 2rem abajo: no se suman los 3rem. El hero y
   la ficha son dos bloques hermanos de la página (cada uno con su ancho), así
   que la condición se mira en sus envoltorios, no en las figuras. */
.contenido-hero + .contenido-ficha .ficha { margin-top: 0; }

.ficha-fila { display: contents; }

/* La etiqueta va entera en una línea: sin guiones ni roturas de palabra. La
   columna de 5.5rem está medida para la etiqueta más larga, así que ningún
   dt necesita partirse. */
.ficha dt {
  padding: 0.735rem 0.5rem 0.735rem 0;
  color: var(--mute-read);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  min-width: 0;
}

.ficha dd {
  padding: 0.735rem 0;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: break-word;
}

/* El separador solo ocupa la columna del valor: empieza exactamente en la
   línea de la rejilla, igual que el ::after de .post-list empieza en 6.75rem
   (5.5rem en móvil). */
.ficha-fila:not(:first-child) dd { border-top: 1px solid var(--line); }

/* Frontera de móvil/escritorio igual que la de .post-list de base.css
   (max-width: 520px): el diseño de móvil llega hasta 520px incluido y el de
   escritorio empieza en 520.02px, así a 520px no hay dos reglas a la vez. */
@media screen and (min-width: 520.02px) {
  .ficha { grid-template-columns: 6.75rem minmax(0, 1fr); }

  /* A partir de aquí «Disciplinas» cabe en la columna de /i con el tamaño de
     etiqueta de /i, así que no hace falta el 0.8125rem de móvil. */
  .ficha dt {
    padding-right: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Secciones numeradas. */
.seccion { margin-top: 3rem; }

.seccion-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--mute-read);
  font-size: 0.875rem;
  font-weight: 460;
  font-variation-settings: "wght" 460;
  letter-spacing: -0.00563rem;
  text-wrap: balance;
}

/* Pastilla de numeración: fondo de marca con el texto en #111. */
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  padding: 0.1875rem 0.3125rem;
  background: var(--brand);
  color: var(--ink);
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Cifras. Doña Manolita no tiene cifras numéricas, así que hoy no se pinta la
   fila; el estilo se queda para los trabajos que sí las tienen. */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  margin-top: 2rem;
  max-width: 70ch;
}

.cifra { min-width: 0; }

.cifra::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--brand);
  margin-bottom: 0.75rem;
}

.cifra dt {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 430;
  font-variation-settings: "opsz" 10;
  line-height: 1;
  color: var(--ink);
}

.cifra dd {
  margin-top: 0.25rem;
  color: var(--mute-read);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

/* La etiqueta de la cifra, en tinta y al tamaño del cuerpo; la nota (si la hay)
   se queda en el atenuado legible de arriba. */
.cifra dd.cifra-etiqueta {
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Cifra sin número: el original usa un H2 de texto («Nuevas vía de negocio»).
   Va al tamaño del cuerpo, en la fuente de la casa, no en la cursiva grande. */
.cifra-texto dt {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: -0.00563rem;
}

@media screen and (max-width: 520px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Galería: ocupa todo el ancho de su .contenido-ancho, con 1rem de hueco entre
   piezas (también en móvil, donde el contenedor ya deja el relleno lateral).
   Las imágenes pequeñas no se amplían por encima de su tamaño natural: cada
   <img> declara --natural con su ancho real y se centra sola. */
.galeria {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.galeria figure { min-width: 0; }

.galeria img {
  display: block;
  width: 100%;
  max-width: var(--natural, 100%);
  height: auto;
  margin-inline: auto;
}

/* Pares de imágenes verticales (proporción alto/ancho > 1,2): en escritorio, dos
   columnas con el mismo 1rem de hueco de la galería y las dos fotos alineadas
   arriba; en móvil, una debajo de otra. El emparejamiento lo decide el
   generador, que solo junta dos verticales seguidas. */
.galeria-par {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1rem;
  min-width: 0;
}

@media screen and (min-width: 768.02px) {
  .galeria-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Imagen rota (JS, sin handlers inline): en vez de dejar un hueco se pinta un
   bloque #f2f2f2 con la proporción reservada y el nombre del trabajo centrado
   en atenuado. trabajo.js pasa el ancho natural y la proporción por
   --ancho-roto y --ratio-roto, así que el bloque ocupa exactamente el mismo
   sitio que ocuparía la imagen. El hero usa este mismo bloque (con su
   proporción real, 1483/733): si falla la portada, no se recorta nada ni queda
   un hueco. */
.foto.is-rota { display: grid; place-items: center; }
.foto.is-rota img { display: none; }

.foto-rota,
.pager-rota {
  color: var(--mute-read);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  text-align: center;
}

.foto-rota {
  display: grid;
  place-items: center;
  width: min(100%, var(--ancho-roto, 100%));
  aspect-ratio: var(--ratio-roto, 16 / 10);
  padding: 1rem;
  background: var(--line);
}

/* Las cards de anterior y siguiente conservan su hueco 16:10 aunque la imagen
   falte, y dentro va el nombre del trabajo: nunca se quedan en blanco ni
   empujan el layout. */
.pager-media.is-rota {
  display: grid;
  place-items: center;
  padding: 1rem;
}

.pager-media.is-rota img { display: none; }

/* Anterior y siguiente. */
.pager { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }

.pager-card { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }

.pager-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--line);
}

.pager-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-smooth) var(--ease-smooth);
}

.pager-label { color: var(--mute-read); font-size: 0.8125rem; line-height: 1rem; }
.pager-nombre { color: var(--ink); }
.pager-rol { color: var(--mute-read); }

@media screen and (min-width: 520px) {
  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager-card { transition: opacity 140ms ease; }
}

/* El hover de las cards, solo con puntero fino y sin reduced motion. */
@media screen and (min-width: 520px) and (prefers-reduced-motion: no-preference) {
  .pager:hover .pager-card { opacity: 0.3; }
  .pager:hover .pager-card:hover { opacity: 1; }
  .pager-card:hover .pager-media img { transform: scale(1.02); }
}

/* CTA de contacto: ancho de columna, 3rem arriba. */
.cta { margin-top: 3rem; }

.cta-texto { max-width: 70ch; }

.cta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  background: var(--brand);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: -0.00563rem;
  text-align: center;
  transition: background-color var(--duration-snappy) ease, color var(--duration-snappy) ease;
}

.boton:hover { background: var(--brand-hover); }
.boton:active { background: var(--brand-active); }

/* El pie: mismo reloj y mismo conejo que /i, con el atenuado legible
   (--mute-read ≈ 5,6:1) en lugar del 40% de negro de /i (≈ 2,8:1). Solo en los
   trabajos: base.css se queda como está para no tocar /i. */
.footer-container p { color: var(--mute-read); }

/* Y como /i, el pie aparece con una transición de 0,3s en cuanto pie.js pone el
   reloj en hora. La regla que lo esconde requiere html.js (lo pone el script
   mínimo del <head>, antes de pintar nada): sin JavaScript el reloj y el conejo
   se ven desde el primer momento. */
html.js #clock-wrap,
html.js #bunny-wrap {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* El conejo del pie, como <button> en los trabajos (en /i es un <span>): hay
   que quitarle el fondo y el relleno del navegador, darle el color del pie y
   una zona táctil de 44x44 con el icono centrado dentro. Como el SVG de pie.js
   mide 32x32, el recuadro crece 6px por cada lado: el margen inferior (-13px)
   deja el alto de línea del pie igual que en /i (31px) y el desplazamiento
   relativo de -6px sube el recuadro esos mismos 6px, así el dibujo queda
   exactamente en la línea del reloj, sin moverse ni un píxel respecto a /i. */
button.bunny-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  position: relative;
  top: -6px;
  margin: 0 0 -13px -0.125rem;
  padding: 0;
  background: transparent;
  color: var(--mute-read);
  border: 0;
  line-height: 0;
  font: inherit;
}

/* pie.js pinta el SVG con fill y stroke fijos en rgba(0,0,0,.4) (≈ 2,8:1), que
   se queda corto para un gráfico. En los trabajos se suben al atenuado
   legible. Se apunta solo a lo que lleva color propio en el dibujo: los
   <path>/<rect> con fill (orejas, cuerpo y ojos) y el <g> de las «z» con
   stroke, que tiene fill="none". Así no hace falta ningún color literal. */
button.bunny-toggle svg [fill]:not([fill="none"]) { fill: var(--mute-read); }
button.bunny-toggle svg g[stroke] { stroke: var(--mute-read); }

/* Entrada escalonada de /i: 500ms, translateY de 8px, 50ms entre elementos y
   un máximo de 400ms. El retardo lo pone trabajo.js en cada elemento y después
   añade .entrada, así la animación arranca ya con los retardos repartidos (si
   la clase .js del <head> bastara, el primer fotograma saldría antes de
   tiempo). Sin JavaScript no hay ni .js ni .entrada: el contenido se ve
   entero. */
@keyframes staggerIn {
  0% { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

html.js.entrada .stagger > .stagger-item { animation: staggerIn 0.5s ease both; }

/* Revelado de la galería: opacidad de 0 a 1 y translateY de 8px en 300ms, una
   sola vez. La clase que oculta (.reveal-pendiente) la pone trabajo.js SOLO a
   los bloques que están por debajo del viewport en la carga: lo que ya se ve
   no se esconde nunca, y una captura de página completa no se encuentra
   imágenes invisibles. */
.reveal {
  transition: opacity var(--duration-smooth) var(--ease-smooth),
              transform var(--duration-smooth) var(--ease-smooth);
}

html.js .reveal.reveal-pendiente { opacity: 0; transform: translateY(8px); }
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Sin movimiento: ni escalonado, ni translate, ni scale, ni scroll suave.
   Solo se conservan los cambios de color y de opacidad. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js.entrada .stagger > .stagger-item { animation: none; }
  html.js .reveal,
  html.js .reveal.reveal-pendiente,
  html.js .reveal.is-visible { opacity: 1; transform: none; }
  .reveal { transition: none; }
  .pager-card,
  .pager-media img { transition: none; }
  .pager:hover .pager-card { opacity: 1; }
  .pager-card:hover .pager-media img { transform: none; }
  .bunny-toggle :is(g, path, rect) { animation: none !important; }
}