/* assets/css/creditos-fotos.css
   Tabla de atribución de /creditos-fotos. Va encima de seo-guides.css, que ya
   pone la tipografía, el color y la cabecera; aquí solo lo que esa hoja no
   tiene: una tabla larga que se pueda leer en un móvil sin que la página
   entera se desplace en horizontal. */

.creditos { max-width: 1040px; margin: 0 auto; padding: 48px 22px 96px; }
.creditos nav { margin-bottom: 26px; font-size: 12px; opacity: .72; }
.creditos h1 { margin: 0 0 18px; font-size: clamp(30px, 5vw, 52px); letter-spacing: -.04em; }
.creditos .lead { max-width: 68ch; margin: 0 0 18px; line-height: 1.6; }
.creditos .aviso {
  max-width: 68ch; margin: 0 0 34px; padding: 14px 16px;
  border-left: 3px solid currentColor; font-size: 14px; line-height: 1.6; opacity: .85;
}

/* La tabla se desplaza dentro de su caja, no arrastrando el `body`: en un móvil
   una tabla de cuatro columnas es más ancha que la pantalla, y sin esto toda la
   página se movería de lado. */
.creditos table {
  display: block; width: 100%; overflow-x: auto;
  border-collapse: collapse; font-size: 13px;
}
.creditos thead th {
  position: sticky; top: 0;
  padding: 10px 12px; border-bottom: 2px solid currentColor;
  background: inherit; text-align: left; white-space: nowrap;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
}
.creditos tbody th, .creditos tbody td {
  padding: 9px 12px; border-bottom: 1px solid rgba(128, 128, 128, .28);
  text-align: left; vertical-align: top;
}
.creditos tbody th { font-weight: 600; white-space: nowrap; }
.creditos tbody th small { display: block; margin-top: 2px; font-weight: 400; opacity: .6; }
/* El nombre del fichero es lo único que puede ser larguísimo: se le deja
   romper, y así ninguna fila estira la tabla a lo ancho ella sola. */
.creditos tbody td:first-of-type { max-width: 44ch; overflow-wrap: anywhere; }
.creditos tbody tr:hover { background: rgba(128, 128, 128, .07); }
.creditos a { color: inherit; }

@media (max-width: 640px) {
  .creditos { padding: 32px 14px 72px; }
  .creditos table { font-size: 12px; }
}