/* ═══════════════════════════════════════════════════════════════
   LET'S WORK TOGETHER — partials/trabajemos.php

   La banda de cierre. Va justo encima del footer, que es donde llega
   quien ha bajado la página entera: si llegó hasta el final es que le
   interesó, y una invitación pesa más ahí que arriba del todo, donde
   todavía no sabe quién eres.

   HOJA APARTE Y NO DENTRO DE equipo.css, aunque nació con /the-team: el
   partial se incluye ya en dos páginas —/the-team y /faq— y lo pedirá
   una tercera. Con las reglas metidas en equipo.css, /faq tendría que
   cargar el CSS entero de las tarjetas del equipo para dibujar una
   banda de texto, o —peor— acabaría con su propia copia de estas
   reglas. Quien incluya el partial declara 'trabajemos' en $css y ya.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* La referencia pinta el enlace en ROSA. Aquí va con --acento, el de
     la marca: un tercer color de acento en un sitio que ya tiene el
     suyo hace que la sección parezca de otra web. Para volver al rosa
     basta cambiar esta línea. */
  --tj-acento: var(--acento);
}

.tj {
  background: var(--bg);
  padding: clamp(50px, 9vh, 120px) var(--hd-pad) clamp(60px, 11vh, 150px);
}

.tj-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .45fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: start;
}

.tj-titular {
  font-size: clamp(40px, 8.6vw, 132px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
  text-transform: uppercase;
  color: var(--tinta-alta);
}

/* Cada renglón es un bloque para que la miniatura pueda ir DENTRO del
   segundo, alineada con las letras. Suelta en el flujo del titular se
   iría a la línea base del texto y quedaría colgando. */
.tj-linea {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 26px);
}

.tj-mini {
  flex-shrink: 0;
  display: block;
  /* Atada al ancho de la ventana, no a un tamaño fijo: así crece y
     encoge con el titular en vez de descuadrarlo en pantallas
     pequeñas. */
  width: clamp(64px, 11vw, 168px);
  aspect-ratio: 16 / 10;
  border-radius: clamp(8px, 1vw, 16px);
  overflow: hidden;
  background: var(--gris);
}
/* display: contents — el <picture> desaparece del diseño y el <img>
   pasa a ser hijo directo de su contenedor, que es lo que las reglas de
   abajo dan por hecho. Es la convención de este sitio; la estableció
   .pf-obra picture en css/portfolio.css. Aquí había tres líneas
   —display:block, width y height— haciendo lo mismo peor. */
.tj-mini picture { display: contents; }

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

.tj-lado {
  /* Alineado con el segundo renglón del titular y no con el primero:
     arriba del todo queda flotando, sin nada a su izquierda. */
  padding-top: clamp(6px, 3vh, 40px);
}

.tj-nota {
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--tinta-alta);
  margin-bottom: clamp(14px, 2.4vh, 26px);
}

.tj-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tj-acento);
  text-decoration: none;
  /* El subrayado se dibuja aquí para poder separarlo del texto: el del
     navegador va pegado a las letras y con este espaciado se lee mal. */
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 3px;
  transition: color .25s ease, gap .3s ease;
}
.tj-cta:hover {
  color: var(--tinta-alta);
  gap: 16px;
}

.tj-flecha {
  width: clamp(30px, 2.6vw, 44px);
  height: auto;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Fuera del subrayado: la línea de abajo es del rótulo, no de la
     flecha, y pasando por debajo de ella parecería tachada. */
  margin-bottom: -3px;
}


/* ── Tamaños ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* A una columna, con el texto debajo del titular. */
  .tj-dentro { grid-template-columns: minmax(0, 1fr); }
  .tj-lado   { padding-top: clamp(16px, 3vh, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .tj-cta { transition: none; }
  .tj-cta:hover { gap: 10px; }
}