/* Perfumaste — pieza "listados". Se carga despues de principal.css. */

/* ==========================================================================
   NOVEDADES  (page-novedades.php)

   Casi todo el trabajo lo hace el catalogo: `.cat`, `.cat__cab`, `.cat__grid`
   y la tarjeta `.card` vienen de principal.css sin una sola linea nueva. Aqui
   solo esta lo que esta pagina tiene y el catalogo no.
   ========================================================================== */

/* La linea que dice con que criterio esta ordenado.
   Ocupa el sitio del selector de orden del catalogo y por eso lleva su mismo
   filete inferior: la rejilla arranca donde el ojo ya espera que arranque. */
.nov__orden {
  padding-block: var(--s4);
  border-bottom: 1px solid var(--hilo);
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
}

.nov__intro { margin-top: var(--s5); padding-top: 0; border-top: 0; }

/* ⚠️ EL ENVOLTORIO ES PARA PODER MARCAR SIN TOCAR LA TARJETA.
   `.card` es la tarjeta de todo el sitio y no tiene ganchos; el distintivo
   solo tiene sentido aqui. Envuelta, la tarjeta sigue siendo la del catalogo
   y basta con que ocupe el alto entero de su celda. */
.nov__i { position: relative; display: flex; }
.nov__i > .card { flex: 1 1 auto; min-width: 0; }

/* El distintivo. Va sobre la plancha blanca de la foto, que tiene un 11% de
   aire por dentro: no tapa el frasco a ningun ancho.
   Sin sombra y sin relleno de color — un filete de 1px y la palabra en laca,
   que es el unico acento de la casa. `pointer-events: none` para que no robe
   el clic al enlace de la foto. */
.nov__et {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  z-index: 2;
  padding: 3px 7px;
  background: var(--papel);
  border: 1px solid var(--hilo);
  border-radius: var(--r-sm);
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--laca);
  pointer-events: none;
}

/* El cierre hace de paginacion: la lista se corta en 48 a proposito
   (ver page-novedades.php) y de ahi en adelante el sitio util es el catalogo. */
.nov__cierre {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--hilo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.nov__cierre p {
  max-width: 48ch;
  margin: 0;
  color: var(--humo);
  font-size: .9rem;
  line-height: 1.6;
}

/* ==========================================================================
   LISTADO SIN RESULTADOS  (inc/vacios.php)

   Es una pagina entera que no tiene producto que enseñar, asi que lo unico que
   puede sostenerla es el texto: se le da el ancho de lectura y el aire de una
   pagina editorial, no el hueco de un error.
   ========================================================================== */

/* ⚠️ SIN FILETE PROPIO. Lo llevo puesto y en pantalla salia un trocito de raya
   suelta: `.vacio` mide 58ch y va centrado, asi que su borde superior quedaba
   mas corto que el de `.cat__cab`, justo encima. Dos rayas desalineadas se leen
   como un fallo de maqueta. La separacion ya la da la cabecera. */
.vacio {
  max-width: 58ch;
  margin-inline: auto;
  padding-block: var(--s8) var(--s9);
  text-align: center;
}

.vacio__t {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.25;
  color: var(--tinta);
}

.vacio__d {
  margin-top: var(--s4);
  color: var(--humo);
  font-size: .95rem;
  line-height: 1.65;
}

/* La primera frase gris es la explicacion de que es lo que falta; se separa un
   poco mas del titular para que se lea como una entradilla y no como pie. */
.vacio__t + .vacio__d { margin-top: var(--s5); }

.vacio__salidas {
  margin-top: var(--s6);
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* En movil los dos botones se apilan a lo ancho: dos cajas de 44px una al lado
   de la otra en 358px utiles dejan el texto partido en dos lineas. */
@media (max-width: 479px) {
  .vacio { padding-block: var(--s7) var(--s8); }
  .vacio__salidas { flex-direction: column; align-items: stretch; }
}