/* Página /recomendados/ — tarjetas de producto. Generada por docs/recomendados/generar.py */
.bloque { margin-top: var(--gap-5); }
.bloque__head {
  padding: var(--gap-3); border-radius: var(--r-lg);
  background: var(--forest-wash);
}
.bloque__head--b { background: var(--clay-wash); }
.bloque__head h2 { margin: 0; font-family: var(--display); font-size: var(--t-lg); line-height: 1.15; }
.prods { display: grid; grid-template-columns: 1fr; gap: var(--gap-3); margin-top: var(--gap-3); }
.prod {
  display: flex; flex-direction: column; gap: .6rem; overflow: hidden;
  padding: 0 0 var(--gap-3); border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--lift-1);
}
.prod__img { position: relative; aspect-ratio: 4 / 3; background: var(--paper-deep); }
.prod__tag { position: absolute; left: .6rem; bottom: .6rem; padding: .15rem .55rem; border-radius: 99px; background: rgba(26,23,20,.72); color: #fff; font-size: var(--t-xs); line-height: 1.4; }
.foto-aviso { margin: var(--gap-3) 0 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.6; }
.prod__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prod__name { margin: 0; font-family: var(--display); font-size: var(--t-md); line-height: 1.25; }
.prod__desc { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; }
.prod__art { margin: 0; color: var(--ink-mute); font-size: var(--t-xs); line-height: 1.55; }
.prod__art a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.prod__btn { margin-top: auto; align-self: stretch; text-align: center; justify-content: center; }
.prod__name, .prod__desc, .prod__art, .prod__btn { margin-inline: var(--gap-3); }
@media (min-width: 640px) { .prods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .prods { grid-template-columns: repeat(3, 1fr); } }

/* ---- Tarjeta discreta dentro de los artículos (insertar_cajitas.py) ---- */
.prose .rec {
  margin-block: var(--gap-4);
  padding: .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-warm);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.prose .rec__row { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: .5rem .9rem; align-items: center; }
.prose .rec__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--paper-deep); }
.prose .rec__img img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.prose .rec__tag { position: absolute; left: 0; right: 0; bottom: 0; padding: .1rem .25rem; background: rgba(26,23,20,.68); color: #fff; font-size: .62rem; line-height: 1.4; text-align: center; }
.prose .rec__label { display: block; margin-bottom: .1rem; color: var(--ink-mute); font-size: .62rem; letter-spacing: .03em; text-transform: uppercase; }
.prose .rec__name { color: var(--ink); font-family: var(--display); font-size: var(--t-base); font-weight: 600; line-height: 1.25; }
.prose .rec__desc { margin-top: .2rem; color: var(--ink-soft); }
.prose .rec a.rec__btn {
  grid-column: 1 / -1; justify-self: start;
  display: inline-block; padding: .4rem .95rem; border-radius: 999px;
  background: var(--forest); background-image: none; color: var(--paper);
  font-size: var(--t-xs); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.prose .rec a.rec__btn:hover { background: var(--forest-lift); background-image: none; color: var(--paper); }
.prose .rec__af { margin-top: .45rem; color: var(--ink-mute); font-size: .56rem; letter-spacing: .02em; line-height: 1.2; opacity: .8; }
.prose .rec-aviso { margin-top: var(--gap-4); color: var(--ink-mute); font-size: .72rem; line-height: 1.5; }
.prose .rec-aviso a { color: var(--ink-soft); }
.prose .rec__nota { margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--rule); color: var(--ink-mute); font-size: var(--t-xs); line-height: 1.5; }
.prose .rec__nota a { color: var(--ink-soft); font-weight: 500; }
@media (min-width: 640px) {
  .prose .rec__row { grid-template-columns: 6.25rem minmax(0, 1fr) auto; }
  .prose .rec a.rec__btn { grid-column: auto; justify-self: end; }
}
@media (max-width: 420px) {
  .prose .rec__row { grid-template-columns: 1fr; }
  .prose .rec__img { aspect-ratio: auto; height: 9rem; }
}