/* --------------------------------------------------------------------------
   Artes (`cmr.artes-vista`): la página y la fila del escritorio
   -------------------------------------------------------------------------- */

.cmr-artes { padding-top: calc(var(--nav-alto) + 2rem); }
.cmr-artes-cabecera { margin-bottom: 2rem; }
.cmr-artes-cabecera h1 { font-family: var(--serif); font-size: 2.4rem; color: var(--verde); }
.cmr-artes-rejilla {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}
.cmr-arte {
  display: flex; flex-direction: column;
  border: 1px solid var(--crema); background: #fffaf2;
}
.cmr-arte-vista { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--verde); }
.cmr-arte-vista img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicion); }
.cmr-arte-vista:hover img { transform: scale(1.02); }
.cmr-arte-texto {
  aspect-ratio: 16 / 9; margin: 0; padding: 1rem 1.1rem; overflow: auto;
  background: var(--papel); border-bottom: 1px solid var(--crema);
  font: .82rem/1.5 var(--sans); color: var(--tinta); white-space: pre-wrap;
}
.cmr-arte-pie {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem 1.2rem;
}
.cmr-arte-pie h3 { font-size: 1.02rem; font-weight: 700; color: var(--verde); }
.cmr-arte-uso { margin-top: .2rem; font-size: .8rem; color: var(--gris); }
.cmr-arte-nota { margin-top: .5rem; font-size: .82rem; color: var(--tinta); line-height: 1.45; }
.cmr-arte-pie .cmr-boton-mini { flex: 0 0 auto; }

/* En el escritorio: miniaturas, no tarjetas. */
.cmr-esc-artes {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.cmr-esc-arte {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--crema); background: #fffaf2;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.cmr-esc-arte:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.cmr-esc-arte img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.cmr-esc-arte-texto {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  background: var(--papel); color: var(--verde);
}
.cmr-esc-arte-texto svg { width: 2rem; height: 2rem; }
.cmr-esc-arte-pie { display: grid; gap: .15rem; padding: .7rem .85rem .85rem; }
.cmr-esc-arte-pie strong { font-size: .9rem; color: var(--verde); }
.cmr-esc-arte-pie span { font-size: .75rem; color: var(--gris); }

/* Los logos se ven enteros, con aire, sobre el fondo que piden. */
.cmr-arte-vista.es-logo img,
.cmr-esc-arte.es-logo img { object-fit: contain; padding: 8%; box-sizing: border-box; }
.cmr-arte-vista.es-claro, .cmr-esc-arte.es-claro img { background: var(--papel); }
.cmr-arte-vista.es-oscuro, .cmr-esc-arte.es-oscuro img { background: var(--verde); }
.cmr-arte-vista.es-logo:hover img { transform: none; }

/* Bloques de la página y las versiones del logo con sus colores. */
.cmr-artes-bloque + .cmr-artes-bloque { margin-top: 3rem; }
.cmr-artes-titulo {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--verde); margin-bottom: .4rem;
}
.cmr-artes-bajada { margin-bottom: 1rem; font-size: .88rem; }
.cmr-arte-colores { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.cmr-arte-color {
  display: grid; gap: .25rem; width: 5.2rem; font-size: .72rem; color: var(--tinta);
}
.cmr-arte-color img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border: 1px solid var(--crema); }
.cmr-arte-color:hover img { outline: 2px solid var(--verde); }
.cmr-arte-color span { display: flex; align-items: center; gap: .3rem; }
.cmr-arte-color i { width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.cmr-arte-pdf { display: grid; place-content: center; justify-items: center; gap: .5rem; color: var(--verde); }
.cmr-arte-pdf svg { width: 3rem; height: 3rem; color: currentColor !important; }
.cmr-arte-pdf span { font-weight: 700; letter-spacing: .14em; }
.cmr-arte-vista.es-familia img { object-fit: contain; }
.cmr-arte-vista.es-familia:hover img { transform: none; }
.cmr-arte-color img { object-fit: contain; }