/* =====================================================================
   CONTACT  ·  una columna de texto abajo a la derecha, con mucho hueco
   Fuente, tamaño y ancho de la columna: ajustes.css sección 6
   ===================================================================== */

.contacto {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--margen) * 5) var(--margen) calc(var(--margen) * 3.2);
  font-family: var(--fuente-about);
  font-size: var(--about-tam);
  line-height: 1.7;
}
.contacto__interior {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--about-ancho), 45vw));
  gap: clamp(28px, 7vw, 120px); align-items: start;
  width: 100%; margin-top: auto;
}
.contacto__columna { width: min(100%, var(--about-ancho)); }
.contacto__lateral { min-width: 0; }
.contacto__foto {
  display: block;
  width: min(30vw, 600px);
  height: auto;
  object-fit: contain;
  margin: clamp(70px, 8vw, 150px) 0 0 clamp(150px, 24vw, 460px);
  transform: rotate(-10deg);
}

.contacto__texto p + p { margin-top: 1em; }

/* filtros de la lista: All · Films · Series · Commercials · Videoclips */
.filtros { display: flex; flex-wrap: wrap; gap: 1.2em; margin: 2.6em 0 1.2em; }
.filtros button { color: var(--color-suave); font: inherit; transition: color .3s; }
.filtros button.activo, .filtros button:hover { color: var(--color-tinta); }

/* la lista, con scroll propio (alto: ajustes.css) y un fundido abajo */
.trabajos {
  list-style: none;
  /* alto fijo: al cambiar de filtro (aunque no haya nada) no se mueve nada */
  height: var(--about-alto-lista);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 2em;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
}
.trabajos::-webkit-scrollbar { display: none; }
.trabajos .fila { display: grid; grid-template-columns: 3.4em 1fr; gap: .9em; }
.trabajos .fila span:not(.titulo) { color: var(--color-suave); }
.trabajos a.fila:hover .titulo { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.trabajos li.oculta { display: none; }
.trabajos.vacia::after { content: "—"; display: block; color: var(--color-suave); }

.contacto__datos { min-width: 0; padding-left: clamp(64px, 12vw, 220px); }
.contacto__datos a { overflow-wrap: anywhere; }
.contacto__datos a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.contacto__datos a:hover { border-color: currentColor; }

@media (min-width: 1001px) and (max-width: 1300px) {
  .contacto__datos { padding-left: clamp(36px, 8vw, 76px); }
  .contacto__foto { width: min(30vw, 380px); margin-left: 23vw; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .contacto__datos { padding-left: clamp(36px, 8vw, 76px); }
  .contacto__foto { width: min(30vw, 340px); margin-left: clamp(30px, 10vw, 100px); }
}

@media (max-width: 700px) {
  .contacto { padding-bottom: calc(var(--margen) + 2rem); }
  .contacto__interior { display: flex; flex-direction: column; gap: 2.2em; }
  .contacto__columna { order: 1; }
  .contacto__lateral { order: 2; width: 100%; }
  .contacto__datos { padding-left: 0; }
  .contacto__foto { width: min(70vw, 360px); margin: 2.5em auto 1em; }
  .trabajos .fila { grid-template-columns: 3em 1fr; gap: 0 .8em; }
}